@netgrif/components 6.4.0-beta.9 → 6.4.0-rc.2

package/fesm2015/netgrif-components.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
-import { Component, NgModule, Input, EventEmitter, Output, Optional, Inject, forwardRef, ViewChild, ViewEncapsulation, SkipSelf, Self, Injector, Injectable } from '@angular/core';
+import { Component, NgModule, Input, EventEmitter, Output, Optional, Inject, forwardRef, ViewChild, ViewEncapsulation, SkipSelf, Self, Injector, HostListener, Injectable } from '@angular/core';
 import * as i1 from '@netgrif/components-core';
-import { AbstractRoleAssignmentComponent, RoleAssignmentService, AbstractLdapGroupRoleAssignmentComponent, RoleAssignmentLdapGroupService, AbstractUserInviteComponent, MaterialModule, TranslateLibModule, AbstractAuthenticationOverlayComponent, AbstractSessionIdleComponent, AbstractIframeCardComponent, AbstractCountCardComponent, AbstractCustomCardComponent, DashboardSingleData, DashboardMultiData, AbstractDashboardContentComponent, AbstractDataFieldTemplateComponent, AbstractBooleanFieldComponent, NAE_INFORM_ABOUT_INVALID_DATA, AbstractButtonFieldComponent, AbstractDateFieldComponent, DATE_FORMAT, AbstractDateTimeFieldComponent, DATE_TIME_FORMAT, AbstractEnumerationFieldComponent, AbstractEnumerationAutocompleteSelectFieldComponent, DATA_FIELD_PORTAL_DATA, AbstractEnumerationSelectFieldComponent, AbstractEnumerationListFieldComponent, AbstractFileFieldComponent, AbstractFileListFieldComponent, AbstractMultichoiceFieldComponent, AbstractMultichoiceSelectFieldComponent, AbstractMultichoiceListFieldComponent, AbstractNumberFieldComponent, AbstractTextFieldComponent, AbstractTextareaFieldComponent, AbstractRichTextareaFieldComponent, AbstractSimpleTextFieldComponent, AbstractUserFieldComponent, AbstractHtmlTextareaFieldComponent, AbstractCurrencyNumberFieldComponent, AbstractDefaultNumberFieldComponent, AbstractPasswordTextFieldComponent, FilePreviewType, AbstractEnumerationStepperFieldComponent, AbstractEnumerationIconFieldComponent, AbstractEnumerationAutocompleteDynamicFieldComponent, AbstractFilterFieldComponent, AbstractSearchOperandInputComponent, SearchInputType, DATE_FORMAT_STRING, DATE_TIME_FORMAT_STRING, AbstractSearchConfigurationInputComponent, OperatorTemplatePartType, AbstractSearchPredicateComponent, NAE_SEARCH_CATEGORIES, AbstractSearchClauseComponent, AbstractAdvancedSearchComponent, AdvancedSearchComponentInitializationService, SimpleFilter, AbstractFilterFieldContentComponent, NAE_FILTER_FIELD, NAE_BASE_FILTER, AllowedNetsService, AllowedNetsServiceFactory, CategoryFactory, CategoryResolverService, SearchService, AbstractUserAssignItemComponent, AbstractUserAssignListComponent, AbstractUserAssignComponent, NAE_SIDE_MENU_CONTROL, UserListService, CovalentModule, UtilityModule, NAE_USER_ASSIGN_COMPONENT, AbstractI18nFieldComponent, AbstractI18nDividerFieldComponent, AbstractI18nTextFieldComponent, AbstractMultichoiceAutocompleteFieldComponentComponent, AbstractUserListFieldComponent, AbstractMultiUserAssignItemComponent, AbstractMultiUserAssignListComponent, AbstractMultiUserAssignComponent, AbstractTaskRefFieldComponent, AbstractTaskRefDashboardTileComponent, NAE_TASK_OPERATIONS, FrontActionService, TaskContentService, UnlimitedTaskContentService, AbstractDashboardLineChartTextFieldComponent, AbstractDashboardPieChartTextFieldComponent, AbstractDashboardPortalTextFieldComponent, AbstractDashboardBarChartTextFieldComponent, AbstractDashboardIframeTextFieldComponent, AbstractFilterFieldTabViewContentComponent, AbstractBooleanDefaultFieldComponent, AbstractButtonDefaultFieldComponent, AbstractDateDefaultFieldComponent, AbstractDateTimeDefaultFieldComponent, AbstractFileDefaultFieldComponent, AbstractFileListDefaultFieldComponent, AbstractFilterDefaultFieldComponent, Dashboard, AbstractUserDefaultFieldComponent, AbstractUserListDefaultFieldComponent, AbstractTaskRefDashboardFieldComponent, AbstractSortModeComponent, AbstractSearchModeComponent, AbstractEditModeComponent, AbstractLoadingModeComponent, AbstractHeaderComponent, MultichoiceField, EnumerationField, CaseHeaderService, TaskHeaderService, WorkflowHeaderService, HeaderSearchService, AbstractFieldComponentResolverComponent, DateField, DateTimeField, FileField, FileListField, AbstractTaskContentComponent, NAE_ASYNC_RENDERING_CONFIGURATION, AbstractPanelComponent, AbstractImmediateFilterTextContentComponent, NAE_FILTER_TEXT, AbstractImmediateFilterTextComponent, AbstractPanelItemComponent, AbstractTaskPanelComponent, BOOLEAN_VALUE_LABEL_ENABLED, NAE_TASK_PANEL_DISABLE_BUTTON_FUNCTIONS, NAE_TASK_FORCE_OPEN, SingleTaskContentService, TaskDataService, TaskEventService, AssignTaskService, DelegateTaskService, CancelTaskService, FinishTaskService, TaskRequestStateService, DataFocusPolicyService, AssignPolicyService, FinishPolicyService, ChangedFieldsService, SubjectTaskOperations, AbstractTaskListPaginationComponent, NAE_TAB_DATA, NetgrifPaginatorIntl, AbstractTaskViewComponent, TaskViewService, ViewIdService, AbstractTaskRefListFieldComponent, AbstractFulltextSearchComponent, Filter, FilterType, Category, AbstractSearchComponent, NAE_SEARCH_COMPONENT_CONFIGURATION, NAE_FILTERS_FILTER, NAE_NAVIGATION_ITEM_TASK_DATA, NAE_DEFAULT_CASE_SEARCH_CATEGORIES, NAE_DEFAULT_TASK_SEARCH_CATEGORIES, AbstractTaskListComponent, AbstractTabbedTaskViewComponent, HeaderMode, OverflowService, tabbedAllowedNetsServiceFactory, NAE_TASK_VIEW_CONFIGURATION, tabbedTaskViewConfigurationFactory, NAE_DEFAULT_HEADERS, navigationItemTaskViewDefaultHeadersFactory, LoadingEmitter, AbstractCasePanelComponent, AbstractCaseListPaginatorComponent, AbstractCaseViewComponent, SearchMode, NAE_CASE_REF_CREATE_CASE, NAE_CASE_REF_SEARCH, CaseViewService, NAE_VIEW_ID_SEGMENT, defaultCaseSearchCategoriesFactory, AbstractCaseRefDefaultComponent, AbstractMultichoiceCaseRefComponent, AbstractEnumerationCaseRefComponent, CurrencyModule, FrontActionModule, CustomDateAdapter, AbstractLegalNoticeComponent, AbstractEmailSubmissionFormComponent, AbstractLoginFormComponent, AbstractRegistrationFormComponent, NAE_MIN_PASSWORD_LENGTH, AbstractForgottenPasswordComponent, AbstractChangePasswordComponent, ProfileModule, AbstractLanguageSelectorComponent, AbstractInternalLinkComponent, AbstractLogoutShortcutComponent, AbstractQuickPanelComponent, AbstractUserCardComponent, AbstractNavigationTreeComponent, AbstractNavigationDrawerComponent, AbstractNavigationRailComponent, AbstractGroupNavigationComponentResolverComponent, navigationItemTaskFilterFactory, navigationItemTaskAllowedNetsServiceFactory, navigationItemTaskCategoryFactory, AbstractBreadcrumbsComponent, AbstractCaseListComponent, AbstractTabbedCaseViewComponent, MergeOperator, FilterExtractionService, BaseAllowedNetsService, navigationItemCaseViewDefaultHeadersFactory, AbstractTabCreationDetectorComponent, AbstractTabViewComponent, extractFilterFromData, extractIconAndTitle, extractFieldValueFromData, GroupNavigationConstants, extractSearchTypeFromData, groupNavigationViewIdSegmentFactory, GroupNavigationComponentResolverService, RoutingBuilderService, defaultTaskSearchCategoriesFactory, DefaultSearchCategoriesModule, AbstractWorkflowPanelComponent, SnackBarModule, AbstractSingleTaskComponent, AbstractNavigationDoubleDrawerComponent, NAE_GROUP_NAVIGATION_COMPONENT_RESOLVER_COMPONENT, AbstractNewCaseComponent, NAE_NEW_CASE_COMPONENT, AbstractImportNetComponent, AbstractFilterSelectorListItemComponent, AbstractFilterSelectorComponent, AbstractOptionSelectorComponent, NAE_OPTION_SELECTOR_COMPONENT, UserFilterConstants, AbstractSaveFilterComponent, NAE_SAVE_FILTER_COMPONENT, AbstractLoadFilterComponent, NAE_LOAD_FILTER_COMPONENT, ImpersonationUserListService, NAE_ADMIN_IMPERSONATE_COMPONENT, UserImpersonationConstants, AbstractUserImpersonateComponent, NAE_USER_IMPERSONATE_COMPONENT, AbstractSideMenuContainerComponent, AbstractToolbarComponent, AbstractProfileComponent, ProgressType, AbstractWorkflowViewComponent, WorkflowViewService, AbstractAddChildNodeComponent, AbstractRemoveNodeComponent, AbstractTreeComponent, CaseTreeService, AbstractTreeTaskContentComponent, TreeTaskContentService, SelectedCaseService, NAE_NEW_CASE_CREATION_CONFIGURATION_DATA, NAE_NEW_CASE_CONFIGURATION, AbstractFilterFieldTabViewComponent, NAE_NET_VERSION_VISIBLE, NAE_NET_ALL_VERSIONS, FilteredArray, getImmediateData, TaskEvent, AbstractSingleTaskViewComponent, NAE_TASK_VIEW_COMPONENT, reloadTaskAction, NAE_USER_ASSIGN_DIALOG_COMPONENT, NAE_ADMIN_IMPERSONATE_DIALOG_COMPONENT, NAE_USER_IMPERSONATE_DIALOG_COMPONENT, NAE_NEW_CASE_DIALOG_COMPONENT, NAE_SAVE_FILTER_DIALOG_COMPONENT, NAE_LOAD_FILTER_DIALOG_COMPONENT } from '@netgrif/components-core';
+import { AbstractRoleAssignmentComponent, RoleAssignmentService, AbstractLdapGroupRoleAssignmentComponent, RoleAssignmentLdapGroupService, AbstractUserInviteComponent, MaterialModule, TranslateLibModule, AbstractAuthenticationOverlayComponent, AbstractSessionIdleComponent, AbstractIframeCardComponent, AbstractCountCardComponent, AbstractCustomCardComponent, DashboardSingleData, DashboardMultiData, AbstractDashboardContentComponent, AbstractDataFieldTemplateComponent, AbstractBooleanFieldComponent, NAE_INFORM_ABOUT_INVALID_DATA, AbstractButtonFieldComponent, AbstractDateFieldComponent, DATE_FORMAT, AbstractDateTimeFieldComponent, DATE_TIME_FORMAT, AbstractEnumerationFieldComponent, AbstractEnumerationAutocompleteSelectFieldComponent, DATA_FIELD_PORTAL_DATA, AbstractEnumerationSelectFieldComponent, AbstractEnumerationListFieldComponent, AbstractFileFieldComponent, AbstractFileListFieldComponent, AbstractMultichoiceFieldComponent, AbstractMultichoiceSelectFieldComponent, AbstractMultichoiceListFieldComponent, AbstractNumberFieldComponent, AbstractTextFieldComponent, AbstractTextareaFieldComponent, AbstractRichTextareaFieldComponent, AbstractSimpleTextFieldComponent, AbstractUserFieldComponent, AbstractHtmlTextareaFieldComponent, AbstractCurrencyNumberFieldComponent, AbstractDefaultNumberFieldComponent, AbstractPasswordTextFieldComponent, FilePreviewType, AbstractEnumerationStepperFieldComponent, AbstractEnumerationIconFieldComponent, AbstractEnumerationAutocompleteDynamicFieldComponent, AbstractFilterFieldComponent, AbstractSearchOperandInputComponent, SearchInputType, DATE_FORMAT_STRING, DATE_TIME_FORMAT_STRING, AbstractSearchConfigurationInputComponent, OperatorTemplatePartType, AbstractSearchPredicateComponent, NAE_SEARCH_CATEGORIES, AbstractSearchClauseComponent, AbstractAdvancedSearchComponent, AdvancedSearchComponentInitializationService, SimpleFilter, AbstractFilterFieldContentComponent, NAE_FILTER_FIELD, NAE_BASE_FILTER, AllowedNetsService, AllowedNetsServiceFactory, CategoryFactory, CategoryResolverService, SearchService, AbstractUserAssignItemComponent, AbstractUserAssignListComponent, AbstractUserAssignComponent, NAE_SIDE_MENU_CONTROL, UserListService, CovalentModule, UtilityModule, NAE_USER_ASSIGN_COMPONENT, AbstractI18nFieldComponent, AbstractI18nDividerFieldComponent, AbstractI18nTextFieldComponent, AbstractMultichoiceAutocompleteFieldComponentComponent, AbstractUserListFieldComponent, AbstractMultiUserAssignItemComponent, AbstractMultiUserAssignListComponent, AbstractMultiUserAssignComponent, NAE_MULTI_USER_ASSIGN_COMPONENT, AbstractNumberDecimalFieldComponent, AbstractTaskRefFieldComponent, AbstractTaskRefDashboardTileComponent, NAE_TASK_OPERATIONS, FrontActionService, TaskContentService, UnlimitedTaskContentService, AbstractDashboardLineChartTextFieldComponent, AbstractDashboardPieChartTextFieldComponent, AbstractDashboardPortalTextFieldComponent, AbstractDashboardBarChartTextFieldComponent, AbstractDashboardIframeTextFieldComponent, AbstractFilterFieldTabViewContentComponent, AbstractBooleanDefaultFieldComponent, AbstractButtonDefaultFieldComponent, AbstractDateDefaultFieldComponent, AbstractDateTimeDefaultFieldComponent, AbstractFileDefaultFieldComponent, AbstractFileListDefaultFieldComponent, AbstractFilterDefaultFieldComponent, Dashboard, AbstractUserDefaultFieldComponent, AbstractUserListDefaultFieldComponent, AbstractTaskRefDashboardFieldComponent, AbstractSortModeComponent, AbstractSearchModeComponent, AbstractEditModeComponent, AbstractLoadingModeComponent, AbstractHeaderComponent, MultichoiceField, EnumerationField, CaseHeaderService, TaskHeaderService, WorkflowHeaderService, HeaderSearchService, AbstractFieldComponentResolverComponent, DateField, DateTimeField, FileField, FileListField, AbstractTaskContentComponent, NAE_ASYNC_RENDERING_CONFIGURATION, AbstractPanelComponent, AbstractImmediateFilterTextContentComponent, NAE_FILTER_TEXT, AbstractImmediateFilterTextComponent, AbstractPanelItemComponent, AbstractTaskPanelComponent, BOOLEAN_VALUE_LABEL_ENABLED, NAE_TASK_PANEL_DISABLE_BUTTON_FUNCTIONS, NAE_TASK_FORCE_OPEN, NAE_TAB_DATA, SingleTaskContentService, TaskDataService, TaskEventService, AssignTaskService, DelegateTaskService, CancelTaskService, FinishTaskService, TaskRequestStateService, DataFocusPolicyService, AssignPolicyService, FinishPolicyService, ChangedFieldsService, SubjectTaskOperations, AbstractTaskListPaginationComponent, NetgrifPaginatorIntl, AbstractTaskViewComponent, TaskViewService, ViewIdService, AbstractTaskRefListFieldComponent, AbstractFulltextSearchComponent, Filter, FilterType, Category, AbstractSearchComponent, NAE_SEARCH_COMPONENT_CONFIGURATION, NAE_FILTERS_FILTER, NAE_NAVIGATION_ITEM_TASK_DATA, NAE_DEFAULT_CASE_SEARCH_CATEGORIES, NAE_DEFAULT_TASK_SEARCH_CATEGORIES, AbstractTaskListComponent, AbstractTabbedTaskViewComponent, HeaderMode, OverflowService, tabbedAllowedNetsServiceFactory, NAE_TASK_VIEW_CONFIGURATION, tabbedTaskViewConfigurationFactory, NAE_DEFAULT_HEADERS, navigationItemTaskViewDefaultHeadersFactory, LoadingEmitter, AbstractCasePanelComponent, AbstractCaseListPaginatorComponent, AbstractCaseViewComponent, SearchMode, NAE_CASE_REF_CREATE_CASE, NAE_CASE_REF_SEARCH, CaseViewService, NAE_VIEW_ID_SEGMENT, defaultCaseSearchCategoriesFactory, AbstractCaseRefDefaultComponent, AbstractMultichoiceCaseRefComponent, AbstractEnumerationCaseRefComponent, AbstractStringCollectionDefaultFieldComponent, CurrencyModule, FrontActionModule, CustomDateAdapter, AbstractLegalNoticeComponent, AbstractEmailSubmissionFormComponent, AbstractLoginFormComponent, AbstractRegistrationFormComponent, NAE_MIN_PASSWORD_LENGTH, AbstractForgottenPasswordComponent, AbstractChangePasswordComponent, ProfileModule, AbstractLanguageSelectorComponent, AbstractInternalLinkComponent, AbstractLogoutShortcutComponent, AbstractQuickPanelComponent, AbstractUserCardComponent, AbstractNavigationTreeComponent, AbstractNavigationDrawerComponent, AbstractNavigationRailComponent, AbstractGroupNavigationComponentResolverComponent, navigationItemTaskFilterFactory, navigationItemTaskAllowedNetsServiceFactory, navigationItemTaskCategoryFactory, AbstractBreadcrumbsComponent, AbstractCaseListComponent, AbstractTabbedCaseViewComponent, MergeOperator, FilterExtractionService, BaseAllowedNetsService, navigationItemCaseViewDefaultHeadersFactory, AbstractTabCreationDetectorComponent, AbstractTabViewComponent, extractFilterFromData, extractIconAndTitle, extractFieldValueFromData, GroupNavigationConstants, extractSearchTypeFromData, groupNavigationViewIdSegmentFactory, GroupNavigationComponentResolverService, RoutingBuilderService, defaultTaskSearchCategoriesFactory, DefaultSearchCategoriesModule, AbstractWorkflowPanelComponent, SnackBarModule, AbstractSingleTaskComponent, AbstractNavigationDoubleDrawerComponent, NAE_GROUP_NAVIGATION_COMPONENT_RESOLVER_COMPONENT, AbstractNewCaseComponent, NAE_NEW_CASE_COMPONENT, AbstractImportNetComponent, NAE_IMPORT_NET_COMPONENT, AbstractFilterSelectorListItemComponent, AbstractFilterSelectorComponent, AbstractOptionSelectorComponent, NAE_OPTION_SELECTOR_COMPONENT, UserFilterConstants, AbstractSaveFilterComponent, NAE_SAVE_FILTER_COMPONENT, AbstractLoadFilterComponent, NAE_LOAD_FILTER_COMPONENT, ImpersonationUserListService, NAE_ADMIN_IMPERSONATE_COMPONENT, UserImpersonationConstants, AbstractUserImpersonateComponent, NAE_USER_IMPERSONATE_COMPONENT, AbstractSideMenuContainerComponent, AbstractToolbarComponent, AbstractProfileComponent, ProgressType, AbstractWorkflowViewComponent, WorkflowViewService, AbstractAddChildNodeComponent, AbstractRemoveNodeComponent, AbstractTreeComponent, CaseTreeService, AbstractTreeTaskContentComponent, TreeTaskContentService, SelectedCaseService, NAE_NEW_CASE_CREATION_CONFIGURATION_DATA, NAE_NEW_CASE_CONFIGURATION, AbstractFilterFieldTabViewComponent, NAE_NET_VERSION_VISIBLE, NAE_NET_ALL_VERSIONS, FilteredArray, getImmediateData, TaskEvent, AbstractSingleTaskViewComponent, NAE_TASK_VIEW_COMPONENT, reloadTaskAction, NAE_USER_ASSIGN_DIALOG_COMPONENT, NAE_IMPORT_NET_DIALOG_COMPONENT, NAE_MULTI_USER_ASSIGN_DIALOG_COMPONENT, NAE_ADMIN_IMPERSONATE_DIALOG_COMPONENT, NAE_USER_IMPERSONATE_DIALOG_COMPONENT, NAE_NEW_CASE_DIALOG_COMPONENT, NAE_SAVE_FILTER_DIALOG_COMPONENT, NAE_LOAD_FILTER_DIALOG_COMPONENT } from '@netgrif/components-core';
 import * as i2 from '@angular/material/toolbar';
 import * as i2$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -24,15 +24,15 @@ import * as i10$1 from '@angular/material/tooltip';
 import * as i7 from '@angular/material/input';
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
-import * as i7$1 from '@angular/flex-layout/extended';
+import * as i6$2 from '@angular/flex-layout/extended';
 import * as i3$2 from '@angular/material/core';
-import { MAT_DATE_FORMATS, DateAdapter } from '@angular/material/core';
+import { MAT_DATE_FORMATS, MAT_DATE_LOCALE, DateAdapter } from '@angular/material/core';
 import * as i1$2 from '@ngx-translate/core';
 import * as i2$2 from '@angular/router';
 import { RouterModule, ActivatedRoute } from '@angular/router';
 import * as i1$3 from '@angular/material/dialog';
 import { MatDialogModule, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
-import { take, map, tap, startWith } from 'rxjs/operators';
+import { take, filter, map, tap, startWith } from 'rxjs/operators';
 import { FlexModule, FlexLayoutModule } from '@angular/flex-layout';
 import * as i3$3 from '@angular/platform-browser';
 import { BrowserModule } from '@angular/platform-browser';
@@ -46,7 +46,7 @@ import { MatGridListModule } from '@angular/material/grid-list';
 import * as i16 from 'angular-resize-event';
 import { AngularResizeEventModule } from 'angular-resize-event';
 import { HttpClientModule } from '@angular/common/http';
-import * as i6$2 from '@angular-material-components/datetime-picker';
+import * as i2$6 from '@angular-material-components/datetime-picker';
 import { NGX_MAT_DATE_FORMATS, NgxMatDatetimePickerModule } from '@angular-material-components/datetime-picker';
 import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
 import * as i2$4 from '@angular/material/autocomplete';
@@ -59,10 +59,10 @@ import * as i3$6 from '@covalent/markdown';
 import * as i3$7 from 'ngx-quill';
 import { QuillModule } from 'ngx-quill';
 import * as i5$2 from '@angular/material/datepicker';
-import * as i7$2 from '@angular/material/slide-toggle';
+import * as i7$1 from '@angular/material/slide-toggle';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import * as i2$6 from '@angular/material/chips';
+import * as i2$7 from '@angular/material/chips';
 import * as i3$8 from '@angular/flex-layout/grid';
 import * as i1$5 from '@angular/material/checkbox';
 import * as i3$9 from '@angular/material/sort';
@@ -76,7 +76,7 @@ import { MatSidenavModule } from '@angular/material/sidenav';
 import * as i3$a from '@angular/material/tree';
 import * as i10$3 from 'angular-resizable-element';
 import { ResizableModule } from 'angular-resizable-element';
-import * as i2$7 from '@angular/material/tabs';
+import * as i2$8 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
 import * as i9$1 from '@angular/material/badge';
 import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
@@ -97,7 +97,7 @@ class RoleAssignmentComponent extends AbstractRoleAssignmentComponent {
 RoleAssignmentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RoleAssignmentComponent, deps: [{ token: i1.RoleAssignmentService }, { token: i1.UserService }], target: i0.ɵɵFactoryTarget.Component });
 RoleAssignmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RoleAssignmentComponent, selector: "nc-role-assignment", providers: [
         RoleAssignmentService
-    ], usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"row\" fxLayout.lt-sm=\"column\" fxLayoutAlign=\"start center\" class=\"full-height full-width padding-default\">\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"49\" class=\"role-height\">\n        <ng-container *ngIf=\"users.users$ | async as users_\">\n\n            <mat-toolbar color=\"primary\" class=\"min-height-radius\">\n                <span matTooltip=\"{{users_.length}}/{{users.totalUsers}}\">\n                    {{'admin.user-list.listTitle' | translate}}\n                </span>\n                <div fxFlex=\"5\"></div>\n\n                <div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"netgrif-input netgrif-input-search-fix\">\n                    <mat-form-field fxFlex=\"100\" class=\"user-assign-search\" color=\"primary\" appearance=\"outline\">\n                        <mat-icon matPrefix class=\"prefix-icon\">search</mat-icon>\n                        <mat-label>{{ 'side-menu.user.choose' | translate }}</mat-label>\n                        <input matInput [formControl]=\"searchUserControl\">\n                        <button *ngIf=\"searchUserControl.value\" matSuffix mat-icon-button\n                                (click)=\"searchUserControl.setValue('')\" color=\"warn\">\n                            <mat-icon>close</mat-icon>\n                        </button>\n                    </mat-form-field>\n                </div>\n\n                <span style=\"flex: 1 1 auto;\"></span>\n                <button disabled mat-icon-button\n                        matTooltip=\"{{userMultiSelect ? 'Multi selection' : 'Single selection'}}\"\n                        (click)=\"userMultiSelect = !userMultiSelect\">\n                    <mat-icon>{{userMultiSelect ? 'group' : 'person'}}</mat-icon>\n                </button>\n                <button mat-icon-button matTooltip=\"{{ 'side-menu.tooltip.SelectAll' | translate }}\" (click)=\"selectAllUsers(true)\">\n                    <mat-icon>done_all</mat-icon>\n                </button>\n                <button mat-icon-button matTooltip=\"{{ 'side-menu.tooltip.DeselectAll' | translate }}\" (click)=\"selectAllUsers(false)\">\n                    <mat-icon>clear</mat-icon>\n                </button>\n            </mat-toolbar>\n\n            <div *ngIf=\"(users.loading$ | async) === false && users_.length === 0\" fxLayout=\"column\"\n                 fxLayoutAlign=\"center center\" fxFlex class=\"margin-top-x2\">\n                <mat-icon color=\"accent\" class=\"margin-bottom-default no-user-icon\">perm_identity</mat-icon>\n                <span class=\"font-size-20\">{{ 'admin.user-list.noUsersWereFound' | translate}}</span>\n            </div>\n\n            <mat-selection-list #userList color=\"primary\" fxFlex=\"100\" class=\"full-width advanced-option-list\">\n\n                <cdk-virtual-scroll-viewport itemSize=\"48\" (scrolledIndexChange)=\"loadNextUserPage()\"\n                                             class=\"full-width full-height\">\n                    <mat-list-option class=\"min-height-option\" *cdkVirtualFor=\"let user of users_; let i = index;\" checkboxPosition=\"before\"\n                                     [selected]=\"user.selected\"\n                                     [value]=\"user\"\n                                     [ngClass]=\"{'list-item-selected':user.selected}\"\n                                     (click)=\"user.toggle();autoSelectRoles()\" fxLayoutAlign=\"start center\" fxLayout=\"row\">\n                        <h3 matLine class=\"primary-color-line\">{{user.fullName}}</h3>\n                        <p matLine class=\"paragraph-fix\">ID: {{user.id}}, Email: {{user.email}}</p>\n                    </mat-list-option>\n\n                    <div *ngIf=\"users.loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n                        <mat-spinner color=\"primary\" diameter=\"50\"></mat-spinner>\n                    </div>\n\n                </cdk-virtual-scroll-viewport>\n\n            </mat-selection-list>\n        </ng-container>\n    </div>\n\n    <div fxFlex=\"2\"></div>\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"49\" class=\"role-height\">\n\n        <mat-toolbar color=\"primary\" class=\"min-height-radius\">\n            <span>{{'admin.process-list.listTitle' | translate}}</span>\n            <span style=\"flex: 1 1 auto;\"></span>\n            <mat-spinner *ngIf=\"users.updating$ | async\" color=\"accent\" diameter=\"30\"></mat-spinner>\n        </mat-toolbar>\n\n        <div *ngIf=\"(users.loading$ | async) === false && nets.processes.length === 0\" fxLayout=\"column\"\n             fxLayoutAlign=\"center center\" fxFlex class=\"margin-top-x2\">\n            <mat-icon color=\"accent\" class=\"margin-bottom-default no-user-icon\">timeline</mat-icon>\n            <span class=\"font-size-20\">{{ 'admin.process-list.noProcessesWereFound' | translate}}</span>\n        </div>\n\n        <mat-accordion class=\"full-width margin-top-default process-list-accordion\" multi fxFlex>\n\n            <mat-expansion-panel *ngFor=\"let item of nets.processes; let last = last;\" (afterExpand)=\"nets.loadProcessItemRoles(item)\"\n                                 (afterCollapse)=\"nets.prepareToTryAgainToLoadRoles(item)\" class=\"panel-body\" [ngClass]=\"{'panel-last':last}\">\n\n                <mat-expansion-panel-header class=\"role-header panel-color\">\n                    <mat-panel-title>\n                        <mat-icon *ngIf=\"item.someRolesSelected\" color=\"accent\" class=\"margin-right-x2\">tour</mat-icon>\n                        <span>{{item.initials}} - {{item.title}}</span>\n                    </mat-panel-title>\n                    <mat-panel-description class=\"process-item-description\">\n                        <span\n                            class=\"process-item-description full-width\">{{'admin.process-list.newestVersion' | translate}}\n                            : {{item.newestVersion}}</span>\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n\n                <div *ngIf=\"item.loading\" fxFlex=\"100\" class=\"full-width\">\n                    <mat-progress-bar mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n                </div>\n\n                <div *ngIf=\"!item.loading && item.emptyRoles\" fxLayout=\"column\"\n                     fxLayoutAlign=\"center center\" fxFlex class=\"full-width full-height net-panel-content\">\n                    <mat-icon color=\"accent\" class=\"margin-bottom-default\">account_circle</mat-icon>\n                    <span class=\"font-size-15\">{{ 'admin.process-list.noRoles' | translate}}</span>\n                </div>\n\n                <div *ngIf=\"!item.loading && !item.emptyRoles\" fxLayout=\"column\" fxLayoutAlign=\"start start\"\n                     class=\"full-height full-width net-panel-content\">\n\n                    <div *ngFor=\"let net of item.processes; let first = first\" fxLayout=\"column\"\n                         fxLayoutAlign=\"start center\" class=\"full-width\">\n                        <mat-divider *ngIf=\"!first\" style=\"position: relative\"></mat-divider>\n\n                        <div class=\"full-width\">\n                            <div fxFlex fxLayoutAlign=\"start center\">\n                                <h3 class=\"margin-none\" *ngIf=\"first\">{{ 'admin.process-list.roles' | translate}}</h3>\n                            </div>\n                            <div fxFlex fxLayoutAlign=\"center center\">\n                                <button mat-stroked-button matTooltip=\"{{item.someRolesSelected ? 'Deselect All' : 'Select All'}}\"\n                                        (click)=\"toggleAllRoles(net, !item.someRolesSelected)\">\n                                    {{net.version}}\n                                </button>\n                            </div>\n                            <div fxFlex></div>\n                        </div>\n\n\n                        <mat-selection-list color=\"accent\" fxLayout=\"row wrap\" fxLayoutAlign=\"start center\"\n                                            class=\"full-width\">\n                            <mat-list-option *ngFor=\"let role of net.roles\" checkboxPosition=\"before\"\n                                             [selected]=\"role.selected\" (click)=\"role.toggle();update(role)\"\n                                             fxFlex=\"50\">\n                                <h3 matLine>{{role.name}}</h3>\n                            </mat-list-option>\n                        </mat-selection-list>\n                    </div>\n                </div>\n\n            </mat-expansion-panel>\n\n        </mat-accordion>\n\n        <div *ngIf=\"nets.loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"100\">\n            <mat-spinner color=\"primary\" diameter=\"65\"></mat-spinner>\n        </div>\n    </div>\n</div>\n", styles: [".full-height{height:100%;min-height:100%}.full-width{width:100%;min-width:100%}.padding-default{padding:8px}.padding-half{padding:4px}.padding-x2{padding:16px}.margin-default{margin:8px}.margin-half{margin:4px}.margin-x2{margin:16px}.margin-top-default{margin-top:8px}.margin-top-half{margin-top:4px}.margin-top-x2{margin-top:16px}.margin-bottom-default{margin-bottom:8px}.margin-bottom-half{margin-bottom:4px}.margin-bottom-x2{margin-bottom:16px}.margin-left-default{margin-left:8px}.margin-left-half{margin-left:4px}.margin-left-x2{margin-left:16px}.margin-right-default{margin-right:8px}.margin-right-half{margin-right:4px}.margin-right-x2{margin-right:16px}.user-list-item-margin{margin:4px 0}.net-panel-content{padding-left:24px;padding-right:24px;padding-bottom:24px}.font-size-20{font-size:20px}.font-size-15{font-size:15px}.no-user-icon{font-size:40px;width:40px;height:40px}.process-item-description{text-align:right}.process-list-accordion{overflow-y:auto;padding:0 2px 4px}.process-list-accordion .mat-expansion-panel-spacing{margin:8px 0}.user-assign-search{width:100%;color:#64748b;min-width:250px;border-radius:6px}.search-icon{margin-right:10px}.min-height-radius{min-height:64px;border-radius:8px}.prefix-icon{font-size:22px}.paragraph-fix{word-break:break-all;white-space:pre-wrap!important}.min-height-option{height:auto!important;min-height:48px;padding:3px 0!important}.role-header{min-height:48px!important;height:auto!important}.panel-last{padding-bottom:16px}.margin-none{margin-top:0!important;margin-bottom:0!important}.role-height{height:100%;min-height:100%}@media only screen and (max-width: 599.99px){.role-height{height:50%;min-height:50%;width:100%}}\n"], components: [{ type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.MatSelectionList, selector: "mat-selection-list", inputs: ["disableRipple", "tabIndex", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: i6.MatListOption, selector: "mat-list-option", inputs: ["disableRipple", "checkboxPosition", "color", "value", "disabled", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i9.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2$1.MatPrefix, selector: "[matPrefix]" }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.MatSuffix, selector: "[matSuffix]" }, { type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i3$2.MatLine, selector: "[mat-line], [matLine]" }, { type: i9.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i9.MatExpansionPanelDescription, selector: "mat-panel-description" }], pipes: { "async": i4$1.AsyncPipe, "translate": i1$2.TranslatePipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"row\" fxLayout.lt-sm=\"column\" fxLayoutAlign=\"start center\" class=\"full-height full-width padding-default\">\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"49\" class=\"role-height\">\n        <ng-container *ngIf=\"users.users$ | async as users_\">\n\n            <mat-toolbar color=\"primary\" class=\"min-height-radius\">\n                <span matTooltip=\"{{users_.length}}/{{users.totalUsers}}\">\n                    {{'admin.user-list.listTitle' | translate}}\n                </span>\n                <div fxFlex=\"5\"></div>\n\n                <div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"netgrif-input netgrif-input-search-fix\">\n                    <mat-form-field fxFlex=\"100\" class=\"user-assign-search\" color=\"primary\" appearance=\"outline\">\n                        <mat-icon matPrefix class=\"prefix-icon\">search</mat-icon>\n                        <mat-label>{{ 'side-menu.user.choose' | translate }}</mat-label>\n                        <input matInput [formControl]=\"searchUserControl\">\n                        <button *ngIf=\"searchUserControl.value\" matSuffix mat-icon-button\n                                (click)=\"searchUserControl.setValue('')\" color=\"warn\">\n                            <mat-icon>close</mat-icon>\n                        </button>\n                    </mat-form-field>\n                </div>\n\n                <span style=\"flex: 1 1 auto;\"></span>\n                <button disabled mat-icon-button\n                        matTooltip=\"{{userMultiSelect ? 'Multi selection' : 'Single selection'}}\"\n                        (click)=\"userMultiSelect = !userMultiSelect\">\n                    <mat-icon>{{userMultiSelect ? 'group' : 'person'}}</mat-icon>\n                </button>\n                <button mat-icon-button matTooltip=\"{{ 'side-menu.tooltip.SelectAll' | translate }}\" (click)=\"selectAllUsers(true)\">\n                    <mat-icon>done_all</mat-icon>\n                </button>\n                <button mat-icon-button matTooltip=\"{{ 'side-menu.tooltip.DeselectAll' | translate }}\" (click)=\"selectAllUsers(false)\">\n                    <mat-icon>clear</mat-icon>\n                </button>\n            </mat-toolbar>\n\n            <div *ngIf=\"(users.loading$ | async) === false && users_.length === 0\" fxLayout=\"column\"\n                 fxLayoutAlign=\"center center\" fxFlex class=\"margin-top-x2\">\n                <mat-icon color=\"accent\" class=\"margin-bottom-default no-user-icon\">perm_identity</mat-icon>\n                <span class=\"font-size-20\">{{ 'admin.user-list.noUsersWereFound' | translate}}</span>\n            </div>\n\n            <mat-selection-list #userList color=\"primary\" fxFlex=\"100\" class=\"full-width advanced-option-list\">\n\n                <cdk-virtual-scroll-viewport itemSize=\"48\" (scrolledIndexChange)=\"loadNextUserPage()\"\n                                             class=\"full-width full-height\">\n                    <mat-list-option class=\"min-height-option\" *cdkVirtualFor=\"let user of users_; let i = index;\" checkboxPosition=\"before\"\n                                     [selected]=\"user.selected\"\n                                     [value]=\"user\"\n                                     [ngClass]=\"{'list-item-selected':user.selected}\"\n                                     (click)=\"user.toggle();autoSelectRoles()\" fxLayoutAlign=\"start center\" fxLayout=\"row\">\n                        <h3 matLine class=\"primary-color-line\">{{user.fullName}}</h3>\n                        <p matLine class=\"paragraph-fix\">ID: {{user.id}}, Email: {{user.email}}</p>\n                    </mat-list-option>\n\n                    <div *ngIf=\"users.loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n                        <mat-spinner color=\"primary\" diameter=\"50\"></mat-spinner>\n                    </div>\n\n                </cdk-virtual-scroll-viewport>\n\n            </mat-selection-list>\n        </ng-container>\n    </div>\n\n    <div fxFlex=\"2\"></div>\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"49\" class=\"role-height\">\n\n        <mat-toolbar color=\"primary\" class=\"min-height-radius\">\n            <span>{{'admin.process-list.listTitle' | translate}}</span>\n            <span style=\"flex: 1 1 auto;\"></span>\n            <mat-spinner *ngIf=\"users.updating$ | async\" color=\"accent\" diameter=\"30\"></mat-spinner>\n        </mat-toolbar>\n\n        <div *ngIf=\"(users.loading$ | async) === false && nets.processes.length === 0\" fxLayout=\"column\"\n             fxLayoutAlign=\"center center\" fxFlex class=\"margin-top-x2\">\n            <mat-icon color=\"accent\" class=\"margin-bottom-default no-user-icon\">timeline</mat-icon>\n            <span class=\"font-size-20\">{{ 'admin.process-list.noProcessesWereFound' | translate}}</span>\n        </div>\n\n        <mat-accordion class=\"full-width margin-top-default process-list-accordion\" multi fxFlex>\n\n            <mat-expansion-panel *ngFor=\"let item of nets.processes; let last = last;\" (afterExpand)=\"nets.loadProcessItemRoles(item)\"\n                                 (afterCollapse)=\"nets.prepareToTryAgainToLoadRoles(item)\" class=\"panel-body\" [ngClass]=\"{'panel-last':last}\">\n\n                <mat-expansion-panel-header class=\"role-header panel-color\">\n                    <mat-panel-title>\n                        <mat-icon *ngIf=\"item.someRolesSelected\" color=\"accent\" class=\"margin-right-x2\">tour</mat-icon>\n                        <span>{{item.initials}} - {{item.title}}</span>\n                    </mat-panel-title>\n                    <mat-panel-description class=\"process-item-description\">\n                        <span\n                            class=\"process-item-description full-width\">{{'admin.process-list.newestVersion' | translate}}\n                            : {{item.newestVersion}}</span>\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n\n                <div *ngIf=\"item.loading\" fxFlex=\"100\" class=\"full-width\">\n                    <mat-progress-bar mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n                </div>\n\n                <div *ngIf=\"!item.loading && item.emptyRoles\" fxLayout=\"column\"\n                     fxLayoutAlign=\"center center\" fxFlex class=\"full-width full-height net-panel-content\">\n                    <mat-icon color=\"accent\" class=\"margin-bottom-default\">account_circle</mat-icon>\n                    <span class=\"font-size-15\">{{ 'admin.process-list.noRoles' | translate}}</span>\n                </div>\n\n                <div *ngIf=\"!item.loading && !item.emptyRoles\" fxLayout=\"column\" fxLayoutAlign=\"start start\"\n                     class=\"full-height full-width net-panel-content\">\n\n                    <div *ngFor=\"let net of item.processes; let first = first\" fxLayout=\"column\"\n                         fxLayoutAlign=\"start center\" class=\"full-width\">\n                        <mat-divider *ngIf=\"!first\" style=\"position: relative\"></mat-divider>\n\n                        <div class=\"full-width\">\n                            <div fxFlex fxLayoutAlign=\"start center\">\n                                <h3 class=\"margin-none\" *ngIf=\"first\">{{ 'admin.process-list.roles' | translate}}</h3>\n                            </div>\n                            <div fxFlex fxLayoutAlign=\"center center\">\n                                <button mat-stroked-button matTooltip=\"{{item.someRolesSelected ? 'Deselect All' : 'Select All'}}\"\n                                        (click)=\"toggleAllRoles(net, !item.someRolesSelected)\">\n                                    {{net.version}}\n                                </button>\n                            </div>\n                            <div fxFlex></div>\n                        </div>\n\n\n                        <mat-selection-list color=\"accent\" fxLayout=\"row wrap\" fxLayoutAlign=\"start center\"\n                                            class=\"full-width\">\n                            <mat-list-option *ngFor=\"let role of net.roles\" checkboxPosition=\"before\"\n                                             [selected]=\"role.selected\" (click)=\"role.toggle();update(role)\"\n                                             fxFlex=\"50\">\n                                <h3 matLine>{{role.name}}</h3>\n                            </mat-list-option>\n                        </mat-selection-list>\n                    </div>\n                </div>\n\n            </mat-expansion-panel>\n\n        </mat-accordion>\n\n        <div *ngIf=\"nets.loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"100\">\n            <mat-spinner color=\"primary\" diameter=\"65\"></mat-spinner>\n        </div>\n    </div>\n</div>\n", styles: [".full-height{height:100%;min-height:100%}.full-width{width:100%;min-width:100%}.padding-default{padding:8px}.padding-half{padding:4px}.padding-x2{padding:16px}.margin-default{margin:8px}.margin-half{margin:4px}.margin-x2{margin:16px}.margin-top-default{margin-top:8px}.margin-top-half{margin-top:4px}.margin-top-x2{margin-top:16px}.margin-bottom-default{margin-bottom:8px}.margin-bottom-half{margin-bottom:4px}.margin-bottom-x2{margin-bottom:16px}.margin-left-default{margin-left:8px}.margin-left-half{margin-left:4px}.margin-left-x2{margin-left:16px}.margin-right-default{margin-right:8px}.margin-right-half{margin-right:4px}.margin-right-x2{margin-right:16px}.user-list-item-margin{margin:4px 0}.net-panel-content{padding-left:24px;padding-right:24px;padding-bottom:24px}.font-size-20{font-size:20px}.font-size-15{font-size:15px}.no-user-icon{font-size:40px;width:40px;height:40px}.process-item-description{text-align:right}.process-list-accordion{overflow-y:auto;padding:0 2px 4px}.process-list-accordion .mat-expansion-panel-spacing{margin:8px 0}.user-assign-search{width:100%;color:#64748b;min-width:250px;border-radius:6px}.search-icon{margin-right:10px}.min-height-radius{min-height:64px;border-radius:8px}.prefix-icon{font-size:22px}.paragraph-fix{word-break:break-all;white-space:pre-wrap!important}.min-height-option{height:auto!important;min-height:48px;padding:3px 0!important}.role-header{min-height:48px!important;height:auto!important}.panel-last{padding-bottom:16px}.margin-none{margin-top:0!important;margin-bottom:0!important}.role-height{height:100%;min-height:100%}@media only screen and (max-width: 599.99px){.role-height{height:50%;min-height:50%;width:100%}}\n"], components: [{ type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.MatSelectionList, selector: "mat-selection-list", inputs: ["disableRipple", "tabIndex", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: i6.MatListOption, selector: "mat-list-option", inputs: ["disableRipple", "checkboxPosition", "color", "value", "disabled", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i9.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2$1.MatPrefix, selector: "[matPrefix]" }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.MatSuffix, selector: "[matSuffix]" }, { type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i3$2.MatLine, selector: "[mat-line], [matLine]" }, { type: i9.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i9.MatExpansionPanelDescription, selector: "mat-panel-description" }], pipes: { "async": i4$1.AsyncPipe, "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RoleAssignmentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-role-assignment', providers: [
@@ -114,7 +114,7 @@ class LdapGroupRoleAssignmentComponent extends AbstractLdapGroupRoleAssignmentCo
 LdapGroupRoleAssignmentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LdapGroupRoleAssignmentComponent, deps: [{ token: i1.RoleAssignmentLdapGroupService }], target: i0.ɵɵFactoryTarget.Component });
 LdapGroupRoleAssignmentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: LdapGroupRoleAssignmentComponent, selector: "nc-ldap-group-role-assignment", providers: [
         RoleAssignmentLdapGroupService
-    ], usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"row\" fxLayout.lt-sm=\"column\" fxLayoutAlign=\"start center\" class=\"full-height full-width padding-default\">\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"49\" class=\"role-height\">\n        <ng-container *ngIf=\"ldapGroup.ldapGroups$ | async as ldapGroups_\">\n\n            <mat-toolbar color=\"primary\" class=\"min-height-radius\">\n                <span matTooltip=\"{{ldapGroups_.length}}/{{ldapGroup.totalLdapGroups}}\">\n                    {{'admin.ldapGroup-list.count' | translate }}: {{ldapGroups_.length}}\n                </span>\n                <div fxFlex=\"5\"></div>\n\n                <div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"netgrif-input netgrif-input-search-fix\">\n                    <mat-form-field fxFlex=\"100\" class=\"ldapGroup-assign-search\" color=\"primary\" appearance=\"outline\">\n                        <mat-icon matPrefix class=\"prefix-icon\">search</mat-icon>\n                        <input matInput [formControl]=\"searchLdapGroupControl\" placeholder=\"{{ 'side-menu.ldapGroup.choose' | translate }}\">\n                        <button color=\"warn\" *ngIf=\"searchLdapGroupControl.value\" matSuffix mat-icon-button\n                                (click)=\"searchLdapGroupControl.setValue('')\">\n                            <mat-icon>close</mat-icon>\n                        </button>\n                    </mat-form-field>\n                </div>\n\n                <span style=\"flex: 1 1 auto;\"></span>\n                <button mat-icon-button matTooltip=\"{{ 'side-menu.tooltip.SelectAll' | translate }}\" (click)=\"selectAllLdapGroup(true)\">\n                    <mat-icon>done_all</mat-icon>\n                </button>\n                <button mat-icon-button matTooltip=\"{{ 'side-menu.tooltip.DeselectAll' | translate }}\" (click)=\"selectAllLdapGroup(false)\">\n                    <mat-icon>clear</mat-icon>\n                </button>\n            </mat-toolbar>\n\n            <div *ngIf=\"(ldapGroup.loading$ | async) === false && ldapGroups_.length === 0\" fxLayout=\"column\"\n                 fxLayoutAlign=\"center center\" fxFlex class=\"margin-top-x2\">\n                <mat-icon color=\"accent\" class=\"margin-bottom-default no-ldapGroup-icon\">perm_identity</mat-icon>\n                <span class=\"font-size-20\">{{ 'admin.ldapGroup-list.noLdapGroupsWereFound' | translate}}</span>\n            </div>\n\n            <mat-selection-list #ldapGroupList color=\"primary\" fxFlex=\"100\" class=\"full-width advanced-option-list\">\n\n                <cdk-virtual-scroll-viewport itemSize=\"48\" (scrolledIndexChange)=\"loadNextLdapGroupPage()\"\n                                             class=\"full-width full-height\">\n                    <mat-list-option class=\"min-height-option\" *cdkVirtualFor=\"let ldapGroup of ldapGroups_; let i = index;\" checkboxPosition=\"before\"\n                                     [selected]=\"ldapGroup.selected\"\n                                     [value]=\"ldapGroup\"\n                                     [ngClass]=\"{'list-item-selected':ldapGroup.selected}\"\n                                     (click)=\"ldapGroup.toggle();autoSelectRoles()\" fxLayoutAlign=\"start center\" fxLayout=\"row\">\n                        <h3 matLine class=\"primary-color-line\">{{ldapGroup.cn}}</h3>\n                        <p *ngIf=\"ldapGroup.description !== undefined\" matLine class=\"paragraph-fix\">DN: {{ldapGroup.dn}}, Description: {{ldapGroup.description}}</p>\n                        <p *ngIf=\"ldapGroup.description === undefined\" matLine class=\"paragraph-fix\">DN: {{ldapGroup.dn}}</p>\n                    </mat-list-option>\n\n                    <div *ngIf=\"ldapGroup.loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n                        <mat-spinner color=\"primary\" diameter=\"50\"></mat-spinner>\n                    </div>\n\n                </cdk-virtual-scroll-viewport>\n\n            </mat-selection-list>\n        </ng-container>\n    </div>\n\n    <div fxFlex=\"2\"></div>\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"49\" class=\"role-height\">\n\n        <mat-toolbar color=\"primary\" class=\"min-height-radius\">\n            <span>{{'admin.process-list.listTitle' | translate}}</span>\n            <span style=\"flex: 1 1 auto;\"></span>\n            <mat-spinner *ngIf=\"ldapGroup.updating$ | async\" color=\"accent\" diameter=\"30\"></mat-spinner>\n        </mat-toolbar>\n\n        <div *ngIf=\"(ldapGroup.loading$ | async) === false && nets.processes.length === 0\" fxLayout=\"column\"\n             fxLayoutAlign=\"center center\" fxFlex class=\"margin-top-x2\">\n            <mat-icon color=\"accent\" class=\"margin-bottom-default no-ldapGroup-icon\">timeline</mat-icon>\n            <span class=\"font-size-20\">{{ 'admin.process-list.noProcessesWereFound' | translate}}</span>\n        </div>\n\n        <mat-accordion class=\"full-width margin-top-default process-list-accordion\" multi fxFlex>\n\n            <mat-expansion-panel *ngFor=\"let item of nets.processes; let last = last;\" (afterExpand)=\"nets.loadProcessItemRoles(item)\"\n                                 (afterCollapse)=\"nets.prepareToTryAgainToLoadRoles(item)\" class=\"panel-body\" [ngClass]=\"{'panel-last':last}\">\n\n                <mat-expansion-panel-header class=\"role-header panel-color\">\n                    <mat-panel-title>\n                        <mat-icon *ngIf=\"item.someRolesSelected\" color=\"accent\" class=\"margin-right-x2\">tour</mat-icon>\n                        <span>{{item.initials}} - {{item.title}}</span>\n                    </mat-panel-title>\n                    <mat-panel-description class=\"process-item-description\">\n                        <span\n                            class=\"process-item-description full-width\">{{'admin.process-list.newestVersion' | translate}}\n                            : {{item.newestVersion}}</span>\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n\n                <div *ngIf=\"item.loading\" fxFlex=\"100\" class=\"full-width\">\n                    <mat-progress-bar mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n                </div>\n\n                <div *ngIf=\"!item.loading && item.emptyRoles\" fxLayout=\"column\"\n                     fxLayoutAlign=\"center center\" fxFlex class=\"full-width full-height net-panel-content\">\n                    <mat-icon color=\"accent\" class=\"margin-bottom-default\">account_circle</mat-icon>\n                    <span class=\"font-size-15\">{{ 'admin.process-list.noRoles' | translate}}</span>\n                </div>\n\n                <div *ngIf=\"!item.loading && !item.emptyRoles\" fxLayout=\"column\" fxLayoutAlign=\"start start\"\n                     class=\"full-height full-width net-panel-content\">\n                    <div *ngFor=\"let net of item.processes; let first = first\" fxLayout=\"column\"\n                         fxLayoutAlign=\"start center\" class=\"full-width\">\n                        <mat-divider *ngIf=\"!first\" style=\"position: relative\"></mat-divider>\n\n                        <div class=\"full-width\">\n                            <div fxFlex fxLayoutAlign=\"start center\">\n                                <h3 class=\"margin-none\" *ngIf=\"first\">{{ 'admin.process-list.roles' | translate}}</h3>\n                            </div>\n                            <div fxFlex fxLayoutAlign=\"center center\">\n                                <button mat-stroked-button matTooltip=\"{{item.someRolesSelected ? 'Deselect All' : 'Select All'}}\"\n                                        (click)=\"toggleAllRoles(net, !item.someRolesSelected)\">\n                                    {{net.version}}\n                                </button>\n                            </div>\n                            <div fxFlex></div>\n                        </div>\n\n                        <mat-selection-list color=\"accent\" fxLayout=\"row wrap\" fxLayoutAlign=\"start center\"\n                                            class=\"full-width\">\n                            <mat-list-option *ngFor=\"let role of net.roles\" checkboxPosition=\"before\"\n                                             [selected]=\"role.selected\" (click)=\"role.toggle();update(role)\"\n                                             fxFlex=\"50\">\n                                <h3 matLine>{{role.name}}</h3>\n                            </mat-list-option>\n                        </mat-selection-list>\n                    </div>\n                </div>\n\n            </mat-expansion-panel>\n\n        </mat-accordion>\n\n        <div *ngIf=\"nets.loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"100\">\n            <mat-spinner color=\"primary\" diameter=\"65\"></mat-spinner>\n        </div>\n    </div>\n</div>\n", styles: [".full-height{height:100%;min-height:100%}.full-width{width:100%;min-width:100%}.padding-default{padding:8px}.padding-half{padding:4px}.padding-x2{padding:16px}.margin-default{margin:8px}.margin-half{margin:4px}.margin-x2{margin:16px}.margin-top-default{margin-top:8px}.margin-top-half{margin-top:4px}.margin-top-x2{margin-top:16px}.margin-bottom-default{margin-bottom:8px}.margin-bottom-half{margin-bottom:4px}.margin-bottom-x2{margin-bottom:16px}.margin-left-default{margin-left:8px}.margin-left-half{margin-left:4px}.margin-left-x2{margin-left:16px}.margin-right-default{margin-right:8px}.margin-right-half{margin-right:4px}.margin-right-x2{margin-right:16px}.user-list-item-margin{margin:4px 0}.net-panel-content{padding-left:24px;padding-right:24px;padding-bottom:24px}.font-size-20{font-size:20px}.font-size-15{font-size:15px}.no-user-icon{font-size:40px;width:40px;height:40px}.process-item-description{text-align:right}.process-list-accordion{overflow-y:auto;padding:0 2px 4px}.process-list-accordion .mat-expansion-panel-spacing{margin:8px 0}.ldapGroup-assign-search{width:100%;color:#64748b;min-width:250px;border-radius:6px}.search-icon{margin-right:10px}.min-height-radius{min-height:64px;border-radius:8px}.prefix-icon{font-size:22px}.paragraph-fix{word-break:break-all;white-space:pre-wrap!important}.min-height-option{height:auto!important;min-height:48px;padding:3px 0!important}.role-header{min-height:48px!important;height:auto!important}.panel-last{padding-bottom:16px}.margin-none{margin-top:0!important;margin-bottom:0!important}.role-height{height:100%;min-height:100%}@media only screen and (max-width: 599.99px){.role-height{height:50%;min-height:50%;width:100%}}\n"], components: [{ type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.MatSelectionList, selector: "mat-selection-list", inputs: ["disableRipple", "tabIndex", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: i6.MatListOption, selector: "mat-list-option", inputs: ["disableRipple", "checkboxPosition", "color", "value", "disabled", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i9.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2$1.MatPrefix, selector: "[matPrefix]" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.MatSuffix, selector: "[matSuffix]" }, { type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i3$2.MatLine, selector: "[mat-line], [matLine]" }, { type: i9.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i9.MatExpansionPanelDescription, selector: "mat-panel-description" }], pipes: { "async": i4$1.AsyncPipe, "translate": i1$2.TranslatePipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"row\" fxLayout.lt-sm=\"column\" fxLayoutAlign=\"start center\" class=\"full-height full-width padding-default\">\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"49\" class=\"role-height\">\n        <ng-container *ngIf=\"ldapGroup.ldapGroups$ | async as ldapGroups_\">\n\n            <mat-toolbar color=\"primary\" class=\"min-height-radius\">\n                <span matTooltip=\"{{ldapGroups_.length}}/{{ldapGroup.totalLdapGroups}}\">\n                    {{'admin.ldapGroup-list.count' | translate }}: {{ldapGroups_.length}}\n                </span>\n                <div fxFlex=\"5\"></div>\n\n                <div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"netgrif-input netgrif-input-search-fix\">\n                    <mat-form-field fxFlex=\"100\" class=\"ldapGroup-assign-search\" color=\"primary\" appearance=\"outline\">\n                        <mat-icon matPrefix class=\"prefix-icon\">search</mat-icon>\n                        <input matInput [formControl]=\"searchLdapGroupControl\" placeholder=\"{{ 'side-menu.ldapGroup.choose' | translate }}\">\n                        <button color=\"warn\" *ngIf=\"searchLdapGroupControl.value\" matSuffix mat-icon-button\n                                (click)=\"searchLdapGroupControl.setValue('')\">\n                            <mat-icon>close</mat-icon>\n                        </button>\n                    </mat-form-field>\n                </div>\n\n                <span style=\"flex: 1 1 auto;\"></span>\n                <button mat-icon-button matTooltip=\"{{ 'side-menu.tooltip.SelectAll' | translate }}\" (click)=\"selectAllLdapGroup(true)\">\n                    <mat-icon>done_all</mat-icon>\n                </button>\n                <button mat-icon-button matTooltip=\"{{ 'side-menu.tooltip.DeselectAll' | translate }}\" (click)=\"selectAllLdapGroup(false)\">\n                    <mat-icon>clear</mat-icon>\n                </button>\n            </mat-toolbar>\n\n            <div *ngIf=\"(ldapGroup.loading$ | async) === false && ldapGroups_.length === 0\" fxLayout=\"column\"\n                 fxLayoutAlign=\"center center\" fxFlex class=\"margin-top-x2\">\n                <mat-icon color=\"accent\" class=\"margin-bottom-default no-ldapGroup-icon\">perm_identity</mat-icon>\n                <span class=\"font-size-20\">{{ 'admin.ldapGroup-list.noLdapGroupsWereFound' | translate}}</span>\n            </div>\n\n            <mat-selection-list #ldapGroupList color=\"primary\" fxFlex=\"100\" class=\"full-width advanced-option-list\">\n\n                <cdk-virtual-scroll-viewport itemSize=\"48\" (scrolledIndexChange)=\"loadNextLdapGroupPage()\"\n                                             class=\"full-width full-height\">\n                    <mat-list-option class=\"min-height-option\" *cdkVirtualFor=\"let ldapGroup of ldapGroups_; let i = index;\" checkboxPosition=\"before\"\n                                     [selected]=\"ldapGroup.selected\"\n                                     [value]=\"ldapGroup\"\n                                     [ngClass]=\"{'list-item-selected':ldapGroup.selected}\"\n                                     (click)=\"ldapGroup.toggle();autoSelectRoles()\" fxLayoutAlign=\"start center\" fxLayout=\"row\">\n                        <h3 matLine class=\"primary-color-line\">{{ldapGroup.cn}}</h3>\n                        <p *ngIf=\"ldapGroup.description !== undefined\" matLine class=\"paragraph-fix\">DN: {{ldapGroup.dn}}, Description: {{ldapGroup.description}}</p>\n                        <p *ngIf=\"ldapGroup.description === undefined\" matLine class=\"paragraph-fix\">DN: {{ldapGroup.dn}}</p>\n                    </mat-list-option>\n\n                    <div *ngIf=\"ldapGroup.loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n                        <mat-spinner color=\"primary\" diameter=\"50\"></mat-spinner>\n                    </div>\n\n                </cdk-virtual-scroll-viewport>\n\n            </mat-selection-list>\n        </ng-container>\n    </div>\n\n    <div fxFlex=\"2\"></div>\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"49\" class=\"role-height\">\n\n        <mat-toolbar color=\"primary\" class=\"min-height-radius\">\n            <span>{{'admin.process-list.listTitle' | translate}}</span>\n            <span style=\"flex: 1 1 auto;\"></span>\n            <mat-spinner *ngIf=\"ldapGroup.updating$ | async\" color=\"accent\" diameter=\"30\"></mat-spinner>\n        </mat-toolbar>\n\n        <div *ngIf=\"(ldapGroup.loading$ | async) === false && nets.processes.length === 0\" fxLayout=\"column\"\n             fxLayoutAlign=\"center center\" fxFlex class=\"margin-top-x2\">\n            <mat-icon color=\"accent\" class=\"margin-bottom-default no-ldapGroup-icon\">timeline</mat-icon>\n            <span class=\"font-size-20\">{{ 'admin.process-list.noProcessesWereFound' | translate}}</span>\n        </div>\n\n        <mat-accordion class=\"full-width margin-top-default process-list-accordion\" multi fxFlex>\n\n            <mat-expansion-panel *ngFor=\"let item of nets.processes; let last = last;\" (afterExpand)=\"nets.loadProcessItemRoles(item)\"\n                                 (afterCollapse)=\"nets.prepareToTryAgainToLoadRoles(item)\" class=\"panel-body\" [ngClass]=\"{'panel-last':last}\">\n\n                <mat-expansion-panel-header class=\"role-header panel-color\">\n                    <mat-panel-title>\n                        <mat-icon *ngIf=\"item.someRolesSelected\" color=\"accent\" class=\"margin-right-x2\">tour</mat-icon>\n                        <span>{{item.initials}} - {{item.title}}</span>\n                    </mat-panel-title>\n                    <mat-panel-description class=\"process-item-description\">\n                        <span\n                            class=\"process-item-description full-width\">{{'admin.process-list.newestVersion' | translate}}\n                            : {{item.newestVersion}}</span>\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n\n                <div *ngIf=\"item.loading\" fxFlex=\"100\" class=\"full-width\">\n                    <mat-progress-bar mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n                </div>\n\n                <div *ngIf=\"!item.loading && item.emptyRoles\" fxLayout=\"column\"\n                     fxLayoutAlign=\"center center\" fxFlex class=\"full-width full-height net-panel-content\">\n                    <mat-icon color=\"accent\" class=\"margin-bottom-default\">account_circle</mat-icon>\n                    <span class=\"font-size-15\">{{ 'admin.process-list.noRoles' | translate}}</span>\n                </div>\n\n                <div *ngIf=\"!item.loading && !item.emptyRoles\" fxLayout=\"column\" fxLayoutAlign=\"start start\"\n                     class=\"full-height full-width net-panel-content\">\n                    <div *ngFor=\"let net of item.processes; let first = first\" fxLayout=\"column\"\n                         fxLayoutAlign=\"start center\" class=\"full-width\">\n                        <mat-divider *ngIf=\"!first\" style=\"position: relative\"></mat-divider>\n\n                        <div class=\"full-width\">\n                            <div fxFlex fxLayoutAlign=\"start center\">\n                                <h3 class=\"margin-none\" *ngIf=\"first\">{{ 'admin.process-list.roles' | translate}}</h3>\n                            </div>\n                            <div fxFlex fxLayoutAlign=\"center center\">\n                                <button mat-stroked-button matTooltip=\"{{item.someRolesSelected ? 'Deselect All' : 'Select All'}}\"\n                                        (click)=\"toggleAllRoles(net, !item.someRolesSelected)\">\n                                    {{net.version}}\n                                </button>\n                            </div>\n                            <div fxFlex></div>\n                        </div>\n\n                        <mat-selection-list color=\"accent\" fxLayout=\"row wrap\" fxLayoutAlign=\"start center\"\n                                            class=\"full-width\">\n                            <mat-list-option *ngFor=\"let role of net.roles\" checkboxPosition=\"before\"\n                                             [selected]=\"role.selected\" (click)=\"role.toggle();update(role)\"\n                                             fxFlex=\"50\">\n                                <h3 matLine>{{role.name}}</h3>\n                            </mat-list-option>\n                        </mat-selection-list>\n                    </div>\n                </div>\n\n            </mat-expansion-panel>\n\n        </mat-accordion>\n\n        <div *ngIf=\"nets.loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"100\">\n            <mat-spinner color=\"primary\" diameter=\"65\"></mat-spinner>\n        </div>\n    </div>\n</div>\n", styles: [".full-height{height:100%;min-height:100%}.full-width{width:100%;min-width:100%}.padding-default{padding:8px}.padding-half{padding:4px}.padding-x2{padding:16px}.margin-default{margin:8px}.margin-half{margin:4px}.margin-x2{margin:16px}.margin-top-default{margin-top:8px}.margin-top-half{margin-top:4px}.margin-top-x2{margin-top:16px}.margin-bottom-default{margin-bottom:8px}.margin-bottom-half{margin-bottom:4px}.margin-bottom-x2{margin-bottom:16px}.margin-left-default{margin-left:8px}.margin-left-half{margin-left:4px}.margin-left-x2{margin-left:16px}.margin-right-default{margin-right:8px}.margin-right-half{margin-right:4px}.margin-right-x2{margin-right:16px}.user-list-item-margin{margin:4px 0}.net-panel-content{padding-left:24px;padding-right:24px;padding-bottom:24px}.font-size-20{font-size:20px}.font-size-15{font-size:15px}.no-user-icon{font-size:40px;width:40px;height:40px}.process-item-description{text-align:right}.process-list-accordion{overflow-y:auto;padding:0 2px 4px}.process-list-accordion .mat-expansion-panel-spacing{margin:8px 0}.ldapGroup-assign-search{width:100%;color:#64748b;min-width:250px;border-radius:6px}.search-icon{margin-right:10px}.min-height-radius{min-height:64px;border-radius:8px}.prefix-icon{font-size:22px}.paragraph-fix{word-break:break-all;white-space:pre-wrap!important}.min-height-option{height:auto!important;min-height:48px;padding:3px 0!important}.role-header{min-height:48px!important;height:auto!important}.panel-last{padding-bottom:16px}.margin-none{margin-top:0!important;margin-bottom:0!important}.role-height{height:100%;min-height:100%}@media only screen and (max-width: 599.99px){.role-height{height:50%;min-height:50%;width:100%}}\n"], components: [{ type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i6.MatSelectionList, selector: "mat-selection-list", inputs: ["disableRipple", "tabIndex", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: i6.MatListOption, selector: "mat-list-option", inputs: ["disableRipple", "checkboxPosition", "color", "value", "disabled", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i9.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2$1.MatPrefix, selector: "[matPrefix]" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.MatSuffix, selector: "[matSuffix]" }, { type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i3$2.MatLine, selector: "[mat-line], [matLine]" }, { type: i9.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i9.MatExpansionPanelDescription, selector: "mat-panel-description" }], pipes: { "async": i4$1.AsyncPipe, "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LdapGroupRoleAssignmentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-ldap-group-role-assignment', providers: [
@@ -133,10 +133,10 @@ class UserInviteComponent extends AbstractUserInviteComponent {
     }
 }
 UserInviteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UserInviteComponent, deps: [{ token: i1.UserInviteService }, { token: i1.OrganizationListService }, { token: i1.SignUpService }, { token: i1.SnackBarService }, { token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-UserInviteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UserInviteComponent, selector: "nc-user-invite", usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"row\" fxLayout.lt-sm=\"column\" fxLayoutAlign=\"start start\" class=\"full-height full-width padding-default\">\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"40\" class=\"role-height margin-right-16px\">\n\n        <mat-toolbar color=\"primary\" class=\"min-height-72 margin-bottom-16px\">\n            <span>{{'admin.user-invite.newUser' | translate}}</span>\n            <div fxFlex></div>\n            <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex=\"40\"  class=\"padding-right-16px netgrif-input netgrif-input-fix netgrif-input-primary-fix netgrif-input-search-fix\">\n                <mat-icon fxFlex class=\"mail-icon\">email</mat-icon>\n                <mat-form-field fxFlex=\"100\" class=\"user-assign-search\" color=\"primary\" appearance=\"outline\">\n                    <mat-label>{{ 'admin.user-invite.mail' | translate }}</mat-label>\n                    <input matInput [formControl]=\"invitedEmailControl\">\n                    <button mat-button *ngIf=\"invitedEmailControl.value\" matSuffix mat-icon-button\n                            (click)=\"invitedEmailControl.setValue('')\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </mat-form-field>\n            </div>\n        </mat-toolbar>\n\n\n        <div fxLayout=\"column\" class=\"invited-card margin-bottom-16px\" fxLayoutAlign=\"start stretch\">\n\n            <span class=\"invited-card-font padding-16px\">{{'admin.user-invite.selectedOrgs' | translate}}</span>\n\n            <mat-divider class=\"inherited-divider\"></mat-divider>\n\n            <div class=\"padding-16px\" fxLayout=\"column\" *ngIf=\"invitedGroups.length !== 0\">\n                <div *ngFor=\"let org of invitedGroups\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                    <span>{{org.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"removeGroup(org)\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n\n            <span class=\"padding-16px\"\n                  *ngIf=\"invitedGroups.length === 0\">{{'admin.user-invite.noSelectedOrgs' | translate}}</span>\n        </div>\n\n\n        <div fxLayout=\"column\" class=\"invited-card margin-bottom-16px\" fxLayoutAlign=\"start stretch\">\n\n            <span class=\"invited-card-font padding-16px\">{{'admin.user-invite.selectedRoles' | translate}}</span>\n\n            <mat-divider class=\"inherited-divider\"></mat-divider>\n\n            <div class=\"padding-16px\" fxLayout=\"column\" *ngIf=\"invitedRoles.length !== 0\">\n                <div *ngFor=\"let role of invitedRoles\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                    <span>{{role.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"removeRole(role)\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n\n            <span class=\"padding-16px\"\n                  *ngIf=\"invitedRoles.length === 0\">{{'admin.user-invite.noSelectedRoles' | translate}}</span>\n        </div>\n\n        <div fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n            <button mat-raised-button color=\"primary\" (click)=\"invite()\">\n                <span>{{'admin.user-invite.invite-user' | translate}}</span>\n            </button>\n        </div>\n    </div>\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"30\" class=\"role-height margin-right-16px\">\n\n        <mat-toolbar color=\"primary\" class=\"min-height-72 margin-bottom-16px\">\n            <span>{{'admin.user-invite.orgs' | translate}}</span>\n        </mat-toolbar>\n\n        <div *ngIf=\"groups.length === 0\" fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex>\n            <mat-icon color=\"accent\" class=\"margin-bottom-default no-user-icon\">groups</mat-icon>\n            <span class=\"font-size-20\">{{'admin.user-invite.noGroups' | translate}}</span>\n        </div>\n\n        <div fxLayout=\"column\" class=\"invited-card \" *ngIf=\"groups.length !== 0\">\n            <div fxLayout=\"column\">\n                <div *ngFor=\"let group of groups\" class=\"padding-16px-0\" fxFlex fxLayout=\"row\"\n                     fxLayoutAlign=\"start center\">\n                    <span>{{group.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"addGroup(group)\">\n                        <mat-icon>add</mat-icon>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"30\" class=\"role-height\">\n\n        <mat-toolbar color=\"primary\" class=\"min-height-72 margin-bottom-16px\">\n            <span>{{'admin.process-list.listTitle' | translate}}</span>\n        </mat-toolbar>\n\n        <div *ngIf=\"nets.processes.length === 0\" fxLayout=\"column\"\n             fxLayoutAlign=\"center center\" fxFlex class=\"margin-top-x2\">\n            <mat-icon color=\"accent\" class=\"margin-bottom-default no-user-icon\">timeline</mat-icon>\n            <span class=\"font-size-20\">{{ 'admin.process-list.noProcessesWereFound' | translate}}</span>\n        </div>\n\n        <mat-accordion class=\"full-width margin-top-default process-list-accordion\" multi fxFlex>\n\n            <mat-expansion-panel *ngFor=\"let item of nets.processes\" (afterExpand)=\"nets.loadProcessItemRoles(item)\"\n                                 (afterCollapse)=\"nets.prepareToTryAgainToLoadRoles(item)\">\n\n                <mat-expansion-panel-header>\n                    <mat-panel-title>\n                        <mat-icon *ngIf=\"item.someRolesSelected\" color=\"accent\" class=\"margin-right-x2\">tour</mat-icon>\n                        <span>{{item.initials}} - {{item.title}}</span>\n                    </mat-panel-title>\n                    <mat-panel-description class=\"process-item-description\">\n                        <span\n                            class=\"process-item-description full-width\">{{'admin.process-list.newestVersion' | translate}}\n                            : {{item.newestVersion}}</span>\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n\n                <div *ngIf=\"item.loading\" fxFlex=\"100\" class=\"full-width\">\n                    <mat-progress-bar mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n                </div>\n\n                <div *ngIf=\"!item.loading && item.emptyRoles\" fxLayout=\"column\"\n                     fxLayoutAlign=\"center center\" fxFlex class=\"full-width full-height net-panel-content\">\n                    <mat-icon color=\"accent\" class=\"margin-bottom-default\">account_circle</mat-icon>\n                    <span class=\"font-size-15\">{{ 'admin.process-list.noRoles' | translate}}</span>\n                </div>\n\n                <div *ngIf=\"!item.loading && !item.emptyRoles\" fxLayout=\"column\" fxLayoutAlign=\"start center\"\n                     class=\"full-height full-width net-panel-content padding-0-16px\">\n                    <h3>Roles</h3>\n                    <div *ngFor=\"let net of item.processes; let first = first\" fxLayout=\"column\"\n                         fxLayoutAlign=\"start center\" class=\"full-width\">\n                        <mat-divider *ngIf=\"!first\" style=\"position: relative\"></mat-divider>\n\n                        <span>{{'admin.user-invite.version' | translate }} - {{net.version}}</span>\n\n                        <div fxLayout=\"column\" class=\"full-width padding-16px\">\n                            <div *ngFor=\"let role of net.roles\" fxFlex fxLayout=\"row wrap\" fxLayoutAlign=\"start center\">\n                                <span>{{role.name}}</span>\n\n                                <div fxFlex></div>\n\n                                <button mat-icon-button color=\"primary\" (click)=\"addRole(role)\">\n                                    <mat-icon>add</mat-icon>\n                                </button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n            </mat-expansion-panel>\n\n        </mat-accordion>\n\n        <div *ngIf=\"nets.loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"100\">\n            <mat-spinner color=\"primary\" diameter=\"65\"></mat-spinner>\n        </div>\n    </div>\n</div>\n", styles: [".full-height{height:100%;min-height:100%}.full-width{width:100%;min-width:100%}.padding-default{padding:8px}.padding-half{padding:4px}.padding-x2{padding:16px}.margin-default{margin:8px}.margin-half{margin:4px}.margin-x2{margin:16px}.margin-top-default{margin-top:8px}.margin-top-half{margin-top:4px}.margin-top-x2{margin-top:16px}.margin-bottom-default{margin-bottom:8px}.margin-bottom-half{margin-bottom:4px}.margin-bottom-x2{margin-bottom:16px}.margin-left-default{margin-left:8px}.margin-left-half{margin-left:4px}.margin-left-x2{margin-left:16px}.margin-right-default{margin-right:8px}.margin-right-half{margin-right:4px}.margin-right-x2{margin-right:16px}.flex-class{flex:1 1 auto}.min-height-72{min-height:72px}.mail-icon{margin-right:10px}.invited-card{padding:0 16px;width:100%;white-space:nowrap;border:1px solid #eeeeee;background:white}.invited-card-font,.invited-card-font h1,.invited-card-font h2,.invited-card-font h3,.invited-card-font h4,.invited-card-font h5,.invited-card-font h6{font:500 20px/32px Roboto;letter-spacing:normal;margin:0}.inherited-divider{position:inherit}.padding-16px{padding:16px}.padding-0-16px{padding:0 16px}.padding-16px-0{padding:16px 0}.padding-right-16px{padding-right:16px}.margin-right-16px{margin-right:16px}.margin-bottom-16px{margin-bottom:16px}.font-size-20{font-size:20px}.role-height{height:100%;min-height:100%}@media only screen and (max-width: 599.99px){.role-height{height:33%;min-height:33%;width:100%}}\n"], components: [{ type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i9.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatSuffix, selector: "[matSuffix]" }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { type: i9.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i9.MatExpansionPanelDescription, selector: "mat-panel-description" }], pipes: { "translate": i1$2.TranslatePipe, "async": i4$1.AsyncPipe } });
+UserInviteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UserInviteComponent, selector: "nc-user-invite", usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"row\" fxLayout.lt-sm=\"column\" fxLayoutAlign=\"start start\" class=\"full-height full-width padding-default\">\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"40\" class=\"role-height margin-right-16px\">\n\n        <mat-toolbar color=\"primary\" class=\"min-height-72 margin-bottom-16px\">\n            <span>{{'admin.user-invite.newUser' | translate}}</span>\n            <div fxFlex></div>\n            <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex=\"40\"  class=\"padding-right-16px netgrif-input netgrif-input-fix netgrif-input-primary-fix netgrif-input-search-fix\">\n                <mat-icon fxFlex class=\"mail-icon\">email</mat-icon>\n                <mat-form-field fxFlex=\"100\" class=\"user-assign-search\" color=\"primary\" appearance=\"outline\">\n                    <mat-label>{{ 'admin.user-invite.mail' | translate }}</mat-label>\n                    <input matInput [formControl]=\"invitedEmailControl\">\n                    <button mat-button *ngIf=\"invitedEmailControl.value\" matSuffix mat-icon-button\n                            (click)=\"invitedEmailControl.setValue('')\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </mat-form-field>\n            </div>\n        </mat-toolbar>\n\n\n        <div fxLayout=\"column\" class=\"invited-card margin-bottom-16px\" fxLayoutAlign=\"start stretch\">\n\n            <span class=\"invited-card-font padding-16px\">{{'admin.user-invite.selectedOrgs' | translate}}</span>\n\n            <mat-divider class=\"inherited-divider\"></mat-divider>\n\n            <div class=\"padding-16px\" fxLayout=\"column\" *ngIf=\"invitedGroups.length !== 0\">\n                <div *ngFor=\"let org of invitedGroups\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                    <span>{{org.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"removeGroup(org)\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n\n            <span class=\"padding-16px\"\n                  *ngIf=\"invitedGroups.length === 0\">{{'admin.user-invite.noSelectedOrgs' | translate}}</span>\n        </div>\n\n\n        <div fxLayout=\"column\" class=\"invited-card margin-bottom-16px\" fxLayoutAlign=\"start stretch\">\n\n            <span class=\"invited-card-font padding-16px\">{{'admin.user-invite.selectedRoles' | translate}}</span>\n\n            <mat-divider class=\"inherited-divider\"></mat-divider>\n\n            <div class=\"padding-16px\" fxLayout=\"column\" *ngIf=\"invitedRoles.length !== 0\">\n                <div *ngFor=\"let role of invitedRoles\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                    <span>{{role.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"removeRole(role)\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n\n            <span class=\"padding-16px\"\n                  *ngIf=\"invitedRoles.length === 0\">{{'admin.user-invite.noSelectedRoles' | translate}}</span>\n        </div>\n\n        <div fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n            <button mat-raised-button color=\"primary\" (click)=\"invite()\">\n                <span>{{'admin.user-invite.invite-user' | translate}}</span>\n            </button>\n        </div>\n    </div>\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"30\" class=\"role-height margin-right-16px\">\n\n        <mat-toolbar color=\"primary\" class=\"min-height-72 margin-bottom-16px\">\n            <span>{{'admin.user-invite.orgs' | translate}}</span>\n        </mat-toolbar>\n\n        <div *ngIf=\"groups.length === 0\" fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex>\n            <mat-icon color=\"accent\" class=\"margin-bottom-default no-user-icon\">groups</mat-icon>\n            <span class=\"font-size-20\">{{'admin.user-invite.noGroups' | translate}}</span>\n        </div>\n\n        <div fxLayout=\"column\" class=\"invited-card \" *ngIf=\"groups.length !== 0\">\n            <div fxLayout=\"column\">\n                <div *ngFor=\"let group of groups\" class=\"padding-16px-0\" fxFlex fxLayout=\"row\"\n                     fxLayoutAlign=\"start center\">\n                    <span>{{group.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"addGroup(group)\">\n                        <mat-icon>add</mat-icon>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"30\" class=\"role-height\">\n\n        <mat-toolbar color=\"primary\" class=\"min-height-72 margin-bottom-16px\">\n            <span>{{'admin.process-list.listTitle' | translate}}</span>\n        </mat-toolbar>\n\n        <div *ngIf=\"nets.processes.length === 0\" fxLayout=\"column\"\n             fxLayoutAlign=\"center center\" fxFlex class=\"margin-top-x2\">\n            <mat-icon color=\"accent\" class=\"margin-bottom-default no-user-icon\">timeline</mat-icon>\n            <span class=\"font-size-20\">{{ 'admin.process-list.noProcessesWereFound' | translate}}</span>\n        </div>\n\n        <mat-accordion class=\"full-width margin-top-default process-list-accordion\" multi fxFlex>\n\n            <mat-expansion-panel *ngFor=\"let item of nets.processes\" (afterExpand)=\"nets.loadProcessItemRoles(item)\"\n                                 (afterCollapse)=\"nets.prepareToTryAgainToLoadRoles(item)\">\n\n                <mat-expansion-panel-header>\n                    <mat-panel-title>\n                        <mat-icon *ngIf=\"item.someRolesSelected\" color=\"accent\" class=\"margin-right-x2\">tour</mat-icon>\n                        <span>{{item.initials}} - {{item.title}}</span>\n                    </mat-panel-title>\n                    <mat-panel-description class=\"process-item-description\">\n                        <span\n                            class=\"process-item-description full-width\">{{'admin.process-list.newestVersion' | translate}}\n                            : {{item.newestVersion}}</span>\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n\n                <div *ngIf=\"item.loading\" fxFlex=\"100\" class=\"full-width\">\n                    <mat-progress-bar mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n                </div>\n\n                <div *ngIf=\"!item.loading && item.emptyRoles\" fxLayout=\"column\"\n                     fxLayoutAlign=\"center center\" fxFlex class=\"full-width full-height net-panel-content\">\n                    <mat-icon color=\"accent\" class=\"margin-bottom-default\">account_circle</mat-icon>\n                    <span class=\"font-size-15\">{{ 'admin.process-list.noRoles' | translate}}</span>\n                </div>\n\n                <div *ngIf=\"!item.loading && !item.emptyRoles\" fxLayout=\"column\" fxLayoutAlign=\"start center\"\n                     class=\"full-height full-width net-panel-content padding-0-16px\">\n                    <h3>Roles</h3>\n                    <div *ngFor=\"let net of item.processes; let first = first\" fxLayout=\"column\"\n                         fxLayoutAlign=\"start center\" class=\"full-width\">\n                        <mat-divider *ngIf=\"!first\" style=\"position: relative\"></mat-divider>\n\n                        <span>{{'admin.user-invite.version' | translate }} - {{net.version}}</span>\n\n                        <div fxLayout=\"column\" class=\"full-width padding-16px\">\n                            <div *ngFor=\"let role of net.roles\" fxFlex fxLayout=\"row wrap\" fxLayoutAlign=\"start center\">\n                                <span>{{role.name}}</span>\n\n                                <div fxFlex></div>\n\n                                <button mat-icon-button color=\"primary\" (click)=\"addRole(role)\">\n                                    <mat-icon>add</mat-icon>\n                                </button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n            </mat-expansion-panel>\n\n        </mat-accordion>\n\n        <div *ngIf=\"nets.loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"100\">\n            <mat-spinner color=\"primary\" diameter=\"65\"></mat-spinner>\n        </div>\n    </div>\n</div>\n", styles: [".full-height{height:100%;min-height:100%}.full-width{width:100%;min-width:100%}.padding-default{padding:8px}.padding-half{padding:4px}.padding-x2{padding:16px}.margin-default{margin:8px}.margin-half{margin:4px}.margin-x2{margin:16px}.margin-top-default{margin-top:8px}.margin-top-half{margin-top:4px}.margin-top-x2{margin-top:16px}.margin-bottom-default{margin-bottom:8px}.margin-bottom-half{margin-bottom:4px}.margin-bottom-x2{margin-bottom:16px}.margin-left-default{margin-left:8px}.margin-left-half{margin-left:4px}.margin-left-x2{margin-left:16px}.margin-right-default{margin-right:8px}.margin-right-half{margin-right:4px}.margin-right-x2{margin-right:16px}.flex-class{flex:1 1 auto}.min-height-72{min-height:72px}.mail-icon{margin-right:10px}.invited-card{padding:0 16px;width:100%;white-space:nowrap;border:1px solid #eeeeee;background:white}.invited-card-font,.invited-card-font h1,.invited-card-font h2,.invited-card-font h3,.invited-card-font h4,.invited-card-font h5,.invited-card-font h6{font:500 20px/32px Roboto,sans-serif;letter-spacing:normal;margin:0}.inherited-divider{position:inherit}.padding-16px{padding:16px}.padding-0-16px{padding:0 16px}.padding-16px-0{padding:16px 0}.padding-right-16px{padding-right:16px}.margin-right-16px{margin-right:16px}.margin-bottom-16px{margin-bottom:16px}.font-size-20{font-size:20px}.role-height{height:100%;min-height:100%}@media only screen and (max-width: 599.99px){.role-height{height:33%;min-height:33%;width:100%}}\n"], components: [{ type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i9.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatSuffix, selector: "[matSuffix]" }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { type: i9.MatExpansionPanelTitle, selector: "mat-panel-title" }, { type: i9.MatExpansionPanelDescription, selector: "mat-panel-description" }], pipes: { "translate": i1$2.TranslatePipe, "async": i4$1.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UserInviteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nc-user-invite', template: "<div fxLayout=\"row\" fxLayout.lt-sm=\"column\" fxLayoutAlign=\"start start\" class=\"full-height full-width padding-default\">\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"40\" class=\"role-height margin-right-16px\">\n\n        <mat-toolbar color=\"primary\" class=\"min-height-72 margin-bottom-16px\">\n            <span>{{'admin.user-invite.newUser' | translate}}</span>\n            <div fxFlex></div>\n            <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex=\"40\"  class=\"padding-right-16px netgrif-input netgrif-input-fix netgrif-input-primary-fix netgrif-input-search-fix\">\n                <mat-icon fxFlex class=\"mail-icon\">email</mat-icon>\n                <mat-form-field fxFlex=\"100\" class=\"user-assign-search\" color=\"primary\" appearance=\"outline\">\n                    <mat-label>{{ 'admin.user-invite.mail' | translate }}</mat-label>\n                    <input matInput [formControl]=\"invitedEmailControl\">\n                    <button mat-button *ngIf=\"invitedEmailControl.value\" matSuffix mat-icon-button\n                            (click)=\"invitedEmailControl.setValue('')\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </mat-form-field>\n            </div>\n        </mat-toolbar>\n\n\n        <div fxLayout=\"column\" class=\"invited-card margin-bottom-16px\" fxLayoutAlign=\"start stretch\">\n\n            <span class=\"invited-card-font padding-16px\">{{'admin.user-invite.selectedOrgs' | translate}}</span>\n\n            <mat-divider class=\"inherited-divider\"></mat-divider>\n\n            <div class=\"padding-16px\" fxLayout=\"column\" *ngIf=\"invitedGroups.length !== 0\">\n                <div *ngFor=\"let org of invitedGroups\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                    <span>{{org.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"removeGroup(org)\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n\n            <span class=\"padding-16px\"\n                  *ngIf=\"invitedGroups.length === 0\">{{'admin.user-invite.noSelectedOrgs' | translate}}</span>\n        </div>\n\n\n        <div fxLayout=\"column\" class=\"invited-card margin-bottom-16px\" fxLayoutAlign=\"start stretch\">\n\n            <span class=\"invited-card-font padding-16px\">{{'admin.user-invite.selectedRoles' | translate}}</span>\n\n            <mat-divider class=\"inherited-divider\"></mat-divider>\n\n            <div class=\"padding-16px\" fxLayout=\"column\" *ngIf=\"invitedRoles.length !== 0\">\n                <div *ngFor=\"let role of invitedRoles\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                    <span>{{role.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"removeRole(role)\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n\n            <span class=\"padding-16px\"\n                  *ngIf=\"invitedRoles.length === 0\">{{'admin.user-invite.noSelectedRoles' | translate}}</span>\n        </div>\n\n        <div fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n            <button mat-raised-button color=\"primary\" (click)=\"invite()\">\n                <span>{{'admin.user-invite.invite-user' | translate}}</span>\n            </button>\n        </div>\n    </div>\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"30\" class=\"role-height margin-right-16px\">\n\n        <mat-toolbar color=\"primary\" class=\"min-height-72 margin-bottom-16px\">\n            <span>{{'admin.user-invite.orgs' | translate}}</span>\n        </mat-toolbar>\n\n        <div *ngIf=\"groups.length === 0\" fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex>\n            <mat-icon color=\"accent\" class=\"margin-bottom-default no-user-icon\">groups</mat-icon>\n            <span class=\"font-size-20\">{{'admin.user-invite.noGroups' | translate}}</span>\n        </div>\n\n        <div fxLayout=\"column\" class=\"invited-card \" *ngIf=\"groups.length !== 0\">\n            <div fxLayout=\"column\">\n                <div *ngFor=\"let group of groups\" class=\"padding-16px-0\" fxFlex fxLayout=\"row\"\n                     fxLayoutAlign=\"start center\">\n                    <span>{{group.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"addGroup(group)\">\n                        <mat-icon>add</mat-icon>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"30\" class=\"role-height\">\n\n        <mat-toolbar color=\"primary\" class=\"min-height-72 margin-bottom-16px\">\n            <span>{{'admin.process-list.listTitle' | translate}}</span>\n        </mat-toolbar>\n\n        <div *ngIf=\"nets.processes.length === 0\" fxLayout=\"column\"\n             fxLayoutAlign=\"center center\" fxFlex class=\"margin-top-x2\">\n            <mat-icon color=\"accent\" class=\"margin-bottom-default no-user-icon\">timeline</mat-icon>\n            <span class=\"font-size-20\">{{ 'admin.process-list.noProcessesWereFound' | translate}}</span>\n        </div>\n\n        <mat-accordion class=\"full-width margin-top-default process-list-accordion\" multi fxFlex>\n\n            <mat-expansion-panel *ngFor=\"let item of nets.processes\" (afterExpand)=\"nets.loadProcessItemRoles(item)\"\n                                 (afterCollapse)=\"nets.prepareToTryAgainToLoadRoles(item)\">\n\n                <mat-expansion-panel-header>\n                    <mat-panel-title>\n                        <mat-icon *ngIf=\"item.someRolesSelected\" color=\"accent\" class=\"margin-right-x2\">tour</mat-icon>\n                        <span>{{item.initials}} - {{item.title}}</span>\n                    </mat-panel-title>\n                    <mat-panel-description class=\"process-item-description\">\n                        <span\n                            class=\"process-item-description full-width\">{{'admin.process-list.newestVersion' | translate}}\n                            : {{item.newestVersion}}</span>\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n\n                <div *ngIf=\"item.loading\" fxFlex=\"100\" class=\"full-width\">\n                    <mat-progress-bar mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n                </div>\n\n                <div *ngIf=\"!item.loading && item.emptyRoles\" fxLayout=\"column\"\n                     fxLayoutAlign=\"center center\" fxFlex class=\"full-width full-height net-panel-content\">\n                    <mat-icon color=\"accent\" class=\"margin-bottom-default\">account_circle</mat-icon>\n                    <span class=\"font-size-15\">{{ 'admin.process-list.noRoles' | translate}}</span>\n                </div>\n\n                <div *ngIf=\"!item.loading && !item.emptyRoles\" fxLayout=\"column\" fxLayoutAlign=\"start center\"\n                     class=\"full-height full-width net-panel-content padding-0-16px\">\n                    <h3>Roles</h3>\n                    <div *ngFor=\"let net of item.processes; let first = first\" fxLayout=\"column\"\n                         fxLayoutAlign=\"start center\" class=\"full-width\">\n                        <mat-divider *ngIf=\"!first\" style=\"position: relative\"></mat-divider>\n\n                        <span>{{'admin.user-invite.version' | translate }} - {{net.version}}</span>\n\n                        <div fxLayout=\"column\" class=\"full-width padding-16px\">\n                            <div *ngFor=\"let role of net.roles\" fxFlex fxLayout=\"row wrap\" fxLayoutAlign=\"start center\">\n                                <span>{{role.name}}</span>\n\n                                <div fxFlex></div>\n\n                                <button mat-icon-button color=\"primary\" (click)=\"addRole(role)\">\n                                    <mat-icon>add</mat-icon>\n                                </button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n            </mat-expansion-panel>\n\n        </mat-accordion>\n\n        <div *ngIf=\"nets.loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"100\">\n            <mat-spinner color=\"primary\" diameter=\"65\"></mat-spinner>\n        </div>\n    </div>\n</div>\n", styles: [".full-height{height:100%;min-height:100%}.full-width{width:100%;min-width:100%}.padding-default{padding:8px}.padding-half{padding:4px}.padding-x2{padding:16px}.margin-default{margin:8px}.margin-half{margin:4px}.margin-x2{margin:16px}.margin-top-default{margin-top:8px}.margin-top-half{margin-top:4px}.margin-top-x2{margin-top:16px}.margin-bottom-default{margin-bottom:8px}.margin-bottom-half{margin-bottom:4px}.margin-bottom-x2{margin-bottom:16px}.margin-left-default{margin-left:8px}.margin-left-half{margin-left:4px}.margin-left-x2{margin-left:16px}.margin-right-default{margin-right:8px}.margin-right-half{margin-right:4px}.margin-right-x2{margin-right:16px}.flex-class{flex:1 1 auto}.min-height-72{min-height:72px}.mail-icon{margin-right:10px}.invited-card{padding:0 16px;width:100%;white-space:nowrap;border:1px solid #eeeeee;background:white}.invited-card-font,.invited-card-font h1,.invited-card-font h2,.invited-card-font h3,.invited-card-font h4,.invited-card-font h5,.invited-card-font h6{font:500 20px/32px Roboto;letter-spacing:normal;margin:0}.inherited-divider{position:inherit}.padding-16px{padding:16px}.padding-0-16px{padding:0 16px}.padding-16px-0{padding:16px 0}.padding-right-16px{padding-right:16px}.margin-right-16px{margin-right:16px}.margin-bottom-16px{margin-bottom:16px}.font-size-20{font-size:20px}.role-height{height:100%;min-height:100%}@media only screen and (max-width: 599.99px){.role-height{height:33%;min-height:33%;width:100%}}\n"] }]
+            args: [{ selector: 'nc-user-invite', template: "<div fxLayout=\"row\" fxLayout.lt-sm=\"column\" fxLayoutAlign=\"start start\" class=\"full-height full-width padding-default\">\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"40\" class=\"role-height margin-right-16px\">\n\n        <mat-toolbar color=\"primary\" class=\"min-height-72 margin-bottom-16px\">\n            <span>{{'admin.user-invite.newUser' | translate}}</span>\n            <div fxFlex></div>\n            <div fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex=\"40\"  class=\"padding-right-16px netgrif-input netgrif-input-fix netgrif-input-primary-fix netgrif-input-search-fix\">\n                <mat-icon fxFlex class=\"mail-icon\">email</mat-icon>\n                <mat-form-field fxFlex=\"100\" class=\"user-assign-search\" color=\"primary\" appearance=\"outline\">\n                    <mat-label>{{ 'admin.user-invite.mail' | translate }}</mat-label>\n                    <input matInput [formControl]=\"invitedEmailControl\">\n                    <button mat-button *ngIf=\"invitedEmailControl.value\" matSuffix mat-icon-button\n                            (click)=\"invitedEmailControl.setValue('')\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </mat-form-field>\n            </div>\n        </mat-toolbar>\n\n\n        <div fxLayout=\"column\" class=\"invited-card margin-bottom-16px\" fxLayoutAlign=\"start stretch\">\n\n            <span class=\"invited-card-font padding-16px\">{{'admin.user-invite.selectedOrgs' | translate}}</span>\n\n            <mat-divider class=\"inherited-divider\"></mat-divider>\n\n            <div class=\"padding-16px\" fxLayout=\"column\" *ngIf=\"invitedGroups.length !== 0\">\n                <div *ngFor=\"let org of invitedGroups\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                    <span>{{org.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"removeGroup(org)\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n\n            <span class=\"padding-16px\"\n                  *ngIf=\"invitedGroups.length === 0\">{{'admin.user-invite.noSelectedOrgs' | translate}}</span>\n        </div>\n\n\n        <div fxLayout=\"column\" class=\"invited-card margin-bottom-16px\" fxLayoutAlign=\"start stretch\">\n\n            <span class=\"invited-card-font padding-16px\">{{'admin.user-invite.selectedRoles' | translate}}</span>\n\n            <mat-divider class=\"inherited-divider\"></mat-divider>\n\n            <div class=\"padding-16px\" fxLayout=\"column\" *ngIf=\"invitedRoles.length !== 0\">\n                <div *ngFor=\"let role of invitedRoles\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                    <span>{{role.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"removeRole(role)\">\n                        <mat-icon>close</mat-icon>\n                    </button>\n                </div>\n            </div>\n\n            <span class=\"padding-16px\"\n                  *ngIf=\"invitedRoles.length === 0\">{{'admin.user-invite.noSelectedRoles' | translate}}</span>\n        </div>\n\n        <div fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n            <button mat-raised-button color=\"primary\" (click)=\"invite()\">\n                <span>{{'admin.user-invite.invite-user' | translate}}</span>\n            </button>\n        </div>\n    </div>\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"30\" class=\"role-height margin-right-16px\">\n\n        <mat-toolbar color=\"primary\" class=\"min-height-72 margin-bottom-16px\">\n            <span>{{'admin.user-invite.orgs' | translate}}</span>\n        </mat-toolbar>\n\n        <div *ngIf=\"groups.length === 0\" fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex>\n            <mat-icon color=\"accent\" class=\"margin-bottom-default no-user-icon\">groups</mat-icon>\n            <span class=\"font-size-20\">{{'admin.user-invite.noGroups' | translate}}</span>\n        </div>\n\n        <div fxLayout=\"column\" class=\"invited-card \" *ngIf=\"groups.length !== 0\">\n            <div fxLayout=\"column\">\n                <div *ngFor=\"let group of groups\" class=\"padding-16px-0\" fxFlex fxLayout=\"row\"\n                     fxLayoutAlign=\"start center\">\n                    <span>{{group.name}}</span>\n\n                    <div fxFlex></div>\n\n                    <button mat-icon-button color=\"primary\" (click)=\"addGroup(group)\">\n                        <mat-icon>add</mat-icon>\n                    </button>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex=\"30\" class=\"role-height\">\n\n        <mat-toolbar color=\"primary\" class=\"min-height-72 margin-bottom-16px\">\n            <span>{{'admin.process-list.listTitle' | translate}}</span>\n        </mat-toolbar>\n\n        <div *ngIf=\"nets.processes.length === 0\" fxLayout=\"column\"\n             fxLayoutAlign=\"center center\" fxFlex class=\"margin-top-x2\">\n            <mat-icon color=\"accent\" class=\"margin-bottom-default no-user-icon\">timeline</mat-icon>\n            <span class=\"font-size-20\">{{ 'admin.process-list.noProcessesWereFound' | translate}}</span>\n        </div>\n\n        <mat-accordion class=\"full-width margin-top-default process-list-accordion\" multi fxFlex>\n\n            <mat-expansion-panel *ngFor=\"let item of nets.processes\" (afterExpand)=\"nets.loadProcessItemRoles(item)\"\n                                 (afterCollapse)=\"nets.prepareToTryAgainToLoadRoles(item)\">\n\n                <mat-expansion-panel-header>\n                    <mat-panel-title>\n                        <mat-icon *ngIf=\"item.someRolesSelected\" color=\"accent\" class=\"margin-right-x2\">tour</mat-icon>\n                        <span>{{item.initials}} - {{item.title}}</span>\n                    </mat-panel-title>\n                    <mat-panel-description class=\"process-item-description\">\n                        <span\n                            class=\"process-item-description full-width\">{{'admin.process-list.newestVersion' | translate}}\n                            : {{item.newestVersion}}</span>\n                    </mat-panel-description>\n                </mat-expansion-panel-header>\n\n                <div *ngIf=\"item.loading\" fxFlex=\"100\" class=\"full-width\">\n                    <mat-progress-bar mode=\"indeterminate\" color=\"primary\"></mat-progress-bar>\n                </div>\n\n                <div *ngIf=\"!item.loading && item.emptyRoles\" fxLayout=\"column\"\n                     fxLayoutAlign=\"center center\" fxFlex class=\"full-width full-height net-panel-content\">\n                    <mat-icon color=\"accent\" class=\"margin-bottom-default\">account_circle</mat-icon>\n                    <span class=\"font-size-15\">{{ 'admin.process-list.noRoles' | translate}}</span>\n                </div>\n\n                <div *ngIf=\"!item.loading && !item.emptyRoles\" fxLayout=\"column\" fxLayoutAlign=\"start center\"\n                     class=\"full-height full-width net-panel-content padding-0-16px\">\n                    <h3>Roles</h3>\n                    <div *ngFor=\"let net of item.processes; let first = first\" fxLayout=\"column\"\n                         fxLayoutAlign=\"start center\" class=\"full-width\">\n                        <mat-divider *ngIf=\"!first\" style=\"position: relative\"></mat-divider>\n\n                        <span>{{'admin.user-invite.version' | translate }} - {{net.version}}</span>\n\n                        <div fxLayout=\"column\" class=\"full-width padding-16px\">\n                            <div *ngFor=\"let role of net.roles\" fxFlex fxLayout=\"row wrap\" fxLayoutAlign=\"start center\">\n                                <span>{{role.name}}</span>\n\n                                <div fxFlex></div>\n\n                                <button mat-icon-button color=\"primary\" (click)=\"addRole(role)\">\n                                    <mat-icon>add</mat-icon>\n                                </button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n            </mat-expansion-panel>\n\n        </mat-accordion>\n\n        <div *ngIf=\"nets.loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFlex=\"100\">\n            <mat-spinner color=\"primary\" diameter=\"65\"></mat-spinner>\n        </div>\n    </div>\n</div>\n", styles: [".full-height{height:100%;min-height:100%}.full-width{width:100%;min-width:100%}.padding-default{padding:8px}.padding-half{padding:4px}.padding-x2{padding:16px}.margin-default{margin:8px}.margin-half{margin:4px}.margin-x2{margin:16px}.margin-top-default{margin-top:8px}.margin-top-half{margin-top:4px}.margin-top-x2{margin-top:16px}.margin-bottom-default{margin-bottom:8px}.margin-bottom-half{margin-bottom:4px}.margin-bottom-x2{margin-bottom:16px}.margin-left-default{margin-left:8px}.margin-left-half{margin-left:4px}.margin-left-x2{margin-left:16px}.margin-right-default{margin-right:8px}.margin-right-half{margin-right:4px}.margin-right-x2{margin-right:16px}.flex-class{flex:1 1 auto}.min-height-72{min-height:72px}.mail-icon{margin-right:10px}.invited-card{padding:0 16px;width:100%;white-space:nowrap;border:1px solid #eeeeee;background:white}.invited-card-font,.invited-card-font h1,.invited-card-font h2,.invited-card-font h3,.invited-card-font h4,.invited-card-font h5,.invited-card-font h6{font:500 20px/32px Roboto,sans-serif;letter-spacing:normal;margin:0}.inherited-divider{position:inherit}.padding-16px{padding:16px}.padding-0-16px{padding:0 16px}.padding-16px-0{padding:16px 0}.padding-right-16px{padding-right:16px}.margin-right-16px{margin-right:16px}.margin-bottom-16px{margin-bottom:16px}.font-size-20{font-size:20px}.role-height{height:100%;min-height:100%}@media only screen and (max-width: 599.99px){.role-height{height:33%;min-height:33%;width:100%}}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.UserInviteService }, { type: i1.OrganizationListService }, { type: i1.SignUpService }, { type: i1.SnackBarService }, { type: i1$2.TranslateService }]; } });
 
 class AdminComponentModule {
@@ -542,7 +542,7 @@ class RequiredLabelComponent {
     }
 }
 RequiredLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RequiredLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RequiredLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RequiredLabelComponent, selector: "nc-required-label", inputs: { isIn: "isIn" }, ngImport: i0, template: "<span class=\"required-label-color\" [ngClass]=\"{ 'disabled-color': !isIn }\"> * </span>\n", styles: [".required-label-color{color:red}.disabled-color{color:#94a3b8}\n"], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
+RequiredLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RequiredLabelComponent, selector: "nc-required-label", inputs: { isIn: "isIn" }, ngImport: i0, template: "<span class=\"required-label-color\" [ngClass]=\"{ 'disabled-color': !isIn }\"> * </span>\n", styles: [".required-label-color{color:red}.disabled-color{color:#94a3b8}\n"], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RequiredLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-required-label', template: "<span class=\"required-label-color\" [ngClass]=\"{ 'disabled-color': !isIn }\"> * </span>\n", styles: [".required-label-color{color:red}.disabled-color{color:#94a3b8}\n"] }]
@@ -558,10 +558,10 @@ class DataFieldTemplateComponent extends AbstractDataFieldTemplateComponent {
     }
 }
 DataFieldTemplateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DataFieldTemplateComponent, deps: [{ token: i1.PaperViewService }, { token: i1.ConfigurationService }, { token: i1.ComponentRegistryService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-DataFieldTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DataFieldTemplateComponent, selector: "nc-data-field-template", usesInheritance: true, ngImport: i0, template: "<div class=\"fill-all-space\" #dataFieldContainer>\n\n    <!-- Large layout -->\n    <ng-template [ngIf]=\"evaluateTemplateCondition()\" [ngIfElse]=\"elseTemplate\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"fill-all-space\" [ngClass]=\"{'padding-16px': isPaperView(), 'padding-32px': !isPaperView()}\">\n            <div fxFlex=\"{{offset}}\"></div>\n            <div fxFlex=\"{{47.5 - offset}}\" class=\"cell-padding\">\n                <span class=\"data-field-title\" [matTooltip]=\"dataField.description\">{{dataField.title}}<nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"true\"></nc-required-label></span>\n            </div>\n            <div fxFlex=\"5\"></div>\n            <div fxFlex=\"{{47.5 - offset}}\" class=\"cell-padding\">\n                <ng-container [cdkPortalHost]=\"this.componentPortal\"></ng-container>\n            </div>\n            <div fxFlex=\"{{offset}}\"></div>\n        </div>\n    </ng-template>\n\n    <!-- Small layout -->\n    <ng-template #elseTemplate>\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"fill-all-space\" [ngClass]=\"{'padding-8px': isNotButton()}\">\n            <div fxFlex=\"{{offset}}\"></div>\n            <div fxFlex=\"{{100 -  (2 * offset)}}\" class=\"cell-padding\">\n                <ng-container [cdkPortalHost]=\"this.componentPortal\"></ng-container>\n            </div>\n            <div fxFlex=\"{{offset}}\"></div>\n        </div>\n    </ng-template>\n</div>\n\n", styles: [".data-field-title{font-size:16px;font-weight:400}.fill-all-space{min-width:100%;padding:0;margin:0 auto}.cell-padding{margin:0;padding:4px 0 0}.padding-8px{padding:0 8px}.padding-16px{padding:0 16px}.padding-32px{padding:0 32px}\n"], components: [{ type: RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1$4.PortalHostDirective, selector: "[cdkPortalHost], [portalHost]", inputs: ["cdkPortalHost"], exportAs: ["cdkPortalHost"] }] });
+DataFieldTemplateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DataFieldTemplateComponent, selector: "nc-data-field-template", usesInheritance: true, ngImport: i0, template: "<div class=\"fill-all-space\" #dataFieldContainer>\n\n    <!-- Large layout -->\n    <ng-template [ngIf]=\"evaluateTemplateCondition()\" [ngIfElse]=\"elseTemplate\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"fill-all-space\" [ngClass]=\"{'padding-16px': isPaperView(), 'padding-32px': !isPaperView()}\">\n            <div fxFlex=\"{{offset}}\"></div>\n            <div fxFlex=\"{{47.5 - offset}}\" class=\"cell-padding\">\n                <span class=\"data-field-title\" [matTooltip]=\"dataField.description\">{{dataField.title}}<nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"true\"></nc-required-label></span>\n            </div>\n            <div fxFlex=\"5\"></div>\n            <div fxFlex=\"{{47.5 - offset}}\" class=\"cell-padding\">\n                <ng-container [cdkPortalHost]=\"this.componentPortal\"></ng-container>\n            </div>\n            <div fxFlex=\"{{offset}}\"></div>\n        </div>\n    </ng-template>\n\n    <!-- Small layout -->\n    <ng-template #elseTemplate>\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"fill-all-space padding-8px\">\n            <div fxFlex=\"{{offset}}\"></div>\n            <div fxFlex=\"{{100 -  (2 * offset)}}\" class=\"cell-padding\">\n                <ng-container [cdkPortalHost]=\"this.componentPortal\"></ng-container>\n            </div>\n            <div fxFlex=\"{{offset}}\"></div>\n        </div>\n    </ng-template>\n</div>\n\n", styles: [".data-field-title{font-size:16px;font-weight:400}.fill-all-space{min-width:100%;padding:0;margin:0 auto}.cell-padding{margin:0;padding:4px 0 0}.padding-8px{padding:0 8px}.padding-16px{padding:0 16px}.padding-32px{padding:0 32px}\n"], components: [{ type: RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1$4.PortalHostDirective, selector: "[cdkPortalHost], [portalHost]", inputs: ["cdkPortalHost"], exportAs: ["cdkPortalHost"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DataFieldTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nc-data-field-template', template: "<div class=\"fill-all-space\" #dataFieldContainer>\n\n    <!-- Large layout -->\n    <ng-template [ngIf]=\"evaluateTemplateCondition()\" [ngIfElse]=\"elseTemplate\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"fill-all-space\" [ngClass]=\"{'padding-16px': isPaperView(), 'padding-32px': !isPaperView()}\">\n            <div fxFlex=\"{{offset}}\"></div>\n            <div fxFlex=\"{{47.5 - offset}}\" class=\"cell-padding\">\n                <span class=\"data-field-title\" [matTooltip]=\"dataField.description\">{{dataField.title}}<nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"true\"></nc-required-label></span>\n            </div>\n            <div fxFlex=\"5\"></div>\n            <div fxFlex=\"{{47.5 - offset}}\" class=\"cell-padding\">\n                <ng-container [cdkPortalHost]=\"this.componentPortal\"></ng-container>\n            </div>\n            <div fxFlex=\"{{offset}}\"></div>\n        </div>\n    </ng-template>\n\n    <!-- Small layout -->\n    <ng-template #elseTemplate>\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"fill-all-space\" [ngClass]=\"{'padding-8px': isNotButton()}\">\n            <div fxFlex=\"{{offset}}\"></div>\n            <div fxFlex=\"{{100 -  (2 * offset)}}\" class=\"cell-padding\">\n                <ng-container [cdkPortalHost]=\"this.componentPortal\"></ng-container>\n            </div>\n            <div fxFlex=\"{{offset}}\"></div>\n        </div>\n    </ng-template>\n</div>\n\n", styles: [".data-field-title{font-size:16px;font-weight:400}.fill-all-space{min-width:100%;padding:0;margin:0 auto}.cell-padding{margin:0;padding:4px 0 0}.padding-8px{padding:0 8px}.padding-16px{padding:0 16px}.padding-32px{padding:0 32px}\n"] }]
+            args: [{ selector: 'nc-data-field-template', template: "<div class=\"fill-all-space\" #dataFieldContainer>\n\n    <!-- Large layout -->\n    <ng-template [ngIf]=\"evaluateTemplateCondition()\" [ngIfElse]=\"elseTemplate\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"fill-all-space\" [ngClass]=\"{'padding-16px': isPaperView(), 'padding-32px': !isPaperView()}\">\n            <div fxFlex=\"{{offset}}\"></div>\n            <div fxFlex=\"{{47.5 - offset}}\" class=\"cell-padding\">\n                <span class=\"data-field-title\" [matTooltip]=\"dataField.description\">{{dataField.title}}<nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"true\"></nc-required-label></span>\n            </div>\n            <div fxFlex=\"5\"></div>\n            <div fxFlex=\"{{47.5 - offset}}\" class=\"cell-padding\">\n                <ng-container [cdkPortalHost]=\"this.componentPortal\"></ng-container>\n            </div>\n            <div fxFlex=\"{{offset}}\"></div>\n        </div>\n    </ng-template>\n\n    <!-- Small layout -->\n    <ng-template #elseTemplate>\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"fill-all-space padding-8px\">\n            <div fxFlex=\"{{offset}}\"></div>\n            <div fxFlex=\"{{100 -  (2 * offset)}}\" class=\"cell-padding\">\n                <ng-container [cdkPortalHost]=\"this.componentPortal\"></ng-container>\n            </div>\n            <div fxFlex=\"{{offset}}\"></div>\n        </div>\n    </ng-template>\n</div>\n\n", styles: [".data-field-title{font-size:16px;font-weight:400}.fill-all-space{min-width:100%;padding:0;margin:0 auto}.cell-padding{margin:0;padding:4px 0 0}.padding-8px{padding:0 8px}.padding-16px{padding:0 16px}.padding-32px{padding:0 32px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.PaperViewService }, { type: i1.ConfigurationService }, { type: i1.ComponentRegistryService }, { type: i0.Injector }]; } });
 
 /**
@@ -689,7 +689,7 @@ class EnumerationAutocompleteSelectFieldComponent extends AbstractEnumerationAut
     }
 }
 EnumerationAutocompleteSelectFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EnumerationAutocompleteSelectFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-EnumerationAutocompleteSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: EnumerationAutocompleteSelectFieldComponent, selector: "nc-enumeration-autocomplete-select-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <input type=\"text\"\n           aria-label=\"Autocomplete\"\n           matInput\n           #input\n           [placeholder]=\"dataField.placeholder\"\n           [formControl]=\"formControlRef\"\n           [matAutocomplete]=\"auto\"\n           [required]=\"dataField.behavior.required\"\n           (focus)=\"change()\"\n           (keyup)=\"change()\">\n    <mat-autocomplete [displayWith]=\"renderSelection\" autoActiveFirstOption #auto=\"matAutocomplete\">\n        <mat-option [value]=\"null\">---</mat-option>\n        <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option.key\" (click)=\"change()\">\n            {{option.value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{buildErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "async": i4$1.AsyncPipe } });
+EnumerationAutocompleteSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: EnumerationAutocompleteSelectFieldComponent, selector: "nc-enumeration-autocomplete-select-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <input type=\"text\"\n           aria-label=\"Autocomplete\"\n           matInput\n           #input\n           [placeholder]=\"dataField.placeholder\"\n           [formControl]=\"formControlRef\"\n           [matAutocomplete]=\"auto\"\n           [required]=\"dataField.behavior.required\"\n           (focus)=\"change()\"\n           (keyup)=\"change()\">\n    <mat-autocomplete [displayWith]=\"renderSelection\" autoActiveFirstOption #auto=\"matAutocomplete\">\n        <mat-option [value]=\"null\">---</mat-option>\n        <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option.key\" (click)=\"change()\">\n            {{option.value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{buildErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "async": i4$1.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EnumerationAutocompleteSelectFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-enumeration-autocomplete-select-field', template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <input type=\"text\"\n           aria-label=\"Autocomplete\"\n           matInput\n           #input\n           [placeholder]=\"dataField.placeholder\"\n           [formControl]=\"formControlRef\"\n           [matAutocomplete]=\"auto\"\n           [required]=\"dataField.behavior.required\"\n           (focus)=\"change()\"\n           (keyup)=\"change()\">\n    <mat-autocomplete [displayWith]=\"renderSelection\" autoActiveFirstOption #auto=\"matAutocomplete\">\n        <mat-option [value]=\"null\">---</mat-option>\n        <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option.key\" (click)=\"change()\">\n            {{option.value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{buildErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
@@ -708,7 +708,7 @@ class EnumerationSelectFieldComponent extends AbstractEnumerationSelectFieldComp
     }
 }
 EnumerationSelectFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EnumerationSelectFieldComponent, deps: [{ token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-EnumerationSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: EnumerationSelectFieldComponent, selector: "nc-enumeration-select-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <mat-select [formControl]=\"formControlRef\"\n                [placeholder]=\"dataField.placeholder\"\n                [required]=\"dataField.behavior.required\">\n        <mat-option [value]=\"null\">---</mat-option>\n        <mat-option *ngFor=\"let option of dataField.choices\" [value]=\"option.key\">\n            {{option.value}}\n        </mat-option>\n    </mat-select>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1$2.TranslatePipe } });
+EnumerationSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: EnumerationSelectFieldComponent, selector: "nc-enumeration-select-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <mat-select [formControl]=\"formControlRef\"\n                [placeholder]=\"dataField.placeholder\"\n                [required]=\"dataField.behavior.required\">\n        <mat-option [value]=\"null\">---</mat-option>\n        <mat-option *ngFor=\"let option of dataField.choices\" [value]=\"option.key\">\n            {{option.value}}\n        </mat-option>\n    </mat-select>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EnumerationSelectFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-enumeration-select-field', template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <mat-select [formControl]=\"formControlRef\"\n                [placeholder]=\"dataField.placeholder\"\n                [required]=\"dataField.behavior.required\">\n        <mat-option [value]=\"null\">---</mat-option>\n        <mat-option *ngFor=\"let option of dataField.choices\" [value]=\"option.key\">\n            {{option.value}}\n        </mat-option>\n    </mat-select>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
@@ -727,7 +727,7 @@ class EnumerationListFieldComponent extends AbstractEnumerationListFieldComponen
     }
 }
 EnumerationListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EnumerationListFieldComponent, deps: [{ token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-EnumerationListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: EnumerationListFieldComponent, selector: "nc-enumeration-list-field", usesInheritance: true, ngImport: i0, template: "<mat-radio-group\n    color=\"primary\"\n    class=\"full-width example-radio-group netgrif-label\"\n    aria-labelledby=\"example-radio-group-label\"\n    [required]=\"dataField.behavior.required\"\n    [formControl]=\"formControlRef\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\">\n    <mat-label *ngIf=\"!showLargeLayout.value\"  >{{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"true\"></nc-required-label>\n        <button mat-button *ngIf=\"!formControlRef.disabled\" (click)=\"resetEnum()\">{{'dataField.enum.reset' | translate}}</button>\n        <br></mat-label>\n    <mat-radio-button class=\"example-radio-button\" *ngFor=\"let option of dataField.choices\" [value]=\"option.key\">\n        {{option.value}}\n    </mat-radio-button>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\" *ngIf=\"dataField.description !== undefined && dataField.description !== ''\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</mat-radio-group>\n", styles: [".example-radio-group{display:flex;flex-direction:column}.full-width{width:100%}\n"], components: [{ type: RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$5.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i3$5.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1$2.TranslatePipe } });
+EnumerationListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: EnumerationListFieldComponent, selector: "nc-enumeration-list-field", usesInheritance: true, ngImport: i0, template: "<mat-radio-group\n    color=\"primary\"\n    class=\"full-width example-radio-group netgrif-label\"\n    aria-labelledby=\"example-radio-group-label\"\n    [required]=\"dataField.behavior.required\"\n    [formControl]=\"formControlRef\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\">\n    <mat-label *ngIf=\"!showLargeLayout.value\"  >{{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"true\"></nc-required-label>\n        <button mat-button *ngIf=\"!formControlRef.disabled\" (click)=\"resetEnum()\">{{'dataField.enum.reset' | translate}}</button>\n        <br></mat-label>\n    <mat-radio-button class=\"example-radio-button\" *ngFor=\"let option of dataField.choices\" [value]=\"option.key\">\n        {{option.value}}\n    </mat-radio-button>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\" *ngIf=\"dataField.description !== undefined && dataField.description !== ''\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</mat-radio-group>\n", styles: [".example-radio-group{display:flex;flex-direction:column}.full-width{width:100%}\n"], components: [{ type: RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3$5.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }], directives: [{ type: i3$5.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EnumerationListFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-enumeration-list-field', template: "<mat-radio-group\n    color=\"primary\"\n    class=\"full-width example-radio-group netgrif-label\"\n    aria-labelledby=\"example-radio-group-label\"\n    [required]=\"dataField.behavior.required\"\n    [formControl]=\"formControlRef\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\">\n    <mat-label *ngIf=\"!showLargeLayout.value\"  >{{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"true\"></nc-required-label>\n        <button mat-button *ngIf=\"!formControlRef.disabled\" (click)=\"resetEnum()\">{{'dataField.enum.reset' | translate}}</button>\n        <br></mat-label>\n    <mat-radio-button class=\"example-radio-button\" *ngFor=\"let option of dataField.choices\" [value]=\"option.key\">\n        {{option.value}}\n    </mat-radio-button>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\" *ngIf=\"dataField.description !== undefined && dataField.description !== ''\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</mat-radio-group>\n", styles: [".example-radio-group{display:flex;flex-direction:column}.full-width{width:100%}\n"] }]
@@ -812,7 +812,7 @@ class MultichoiceSelectFieldComponent extends AbstractMultichoiceSelectFieldComp
     }
 }
 MultichoiceSelectFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultichoiceSelectFieldComponent, deps: [{ token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MultichoiceSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultichoiceSelectFieldComponent, selector: "nc-multichoice-select-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <mat-select [placeholder]=\"dataField.placeholder\"\n                [formControl]=\"formControlRef\"\n                [required]=\"dataField.behavior.required\"\n                multiple>\n        <mat-option *ngFor=\"let option of dataField.choices\" [value]=\"option.key\">\n            {{option.value}}\n        </mat-option>\n    </mat-select>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1$2.TranslatePipe } });
+MultichoiceSelectFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultichoiceSelectFieldComponent, selector: "nc-multichoice-select-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <mat-select [placeholder]=\"dataField.placeholder\"\n                [formControl]=\"formControlRef\"\n                [required]=\"dataField.behavior.required\"\n                multiple>\n        <mat-option *ngFor=\"let option of dataField.choices\" [value]=\"option.key\">\n            {{option.value}}\n        </mat-option>\n    </mat-select>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultichoiceSelectFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-multichoice-select-field', template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <mat-select [placeholder]=\"dataField.placeholder\"\n                [formControl]=\"formControlRef\"\n                [required]=\"dataField.behavior.required\"\n                multiple>\n        <mat-option *ngFor=\"let option of dataField.choices\" [value]=\"option.key\">\n            {{option.value}}\n        </mat-option>\n    </mat-select>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
@@ -831,7 +831,7 @@ class MultichoiceListFieldComponent extends AbstractMultichoiceListFieldComponen
     }
 }
 MultichoiceListFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultichoiceListFieldComponent, deps: [{ token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MultichoiceListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultichoiceListFieldComponent, selector: "nc-multichoice-list-field", usesInheritance: true, ngImport: i0, template: "<mat-selection-list color=\"primary\"\n                    [formControl]=\"formControlRef\"\n                    [required]=\"dataField.behavior.required\">\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value\">{{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"true\"></nc-required-label>\n        <br></mat-label>\n    <mat-list-option checkboxPosition=\"before\" *ngFor=\"let option of dataField.choices\" [value]=\"option.key\">\n        {{option.value}}\n    </mat-list-option>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\" *ngIf=\"dataField.description !== undefined && dataField.description !== '' && !dataField.isInvalid(formControlRef)\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</mat-selection-list>\n", styles: [""], components: [{ type: i6.MatSelectionList, selector: "mat-selection-list", inputs: ["disableRipple", "tabIndex", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { type: RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i6.MatListOption, selector: "mat-list-option", inputs: ["disableRipple", "checkboxPosition", "color", "value", "disabled", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }], directives: [{ type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1$2.TranslatePipe } });
+MultichoiceListFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultichoiceListFieldComponent, selector: "nc-multichoice-list-field", usesInheritance: true, ngImport: i0, template: "<mat-selection-list color=\"primary\"\n                    [formControl]=\"formControlRef\"\n                    [required]=\"dataField.behavior.required\">\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value\">{{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"true\"></nc-required-label>\n        <br></mat-label>\n    <mat-list-option checkboxPosition=\"before\" *ngFor=\"let option of dataField.choices\" [value]=\"option.key\">\n        {{option.value}}\n    </mat-list-option>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\" *ngIf=\"dataField.description !== undefined && dataField.description !== '' && !dataField.isInvalid(formControlRef)\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</mat-selection-list>\n", styles: [""], components: [{ type: i6.MatSelectionList, selector: "mat-selection-list", inputs: ["disableRipple", "tabIndex", "color", "compareWith", "disabled", "multiple"], outputs: ["selectionChange"], exportAs: ["matSelectionList"] }, { type: RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i6.MatListOption, selector: "mat-list-option", inputs: ["disableRipple", "checkboxPosition", "color", "value", "disabled", "selected"], outputs: ["selectedChange"], exportAs: ["matListOption"] }], directives: [{ type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultichoiceListFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-multichoice-list-field', template: "<mat-selection-list color=\"primary\"\n                    [formControl]=\"formControlRef\"\n                    [required]=\"dataField.behavior.required\">\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value\">{{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"true\"></nc-required-label>\n        <br></mat-label>\n    <mat-list-option checkboxPosition=\"before\" *ngFor=\"let option of dataField.choices\" [value]=\"option.key\">\n        {{option.value}}\n    </mat-list-option>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\" *ngIf=\"dataField.description !== undefined && dataField.description !== '' && !dataField.isInvalid(formControlRef)\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</mat-selection-list>\n", styles: [""] }]
@@ -875,10 +875,10 @@ class TextFieldComponent extends AbstractTextFieldComponent {
     }
 }
 TextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextFieldComponent, deps: [{ token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TextFieldComponent, selector: "nc-text-field", usesInheritance: true, ngImport: i0, template: "<nc-data-field-template *ngIf=\"!dataField.behavior.hidden\"\n                        [dataField]=\"dataField\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n<!--<ng-template #textFieldTemplate let-showLargeLayout=\"showLargeLayout\">-->\n<!--    <div [ngSwitch]=\"dataField.getComponentType()\">-->\n<!--&lt;!&ndash;        <nc-password-text-field *ngSwitchCase=\"textFieldComponentEnum.PASSWORD\" [passwordTextField]=\"dataField\" [formControlRef]=\"formControl\"&ndash;&gt;-->\n<!--&lt;!&ndash;                                [showLargeLayout]=\"showLargeLayout\"></nc-password-text-field>&ndash;&gt;-->\n<!--        <nc-textarea-field *ngSwitchCase=\"textFieldComponentEnum.TEXT_AREA\" [textAreaField]=\"dataField\" [formControlRef]=\"formControl\"-->\n<!--                           [showLargeLayout]=\"showLargeLayout\"></nc-textarea-field>-->\n<!--        <nc-textarea-field *ngSwitchCase=\"'area'\" [textAreaField]=\"dataField\" [formControlRef]=\"formControl\"-->\n<!--                           [showLargeLayout]=\"showLargeLayout\"></nc-textarea-field>-->\n<!--        <nc-rich-textarea-field *ngSwitchCase=\"textFieldComponentEnum.RICH_TEXT_AREA\" [textAreaField]=\"dataField\"-->\n<!--                                [formControlRef]=\"formControl\"-->\n<!--                                [showLargeLayout]=\"showLargeLayout\"></nc-rich-textarea-field>-->\n<!--        <nc-rich-textarea-field *ngSwitchCase=\"'editor'\" [textAreaField]=\"dataField\"-->\n<!--                                [formControlRef]=\"formControl\"-->\n<!--                                [showLargeLayout]=\"showLargeLayout\"></nc-rich-textarea-field>-->\n<!--        <nc-html-textarea-field *ngSwitchCase=\"textFieldComponentEnum.HTML_TEXT_AREA\" [textAreaField]=\"dataField\"-->\n<!--                                [formControlRef]=\"formControl\"-->\n<!--                                [showLargeLayout]=\"showLargeLayout\"></nc-html-textarea-field>-->\n<!--        <nc-html-textarea-field *ngSwitchCase=\"'htmlEditor'\" [textAreaField]=\"dataField\"-->\n<!--                                [formControlRef]=\"formControl\"-->\n<!--                                [showLargeLayout]=\"showLargeLayout\"></nc-html-textarea-field>-->\n<!--        <nc-dashboard-line-chart-text-field *ngSwitchCase=\"textFieldComponentEnum.DASHBOARD_LINE_CHART\"-->\n<!--                                            [textField]=\"dataField\"-->\n<!--                                            [showLargeLayout]=\"showLargeLayout\"-->\n<!--                                            [formControlRef]=\"formControl\"></nc-dashboard-line-chart-text-field>-->\n<!--        <nc-dashboard-pie-chart-text-field *ngSwitchCase=\"textFieldComponentEnum.DASHBOARD_PIE_CHART\"-->\n<!--                                           [textField]=\"dataField\"-->\n<!--                                           [showLargeLayout]=\"showLargeLayout\"-->\n<!--                                           [formControlRef]=\"formControl\"></nc-dashboard-pie-chart-text-field>-->\n<!--        <nc-dashboard-bar-chart-text-field *ngSwitchCase=\"textFieldComponentEnum.DASHBOARD_BAR_CHART\"-->\n<!--                                           [textField]=\"dataField\"-->\n<!--                                           [showLargeLayout]=\"showLargeLayout\"-->\n<!--                                           [formControlRef]=\"formControl\"></nc-dashboard-bar-chart-text-field>-->\n<!--        <nc-dashboard-iframe-text-field *ngSwitchCase=\"textFieldComponentEnum.DASHBOARD_IFRAME\"-->\n<!--                                        [textField]=\"dataField\"-->\n<!--                                        [showLargeLayout]=\"showLargeLayout\"-->\n<!--                                        [formControlRef]=\"formControl\"></nc-dashboard-iframe-text-field>-->\n<!--        <nc-dashboard-portal-text-field *ngSwitchCase=\"textFieldComponentEnum.DASHBOARD_PORTAL\"-->\n<!--                                        [textField]=\"dataField\"-->\n<!--                                        [showLargeLayout]=\"showLargeLayout\"-->\n<!--                                        [formControlRef]=\"formControl\"></nc-dashboard-portal-text-field>-->\n<!--        <nc-simple-text-field *ngSwitchDefault [textField]=\"dataField\" [formControlRef]=\"formControl\"-->\n<!--                              [showLargeLayout]=\"showLargeLayout\"></nc-simple-text-field>-->\n<!--    </div>-->\n<!--</ng-template>-->\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: DataFieldTemplateComponent, selector: "nc-data-field-template" }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+TextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TextFieldComponent, selector: "nc-text-field", usesInheritance: true, ngImport: i0, template: "<nc-data-field-template *ngIf=\"!dataField.behavior.hidden\"\n                        [dataField]=\"dataField\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: DataFieldTemplateComponent, selector: "nc-data-field-template" }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nc-text-field', template: "<nc-data-field-template *ngIf=\"!dataField.behavior.hidden\"\n                        [dataField]=\"dataField\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n<!--<ng-template #textFieldTemplate let-showLargeLayout=\"showLargeLayout\">-->\n<!--    <div [ngSwitch]=\"dataField.getComponentType()\">-->\n<!--&lt;!&ndash;        <nc-password-text-field *ngSwitchCase=\"textFieldComponentEnum.PASSWORD\" [passwordTextField]=\"dataField\" [formControlRef]=\"formControl\"&ndash;&gt;-->\n<!--&lt;!&ndash;                                [showLargeLayout]=\"showLargeLayout\"></nc-password-text-field>&ndash;&gt;-->\n<!--        <nc-textarea-field *ngSwitchCase=\"textFieldComponentEnum.TEXT_AREA\" [textAreaField]=\"dataField\" [formControlRef]=\"formControl\"-->\n<!--                           [showLargeLayout]=\"showLargeLayout\"></nc-textarea-field>-->\n<!--        <nc-textarea-field *ngSwitchCase=\"'area'\" [textAreaField]=\"dataField\" [formControlRef]=\"formControl\"-->\n<!--                           [showLargeLayout]=\"showLargeLayout\"></nc-textarea-field>-->\n<!--        <nc-rich-textarea-field *ngSwitchCase=\"textFieldComponentEnum.RICH_TEXT_AREA\" [textAreaField]=\"dataField\"-->\n<!--                                [formControlRef]=\"formControl\"-->\n<!--                                [showLargeLayout]=\"showLargeLayout\"></nc-rich-textarea-field>-->\n<!--        <nc-rich-textarea-field *ngSwitchCase=\"'editor'\" [textAreaField]=\"dataField\"-->\n<!--                                [formControlRef]=\"formControl\"-->\n<!--                                [showLargeLayout]=\"showLargeLayout\"></nc-rich-textarea-field>-->\n<!--        <nc-html-textarea-field *ngSwitchCase=\"textFieldComponentEnum.HTML_TEXT_AREA\" [textAreaField]=\"dataField\"-->\n<!--                                [formControlRef]=\"formControl\"-->\n<!--                                [showLargeLayout]=\"showLargeLayout\"></nc-html-textarea-field>-->\n<!--        <nc-html-textarea-field *ngSwitchCase=\"'htmlEditor'\" [textAreaField]=\"dataField\"-->\n<!--                                [formControlRef]=\"formControl\"-->\n<!--                                [showLargeLayout]=\"showLargeLayout\"></nc-html-textarea-field>-->\n<!--        <nc-dashboard-line-chart-text-field *ngSwitchCase=\"textFieldComponentEnum.DASHBOARD_LINE_CHART\"-->\n<!--                                            [textField]=\"dataField\"-->\n<!--                                            [showLargeLayout]=\"showLargeLayout\"-->\n<!--                                            [formControlRef]=\"formControl\"></nc-dashboard-line-chart-text-field>-->\n<!--        <nc-dashboard-pie-chart-text-field *ngSwitchCase=\"textFieldComponentEnum.DASHBOARD_PIE_CHART\"-->\n<!--                                           [textField]=\"dataField\"-->\n<!--                                           [showLargeLayout]=\"showLargeLayout\"-->\n<!--                                           [formControlRef]=\"formControl\"></nc-dashboard-pie-chart-text-field>-->\n<!--        <nc-dashboard-bar-chart-text-field *ngSwitchCase=\"textFieldComponentEnum.DASHBOARD_BAR_CHART\"-->\n<!--                                           [textField]=\"dataField\"-->\n<!--                                           [showLargeLayout]=\"showLargeLayout\"-->\n<!--                                           [formControlRef]=\"formControl\"></nc-dashboard-bar-chart-text-field>-->\n<!--        <nc-dashboard-iframe-text-field *ngSwitchCase=\"textFieldComponentEnum.DASHBOARD_IFRAME\"-->\n<!--                                        [textField]=\"dataField\"-->\n<!--                                        [showLargeLayout]=\"showLargeLayout\"-->\n<!--                                        [formControlRef]=\"formControl\"></nc-dashboard-iframe-text-field>-->\n<!--        <nc-dashboard-portal-text-field *ngSwitchCase=\"textFieldComponentEnum.DASHBOARD_PORTAL\"-->\n<!--                                        [textField]=\"dataField\"-->\n<!--                                        [showLargeLayout]=\"showLargeLayout\"-->\n<!--                                        [formControlRef]=\"formControl\"></nc-dashboard-portal-text-field>-->\n<!--        <nc-simple-text-field *ngSwitchDefault [textField]=\"dataField\" [formControlRef]=\"formControl\"-->\n<!--                              [showLargeLayout]=\"showLargeLayout\"></nc-simple-text-field>-->\n<!--    </div>-->\n<!--</ng-template>-->\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
+            args: [{ selector: 'nc-text-field', template: "<nc-data-field-template *ngIf=\"!dataField.behavior.hidden\"\n                        [dataField]=\"dataField\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Optional
@@ -896,7 +896,7 @@ class TextareaFieldComponent extends AbstractTextareaFieldComponent {
     }
 }
 TextareaFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextareaFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: i0.NgZone }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TextareaFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TextareaFieldComponent, selector: "nc-textarea-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\"\n                floatLabel=\"always\"\n                class=\"full-width\"\n                color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <textarea matInput\n              #textArea\n              [placeholder]=\"dataField.placeholder\"\n              [required]=\"dataField.behavior.required\"\n              [formControl]=\"formControlRef\"\n              [ngStyle]=\"{'min-height': getHeight()+'px', 'height': getHeight()+'px'}\"\n              #dynamicTextArea=\"cdkTextareaAutosize\"\n              cdkTextareaAutosize\n              cdkAutosizeMinRows=\"1\"></textarea>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n\n\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+TextareaFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TextareaFieldComponent, selector: "nc-textarea-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\"\n                floatLabel=\"always\"\n                class=\"full-width\"\n                color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <textarea matInput\n              #textArea\n              [placeholder]=\"dataField.placeholder\"\n              [required]=\"dataField.behavior.required\"\n              [formControl]=\"formControlRef\"\n              [ngStyle]=\"{'min-height': getHeight()+'px', 'height': getHeight()+'px'}\"\n              #dynamicTextArea=\"cdkTextareaAutosize\"\n              cdkTextareaAutosize\n              cdkAutosizeMinRows=\"1\"></textarea>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n\n\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TextareaFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-textarea-field', template: "<mat-form-field [appearance]=\"dataField.materialAppearance\"\n                floatLabel=\"always\"\n                class=\"full-width\"\n                color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <textarea matInput\n              #textArea\n              [placeholder]=\"dataField.placeholder\"\n              [required]=\"dataField.behavior.required\"\n              [formControl]=\"formControlRef\"\n              [ngStyle]=\"{'min-height': getHeight()+'px', 'height': getHeight()+'px'}\"\n              #dynamicTextArea=\"cdkTextareaAutosize\"\n              cdkTextareaAutosize\n              cdkAutosizeMinRows=\"1\"></textarea>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n\n\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
@@ -998,7 +998,7 @@ class RichTextareaFieldComponent extends AbstractRichTextareaFieldComponent {
     }
 }
 RichTextareaFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RichTextareaFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-RichTextareaFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RichTextareaFieldComponent, selector: "nc-rich-textarea-field", usesInheritance: true, ngImport: i0, template: "<div class=\"height-100\" [ngClass]=\"{'padding-bottom-custom': !formControlRef.disabled}\">\n    <nc-easymde-wrapper *ngIf=\"!formControlRef.disabled\" [formControlRef]=\"formControlRef\" [textAreaField]=\"dataField\"></nc-easymde-wrapper>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n\n    <input type=\"hidden\" [formControl]=\"formControlRef\">\n\n    <div [ngClass]=\"{'border': dataField.materialAppearance === 'outline'}\" *ngIf=\"formControlRef.disabled\">\n        <td-markdown>{{dataField.value}}</td-markdown>\n    </div>\n</div>\n", styles: [".height-100{height:100%}.border{border:1px solid #CBD5E1;border-radius:6px;padding:10px;z-index:1;word-wrap:break-word}.padding-bottom-custom{padding-bottom:8px}\n"], components: [{ type: EasymdeWrapperComponent, selector: "nc-easymde-wrapper", inputs: ["formControlRef", "textAreaField"] }, { type: i3$6.TdMarkdownComponent, selector: "td-markdown", inputs: ["content", "simpleLineBreaks", "hostedUrl", "anchor"], outputs: ["contentReady"] }], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+RichTextareaFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: RichTextareaFieldComponent, selector: "nc-rich-textarea-field", usesInheritance: true, ngImport: i0, template: "<div class=\"height-100\" [ngClass]=\"{'padding-bottom-custom': !formControlRef.disabled}\">\n    <nc-easymde-wrapper *ngIf=\"!formControlRef.disabled\" [formControlRef]=\"formControlRef\" [textAreaField]=\"dataField\"></nc-easymde-wrapper>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n\n    <input type=\"hidden\" [formControl]=\"formControlRef\">\n\n    <div [ngClass]=\"{'border': dataField.materialAppearance === 'outline'}\" *ngIf=\"formControlRef.disabled\">\n        <td-markdown>{{dataField.value}}</td-markdown>\n    </div>\n</div>\n", styles: [".height-100{height:100%}.border{border:1px solid #CBD5E1;border-radius:6px;padding:10px;z-index:1;word-wrap:break-word}.padding-bottom-custom{padding-bottom:8px}\n"], components: [{ type: EasymdeWrapperComponent, selector: "nc-easymde-wrapper", inputs: ["formControlRef", "textAreaField"] }, { type: i3$6.TdMarkdownComponent, selector: "td-markdown", inputs: ["content", "simpleLineBreaks", "hostedUrl", "anchor"], outputs: ["contentReady"] }], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: RichTextareaFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-rich-textarea-field', template: "<div class=\"height-100\" [ngClass]=\"{'padding-bottom-custom': !formControlRef.disabled}\">\n    <nc-easymde-wrapper *ngIf=\"!formControlRef.disabled\" [formControlRef]=\"formControlRef\" [textAreaField]=\"dataField\"></nc-easymde-wrapper>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n\n    <input type=\"hidden\" [formControl]=\"formControlRef\">\n\n    <div [ngClass]=\"{'border': dataField.materialAppearance === 'outline'}\" *ngIf=\"formControlRef.disabled\">\n        <td-markdown>{{dataField.value}}</td-markdown>\n    </div>\n</div>\n", styles: [".height-100{height:100%}.border{border:1px solid #CBD5E1;border-radius:6px;padding:10px;z-index:1;word-wrap:break-word}.padding-bottom-custom{padding-bottom:8px}\n"] }]
@@ -1018,7 +1018,7 @@ class SimpleTextFieldComponent extends AbstractSimpleTextFieldComponent {
     }
 }
 SimpleTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SimpleTextFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SimpleTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SimpleTextFieldComponent, selector: "nc-simple-text-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <input matInput\n           [placeholder]=\"dataField.placeholder\"\n           [required]=\"dataField.behavior.required\"\n           [formControl]=\"formControlRef\">\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+SimpleTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SimpleTextFieldComponent, selector: "nc-simple-text-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <input matInput\n           [placeholder]=\"dataField.placeholder\"\n           [required]=\"dataField.behavior.required\"\n           [formControl]=\"formControlRef\">\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SimpleTextFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-simple-text-field', template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <input matInput\n           [placeholder]=\"dataField.placeholder\"\n           [required]=\"dataField.behavior.required\"\n           [formControl]=\"formControlRef\">\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
@@ -1069,7 +1069,7 @@ class HtmlTextareaFieldComponent extends AbstractHtmlTextareaFieldComponent {
     }
 }
 HtmlTextareaFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HtmlTextareaFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: i3$3.DomSanitizer }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-HtmlTextareaFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: HtmlTextareaFieldComponent, selector: "nc-html-textarea-field", usesInheritance: true, ngImport: i0, template: "<div class=\"height-100\" #quillContainer [ngClass]=\"{'padding-bottom-custom': !formControlRef.disabled}\">\n    <quill-editor theme=\"snow\" *ngIf=\"!formControlRef.disabled\" [(ngModel)]=\"dataField.value\"\n                  [modules]=\"quillModules\" [bounds]=\"quillContainer\" placeholder=\"{{ dataField.placeholder |translate}}\"></quill-editor>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n    <input type=\"hidden\" [formControl]=\"formControlRef\">\n    <div *ngIf=\"formControlRef.disabled\" class=\"ql-snow user-select-auto\" [ngClass]=\"{'border' : dataField.materialAppearance === 'outline'}\">\n        <div [ngClass]=\"{'ql-editor' : dataField.materialAppearance === 'outline'}\" [innerHTML]=\"disabledDisplay\"></div>\n    </div>\n</div>\n", styles: [".height-100{height:100%}.border{border:1px solid #CBD5E1;border-radius:6px;padding:10px;z-index:1;word-wrap:break-word}.user-select-auto{-webkit-user-select:auto;user-select:auto}.padding-bottom-custom{padding-bottom:8px}\n"], components: [{ type: i3$7.QuillEditorComponent, selector: "quill-editor" }], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i1$2.TranslatePipe } });
+HtmlTextareaFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: HtmlTextareaFieldComponent, selector: "nc-html-textarea-field", usesInheritance: true, ngImport: i0, template: "<div class=\"height-100\" #quillContainer [ngClass]=\"{'padding-bottom-custom': !formControlRef.disabled}\">\n    <quill-editor theme=\"snow\" *ngIf=\"!formControlRef.disabled\" [(ngModel)]=\"dataField.value\"\n                  [modules]=\"quillModules\" [bounds]=\"quillContainer\" placeholder=\"{{ dataField.placeholder |translate}}\"></quill-editor>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n    <input type=\"hidden\" [formControl]=\"formControlRef\">\n    <div *ngIf=\"formControlRef.disabled\" class=\"ql-snow user-select-auto\" [ngClass]=\"{'border' : dataField.materialAppearance === 'outline'}\">\n        <div [ngClass]=\"{'ql-editor' : dataField.materialAppearance === 'outline'}\" [innerHTML]=\"disabledDisplay\"></div>\n    </div>\n</div>\n", styles: [".height-100{height:100%}.border{border:1px solid #CBD5E1;border-radius:6px;padding:10px;z-index:1;word-wrap:break-word}.user-select-auto{-webkit-user-select:auto;user-select:auto}.padding-bottom-custom{padding-bottom:8px}\n"], components: [{ type: i3$7.QuillEditorComponent, selector: "quill-editor" }], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], pipes: { "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HtmlTextareaFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-html-textarea-field', template: "<div class=\"height-100\" #quillContainer [ngClass]=\"{'padding-bottom-custom': !formControlRef.disabled}\">\n    <quill-editor theme=\"snow\" *ngIf=\"!formControlRef.disabled\" [(ngModel)]=\"dataField.value\"\n                  [modules]=\"quillModules\" [bounds]=\"quillContainer\" placeholder=\"{{ dataField.placeholder |translate}}\"></quill-editor>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n    <input type=\"hidden\" [formControl]=\"formControlRef\">\n    <div *ngIf=\"formControlRef.disabled\" class=\"ql-snow user-select-auto\" [ngClass]=\"{'border' : dataField.materialAppearance === 'outline'}\">\n        <div [ngClass]=\"{'ql-editor' : dataField.materialAppearance === 'outline'}\" [innerHTML]=\"disabledDisplay\"></div>\n    </div>\n</div>\n", styles: [".height-100{height:100%}.border{border:1px solid #CBD5E1;border-radius:6px;padding:10px;z-index:1;word-wrap:break-word}.user-select-auto{-webkit-user-select:auto;user-select:auto}.padding-bottom-custom{padding-bottom:8px}\n"] }]
@@ -1097,7 +1097,7 @@ class NumberCurrencyFieldComponent extends AbstractCurrencyNumberFieldComponent
     }
 }
 NumberCurrencyFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumberCurrencyFieldComponent, deps: [{ token: i4$1.CurrencyPipe }, { token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-NumberCurrencyFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NumberCurrencyFieldComponent, selector: "nc-number-currency-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <span matPrefix *ngIf=\"isNumberType() &&\n     this.dataField.component.properties['code'] !== ' ' &&\n      this.dataField.component.properties['code'] !== ''  \">{{this.dataField.component.properties['code'] ?? ''}}</span>\n    <input matInput\n           [type]=\"fieldType\"\n           [value]=\"transformedValue\"\n           [formControl]=\"formControlRef\"\n           [placeholder]=\"dataField.placeholder\"\n           [required]=\"dataField.behavior.required\"\n           (focusout)=\"onFocusOut($event)\"\n           (focusin)=\"onFocusIn()\">\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i2$1.MatPrefix, selector: "[matPrefix]" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+NumberCurrencyFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NumberCurrencyFieldComponent, selector: "nc-number-currency-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <span matPrefix *ngIf=\"isNumberType() &&\n     this.dataField.component.properties['code'] !== ' ' &&\n      this.dataField.component.properties['code'] !== ''  \">{{this.dataField.component.properties['code'] ?? ''}}</span>\n    <input matInput\n           [type]=\"fieldType\"\n           [value]=\"transformedValue\"\n           [formControl]=\"formControlRef\"\n           [placeholder]=\"dataField.placeholder\"\n           [required]=\"dataField.behavior.required\"\n           (focusout)=\"onFocusOut($event)\"\n           (focusin)=\"onFocusIn()\">\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i2$1.MatPrefix, selector: "[matPrefix]" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumberCurrencyFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-number-currency-field', template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <span matPrefix *ngIf=\"isNumberType() &&\n     this.dataField.component.properties['code'] !== ' ' &&\n      this.dataField.component.properties['code'] !== ''  \">{{this.dataField.component.properties['code'] ?? ''}}</span>\n    <input matInput\n           [type]=\"fieldType\"\n           [value]=\"transformedValue\"\n           [formControl]=\"formControlRef\"\n           [placeholder]=\"dataField.placeholder\"\n           [required]=\"dataField.behavior.required\"\n           (focusout)=\"onFocusOut($event)\"\n           (focusin)=\"onFocusIn()\">\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
@@ -1116,7 +1116,7 @@ class NumberDefaultFieldComponent extends AbstractDefaultNumberFieldComponent {
     }
 }
 NumberDefaultFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumberDefaultFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-NumberDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NumberDefaultFieldComponent, selector: "nc-number-default-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <input matInput\n           type=\"number\"\n           [formControl]=\"formControlRef\"\n           [placeholder]=\"dataField.placeholder\"\n           [required]=\"dataField.behavior.required\">\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+NumberDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NumberDefaultFieldComponent, selector: "nc-number-default-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <input matInput\n           type=\"number\"\n           [formControl]=\"formControlRef\"\n           [placeholder]=\"dataField.placeholder\"\n           [required]=\"dataField.behavior.required\">\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumberDefaultFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-number-default-field', template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <input matInput\n           type=\"number\"\n           [formControl]=\"formControlRef\"\n           [placeholder]=\"dataField.placeholder\"\n           [required]=\"dataField.behavior.required\">\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
@@ -1137,7 +1137,7 @@ class PasswordTextFieldComponent extends AbstractPasswordTextFieldComponent {
     }
 }
 PasswordTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PasswordTextFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-PasswordTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PasswordTextFieldComponent, selector: "nc-password-text-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <input matInput\n           [placeholder]=\"dataField.placeholder\"\n           [required]=\"dataField.behavior.required\"\n           [formControl]=\"formControlRef\"\n           [type]=\"hide ? 'password' : 'text'\">\n    <button mat-icon-button matSuffix type=\"button\"\n            (click)=\"hide = !hide\"\n            (keypress)=\"false\"\n            [attr.aria-label]=\"'Hide password'\"\n            [attr.aria-pressed]=\"hide\">\n        <mat-icon\n            [color]=\"hide ? undefined : 'accent'\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\n    </button>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.MatSuffix, selector: "[matSuffix]" }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+PasswordTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PasswordTextFieldComponent, selector: "nc-password-text-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <input matInput\n           [placeholder]=\"dataField.placeholder\"\n           [required]=\"dataField.behavior.required\"\n           [formControl]=\"formControlRef\"\n           [type]=\"hide ? 'password' : 'text'\">\n    <button mat-icon-button matSuffix type=\"button\"\n            (click)=\"hide = !hide\"\n            (keypress)=\"false\"\n            [attr.aria-label]=\"'Hide password'\"\n            [attr.aria-pressed]=\"hide\">\n        <mat-icon\n            [color]=\"hide ? undefined : 'accent'\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\n    </button>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.MatSuffix, selector: "[matSuffix]" }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PasswordTextFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-password-text-field', template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <input matInput\n           [placeholder]=\"dataField.placeholder\"\n           [required]=\"dataField.behavior.required\"\n           [formControl]=\"formControlRef\"\n           [type]=\"hide ? 'password' : 'text'\">\n    <button mat-icon-button matSuffix type=\"button\"\n            (click)=\"hide = !hide\"\n            (keypress)=\"false\"\n            [attr.aria-label]=\"'Hide password'\"\n            [attr.aria-pressed]=\"hide\">\n        <mat-icon\n            [color]=\"hide ? undefined : 'accent'\">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>\n    </button>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
@@ -1183,7 +1183,7 @@ class EnumerationStepperFieldComponent extends AbstractEnumerationStepperFieldCo
     }
 }
 EnumerationStepperFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EnumerationStepperFieldComponent, deps: [{ token: i0.ElementRef }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-EnumerationStepperFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: EnumerationStepperFieldComponent, selector: "nc-enumeration-stepper-field", usesInheritance: true, ngImport: i0, template: "<mat-label class=\"stepper-label netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value && hasTitle()\"\n           matTooltipClass=\"stepper-tooltip-text\" [matTooltip]=\"dataField.description\" matTooltipPosition=\"right\">\n    {{dataField.title}}\n    <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\" ></nc-required-label>\n</mat-label>\n\n<div *ngIf=\"!arrowStepper\" [matTooltip]=\"dataField.description\" [ngClass.lt-sm]=\"'touch-action-enabled'\"\n     class=\"horizontal-stepper\" fxLayout=\"row\" fxLayout.lt-sm=\"column\" matTooltipPosition=\"above\">\n    <div class=\"horizontal-step\" fxShow.gt-xs fxHide.lt-sm>\n        <ng-template ngFor let-option [ngForOf]=\"dataField.choices\" let-i=\"index\">\n            <div class=\"horizontal-step-header\" #oneStep>\n                <div class=\"horizontal-state\" [ngClass]=\"{'horizontal-state-primary': canShowDoneIcon(i), 'horizontal-state-secondary': !canShowDoneIcon(i)}\">\n                    <mat-icon *ngIf=\"canShowDoneIcon(i + 1)\">done</mat-icon>\n                </div>\n                <div class=\"horizontal-state-label\">{{option.value}}</div>\n            </div>\n            <div class=\"horizontal-line\" fxFlex *ngIf=\"i < dataField.choices.length - 1\"></div>\n        </ng-template>\n    </div>\n    <div class=\"vertical-step\" fxLayout=\"column\" fxShow.lt-sm fxHide.gt-xs>\n        <ng-template ngFor let-option [ngForOf]=\"dataField.choices\" let-i=\"index\">\n            <div class=\"vertical-step-header\" fxFlex fxLayout=\"row\">\n                <div class=\"vertical-state\"\n                     [ngClass]=\"{'horizontal-state-primary': canShowDoneIcon(i), 'horizontal-state-secondary': !canShowDoneIcon(i)}\">\n                    <mat-icon *ngIf=\"canShowDoneIcon(i + 1)\">done</mat-icon>\n                </div>\n                <div class=\"vertical-state-label\">{{option.value}}</div>\n            </div>\n            <div class=\"vertical-line\" fxFlex *ngIf=\"i < dataField.choices.length - 1\"></div>\n        </ng-template>\n    </div>\n</div>\n\n<div *ngIf=\"arrowStepper\" class=\"stepper-min-height\" fxLayoutAlign=\"stretch center\" fxLayout=\"row\" fxLayout.lt-sm=\"column\"\n     [matTooltip]=\"dataField.description\" matTooltipPosition=\"above\" [ngClass]=\"{'stepper-disabled': formControlRef.disabled}\">\n    <ng-template ngFor let-option [ngForOf]=\"dataField.choices\" let-i=\"index\">\n            <span class=\"stepper-arrow-text\" [ngClass]=\"{'stepper-arrow-selected': isSelected(option.key)}\"\n                  (click)=\"setStepperValue(option.key)\" fxFlex fxLayoutAlign=\"center center\" fxHide.lt-sm>{{option.value}}</span>\n        <span fxFlex.gt-sm class=\"stepper-arrow-text\" *ngIf=\"i < dataField.choices.length - 1\" fxLayoutAlign=\"center center\" fxHide.lt-sm>\n                <mat-icon>arrow_forward_ios</mat-icon>\n            </span>\n    </ng-template>\n    <span class=\"stepper-arrow-text stepper-arrow-selected\" fxShow.lt-sm fxHide.gt-xs\n          fxFlex fxLayoutAlign=\"center center\">{{resolveValue(dataField.value)}}</span>\n</div>\n", styles: [".horizontal-stepper{display:flex}.horizontal-step-header{box-sizing:border-box;flex-direction:column;height:auto;padding:24px;overflow:hidden;outline:none;position:relative;-webkit-tap-highlight-color:transparent;display:flex;align-items:center}.horizontal-step-header:not(:first-child):before{left:0}.horizontal-step-header:not(:last-child):after{right:0}.horizontal-step-header:not(:last-child):after,.horizontal-step-header:not(:first-child):before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);top:36px}.horizontal-state{color:#fff;border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.horizontal-state-label{display:inline-block;overflow:hidden;text-overflow:ellipsis;min-width:36px;vertical-align:middle;padding:16px 0 0;text-align:center;width:100%;word-wrap:break-word}.horizontal-line{position:relative;top:36px;border-top-width:1px;border-top-style:solid;flex:auto;height:0;min-width:12px}.horizontal-step{flex:auto;display:flex}.vertical-step-header{box-sizing:border-box;flex-direction:column;height:auto;padding:24px;overflow:hidden;outline:none;position:relative;-webkit-tap-highlight-color:transparent;display:flex;align-items:center}.vertical-step-header:first-child:before{top:44px}.vertical-step-header:not(:first-child):before{top:0}.vertical-step-header:not(:last-child):after{bottom:0}.vertical-step-header:not(:last-child):after,.vertical-step-header:not(:first-child):before{border-left-width:1px;border-left-style:solid;content:\"\";display:inline-block;width:0;position:absolute;height:calc(50% - 20px);left:36px}.vertical-state{color:#fff;border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.vertical-state-label{display:inline-block;overflow:hidden;text-overflow:ellipsis;min-width:36px;vertical-align:middle;text-align:center;width:100%;word-wrap:break-word;white-space:break-spaces}.vertical-line{position:relative;border-left-width:1px;border-left-style:solid;flex:auto;height:0;margin:0 36px;min-height:12px}.vertical-step{flex:auto;display:flex}.stepper-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:100%}.stepper-tooltip-text{color:#fff;padding:10px 15px}.stepper-min-height{border-radius:10px;min-height:70px;background-color:#f9f9f9;padding:0 32px}.stepper-arrow-text{font-weight:500;font-size:16px;letter-spacing:-.2;line-height:24px;color:#64748b;cursor:pointer;text-align:center}.stepper-disabled{cursor:unset!important}.stepper-disabled .stepper-arrow-text{color:#94a3b8;cursor:alias}.touch-action-enabled{touch-action:auto!important;-webkit-user-drag:auto!important}@media only screen and (max-width: 959px){.stepper-arrow-text{word-break:break-word}}\n"], components: [{ type: RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i7$1.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
+EnumerationStepperFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: EnumerationStepperFieldComponent, selector: "nc-enumeration-stepper-field", usesInheritance: true, ngImport: i0, template: "<mat-label class=\"stepper-label netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value && hasTitle()\"\n           matTooltipClass=\"stepper-tooltip-text\" [matTooltip]=\"dataField.description\" matTooltipPosition=\"right\">\n    {{dataField.title}}\n    <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\" ></nc-required-label>\n</mat-label>\n\n<div *ngIf=\"!arrowStepper\" [matTooltip]=\"dataField.description\" [ngClass.lt-sm]=\"'touch-action-enabled'\"\n     class=\"horizontal-stepper\" fxLayout=\"row\" fxLayout.lt-sm=\"column\" matTooltipPosition=\"above\">\n    <div class=\"horizontal-step\" fxShow.gt-xs fxHide.lt-sm>\n        <ng-template ngFor let-option [ngForOf]=\"dataField.choices\" let-i=\"index\">\n            <div class=\"horizontal-step-header\" #oneStep>\n                <div class=\"horizontal-state\" [ngClass]=\"{'horizontal-state-primary': canShowDoneIcon(i), 'horizontal-state-secondary': !canShowDoneIcon(i)}\">\n                    <mat-icon *ngIf=\"canShowDoneIcon(i + 1)\">done</mat-icon>\n                </div>\n                <div class=\"horizontal-state-label\">{{option.value}}</div>\n            </div>\n            <div class=\"horizontal-line\" fxFlex *ngIf=\"i < dataField.choices.length - 1\"></div>\n        </ng-template>\n    </div>\n    <div class=\"vertical-step\" fxLayout=\"column\" fxShow.lt-sm fxHide.gt-xs>\n        <ng-template ngFor let-option [ngForOf]=\"dataField.choices\" let-i=\"index\">\n            <div class=\"vertical-step-header\" fxFlex fxLayout=\"row\">\n                <div class=\"vertical-state\"\n                     [ngClass]=\"{'horizontal-state-primary': canShowDoneIcon(i), 'horizontal-state-secondary': !canShowDoneIcon(i)}\">\n                    <mat-icon *ngIf=\"canShowDoneIcon(i + 1)\">done</mat-icon>\n                </div>\n                <div class=\"vertical-state-label\">{{option.value}}</div>\n            </div>\n            <div class=\"vertical-line\" fxFlex *ngIf=\"i < dataField.choices.length - 1\"></div>\n        </ng-template>\n    </div>\n</div>\n\n<div *ngIf=\"arrowStepper\" class=\"stepper-min-height\" fxLayoutAlign=\"stretch center\" fxLayout=\"row\" fxLayout.lt-sm=\"column\"\n     [matTooltip]=\"dataField.description\" matTooltipPosition=\"above\" [ngClass]=\"{'stepper-disabled': formControlRef.disabled}\">\n    <ng-template ngFor let-option [ngForOf]=\"dataField.choices\" let-i=\"index\">\n            <span class=\"stepper-arrow-text\" [ngClass]=\"{'stepper-arrow-selected': isSelected(option.key)}\"\n                  (click)=\"setStepperValue(option.key)\" fxFlex fxLayoutAlign=\"center center\" fxHide.lt-sm>{{option.value}}</span>\n        <span fxFlex.gt-sm class=\"stepper-arrow-text\" *ngIf=\"i < dataField.choices.length - 1\" fxLayoutAlign=\"center center\" fxHide.lt-sm>\n                <mat-icon>arrow_forward_ios</mat-icon>\n            </span>\n    </ng-template>\n    <span class=\"stepper-arrow-text stepper-arrow-selected\" fxShow.lt-sm fxHide.gt-xs\n          fxFlex fxLayoutAlign=\"center center\">{{resolveValue(dataField.value)}}</span>\n</div>\n", styles: [".horizontal-stepper{display:flex}.horizontal-step-header{box-sizing:border-box;flex-direction:column;height:auto;padding:24px;overflow:hidden;outline:none;position:relative;-webkit-tap-highlight-color:transparent;display:flex;align-items:center}.horizontal-step-header:not(:first-child):before{left:0}.horizontal-step-header:not(:last-child):after{right:0}.horizontal-step-header:not(:last-child):after,.horizontal-step-header:not(:first-child):before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);top:36px}.horizontal-state{color:#fff;border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.horizontal-state-label{display:inline-block;overflow:hidden;text-overflow:ellipsis;min-width:36px;vertical-align:middle;padding:16px 0 0;text-align:center;width:100%;word-wrap:break-word}.horizontal-line{position:relative;top:36px;border-top-width:1px;border-top-style:solid;flex:auto;height:0;min-width:12px}.horizontal-step{flex:auto;display:flex}.vertical-step-header{box-sizing:border-box;flex-direction:column;height:auto;padding:24px;overflow:hidden;outline:none;position:relative;-webkit-tap-highlight-color:transparent;display:flex;align-items:center}.vertical-step-header:first-child:before{top:44px}.vertical-step-header:not(:first-child):before{top:0}.vertical-step-header:not(:last-child):after{bottom:0}.vertical-step-header:not(:last-child):after,.vertical-step-header:not(:first-child):before{border-left-width:1px;border-left-style:solid;content:\"\";display:inline-block;width:0;position:absolute;height:calc(50% - 20px);left:36px}.vertical-state{color:#fff;border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.vertical-state-label{display:inline-block;overflow:hidden;text-overflow:ellipsis;min-width:36px;vertical-align:middle;text-align:center;width:100%;word-wrap:break-word;white-space:break-spaces}.vertical-line{position:relative;border-left-width:1px;border-left-style:solid;flex:auto;height:0;margin:0 36px;min-height:12px}.vertical-step{flex:auto;display:flex}.stepper-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:100%}.stepper-tooltip-text{color:#fff;padding:10px 15px}.stepper-min-height{border-radius:10px;min-height:70px;background-color:#f9f9f9;padding:0 32px}.stepper-arrow-text{font-weight:500;font-size:16px;letter-spacing:-.2;line-height:24px;color:#64748b;cursor:pointer;text-align:center}.stepper-disabled{cursor:unset!important}.stepper-disabled .stepper-arrow-text{color:#94a3b8;cursor:alias}.touch-action-enabled{touch-action:auto!important;-webkit-user-drag:auto!important}@media only screen and (max-width: 959px){.stepper-arrow-text{word-break:break-word}}\n"], components: [{ type: RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$2.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EnumerationStepperFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-enumeration-stepper-field', template: "<mat-label class=\"stepper-label netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value && hasTitle()\"\n           matTooltipClass=\"stepper-tooltip-text\" [matTooltip]=\"dataField.description\" matTooltipPosition=\"right\">\n    {{dataField.title}}\n    <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\" ></nc-required-label>\n</mat-label>\n\n<div *ngIf=\"!arrowStepper\" [matTooltip]=\"dataField.description\" [ngClass.lt-sm]=\"'touch-action-enabled'\"\n     class=\"horizontal-stepper\" fxLayout=\"row\" fxLayout.lt-sm=\"column\" matTooltipPosition=\"above\">\n    <div class=\"horizontal-step\" fxShow.gt-xs fxHide.lt-sm>\n        <ng-template ngFor let-option [ngForOf]=\"dataField.choices\" let-i=\"index\">\n            <div class=\"horizontal-step-header\" #oneStep>\n                <div class=\"horizontal-state\" [ngClass]=\"{'horizontal-state-primary': canShowDoneIcon(i), 'horizontal-state-secondary': !canShowDoneIcon(i)}\">\n                    <mat-icon *ngIf=\"canShowDoneIcon(i + 1)\">done</mat-icon>\n                </div>\n                <div class=\"horizontal-state-label\">{{option.value}}</div>\n            </div>\n            <div class=\"horizontal-line\" fxFlex *ngIf=\"i < dataField.choices.length - 1\"></div>\n        </ng-template>\n    </div>\n    <div class=\"vertical-step\" fxLayout=\"column\" fxShow.lt-sm fxHide.gt-xs>\n        <ng-template ngFor let-option [ngForOf]=\"dataField.choices\" let-i=\"index\">\n            <div class=\"vertical-step-header\" fxFlex fxLayout=\"row\">\n                <div class=\"vertical-state\"\n                     [ngClass]=\"{'horizontal-state-primary': canShowDoneIcon(i), 'horizontal-state-secondary': !canShowDoneIcon(i)}\">\n                    <mat-icon *ngIf=\"canShowDoneIcon(i + 1)\">done</mat-icon>\n                </div>\n                <div class=\"vertical-state-label\">{{option.value}}</div>\n            </div>\n            <div class=\"vertical-line\" fxFlex *ngIf=\"i < dataField.choices.length - 1\"></div>\n        </ng-template>\n    </div>\n</div>\n\n<div *ngIf=\"arrowStepper\" class=\"stepper-min-height\" fxLayoutAlign=\"stretch center\" fxLayout=\"row\" fxLayout.lt-sm=\"column\"\n     [matTooltip]=\"dataField.description\" matTooltipPosition=\"above\" [ngClass]=\"{'stepper-disabled': formControlRef.disabled}\">\n    <ng-template ngFor let-option [ngForOf]=\"dataField.choices\" let-i=\"index\">\n            <span class=\"stepper-arrow-text\" [ngClass]=\"{'stepper-arrow-selected': isSelected(option.key)}\"\n                  (click)=\"setStepperValue(option.key)\" fxFlex fxLayoutAlign=\"center center\" fxHide.lt-sm>{{option.value}}</span>\n        <span fxFlex.gt-sm class=\"stepper-arrow-text\" *ngIf=\"i < dataField.choices.length - 1\" fxLayoutAlign=\"center center\" fxHide.lt-sm>\n                <mat-icon>arrow_forward_ios</mat-icon>\n            </span>\n    </ng-template>\n    <span class=\"stepper-arrow-text stepper-arrow-selected\" fxShow.lt-sm fxHide.gt-xs\n          fxFlex fxLayoutAlign=\"center center\">{{resolveValue(dataField.value)}}</span>\n</div>\n", styles: [".horizontal-stepper{display:flex}.horizontal-step-header{box-sizing:border-box;flex-direction:column;height:auto;padding:24px;overflow:hidden;outline:none;position:relative;-webkit-tap-highlight-color:transparent;display:flex;align-items:center}.horizontal-step-header:not(:first-child):before{left:0}.horizontal-step-header:not(:last-child):after{right:0}.horizontal-step-header:not(:last-child):after,.horizontal-step-header:not(:first-child):before{border-top-width:1px;border-top-style:solid;content:\"\";display:inline-block;height:0;position:absolute;width:calc(50% - 20px);top:36px}.horizontal-state{color:#fff;border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.horizontal-state-label{display:inline-block;overflow:hidden;text-overflow:ellipsis;min-width:36px;vertical-align:middle;padding:16px 0 0;text-align:center;width:100%;word-wrap:break-word}.horizontal-line{position:relative;top:36px;border-top-width:1px;border-top-style:solid;flex:auto;height:0;min-width:12px}.horizontal-step{flex:auto;display:flex}.vertical-step-header{box-sizing:border-box;flex-direction:column;height:auto;padding:24px;overflow:hidden;outline:none;position:relative;-webkit-tap-highlight-color:transparent;display:flex;align-items:center}.vertical-step-header:first-child:before{top:44px}.vertical-step-header:not(:first-child):before{top:0}.vertical-step-header:not(:last-child):after{bottom:0}.vertical-step-header:not(:last-child):after,.vertical-step-header:not(:first-child):before{border-left-width:1px;border-left-style:solid;content:\"\";display:inline-block;width:0;position:absolute;height:calc(50% - 20px);left:36px}.vertical-state{color:#fff;border-radius:50%;height:24px;width:24px;flex-shrink:0;position:relative}.vertical-state-label{display:inline-block;overflow:hidden;text-overflow:ellipsis;min-width:36px;vertical-align:middle;text-align:center;width:100%;word-wrap:break-word;white-space:break-spaces}.vertical-line{position:relative;border-left-width:1px;border-left-style:solid;flex:auto;height:0;margin:0 36px;min-height:12px}.vertical-step{flex:auto;display:flex}.stepper-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:100%}.stepper-tooltip-text{color:#fff;padding:10px 15px}.stepper-min-height{border-radius:10px;min-height:70px;background-color:#f9f9f9;padding:0 32px}.stepper-arrow-text{font-weight:500;font-size:16px;letter-spacing:-.2;line-height:24px;color:#64748b;cursor:pointer;text-align:center}.stepper-disabled{cursor:unset!important}.stepper-disabled .stepper-arrow-text{color:#94a3b8;cursor:alias}.touch-action-enabled{touch-action:auto!important;-webkit-user-drag:auto!important}@media only screen and (max-width: 959px){.stepper-arrow-text{word-break:break-word}}\n"] }]
@@ -1202,10 +1202,10 @@ class EnumerationIconFieldComponent extends AbstractEnumerationIconFieldComponen
     }
 }
 EnumerationIconFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EnumerationIconFieldComponent, deps: [{ token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-EnumerationIconFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: EnumerationIconFieldComponent, selector: "nc-enumeration-icon-field", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!horizontal; else horizont\">\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value\">{{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!formControlRef.disabled\"></nc-required-label>\n        <br></mat-label>\n    <div *ngFor=\"let option of dataField.choices; let i = index\">\n        <div class=\"enum-icon-item enum-icon-item-row\" (click)=\"setEnumValue(option.key)\"\n             [ngClass]=\"{'enum-icon-item-active': isSelected(option.key), 'enum-icon-item-hover': !formControlRef.disabled, 'enum-icon-item-disabled': formControlRef.disabled}\">\n            <mat-icon *ngIf=\"resolveIconType(option.key) === 'material'\">{{resolveIconValue(option.key)}}</mat-icon>\n            <mat-icon *ngIf=\"resolveIconType(option.key) === 'svg'\" [svgIcon]=\"resolveIconValue(option.key)\"></mat-icon>\n            <span fxFlex class=\"enum-icon-text\">{{option.value}}</span>\n            <mat-icon *ngIf=\"resolveArrow(option.key)\">arrow_forward</mat-icon>\n        </div>\n        <mat-divider class=\"enum-icon-divider\" *ngIf=\"i !== dataField.choices.length - 1 && resolveDivider(option.key)\"></mat-divider>\n    </div>\n</div>\n<ng-template #horizont>\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value\">{{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!formControlRef.disabled\"></nc-required-label>\n        <br></mat-label>\n    <div fxLayout=\"row\">\n        <div *ngFor=\"let option of dataField.choices; let i = index\" fxLayout=\"row\" fxFlex>\n            <div class=\"enum-icon-item enum-icon-item-row\" (click)=\"setEnumValue(option.key)\"\n                 [ngClass]=\"{'enum-icon-item-active': isSelected(option.key), 'enum-icon-item-hover': !formControlRef.disabled, 'enum-icon-item-disabled': formControlRef.disabled}\">\n                <mat-icon *ngIf=\"resolveIconType(option.key) === 'material'\">{{resolveIconValue(option.key)}}</mat-icon>\n                <mat-icon *ngIf=\"resolveIconType(option.key) === 'svg'\" [svgIcon]=\"resolveIconValue(option.key)\"></mat-icon>\n                <span fxFlex class=\"enum-icon-text\">{{option.value}}</span>\n                <mat-icon *ngIf=\"resolveArrow(option.key)\">arrow_forward</mat-icon>\n            </div>\n            <div fxFlex></div>\n            <mat-divider [vertical]=\"true\" *ngIf=\"i !== dataField.choices.length - 1 && resolveDivider(option.key)\"></mat-divider>\n        </div>\n    </div>\n</ng-template>\n", styles: [".enum-icon-item{font-size:18px;font-family:Roboto;font-weight:500;line-height:24px;letter-spacing:-.2px;text-align:left;color:#64748b;text-decoration:none;padding:8px 0}.enum-icon-item-row:hover{cursor:pointer}.enum-icon-item:focus,.enum-icon-item-row:focus{outline:none}.enum-icon-divider{position:relative!important}.enum-icon-text{padding:0 16px}.enum-icon-item-disabled{color:#94a3b8;cursor:default!important}\n"], components: [{ type: RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }] });
+EnumerationIconFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: EnumerationIconFieldComponent, selector: "nc-enumeration-icon-field", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!horizontal; else horizont\">\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value\">{{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!formControlRef.disabled\"></nc-required-label>\n        <br></mat-label>\n    <div *ngFor=\"let option of dataField.choices; let i = index\">\n        <div class=\"enum-icon-item enum-icon-item-row\" (click)=\"setEnumValue(option.key)\"\n             [ngClass]=\"{'enum-icon-item-active': isSelected(option.key), 'enum-icon-item-hover': !formControlRef.disabled, 'enum-icon-item-disabled': formControlRef.disabled}\">\n            <mat-icon *ngIf=\"resolveIconType(option.key) === 'material'\">{{resolveIconValue(option.key)}}</mat-icon>\n            <mat-icon *ngIf=\"resolveIconType(option.key) === 'svg'\" [svgIcon]=\"resolveIconValue(option.key)\"></mat-icon>\n            <span fxFlex class=\"enum-icon-text\">{{option.value}}</span>\n            <mat-icon *ngIf=\"isArrow()\">arrow_forward</mat-icon>\n        </div>\n        <mat-divider class=\"enum-icon-divider\" *ngIf=\"i !== dataField.choices.length - 1 && isDivider()\"></mat-divider>\n    </div>\n</div>\n<ng-template #horizont>\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value\">{{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!formControlRef.disabled\"></nc-required-label>\n        <br></mat-label>\n    <div fxLayout=\"row\">\n        <div *ngFor=\"let option of dataField.choices; let i = index\" fxLayout=\"row\" fxFlex>\n            <div class=\"enum-icon-item enum-icon-item-row\" (click)=\"setEnumValue(option.key)\"\n                 [ngClass]=\"{'enum-icon-item-active': isSelected(option.key), 'enum-icon-item-hover': !formControlRef.disabled, 'enum-icon-item-disabled': formControlRef.disabled}\">\n                <mat-icon *ngIf=\"resolveIconType(option.key) === 'material'\">{{resolveIconValue(option.key)}}</mat-icon>\n                <mat-icon *ngIf=\"resolveIconType(option.key) === 'svg'\" [svgIcon]=\"resolveIconValue(option.key)\"></mat-icon>\n                <span fxFlex class=\"enum-icon-text\">{{option.value}}</span>\n                <mat-icon *ngIf=\"isArrow()\">arrow_forward</mat-icon>\n            </div>\n            <div fxFlex></div>\n            <mat-divider [vertical]=\"true\" *ngIf=\"i !== dataField.choices.length - 1 && isDivider()\"></mat-divider>\n        </div>\n    </div>\n</ng-template>\n", styles: [".enum-icon-item{font-size:18px;font-family:Roboto,sans-serif;font-weight:500;line-height:24px;letter-spacing:-.2px;text-align:left;color:#64748b;text-decoration:none;padding:8px 0}.enum-icon-item-row:hover{cursor:pointer}.enum-icon-item:focus,.enum-icon-item-row:focus{outline:none}.enum-icon-divider{position:relative!important}.enum-icon-text{padding:0 16px}.enum-icon-item-disabled{color:#94a3b8;cursor:default!important}\n"], components: [{ type: RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EnumerationIconFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nc-enumeration-icon-field', template: "<div *ngIf=\"!horizontal; else horizont\">\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value\">{{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!formControlRef.disabled\"></nc-required-label>\n        <br></mat-label>\n    <div *ngFor=\"let option of dataField.choices; let i = index\">\n        <div class=\"enum-icon-item enum-icon-item-row\" (click)=\"setEnumValue(option.key)\"\n             [ngClass]=\"{'enum-icon-item-active': isSelected(option.key), 'enum-icon-item-hover': !formControlRef.disabled, 'enum-icon-item-disabled': formControlRef.disabled}\">\n            <mat-icon *ngIf=\"resolveIconType(option.key) === 'material'\">{{resolveIconValue(option.key)}}</mat-icon>\n            <mat-icon *ngIf=\"resolveIconType(option.key) === 'svg'\" [svgIcon]=\"resolveIconValue(option.key)\"></mat-icon>\n            <span fxFlex class=\"enum-icon-text\">{{option.value}}</span>\n            <mat-icon *ngIf=\"resolveArrow(option.key)\">arrow_forward</mat-icon>\n        </div>\n        <mat-divider class=\"enum-icon-divider\" *ngIf=\"i !== dataField.choices.length - 1 && resolveDivider(option.key)\"></mat-divider>\n    </div>\n</div>\n<ng-template #horizont>\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value\">{{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!formControlRef.disabled\"></nc-required-label>\n        <br></mat-label>\n    <div fxLayout=\"row\">\n        <div *ngFor=\"let option of dataField.choices; let i = index\" fxLayout=\"row\" fxFlex>\n            <div class=\"enum-icon-item enum-icon-item-row\" (click)=\"setEnumValue(option.key)\"\n                 [ngClass]=\"{'enum-icon-item-active': isSelected(option.key), 'enum-icon-item-hover': !formControlRef.disabled, 'enum-icon-item-disabled': formControlRef.disabled}\">\n                <mat-icon *ngIf=\"resolveIconType(option.key) === 'material'\">{{resolveIconValue(option.key)}}</mat-icon>\n                <mat-icon *ngIf=\"resolveIconType(option.key) === 'svg'\" [svgIcon]=\"resolveIconValue(option.key)\"></mat-icon>\n                <span fxFlex class=\"enum-icon-text\">{{option.value}}</span>\n                <mat-icon *ngIf=\"resolveArrow(option.key)\">arrow_forward</mat-icon>\n            </div>\n            <div fxFlex></div>\n            <mat-divider [vertical]=\"true\" *ngIf=\"i !== dataField.choices.length - 1 && resolveDivider(option.key)\"></mat-divider>\n        </div>\n    </div>\n</ng-template>\n", styles: [".enum-icon-item{font-size:18px;font-family:Roboto;font-weight:500;line-height:24px;letter-spacing:-.2px;text-align:left;color:#64748b;text-decoration:none;padding:8px 0}.enum-icon-item-row:hover{cursor:pointer}.enum-icon-item:focus,.enum-icon-item-row:focus{outline:none}.enum-icon-divider{position:relative!important}.enum-icon-text{padding:0 16px}.enum-icon-item-disabled{color:#94a3b8;cursor:default!important}\n"] }]
+            args: [{ selector: 'nc-enumeration-icon-field', template: "<div *ngIf=\"!horizontal; else horizont\">\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value\">{{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!formControlRef.disabled\"></nc-required-label>\n        <br></mat-label>\n    <div *ngFor=\"let option of dataField.choices; let i = index\">\n        <div class=\"enum-icon-item enum-icon-item-row\" (click)=\"setEnumValue(option.key)\"\n             [ngClass]=\"{'enum-icon-item-active': isSelected(option.key), 'enum-icon-item-hover': !formControlRef.disabled, 'enum-icon-item-disabled': formControlRef.disabled}\">\n            <mat-icon *ngIf=\"resolveIconType(option.key) === 'material'\">{{resolveIconValue(option.key)}}</mat-icon>\n            <mat-icon *ngIf=\"resolveIconType(option.key) === 'svg'\" [svgIcon]=\"resolveIconValue(option.key)\"></mat-icon>\n            <span fxFlex class=\"enum-icon-text\">{{option.value}}</span>\n            <mat-icon *ngIf=\"isArrow()\">arrow_forward</mat-icon>\n        </div>\n        <mat-divider class=\"enum-icon-divider\" *ngIf=\"i !== dataField.choices.length - 1 && isDivider()\"></mat-divider>\n    </div>\n</div>\n<ng-template #horizont>\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value\">{{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!formControlRef.disabled\"></nc-required-label>\n        <br></mat-label>\n    <div fxLayout=\"row\">\n        <div *ngFor=\"let option of dataField.choices; let i = index\" fxLayout=\"row\" fxFlex>\n            <div class=\"enum-icon-item enum-icon-item-row\" (click)=\"setEnumValue(option.key)\"\n                 [ngClass]=\"{'enum-icon-item-active': isSelected(option.key), 'enum-icon-item-hover': !formControlRef.disabled, 'enum-icon-item-disabled': formControlRef.disabled}\">\n                <mat-icon *ngIf=\"resolveIconType(option.key) === 'material'\">{{resolveIconValue(option.key)}}</mat-icon>\n                <mat-icon *ngIf=\"resolveIconType(option.key) === 'svg'\" [svgIcon]=\"resolveIconValue(option.key)\"></mat-icon>\n                <span fxFlex class=\"enum-icon-text\">{{option.value}}</span>\n                <mat-icon *ngIf=\"isArrow()\">arrow_forward</mat-icon>\n            </div>\n            <div fxFlex></div>\n            <mat-divider [vertical]=\"true\" *ngIf=\"i !== dataField.choices.length - 1 && isDivider()\"></mat-divider>\n        </div>\n    </div>\n</ng-template>\n", styles: [".enum-icon-item{font-size:18px;font-family:Roboto,sans-serif;font-weight:500;line-height:24px;letter-spacing:-.2px;text-align:left;color:#64748b;text-decoration:none;padding:8px 0}.enum-icon-item-row:hover{cursor:pointer}.enum-icon-item:focus,.enum-icon-item-row:focus{outline:none}.enum-icon-divider{position:relative!important}.enum-icon-text{padding:0 16px}.enum-icon-item-disabled{color:#94a3b8;cursor:default!important}\n"] }]
         }], ctorParameters: function () {
         return [{ type: undefined, decorators: [{
                         type: Optional
@@ -1222,7 +1222,7 @@ class EnumerationAutocompleteDynamicFieldComponent extends AbstractEnumerationAu
     }
 }
 EnumerationAutocompleteDynamicFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EnumerationAutocompleteDynamicFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-EnumerationAutocompleteDynamicFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: EnumerationAutocompleteDynamicFieldComponent, selector: "nc-enumeration-autocomplete-dynamic-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <input type=\"text\"\n           aria-label=\"Autocomplete\"\n           matInput\n           #input\n           [placeholder]=\"dataField.placeholder\"\n           [formControl]=\"formControlRef\"\n           [matAutocomplete]=\"auto\"\n           [required]=\"dataField.behavior.required\"\n           (keyup)=\"change()\">\n    <mat-spinner *ngIf=\"dataField.loading\" matSuffix diameter=\"30\"></mat-spinner>\n    <mat-autocomplete [displayWith]=\"renderSelection\" autoActiveFirstOption #auto=\"matAutocomplete\">\n\n        <mat-option disabled *ngIf=\"(filteredOptions | async)?.length === 0 && !dataField.loading && dataField.value && dataField.value.length > 0\" fxLayoutAlign=\"center center\">\n            {{ 'dataField.dynamicEnum.noData' | translate }}\n        </mat-option>\n\n        <ng-container *ngIf=\"!dataField.loading\">\n            <mat-option [value]=\"null\">---</mat-option>\n            <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option.key\" (click)=\"change()\">\n                {{option.value}}\n            </mat-option>\n        </ng-container>\n    </mat-autocomplete>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{buildErrorMessage()}}</mat-error>\n</mat-form-field>\n\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i2$4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$1.MatSuffix, selector: "[matSuffix]" }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1$2.TranslatePipe } });
+EnumerationAutocompleteDynamicFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: EnumerationAutocompleteDynamicFieldComponent, selector: "nc-enumeration-autocomplete-dynamic-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <input type=\"text\"\n           aria-label=\"Autocomplete\"\n           matInput\n           #input\n           [placeholder]=\"dataField.placeholder\"\n           [formControl]=\"formControlRef\"\n           [matAutocomplete]=\"auto\"\n           [required]=\"dataField.behavior.required\"\n           (keyup)=\"change()\">\n    <mat-spinner *ngIf=\"dataField.loading\" matSuffix diameter=\"30\"></mat-spinner>\n    <mat-autocomplete [displayWith]=\"renderSelection\" autoActiveFirstOption #auto=\"matAutocomplete\">\n\n        <mat-option disabled *ngIf=\"(filteredOptions | async)?.length === 0 && !dataField.loading && dataField.value && dataField.value.length > 0\" fxLayoutAlign=\"center center\">\n            {{ 'dataField.dynamicEnum.noData' | translate }}\n        </mat-option>\n\n        <ng-container *ngIf=\"!dataField.loading\">\n            <mat-option [value]=\"null\">---</mat-option>\n            <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option.key\" (click)=\"change()\">\n                {{option.value}}\n            </mat-option>\n        </ng-container>\n    </mat-autocomplete>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{buildErrorMessage()}}</mat-error>\n</mat-form-field>\n\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i2$4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$1.MatSuffix, selector: "[matSuffix]" }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EnumerationAutocompleteDynamicFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-enumeration-autocomplete-dynamic-field', template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <input type=\"text\"\n           aria-label=\"Autocomplete\"\n           matInput\n           #input\n           [placeholder]=\"dataField.placeholder\"\n           [formControl]=\"formControlRef\"\n           [matAutocomplete]=\"auto\"\n           [required]=\"dataField.behavior.required\"\n           (keyup)=\"change()\">\n    <mat-spinner *ngIf=\"dataField.loading\" matSuffix diameter=\"30\"></mat-spinner>\n    <mat-autocomplete [displayWith]=\"renderSelection\" autoActiveFirstOption #auto=\"matAutocomplete\">\n\n        <mat-option disabled *ngIf=\"(filteredOptions | async)?.length === 0 && !dataField.loading && dataField.value && dataField.value.length > 0\" fxLayoutAlign=\"center center\">\n            {{ 'dataField.dynamicEnum.noData' | translate }}\n        </mat-option>\n\n        <ng-container *ngIf=\"!dataField.loading\">\n            <mat-option [value]=\"null\">---</mat-option>\n            <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option.key\" (click)=\"change()\">\n                {{option.value}}\n            </mat-option>\n        </ng-container>\n    </mat-autocomplete>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{buildErrorMessage()}}</mat-error>\n</mat-form-field>\n\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
@@ -1269,7 +1269,7 @@ class SearchOperandInputComponent extends AbstractSearchOperandInputComponent {
 SearchOperandInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchOperandInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 SearchOperandInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SearchOperandInputComponent, selector: "nc-search-operand-input", providers: [
         { provide: NGX_MAT_DATE_FORMATS, useValue: DATE_TIME_FORMAT }
-    ], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!isInputFilled(); then operandSelection else operandDisplay\"></div>\n\n<ng-template #operandSelection>\n    <div [ngSwitch]=\"inputType\">\n        <ng-template [ngSwitchCase]=\"searchInputType.TEXT\">\n            <mat-form-field appearance=\"outline\">\n                <input type=\"text\" matInput autocomplete=\"off\"\n                       [formControl]=\"inputFormControl\"\n                       [disabled]=\"!editable\"\n                       (keydown.enter)=\"$event.target.blur()\"\n                       (blur)=\"confirmInput()\"\n                       #operandInput>\n            </mat-form-field>\n        </ng-template>\n\n        <ng-template [ngSwitchCase]=\"searchInputType.AUTOCOMPLETE\">\n            <mat-form-field appearance=\"outline\">\n                <input type=\"text\" matInput autocomplete=\"off\"\n                       #autocompleteInput\n                       #autocompleteTrigger=\"matAutocompleteTrigger\"\n                       [formControl]=\"inputFormControl\"\n                       [matAutocomplete]=\"searchAutocomplete\"\n                       [disabled]=\"!editable\"\n                       (keydown.enter)=\"$event.target.blur(); autocompleteTrigger.closePanel()\"\n                       (focus)=\"editInput()\"\n                       #operandInput>\n                <mat-autocomplete #searchAutocomplete=\"matAutocomplete\"\n                                  [displayWith]=\"renderSelection\"\n                                  (optionSelected)=\"autocompleteInput.blur()\">\n                    <mat-option *ngFor=\"let option of filteredOptions$ | async\" [value]=\"option\">\n                        <mat-icon *ngIf=\"option.icon\">{{option.icon}}</mat-icon>\n                        <span>{{option.text | translate}}</span>\n                    </mat-option>\n                </mat-autocomplete>\n            </mat-form-field>\n        </ng-template>\n\n        <ng-template [ngSwitchCase]=\"searchInputType.DATE\">\n            <mat-form-field appearance=\"outline\">\n                <input matInput autocomplete=\"off\"\n                       [formControl]=\"inputFormControl\"\n                       [matDatepicker]=\"searchDatepicker\"\n                       [disabled]=\"!editable\"\n                       (keydown.enter)=\"searchDatepicker.close()\"\n                       (focus)=\"editInput(); searchDatepicker.open()\"\n                       #operandInput>\n                <mat-datepicker-toggle matPrefix [for]=\"searchDatepicker\"></mat-datepicker-toggle>\n                <mat-datepicker\n                    #searchDatepicker\n                    (closed)=\"confirmInput()\"></mat-datepicker>\n            </mat-form-field>\n        </ng-template>\n\n        <ng-template [ngSwitchCase]=\"searchInputType.DATE_TIME\">\n            <mat-form-field appearance=\"outline\">\n                <input matInput autocomplete=\"off\"\n                       [formControl]=\"inputFormControl\"\n                       [ngxMatDatetimePicker]=\"searchDateTimepicker\"\n                       [disabled]=\"!editable\"\n                       (keydown.enter)=\"searchDateTimepicker.close()\"\n                       (focus)=\"editInput(); searchDateTimepicker.open()\"\n                       #operandInput>\n                <mat-datepicker-toggle matPrefix [for]=\"searchDateTimepicker\">\n                    <mat-icon matDatepickerToggleIcon>schedule</mat-icon>\n                </mat-datepicker-toggle>\n                <ngx-mat-datetime-picker #searchDateTimepicker\n                                         [showSpinners]=\"true\"\n                                         [showSeconds]=\"false\"\n                                         [stepHour]=\"1\"\n                                         [stepMinute]=\"5\"\n                                         [color]=\"'primary'\"\n                                         [enableMeridian]=\"false\"\n                                         (closed)=\"confirmInput()\"></ngx-mat-datetime-picker>\n            </mat-form-field>\n        </ng-template>\n\n        <ng-template [ngSwitchCase]=\"searchInputType.NUMBER\">\n            <mat-form-field appearance=\"outline\">\n                <input type=\"number\" matInput autocomplete=\"off\"\n                       [formControl]=\"inputFormControl\"\n                       [disabled]=\"!editable\"\n                       (keydown.enter)=\"$event.target.blur()\"\n                       (focus)=\"editInput()\"\n                       (blur)=\"confirmInput()\"\n                       #operandInput>\n            </mat-form-field>\n        </ng-template>\n\n        <ng-template [ngSwitchCase]=\"searchInputType.BOOLEAN\">\n            <div fxLayout=\"row\">\n                <mat-slide-toggle [formControl]=\"inputFormControl\"\n                                  [disabled]=\"!editable\"\n                                  (focus)=\"editInput()\"\n                                  (toggleChange)=\"confirmInput()\"></mat-slide-toggle>\n            </div>\n        </ng-template>\n    </div>\n</ng-template>\n\n<ng-template #operandDisplay>\n    <div [ngSwitch]=\"inputType\" (click)=\"editInput()\" class=\"bold-text\">\n        <div *ngSwitchCase=\"searchInputType.AUTOCOMPLETE\">\n            {{inputFormControl.value.text | translate}}\n        </div>\n        <div *ngSwitchCase=\"searchInputType.DATE\">\n            {{inputFormControl.value.format(dateFormat)}}\n        </div>\n        <div *ngSwitchCase=\"searchInputType.DATE_TIME\">\n            {{inputFormControl.value.format(dateTimeFormat)}}\n        </div>\n        <div *ngSwitchDefault>\n            {{inputFormControl.value}}\n        </div>\n    </div>\n</ng-template>\n", styles: [".bold-text{font-weight:700}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i5$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i6$2.NgxMatDatetimePicker, selector: "ngx-mat-datetime-picker", inputs: ["calendarHeaderComponent", "startAt", "startView", "defaultColor", "color", "touchUi", "hideTime", "disabled", "panelClass", "dateClass", "opened", "showSpinners", "showSeconds", "stepHour", "stepMinute", "stepSecond", "enableMeridian", "disableMinute", "defaultTime"], outputs: ["yearSelected", "monthSelected", "opened", "closed"], exportAs: ["ngxMatDatetimePicker"] }, { type: i7$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i2$1.MatPrefix, selector: "[matPrefix]" }, { type: i6$2.NgxMatDatetimeInput, selector: "input[ngxMatDatetimePicker]", inputs: ["ngxMatDatetimePicker", "ngxMatDatetimePickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["ngxMatDatetimePickerInput"] }, { type: i5$2.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i4$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "async": i4$1.AsyncPipe, "translate": i1$2.TranslatePipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!isInputFilled(); then operandSelection else operandDisplay\"></div>\n\n<ng-template #operandSelection>\n    <div [ngSwitch]=\"inputType\">\n        <ng-template [ngSwitchCase]=\"searchInputType.TEXT\">\n            <mat-form-field appearance=\"outline\">\n                <input type=\"text\" matInput autocomplete=\"off\"\n                       [formControl]=\"inputFormControl\"\n                       [disabled]=\"!editable\"\n                       (keydown.enter)=\"$event.target.blur()\"\n                       (blur)=\"confirmInput()\"\n                       #operandInput>\n            </mat-form-field>\n        </ng-template>\n\n        <ng-template [ngSwitchCase]=\"searchInputType.AUTOCOMPLETE\">\n            <mat-form-field appearance=\"outline\">\n                <input type=\"text\" matInput autocomplete=\"off\"\n                       #autocompleteInput\n                       #autocompleteTrigger=\"matAutocompleteTrigger\"\n                       [formControl]=\"inputFormControl\"\n                       [matAutocomplete]=\"searchAutocomplete\"\n                       [disabled]=\"!editable\"\n                       (keydown.enter)=\"$event.target.blur(); autocompleteTrigger.closePanel()\"\n                       (focus)=\"editInput()\"\n                       #operandInput>\n                <mat-autocomplete #searchAutocomplete=\"matAutocomplete\"\n                                  [displayWith]=\"renderSelection\"\n                                  (optionSelected)=\"autocompleteInput.blur()\">\n                    <mat-option *ngFor=\"let option of filteredOptions$ | async\" [value]=\"option\">\n                        <mat-icon *ngIf=\"option.icon\">{{option.icon}}</mat-icon>\n                        <span>{{option.text | translate}}</span>\n                    </mat-option>\n                </mat-autocomplete>\n            </mat-form-field>\n        </ng-template>\n\n        <ng-template [ngSwitchCase]=\"searchInputType.DATE\">\n            <mat-form-field appearance=\"outline\">\n                <input matInput autocomplete=\"off\"\n                       [formControl]=\"inputFormControl\"\n                       [matDatepicker]=\"searchDatepicker\"\n                       [disabled]=\"!editable\"\n                       (keydown.enter)=\"searchDatepicker.close()\"\n                       (focus)=\"editInput(); searchDatepicker.open()\"\n                       #operandInput>\n                <mat-datepicker-toggle matPrefix [for]=\"searchDatepicker\"></mat-datepicker-toggle>\n                <mat-datepicker\n                    #searchDatepicker\n                    (closed)=\"confirmInput()\"></mat-datepicker>\n            </mat-form-field>\n        </ng-template>\n\n        <ng-template [ngSwitchCase]=\"searchInputType.DATE_TIME\">\n            <mat-form-field appearance=\"outline\">\n                <input matInput autocomplete=\"off\"\n                       [formControl]=\"inputFormControl\"\n                       [ngxMatDatetimePicker]=\"searchDateTimepicker\"\n                       [disabled]=\"!editable\"\n                       (keydown.enter)=\"searchDateTimepicker.close()\"\n                       (focus)=\"editInput(); searchDateTimepicker.open()\"\n                       #operandInput>\n                <mat-datepicker-toggle matPrefix [for]=\"searchDateTimepicker\">\n                    <mat-icon matDatepickerToggleIcon>schedule</mat-icon>\n                </mat-datepicker-toggle>\n                <ngx-mat-datetime-picker #searchDateTimepicker\n                                         [showSpinners]=\"true\"\n                                         [showSeconds]=\"false\"\n                                         [stepHour]=\"1\"\n                                         [stepMinute]=\"5\"\n                                         [color]=\"'primary'\"\n                                         [enableMeridian]=\"false\"\n                                         (closed)=\"confirmInput()\"></ngx-mat-datetime-picker>\n            </mat-form-field>\n        </ng-template>\n\n        <ng-template [ngSwitchCase]=\"searchInputType.NUMBER\">\n            <mat-form-field appearance=\"outline\">\n                <input type=\"number\" matInput autocomplete=\"off\"\n                       [formControl]=\"inputFormControl\"\n                       [disabled]=\"!editable\"\n                       (keydown.enter)=\"$event.target.blur()\"\n                       (focus)=\"editInput()\"\n                       (blur)=\"confirmInput()\"\n                       #operandInput>\n            </mat-form-field>\n        </ng-template>\n\n        <ng-template [ngSwitchCase]=\"searchInputType.BOOLEAN\">\n            <div fxLayout=\"row\">\n                <mat-slide-toggle [formControl]=\"inputFormControl\"\n                                  [disabled]=\"!editable\"\n                                  (focus)=\"editInput()\"\n                                  (toggleChange)=\"confirmInput()\"></mat-slide-toggle>\n            </div>\n        </ng-template>\n    </div>\n</ng-template>\n\n<ng-template #operandDisplay>\n    <div [ngSwitch]=\"inputType\" (click)=\"editInput()\" class=\"bold-text\">\n        <div *ngSwitchCase=\"searchInputType.AUTOCOMPLETE\">\n            {{inputFormControl.value.text | translate}}\n        </div>\n        <div *ngSwitchCase=\"searchInputType.DATE\">\n            {{inputFormControl.value.format(dateFormat)}}\n        </div>\n        <div *ngSwitchCase=\"searchInputType.DATE_TIME\">\n            {{inputFormControl.value.format(dateTimeFormat)}}\n        </div>\n        <div *ngSwitchDefault>\n            {{inputFormControl.value}}\n        </div>\n    </div>\n</ng-template>\n", styles: [".bold-text{font-weight:700}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i5$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i2$6.NgxMatDatetimePicker, selector: "ngx-mat-datetime-picker", inputs: ["calendarHeaderComponent", "startAt", "startView", "defaultColor", "color", "touchUi", "hideTime", "disabled", "panelClass", "dateClass", "opened", "showSpinners", "showSeconds", "stepHour", "stepMinute", "stepSecond", "enableMeridian", "disableMinute", "defaultTime"], outputs: ["yearSelected", "monthSelected", "opened", "closed"], exportAs: ["ngxMatDatetimePicker"] }, { type: i7$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i2$1.MatPrefix, selector: "[matPrefix]" }, { type: i2$6.NgxMatDatetimeInput, selector: "input[ngxMatDatetimePicker]", inputs: ["ngxMatDatetimePicker", "ngxMatDatetimePickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["ngxMatDatetimePickerInput"] }, { type: i5$2.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i4$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "async": i4$1.AsyncPipe, "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchOperandInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-search-operand-input', providers: [
@@ -1287,7 +1287,7 @@ class SearchConfigurationInputComponent extends AbstractSearchConfigurationInput
     }
 }
 SearchConfigurationInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchConfigurationInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SearchConfigurationInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SearchConfigurationInputComponent, selector: "nc-search-configuration-input", usesInheritance: true, ngImport: i0, template: "<div [ngSwitch]=\"configuration.type\">\n    <ng-template [ngSwitchCase]=\"searchInputType.AUTOCOMPLETE\">\n        <div *ngIf=\"!configuration.isOptionSelected; then configurationSelection else configurationDisplay\"></div>\n\n        <ng-template #configurationSelection>\n            <mat-form-field class=\"text-margin\" appearance=\"outline\">\n                <mat-label>{{configuration.label | translate}}</mat-label>\n                <input type=\"text\" matInput\n                       #autocompleteInput\n                       #autocompleteTrigger=\"matAutocompleteTrigger\"\n                       [formControl]=\"configuration.formControl\"\n                       [matAutocomplete]=\"configurationAutocomplete\"\n                       [disabled]=\"!editable\"\n                       (keydown.enter)=\"$event.target.blur(); autocompleteTrigger.closePanel()\"\n                       #configurationInput>\n                <mat-autocomplete #configurationAutocomplete=\"matAutocomplete\"\n                                  [displayWith]=\"renderSelection\"\n                                  (optionSelected)=\"autocompleteInput.blur()\">\n                    <mat-option\n                        *ngFor=\"let option of configuration.filteredOptions$ | async\"\n                        [value]=\"option\">\n                        <mat-icon *ngIf=\"option.icon\">{{option.icon}}</mat-icon>\n                        <span>{{option.text}}</span>\n                    </mat-option>\n                </mat-autocomplete>\n            </mat-form-field>\n        </ng-template>\n\n        <ng-template #configurationDisplay>\n            <div class=\"text-margin\"\n                 [ngClass]=\"{'bold-text': configuration.displayBold}\"\n                 (click)=\"clearConfigurationInput()\">\n                {{configuration.selectedOptionTranslatePath | translate}}\n            </div>\n        </ng-template>\n    </ng-template>\n    <ng-template [ngSwitchCase]=\"searchInputType.OPERATOR\">\n        <div *ngIf=\"selectedCategory.isOperatorSelected(); then argumentsSelection; else operatorSelection\"></div>\n\n        <ng-template #operatorSelection>\n            <mat-form-field appearance=\"outline\">\n                <mat-label>{{configuration.label | translate}}</mat-label>\n                <mat-select [formControl]=\"configuration.formControl\" [disabled]=\"!editable\" #configurationInput>\n                    <mat-option *ngFor=\"let operator of selectedCategory.allowedOperators\" [value]=\"operator\">\n                        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                            <ng-template ngFor let-namePart [ngForOf]=\"operator.getOperatorNameTemplate()\" let-last=\"last\">\n                                <ng-container [ngTemplateOutlet]=\"namePart ? operatorInputText : operatorInputPlaceholder\"\n                                              [ngTemplateOutletContext]=\"{last:last, namePart:namePart}\"></ng-container>\n                            </ng-template>\n\n                            <ng-template #operatorInputText let-last=\"last\" let-namePart=\"namePart\">\n                                <div [ngClass]=\"{'argument-right-margin': !last}\">\n                                    {{namePart | translate}}\n                                </div>\n                            </ng-template>\n\n                            <ng-template #operatorInputPlaceholder let-last=\"last\">\n                                <div class=\"argument-placeholder-color argument-placeholder-dimensions\" [ngClass]=\"{'argument-right-margin': !last}\"></div>\n                            </ng-template>\n                        </div>\n                    </mat-option>\n                </mat-select>\n            </mat-form-field>\n        </ng-template>\n\n        <ng-template #argumentsSelection>\n            <div fxLayout=\"row\" fxLayoutAlign=\"start center\" (click)=\"clearOperatorInput()\">\n                <ng-template ngFor let-templatePart [ngForOf]=\"selectedCategory.operatorTemplate$ | async\"\n                             [ngForTrackBy]=\"trackByTemplateParts\">\n                    <div [ngSwitch]=\"templatePart.type\">\n                        <ng-template [ngSwitchCase]=\"operatorTemplatePartType.TEXT\">\n                            <div fxLayout=\"row\" fxLayoutAlign=\"start center\"\n                                 class=\"text-margin\">\n                                {{templatePart.content | translate}}\n                            </div>\n                        </ng-template>\n\n                        <ng-template [ngSwitchCase]=\"operatorTemplatePartType.INPUT\">\n                            <div class=\"text-margin\"\n                                 (click)=\"$event.stopPropagation()\">\n                                <nc-search-operand-input [inputFormControl]=\"templatePart.content\"\n                                                         [inputType]=\"selectedCategory.inputType\"\n                                                         [first]=\"templatePart.first\"\n                                                         [filterOptionsFunction]=\"filterOptions\"\n                                                         [editable]=\"editable\"></nc-search-operand-input>\n                            </div>\n                        </ng-template>\n                    </div>\n                </ng-template>\n            </div>\n        </ng-template>\n    </ng-template>\n</div>\n", styles: [".bold-text{font-weight:700}.text-margin{margin-left:4px}.argument-placeholder-dimensions{height:1.5em;width:6em;border-radius:4px}.argument-right-margin{margin-right:.5em}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: SearchOperandInputComponent, selector: "nc-search-operand-input" }], directives: [{ type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i1$2.TranslatePipe, "async": i4$1.AsyncPipe } });
+SearchConfigurationInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SearchConfigurationInputComponent, selector: "nc-search-configuration-input", usesInheritance: true, ngImport: i0, template: "<div [ngSwitch]=\"configuration.type\">\n    <ng-template [ngSwitchCase]=\"searchInputType.AUTOCOMPLETE\">\n        <div *ngIf=\"!configuration.isOptionSelected; then configurationSelection else configurationDisplay\"></div>\n\n        <ng-template #configurationSelection>\n            <mat-form-field class=\"text-margin\" appearance=\"outline\">\n                <mat-label>{{configuration.label | translate}}</mat-label>\n                <input type=\"text\" matInput\n                       #autocompleteInput\n                       #autocompleteTrigger=\"matAutocompleteTrigger\"\n                       [formControl]=\"configuration.formControl\"\n                       [matAutocomplete]=\"configurationAutocomplete\"\n                       [disabled]=\"!editable\"\n                       (keydown.enter)=\"$event.target.blur(); autocompleteTrigger.closePanel()\"\n                       #configurationInput>\n                <mat-autocomplete #configurationAutocomplete=\"matAutocomplete\"\n                                  [displayWith]=\"renderSelection\"\n                                  (optionSelected)=\"autocompleteInput.blur()\">\n                    <mat-option\n                        *ngFor=\"let option of configuration.filteredOptions$ | async\"\n                        [value]=\"option\">\n                        <mat-icon *ngIf=\"option.icon\">{{option.icon}}</mat-icon>\n                        <span>{{option.text}}</span>\n                    </mat-option>\n                </mat-autocomplete>\n            </mat-form-field>\n        </ng-template>\n\n        <ng-template #configurationDisplay>\n            <div class=\"text-margin\"\n                 [ngClass]=\"{'bold-text': configuration.displayBold}\"\n                 (click)=\"clearConfigurationInput()\">\n                {{configuration.selectedOptionTranslatePath | translate}}\n            </div>\n        </ng-template>\n    </ng-template>\n    <ng-template [ngSwitchCase]=\"searchInputType.OPERATOR\">\n        <div *ngIf=\"selectedCategory.isOperatorSelected(); then argumentsSelection; else operatorSelection\"></div>\n\n        <ng-template #operatorSelection>\n            <mat-form-field appearance=\"outline\">\n                <mat-label>{{configuration.label | translate}}</mat-label>\n                <mat-select [formControl]=\"configuration.formControl\" [disabled]=\"!editable\" #configurationInput>\n                    <mat-option *ngFor=\"let operator of selectedCategory.allowedOperators\" [value]=\"operator\">\n                        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                            <ng-template ngFor let-namePart [ngForOf]=\"operator.getOperatorNameTemplate()\" let-last=\"last\">\n                                <ng-container [ngTemplateOutlet]=\"namePart ? operatorInputText : operatorInputPlaceholder\"\n                                              [ngTemplateOutletContext]=\"{last:last, namePart:namePart}\"></ng-container>\n                            </ng-template>\n\n                            <ng-template #operatorInputText let-last=\"last\" let-namePart=\"namePart\">\n                                <div [ngClass]=\"{'argument-right-margin': !last}\">\n                                    {{namePart | translate}}\n                                </div>\n                            </ng-template>\n\n                            <ng-template #operatorInputPlaceholder let-last=\"last\">\n                                <div class=\"argument-placeholder-color argument-placeholder-dimensions\" [ngClass]=\"{'argument-right-margin': !last}\"></div>\n                            </ng-template>\n                        </div>\n                    </mat-option>\n                </mat-select>\n            </mat-form-field>\n        </ng-template>\n\n        <ng-template #argumentsSelection>\n            <div fxLayout=\"row\" fxLayoutAlign=\"start center\" (click)=\"clearOperatorInput()\">\n                <ng-template ngFor let-templatePart [ngForOf]=\"selectedCategory.operatorTemplate$ | async\"\n                             [ngForTrackBy]=\"trackByTemplateParts\">\n                    <div [ngSwitch]=\"templatePart.type\">\n                        <ng-template [ngSwitchCase]=\"operatorTemplatePartType.TEXT\">\n                            <div fxLayout=\"row\" fxLayoutAlign=\"start center\"\n                                 class=\"text-margin\">\n                                {{templatePart.content | translate}}\n                            </div>\n                        </ng-template>\n\n                        <ng-template [ngSwitchCase]=\"operatorTemplatePartType.INPUT\">\n                            <div class=\"text-margin\"\n                                 (click)=\"$event.stopPropagation()\">\n                                <nc-search-operand-input [inputFormControl]=\"templatePart.content\"\n                                                         [inputType]=\"selectedCategory.inputType\"\n                                                         [first]=\"templatePart.first\"\n                                                         [filterOptionsFunction]=\"filterOptions\"\n                                                         [editable]=\"editable\"></nc-search-operand-input>\n                            </div>\n                        </ng-template>\n                    </div>\n                </ng-template>\n            </div>\n        </ng-template>\n    </ng-template>\n</div>\n", styles: [".bold-text{font-weight:700}.text-margin{margin-left:4px}.argument-placeholder-dimensions{height:1.5em;width:6em;border-radius:4px}.argument-right-margin{margin-right:.5em}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: SearchOperandInputComponent, selector: "nc-search-operand-input" }], directives: [{ type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i1$2.TranslatePipe, "async": i4$1.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchConfigurationInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-search-configuration-input', template: "<div [ngSwitch]=\"configuration.type\">\n    <ng-template [ngSwitchCase]=\"searchInputType.AUTOCOMPLETE\">\n        <div *ngIf=\"!configuration.isOptionSelected; then configurationSelection else configurationDisplay\"></div>\n\n        <ng-template #configurationSelection>\n            <mat-form-field class=\"text-margin\" appearance=\"outline\">\n                <mat-label>{{configuration.label | translate}}</mat-label>\n                <input type=\"text\" matInput\n                       #autocompleteInput\n                       #autocompleteTrigger=\"matAutocompleteTrigger\"\n                       [formControl]=\"configuration.formControl\"\n                       [matAutocomplete]=\"configurationAutocomplete\"\n                       [disabled]=\"!editable\"\n                       (keydown.enter)=\"$event.target.blur(); autocompleteTrigger.closePanel()\"\n                       #configurationInput>\n                <mat-autocomplete #configurationAutocomplete=\"matAutocomplete\"\n                                  [displayWith]=\"renderSelection\"\n                                  (optionSelected)=\"autocompleteInput.blur()\">\n                    <mat-option\n                        *ngFor=\"let option of configuration.filteredOptions$ | async\"\n                        [value]=\"option\">\n                        <mat-icon *ngIf=\"option.icon\">{{option.icon}}</mat-icon>\n                        <span>{{option.text}}</span>\n                    </mat-option>\n                </mat-autocomplete>\n            </mat-form-field>\n        </ng-template>\n\n        <ng-template #configurationDisplay>\n            <div class=\"text-margin\"\n                 [ngClass]=\"{'bold-text': configuration.displayBold}\"\n                 (click)=\"clearConfigurationInput()\">\n                {{configuration.selectedOptionTranslatePath | translate}}\n            </div>\n        </ng-template>\n    </ng-template>\n    <ng-template [ngSwitchCase]=\"searchInputType.OPERATOR\">\n        <div *ngIf=\"selectedCategory.isOperatorSelected(); then argumentsSelection; else operatorSelection\"></div>\n\n        <ng-template #operatorSelection>\n            <mat-form-field appearance=\"outline\">\n                <mat-label>{{configuration.label | translate}}</mat-label>\n                <mat-select [formControl]=\"configuration.formControl\" [disabled]=\"!editable\" #configurationInput>\n                    <mat-option *ngFor=\"let operator of selectedCategory.allowedOperators\" [value]=\"operator\">\n                        <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                            <ng-template ngFor let-namePart [ngForOf]=\"operator.getOperatorNameTemplate()\" let-last=\"last\">\n                                <ng-container [ngTemplateOutlet]=\"namePart ? operatorInputText : operatorInputPlaceholder\"\n                                              [ngTemplateOutletContext]=\"{last:last, namePart:namePart}\"></ng-container>\n                            </ng-template>\n\n                            <ng-template #operatorInputText let-last=\"last\" let-namePart=\"namePart\">\n                                <div [ngClass]=\"{'argument-right-margin': !last}\">\n                                    {{namePart | translate}}\n                                </div>\n                            </ng-template>\n\n                            <ng-template #operatorInputPlaceholder let-last=\"last\">\n                                <div class=\"argument-placeholder-color argument-placeholder-dimensions\" [ngClass]=\"{'argument-right-margin': !last}\"></div>\n                            </ng-template>\n                        </div>\n                    </mat-option>\n                </mat-select>\n            </mat-form-field>\n        </ng-template>\n\n        <ng-template #argumentsSelection>\n            <div fxLayout=\"row\" fxLayoutAlign=\"start center\" (click)=\"clearOperatorInput()\">\n                <ng-template ngFor let-templatePart [ngForOf]=\"selectedCategory.operatorTemplate$ | async\"\n                             [ngForTrackBy]=\"trackByTemplateParts\">\n                    <div [ngSwitch]=\"templatePart.type\">\n                        <ng-template [ngSwitchCase]=\"operatorTemplatePartType.TEXT\">\n                            <div fxLayout=\"row\" fxLayoutAlign=\"start center\"\n                                 class=\"text-margin\">\n                                {{templatePart.content | translate}}\n                            </div>\n                        </ng-template>\n\n                        <ng-template [ngSwitchCase]=\"operatorTemplatePartType.INPUT\">\n                            <div class=\"text-margin\"\n                                 (click)=\"$event.stopPropagation()\">\n                                <nc-search-operand-input [inputFormControl]=\"templatePart.content\"\n                                                         [inputType]=\"selectedCategory.inputType\"\n                                                         [first]=\"templatePart.first\"\n                                                         [filterOptionsFunction]=\"filterOptions\"\n                                                         [editable]=\"editable\"></nc-search-operand-input>\n                            </div>\n                        </ng-template>\n                    </div>\n                </ng-template>\n            </div>\n        </ng-template>\n    </ng-template>\n</div>\n", styles: [".bold-text{font-weight:700}.text-margin{margin-left:4px}.argument-placeholder-dimensions{height:1.5em;width:6em;border-radius:4px}.argument-right-margin{margin-right:.5em}\n"] }]
@@ -1299,7 +1299,7 @@ class SearchPredicateComponent extends AbstractSearchPredicateComponent {
     }
 }
 SearchPredicateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchPredicateComponent, deps: [{ token: NAE_SEARCH_CATEGORIES }, { token: i1.LoggerService }, { token: i1.AdvancedSearchComponentInitializationService }, { token: i1.CategoryFactory }], target: i0.ɵɵFactoryTarget.Component });
-SearchPredicateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SearchPredicateComponent, selector: "nc-search-predicate", usesInheritance: true, ngImport: i0, template: "<div class=\"predicate-body netgrif-input-search-fix netgrif-input-primary-search-fix\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n    <div *ngIf=\"!selectedCategory; then categorySelection else categoryDisplay\"></div>\n    <ng-template #categorySelection>\n        <mat-form-field class=\"mat-form-field-wrapper-search\" appearance=\"outline\">\n            <mat-icon matPrefix class=\"prefix-icon\">search</mat-icon>\n            <mat-label>{{'search.category.select' | translate}}</mat-label>\n            <mat-select (selectionChange)=\"categoryChanged($event.value)\" #categoryInput [disabled]=\"!editable\">\n                <mat-option *ngFor=\"let category of searchCategories\"\n                            [value]=\"category\">{{category.translationPath | translate}}</mat-option>\n            </mat-select>\n        </mat-form-field>\n    </ng-template>\n    <ng-template #categoryDisplay>\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"text-margin\"\n             [ngClass]=\"{'bold-text': selectedCategory.displayBold}\"\n             (click)=\"clearCategorySelection()\">\n            {{selectedCategory.translationPath | translate}}\n        </div>\n    </ng-template>\n\n    <div *ngIf=\"selectedCategory\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <ng-template ngFor let-configurationInput [ngForOf]=\"selectedCategory.configurationInputs$ | async\">\n            <nc-search-configuration-input [configuration]=\"configurationInput\" [selectedCategory]=\"selectedCategory\"\n                                           [editable]=\"editable\"></nc-search-configuration-input>\n        </ng-template>\n    </div>\n    <div *ngIf=\"editable\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <button mat-stroked-button color=\"warn\" (click)=\"remove()\" class=\"advanced-search-buttons\">\n            <mat-icon>clear</mat-icon>\n        </button>\n    </div>\n</div>\n", styles: [".predicate-body{border-radius:4px;padding-right:4px;min-height:32px}.smaller-button{width:32px;height:32px;line-height:32px;margin-right:-4px}.bold-text{font-weight:700}.text-margin{margin-left:4px}.white-background{background:#fafafa}::ng-deep .mat-form-field-wrapper{margin:0;padding-bottom:0}.mat-form-field-wrapper-search{margin:0!important;border-radius:5px;background:#fafafa;min-width:250px}.advanced-search-buttons{min-height:44px;margin:1.5px 8px 1.5px 4px;min-width:44px;padding:0}.prefix-icon{font-size:18px;color:#64748b}@media only screen and (max-width: 599px){.mat-form-field-wrapper-search{min-width:unset}}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: SearchConfigurationInputComponent, selector: "nc-search-configuration-input" }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatPrefix, selector: "[matPrefix]" }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "translate": i1$2.TranslatePipe, "async": i4$1.AsyncPipe } });
+SearchPredicateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SearchPredicateComponent, selector: "nc-search-predicate", usesInheritance: true, ngImport: i0, template: "<div class=\"predicate-body netgrif-input-search-fix netgrif-input-primary-search-fix\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n    <div *ngIf=\"!selectedCategory; then categorySelection else categoryDisplay\"></div>\n    <ng-template #categorySelection>\n        <mat-form-field class=\"mat-form-field-wrapper-search\" appearance=\"outline\">\n            <mat-icon matPrefix class=\"prefix-icon\">search</mat-icon>\n            <mat-label>{{'search.category.select' | translate}}</mat-label>\n            <mat-select (selectionChange)=\"categoryChanged($event.value)\" #categoryInput [disabled]=\"!editable\">\n                <mat-option *ngFor=\"let category of searchCategories\"\n                            [value]=\"category\">{{category.translationPath | translate}}</mat-option>\n            </mat-select>\n        </mat-form-field>\n    </ng-template>\n    <ng-template #categoryDisplay>\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"text-margin\"\n             [ngClass]=\"{'bold-text': selectedCategory.displayBold}\"\n             (click)=\"clearCategorySelection()\">\n            {{selectedCategory.translationPath | translate}}\n        </div>\n    </ng-template>\n\n    <div *ngIf=\"selectedCategory\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <ng-template ngFor let-configurationInput [ngForOf]=\"selectedCategory.configurationInputs$ | async\">\n            <nc-search-configuration-input [configuration]=\"configurationInput\" [selectedCategory]=\"selectedCategory\"\n                                           [editable]=\"editable\"></nc-search-configuration-input>\n        </ng-template>\n    </div>\n    <div *ngIf=\"editable\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <button mat-stroked-button color=\"warn\" (click)=\"remove()\" class=\"advanced-search-buttons\">\n            <mat-icon>clear</mat-icon>\n        </button>\n    </div>\n</div>\n", styles: [".predicate-body{border-radius:4px;padding-right:4px;min-height:32px}.smaller-button{width:32px;height:32px;line-height:32px;margin-right:-4px}.bold-text{font-weight:700}.text-margin{margin-left:4px}.white-background{background:#fafafa}::ng-deep .mat-form-field-wrapper{margin:0;padding-bottom:0}.mat-form-field-wrapper-search{margin:0!important;border-radius:5px;background:#fafafa;min-width:250px}.advanced-search-buttons{min-height:44px;margin:1.5px 8px 1.5px 4px;min-width:44px;padding:0}.prefix-icon{font-size:18px;color:#64748b}@media only screen and (max-width: 599px){.mat-form-field-wrapper-search{min-width:unset}}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: SearchConfigurationInputComponent, selector: "nc-search-configuration-input" }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatPrefix, selector: "[matPrefix]" }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "translate": i1$2.TranslatePipe, "async": i4$1.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchPredicateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-search-predicate', template: "<div class=\"predicate-body netgrif-input-search-fix netgrif-input-primary-search-fix\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n    <div *ngIf=\"!selectedCategory; then categorySelection else categoryDisplay\"></div>\n    <ng-template #categorySelection>\n        <mat-form-field class=\"mat-form-field-wrapper-search\" appearance=\"outline\">\n            <mat-icon matPrefix class=\"prefix-icon\">search</mat-icon>\n            <mat-label>{{'search.category.select' | translate}}</mat-label>\n            <mat-select (selectionChange)=\"categoryChanged($event.value)\" #categoryInput [disabled]=\"!editable\">\n                <mat-option *ngFor=\"let category of searchCategories\"\n                            [value]=\"category\">{{category.translationPath | translate}}</mat-option>\n            </mat-select>\n        </mat-form-field>\n    </ng-template>\n    <ng-template #categoryDisplay>\n        <div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"text-margin\"\n             [ngClass]=\"{'bold-text': selectedCategory.displayBold}\"\n             (click)=\"clearCategorySelection()\">\n            {{selectedCategory.translationPath | translate}}\n        </div>\n    </ng-template>\n\n    <div *ngIf=\"selectedCategory\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <ng-template ngFor let-configurationInput [ngForOf]=\"selectedCategory.configurationInputs$ | async\">\n            <nc-search-configuration-input [configuration]=\"configurationInput\" [selectedCategory]=\"selectedCategory\"\n                                           [editable]=\"editable\"></nc-search-configuration-input>\n        </ng-template>\n    </div>\n    <div *ngIf=\"editable\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <button mat-stroked-button color=\"warn\" (click)=\"remove()\" class=\"advanced-search-buttons\">\n            <mat-icon>clear</mat-icon>\n        </button>\n    </div>\n</div>\n", styles: [".predicate-body{border-radius:4px;padding-right:4px;min-height:32px}.smaller-button{width:32px;height:32px;line-height:32px;margin-right:-4px}.bold-text{font-weight:700}.text-margin{margin-left:4px}.white-background{background:#fafafa}::ng-deep .mat-form-field-wrapper{margin:0;padding-bottom:0}.mat-form-field-wrapper-search{margin:0!important;border-radius:5px;background:#fafafa;min-width:250px}.advanced-search-buttons{min-height:44px;margin:1.5px 8px 1.5px 4px;min-width:44px;padding:0}.prefix-icon{font-size:18px;color:#64748b}@media only screen and (max-width: 599px){.mat-form-field-wrapper-search{min-width:unset}}\n"] }]
@@ -1431,7 +1431,7 @@ class UserAssignItemComponent extends AbstractUserAssignItemComponent {
     }
 }
 UserAssignItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UserAssignItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-UserAssignItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UserAssignItemComponent, selector: "nc-user-assign-item", usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"user-item\" [ngClass]=\"{\n            'user-assign-item-selected': (selectedId$ | async) === user.id\n        }\">\n    <mat-icon class=\"icon\">account_circle</mat-icon>\n    <div fxLayout=\"column\">\n        <span>{{user.fullName}}</span>\n        <span>{{user.email}}</span>\n    </div>\n</div>\n", styles: [".user-item{padding:10px 15px;cursor:pointer}.user-item:hover{background-color:#00000024;border-radius:2.5px}.icon{margin-right:16px;height:40px;width:40px;font-size:40px}.email-selected,.email-unselected{font-size:.9em}\n"], components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "async": i4$1.AsyncPipe } });
+UserAssignItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UserAssignItemComponent, selector: "nc-user-assign-item", usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"user-item\" [ngClass]=\"{\n            'user-assign-item-selected': (selectedId$ | async) === user.id\n        }\">\n    <mat-icon class=\"icon\">account_circle</mat-icon>\n    <div fxLayout=\"column\">\n        <span>{{user.fullName}}</span>\n        <span>{{user.email}}</span>\n    </div>\n</div>\n", styles: [".user-item{padding:10px 15px;cursor:pointer}.user-item:hover{background-color:#00000024;border-radius:2.5px}.icon{margin-right:16px;height:40px;width:40px;font-size:40px}.email-selected,.email-unselected{font-size:.9em}\n"], components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "async": i4$1.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UserAssignItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-user-assign-item', template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"user-item\" [ngClass]=\"{\n            'user-assign-item-selected': (selectedId$ | async) === user.id\n        }\">\n    <mat-icon class=\"icon\">account_circle</mat-icon>\n    <div fxLayout=\"column\">\n        <span>{{user.fullName}}</span>\n        <span>{{user.email}}</span>\n    </div>\n</div>\n", styles: [".user-item{padding:10px 15px;cursor:pointer}.user-item:hover{background-color:#00000024;border-radius:2.5px}.icon{margin-right:16px;height:40px;width:40px;font-size:40px}.email-selected,.email-unselected{font-size:.9em}\n"] }]
@@ -1454,6 +1454,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.UserListService }]; } });
 
 /**
+ * @deprecated
  * Is the main - parent component of the entire user assignment in the side menu.
  *
  * Holds logic link of the [UserAssignListComponent]{@link UserAssignListComponent}
@@ -1558,7 +1559,7 @@ class I18nDividerFieldComponent extends AbstractI18nDividerFieldComponent {
     }
 }
 I18nDividerFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: I18nDividerFieldComponent, deps: [{ token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-I18nDividerFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: I18nDividerFieldComponent, selector: "nc-i18n-divider-field", usesInheritance: true, ngImport: i0, template: "<div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <div fxFlex=\"20\" class=\"divider-line\"\n         [ngClass]=\"{'divider-line-lgbt': isDividerLGBTQ(), 'primary-background-color': !checkPropertyInComponent('dividerColor')}\"\n         [ngStyle]=\"checkPropertyInComponent('dividerColor') && {'background': getDividerColor()}\"></div>\n    <span *ngIf='!!dataField.value' [ngClass]=\"{'margin-default': dataField.value?.defaultValue !== ''}\"\n          [ngStyle]=\"checkPropertyInComponent('fontSize') && {'font-size': getDividerFontSize()}\">\n        {{dataField.value?.defaultValue ?? ''}}\n    </span>\n    <div fxFlex class=\"divider-line\"\n         [ngClass]=\"{'divider-line-lgbt': isDividerLGBTQ(), 'primary-background-color': !checkPropertyInComponent('dividerColor')}\"\n         [ngStyle]=\"checkPropertyInComponent('dividerColor') && {'background': getDividerColor()}\"></div>\n</div>\n\n", styles: [".divider-line{height:1px}.margin-default{margin-right:8px;margin-left:8px}.divider-line-lgbt{height:2px;background:linear-gradient(to right,#B827FC 0%,#2C90FC 20%,#B8FD33 40%,#FEC837 60%,#FD1892 80%,#B827FC 100%) 0% 0/150% 100%;animation:move-divider-line-lgbt 10s linear infinite;-webkit-animation:move-divider-line-lgbt 10s linear infinite}@keyframes move-divider-line-lgbt{to{background-position:-1500% 0%}}\n"], directives: [{ type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+I18nDividerFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: I18nDividerFieldComponent, selector: "nc-i18n-divider-field", usesInheritance: true, ngImport: i0, template: "<div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <div fxFlex=\"20\" class=\"divider-line\"\n         [ngClass]=\"{'divider-line-lgbt': isDividerLGBTQ(), 'primary-background-color': !checkPropertyInComponent('dividerColor')}\"\n         [ngStyle]=\"checkPropertyInComponent('dividerColor') && {'background': getDividerColor()}\"></div>\n    <span *ngIf='!!dataField.value' [ngClass]=\"{'margin-default': dataField.value?.defaultValue !== ''}\"\n          [ngStyle]=\"checkPropertyInComponent('fontSize') && {'font-size': getDividerFontSize()}\">\n        {{dataField.value?.defaultValue ?? ''}}\n    </span>\n    <div fxFlex class=\"divider-line\"\n         [ngClass]=\"{'divider-line-lgbt': isDividerLGBTQ(), 'primary-background-color': !checkPropertyInComponent('dividerColor')}\"\n         [ngStyle]=\"checkPropertyInComponent('dividerColor') && {'background': getDividerColor()}\"></div>\n</div>\n\n", styles: [".divider-line{height:1px}.margin-default{margin-right:8px;margin-left:8px}.divider-line-lgbt{height:2px;background:linear-gradient(to right,#B827FC 0%,#2C90FC 20%,#B8FD33 40%,#FEC837 60%,#FD1892 80%,#B827FC 100%) 0% 0/150% 100%;animation:move-divider-line-lgbt 10s linear infinite;-webkit-animation:move-divider-line-lgbt 10s linear infinite}@keyframes move-divider-line-lgbt{to{background-position:-1500% 0%}}\n"], directives: [{ type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: I18nDividerFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-i18n-divider-field', template: "<div fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <div fxFlex=\"20\" class=\"divider-line\"\n         [ngClass]=\"{'divider-line-lgbt': isDividerLGBTQ(), 'primary-background-color': !checkPropertyInComponent('dividerColor')}\"\n         [ngStyle]=\"checkPropertyInComponent('dividerColor') && {'background': getDividerColor()}\"></div>\n    <span *ngIf='!!dataField.value' [ngClass]=\"{'margin-default': dataField.value?.defaultValue !== ''}\"\n          [ngStyle]=\"checkPropertyInComponent('fontSize') && {'font-size': getDividerFontSize()}\">\n        {{dataField.value?.defaultValue ?? ''}}\n    </span>\n    <div fxFlex class=\"divider-line\"\n         [ngClass]=\"{'divider-line-lgbt': isDividerLGBTQ(), 'primary-background-color': !checkPropertyInComponent('dividerColor')}\"\n         [ngStyle]=\"checkPropertyInComponent('dividerColor') && {'background': getDividerColor()}\"></div>\n</div>\n\n", styles: [".divider-line{height:1px}.margin-default{margin-right:8px;margin-left:8px}.divider-line-lgbt{height:2px;background:linear-gradient(to right,#B827FC 0%,#2C90FC 20%,#B8FD33 40%,#FEC837 60%,#FD1892 80%,#B827FC 100%) 0% 0/150% 100%;animation:move-divider-line-lgbt 10s linear infinite;-webkit-animation:move-divider-line-lgbt 10s linear infinite}@keyframes move-divider-line-lgbt{to{background-position:-1500% 0%}}\n"] }]
@@ -1577,7 +1578,7 @@ class I18nTextFieldComponent extends AbstractI18nTextFieldComponent {
     }
 }
 I18nTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: I18nTextFieldComponent, deps: [{ token: i1.LanguageIconsService }, { token: i1$2.TranslateService }, { token: i3$3.DomSanitizer }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-I18nTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: I18nTextFieldComponent, selector: "nc-i18n-text-field", usesInheritance: true, ngImport: i0, template: "<ng-template [ngIf]=\"formControlRef.disabled\">\n    <ng-template [ngIf]=\"!isPlainText()\">\n        <mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n            <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n            <input matInput\n                   [disabled]=\"true\"\n                   [ngModel]=\"currentValue[selectedLanguage]\"\n                   [placeholder]=\"dataField.placeholder ? dataField.placeholder : ''\"\n                   [required]=\"dataField.behavior.required\">\n            <mat-hint>{{dataField.description}}</mat-hint>\n        </mat-form-field>\n    </ng-template>\n    <ng-template [ngIf]=\"isPlainText()\">\n        <div class=\"full-width\"\n             [ngStyle]=\"checkPropertyInComponent('fontSize') && {'font-size': getTextFontSize()}\">\n            <span [ngStyle]=\"checkPropertyInComponent('textColor') && {'color': getTextColor()}\">\n                {{currentValue[selectedLanguage]}}\n            </span>\n        </div>\n    </ng-template>\n</ng-template>\n<ng-template [ngIf]=\"!formControlRef.disabled\">\n    <div class=\"full-width\">\n        <div #i18nLabel class=\"i18n-label\" [ngClass]=\"{'invalid-form-label': dataField.isInvalid(formControlRef)}\">\n            {{dataField.title}}\n            <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n        </div>\n        <div class=\"form-input-interfield button-icon-input full-width\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n             [ngClass]=\"{'invalid-form-input': dataField.isInvalid(formControlRef), 'form-input-disabled': formControlRef.disabled}\"\n             [ngStyle]=\"{\n                    '-webkit-clip-path': getCutProperty(i18nLabel),\n                    'clip-path': getCutProperty(i18nLabel)\n            }\">\n            <button mat-icon-button color=\"accent\" [matTooltip]=\"'dataField.i18n.languageSelect' | translate\"\n                    class=\"language-selector-button\" (click)=\"languageDropdown.open()\">\n                <div class=\"language-svg-wrapper\"\n                     [innerHTML]=\"getLanguageIcons()[this.selectedLanguage].svgIcon\"></div>\n            </button>\n            <mat-select #languageDropdown class=\"language-select\">\n                <mat-option *ngFor=\"let languageKey of languageKeys\"\n                            [value]=\"languageKey\" (click)=\"selectLanguage(languageKey)\">\n                    <div fxLayout=\"row\" fxLayoutAlign=\" center\">\n                        <div [innerHTML]=\"getLanguageIcons()[languageKey].svgIcon\" class=\"language-option-icon\"></div>\n                        <span class=\"language-option-value\">{{getLanguageIcons()[languageKey].languageName}}</span>\n                    </div>\n                </mat-option>\n            </mat-select>\n            <input class=\"selected-language-value\"\n                   type=\"text\"\n                   [placeholder]=\"dataField.placeholder ? dataField.placeholder : ''\"\n                   [required]=\"dataField.behavior.required\"\n                   [(ngModel)]=\"currentValue[selectedLanguage]\"\n                   (blur)=\"setSelectedValue()\">\n            <button mat-icon-button (click)=\"toggleFilled()\"\n                    [matTooltip]=\"(filledShown ? 'dataField.i18n.hideTranslations' : 'dataField.i18n.showTranslations') | translate\">\n                <mat-icon color=\"warn\">{{filledShown ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>\n            </button>\n        </div>\n\n        <div fxLayout=\"column\" class=\"filled-languages-wrapper\"\n             [@languageWrapper]=\"filledShown\"\n             (@languageWrapper.start)=\"$event.element.style.display = 'block'\"\n             (@languageWrapper.done)=\"$event.element.style.display = ($event.toState ? 'block' : 'none')\">\n            <div *ngFor=\"let filledKey of filledKeys\" fxLayout=\"row\" fxLayoutAlign=\" center\"\n                 class=\"filled-language-row\">\n                <div class=\"filled-language-icon\" [innerHTML]=\"getLanguageIcons()[filledKey].svgIcon\"></div>\n                <span class=\"filled-language-value\">{{currentValue[filledKey]}}</span>\n                <button class=\"filled-language-button\" *ngIf=\"!isDefaultValue(filledKey)\" mat-icon-button\n                        (click)=\"removeTranslation(filledKey)\"\n                        [matTooltip]=\"'dataField.i18n.deleteTranslation' | translate\">\n                    <mat-icon color=\"warn\">close</mat-icon>\n                </button>\n            </div>\n        </div>\n        <mat-hint class=\"i18n-hint-error\" [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\"\n                  *ngIf=\"!dataField.isInvalid(formControlRef) && hasHint()\">{{dataField.description}}</mat-hint>\n        <mat-error class=\"i18n-hint-error\" *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n    </div>\n</ng-template>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}.selected-language-value{outline:none;padding:9px 0;width:calc(100% - 56px);font-size:14px;border:0;margin-left:8px;color:#64748b;background:transparent}.selected-language-value:disabled{color:#94a3b8}.form-input-interfield{background:#FFFFFF;color:#64748b;outline:none;border:1px solid #64748B;text-align:left;font-size:14px;line-height:15.75px;border-radius:6px;min-width:5px;box-sizing:border-box;height:44px}.form-input-interfield:hover{border:solid 2px #64748B}.button-icon-input{padding:2px}.button-icon-input:hover{padding:1px!important}.i18n-hint-error{padding:0 1em;font-size:75%}.language-svg-wrapper{height:20px;line-height:normal}.language-selector-button{width:auto;margin-left:8px;margin-right:4px}.language-selector-wrapper{margin:0 8px}.language-svg-icon{border:solid 1px #64748B}.filled-language-row{min-height:28px;padding:4px 0;background-color:#fff}.filled-language-row:not(:last-child){border-bottom:1px solid #64748B}.filled-language-row:last-child{border-bottom-left-radius:6px;border-bottom-right-radius:6px}.filled-languages-wrapper{border-radius:0 0 6px 6px;border-left:1px solid #64748B;border-right:1px solid #64748B;border-bottom:1px solid #64748B;margin-top:-5px;padding-top:5px;transform-origin:top}.filled-language-icon{margin:0 10px;height:20px}.filled-language-value{margin-left:20px}.filled-language-button{margin-left:auto;height:24px;width:24px;line-height:normal;margin-right:10px}.language-select{width:18px!important}.language-option-icon{margin-left:0}.language-option-value{margin-left:16px}.i18n-label{transform:translate(.4em,-.4em) scale(.75);transform-origin:left;color:#64748b;background:transparent;width:-moz-fit-content;width:fit-content;padding:0 .5em;z-index:5;height:0;position:relative;top:-1px}.form-input-disabled{background:transparent!important;border-color:#cbd5e1!important}.form-input-disabled:hover{border-width:1px}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1$2.TranslatePipe }, animations: [
+I18nTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: I18nTextFieldComponent, selector: "nc-i18n-text-field", usesInheritance: true, ngImport: i0, template: "<ng-template [ngIf]=\"formControlRef.disabled\">\n    <ng-template [ngIf]=\"!isPlainText()\">\n        <mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n            <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n            <input matInput\n                   [disabled]=\"true\"\n                   [ngModel]=\"!!currentValue[selectedLanguage] && currentValue[selectedLanguage] !== ''\n                                ? currentValue[selectedLanguage] : currentValue[getDefaultLanguageCode()]\"\n                   [placeholder]=\"dataField.placeholder ? dataField.placeholder : ''\"\n                   [required]=\"dataField.behavior.required\">\n            <mat-hint>{{dataField.description}}</mat-hint>\n        </mat-form-field>\n    </ng-template>\n    <ng-template [ngIf]=\"isPlainText()\">\n        <div class=\"full-width\"\n             [ngStyle]=\"textPropertyEnabled('fontSize') && {'font-size': getTextFontSize()}\">\n            <span [ngStyle]=\"textPropertyEnabled('textColor') && {'color': getTextColor()}\"\n                  [ngClass]=\"{'i18n-bold-text': isBoldText()}\">\n                {{!!currentValue[selectedLanguage] && currentValue[selectedLanguage] !== ''\n                    ? currentValue[selectedLanguage] : currentValue[getDefaultLanguageCode()]}}\n            </span>\n        </div>\n    </ng-template>\n</ng-template>\n<ng-template [ngIf]=\"!formControlRef.disabled\">\n    <div class=\"full-width\">\n        <div #i18nLabel class=\"i18n-label\" [ngClass]=\"{'invalid-form-label': dataField.isInvalid(formControlRef)}\">\n            {{dataField.title}}\n            <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n        </div>\n        <div class=\"form-input-interfield button-icon-input full-width\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n             [ngClass]=\"{'invalid-form-input': dataField.isInvalid(formControlRef), 'form-input-disabled': formControlRef.disabled}\"\n             [ngStyle]=\"{\n                    '-webkit-clip-path': getCutProperty(i18nLabel),\n                    'clip-path': getCutProperty(i18nLabel)\n            }\">\n            <button mat-icon-button color=\"accent\" [matTooltip]=\"'dataField.i18n.languageSelect' | translate\"\n                    class=\"language-selector-button\" (click)=\"languageDropdown.open()\">\n                <div class=\"language-svg-wrapper\"\n                     [innerHTML]=\"getLanguageIcons()[this.selectedLanguage].svgIcon\"></div>\n            </button>\n            <mat-select #languageDropdown class=\"language-select\">\n                <mat-option *ngFor=\"let languageKey of languageKeys\"\n                            [value]=\"languageKey\" (click)=\"selectLanguage(languageKey)\">\n                    <div fxLayout=\"row\" fxLayoutAlign=\" center\">\n                        <div [innerHTML]=\"getLanguageIcons()[languageKey].svgIcon\" class=\"language-option-icon\"></div>\n                        <span class=\"language-option-value\">{{getLanguageIcons()[languageKey].languageName}}</span>\n                    </div>\n                </mat-option>\n            </mat-select>\n            <input class=\"selected-language-value\"\n                   type=\"text\"\n                   [placeholder]=\"dataField.placeholder ? dataField.placeholder : ''\"\n                   [required]=\"dataField.behavior.required\"\n                   [(ngModel)]=\"currentValue[selectedLanguage]\"\n                   (blur)=\"setSelectedValue()\">\n            <button mat-icon-button (click)=\"toggleFilled()\"\n                    [matTooltip]=\"(filledShown ? 'dataField.i18n.hideTranslations' : 'dataField.i18n.showTranslations') | translate\">\n                <mat-icon color=\"warn\">{{filledShown ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>\n            </button>\n        </div>\n\n        <div fxLayout=\"column\" class=\"filled-languages-wrapper\"\n             [@languageWrapper]=\"filledShown\"\n             (@languageWrapper.start)=\"$event.element.style.display = 'block'\"\n             (@languageWrapper.done)=\"$event.element.style.display = ($event.toState ? 'block' : 'none')\">\n            <div *ngFor=\"let filledKey of filledKeys\" fxLayout=\"row\" fxLayoutAlign=\" center\"\n                 class=\"filled-language-row\">\n                <div class=\"filled-language-icon\" [innerHTML]=\"getLanguageIcons()[filledKey].svgIcon\"></div>\n                <span class=\"filled-language-value\">{{currentValue[filledKey]}}</span>\n                <button class=\"filled-language-button\" *ngIf=\"!isDefaultValue(filledKey)\" mat-icon-button\n                        (click)=\"removeTranslation(filledKey)\"\n                        [matTooltip]=\"'dataField.i18n.deleteTranslation' | translate\">\n                    <mat-icon color=\"warn\">close</mat-icon>\n                </button>\n            </div>\n        </div>\n        <mat-hint class=\"i18n-hint-error\" [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\"\n                  *ngIf=\"!dataField.isInvalid(formControlRef) && hasHint()\">{{dataField.description}}</mat-hint>\n        <mat-error class=\"i18n-hint-error\" *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n    </div>\n</ng-template>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}.selected-language-value{outline:none;padding:9px 0;width:calc(100% - 56px);font-size:14px;border:0;margin-left:8px;color:#64748b;background:transparent}.selected-language-value:disabled{color:#94a3b8}.form-input-interfield{background:#FFFFFF;color:#64748b;outline:none;border:1px solid #64748B;text-align:left;font-size:14px;line-height:15.75px;border-radius:6px;min-width:5px;box-sizing:border-box;height:44px}.form-input-interfield:hover{border:solid 2px #64748B}.button-icon-input{padding:2px}.button-icon-input:hover{padding:1px!important}.i18n-hint-error{padding:0 1em;font-size:75%;width:auto!important}.language-svg-wrapper{height:20px;line-height:normal}.language-selector-button{width:auto;margin-left:8px;margin-right:4px}.language-selector-wrapper{margin:0 8px}.language-svg-icon{border:solid 1px #64748B}.filled-language-row{min-height:28px;padding:4px 0;background-color:#fff}.filled-language-row:not(:last-child){border-bottom:1px solid #64748B}.filled-language-row:last-child{border-bottom-left-radius:6px;border-bottom-right-radius:6px}.filled-languages-wrapper{border-radius:0 0 6px 6px;border-left:1px solid #64748B;border-right:1px solid #64748B;border-bottom:1px solid #64748B;margin-top:-5px;padding-top:5px;transform-origin:top}.filled-language-icon{margin:0 10px;height:20px}.filled-language-value{margin-left:20px}.filled-language-button{margin-left:auto;height:24px;width:24px;line-height:normal;margin-right:10px}.language-select{width:18px!important}.language-option-icon{margin-left:0}.language-option-value{margin-left:16px}.i18n-label{transform:translate(.4em,-.4em) scale(.75);transform-origin:left;color:#64748b;background:transparent;width:-moz-fit-content;width:fit-content;padding:0 .5em;z-index:5;height:0;position:relative;top:-1px}.form-input-disabled{background:transparent!important;border-color:#cbd5e1!important}.form-input-disabled:hover{border-width:1px}.i18n-bold-text{font-weight:700}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i2$5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1$2.TranslatePipe }, animations: [
         trigger('languageWrapper', [
             state('true', style({
                 transform: 'scaleY(1)'
@@ -1610,7 +1611,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 animate('0.1s')
                             ]),
                         ])
-                    ], template: "<ng-template [ngIf]=\"formControlRef.disabled\">\n    <ng-template [ngIf]=\"!isPlainText()\">\n        <mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n            <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n            <input matInput\n                   [disabled]=\"true\"\n                   [ngModel]=\"currentValue[selectedLanguage]\"\n                   [placeholder]=\"dataField.placeholder ? dataField.placeholder : ''\"\n                   [required]=\"dataField.behavior.required\">\n            <mat-hint>{{dataField.description}}</mat-hint>\n        </mat-form-field>\n    </ng-template>\n    <ng-template [ngIf]=\"isPlainText()\">\n        <div class=\"full-width\"\n             [ngStyle]=\"checkPropertyInComponent('fontSize') && {'font-size': getTextFontSize()}\">\n            <span [ngStyle]=\"checkPropertyInComponent('textColor') && {'color': getTextColor()}\">\n                {{currentValue[selectedLanguage]}}\n            </span>\n        </div>\n    </ng-template>\n</ng-template>\n<ng-template [ngIf]=\"!formControlRef.disabled\">\n    <div class=\"full-width\">\n        <div #i18nLabel class=\"i18n-label\" [ngClass]=\"{'invalid-form-label': dataField.isInvalid(formControlRef)}\">\n            {{dataField.title}}\n            <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n        </div>\n        <div class=\"form-input-interfield button-icon-input full-width\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n             [ngClass]=\"{'invalid-form-input': dataField.isInvalid(formControlRef), 'form-input-disabled': formControlRef.disabled}\"\n             [ngStyle]=\"{\n                    '-webkit-clip-path': getCutProperty(i18nLabel),\n                    'clip-path': getCutProperty(i18nLabel)\n            }\">\n            <button mat-icon-button color=\"accent\" [matTooltip]=\"'dataField.i18n.languageSelect' | translate\"\n                    class=\"language-selector-button\" (click)=\"languageDropdown.open()\">\n                <div class=\"language-svg-wrapper\"\n                     [innerHTML]=\"getLanguageIcons()[this.selectedLanguage].svgIcon\"></div>\n            </button>\n            <mat-select #languageDropdown class=\"language-select\">\n                <mat-option *ngFor=\"let languageKey of languageKeys\"\n                            [value]=\"languageKey\" (click)=\"selectLanguage(languageKey)\">\n                    <div fxLayout=\"row\" fxLayoutAlign=\" center\">\n                        <div [innerHTML]=\"getLanguageIcons()[languageKey].svgIcon\" class=\"language-option-icon\"></div>\n                        <span class=\"language-option-value\">{{getLanguageIcons()[languageKey].languageName}}</span>\n                    </div>\n                </mat-option>\n            </mat-select>\n            <input class=\"selected-language-value\"\n                   type=\"text\"\n                   [placeholder]=\"dataField.placeholder ? dataField.placeholder : ''\"\n                   [required]=\"dataField.behavior.required\"\n                   [(ngModel)]=\"currentValue[selectedLanguage]\"\n                   (blur)=\"setSelectedValue()\">\n            <button mat-icon-button (click)=\"toggleFilled()\"\n                    [matTooltip]=\"(filledShown ? 'dataField.i18n.hideTranslations' : 'dataField.i18n.showTranslations') | translate\">\n                <mat-icon color=\"warn\">{{filledShown ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>\n            </button>\n        </div>\n\n        <div fxLayout=\"column\" class=\"filled-languages-wrapper\"\n             [@languageWrapper]=\"filledShown\"\n             (@languageWrapper.start)=\"$event.element.style.display = 'block'\"\n             (@languageWrapper.done)=\"$event.element.style.display = ($event.toState ? 'block' : 'none')\">\n            <div *ngFor=\"let filledKey of filledKeys\" fxLayout=\"row\" fxLayoutAlign=\" center\"\n                 class=\"filled-language-row\">\n                <div class=\"filled-language-icon\" [innerHTML]=\"getLanguageIcons()[filledKey].svgIcon\"></div>\n                <span class=\"filled-language-value\">{{currentValue[filledKey]}}</span>\n                <button class=\"filled-language-button\" *ngIf=\"!isDefaultValue(filledKey)\" mat-icon-button\n                        (click)=\"removeTranslation(filledKey)\"\n                        [matTooltip]=\"'dataField.i18n.deleteTranslation' | translate\">\n                    <mat-icon color=\"warn\">close</mat-icon>\n                </button>\n            </div>\n        </div>\n        <mat-hint class=\"i18n-hint-error\" [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\"\n                  *ngIf=\"!dataField.isInvalid(formControlRef) && hasHint()\">{{dataField.description}}</mat-hint>\n        <mat-error class=\"i18n-hint-error\" *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n    </div>\n</ng-template>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}.selected-language-value{outline:none;padding:9px 0;width:calc(100% - 56px);font-size:14px;border:0;margin-left:8px;color:#64748b;background:transparent}.selected-language-value:disabled{color:#94a3b8}.form-input-interfield{background:#FFFFFF;color:#64748b;outline:none;border:1px solid #64748B;text-align:left;font-size:14px;line-height:15.75px;border-radius:6px;min-width:5px;box-sizing:border-box;height:44px}.form-input-interfield:hover{border:solid 2px #64748B}.button-icon-input{padding:2px}.button-icon-input:hover{padding:1px!important}.i18n-hint-error{padding:0 1em;font-size:75%}.language-svg-wrapper{height:20px;line-height:normal}.language-selector-button{width:auto;margin-left:8px;margin-right:4px}.language-selector-wrapper{margin:0 8px}.language-svg-icon{border:solid 1px #64748B}.filled-language-row{min-height:28px;padding:4px 0;background-color:#fff}.filled-language-row:not(:last-child){border-bottom:1px solid #64748B}.filled-language-row:last-child{border-bottom-left-radius:6px;border-bottom-right-radius:6px}.filled-languages-wrapper{border-radius:0 0 6px 6px;border-left:1px solid #64748B;border-right:1px solid #64748B;border-bottom:1px solid #64748B;margin-top:-5px;padding-top:5px;transform-origin:top}.filled-language-icon{margin:0 10px;height:20px}.filled-language-value{margin-left:20px}.filled-language-button{margin-left:auto;height:24px;width:24px;line-height:normal;margin-right:10px}.language-select{width:18px!important}.language-option-icon{margin-left:0}.language-option-value{margin-left:16px}.i18n-label{transform:translate(.4em,-.4em) scale(.75);transform-origin:left;color:#64748b;background:transparent;width:-moz-fit-content;width:fit-content;padding:0 .5em;z-index:5;height:0;position:relative;top:-1px}.form-input-disabled{background:transparent!important;border-color:#cbd5e1!important}.form-input-disabled:hover{border-width:1px}\n"] }]
+                    ], template: "<ng-template [ngIf]=\"formControlRef.disabled\">\n    <ng-template [ngIf]=\"!isPlainText()\">\n        <mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n            <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n            <input matInput\n                   [disabled]=\"true\"\n                   [ngModel]=\"!!currentValue[selectedLanguage] && currentValue[selectedLanguage] !== ''\n                                ? currentValue[selectedLanguage] : currentValue[getDefaultLanguageCode()]\"\n                   [placeholder]=\"dataField.placeholder ? dataField.placeholder : ''\"\n                   [required]=\"dataField.behavior.required\">\n            <mat-hint>{{dataField.description}}</mat-hint>\n        </mat-form-field>\n    </ng-template>\n    <ng-template [ngIf]=\"isPlainText()\">\n        <div class=\"full-width\"\n             [ngStyle]=\"textPropertyEnabled('fontSize') && {'font-size': getTextFontSize()}\">\n            <span [ngStyle]=\"textPropertyEnabled('textColor') && {'color': getTextColor()}\"\n                  [ngClass]=\"{'i18n-bold-text': isBoldText()}\">\n                {{!!currentValue[selectedLanguage] && currentValue[selectedLanguage] !== ''\n                    ? currentValue[selectedLanguage] : currentValue[getDefaultLanguageCode()]}}\n            </span>\n        </div>\n    </ng-template>\n</ng-template>\n<ng-template [ngIf]=\"!formControlRef.disabled\">\n    <div class=\"full-width\">\n        <div #i18nLabel class=\"i18n-label\" [ngClass]=\"{'invalid-form-label': dataField.isInvalid(formControlRef)}\">\n            {{dataField.title}}\n            <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n        </div>\n        <div class=\"form-input-interfield button-icon-input full-width\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n             [ngClass]=\"{'invalid-form-input': dataField.isInvalid(formControlRef), 'form-input-disabled': formControlRef.disabled}\"\n             [ngStyle]=\"{\n                    '-webkit-clip-path': getCutProperty(i18nLabel),\n                    'clip-path': getCutProperty(i18nLabel)\n            }\">\n            <button mat-icon-button color=\"accent\" [matTooltip]=\"'dataField.i18n.languageSelect' | translate\"\n                    class=\"language-selector-button\" (click)=\"languageDropdown.open()\">\n                <div class=\"language-svg-wrapper\"\n                     [innerHTML]=\"getLanguageIcons()[this.selectedLanguage].svgIcon\"></div>\n            </button>\n            <mat-select #languageDropdown class=\"language-select\">\n                <mat-option *ngFor=\"let languageKey of languageKeys\"\n                            [value]=\"languageKey\" (click)=\"selectLanguage(languageKey)\">\n                    <div fxLayout=\"row\" fxLayoutAlign=\" center\">\n                        <div [innerHTML]=\"getLanguageIcons()[languageKey].svgIcon\" class=\"language-option-icon\"></div>\n                        <span class=\"language-option-value\">{{getLanguageIcons()[languageKey].languageName}}</span>\n                    </div>\n                </mat-option>\n            </mat-select>\n            <input class=\"selected-language-value\"\n                   type=\"text\"\n                   [placeholder]=\"dataField.placeholder ? dataField.placeholder : ''\"\n                   [required]=\"dataField.behavior.required\"\n                   [(ngModel)]=\"currentValue[selectedLanguage]\"\n                   (blur)=\"setSelectedValue()\">\n            <button mat-icon-button (click)=\"toggleFilled()\"\n                    [matTooltip]=\"(filledShown ? 'dataField.i18n.hideTranslations' : 'dataField.i18n.showTranslations') | translate\">\n                <mat-icon color=\"warn\">{{filledShown ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>\n            </button>\n        </div>\n\n        <div fxLayout=\"column\" class=\"filled-languages-wrapper\"\n             [@languageWrapper]=\"filledShown\"\n             (@languageWrapper.start)=\"$event.element.style.display = 'block'\"\n             (@languageWrapper.done)=\"$event.element.style.display = ($event.toState ? 'block' : 'none')\">\n            <div *ngFor=\"let filledKey of filledKeys\" fxLayout=\"row\" fxLayoutAlign=\" center\"\n                 class=\"filled-language-row\">\n                <div class=\"filled-language-icon\" [innerHTML]=\"getLanguageIcons()[filledKey].svgIcon\"></div>\n                <span class=\"filled-language-value\">{{currentValue[filledKey]}}</span>\n                <button class=\"filled-language-button\" *ngIf=\"!isDefaultValue(filledKey)\" mat-icon-button\n                        (click)=\"removeTranslation(filledKey)\"\n                        [matTooltip]=\"'dataField.i18n.deleteTranslation' | translate\">\n                    <mat-icon color=\"warn\">close</mat-icon>\n                </button>\n            </div>\n        </div>\n        <mat-hint class=\"i18n-hint-error\" [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\"\n                  *ngIf=\"!dataField.isInvalid(formControlRef) && hasHint()\">{{dataField.description}}</mat-hint>\n        <mat-error class=\"i18n-hint-error\" *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n    </div>\n</ng-template>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}.selected-language-value{outline:none;padding:9px 0;width:calc(100% - 56px);font-size:14px;border:0;margin-left:8px;color:#64748b;background:transparent}.selected-language-value:disabled{color:#94a3b8}.form-input-interfield{background:#FFFFFF;color:#64748b;outline:none;border:1px solid #64748B;text-align:left;font-size:14px;line-height:15.75px;border-radius:6px;min-width:5px;box-sizing:border-box;height:44px}.form-input-interfield:hover{border:solid 2px #64748B}.button-icon-input{padding:2px}.button-icon-input:hover{padding:1px!important}.i18n-hint-error{padding:0 1em;font-size:75%;width:auto!important}.language-svg-wrapper{height:20px;line-height:normal}.language-selector-button{width:auto;margin-left:8px;margin-right:4px}.language-selector-wrapper{margin:0 8px}.language-svg-icon{border:solid 1px #64748B}.filled-language-row{min-height:28px;padding:4px 0;background-color:#fff}.filled-language-row:not(:last-child){border-bottom:1px solid #64748B}.filled-language-row:last-child{border-bottom-left-radius:6px;border-bottom-right-radius:6px}.filled-languages-wrapper{border-radius:0 0 6px 6px;border-left:1px solid #64748B;border-right:1px solid #64748B;border-bottom:1px solid #64748B;margin-top:-5px;padding-top:5px;transform-origin:top}.filled-language-icon{margin:0 10px;height:20px}.filled-language-value{margin-left:20px}.filled-language-button{margin-left:auto;height:24px;width:24px;line-height:normal;margin-right:10px}.language-select{width:18px!important}.language-option-icon{margin-left:0}.language-option-value{margin-left:16px}.i18n-label{transform:translate(.4em,-.4em) scale(.75);transform-origin:left;color:#64748b;background:transparent;width:-moz-fit-content;width:fit-content;padding:0 .5em;z-index:5;height:0;position:relative;top:-1px}.form-input-disabled{background:transparent!important;border-color:#cbd5e1!important}.form-input-disabled:hover{border-width:1px}.i18n-bold-text{font-weight:700}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i1.LanguageIconsService }, { type: i1$2.TranslateService }, { type: i3$3.DomSanitizer }, { type: undefined, decorators: [{
                         type: Optional
@@ -1626,7 +1627,7 @@ class MultichoiceAutocompleteFieldComponent extends AbstractMultichoiceAutocompl
     }
 }
 MultichoiceAutocompleteFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultichoiceAutocompleteFieldComponent, deps: [{ token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MultichoiceAutocompleteFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultichoiceAutocompleteFieldComponent, selector: "nc-multichoice-autocomplete-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <mat-chip-list #chipList aria-label=\"Autocomplete\" [formControl]=\"formControlRef\">\n        <mat-chip\n            *ngFor=\"let option of dataField.value\" (removed)=\"remove(option)\">\n            {{getValueFromKey(option)}}\n            <button *ngIf=\"!formControlRef.disabled\" matChipRemove>\n                <mat-icon>cancel</mat-icon>\n            </button>\n        </mat-chip>\n        <input\n            aria-label=\"Autocomplete\"\n            matInput\n            #input\n            [placeholder]=\"dataField.placeholder\"\n            [required]=\"dataField.behavior.required\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputFor]=\"chipList\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n            (keyup)=\"change()\">\n    </mat-chip-list>\n    <mat-autocomplete [displayWith]=\"renderSelection\" autoActiveFirstOption #auto=\"matAutocomplete\">\n        <mat-option [value]=\"null\">---</mat-option>\n        <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option.key\" (click)=\"add(option)\">\n            {{option.value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error\n        *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$6.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i2$6.MatChipRemove, selector: "[matChipRemove]" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i2$6.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1$2.TranslatePipe } });
+MultichoiceAutocompleteFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultichoiceAutocompleteFieldComponent, selector: "nc-multichoice-autocomplete-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <mat-chip-list #chipList aria-label=\"Autocomplete\" [formControl]=\"formControlRef\">\n        <mat-chip\n            *ngFor=\"let option of dataField.value\" (removed)=\"remove(option)\">\n            {{getValueFromKey(option)}}\n            <button *ngIf=\"!formControlRef.disabled\" matChipRemove>\n                <mat-icon>cancel</mat-icon>\n            </button>\n        </mat-chip>\n        <input\n            aria-label=\"Autocomplete\"\n            matInput\n            #input\n            [placeholder]=\"dataField.placeholder\"\n            [required]=\"dataField.behavior.required\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputFor]=\"chipList\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n            (keyup)=\"change()\">\n    </mat-chip-list>\n    <mat-autocomplete [displayWith]=\"renderSelection\" autoActiveFirstOption #auto=\"matAutocomplete\">\n        <mat-option [value]=\"null\">---</mat-option>\n        <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option.key\" (click)=\"add(option)\">\n            {{option.value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error\n        *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$7.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$7.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i2$7.MatChipRemove, selector: "[matChipRemove]" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i2$7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultichoiceAutocompleteFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-multichoice-autocomplete-field', template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <mat-chip-list #chipList aria-label=\"Autocomplete\" [formControl]=\"formControlRef\">\n        <mat-chip\n            *ngFor=\"let option of dataField.value\" (removed)=\"remove(option)\">\n            {{getValueFromKey(option)}}\n            <button *ngIf=\"!formControlRef.disabled\" matChipRemove>\n                <mat-icon>cancel</mat-icon>\n            </button>\n        </mat-chip>\n        <input\n            aria-label=\"Autocomplete\"\n            matInput\n            #input\n            [placeholder]=\"dataField.placeholder\"\n            [required]=\"dataField.behavior.required\"\n            [matAutocomplete]=\"auto\"\n            [matChipInputFor]=\"chipList\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n            (keyup)=\"change()\">\n    </mat-chip-list>\n    <mat-autocomplete [displayWith]=\"renderSelection\" autoActiveFirstOption #auto=\"matAutocomplete\">\n        <mat-option [value]=\"null\">---</mat-option>\n        <mat-option *ngFor=\"let option of filteredOptions | async\" [value]=\"option.key\" (click)=\"add(option)\">\n            {{option.value}}\n        </mat-option>\n    </mat-autocomplete>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error\n        *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
@@ -1667,7 +1668,7 @@ class MultiUserAssignItemComponent extends AbstractMultiUserAssignItemComponent
     }
 }
 MultiUserAssignItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiUserAssignItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MultiUserAssignItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultiUserAssignItemComponent, selector: "nc-multi-user-assign-item", usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"user-item\" [ngClass]=\"{\n            'user-assign-item-selected': (selectedIds$ | async | contains:user.id)\n        }\">\n    <mat-icon class=\"icon\">account_circle</mat-icon>\n    <div fxLayout=\"column\">\n        <span>{{user.fullName}}</span>\n        <span>{{user.email}}</span>\n    </div>\n</div>\n", styles: [".user-item{padding:10px 15px;cursor:pointer}.user-item:hover{background-color:#00000024;border-radius:2.5px}.icon{margin-right:16px;height:40px;width:40px;font-size:40px}.email-selected,.email-unselected{font-size:.9em}\n"], components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "contains": i1.ContainsPipe, "async": i4$1.AsyncPipe } });
+MultiUserAssignItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: MultiUserAssignItemComponent, selector: "nc-multi-user-assign-item", usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"user-item\" [ngClass]=\"{\n            'user-assign-item-selected': (selectedIds$ | async | contains:user.id)\n        }\">\n    <mat-icon class=\"icon\">account_circle</mat-icon>\n    <div fxLayout=\"column\">\n        <span>{{user.fullName}}</span>\n        <span>{{user.email}}</span>\n    </div>\n</div>\n", styles: [".user-item{padding:10px 15px;cursor:pointer}.user-item:hover{background-color:#00000024;border-radius:2.5px}.icon{margin-right:16px;height:40px;width:40px;font-size:40px}.email-selected,.email-unselected{font-size:.9em}\n"], components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "contains": i1.ContainsPipe, "async": i4$1.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: MultiUserAssignItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-multi-user-assign-item', template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"user-item\" [ngClass]=\"{\n            'user-assign-item-selected': (selectedIds$ | async | contains:user.id)\n        }\">\n    <mat-icon class=\"icon\">account_circle</mat-icon>\n    <div fxLayout=\"column\">\n        <span>{{user.fullName}}</span>\n        <span>{{user.email}}</span>\n    </div>\n</div>\n", styles: [".user-item{padding:10px 15px;cursor:pointer}.user-item:hover{background-color:#00000024;border-radius:2.5px}.icon{margin-right:16px;height:40px;width:40px;font-size:40px}.email-selected,.email-unselected{font-size:.9em}\n"] }]
@@ -1686,6 +1687,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             args: [{ selector: 'nc-multi-user-assign-list', template: "<div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex>\n    <ng-container *ngIf=\"users$ | async as users\">\n        <div *ngIf=\"!loading && users.length === 0\" fxFlex=\"100\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n            <mat-icon color=\"accent\" class=\"margin-bottom-default\">person_add_disabled</mat-icon>\n            <span class=\"font-size-20\">{{ 'side-menu.user.noUser' | translate }}</span>\n        </div>\n\n        <div class=\"full-height full-width\" fxFlex=\"100\">\n            <cdk-virtual-scroll-viewport itemSize=\"60\" (scrolledIndexChange)=\"loadNextPage()\"\n                                         class=\"full-height full-width\">\n                <nc-multi-user-assign-item\n                    *cdkVirtualFor=\"let user of users;\n                                    trackBy: trackBy;\n                                    templateCacheSize: 0\"\n                    [user]=\"user\"\n                    [selectedIds$]=\"selectedUsers$\"\n                    (click)=\"select(user)\">\n                </nc-multi-user-assign-item>\n\n                <div *ngIf=\"loading\" fxLayout=\"column\" fxLayoutAlign=\"center center\"\n                     class=\"margin-top-default\">\n                    <mat-spinner color=\"primary\" diameter=\"40\"></mat-spinner>\n                </div>\n            </cdk-virtual-scroll-viewport>\n        </div>\n    </ng-container>\n</div>\n", styles: [".full-height{height:100%;min-height:100%}.full-width{width:100%;min-width:100%}.padding-default{padding:8px}.padding-half{padding:4px}.padding-x2{padding:16px}.margin-default{margin:8px}.margin-half{margin:4px}.margin-x2{margin:16px}.margin-top-half{margin-top:4px}.margin-top-x2{margin-top:16px}.margin-bottom-half{margin-bottom:4px}.margin-bottom-x2{margin-bottom:16px}.margin-left-default{margin-left:8px}.margin-left-half{margin-left:4px}.margin-left-x2{margin-left:16px}.margin-right-default{margin-right:8px}.margin-right-half{margin-right:4px}.margin-right-x2{margin-right:16px}.font-size-20{font-size:20px}.margin-bottom-default{margin-bottom:8px}.margin-top-default{margin-top:8px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.UserListService }]; } });
 
+/**
+ * @deprecated
+ * */
 class MultiUserAssignComponent extends AbstractMultiUserAssignComponent {
     constructor(_sideMenuControl) {
         super(_sideMenuControl);
@@ -1719,7 +1723,7 @@ SideMenuMultiUserAssignComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVer
         MatFormFieldModule,
         UtilityModule], exports: [MultiUserAssignComponent, MultiUserAssignListComponent] });
 SideMenuMultiUserAssignComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SideMenuMultiUserAssignComponentModule, providers: [
-        { provide: NAE_USER_ASSIGN_COMPONENT, useValue: MultiUserAssignComponent },
+        { provide: NAE_MULTI_USER_ASSIGN_COMPONENT, useValue: MultiUserAssignComponent },
     ], imports: [[
             CommonModule,
             MaterialModule,
@@ -1752,11 +1756,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     ],
                     exports: [MultiUserAssignComponent, MultiUserAssignListComponent],
                     providers: [
-                        { provide: NAE_USER_ASSIGN_COMPONENT, useValue: MultiUserAssignComponent },
+                        { provide: NAE_MULTI_USER_ASSIGN_COMPONENT, useValue: MultiUserAssignComponent },
                     ]
                 }]
         }] });
 
+class NumberDecimalFieldComponent extends AbstractNumberDecimalFieldComponent {
+    constructor(decimalPipe, translate, dataFieldPortalData) {
+        super(decimalPipe, translate, dataFieldPortalData);
+    }
+    getAppearance() {
+        var _a;
+        if (!((_a = this.dataField) === null || _a === void 0 ? void 0 : _a.materialAppearance)) {
+            return 'fill';
+        }
+        const validAppearances = ['legacy', 'standard', 'fill', 'outline'];
+        return validAppearances.includes(this.dataField.materialAppearance) ? this.dataField.materialAppearance : 'fill';
+    }
+    onFocusOut(event) {
+        this.transformToText(event);
+    }
+    onFocusIn() {
+        this.transformToNumber();
+    }
+}
+NumberDecimalFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumberDecimalFieldComponent, deps: [{ token: i4$1.DecimalPipe }, { token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+NumberDecimalFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NumberDecimalFieldComponent, selector: "nc-number-decimal-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"getAppearance()\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField?.title}}</mat-label>\n    <input matInput\n           [type]=\"fieldType\"\n           [value]=\"transformedValue\"\n           [formControl]=\"formControlRef\"\n           [placeholder]=\"dataField?.placeholder\"\n           [required]=\"dataField?.behavior?.required\"\n           (focusout)=\"onFocusOut($event)\"\n           (focusin)=\"onFocusIn()\">\n    <mat-hint>{{dataField?.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField?.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NumberDecimalFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nc-number-decimal-field', template: "<mat-form-field [appearance]=\"getAppearance()\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField?.title}}</mat-label>\n    <input matInput\n           [type]=\"fieldType\"\n           [value]=\"transformedValue\"\n           [formControl]=\"formControlRef\"\n           [placeholder]=\"dataField?.placeholder\"\n           [required]=\"dataField?.behavior?.required\"\n           (focusout)=\"onFocusOut($event)\"\n           (focusin)=\"onFocusIn()\">\n    <mat-hint>{{dataField?.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField?.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i4$1.DecimalPipe }, { type: i1$2.TranslateService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
+
 /**
  * @deprecated
  * */
@@ -1877,7 +1914,7 @@ class DashboardPortalTextFieldComponent extends AbstractDashboardPortalTextField
     ngOnInit() {
         super.ngOnInit();
         this.initializePortalComponent();
-        this.sub = this.formControlRef.valueChanges.subscribe(newValue => {
+        this._subValue = this.formControlRef.valueChanges.subscribe(newValue => {
             this.initializePortalComponent();
         });
     }
@@ -1887,7 +1924,7 @@ class DashboardPortalTextFieldComponent extends AbstractDashboardPortalTextField
     }
     ngOnDestroy() {
         super.ngOnDestroy();
-        this.sub.unsubscribe();
+        this._subValue.unsubscribe();
     }
 }
 DashboardPortalTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DashboardPortalTextFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: i1.ComponentRegistryService }, { token: i0.Injector }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
@@ -1977,7 +2014,7 @@ class BooleanDefaultFieldComponent extends AbstractBooleanDefaultFieldComponent
     }
 }
 BooleanDefaultFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BooleanDefaultFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-BooleanDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: BooleanDefaultFieldComponent, selector: "nc-boolean-default-field", usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" class=\"min-height-62\">\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value && hasTitle()\">{{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"true\"></nc-required-label>\n        <br></mat-label>\n    <mat-slide-toggle color=\"primary\" [formControl]=\"formControlRef\">\n        {{createValueLabel()}}\n    </mat-slide-toggle>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\" *ngIf=\"!dataField.isInvalid(formControlRef)\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</div>\n", styles: ["mat-hint{display:block}.min-height-62{min-height:62px}\n"], components: [{ type: RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i7$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+BooleanDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: BooleanDefaultFieldComponent, selector: "nc-boolean-default-field", usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" class=\"min-height-62\">\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value && hasTitle()\">{{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"true\"></nc-required-label>\n        <br></mat-label>\n    <mat-slide-toggle color=\"primary\" [formControl]=\"formControlRef\">\n        {{createValueLabel()}}\n    </mat-slide-toggle>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\" *ngIf=\"!dataField.isInvalid(formControlRef)\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</div>\n", styles: ["mat-hint{display:block}.min-height-62{min-height:62px}\n"], components: [{ type: RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i7$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BooleanDefaultFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-boolean-default-field', template: "<div fxLayout=\"column\" class=\"min-height-62\">\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value && hasTitle()\">{{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"true\"></nc-required-label>\n        <br></mat-label>\n    <mat-slide-toggle color=\"primary\" [formControl]=\"formControlRef\">\n        {{createValueLabel()}}\n    </mat-slide-toggle>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\" *ngIf=\"!dataField.isInvalid(formControlRef)\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</div>\n", styles: ["mat-hint{display:block}.min-height-62{min-height:62px}\n"] }]
@@ -1995,21 +2032,24 @@ class ButtonDefaultFieldComponent extends AbstractButtonDefaultFieldComponent {
         super(_translate, _dialogService, dataFieldPortalData);
     }
     ngOnInit() {
-        if (this.dataField.component && this.dataField.component.properties &&
-            this.dataField.component.properties.align) {
-            this.align = this.dataField.component.properties.align;
-        }
-        if (this.dataField.component && this.dataField.component.properties &&
-            this.dataField.component.properties.stretch) {
-            this.stretch = this.dataField.component.properties.stretch;
-        }
+        this.checkProperties();
+        this.subComp = this.dataField.componentChange$().subscribe(() => this.checkProperties());
+    }
+    checkProperties() {
+        var _a, _b, _c, _d;
+        this.align = (_b = (_a = this.dataField.component) === null || _a === void 0 ? void 0 : _a.properties) === null || _b === void 0 ? void 0 : _b.align;
+        this.stretch = ((_d = (_c = this.dataField.component) === null || _c === void 0 ? void 0 : _c.properties) === null || _d === void 0 ? void 0 : _d.stretch) === 'true';
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.subComp.unsubscribe();
     }
 }
 ButtonDefaultFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ButtonDefaultFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: i1.DialogService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ButtonDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ButtonDefaultFieldComponent, selector: "nc-button-default-field", usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{'flex-end': align === 'end',\n                     'flex-start': align === 'start',\n                     'flex-center': align === 'center',\n                     'full-button-width': stretch === 'true',\n                     'padding-bottom': !hasTitle()}\">\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\"\n               *ngIf=\"!showLargeLayout.value && hasTitle()\">\n        {{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n        <br>\n    </mat-label>\n    <button mat-button\n            [ngClass]=\"{\n                'mat-raised-button': dataField.getComponentType() === 'raised',\n                'mat-stroked-button': dataField.getComponentType() === 'stroked',\n                'mat-flat-button': dataField.getComponentType() === 'flat',\n                'mat-icon-button': dataField.getComponentType() === 'icon',\n                'mat-fab': dataField.getComponentType() === 'fab',\n                'mat-mini-fab': dataField.getComponentType() === 'minifab',\n                'full-button-width': stretch === 'true'}\"\n            color=\"primary\"\n            [matTooltip]=\"dataField.description\"\n            [disabled]=\"formControlRef.disabled || dataField.waitingForResponse\"\n            (click)=\"resolveValue()\">\n        <div class=\"grid-wrapper\">\n            <mat-icon *ngIf=\"dataField.waitingForResponse\" class=\"grid-1-1 margin-auto\">\n                <mat-spinner color=\"warn\" diameter=\"22\"></mat-spinner>\n            </mat-icon>\n            <div [ngClass]=\"{'label-waiting': dataField.waitingForResponse}\" class=\"grid-1-1\">\n                {{(dataField.placeholder === undefined || dataField.placeholder === '') ? dataField.title : (isIconTypeButton() ? '' : dataField.placeholder) }}\n            </div>\n            <mat-icon class=\"grid-1-1\"\n                      *ngIf=\"isIconTypeButton() && !dataField.waitingForResponse\">{{dataField.placeholder}}</mat-icon>\n        </div>\n    </button>\n\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef) || hasTitle()\">{{getErrorMessage()}}</mat-error>\n</div>\n", styles: [".label-waiting{opacity:0}.grid-wrapper{display:grid;place-items:center}.grid-1-1{grid-column:1;grid-row:1}.margin-auto{margin:0 auto}.flex-end{display:flex;place-content:flex-end}.flex-start{display:flex;place-content:flex-start}.flex-center{display:flex;place-content:center}.full-button-width{width:100%}.padding-bottom{padding-bottom:6px}\n"], components: [{ type: RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+ButtonDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ButtonDefaultFieldComponent, selector: "nc-button-default-field", usesInheritance: true, ngImport: i0, template: "<div [ngClass]=\"{'flex-end': align === 'end',\n                     'flex-start': align === 'start',\n                     'flex-center': align === 'center',\n                     'full-button-width': stretch ,\n                     'padding-bottom': !hasTitle()}\">\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\"\n               *ngIf=\"!showLargeLayout.value && hasTitle()\">\n        {{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n        <br>\n    </mat-label>\n    <button mat-button\n            [ngClass]=\"{\n                'mat-raised-button': dataField.getComponentType() === 'raised',\n                'mat-stroked-button': dataField.getComponentType() === 'stroked',\n                'mat-flat-button': dataField.getComponentType() === 'flat',\n                'mat-icon-button': dataField.getComponentType() === 'icon',\n                'mat-fab': dataField.getComponentType() === 'fab',\n                'mat-mini-fab': dataField.getComponentType() === 'minifab',\n                'full-button-width': stretch ,\n                'no-shadow': dataField.getComponentType() === 'fab' || dataField.getComponentType() === 'minifab'}\"\n            color=\"primary\"\n            [matTooltip]=\"dataField.description\"\n            [disabled]=\"formControlRef.disabled || dataField.waitingForResponse\"\n            (click)=\"resolveValue()\">\n        <div class=\"grid-wrapper\">\n            <mat-icon *ngIf=\"dataField.waitingForResponse\" class=\"grid-1-1 margin-auto\">\n                <mat-spinner color=\"warn\" diameter=\"22\"></mat-spinner>\n            </mat-icon>\n            <div [ngClass]=\"{'label-waiting': dataField.waitingForResponse}\" class=\"grid-1-1\">\n                {{(dataField.placeholder === undefined || dataField.placeholder === '') ? dataField.title : (isIconTypeButton() ? '' : dataField.placeholder) }}\n            </div>\n            <mat-icon class=\"grid-1-1\"\n                      *ngIf=\"isIconTypeButton() && !dataField.waitingForResponse\">{{dataField.placeholder}}</mat-icon>\n        </div>\n    </button>\n\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef) || hasTitle()\">{{getErrorMessage()}}</mat-error>\n</div>\n", styles: [".label-waiting{opacity:0}.grid-wrapper{display:grid;place-items:center}.grid-1-1{grid-column:1;grid-row:1}.margin-auto{margin:0 auto}.flex-end{display:flex;place-content:flex-end}.flex-start{display:flex;place-content:flex-start}.flex-center{display:flex;place-content:center}.full-button-width{width:100%}.padding-bottom{padding-bottom:6px}.no-shadow{box-shadow:unset!important}\n"], components: [{ type: RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ButtonDefaultFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nc-button-default-field', template: "<div [ngClass]=\"{'flex-end': align === 'end',\n                     'flex-start': align === 'start',\n                     'flex-center': align === 'center',\n                     'full-button-width': stretch === 'true',\n                     'padding-bottom': !hasTitle()}\">\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\"\n               *ngIf=\"!showLargeLayout.value && hasTitle()\">\n        {{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n        <br>\n    </mat-label>\n    <button mat-button\n            [ngClass]=\"{\n                'mat-raised-button': dataField.getComponentType() === 'raised',\n                'mat-stroked-button': dataField.getComponentType() === 'stroked',\n                'mat-flat-button': dataField.getComponentType() === 'flat',\n                'mat-icon-button': dataField.getComponentType() === 'icon',\n                'mat-fab': dataField.getComponentType() === 'fab',\n                'mat-mini-fab': dataField.getComponentType() === 'minifab',\n                'full-button-width': stretch === 'true'}\"\n            color=\"primary\"\n            [matTooltip]=\"dataField.description\"\n            [disabled]=\"formControlRef.disabled || dataField.waitingForResponse\"\n            (click)=\"resolveValue()\">\n        <div class=\"grid-wrapper\">\n            <mat-icon *ngIf=\"dataField.waitingForResponse\" class=\"grid-1-1 margin-auto\">\n                <mat-spinner color=\"warn\" diameter=\"22\"></mat-spinner>\n            </mat-icon>\n            <div [ngClass]=\"{'label-waiting': dataField.waitingForResponse}\" class=\"grid-1-1\">\n                {{(dataField.placeholder === undefined || dataField.placeholder === '') ? dataField.title : (isIconTypeButton() ? '' : dataField.placeholder) }}\n            </div>\n            <mat-icon class=\"grid-1-1\"\n                      *ngIf=\"isIconTypeButton() && !dataField.waitingForResponse\">{{dataField.placeholder}}</mat-icon>\n        </div>\n    </button>\n\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef) || hasTitle()\">{{getErrorMessage()}}</mat-error>\n</div>\n", styles: [".label-waiting{opacity:0}.grid-wrapper{display:grid;place-items:center}.grid-1-1{grid-column:1;grid-row:1}.margin-auto{margin:0 auto}.flex-end{display:flex;place-content:flex-end}.flex-start{display:flex;place-content:flex-start}.flex-center{display:flex;place-content:center}.full-button-width{width:100%}.padding-bottom{padding-bottom:6px}\n"] }]
+            args: [{ selector: 'nc-button-default-field', template: "<div [ngClass]=\"{'flex-end': align === 'end',\n                     'flex-start': align === 'start',\n                     'flex-center': align === 'center',\n                     'full-button-width': stretch ,\n                     'padding-bottom': !hasTitle()}\">\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\"\n               *ngIf=\"!showLargeLayout.value && hasTitle()\">\n        {{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n        <br>\n    </mat-label>\n    <button mat-button\n            [ngClass]=\"{\n                'mat-raised-button': dataField.getComponentType() === 'raised',\n                'mat-stroked-button': dataField.getComponentType() === 'stroked',\n                'mat-flat-button': dataField.getComponentType() === 'flat',\n                'mat-icon-button': dataField.getComponentType() === 'icon',\n                'mat-fab': dataField.getComponentType() === 'fab',\n                'mat-mini-fab': dataField.getComponentType() === 'minifab',\n                'full-button-width': stretch ,\n                'no-shadow': dataField.getComponentType() === 'fab' || dataField.getComponentType() === 'minifab'}\"\n            color=\"primary\"\n            [matTooltip]=\"dataField.description\"\n            [disabled]=\"formControlRef.disabled || dataField.waitingForResponse\"\n            (click)=\"resolveValue()\">\n        <div class=\"grid-wrapper\">\n            <mat-icon *ngIf=\"dataField.waitingForResponse\" class=\"grid-1-1 margin-auto\">\n                <mat-spinner color=\"warn\" diameter=\"22\"></mat-spinner>\n            </mat-icon>\n            <div [ngClass]=\"{'label-waiting': dataField.waitingForResponse}\" class=\"grid-1-1\">\n                {{(dataField.placeholder === undefined || dataField.placeholder === '') ? dataField.title : (isIconTypeButton() ? '' : dataField.placeholder) }}\n            </div>\n            <mat-icon class=\"grid-1-1\"\n                      *ngIf=\"isIconTypeButton() && !dataField.waitingForResponse\">{{dataField.placeholder}}</mat-icon>\n        </div>\n    </button>\n\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef) || hasTitle()\">{{getErrorMessage()}}</mat-error>\n</div>\n", styles: [".label-waiting{opacity:0}.grid-wrapper{display:grid;place-items:center}.grid-1-1{grid-column:1;grid-row:1}.margin-auto{margin:0 auto}.flex-end{display:flex;place-content:flex-end}.flex-start{display:flex;place-content:flex-start}.flex-center{display:flex;place-content:center}.full-button-width{width:100%}.padding-bottom{padding-bottom:6px}.no-shadow{box-shadow:unset!important}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i1$2.TranslateService }, { type: i1.DialogService }, { type: undefined, decorators: [{
                         type: Optional
@@ -2020,22 +2060,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
     } });
 
 class DateDefaultFieldComponent extends AbstractDateDefaultFieldComponent {
-    constructor(_translate, dataFieldPortalData) {
-        super(_translate, dataFieldPortalData);
-        this._translate = _translate;
+    constructor(_translate, _adapter, _locale, _languageService, dataFieldPortalData) {
+        super(_translate, _adapter, _locale, _languageService, dataFieldPortalData);
+        this._locale = _locale;
     }
 }
-DateDefaultFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateDefaultFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DateDefaultFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateDefaultFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: i2$6.NgxMatDateAdapter }, { token: MAT_DATE_LOCALE }, { token: i1.LanguageService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 DateDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateDefaultFieldComponent, selector: "nc-date-default-field", providers: [
         { provide: MAT_DATE_FORMATS, useValue: DATE_FORMAT }
-    ], usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <input matInput\n           [matDatepicker]=\"datepicker\"\n           [required]=\"dataField.behavior.required\"\n           [placeholder]=\"dataField.placeholder\"\n           [formControl]=\"formControlRef\"\n           (click)=\"datepicker.open()\"\n           [min]=\"dataField.min\"\n           [max]=\"dataField.max\"\n           (keydown.enter)=\"datepicker.close()\">\n    <mat-datepicker-toggle matPrefix [for]=\"datepicker\"></mat-datepicker-toggle>\n    <mat-datepicker #datepicker></mat-datepicker>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i5$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i5$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.MatPrefix, selector: "[matPrefix]" }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+    ], usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <input matInput\n           [matDatepicker]=\"datepicker\"\n           [required]=\"dataField.behavior.required\"\n           [placeholder]=\"dataField.placeholder\"\n           [formControl]=\"formControlRef\"\n           (click)=\"datepicker.open()\"\n           [min]=\"dataField.min\"\n           [max]=\"dataField.max\"\n           (keydown.enter)=\"datepicker.close()\">\n    <mat-datepicker-toggle matPrefix [for]=\"datepicker\"></mat-datepicker-toggle>\n    <mat-datepicker #datepicker></mat-datepicker>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i5$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i5$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.MatPrefix, selector: "[matPrefix]" }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateDefaultFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-date-default-field', providers: [
                         { provide: MAT_DATE_FORMATS, useValue: DATE_FORMAT }
                     ], template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <input matInput\n           [matDatepicker]=\"datepicker\"\n           [required]=\"dataField.behavior.required\"\n           [placeholder]=\"dataField.placeholder\"\n           [formControl]=\"formControlRef\"\n           (click)=\"datepicker.open()\"\n           [min]=\"dataField.min\"\n           [max]=\"dataField.max\"\n           (keydown.enter)=\"datepicker.close()\">\n    <mat-datepicker-toggle matPrefix [for]=\"datepicker\"></mat-datepicker-toggle>\n    <mat-datepicker #datepicker></mat-datepicker>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
         }], ctorParameters: function () {
-        return [{ type: i1$2.TranslateService }, { type: undefined, decorators: [{
+        return [{ type: i1$2.TranslateService }, { type: i2$6.NgxMatDateAdapter }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MAT_DATE_LOCALE]
+                    }] }, { type: i1.LanguageService }, { type: undefined, decorators: [{
                         type: Optional
                     }, {
                         type: Inject,
@@ -2044,22 +2087,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
     } });
 
 class DateTimeDefaultFieldComponent extends AbstractDateTimeDefaultFieldComponent {
-    constructor(_translate, dataFieldPortalData) {
-        super(_translate, dataFieldPortalData);
-        this._translate = _translate;
+    constructor(_translate, _adapter, _locale, _languageService, dataFieldPortalData) {
+        super(_translate, _adapter, _locale, _languageService, dataFieldPortalData);
+        this._locale = _locale;
     }
 }
-DateTimeDefaultFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateTimeDefaultFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+DateTimeDefaultFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateTimeDefaultFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: i2$6.NgxMatDateAdapter }, { token: MAT_DATE_LOCALE }, { token: i1.LanguageService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 DateTimeDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DateTimeDefaultFieldComponent, selector: "nc-date-time-default-field", providers: [
         { provide: NGX_MAT_DATE_FORMATS, useValue: DATE_TIME_FORMAT }
-    ], usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <input matInput\n           [ngxMatDatetimePicker]=\"picker\"\n           [required]=\"dataField.behavior.required\"\n           [placeholder]=\"dataField.placeholder\"\n           [formControl]=\"formControlRef\"\n           [min]=\"dataField.min\"\n           [max]=\"dataField.max\"\n           (click)=\"picker.open()\">\n    <mat-datepicker-toggle matPrefix [for]=\"picker\"></mat-datepicker-toggle>\n    <ngx-mat-datetime-picker #picker\n                             [showSpinners]=\"true\"\n                             [showSeconds]=\"false\"\n                             [stepHour]=\"1\"\n                             [stepMinute]=\"5\"\n                             [color]=\"'primary'\"\n                             [enableMeridian]=\"false\">\n    </ngx-mat-datetime-picker>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i5$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i6$2.NgxMatDatetimePicker, selector: "ngx-mat-datetime-picker", inputs: ["calendarHeaderComponent", "startAt", "startView", "defaultColor", "color", "touchUi", "hideTime", "disabled", "panelClass", "dateClass", "opened", "showSpinners", "showSeconds", "stepHour", "stepMinute", "stepSecond", "enableMeridian", "disableMinute", "defaultTime"], outputs: ["yearSelected", "monthSelected", "opened", "closed"], exportAs: ["ngxMatDatetimePicker"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i6$2.NgxMatDatetimeInput, selector: "input[ngxMatDatetimePicker]", inputs: ["ngxMatDatetimePicker", "ngxMatDatetimePickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["ngxMatDatetimePickerInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.MatPrefix, selector: "[matPrefix]" }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }] });
+    ], usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <input matInput\n           [ngxMatDatetimePicker]=\"picker\"\n           [required]=\"dataField.behavior.required\"\n           [placeholder]=\"dataField.placeholder\"\n           [formControl]=\"formControlRef\"\n           [min]=\"dataField.min\"\n           [max]=\"dataField.max\"\n           (click)=\"picker.open()\">\n    <mat-datepicker-toggle matPrefix [for]=\"picker\"></mat-datepicker-toggle>\n    <ngx-mat-datetime-picker #picker\n                             [showSpinners]=\"true\"\n                             [showSeconds]=\"false\"\n                             [stepHour]=\"1\"\n                             [stepMinute]=\"5\"\n                             [color]=\"'primary'\"\n                             [enableMeridian]=\"false\">\n    </ngx-mat-datetime-picker>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i5$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { type: i2$6.NgxMatDatetimePicker, selector: "ngx-mat-datetime-picker", inputs: ["calendarHeaderComponent", "startAt", "startView", "defaultColor", "color", "touchUi", "hideTime", "disabled", "panelClass", "dateClass", "opened", "showSpinners", "showSeconds", "stepHour", "stepMinute", "stepSecond", "enableMeridian", "disableMinute", "defaultTime"], outputs: ["yearSelected", "monthSelected", "opened", "closed"], exportAs: ["ngxMatDatetimePicker"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$6.NgxMatDatetimeInput, selector: "input[ngxMatDatetimePicker]", inputs: ["ngxMatDatetimePicker", "ngxMatDatetimePickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["ngxMatDatetimePickerInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.MatPrefix, selector: "[matPrefix]" }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DateTimeDefaultFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-date-time-default-field', providers: [
                         { provide: NGX_MAT_DATE_FORMATS, useValue: DATE_TIME_FORMAT }
                     ], template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <input matInput\n           [ngxMatDatetimePicker]=\"picker\"\n           [required]=\"dataField.behavior.required\"\n           [placeholder]=\"dataField.placeholder\"\n           [formControl]=\"formControlRef\"\n           [min]=\"dataField.min\"\n           [max]=\"dataField.max\"\n           (click)=\"picker.open()\">\n    <mat-datepicker-toggle matPrefix [for]=\"picker\"></mat-datepicker-toggle>\n    <ngx-mat-datetime-picker #picker\n                             [showSpinners]=\"true\"\n                             [showSeconds]=\"false\"\n                             [stepHour]=\"1\"\n                             [stepMinute]=\"5\"\n                             [color]=\"'primary'\"\n                             [enableMeridian]=\"false\">\n    </ngx-mat-datetime-picker>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf=\"dataField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
         }], ctorParameters: function () {
-        return [{ type: i1$2.TranslateService }, { type: undefined, decorators: [{
+        return [{ type: i1$2.TranslateService }, { type: i2$6.NgxMatDateAdapter }, { type: undefined, decorators: [{
+                        type: Inject,
+                        args: [MAT_DATE_LOCALE]
+                    }] }, { type: i1.LanguageService }, { type: undefined, decorators: [{
                         type: Optional
                     }, {
                         type: Inject,
@@ -2086,7 +2132,7 @@ class FileDefaultFieldComponent extends AbstractFileDefaultFieldComponent {
     }
 }
 FileDefaultFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileDefaultFieldComponent, deps: [{ token: i1.TaskResourceService }, { token: i1.LoggerService }, { token: i1.SnackBarService }, { token: i1$2.TranslateService }, { token: i1.EventService }, { token: i3$3.DomSanitizer }, { token: i1$3.MatDialog }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-FileDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FileDefaultFieldComponent, selector: "nc-file-default-field", usesInheritance: true, ngImport: i0, template: "<div fxLayoutAlign=\"center center\" fxLayout=\"row\">\n    <div fxFlex=\"{{!isFilePreview ? '100' : '75'}}\" class=\"netgrif-file-padding\">\n        <div #fileLabel class=\"file-field-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\">\n            {{dataField.title}}\n            <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n        </div>\n        <div class=\"form-input button-icon-input full-width\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n             [ngClass]=\"{'form-input-disabled': formControlRef.disabled, 'form-input-error': dataField.isInvalid(formControlRef)}\"\n             [ngStyle]=\"{\n                    '-webkit-clip-path': getCutProperty(fileLabel),\n                    'clip-path': getCutProperty(fileLabel)\n            }\">\n            <button mat-icon-button matPrefix\n                    [disabled]=\"formControlRef.disabled\"\n                    color=\"primary\"\n                    (click)=\"chooseFile()\"\n                    [matTooltip]=\"'dataField.file.clickToUpload' | translate\"\n                    [class.do-not-click]=\"state.uploading\">\n                <mat-icon>file_upload</mat-icon>\n            </button>\n            <span (click)=\"isEmpty() ? chooseFile() : download()\" fxFlex\n                  [matTooltip]=\"isEmpty() ? '' : ('dataField.file.clickToDownload' | translate : {fileName: constructDisplayName()})\"\n                  class=\"input-name-ellipsis\"\n                  [ngClass]=\"{'input-placeholder': isEmpty(), 'no-cursor': isEmpty() && formControlRef.disabled}\">{{constructDisplayName()}}</span>\n            <button (click)=\"showPreviewDialog()\" [matTooltip]=\"'dataField.file.clickToDelete' | translate\" mat-icon-button\n                    *ngIf=\"isFilePreviewButton && !isEmpty() && isDisplayable\">\n                <mat-icon color=\"primary\">search</mat-icon>\n            </button>\n            <button (click)=\"deleteFile()\" [matTooltip]=\"'dataField.file.clickToDelete' | translate\" mat-icon-button\n                    *ngIf=\"!isEmpty() && !formControlRef.disabled\">\n                <mat-icon color=\"warn\">close</mat-icon>\n            </button>\n        </div>\n        <mat-progress-bar *ngIf=\"state.uploading || state.downloading\" color=\"primary\" [value]=\"state.progress\"\n                          [mode]=\"state.uploading ? 'determinate' : 'indeterminate'\"\n                          class=\"margin-bottom-default\"></mat-progress-bar>\n        <input type=\"file\" #fileUploadInput name=\"fileUpload\" [multiple]=\"false\"\n               accept=\"{{dataField.allowTypes}}\" class=\"invisible-input\">\n        <input type=\"text\" [formControl]=\"formControlRef\" class=\"invisible-input\">\n        <mat-hint class=\"file-hint-error\" [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\"\n                  *ngIf=\"!dataField.isInvalid(formControlRef) && hasHint()\">{{dataField.description}}</mat-hint>\n        <mat-error class=\"file-hint-error\"\n                   *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n    </div>\n    <div *ngIf=\"isFilePreview\" fxFlex=\"5\"></div>\n    <div *ngIf=\"isFilePreview\" fxFlex=\"20\" fxLayout=\"row\" fxLayoutAlign=\"center center\" #imageDiv\n         (resized)=\"changeMaxWidth($event)\">\n        <img *ngIf=\"previewSource !== undefined && !state.downloading && isDisplayable\" class=\"image-preview\" #imageEl\n             [ngStyle]=\"!isBorderLGBTQ() && !isBorderDefault() && {\n                    'border-width': getPreviewBorderWidth(),\n                    'border-style': getPreviewBorderStyle(),\n                    'border-color': getPreviewBorderColor()\n                 }\"\n             [ngClass]=\"{'border-LGBTQ': isBorderLGBTQ(), 'border-default': isBorderDefault()}\"\n             [src]=\"previewSource\" alt=\"Image preview\" (click)=\"showPreviewDialog()\"/>\n        <mat-spinner *ngIf=\"previewSource === undefined && !!state.downloading && isDisplayable\"\n                     [diameter]=\"26\"></mat-spinner>\n    </div>\n</div>\n", styles: [".invisible-input{display:none}.margin-bottom-default{margin-bottom:8px}.do-not-click:hover{cursor:not-allowed}.input-name-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.input-placeholder{color:#64748b}.button-icon-input{padding:2px!important}.full-width{width:100%;min-width:100%}.form-input{background:#FFFFFF;color:#64748b;outline:none;border:1px solid #64748B;text-align:left;font-size:14px;line-height:20px;border-radius:6px;min-width:5px;padding:8px 15px;box-sizing:border-box;height:44px}.form-input:hover{border-width:2px;padding-left:1px!important;padding-right:1px!important}.form-input-disabled,.form-input-disabled:focus-within{background:transparent!important;border-color:#cbd5e1!important}.form-input-disabled:hover,.form-input-disabled:focus-within{border-width:1px!important;padding:2px!important}.file-hint-error{font-size:75%;padding:0 1em;width:unset;position:absolute;margin-top:.5em;top:calc(100% - 2em)}.image-preview{width:auto;height:auto;cursor:pointer}.no-cursor{cursor:default!important;color:#64748b}.border-LGBTQ{border:5px solid transparent;border-image:linear-gradient(to bottom right,#B827FC 0%,#2C90FC 25%,#B8FD33 50%,#FEC837 75%,#FD1892 100%);border-image-slice:1;animation:rainbow 10s infinite}@keyframes rainbow{0%{border-image:linear-gradient(to bottom right,#B827FC 0%,#2C90FC 25%,#B8FD33 50%,#FEC837 75%,#FD1892 100%);border-image-slice:1}20%{border-image:linear-gradient(to bottom right,#2C90FC 0%,#B8FD33 25%,#FEC837 50%,#FD1892 75%,#B827FC 100%);border-image-slice:1}40%{border-image:linear-gradient(to bottom right,#B8FD33 0%,#FEC837 25%,#FD1892 50%,#B827FC 75%,#2C90FC 100%);border-image-slice:1}60%{border-image:linear-gradient(to bottom right,#FEC837 0%,#FD1892 25%,#B827FC 50%,#2C90FC 75%,#B8FD33 100%);border-image-slice:1}80%{border-image:linear-gradient(to bottom right,#FD1892 0%,#B827FC 25%,#2C90FC 50%,#B8FD33 75%,#FEC837 100%);border-image-slice:1}to{border-image:linear-gradient(to bottom right,#B827FC 0%,#2C90FC 25%,#B8FD33 50%,#FEC837 75%,#FD1892 100%);border-image-slice:1}}.border-default{border-width:1px;border-style:solid;border-color:#000}@media only screen and (max-width: 959.99px){.input-name-ellipsis{word-break:break-word;white-space:normal;overflow-y:auto;max-height:40px}}.file-field-label{transform:translate(.4em,-.45em) scale(.75);transform-origin:left;color:#64748b;background:transparent;width:-moz-fit-content;width:fit-content;padding:0 .5em;z-index:5;height:0;position:relative}.netgrif-file-padding{padding-bottom:13px;position:relative}\n"], components: [{ type: RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i2$1.MatPrefix, selector: "[matPrefix]" }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i16.ResizedDirective, selector: "[resized]", outputs: ["resized"] }], pipes: { "translate": i1$2.TranslatePipe } });
+FileDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FileDefaultFieldComponent, selector: "nc-file-default-field", usesInheritance: true, ngImport: i0, template: "<div fxLayoutAlign=\"center center\" fxLayout=\"row\">\n    <div fxFlex=\"{{!isFilePreview ? '100' : '75'}}\" class=\"netgrif-file-padding\">\n        <div #fileLabel class=\"file-field-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\">\n            {{dataField.title}}\n            <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n        </div>\n        <div class=\"form-input button-icon-input full-width\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n             [ngClass]=\"{'form-input-disabled': formControlRef.disabled, 'form-input-error': dataField.isInvalid(formControlRef)}\"\n             [ngStyle]=\"{\n                    '-webkit-clip-path': getCutProperty(fileLabel),\n                    'clip-path': getCutProperty(fileLabel)\n            }\">\n            <button mat-icon-button matPrefix\n                    [disabled]=\"formControlRef.disabled\"\n                    color=\"primary\"\n                    (click)=\"chooseFile()\"\n                    [matTooltip]=\"'dataField.file.clickToUpload' | translate\"\n                    [class.do-not-click]=\"state.uploading\">\n                <mat-icon>file_upload</mat-icon>\n            </button>\n            <span (click)=\"isEmpty() ? chooseFile() : download()\" fxFlex\n                  [matTooltip]=\"isEmpty() ? '' : ('dataField.file.clickToDownload' | translate : {fileName: constructDisplayName()})\"\n                  class=\"input-name-ellipsis\"\n                  [ngClass]=\"{'input-placeholder': isEmpty(), 'no-cursor': isEmpty() && formControlRef.disabled}\">{{constructDisplayName()}}</span>\n            <button (click)=\"showPreviewDialog()\" [matTooltip]=\"'dataField.file.clickToDelete' | translate\" mat-icon-button\n                    *ngIf=\"isFilePreviewButton && !isEmpty() && isDisplayable\">\n                <mat-icon color=\"primary\">search</mat-icon>\n            </button>\n            <button (click)=\"deleteFile()\" [matTooltip]=\"'dataField.file.clickToDelete' | translate\" mat-icon-button\n                    *ngIf=\"!isEmpty() && !formControlRef.disabled\">\n                <mat-icon color=\"warn\">close</mat-icon>\n            </button>\n        </div>\n        <mat-progress-bar *ngIf=\"state.uploading || state.downloading\" color=\"primary\" [value]=\"state.progress\"\n                          [mode]=\"state.uploading ? 'determinate' : 'indeterminate'\"\n                          class=\"margin-bottom-default\"></mat-progress-bar>\n        <input type=\"file\" #fileUploadInput name=\"fileUpload\" [multiple]=\"false\"\n               accept=\"{{dataField.allowTypes}}\" class=\"invisible-input\">\n        <input type=\"text\" [formControl]=\"formControlRef\" class=\"invisible-input\">\n        <mat-hint class=\"file-hint-error\" [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\"\n                  *ngIf=\"!dataField.isInvalid(formControlRef) && hasHint()\">{{dataField.description}}</mat-hint>\n        <mat-error class=\"file-hint-error\"\n                   *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n    </div>\n    <div *ngIf=\"isFilePreview\" fxFlex=\"5\"></div>\n    <div *ngIf=\"isFilePreview\" fxFlex=\"20\" fxLayout=\"row\" fxLayoutAlign=\"center center\" #imageDiv\n         (resized)=\"changeMaxWidth($event)\">\n        <img *ngIf=\"previewSource !== undefined && !state.downloading && isDisplayable\" class=\"image-preview\" #imageEl\n             [ngStyle]=\"!isBorderLGBTQ() && !isBorderDefault() && {\n                    'border-width': getPreviewBorderWidth(),\n                    'border-style': getPreviewBorderStyle(),\n                    'border-color': getPreviewBorderColor()\n                 }\"\n             [ngClass]=\"{'border-LGBTQ': isBorderLGBTQ(), 'border-default': isBorderDefault()}\"\n             [src]=\"previewSource\" alt=\"Image preview\" (click)=\"showPreviewDialog()\"/>\n        <mat-spinner *ngIf=\"previewSource === undefined && !!state.downloading && isDisplayable\"\n                     [diameter]=\"26\"></mat-spinner>\n    </div>\n</div>\n", styles: [".invisible-input{display:none}.margin-bottom-default{margin-bottom:8px}.do-not-click:hover{cursor:not-allowed}.input-name-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.input-placeholder{color:#64748b}.button-icon-input{padding:2px!important}.full-width{width:100%;min-width:100%}.form-input{background:#FFFFFF;color:#64748b;outline:none;border:1px solid #64748B;text-align:left;font-size:14px;line-height:20px;border-radius:6px;min-width:5px;padding:8px 15px;box-sizing:border-box;height:44px}.form-input:hover{border-width:2px;padding-left:1px!important;padding-right:1px!important}.form-input-disabled,.form-input-disabled:focus-within{background:transparent!important;border-color:#cbd5e1!important}.form-input-disabled:hover,.form-input-disabled:focus-within{border-width:1px!important;padding:2px!important}.file-hint-error{font-size:75%;padding:0 1em;width:unset;position:absolute;margin-top:.5em;top:calc(100% - 2em)}.image-preview{width:auto;height:auto;cursor:pointer}.no-cursor{cursor:default!important;color:#64748b}.border-LGBTQ{border:5px solid transparent;border-image:linear-gradient(to bottom right,#B827FC 0%,#2C90FC 25%,#B8FD33 50%,#FEC837 75%,#FD1892 100%);border-image-slice:1;animation:rainbow 10s infinite}@keyframes rainbow{0%{border-image:linear-gradient(to bottom right,#B827FC 0%,#2C90FC 25%,#B8FD33 50%,#FEC837 75%,#FD1892 100%);border-image-slice:1}20%{border-image:linear-gradient(to bottom right,#2C90FC 0%,#B8FD33 25%,#FEC837 50%,#FD1892 75%,#B827FC 100%);border-image-slice:1}40%{border-image:linear-gradient(to bottom right,#B8FD33 0%,#FEC837 25%,#FD1892 50%,#B827FC 75%,#2C90FC 100%);border-image-slice:1}60%{border-image:linear-gradient(to bottom right,#FEC837 0%,#FD1892 25%,#B827FC 50%,#2C90FC 75%,#B8FD33 100%);border-image-slice:1}80%{border-image:linear-gradient(to bottom right,#FD1892 0%,#B827FC 25%,#2C90FC 50%,#B8FD33 75%,#FEC837 100%);border-image-slice:1}to{border-image:linear-gradient(to bottom right,#B827FC 0%,#2C90FC 25%,#B8FD33 50%,#FEC837 75%,#FD1892 100%);border-image-slice:1}}.border-default{border-width:1px;border-style:solid;border-color:#000}@media only screen and (max-width: 959.99px){.input-name-ellipsis{word-break:break-word;white-space:normal;overflow-y:auto;max-height:40px}}.file-field-label{transform:translate(.4em,-.45em) scale(.75);transform-origin:left;color:#64748b;background:transparent;width:-moz-fit-content;width:fit-content;padding:0 .5em;z-index:5;height:0;position:relative}.netgrif-file-padding{padding-bottom:13px;position:relative}\n"], components: [{ type: RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i2$1.MatPrefix, selector: "[matPrefix]" }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i16.ResizedDirective, selector: "[resized]", outputs: ["resized"] }], pipes: { "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileDefaultFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-file-default-field', template: "<div fxLayoutAlign=\"center center\" fxLayout=\"row\">\n    <div fxFlex=\"{{!isFilePreview ? '100' : '75'}}\" class=\"netgrif-file-padding\">\n        <div #fileLabel class=\"file-field-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\">\n            {{dataField.title}}\n            <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n        </div>\n        <div class=\"form-input button-icon-input full-width\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n             [ngClass]=\"{'form-input-disabled': formControlRef.disabled, 'form-input-error': dataField.isInvalid(formControlRef)}\"\n             [ngStyle]=\"{\n                    '-webkit-clip-path': getCutProperty(fileLabel),\n                    'clip-path': getCutProperty(fileLabel)\n            }\">\n            <button mat-icon-button matPrefix\n                    [disabled]=\"formControlRef.disabled\"\n                    color=\"primary\"\n                    (click)=\"chooseFile()\"\n                    [matTooltip]=\"'dataField.file.clickToUpload' | translate\"\n                    [class.do-not-click]=\"state.uploading\">\n                <mat-icon>file_upload</mat-icon>\n            </button>\n            <span (click)=\"isEmpty() ? chooseFile() : download()\" fxFlex\n                  [matTooltip]=\"isEmpty() ? '' : ('dataField.file.clickToDownload' | translate : {fileName: constructDisplayName()})\"\n                  class=\"input-name-ellipsis\"\n                  [ngClass]=\"{'input-placeholder': isEmpty(), 'no-cursor': isEmpty() && formControlRef.disabled}\">{{constructDisplayName()}}</span>\n            <button (click)=\"showPreviewDialog()\" [matTooltip]=\"'dataField.file.clickToDelete' | translate\" mat-icon-button\n                    *ngIf=\"isFilePreviewButton && !isEmpty() && isDisplayable\">\n                <mat-icon color=\"primary\">search</mat-icon>\n            </button>\n            <button (click)=\"deleteFile()\" [matTooltip]=\"'dataField.file.clickToDelete' | translate\" mat-icon-button\n                    *ngIf=\"!isEmpty() && !formControlRef.disabled\">\n                <mat-icon color=\"warn\">close</mat-icon>\n            </button>\n        </div>\n        <mat-progress-bar *ngIf=\"state.uploading || state.downloading\" color=\"primary\" [value]=\"state.progress\"\n                          [mode]=\"state.uploading ? 'determinate' : 'indeterminate'\"\n                          class=\"margin-bottom-default\"></mat-progress-bar>\n        <input type=\"file\" #fileUploadInput name=\"fileUpload\" [multiple]=\"false\"\n               accept=\"{{dataField.allowTypes}}\" class=\"invisible-input\">\n        <input type=\"text\" [formControl]=\"formControlRef\" class=\"invisible-input\">\n        <mat-hint class=\"file-hint-error\" [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\"\n                  *ngIf=\"!dataField.isInvalid(formControlRef) && hasHint()\">{{dataField.description}}</mat-hint>\n        <mat-error class=\"file-hint-error\"\n                   *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n    </div>\n    <div *ngIf=\"isFilePreview\" fxFlex=\"5\"></div>\n    <div *ngIf=\"isFilePreview\" fxFlex=\"20\" fxLayout=\"row\" fxLayoutAlign=\"center center\" #imageDiv\n         (resized)=\"changeMaxWidth($event)\">\n        <img *ngIf=\"previewSource !== undefined && !state.downloading && isDisplayable\" class=\"image-preview\" #imageEl\n             [ngStyle]=\"!isBorderLGBTQ() && !isBorderDefault() && {\n                    'border-width': getPreviewBorderWidth(),\n                    'border-style': getPreviewBorderStyle(),\n                    'border-color': getPreviewBorderColor()\n                 }\"\n             [ngClass]=\"{'border-LGBTQ': isBorderLGBTQ(), 'border-default': isBorderDefault()}\"\n             [src]=\"previewSource\" alt=\"Image preview\" (click)=\"showPreviewDialog()\"/>\n        <mat-spinner *ngIf=\"previewSource === undefined && !!state.downloading && isDisplayable\"\n                     [diameter]=\"26\"></mat-spinner>\n    </div>\n</div>\n", styles: [".invisible-input{display:none}.margin-bottom-default{margin-bottom:8px}.do-not-click:hover{cursor:not-allowed}.input-name-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.input-placeholder{color:#64748b}.button-icon-input{padding:2px!important}.full-width{width:100%;min-width:100%}.form-input{background:#FFFFFF;color:#64748b;outline:none;border:1px solid #64748B;text-align:left;font-size:14px;line-height:20px;border-radius:6px;min-width:5px;padding:8px 15px;box-sizing:border-box;height:44px}.form-input:hover{border-width:2px;padding-left:1px!important;padding-right:1px!important}.form-input-disabled,.form-input-disabled:focus-within{background:transparent!important;border-color:#cbd5e1!important}.form-input-disabled:hover,.form-input-disabled:focus-within{border-width:1px!important;padding:2px!important}.file-hint-error{font-size:75%;padding:0 1em;width:unset;position:absolute;margin-top:.5em;top:calc(100% - 2em)}.image-preview{width:auto;height:auto;cursor:pointer}.no-cursor{cursor:default!important;color:#64748b}.border-LGBTQ{border:5px solid transparent;border-image:linear-gradient(to bottom right,#B827FC 0%,#2C90FC 25%,#B8FD33 50%,#FEC837 75%,#FD1892 100%);border-image-slice:1;animation:rainbow 10s infinite}@keyframes rainbow{0%{border-image:linear-gradient(to bottom right,#B827FC 0%,#2C90FC 25%,#B8FD33 50%,#FEC837 75%,#FD1892 100%);border-image-slice:1}20%{border-image:linear-gradient(to bottom right,#2C90FC 0%,#B8FD33 25%,#FEC837 50%,#FD1892 75%,#B827FC 100%);border-image-slice:1}40%{border-image:linear-gradient(to bottom right,#B8FD33 0%,#FEC837 25%,#FD1892 50%,#B827FC 75%,#2C90FC 100%);border-image-slice:1}60%{border-image:linear-gradient(to bottom right,#FEC837 0%,#FD1892 25%,#B827FC 50%,#2C90FC 75%,#B8FD33 100%);border-image-slice:1}80%{border-image:linear-gradient(to bottom right,#FD1892 0%,#B827FC 25%,#2C90FC 50%,#B8FD33 75%,#FEC837 100%);border-image-slice:1}to{border-image:linear-gradient(to bottom right,#B827FC 0%,#2C90FC 25%,#B8FD33 50%,#FEC837 75%,#FD1892 100%);border-image-slice:1}}.border-default{border-width:1px;border-style:solid;border-color:#000}@media only screen and (max-width: 959.99px){.input-name-ellipsis{word-break:break-word;white-space:normal;overflow-y:auto;max-height:40px}}.file-field-label{transform:translate(.4em,-.45em) scale(.75);transform-origin:left;color:#64748b;background:transparent;width:-moz-fit-content;width:fit-content;padding:0 .5em;z-index:5;height:0;position:relative}.netgrif-file-padding{padding-bottom:13px;position:relative}\n"] }]
@@ -2105,10 +2151,10 @@ class FileListDefaultFieldComponent extends AbstractFileListDefaultFieldComponen
     }
 }
 FileListDefaultFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileListDefaultFieldComponent, deps: [{ token: i1.TaskResourceService }, { token: i1.LoggerService }, { token: i1.SnackBarService }, { token: i1$2.TranslateService }, { token: i1.EventService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-FileListDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FileListDefaultFieldComponent, selector: "nc-file-list-default-field", usesInheritance: true, ngImport: i0, template: "<div class=\"netgrif-file-padding\">\n    <div #fileLabel class=\"file-field-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\">\n        {{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n    </div>\n    <div class=\"form-input button-icon-input full-width\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n         [ngClass]=\"{'form-input-disabled': formControlRef.disabled, 'form-input-error': dataField.isInvalid(formControlRef)}\"\n         [ngStyle]=\"{\n                    '-webkit-clip-path': getCutProperty(fileLabel),\n                    'clip-path': getCutProperty(fileLabel)\n            }\">\n        <button mat-icon-button matPrefix\n                [disabled]=\"formControlRef.disabled\"\n                color=\"primary\"\n                (click)=\"chooseFile()\"\n                [matTooltip]=\"'dataField.file.clickToUpload' | translate\"\n                [class.do-not-click]=\"state.uploading\">\n            <mat-icon>file_upload</mat-icon>\n        </button>\n        <span *ngIf=\"uploadedFiles.length === 0\" (click)=\"chooseFile()\" fxFlex\n              [ngClass]=\"{'no-cursor': formControlRef.disabled}\"\n              class=\"input-placeholder input-name-ellipsis\">{{constructDisplayName()}}</span>\n        <div *ngIf=\"uploadedFiles.length !== 0\" class=\"input-name-ellipsis\" fxFlex>\n            <div *ngFor=\"let name of uploadedFiles\" fxLayoutAlign=\"start center\">\n                    <span (click)=\"download(name)\" fxFlex\n                          [matTooltip]=\"'dataField.file.clickToDownload' | translate : {fileName: name}\"\n                          class=\"input-name-ellipsis file-list-item\">{{name}}</span>\n                <button (click)=\"deleteFile(name)\" [matTooltip]=\"'dataField.file.clickToDelete' | translate\"\n                        mat-icon-button\n                        *ngIf=\"!formControlRef.disabled\">\n                    <mat-icon color=\"warn\">close</mat-icon>\n                </button>\n            </div>\n        </div>\n    </div>\n    <mat-progress-bar *ngIf=\"state.uploading || state.downloading\" color=\"primary\" [value]=\"state.progress\"\n                      [mode]=\"state.uploading ? 'determinate' : 'indeterminate'\"\n                      class=\"margin-bottom-default\"></mat-progress-bar>\n    <input type=\"file\" #fileUploadInput name=\"fileUpload\" [multiple]=\"true\"\n           accept=\"{{dataField.allowTypes}}\" class=\"invisible-input\"/>\n    <input type=\"text\" [formControl]=\"formControlRef\" class=\"invisible-input\">\n    <mat-hint class=\"file-hint-error\" [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\"\n              *ngIf=\"!dataField.isInvalid(formControlRef) && hasHint()\">{{dataField.description}}</mat-hint>\n    <mat-error class=\"file-hint-error\"\n               *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</div>\n", styles: [".invisible-input{display:none}.margin-bottom-default{margin-bottom:8px}.do-not-click:hover{cursor:not-allowed}.input-name-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.input-placeholder{color:#64748b}.button-icon-input{padding:2px!important}.full-width{width:100%;min-width:100%}.form-input{background:#FFFFFF;color:#64748b;outline:none;border:1px solid #64748B;text-align:left;font-size:14px;line-height:20px;border-radius:6px;min-width:5px;padding:8px 15px;box-sizing:border-box;min-height:44px}.form-input:hover{border-width:2px;padding:1px!important}.form-input-disabled{background:transparent!important;border-color:#cbd5e1!important}.form-input-disabled:hover{border-width:1px;padding:2px!important}.placeholder{color:#0000006b!important}.file-hint-error{font-size:75%;padding:0 1em;width:unset;position:absolute;margin-top:.5em;top:calc(100% - 2em)}.no-cursor{cursor:default!important;color:#64748b}.border-default{border-width:1px;border-style:solid;border-color:#000}@media only screen and (max-width: 959.99px){.input-name-ellipsis{word-break:break-word;white-space:normal;overflow-y:auto}}.file-field-label{transform:translate(.4em,-.45em) scale(.75);transform-origin:left;color:#64748b;background:transparent;width:-moz-fit-content;width:fit-content;padding:0 .5em;z-index:5;height:0;position:relative}.netgrif-file-padding{padding-bottom:13px;position:relative}\n"], components: [{ type: RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i2$1.MatPrefix, selector: "[matPrefix]" }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1$2.TranslatePipe } });
+FileListDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FileListDefaultFieldComponent, selector: "nc-file-list-default-field", usesInheritance: true, ngImport: i0, template: "<div class=\"netgrif-file-padding\">\n    <div #fileLabel class=\"file-field-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\">\n        {{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n    </div>\n    <div class=\"form-input button-icon-input full-width\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n         [ngClass]=\"{'form-input-disabled': formControlRef.disabled, 'form-input-error': dataField.isInvalid(formControlRef)}\"\n         [ngStyle]=\"{\n                    '-webkit-clip-path': getCutProperty(fileLabel),\n                    'clip-path': getCutProperty(fileLabel)\n            }\">\n        <button mat-icon-button matPrefix\n                class=\"file-button-size\"\n                [disabled]=\"formControlRef.disabled\"\n                color=\"primary\"\n                (click)=\"chooseFile()\"\n                [matTooltip]=\"'dataField.file.clickToUpload' | translate\"\n                [class.do-not-click]=\"state.uploading\">\n            <mat-icon>file_upload</mat-icon>\n        </button>\n        <span *ngIf=\"uploadedFiles.length === 0\" (click)=\"chooseFile()\" fxFlex\n              [ngClass]=\"{'no-cursor': formControlRef.disabled}\"\n              class=\"input-placeholder input-name-ellipsis\">{{constructDisplayName()}}</span>\n        <div *ngIf=\"uploadedFiles.length !== 0\" class=\"input-name-ellipsis\" fxFlex>\n            <div *ngFor=\"let name of uploadedFiles\" fxLayoutAlign=\"start center\">\n                    <span (click)=\"download(name)\" fxFlex\n                          [matTooltip]=\"'dataField.file.clickToDownload' | translate : {fileName: name}\"\n                          class=\"input-name-ellipsis file-list-item\">{{name}}</span>\n                <button (click)=\"deleteFile(name)\" [matTooltip]=\"'dataField.file.clickToDelete' | translate\"\n                        mat-icon-button\n                        *ngIf=\"!formControlRef.disabled\">\n                    <mat-icon color=\"warn\">close</mat-icon>\n                </button>\n            </div>\n        </div>\n    </div>\n    <mat-progress-bar *ngIf=\"state.uploading || state.downloading\" color=\"primary\" [value]=\"state.progress\"\n                      [mode]=\"state.uploading ? 'determinate' : 'indeterminate'\"\n                      class=\"margin-bottom-default\"></mat-progress-bar>\n    <input type=\"file\" #fileUploadInput name=\"fileUpload\" [multiple]=\"true\"\n           accept=\"{{dataField.allowTypes}}\" class=\"invisible-input\"/>\n    <input type=\"text\" [formControl]=\"formControlRef\" class=\"invisible-input\">\n    <mat-hint class=\"file-hint-error\" [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\"\n              *ngIf=\"!dataField.isInvalid(formControlRef) && hasHint()\">{{dataField.description}}</mat-hint>\n    <mat-error class=\"file-hint-error\"\n               *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</div>\n", styles: [".invisible-input{display:none}.margin-bottom-default{margin-bottom:8px}.do-not-click:hover{cursor:not-allowed}.input-name-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.input-placeholder{color:#64748b}.button-icon-input{padding:2px!important}.full-width{width:100%;min-width:100%}.form-input{background:#FFFFFF;color:#64748b;outline:none;border:1px solid #64748B;text-align:left;font-size:14px;line-height:20px;border-radius:6px;min-width:5px;padding:8px 15px;box-sizing:border-box;min-height:44px}.form-input:hover{border-width:2px;padding:1px!important}.form-input-disabled{background:transparent!important;border-color:#cbd5e1!important}.form-input-disabled:hover{border-width:1px;padding:2px!important}.placeholder{color:#0000006b!important}.file-hint-error{font-size:75%;padding:0 1em;width:unset;position:absolute;margin-top:.5em;top:calc(100% - 2em)}.no-cursor{cursor:default!important;color:#64748b}.border-default{border-width:1px;border-style:solid;border-color:#000}@media only screen and (max-width: 959.99px){.input-name-ellipsis{word-break:break-word;white-space:normal;overflow-y:auto}}.file-field-label{transform:translate(.4em,-.45em) scale(.75);transform-origin:left;color:#64748b;background:transparent;width:-moz-fit-content;width:fit-content;padding:0 .5em;z-index:5;height:0;position:relative}.netgrif-file-padding{padding-bottom:13px;position:relative}.file-button-size{height:38px;width:38px}\n"], components: [{ type: RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i10.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i2$1.MatPrefix, selector: "[matPrefix]" }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FileListDefaultFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nc-file-list-default-field', template: "<div class=\"netgrif-file-padding\">\n    <div #fileLabel class=\"file-field-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\">\n        {{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n    </div>\n    <div class=\"form-input button-icon-input full-width\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n         [ngClass]=\"{'form-input-disabled': formControlRef.disabled, 'form-input-error': dataField.isInvalid(formControlRef)}\"\n         [ngStyle]=\"{\n                    '-webkit-clip-path': getCutProperty(fileLabel),\n                    'clip-path': getCutProperty(fileLabel)\n            }\">\n        <button mat-icon-button matPrefix\n                [disabled]=\"formControlRef.disabled\"\n                color=\"primary\"\n                (click)=\"chooseFile()\"\n                [matTooltip]=\"'dataField.file.clickToUpload' | translate\"\n                [class.do-not-click]=\"state.uploading\">\n            <mat-icon>file_upload</mat-icon>\n        </button>\n        <span *ngIf=\"uploadedFiles.length === 0\" (click)=\"chooseFile()\" fxFlex\n              [ngClass]=\"{'no-cursor': formControlRef.disabled}\"\n              class=\"input-placeholder input-name-ellipsis\">{{constructDisplayName()}}</span>\n        <div *ngIf=\"uploadedFiles.length !== 0\" class=\"input-name-ellipsis\" fxFlex>\n            <div *ngFor=\"let name of uploadedFiles\" fxLayoutAlign=\"start center\">\n                    <span (click)=\"download(name)\" fxFlex\n                          [matTooltip]=\"'dataField.file.clickToDownload' | translate : {fileName: name}\"\n                          class=\"input-name-ellipsis file-list-item\">{{name}}</span>\n                <button (click)=\"deleteFile(name)\" [matTooltip]=\"'dataField.file.clickToDelete' | translate\"\n                        mat-icon-button\n                        *ngIf=\"!formControlRef.disabled\">\n                    <mat-icon color=\"warn\">close</mat-icon>\n                </button>\n            </div>\n        </div>\n    </div>\n    <mat-progress-bar *ngIf=\"state.uploading || state.downloading\" color=\"primary\" [value]=\"state.progress\"\n                      [mode]=\"state.uploading ? 'determinate' : 'indeterminate'\"\n                      class=\"margin-bottom-default\"></mat-progress-bar>\n    <input type=\"file\" #fileUploadInput name=\"fileUpload\" [multiple]=\"true\"\n           accept=\"{{dataField.allowTypes}}\" class=\"invisible-input\"/>\n    <input type=\"text\" [formControl]=\"formControlRef\" class=\"invisible-input\">\n    <mat-hint class=\"file-hint-error\" [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\"\n              *ngIf=\"!dataField.isInvalid(formControlRef) && hasHint()\">{{dataField.description}}</mat-hint>\n    <mat-error class=\"file-hint-error\"\n               *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</div>\n", styles: [".invisible-input{display:none}.margin-bottom-default{margin-bottom:8px}.do-not-click:hover{cursor:not-allowed}.input-name-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.input-placeholder{color:#64748b}.button-icon-input{padding:2px!important}.full-width{width:100%;min-width:100%}.form-input{background:#FFFFFF;color:#64748b;outline:none;border:1px solid #64748B;text-align:left;font-size:14px;line-height:20px;border-radius:6px;min-width:5px;padding:8px 15px;box-sizing:border-box;min-height:44px}.form-input:hover{border-width:2px;padding:1px!important}.form-input-disabled{background:transparent!important;border-color:#cbd5e1!important}.form-input-disabled:hover{border-width:1px;padding:2px!important}.placeholder{color:#0000006b!important}.file-hint-error{font-size:75%;padding:0 1em;width:unset;position:absolute;margin-top:.5em;top:calc(100% - 2em)}.no-cursor{cursor:default!important;color:#64748b}.border-default{border-width:1px;border-style:solid;border-color:#000}@media only screen and (max-width: 959.99px){.input-name-ellipsis{word-break:break-word;white-space:normal;overflow-y:auto}}.file-field-label{transform:translate(.4em,-.45em) scale(.75);transform-origin:left;color:#64748b;background:transparent;width:-moz-fit-content;width:fit-content;padding:0 .5em;z-index:5;height:0;position:relative}.netgrif-file-padding{padding-bottom:13px;position:relative}\n"] }]
+            args: [{ selector: 'nc-file-list-default-field', template: "<div class=\"netgrif-file-padding\">\n    <div #fileLabel class=\"file-field-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\">\n        {{dataField.title}}\n        <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n    </div>\n    <div class=\"form-input button-icon-input full-width\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n         [ngClass]=\"{'form-input-disabled': formControlRef.disabled, 'form-input-error': dataField.isInvalid(formControlRef)}\"\n         [ngStyle]=\"{\n                    '-webkit-clip-path': getCutProperty(fileLabel),\n                    'clip-path': getCutProperty(fileLabel)\n            }\">\n        <button mat-icon-button matPrefix\n                class=\"file-button-size\"\n                [disabled]=\"formControlRef.disabled\"\n                color=\"primary\"\n                (click)=\"chooseFile()\"\n                [matTooltip]=\"'dataField.file.clickToUpload' | translate\"\n                [class.do-not-click]=\"state.uploading\">\n            <mat-icon>file_upload</mat-icon>\n        </button>\n        <span *ngIf=\"uploadedFiles.length === 0\" (click)=\"chooseFile()\" fxFlex\n              [ngClass]=\"{'no-cursor': formControlRef.disabled}\"\n              class=\"input-placeholder input-name-ellipsis\">{{constructDisplayName()}}</span>\n        <div *ngIf=\"uploadedFiles.length !== 0\" class=\"input-name-ellipsis\" fxFlex>\n            <div *ngFor=\"let name of uploadedFiles\" fxLayoutAlign=\"start center\">\n                    <span (click)=\"download(name)\" fxFlex\n                          [matTooltip]=\"'dataField.file.clickToDownload' | translate : {fileName: name}\"\n                          class=\"input-name-ellipsis file-list-item\">{{name}}</span>\n                <button (click)=\"deleteFile(name)\" [matTooltip]=\"'dataField.file.clickToDelete' | translate\"\n                        mat-icon-button\n                        *ngIf=\"!formControlRef.disabled\">\n                    <mat-icon color=\"warn\">close</mat-icon>\n                </button>\n            </div>\n        </div>\n    </div>\n    <mat-progress-bar *ngIf=\"state.uploading || state.downloading\" color=\"primary\" [value]=\"state.progress\"\n                      [mode]=\"state.uploading ? 'determinate' : 'indeterminate'\"\n                      class=\"margin-bottom-default\"></mat-progress-bar>\n    <input type=\"file\" #fileUploadInput name=\"fileUpload\" [multiple]=\"true\"\n           accept=\"{{dataField.allowTypes}}\" class=\"invisible-input\"/>\n    <input type=\"text\" [formControl]=\"formControlRef\" class=\"invisible-input\">\n    <mat-hint class=\"file-hint-error\" [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\"\n              *ngIf=\"!dataField.isInvalid(formControlRef) && hasHint()\">{{dataField.description}}</mat-hint>\n    <mat-error class=\"file-hint-error\"\n               *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</div>\n", styles: [".invisible-input{display:none}.margin-bottom-default{margin-bottom:8px}.do-not-click:hover{cursor:not-allowed}.input-name-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.input-placeholder{color:#64748b}.button-icon-input{padding:2px!important}.full-width{width:100%;min-width:100%}.form-input{background:#FFFFFF;color:#64748b;outline:none;border:1px solid #64748B;text-align:left;font-size:14px;line-height:20px;border-radius:6px;min-width:5px;padding:8px 15px;box-sizing:border-box;min-height:44px}.form-input:hover{border-width:2px;padding:1px!important}.form-input-disabled{background:transparent!important;border-color:#cbd5e1!important}.form-input-disabled:hover{border-width:1px;padding:2px!important}.placeholder{color:#0000006b!important}.file-hint-error{font-size:75%;padding:0 1em;width:unset;position:absolute;margin-top:.5em;top:calc(100% - 2em)}.no-cursor{cursor:default!important;color:#64748b}.border-default{border-width:1px;border-style:solid;border-color:#000}@media only screen and (max-width: 959.99px){.input-name-ellipsis{word-break:break-word;white-space:normal;overflow-y:auto}}.file-field-label{transform:translate(.4em,-.45em) scale(.75);transform-origin:left;color:#64748b;background:transparent;width:-moz-fit-content;width:fit-content;padding:0 .5em;z-index:5;height:0;position:relative}.netgrif-file-padding{padding-bottom:13px;position:relative}.file-button-size{height:38px;width:38px}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i1.TaskResourceService }, { type: i1.LoggerService }, { type: i1.SnackBarService }, { type: i1$2.TranslateService }, { type: i1.EventService }, { type: undefined, decorators: [{
                         type: Optional
@@ -2213,10 +2259,10 @@ class UserDefaultFieldComponent extends AbstractUserDefaultFieldComponent {
     }
 }
 UserDefaultFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UserDefaultFieldComponent, deps: [{ token: i1$3.MatDialog }, { token: i1.SnackBarService }, { token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-UserDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UserDefaultFieldComponent, selector: "nc-user-default-field", usesInheritance: true, ngImport: i0, template: "<div fxLayoutAlign=\"center center\" fxLayout=\"row\">\n    <div fxFlex=\"100\" class=\"netgrif-user-padding\">\n        <div #userLabel class=\"user-field-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\">\n            {{dataField.title}}\n            <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n        </div>\n        <div class=\"form-input button-icon-input full-width\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n             [ngClass]=\"{'form-input-disabled': formControlRef.disabled, 'form-input-error': dataField.isInvalid(formControlRef)}\"\n             [ngStyle]=\"{\n                    '-webkit-clip-path': getCutProperty(userLabel),\n                    'clip-path': getCutProperty(userLabel)\n            }\">\n            <button mat-icon-button\n                    *ngIf=\"!!dataField.value\"\n                    [disabled]=\"formControlRef.disabled\"\n                    color=\"primary\"\n                    (click)=\"selectUser()\"\n                    [matTooltip]=\"'dataField.file.clickToUpload' | translate\"\n                    [class.do-not-click]=\"formControlRef.disabled\">\n                <mat-icon>how_to_reg</mat-icon>\n            </button>\n            <button mat-icon-button\n                    *ngIf=\"!dataField.value\"\n                    [disabled]=\"formControlRef.disabled\"\n                    color=\"primary\"\n                    (click)=\"selectUser()\"\n                    [matTooltip]=\"'dataField.file.clickToUpload' | translate\"\n                    [class.do-not-click]=\"formControlRef.disabled\">\n                <mat-icon>person_add</mat-icon>\n            </button>\n            <span fxFlex class=\"input-name-ellipsis\" [ngClass]=\"{'input-placeholder': !!dataField.value, 'no-cursor': !!dataField.value && formControlRef.disabled}\">\n                    {{!!dataField.value ? dataField.value.fullName : 'dataField.user.selectUser' | translate}}</span>\n        </div>\n        <mat-hint class=\"user-hint-error\" [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\"\n                  *ngIf=\"!dataField.isInvalid(formControlRef) && hasHint()\">{{dataField.description}}</mat-hint>\n        <mat-error class=\"user-hint-error\"\n                   *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n    </div>\n</div>\n", styles: [".do-not-click:hover{cursor:not-allowed}.input-name-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input-placeholder{color:#64748b}.button-icon-input{padding:2px!important}.full-width{width:100%;min-width:100%}.form-input{background:#FFFFFF;color:#64748b;outline:none;border:1px solid #64748B;text-align:left;font-size:14px;line-height:20px;border-radius:6px;min-width:5px;padding:8px 15px;box-sizing:border-box;height:44px}.form-input:hover{border-width:2px;padding-left:1px!important}.form-input-disabled{background:transparent!important;border-color:#cbd5e1!important}.form-input-disabled:hover{border-width:1px;padding:2px!important}.user-hint-error{font-size:75%;padding:0 1em;width:unset;position:absolute;margin-top:.5em;top:calc(100% - 2em)}.image-preview{width:auto;height:auto;cursor:pointer}.no-cursor{cursor:default!important;color:#64748b}.border-default{border-width:1px;border-style:solid;border-color:#000}@media only screen and (max-width: 959.99px){.input-name-ellipsis{word-break:break-word;white-space:normal;overflow-y:auto;max-height:40px}}.user-field-label{transform:translate(.4em,-.45em) scale(.75);transform-origin:left;color:#64748b;background:transparent;width:-moz-fit-content;width:fit-content;padding:0 .5em;z-index:5;height:0;position:relative}.netgrif-user-padding{padding-bottom:13px;position:relative}\n"], components: [{ type: RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1$2.TranslatePipe } });
+UserDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UserDefaultFieldComponent, selector: "nc-user-default-field", usesInheritance: true, ngImport: i0, template: "<div fxLayoutAlign=\"center center\" fxLayout=\"row\">\n    <div fxFlex=\"100\" class=\"netgrif-user-padding\">\n        <div #userLabel class=\"user-field-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\">\n            {{dataField.title}}\n            <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n        </div>\n        <div class=\"form-input button-icon-input full-width\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n             [ngClass]=\"{'form-input-disabled': formControlRef.disabled, 'form-input-error': dataField.isInvalid(formControlRef)}\"\n             [ngStyle]=\"{\n                    '-webkit-clip-path': getCutProperty(userLabel),\n                    'clip-path': getCutProperty(userLabel)\n            }\">\n            <button mat-icon-button\n                    *ngIf=\"!!dataField.value\"\n                    [disabled]=\"formControlRef.disabled\"\n                    color=\"primary\"\n                    (click)=\"selectUser()\"\n                    [matTooltip]=\"'dataField.file.clickToUpload' | translate\"\n                    [class.do-not-click]=\"formControlRef.disabled\">\n                <mat-icon (click)='deleteUser()' color='warn' *ngIf='!formControlRef.disabled'>close</mat-icon>\n            </button>\n            <button mat-icon-button\n                    *ngIf=\"!dataField.value\"\n                    [disabled]=\"formControlRef.disabled\"\n                    color=\"primary\"\n                    (click)=\"selectUser()\"\n                    [matTooltip]=\"'dataField.file.clickToUpload' | translate\"\n                    [class.do-not-click]=\"formControlRef.disabled\">\n                <mat-icon>person_add</mat-icon>\n            </button>\n            <span fxFlex class=\"input-name-ellipsis\" [ngClass]=\"{'input-placeholder': !!dataField.value, 'no-cursor': !!dataField.value && formControlRef.disabled}\">\n                    {{!!dataField.value ? dataField.value.fullName : 'dataField.user.selectUser' | translate}}</span>\n        </div>\n        <mat-hint class=\"user-hint-error\" [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\"\n                  *ngIf=\"!dataField.isInvalid(formControlRef) && hasHint()\">{{dataField.description}}</mat-hint>\n        <mat-error class=\"user-hint-error\"\n                   *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n    </div>\n</div>\n", styles: [".do-not-click:hover{cursor:not-allowed}.input-name-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input-placeholder{color:#64748b}.button-icon-input{padding:2px!important}.full-width{width:100%;min-width:100%}.form-input{background:#FFFFFF;color:#64748b;outline:none;border:1px solid #64748B;text-align:left;font-size:14px;line-height:20px;border-radius:6px;min-width:5px;padding:8px 15px;box-sizing:border-box;height:44px}.form-input:hover{border-width:2px;padding-left:1px!important}.form-input-disabled{background:transparent!important;border-color:#cbd5e1!important}.form-input-disabled:hover{border-width:1px;padding:2px!important}.user-hint-error{font-size:75%;padding:0 1em;width:unset;position:absolute;margin-top:.5em;top:calc(100% - 2em)}.image-preview{width:auto;height:auto;cursor:pointer}.no-cursor{cursor:default!important;color:#64748b}.border-default{border-width:1px;border-style:solid;border-color:#000}@media only screen and (max-width: 959.99px){.input-name-ellipsis{word-break:break-word;white-space:normal;overflow-y:auto;max-height:40px}}.user-field-label{transform:translate(.4em,-.45em) scale(.75);transform-origin:left;color:#64748b;background:transparent;width:-moz-fit-content;width:fit-content;padding:0 .5em;z-index:5;height:0;position:relative}.netgrif-user-padding{padding-bottom:13px;position:relative}\n"], components: [{ type: RequiredLabelComponent, selector: "nc-required-label", inputs: ["isIn"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UserDefaultFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nc-user-default-field', template: "<div fxLayoutAlign=\"center center\" fxLayout=\"row\">\n    <div fxFlex=\"100\" class=\"netgrif-user-padding\">\n        <div #userLabel class=\"user-field-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\">\n            {{dataField.title}}\n            <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n        </div>\n        <div class=\"form-input button-icon-input full-width\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n             [ngClass]=\"{'form-input-disabled': formControlRef.disabled, 'form-input-error': dataField.isInvalid(formControlRef)}\"\n             [ngStyle]=\"{\n                    '-webkit-clip-path': getCutProperty(userLabel),\n                    'clip-path': getCutProperty(userLabel)\n            }\">\n            <button mat-icon-button\n                    *ngIf=\"!!dataField.value\"\n                    [disabled]=\"formControlRef.disabled\"\n                    color=\"primary\"\n                    (click)=\"selectUser()\"\n                    [matTooltip]=\"'dataField.file.clickToUpload' | translate\"\n                    [class.do-not-click]=\"formControlRef.disabled\">\n                <mat-icon>how_to_reg</mat-icon>\n            </button>\n            <button mat-icon-button\n                    *ngIf=\"!dataField.value\"\n                    [disabled]=\"formControlRef.disabled\"\n                    color=\"primary\"\n                    (click)=\"selectUser()\"\n                    [matTooltip]=\"'dataField.file.clickToUpload' | translate\"\n                    [class.do-not-click]=\"formControlRef.disabled\">\n                <mat-icon>person_add</mat-icon>\n            </button>\n            <span fxFlex class=\"input-name-ellipsis\" [ngClass]=\"{'input-placeholder': !!dataField.value, 'no-cursor': !!dataField.value && formControlRef.disabled}\">\n                    {{!!dataField.value ? dataField.value.fullName : 'dataField.user.selectUser' | translate}}</span>\n        </div>\n        <mat-hint class=\"user-hint-error\" [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\"\n                  *ngIf=\"!dataField.isInvalid(formControlRef) && hasHint()\">{{dataField.description}}</mat-hint>\n        <mat-error class=\"user-hint-error\"\n                   *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n    </div>\n</div>\n", styles: [".do-not-click:hover{cursor:not-allowed}.input-name-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input-placeholder{color:#64748b}.button-icon-input{padding:2px!important}.full-width{width:100%;min-width:100%}.form-input{background:#FFFFFF;color:#64748b;outline:none;border:1px solid #64748B;text-align:left;font-size:14px;line-height:20px;border-radius:6px;min-width:5px;padding:8px 15px;box-sizing:border-box;height:44px}.form-input:hover{border-width:2px;padding-left:1px!important}.form-input-disabled{background:transparent!important;border-color:#cbd5e1!important}.form-input-disabled:hover{border-width:1px;padding:2px!important}.user-hint-error{font-size:75%;padding:0 1em;width:unset;position:absolute;margin-top:.5em;top:calc(100% - 2em)}.image-preview{width:auto;height:auto;cursor:pointer}.no-cursor{cursor:default!important;color:#64748b}.border-default{border-width:1px;border-style:solid;border-color:#000}@media only screen and (max-width: 959.99px){.input-name-ellipsis{word-break:break-word;white-space:normal;overflow-y:auto;max-height:40px}}.user-field-label{transform:translate(.4em,-.45em) scale(.75);transform-origin:left;color:#64748b;background:transparent;width:-moz-fit-content;width:fit-content;padding:0 .5em;z-index:5;height:0;position:relative}.netgrif-user-padding{padding-bottom:13px;position:relative}\n"] }]
+            args: [{ selector: 'nc-user-default-field', template: "<div fxLayoutAlign=\"center center\" fxLayout=\"row\">\n    <div fxFlex=\"100\" class=\"netgrif-user-padding\">\n        <div #userLabel class=\"user-field-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\">\n            {{dataField.title}}\n            <nc-required-label *ngIf=\"dataField.behavior.required\" [isIn]=\"!dataField.disabled\"></nc-required-label>\n        </div>\n        <div class=\"form-input button-icon-input full-width\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n             [ngClass]=\"{'form-input-disabled': formControlRef.disabled, 'form-input-error': dataField.isInvalid(formControlRef)}\"\n             [ngStyle]=\"{\n                    '-webkit-clip-path': getCutProperty(userLabel),\n                    'clip-path': getCutProperty(userLabel)\n            }\">\n            <button mat-icon-button\n                    *ngIf=\"!!dataField.value\"\n                    [disabled]=\"formControlRef.disabled\"\n                    color=\"primary\"\n                    (click)=\"selectUser()\"\n                    [matTooltip]=\"'dataField.file.clickToUpload' | translate\"\n                    [class.do-not-click]=\"formControlRef.disabled\">\n                <mat-icon (click)='deleteUser()' color='warn' *ngIf='!formControlRef.disabled'>close</mat-icon>\n            </button>\n            <button mat-icon-button\n                    *ngIf=\"!dataField.value\"\n                    [disabled]=\"formControlRef.disabled\"\n                    color=\"primary\"\n                    (click)=\"selectUser()\"\n                    [matTooltip]=\"'dataField.file.clickToUpload' | translate\"\n                    [class.do-not-click]=\"formControlRef.disabled\">\n                <mat-icon>person_add</mat-icon>\n            </button>\n            <span fxFlex class=\"input-name-ellipsis\" [ngClass]=\"{'input-placeholder': !!dataField.value, 'no-cursor': !!dataField.value && formControlRef.disabled}\">\n                    {{!!dataField.value ? dataField.value.fullName : 'dataField.user.selectUser' | translate}}</span>\n        </div>\n        <mat-hint class=\"user-hint-error\" [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\"\n                  *ngIf=\"!dataField.isInvalid(formControlRef) && hasHint()\">{{dataField.description}}</mat-hint>\n        <mat-error class=\"user-hint-error\"\n                   *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n    </div>\n</div>\n", styles: [".do-not-click:hover{cursor:not-allowed}.input-name-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.input-placeholder{color:#64748b}.button-icon-input{padding:2px!important}.full-width{width:100%;min-width:100%}.form-input{background:#FFFFFF;color:#64748b;outline:none;border:1px solid #64748B;text-align:left;font-size:14px;line-height:20px;border-radius:6px;min-width:5px;padding:8px 15px;box-sizing:border-box;height:44px}.form-input:hover{border-width:2px;padding-left:1px!important}.form-input-disabled{background:transparent!important;border-color:#cbd5e1!important}.form-input-disabled:hover{border-width:1px;padding:2px!important}.user-hint-error{font-size:75%;padding:0 1em;width:unset;position:absolute;margin-top:.5em;top:calc(100% - 2em)}.image-preview{width:auto;height:auto;cursor:pointer}.no-cursor{cursor:default!important;color:#64748b}.border-default{border-width:1px;border-style:solid;border-color:#000}@media only screen and (max-width: 959.99px){.input-name-ellipsis{word-break:break-word;white-space:normal;overflow-y:auto;max-height:40px}}.user-field-label{transform:translate(.4em,-.45em) scale(.75);transform-origin:left;color:#64748b;background:transparent;width:-moz-fit-content;width:fit-content;padding:0 .5em;z-index:5;height:0;position:relative}.netgrif-user-padding{padding-bottom:13px;position:relative}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i1$3.MatDialog }, { type: i1.SnackBarService }, { type: i1$2.TranslateService }, { type: undefined, decorators: [{
                         type: Optional
@@ -2234,11 +2280,14 @@ class MultiUserAssignDialogComponent {
         this._currentUsers = [];
         if (this._data) {
             this.injectedData = this._data;
-            this._currentUsers.push(...this.injectedData.value.userValues.values());
+            if (!!this.injectedData.value) {
+                this._currentUsers.push(...this.injectedData.value.userValues.values());
+            }
         }
     }
     get initiallySelectedUsers() {
-        return this.injectedData && this.injectedData.value ? [...this.injectedData.value.userValues.values()] : undefined;
+        var _a;
+        return ((_a = this.injectedData) === null || _a === void 0 ? void 0 : _a.value) ? [...this.injectedData.value.userValues.values()] : undefined;
     }
     get roles() {
         return this.injectedData ? this.injectedData.roles : [];
@@ -2295,10 +2344,10 @@ class UserListDefaultFieldComponent extends AbstractUserListDefaultFieldComponen
     }
 }
 UserListDefaultFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UserListDefaultFieldComponent, deps: [{ token: i1$3.MatDialog }, { token: i1.SnackBarService }, { token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-UserListDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UserListDefaultFieldComponent, selector: "nc-user-list-default-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" [ngClass]=\"{'netgrif-chip-fix' : dataField.value?.userValues?.size > 0}\" color=\"primary\">\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <button mat-icon-button matPrefix\n            [disabled]=\"formControlRef.disabled\"\n            color=\"primary\"\n            (click)=\"selectUser()\"\n            [matTooltip]=\"'dataField.user.selectUser' | translate\"\n            [class.do-not-click]=\"formControlRef.disabled\">\n        <mat-icon>how_to_reg</mat-icon>\n    </button>\n    <mat-chip-list #chipList aria-label=\"Autocomplete\" [formControl]=\"formControlRef\">\n        <mat-chip\n            *ngFor='let user of dataField.value.userValues | keyvalue' (removed)=\"deleteUser(user.key)\">\n            {{user.value.fullName}}\n            <button *ngIf=\"!formControlRef.disabled\" matChipRemove>\n                <mat-icon>cancel</mat-icon>\n            </button>\n        </mat-chip>\n        <input\n            aria-label=\"Autocomplete\"\n            matInput\n            #input\n            [placeholder]=\"dataField.placeholder\"\n            [required]=\"dataField.behavior.required\"\n            [matChipInputFor]=\"chipList\">\n    </mat-chip-list>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf='dataField.isInvalid(formControlRef)'>{{'dataField.validations.required' | translate}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$6.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i2$1.MatPrefix, selector: "[matPrefix]" }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i2$6.MatChipRemove, selector: "[matChipRemove]" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$6.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1$2.TranslatePipe, "keyvalue": i4$1.KeyValuePipe } });
+UserListDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UserListDefaultFieldComponent, selector: "nc-user-list-default-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" [ngClass]=\"{'netgrif-chip-fix' : dataField.value?.userValues?.size > 0}\" color=\"primary\">\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <button mat-icon-button matPrefix\n            [disabled]=\"formControlRef.disabled\"\n            color=\"primary\"\n            (click)=\"selectUser()\"\n            [matTooltip]=\"'dataField.user.selectUser' | translate\"\n            [class.do-not-click]=\"formControlRef.disabled\">\n        <mat-icon>how_to_reg</mat-icon>\n    </button>\n    <button mat-icon-button matPrefix\n            [disabled]='formControlRef.disabled || !dataField.value || dataField?.value?.userValues?.size === 0'\n            color='warn'\n            (click)='removeAll()'\n            [matTooltip]=\"'dataField.user.deleteAll' | translate\">\n        <mat-icon>delete_outline</mat-icon>\n    </button>\n    <mat-chip-list #chipList aria-label=\"Autocomplete\" [formControl]=\"formControlRef\">\n        <mat-chip\n            *ngFor='let user of dataField.value?.userValues | keyvalue' (removed)=\"deleteUser(user.key)\">\n            {{user.value.fullName}}\n            <button *ngIf=\"!formControlRef.disabled\" matChipRemove>\n                <mat-icon>cancel</mat-icon>\n            </button>\n        </mat-chip>\n        <input\n            aria-label=\"Autocomplete\"\n            matInput\n            #input\n            [placeholder]=\"dataField.placeholder\"\n            [required]=\"dataField.behavior.required\"\n            [matChipInputFor]=\"chipList\">\n    </mat-chip-list>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf='dataField.isInvalid(formControlRef)'>{{'dataField.validations.required' | translate}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$7.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i2$1.MatPrefix, selector: "[matPrefix]" }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$7.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i2$7.MatChipRemove, selector: "[matChipRemove]" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1$2.TranslatePipe, "keyvalue": i4$1.KeyValuePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UserListDefaultFieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nc-user-list-default-field', template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" [ngClass]=\"{'netgrif-chip-fix' : dataField.value?.userValues?.size > 0}\" color=\"primary\">\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <button mat-icon-button matPrefix\n            [disabled]=\"formControlRef.disabled\"\n            color=\"primary\"\n            (click)=\"selectUser()\"\n            [matTooltip]=\"'dataField.user.selectUser' | translate\"\n            [class.do-not-click]=\"formControlRef.disabled\">\n        <mat-icon>how_to_reg</mat-icon>\n    </button>\n    <mat-chip-list #chipList aria-label=\"Autocomplete\" [formControl]=\"formControlRef\">\n        <mat-chip\n            *ngFor='let user of dataField.value.userValues | keyvalue' (removed)=\"deleteUser(user.key)\">\n            {{user.value.fullName}}\n            <button *ngIf=\"!formControlRef.disabled\" matChipRemove>\n                <mat-icon>cancel</mat-icon>\n            </button>\n        </mat-chip>\n        <input\n            aria-label=\"Autocomplete\"\n            matInput\n            #input\n            [placeholder]=\"dataField.placeholder\"\n            [required]=\"dataField.behavior.required\"\n            [matChipInputFor]=\"chipList\">\n    </mat-chip-list>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf='dataField.isInvalid(formControlRef)'>{{'dataField.validations.required' | translate}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
+            args: [{ selector: 'nc-user-list-default-field', template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" [ngClass]=\"{'netgrif-chip-fix' : dataField.value?.userValues?.size > 0}\" color=\"primary\">\n    <mat-label class=\"netgrif-label\" [ngClass]=\"{'netgrif-label-disabled': formControlRef.disabled}\" *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <button mat-icon-button matPrefix\n            [disabled]=\"formControlRef.disabled\"\n            color=\"primary\"\n            (click)=\"selectUser()\"\n            [matTooltip]=\"'dataField.user.selectUser' | translate\"\n            [class.do-not-click]=\"formControlRef.disabled\">\n        <mat-icon>how_to_reg</mat-icon>\n    </button>\n    <button mat-icon-button matPrefix\n            [disabled]='formControlRef.disabled || !dataField.value || dataField?.value?.userValues?.size === 0'\n            color='warn'\n            (click)='removeAll()'\n            [matTooltip]=\"'dataField.user.deleteAll' | translate\">\n        <mat-icon>delete_outline</mat-icon>\n    </button>\n    <mat-chip-list #chipList aria-label=\"Autocomplete\" [formControl]=\"formControlRef\">\n        <mat-chip\n            *ngFor='let user of dataField.value?.userValues | keyvalue' (removed)=\"deleteUser(user.key)\">\n            {{user.value.fullName}}\n            <button *ngIf=\"!formControlRef.disabled\" matChipRemove>\n                <mat-icon>cancel</mat-icon>\n            </button>\n        </mat-chip>\n        <input\n            aria-label=\"Autocomplete\"\n            matInput\n            #input\n            [placeholder]=\"dataField.placeholder\"\n            [required]=\"dataField.behavior.required\"\n            [matChipInputFor]=\"chipList\">\n    </mat-chip-list>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error *ngIf='dataField.isInvalid(formControlRef)'>{{'dataField.validations.required' | translate}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i1$3.MatDialog }, { type: i1.SnackBarService }, { type: i1$2.TranslateService }, { type: undefined, decorators: [{
                         type: Optional
@@ -2350,7 +2399,7 @@ class SortModeComponent extends AbstractSortModeComponent {
     }
 }
 SortModeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SortModeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SortModeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SortModeComponent, selector: "nc-sort-mode", usesInheritance: true, ngImport: i0, template: "<div matSort (matSortChange)=\"sortHeaderChanged($event)\" fxFlex=\"100\" fxLayout=\"row\" fxLayoutAlign=\" center\">\n    <mat-checkbox *ngIf=\"approval && typeApproval === 'multichoice'\" [formControl]=\"approvalFormControl\" [indeterminate]=\"indeterminate\"\n                  (click)=\"$event.stopPropagation();\" color='primary' class=\"checkbox-padding\"></mat-checkbox>\n    <mat-icon *ngIf=\"approval && typeApproval === 'enumeration'\" color=\"warn\" (click)=\"setValue();$event.stopPropagation();\" class=\"checkbox-padding cursor-fix\">close</mat-icon>\n    <div [ngStyle]=\"{'min-width': getMinWidth()}\" *ngFor=\"let header of headerService.headerState.selectedHeaders$ | async; let i = index\" fxFlex\n         [fxHide.lt-xl]=\"i >= 4 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         [fxHide.lt-lg]=\"i >= 3 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         [fxHide.lt-md]=\"i >= 2 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         [fxHide.lt-sm]=\"i >= 1 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\">\n        <div *ngIf=\"!!header; then thenBlock else elseBlock\" fxFlex></div>\n        <ng-template #thenBlock>\n            <span fxFlex class=\"header-text\"\n                  mat-sort-header=\"{{i}}-{{header.uniqueId}}\">\n            {{ header.title | translate}}\n            </span>\n        </ng-template>\n        <ng-template #elseBlock>\n            <div fxFlex></div>\n        </ng-template>\n    </div>\n</div>\n", styles: [".header-text{font-style:normal;font-weight:500;font-size:14px;line-height:20px;letter-spacing:.1px;color:#64748b}.checkbox-padding{padding-right:12px}.cursor-fix{cursor:pointer}\n"], components: [{ type: i1$5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$9.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }], directives: [{ type: i3$9.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i7$1.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1$2.TranslatePipe } });
+SortModeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SortModeComponent, selector: "nc-sort-mode", usesInheritance: true, ngImport: i0, template: "<div matSort (matSortChange)=\"sortHeaderChanged($event)\" fxFlex=\"100\" fxLayout=\"row\" fxLayoutAlign=\" center\">\n    <mat-checkbox *ngIf=\"approval && typeApproval === 'multichoice'\" [formControl]=\"approvalFormControl\" [indeterminate]=\"indeterminate\"\n                  (click)=\"$event.stopPropagation();\" color='primary' class=\"checkbox-padding\"></mat-checkbox>\n    <mat-icon *ngIf=\"approval && typeApproval === 'enumeration'\" color=\"warn\" (click)=\"setValue();$event.stopPropagation();\" class=\"checkbox-padding cursor-fix\">close</mat-icon>\n    <div [ngStyle]=\"{'min-width': getMinWidth()}\" *ngFor=\"let header of headerService.headerState.selectedHeaders$ | async; let i = index\" fxFlex\n         [fxHide.lt-xl]=\"i >= 4 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         [fxHide.lt-lg]=\"i >= 3 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         [fxHide.lt-md]=\"i >= 2 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         [fxHide.lt-sm]=\"i >= 1 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\">\n        <div *ngIf=\"!!header; then thenBlock else elseBlock\" fxFlex></div>\n        <ng-template #thenBlock>\n            <span fxFlex class=\"header-text\"\n                  mat-sort-header=\"{{i}}-{{header.uniqueId}}\">\n            {{ header.title | translate}}\n            </span>\n        </ng-template>\n        <ng-template #elseBlock>\n            <div fxFlex></div>\n        </ng-template>\n    </div>\n</div>\n", styles: [".header-text{font-style:normal;font-weight:500;font-size:14px;line-height:20px;letter-spacing:.1px;color:#64748b}.checkbox-padding{padding-right:12px}.cursor-fix{cursor:pointer}\n"], components: [{ type: i1$5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$9.MatSortHeader, selector: "[mat-sort-header]", inputs: ["disabled", "mat-sort-header", "arrowPosition", "start", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }], directives: [{ type: i3$9.MatSort, selector: "[matSort]", inputs: ["matSortDisabled", "matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i6$2.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SortModeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-sort-mode', template: "<div matSort (matSortChange)=\"sortHeaderChanged($event)\" fxFlex=\"100\" fxLayout=\"row\" fxLayoutAlign=\" center\">\n    <mat-checkbox *ngIf=\"approval && typeApproval === 'multichoice'\" [formControl]=\"approvalFormControl\" [indeterminate]=\"indeterminate\"\n                  (click)=\"$event.stopPropagation();\" color='primary' class=\"checkbox-padding\"></mat-checkbox>\n    <mat-icon *ngIf=\"approval && typeApproval === 'enumeration'\" color=\"warn\" (click)=\"setValue();$event.stopPropagation();\" class=\"checkbox-padding cursor-fix\">close</mat-icon>\n    <div [ngStyle]=\"{'min-width': getMinWidth()}\" *ngFor=\"let header of headerService.headerState.selectedHeaders$ | async; let i = index\" fxFlex\n         [fxHide.lt-xl]=\"i >= 4 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         [fxHide.lt-lg]=\"i >= 3 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         [fxHide.lt-md]=\"i >= 2 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         [fxHide.lt-sm]=\"i >= 1 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\">\n        <div *ngIf=\"!!header; then thenBlock else elseBlock\" fxFlex></div>\n        <ng-template #thenBlock>\n            <span fxFlex class=\"header-text\"\n                  mat-sort-header=\"{{i}}-{{header.uniqueId}}\">\n            {{ header.title | translate}}\n            </span>\n        </ng-template>\n        <ng-template #elseBlock>\n            <div fxFlex></div>\n        </ng-template>\n    </div>\n</div>\n", styles: [".header-text{font-style:normal;font-weight:500;font-size:14px;line-height:20px;letter-spacing:.1px;color:#64748b}.checkbox-padding{padding-right:12px}.cursor-fix{cursor:pointer}\n"] }]
@@ -2372,7 +2421,7 @@ SearchModeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", vers
 SearchModeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SearchModeComponent, selector: "nc-search-mode", providers: [
         { provide: MAT_DATE_FORMATS, useValue: DATE_FORMAT },
         { provide: NGX_MAT_DATE_FORMATS, useValue: DATE_TIME_FORMAT }
-    ], usesInheritance: true, ngImport: i0, template: "<div fxFlex=\"100\" fxLayout=\"row\" fxLayoutAlign=\" center\">\n    <mat-checkbox *ngIf=\"approval && typeApproval === 'multichoice'\" [formControl]=\"approvalFormControl\" [indeterminate]=\"indeterminate\"\n                  (click)=\"$event.stopPropagation();\" color='primary' class=\"checkbox-padding\"></mat-checkbox>\n    <mat-icon *ngIf=\"approval && typeApproval === 'enumeration'\" color=\"warn\" (click)=\"setValue();$event.stopPropagation();\" class=\"checkbox-padding cursor-fix\">close</mat-icon>\n    <div *ngFor=\"let header of this.headerService.selectedHeaders$ | async; let i = index\"\n         [fxHide.lt-xl]=\"i >= 4 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         [fxHide.lt-lg]=\"i >= 3 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         [fxHide.lt-md]=\"i >= 2 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         [fxHide.lt-sm]=\"i >= 1 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         fxFlex [ngStyle]=\"{'min-width': getMinWidth()}\">\n        <div\n            *ngIf=\"!!header && header.fieldType !== 'button'; then thenBlock else elseBlock\"\n            fxFlex></div>\n        <ng-template #thenBlock>\n            <div fxLayout=\"row\" fxLayoutAlign=\" center\" fxFlex [ngSwitch]=\"header.fieldType\" class=\"netgrif-input netgrif-header-input netgrif-input-fix netgrif-zero-field-wrapper\">\n                <mat-form-field color=\"primary\" fxLayout=\"row\" fxLayoutAlign=\" center\" fxFlex *ngSwitchCase=\"'date'\" appearance=\"outline\">\n                    <mat-label>{{header.title | translate}}</mat-label>\n                    <input matInput autocomplete=\"off\"\n                           [matDatepicker]=\"datepicker\"\n                           [formControl]=\"formControls[i]\"\n                           [placeholder]=\"'headers.date' | translate\"\n                           (click)=\"datepicker.open()\"\n                           (keydown.enter)=\"datepicker.close()\">\n<!--                    <mat-datepicker-toggle matPrefix [for]=\"datepicker\"></mat-datepicker-toggle>-->\n                    <mat-datepicker #datepicker></mat-datepicker>\n                </mat-form-field>\n                <mat-form-field color=\"primary\" fxLayout=\"row\" fxLayoutAlign=\" center\" fxFlex *ngSwitchCase=\"'dateTime'\"\n                                appearance=\"outline\">\n                    <mat-label>{{header.title | translate}}</mat-label>\n                    <input matInput autocomplete=\"off\"\n                           [ngxMatDatetimePicker]=\"datetimepicker\"\n                           [formControl]=\"formControls[i]\"\n                           [placeholder]=\"'headers.dateTime' | translate\"\n                           (click)=\"datetimepicker.open()\"\n                           (keydown.enter)=\"datetimepicker.close()\">\n<!--                    <mat-datepicker-toggle matPrefix [for]=\"datetimepicker\"></mat-datepicker-toggle>-->\n                    <ngx-mat-datetime-picker #datetimepicker\n                                             [showSpinners]=\"true\"\n                                             [showSeconds]=\"false\"\n                                             [stepHour]=\"1\"\n                                             [stepMinute]=\"5\"\n                                             [color]=\"'primary'\"\n                                             [enableMeridian]=\"false\">\n                    </ngx-mat-datetime-picker>\n                </mat-form-field>\n\n                <mat-form-field color=\"primary\" fxLayout=\"row\" fxLayoutAlign=\" center\" fxFlex *ngSwitchCase=\"'number'\" appearance=\"outline\">\n                    <mat-label>{{header.title | translate}}</mat-label>\n                    <input matInput type=\"number\" [formControl]=\"formControls[i]\">\n                </mat-form-field>\n\n                <mat-form-field color=\"primary\" fxLayout=\"row\" fxLayoutAlign=\" center\" fxFlex *ngSwitchCase=\"'boolean'\" appearance=\"outline\">\n                    <mat-label>{{header.title | translate}}</mat-label>\n                    <mat-select matInput [formControl]=\"formControls[i]\">\n                        <mat-option>---</mat-option>\n                        <mat-option [value]=\"true\">{{'dataField.values.boolean.true' | translate}}</mat-option>\n                    </mat-select>\n                </mat-form-field>\n\n                <mat-form-field color=\"primary\" fxLayout=\"row\" fxLayoutAlign=\" center\" fxFlex *ngSwitchCase=\"'user'\"  appearance=\"outline\">\n                    <mat-label>{{header.title | translate}}</mat-label>\n                    <input matInput (click)=\"selectUser(i)\" autocomplete=\"false\"\n                            [formControl]=\"formControls[i]\">\n                </mat-form-field>\n\n                <mat-form-field color=\"primary\" fxLayout=\"row\" fxLayoutAlign=\" center\" fxFlex *ngSwitchDefault\n                                appearance=\"outline\">\n                    <mat-label>{{header.title | translate}}</mat-label>\n                    <input matInput [formControl]=\"formControls[i]\">\n                </mat-form-field>\n            </div>\n        </ng-template>\n\n        <ng-template #elseBlock>\n            <div fxFlex></div>\n        </ng-template>\n    </div>\n</div>\n", styles: [".checkbox-padding{padding-right:12px}.cursor-fix{cursor:pointer}\n"], components: [{ type: i1$5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i5$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i6$2.NgxMatDatetimePicker, selector: "ngx-mat-datetime-picker", inputs: ["calendarHeaderComponent", "startAt", "startView", "defaultColor", "color", "touchUi", "hideTime", "disabled", "panelClass", "dateClass", "opened", "showSpinners", "showSeconds", "stepHour", "stepMinute", "stepSecond", "enableMeridian", "disableMinute", "defaultTime"], outputs: ["yearSelected", "monthSelected", "opened", "closed"], exportAs: ["ngxMatDatetimePicker"] }, { type: i2$5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7$1.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6$2.NgxMatDatetimeInput, selector: "input[ngxMatDatetimePicker]", inputs: ["ngxMatDatetimePicker", "ngxMatDatetimePickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["ngxMatDatetimePickerInput"] }, { type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i4$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "async": i4$1.AsyncPipe, "translate": i1$2.TranslatePipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div fxFlex=\"100\" fxLayout=\"row\" fxLayoutAlign=\" center\">\n    <mat-checkbox *ngIf=\"approval && typeApproval === 'multichoice'\" [formControl]=\"approvalFormControl\" [indeterminate]=\"indeterminate\"\n                  (click)=\"$event.stopPropagation();\" color='primary' class=\"checkbox-padding\"></mat-checkbox>\n    <mat-icon *ngIf=\"approval && typeApproval === 'enumeration'\" color=\"warn\" (click)=\"setValue();$event.stopPropagation();\" class=\"checkbox-padding cursor-fix\">close</mat-icon>\n    <div *ngFor=\"let header of this.headerService.selectedHeaders$ | async; let i = index\"\n         [fxHide.lt-xl]=\"i >= 4 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         [fxHide.lt-lg]=\"i >= 3 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         [fxHide.lt-md]=\"i >= 2 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         [fxHide.lt-sm]=\"i >= 1 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         fxFlex [ngStyle]=\"{'min-width': getMinWidth()}\">\n        <div\n            *ngIf=\"!!header && header.fieldType !== 'button'; then thenBlock else elseBlock\"\n            fxFlex></div>\n        <ng-template #thenBlock>\n            <div fxLayout=\"row\" fxLayoutAlign=\" center\" fxFlex [ngSwitch]=\"header.fieldType\" class=\"netgrif-input netgrif-header-input netgrif-input-fix netgrif-zero-field-wrapper\">\n                <mat-form-field color=\"primary\" fxLayout=\"row\" fxLayoutAlign=\" center\" fxFlex *ngSwitchCase=\"'date'\" appearance=\"outline\">\n                    <mat-label>{{header.title | translate}}</mat-label>\n                    <input matInput autocomplete=\"off\"\n                           [matDatepicker]=\"datepicker\"\n                           [formControl]=\"formControls[i]\"\n                           [placeholder]=\"'headers.date' | translate\"\n                           (click)=\"datepicker.open()\"\n                           (keydown.enter)=\"datepicker.close()\">\n<!--                    <mat-datepicker-toggle matPrefix [for]=\"datepicker\"></mat-datepicker-toggle>-->\n                    <mat-datepicker #datepicker></mat-datepicker>\n                </mat-form-field>\n                <mat-form-field color=\"primary\" fxLayout=\"row\" fxLayoutAlign=\" center\" fxFlex *ngSwitchCase=\"'dateTime'\"\n                                appearance=\"outline\">\n                    <mat-label>{{header.title | translate}}</mat-label>\n                    <input matInput autocomplete=\"off\"\n                           [ngxMatDatetimePicker]=\"datetimepicker\"\n                           [formControl]=\"formControls[i]\"\n                           [placeholder]=\"'headers.dateTime' | translate\"\n                           (click)=\"datetimepicker.open()\"\n                           (keydown.enter)=\"datetimepicker.close()\">\n<!--                    <mat-datepicker-toggle matPrefix [for]=\"datetimepicker\"></mat-datepicker-toggle>-->\n                    <ngx-mat-datetime-picker #datetimepicker\n                                             [showSpinners]=\"true\"\n                                             [showSeconds]=\"false\"\n                                             [stepHour]=\"1\"\n                                             [stepMinute]=\"5\"\n                                             [color]=\"'primary'\"\n                                             [enableMeridian]=\"false\">\n                    </ngx-mat-datetime-picker>\n                </mat-form-field>\n\n                <mat-form-field color=\"primary\" fxLayout=\"row\" fxLayoutAlign=\" center\" fxFlex *ngSwitchCase=\"'number'\" appearance=\"outline\">\n                    <mat-label>{{header.title | translate}}</mat-label>\n                    <input matInput type=\"number\" [formControl]=\"formControls[i]\">\n                </mat-form-field>\n\n                <mat-form-field color=\"primary\" fxLayout=\"row\" fxLayoutAlign=\" center\" fxFlex *ngSwitchCase=\"'boolean'\" appearance=\"outline\">\n                    <mat-label>{{header.title | translate}}</mat-label>\n                    <mat-select matInput [formControl]=\"formControls[i]\">\n                        <mat-option>---</mat-option>\n                        <mat-option [value]=\"true\">{{'dataField.values.boolean.true' | translate}}</mat-option>\n                    </mat-select>\n                </mat-form-field>\n\n                <mat-form-field color=\"primary\" fxLayout=\"row\" fxLayoutAlign=\" center\" fxFlex *ngSwitchCase=\"'user'\"  appearance=\"outline\">\n                    <mat-label>{{header.title | translate}}</mat-label>\n                    <input matInput (click)=\"selectUser(i)\" autocomplete=\"false\"\n                            [formControl]=\"formControls[i]\">\n                </mat-form-field>\n\n                <mat-form-field color=\"primary\" fxLayout=\"row\" fxLayoutAlign=\" center\" fxFlex *ngSwitchDefault\n                                appearance=\"outline\">\n                    <mat-label>{{header.title | translate}}</mat-label>\n                    <input matInput [formControl]=\"formControls[i]\">\n                </mat-form-field>\n            </div>\n        </ng-template>\n\n        <ng-template #elseBlock>\n            <div fxFlex></div>\n        </ng-template>\n    </div>\n</div>\n", styles: [".checkbox-padding{padding-right:12px}.cursor-fix{cursor:pointer}\n"], components: [{ type: i1$5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i5$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { type: i2$6.NgxMatDatetimePicker, selector: "ngx-mat-datetime-picker", inputs: ["calendarHeaderComponent", "startAt", "startView", "defaultColor", "color", "touchUi", "hideTime", "disabled", "panelClass", "dateClass", "opened", "showSpinners", "showSeconds", "stepHour", "stepMinute", "stepSecond", "enableMeridian", "disableMinute", "defaultTime"], outputs: ["yearSelected", "monthSelected", "opened", "closed"], exportAs: ["ngxMatDatetimePicker"] }, { type: i2$5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$2.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i5$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$6.NgxMatDatetimeInput, selector: "input[ngxMatDatetimePicker]", inputs: ["ngxMatDatetimePicker", "ngxMatDatetimePickerFilter", "value", "min", "max", "disabled"], outputs: ["dateChange", "dateInput"], exportAs: ["ngxMatDatetimePickerInput"] }, { type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i4$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "async": i4$1.AsyncPipe, "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SearchModeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-search-mode', providers: [
@@ -2392,7 +2441,7 @@ class EditModeComponent extends AbstractEditModeComponent {
     }
 }
 EditModeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EditModeComponent, deps: [{ token: i1$2.TranslateService }, { token: i1.LoggerService }], target: i0.ɵɵFactoryTarget.Component });
-EditModeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: EditModeComponent, selector: "nc-edit-mode", usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"row\" fxFlex=\"100\" fxLayoutAlign=\"start center\" class=\"netgrif-input netgrif-header-input netgrif-input-fix netgrif-zero-field-wrapper\">\n    <mat-checkbox *ngIf=\"approval && typeApproval === 'multichoice'\" [formControl]=\"approvalFormControl\" [indeterminate]=\"indeterminate\"\n                  (click)=\"$event.stopPropagation();\" color='primary' class=\"checkbox-padding\"></mat-checkbox>\n    <mat-icon *ngIf=\"approval && typeApproval === 'enumeration'\" color=\"warn\" (click)=\"setValue();$event.stopPropagation();\" class=\"checkbox-padding cursor-fix\">close</mat-icon>\n    <mat-form-field *ngFor=\"let header of this.headerService.selectedHeaders$ | async; let i = index\" fxLayout=\"row\"\n                    fxLayoutAlign=\" center\" fxFlex [ngStyle]=\"{'min-width': getMinWidth()}\" appearance=\"outline\"\n                    [fxHide.lt-xl]=\"i >= 4 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n                    [fxHide.lt-lg]=\"i >= 3 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n                    [fxHide.lt-md]=\"i >= 2 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n                    [fxHide.lt-sm]=\"i >= 1 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\">\n        <mat-label *ngIf=\"!header\">{{ 'headers.newHeader' | translate}}</mat-label>\n        <input type=\"text\"\n               aria-label=\"Autocomplete\"\n               matInput\n               [formControl]=\"formControls[i]\"\n               [matAutocomplete]=\"auto\">\n        <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [displayWith]=\"renderSelection\"\n                          (optionSelected)=\"headerColumnSelected(i, $event.option.value)\" fxFlex>\n            <mat-optgroup *ngFor=\"let group of this.filterOptions[i] | async\" [label]=\"group.groupTitle\">\n                <mat-option *ngFor=\"let field of group.fields\" [value]=\"field\">\n                    {{field.title | translate}}\n                </mat-option>\n            </mat-optgroup>\n        </mat-autocomplete>\n    </mat-form-field>\n</div>\n", styles: [".checkbox-padding{padding-right:12px}.cursor-fix{cursor:pointer}\n"], components: [{ type: i1$5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$2.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i7$1.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1$2.TranslatePipe } });
+EditModeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: EditModeComponent, selector: "nc-edit-mode", usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"row\" fxFlex=\"100\" fxLayoutAlign=\"start center\" class=\"netgrif-input netgrif-header-input netgrif-input-fix netgrif-zero-field-wrapper\">\n    <mat-checkbox *ngIf=\"approval && typeApproval === 'multichoice'\" [formControl]=\"approvalFormControl\" [indeterminate]=\"indeterminate\"\n                  (click)=\"$event.stopPropagation();\" color='primary' class=\"checkbox-padding\"></mat-checkbox>\n    <mat-icon *ngIf=\"approval && typeApproval === 'enumeration'\" color=\"warn\" (click)=\"setValue();$event.stopPropagation();\" class=\"checkbox-padding cursor-fix\">close</mat-icon>\n    <mat-form-field *ngFor=\"let header of this.headerService.selectedHeaders$ | async; let i = index\" fxLayout=\"row\"\n                    fxLayoutAlign=\" center\" fxFlex [ngStyle]=\"{'min-width': getMinWidth()}\" appearance=\"outline\"\n                    [fxHide.lt-xl]=\"i >= 4 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n                    [fxHide.lt-lg]=\"i >= 3 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n                    [fxHide.lt-md]=\"i >= 2 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n                    [fxHide.lt-sm]=\"i >= 1 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\">\n        <mat-label *ngIf=\"!header\">{{ 'headers.newHeader' | translate}}</mat-label>\n        <input type=\"text\"\n               aria-label=\"Autocomplete\"\n               matInput\n               [formControl]=\"formControls[i]\"\n               [matAutocomplete]=\"auto\">\n        <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [displayWith]=\"renderSelection\"\n                          (optionSelected)=\"headerColumnSelected(i, $event.option.value)\" fxFlex>\n            <mat-optgroup *ngFor=\"let group of this.filterOptions[i] | async\" [label]=\"group.groupTitle\">\n                <mat-option *ngFor=\"let field of group.fields\" [value]=\"field\">\n                    {{field.title | translate}}\n                </mat-option>\n            </mat-optgroup>\n        </mat-autocomplete>\n    </mat-form-field>\n</div>\n", styles: [".checkbox-padding{padding-right:12px}.cursor-fix{cursor:pointer}\n"], components: [{ type: i1$5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$2.MatOptgroup, selector: "mat-optgroup", inputs: ["disabled"], exportAs: ["matOptgroup"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i6$2.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EditModeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-edit-mode', template: "<div fxLayout=\"row\" fxFlex=\"100\" fxLayoutAlign=\"start center\" class=\"netgrif-input netgrif-header-input netgrif-input-fix netgrif-zero-field-wrapper\">\n    <mat-checkbox *ngIf=\"approval && typeApproval === 'multichoice'\" [formControl]=\"approvalFormControl\" [indeterminate]=\"indeterminate\"\n                  (click)=\"$event.stopPropagation();\" color='primary' class=\"checkbox-padding\"></mat-checkbox>\n    <mat-icon *ngIf=\"approval && typeApproval === 'enumeration'\" color=\"warn\" (click)=\"setValue();$event.stopPropagation();\" class=\"checkbox-padding cursor-fix\">close</mat-icon>\n    <mat-form-field *ngFor=\"let header of this.headerService.selectedHeaders$ | async; let i = index\" fxLayout=\"row\"\n                    fxLayoutAlign=\" center\" fxFlex [ngStyle]=\"{'min-width': getMinWidth()}\" appearance=\"outline\"\n                    [fxHide.lt-xl]=\"i >= 4 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n                    [fxHide.lt-lg]=\"i >= 3 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n                    [fxHide.lt-md]=\"i >= 2 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n                    [fxHide.lt-sm]=\"i >= 1 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\">\n        <mat-label *ngIf=\"!header\">{{ 'headers.newHeader' | translate}}</mat-label>\n        <input type=\"text\"\n               aria-label=\"Autocomplete\"\n               matInput\n               [formControl]=\"formControls[i]\"\n               [matAutocomplete]=\"auto\">\n        <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [displayWith]=\"renderSelection\"\n                          (optionSelected)=\"headerColumnSelected(i, $event.option.value)\" fxFlex>\n            <mat-optgroup *ngFor=\"let group of this.filterOptions[i] | async\" [label]=\"group.groupTitle\">\n                <mat-option *ngFor=\"let field of group.fields\" [value]=\"field\">\n                    {{field.title | translate}}\n                </mat-option>\n            </mat-optgroup>\n        </mat-autocomplete>\n    </mat-form-field>\n</div>\n", styles: [".checkbox-padding{padding-right:12px}.cursor-fix{cursor:pointer}\n"] }]
@@ -2404,7 +2453,7 @@ class LoadingModeComponent extends AbstractLoadingModeComponent {
     }
 }
 LoadingModeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LoadingModeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LoadingModeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: LoadingModeComponent, selector: "nc-loading-mode", usesInheritance: true, ngImport: i0, template: "<div fxFlex=\"100\" fxLayout=\"row\" fxLayoutAlign=\" center\">\n    <div *ngFor=\"let header of headerService.headerState.selectedHeaders$ | async; let i = index\" fxFlex\n         [fxHide.lt-xl]=\"i >= 4 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         [fxHide.lt-lg]=\"i >= 3 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         [fxHide.lt-md]=\"i >= 2 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         [fxHide.lt-sm]=\"i >= 1 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         [ngStyle]=\"{'min-width': getMinWidth()}\">\n        <div class=\"phl-item\">\n            <div class=\"phl-row\" fxLayoutAlign=\"start center\">\n                <div class=\"phl-col\">\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".phl-row{width:100%;flex-wrap:wrap}.phl-col{height:20px;flex:0 0 55%;background-color:#ced4da;border-radius:6px}.phl-item{position:relative;display:flex;flex-wrap:wrap;overflow:hidden;border-radius:6px}.phl-item:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));animation:shimmer 1s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}.phl-item,.phl-item *,.phl-item:after,.phl-item:before{box-sizing:border-box}\n"], directives: [{ type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7$1.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], pipes: { "async": i4$1.AsyncPipe } });
+LoadingModeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: LoadingModeComponent, selector: "nc-loading-mode", usesInheritance: true, ngImport: i0, template: "<div fxFlex=\"100\" fxLayout=\"row\" fxLayoutAlign=\" center\">\n    <div *ngFor=\"let header of headerService.headerState.selectedHeaders$ | async; let i = index\" fxFlex\n         [fxHide.lt-xl]=\"i >= 4 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         [fxHide.lt-lg]=\"i >= 3 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         [fxHide.lt-md]=\"i >= 2 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         [fxHide.lt-sm]=\"i >= 1 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         [ngStyle]=\"{'min-width': getMinWidth()}\">\n        <div class=\"phl-item\">\n            <div class=\"phl-row\" fxLayoutAlign=\"start center\">\n                <div class=\"phl-col\">\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".phl-row{width:100%;flex-wrap:wrap}.phl-col{height:20px;flex:0 0 55%;background-color:#ced4da;border-radius:6px}.phl-item{position:relative;display:flex;flex-wrap:wrap;overflow:hidden;border-radius:6px}.phl-item:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));animation:shimmer 1s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}.phl-item,.phl-item *,.phl-item:after,.phl-item:before{box-sizing:border-box}\n"], directives: [{ type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$2.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }], pipes: { "async": i4$1.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LoadingModeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-loading-mode', template: "<div fxFlex=\"100\" fxLayout=\"row\" fxLayoutAlign=\" center\">\n    <div *ngFor=\"let header of headerService.headerState.selectedHeaders$ | async; let i = index\" fxFlex\n         [fxHide.lt-xl]=\"i >= 4 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         [fxHide.lt-lg]=\"i >= 3 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         [fxHide.lt-md]=\"i >= 2 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         [fxHide.lt-sm]=\"i >= 1 && this.headerService.responsiveHeaders && !this.headerService.overflowMode\"\n         [ngStyle]=\"{'min-width': getMinWidth()}\">\n        <div class=\"phl-item\">\n            <div class=\"phl-row\" fxLayoutAlign=\"start center\">\n                <div class=\"phl-col\">\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".phl-row{width:100%;flex-wrap:wrap}.phl-col{height:20px;flex:0 0 55%;background-color:#ced4da;border-radius:6px}.phl-item{position:relative;display:flex;flex-wrap:wrap;overflow:hidden;border-radius:6px}.phl-item:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));animation:shimmer 1s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}.phl-item,.phl-item *,.phl-item:after,.phl-item:before{box-sizing:border-box}\n"] }]
@@ -2462,7 +2511,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
         WorkflowHeaderService,
         HeaderSearchService,
         CategoryFactory
-    ], usesInheritance: true, ngImport: i0, template: "<mat-card [ngClass]=\"{'padding-custom': headerService.headerState.mode === headerModeEnum.SORT}\" class=\"header-color header-card\">\n    <div fxLayout=\"row\">\n        <div fxLayout=\"row\" fxFlex=\"95\" class=\"header-content-container flex-95\" fxLayoutAlign=\"start center\"\n             [ngSwitch]=\"headerService.headerState.mode\" *ngIf=\"!headerService.loading.isActive\">\n            <div *ngSwitchCase=\"headerModeEnum.SORT\" fxFlex=\"100\" fxLayout=\"row\">\n                <nc-sort-mode fxFlex=\"100\" [headerService]=\"headerService\"\n                              [overflowWidth]=\"getMinWidth()\"\n                              [approvalFormControl]=\"approvalFormControl\"\n                              [indeterminate]=\"indeterminate()\"\n                              [approval]=\"approval\"\n                              [typeApproval]=\"typeApproval()\"\n                ></nc-sort-mode>\n            </div>\n            <div *ngSwitchCase=\"headerModeEnum.SEARCH\" fxFlex=\"100\" fxLayout=\"row\">\n                <nc-search-mode fxFlex=\"100\" [headerService]=\"headerService\"\n                                [overflowWidth]=\"getMinWidth()\"\n                                [approvalFormControl]=\"approvalFormControl\"\n                                [indeterminate]=\"indeterminate()\"\n                                [approval]=\"approval\"\n                                [typeApproval]=\"typeApproval()\"\n                ></nc-search-mode>\n            </div>\n            <div *ngSwitchCase=\"headerModeEnum.EDIT\" fxFlex=\"100\" fxLayout=\"row\">\n                <nc-edit-mode fxFlex=\"100\" [headerService]=\"headerService\"\n                              [overflowWidth]=\"getMinWidth()\"\n                              [approvalFormControl]=\"approvalFormControl\"\n                              [indeterminate]=\"indeterminate()\"\n                              [approval]=\"approval\"\n                              [typeApproval]=\"typeApproval()\"\n                ></nc-edit-mode>\n            </div>\n        </div>\n        <div fxLayout=\"row\" fxFlex=\"95\" class=\"header-content-container\" fxLayoutAlign=\"start center\"\n             *ngIf=\"headerService.loading.isActive\">\n            <div fxFlex=\"100\" fxLayout=\"row\">\n                <nc-loading-mode fxFlex=\"100\" [headerService]=\"headerService\"\n                                 [overflowWidth]=\"getMinWidth()\"></nc-loading-mode>\n            </div>\n        </div>\n        <div fxLayout=\"row\" fxLayoutAlign=\"end center\" fxFlex=\"5\" class=\"flex-5\">\n            <div *ngIf=\"!hideHeaderMenu\">\n                <button mat-icon-button [matMenuTriggerFor]=\"headerMenu\">\n                    <mat-icon>more_vert</mat-icon>\n                </button>\n                <mat-menu  #headerMenu=\"matMenu\" class=\"mat-menu-border-radius mat-menu-padding\">\n                    <div *ngIf=\"headerService.headerState.mode !== headerModeEnum.EDIT && showSortButton\">\n                        <button mat-menu-item\n                                [ngClass]=\"{'active-header-item': headerService.headerState.mode === headerModeEnum.SORT}\"\n                                (click)=\"headerService.changeMode(headerModeEnum.SORT, false)\">\n                            <mat-icon>sort</mat-icon>\n                            {{ 'headers.orderMode' | translate}}\n                        </button>\n                        <button *ngIf=\"type === headerTypeEnum.CASE && showSearchButton\" mat-menu-item\n                                [ngClass]=\"{'active-header-item': headerService.headerState.mode === headerModeEnum.SEARCH}\"\n                                (click)=\"headerService.changeMode(headerModeEnum.SEARCH, false)\">\n                            <mat-icon>search</mat-icon>\n                            {{ 'headers.searchMode' | translate}}\n                        </button>\n                        <button *ngIf=\"showEditButton\" mat-menu-item\n                                (click)=\"headerService.changeMode(headerModeEnum.EDIT)\">\n                            <mat-icon>edit</mat-icon>\n                            {{ 'headers.editMode' | translate}}\n                        </button>\n                    </div>\n                    <div *ngIf=\"headerService.headerState.mode === headerModeEnum.EDIT\">\n                        <button mat-menu-item (click)=\"confirmEditMode()\">\n                            <mat-icon color=\"primary\">done</mat-icon>\n                            {{ 'dialog.submit' | translate}}\n                        </button>\n                        <button mat-menu-item (click)=\"headerService.revertEditMode()\">\n                            <mat-icon color=\"warn\">close</mat-icon>\n                            {{ 'tasks.view.cancel' | translate}}\n                        </button>\n                        <div class=\"mat-menu-item-look\" *ngIf=\"canOverflow && showTableSection\">\n                            <mat-slide-toggle\n                                [formControl]=\"overflowControl\">{{ 'headers.overflowMode' | translate}}</mat-slide-toggle>\n                        </div>\n                        <div class=\"mat-menu-item-look mat-menu-item-height\" (click)=\"clickStop($event)\"\n                             *ngIf=\"canOverflow && showTableSection && overflowControl.value\">\n                            <mat-form-field appearance=\"outline\">\n                                <mat-label>{{ 'headers.columnWidth' | translate}}</mat-label>\n                                <input matInput type=\"number\" [formControl]=\"columnWidthControl\">\n                                <mat-error *ngIf=\"!columnWidthControl.valid\">{{getErrorMessageWidth()}}</mat-error>\n                            </mat-form-field>\n                        </div>\n                        <div class=\"mat-menu-item-look mat-menu-item-height\" (click)=\"clickStop($event)\"\n                             *ngIf=\"canOverflow && showTableSection && overflowControl.value\">\n                            <mat-form-field appearance=\"outline\">\n                                <mat-label>{{ 'headers.columnCount' | translate}}</mat-label>\n                                <input matInput type=\"number\" [formControl]=\"columnCountControl\">\n                                <mat-error *ngIf=\"!columnCountControl.valid\">{{getErrorMessageCount()}}</mat-error>\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </mat-menu>\n            </div>\n        </div>\n    </div>\n</mat-card>\n", styles: [".header-content-container{height:40px}.header-card{border-radius:8px 8px 0 0;padding:10px 16px}.padding-custom{padding:4px 16px}.flex-95{flex:1 1 95%}.flex-5{flex:1 1 5%}.mat-menu-item-look{-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:48px;height:48px;padding:0 16px;text-align:left;text-decoration:none;max-width:100%;position:relative;font-size:14px}.mat-menu-item-height{min-height:64px;height:auto}\n"], components: [{ type: i3$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: SortModeComponent, selector: "nc-sort-mode" }, { type: SearchModeComponent, selector: "nc-search-mode" }, { type: EditModeComponent, selector: "nc-edit-mode" }, { type: LoadingModeComponent, selector: "nc-loading-mode" }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i10$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i10$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i7$2.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i10$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1$2.TranslatePipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<mat-card [ngClass]=\"{'padding-custom': headerService.headerState.mode === headerModeEnum.SORT}\" class=\"header-color header-card\">\n    <div fxLayout=\"row\">\n        <div fxLayout=\"row\" fxFlex=\"95\" class=\"header-content-container flex-95\" fxLayoutAlign=\"start center\"\n             [ngSwitch]=\"headerService.headerState.mode\" *ngIf=\"!headerService.loading.isActive\">\n            <div *ngSwitchCase=\"headerModeEnum.SORT\" fxFlex=\"100\" fxLayout=\"row\">\n                <nc-sort-mode fxFlex=\"100\" [headerService]=\"headerService\"\n                              [overflowWidth]=\"getMinWidth()\"\n                              [approvalFormControl]=\"approvalFormControl\"\n                              [indeterminate]=\"indeterminate()\"\n                              [approval]=\"approval\"\n                              [typeApproval]=\"typeApproval()\"\n                ></nc-sort-mode>\n            </div>\n            <div *ngSwitchCase=\"headerModeEnum.SEARCH\" fxFlex=\"100\" fxLayout=\"row\">\n                <nc-search-mode fxFlex=\"100\" [headerService]=\"headerService\"\n                                [overflowWidth]=\"getMinWidth()\"\n                                [approvalFormControl]=\"approvalFormControl\"\n                                [indeterminate]=\"indeterminate()\"\n                                [approval]=\"approval\"\n                                [typeApproval]=\"typeApproval()\"\n                ></nc-search-mode>\n            </div>\n            <div *ngSwitchCase=\"headerModeEnum.EDIT\" fxFlex=\"100\" fxLayout=\"row\">\n                <nc-edit-mode fxFlex=\"100\" [headerService]=\"headerService\"\n                              [overflowWidth]=\"getMinWidth()\"\n                              [approvalFormControl]=\"approvalFormControl\"\n                              [indeterminate]=\"indeterminate()\"\n                              [approval]=\"approval\"\n                              [typeApproval]=\"typeApproval()\"\n                ></nc-edit-mode>\n            </div>\n        </div>\n        <div fxLayout=\"row\" fxFlex=\"95\" class=\"header-content-container\" fxLayoutAlign=\"start center\"\n             *ngIf=\"headerService.loading.isActive\">\n            <div fxFlex=\"100\" fxLayout=\"row\">\n                <nc-loading-mode fxFlex=\"100\" [headerService]=\"headerService\"\n                                 [overflowWidth]=\"getMinWidth()\"></nc-loading-mode>\n            </div>\n        </div>\n        <div fxLayout=\"row\" fxLayoutAlign=\"end center\" fxFlex=\"5\" class=\"flex-5\">\n            <div *ngIf=\"!hideHeaderMenu\">\n                <button mat-icon-button [matMenuTriggerFor]=\"headerMenu\">\n                    <mat-icon>more_vert</mat-icon>\n                </button>\n                <mat-menu  #headerMenu=\"matMenu\" class=\"mat-menu-border-radius mat-menu-padding\">\n                    <div *ngIf=\"headerService.headerState.mode !== headerModeEnum.EDIT && showSortButton\">\n                        <button mat-menu-item\n                                [ngClass]=\"{'active-header-item': headerService.headerState.mode === headerModeEnum.SORT}\"\n                                (click)=\"headerService.changeMode(headerModeEnum.SORT, false)\">\n                            <mat-icon>sort</mat-icon>\n                            {{ 'headers.orderMode' | translate}}\n                        </button>\n                        <button *ngIf=\"type === headerTypeEnum.CASE && showSearchButton\" mat-menu-item\n                                [ngClass]=\"{'active-header-item': headerService.headerState.mode === headerModeEnum.SEARCH}\"\n                                (click)=\"headerService.changeMode(headerModeEnum.SEARCH, false)\">\n                            <mat-icon>search</mat-icon>\n                            {{ 'headers.searchMode' | translate}}\n                        </button>\n                        <button *ngIf=\"showEditButton\" mat-menu-item\n                                (click)=\"headerService.changeMode(headerModeEnum.EDIT)\">\n                            <mat-icon>edit</mat-icon>\n                            {{ 'headers.editMode' | translate}}\n                        </button>\n                    </div>\n                    <div *ngIf=\"headerService.headerState.mode === headerModeEnum.EDIT\">\n                        <button mat-menu-item (click)=\"confirmEditMode()\">\n                            <mat-icon color=\"primary\">done</mat-icon>\n                            {{ 'dialog.submit' | translate}}\n                        </button>\n                        <button mat-menu-item (click)=\"headerService.revertEditMode()\">\n                            <mat-icon color=\"warn\">close</mat-icon>\n                            {{ 'tasks.view.cancel' | translate}}\n                        </button>\n                        <div class=\"mat-menu-item-look\" *ngIf=\"canOverflow && showTableSection\">\n                            <mat-slide-toggle\n                                [formControl]=\"overflowControl\">{{ 'headers.overflowMode' | translate}}</mat-slide-toggle>\n                        </div>\n                        <div class=\"mat-menu-item-look mat-menu-item-height\" (click)=\"clickStop($event)\"\n                             *ngIf=\"canOverflow && showTableSection && overflowControl.value\">\n                            <mat-form-field appearance=\"outline\">\n                                <mat-label>{{ 'headers.columnWidth' | translate}}</mat-label>\n                                <input matInput type=\"number\" [formControl]=\"columnWidthControl\">\n                                <mat-error *ngIf=\"!columnWidthControl.valid\">{{getErrorMessageWidth()}}</mat-error>\n                            </mat-form-field>\n                        </div>\n                        <div class=\"mat-menu-item-look mat-menu-item-height\" (click)=\"clickStop($event)\"\n                             *ngIf=\"canOverflow && showTableSection && overflowControl.value\">\n                            <mat-form-field appearance=\"outline\">\n                                <mat-label>{{ 'headers.columnCount' | translate}}</mat-label>\n                                <input matInput type=\"number\" [formControl]=\"columnCountControl\">\n                                <mat-error *ngIf=\"!columnCountControl.valid\">{{getErrorMessageCount()}}</mat-error>\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </mat-menu>\n            </div>\n        </div>\n    </div>\n</mat-card>\n", styles: [".header-content-container{height:40px}.header-card{border-radius:8px 8px 0 0;padding:10px 16px}.padding-custom{padding:4px 16px}.flex-95{flex:1 1 95%}.flex-5{flex:1 1 5%}.mat-menu-item-look{-webkit-user-select:none;user-select:none;cursor:pointer;outline:none;border:none;-webkit-tap-highlight-color:transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:48px;height:48px;padding:0 16px;text-align:left;text-decoration:none;max-width:100%;position:relative;font-size:14px}.mat-menu-item-height{min-height:64px;height:auto}\n"], components: [{ type: i3$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: SortModeComponent, selector: "nc-sort-mode" }, { type: SearchModeComponent, selector: "nc-search-mode" }, { type: EditModeComponent, selector: "nc-edit-mode" }, { type: LoadingModeComponent, selector: "nc-loading-mode" }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i10$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i10$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i7$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i10$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-header', providers: [
@@ -2498,7 +2547,7 @@ class FieldComponentResolverComponent extends AbstractFieldComponentResolverComp
     }
 }
 FieldComponentResolverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FieldComponentResolverComponent, deps: [{ token: i1.TaskContentService }, { token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-FieldComponentResolverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FieldComponentResolverComponent, selector: "nc-field-component-resolver", inputs: { taskContentComponentClassReference: "taskContentComponentClassReference" }, usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"netgrif-input\" [ngClass]=\"{'min-row-height': isField() && !isCustomHeight()}\" [ngSwitch]=\"getElementType()\">\n\n    <div *ngSwitchCase=\"taskElementEnum.DATA_GROUP_TITLE\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <div fxFlex=\"20\" class=\"line-datagroup\"></div>\n        <span [ngClass]=\"{'margin-default': getDataGroupTitle() !== ''}\">{{getDataGroupTitle()}}</span>\n        <div fxFlex class=\"line-datagroup\"></div>\n    </div>\n\n    <div *ngSwitchCase=\"taskElementEnum.LOADER\" class=\"min-row-height\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <div class=\"phl-item\">\n            <div class=\"phl-row\" fxLayoutAlign=\"center center\">\n                <div class=\"phl-col\">\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <div *ngSwitchCase=\"taskElementEnum.BLANK\"></div>\n\n    <div *ngSwitchDefault fxFlex [ngClass]=\"{'div-overflow': isEnumOrMulti(), 'date-field-fix': isDateType(), 'width-100': isFileType()}\">\n        <nc-data-field-template *ngIf=\"!!getDataField()?.behavior && !getDataField().behavior.hidden\"\n                                [_additionalFieldProperties]=\"{taskId: getTaskId(), taskContentComponentClassReference}\"\n                                [dataField]=\"getDataField()\"\n                                [offset]=\"getFieldOffset()\">\n        </nc-data-field-template>\n    </div>\n</div>\n", styles: [".line-datagroup{height:1px;background:rgba(0,0,0,.12)}.margin-default{margin-right:8px;margin-left:8px}.min-row-height{min-height:67px}.phl-row{width:100%;flex-wrap:wrap}.phl-col{height:70px;flex:0 0 90%;background-color:#ced4da;border-radius:8px}.phl-item{width:100%;position:relative;display:flex;flex-wrap:wrap;overflow:hidden;background-color:#fff}.phl-item:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));animation:shimmer 1s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}.phl-item,.phl-item *,.phl-item:after,.phl-item:before{box-sizing:border-box}.full-width{display:block;margin:0 auto;width:100%}.width-100{width:100%}.padding-bottom-4px{padding-bottom:4px}.div-overflow{overflow-y:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], components: [{ type: DataFieldTemplateComponent, selector: "nc-data-field-template" }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+FieldComponentResolverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FieldComponentResolverComponent, selector: "nc-field-component-resolver", inputs: { taskContentComponentClassReference: "taskContentComponentClassReference" }, usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"netgrif-input\" [ngClass]=\"{'min-row-height': isField() && !isCustomHeight()}\" [ngSwitch]=\"getElementType()\">\n\n    <div *ngSwitchCase=\"taskElementEnum.DATA_GROUP_TITLE\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <div fxFlex=\"20\" class=\"line-datagroup\"></div>\n        <span [ngClass]=\"{'margin-default': getDataGroupTitle() !== ''}\">{{getDataGroupTitle()}}</span>\n        <div fxFlex class=\"line-datagroup\"></div>\n    </div>\n\n    <div *ngSwitchCase=\"taskElementEnum.LOADER\" class=\"min-row-height\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <div class=\"phl-item\">\n            <div class=\"phl-row\" fxLayoutAlign=\"center center\">\n                <div class=\"phl-col\">\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <div *ngSwitchCase=\"taskElementEnum.BLANK\"></div>\n\n    <div *ngSwitchDefault fxFlex [ngClass]=\"{'div-overflow': isEnumOrMulti(), 'date-field-fix': isDateType(), 'width-100': isFileType()}\">\n        <nc-data-field-template *ngIf=\"!!getDataField()?.behavior && !getDataField().behavior.hidden\"\n                                [_additionalFieldProperties]=\"{taskId: getTaskId(), taskContentComponentClassReference}\"\n                                [dataField]=\"getDataField()\"\n                                [offset]=\"getFieldOffset()\">\n        </nc-data-field-template>\n    </div>\n</div>\n", styles: [".line-datagroup{height:1px;background:rgba(0,0,0,.12)}.margin-default{margin-right:8px;margin-left:8px}.min-row-height{min-height:67px}.phl-row{width:100%;flex-wrap:wrap}.phl-col{height:70px;flex:0 0 90%;background-color:#ced4da;border-radius:8px}.phl-item{width:100%;position:relative;display:flex;flex-wrap:wrap;overflow:hidden;background-color:#fff}.phl-item:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));animation:shimmer 1s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}.phl-item,.phl-item *,.phl-item:after,.phl-item:before{box-sizing:border-box}.full-width{display:block;margin:0 auto;width:100%}.width-100{width:100%}.padding-bottom-4px{padding-bottom:4px}.div-overflow{overflow-y:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], components: [{ type: DataFieldTemplateComponent, selector: "nc-data-field-template" }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FieldComponentResolverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-field-component-resolver', template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"netgrif-input\" [ngClass]=\"{'min-row-height': isField() && !isCustomHeight()}\" [ngSwitch]=\"getElementType()\">\n\n    <div *ngSwitchCase=\"taskElementEnum.DATA_GROUP_TITLE\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <div fxFlex=\"20\" class=\"line-datagroup\"></div>\n        <span [ngClass]=\"{'margin-default': getDataGroupTitle() !== ''}\">{{getDataGroupTitle()}}</span>\n        <div fxFlex class=\"line-datagroup\"></div>\n    </div>\n\n    <div *ngSwitchCase=\"taskElementEnum.LOADER\" class=\"min-row-height\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <div class=\"phl-item\">\n            <div class=\"phl-row\" fxLayoutAlign=\"center center\">\n                <div class=\"phl-col\">\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <div *ngSwitchCase=\"taskElementEnum.BLANK\"></div>\n\n    <div *ngSwitchDefault fxFlex [ngClass]=\"{'div-overflow': isEnumOrMulti(), 'date-field-fix': isDateType(), 'width-100': isFileType()}\">\n        <nc-data-field-template *ngIf=\"!!getDataField()?.behavior && !getDataField().behavior.hidden\"\n                                [_additionalFieldProperties]=\"{taskId: getTaskId(), taskContentComponentClassReference}\"\n                                [dataField]=\"getDataField()\"\n                                [offset]=\"getFieldOffset()\">\n        </nc-data-field-template>\n    </div>\n</div>\n", styles: [".line-datagroup{height:1px;background:rgba(0,0,0,.12)}.margin-default{margin-right:8px;margin-left:8px}.min-row-height{min-height:67px}.phl-row{width:100%;flex-wrap:wrap}.phl-col{height:70px;flex:0 0 90%;background-color:#ced4da;border-radius:8px}.phl-item{width:100%;position:relative;display:flex;flex-wrap:wrap;overflow:hidden;background-color:#fff}.phl-item:after{position:absolute;inset:0;transform:translate(-100%);background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.2) 20%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0));animation:shimmer 1s infinite;content:\"\"}@keyframes shimmer{to{transform:translate(100%)}}.phl-item,.phl-item *,.phl-item:after,.phl-item:before{box-sizing:border-box}.full-width{display:block;margin:0 auto;width:100%}.width-100{width:100%}.padding-bottom-4px{padding-bottom:4px}.div-overflow{overflow-y:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
@@ -2525,7 +2574,7 @@ class TaskContentComponent extends AbstractTaskContentComponent {
     }
 }
 TaskContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TaskContentComponent, deps: [{ token: i1.FieldConverterService }, { token: i1.TaskContentService }, { token: i1.PaperViewService }, { token: i1.LoggerService }, { token: i1.TaskEventService, optional: true }, { token: NAE_ASYNC_RENDERING_CONFIGURATION, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-TaskContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TaskContentComponent, selector: "nc-task-content", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"loading$ | async; else notLoading\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n    <mat-spinner color=\"primary\"></mat-spinner>\n</div>\n\n<ng-template #notLoading>\n    <div *ngIf=\"hasDataToDisplay$ | async; else noContentToDisplay\"\n         [ngClass]=\"{'paper-view-content mat-elevation-z10': isPaperView(), 'scrolling_data': this.scrollingNeeded()}\"\n         [ngStyle]=\"{'max-height': this.resolveContentHeightCss()}\">\n        <div fxLayout=\"column\" fxLayoutAlign=\"start stretch\"\n             *ngFor=\"let subgrid of dataSource; trackBy: trackBySubgridFn\">\n            <div [gdAreas]=\"subgrid.gridAreas\" [gdColumns]=\"subgrid.getGridColumns()\" class=\"grid-rows-auto\" [ngClass.lt-sm]=\"{'responsive-grid': true}\">\n                <div *ngFor=\"let item of subgrid.content; trackBy: trackByFn\"\n                     [gdArea]=\"item.gridAreaId\"\n                     class=\"border\" fxLayout=\"row\" [fxLayoutAlign]=\"getItemAlignment(item)\">\n                    <nc-field-component-resolver [id]=\"item?.item?.stringId\" [gridElement]=\"item\"\n                                                 [taskContentComponentClassReference]=\"taskContentComponentClass\" fxFlex  class=\"width-100\"></nc-field-component-resolver>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #noContentToDisplay>\n    <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\n        <mat-icon *ngIf=\"displayNoDataIcon\">{{noDataIcon ? noDataIcon : 'block'}}</mat-icon>\n        <span>{{(noDataText ? noDataText : 'tasks.view.noData') | translate}}</span>\n    </div>\n</ng-template>\n", styles: [".border{overflow-y:auto}.paper-view-content{padding:20px;width:22cm;border:1px solid #dddddd}.scrolling_data{overflow-y:auto!important}.grid-rows-auto{grid-template-rows:auto}.responsive-grid{display:block!important}.width-100{width:100%}\n"], components: [{ type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: FieldComponentResolverComponent, selector: "nc-field-component-resolver", inputs: ["taskContentComponentClassReference"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$8.DefaultGridAreasDirective, selector: "  [gdAreas],  [gdAreas.xs], [gdAreas.sm], [gdAreas.md], [gdAreas.lg], [gdAreas.xl],  [gdAreas.lt-sm], [gdAreas.lt-md], [gdAreas.lt-lg], [gdAreas.lt-xl],  [gdAreas.gt-xs], [gdAreas.gt-sm], [gdAreas.gt-md], [gdAreas.gt-lg]", inputs: ["gdAreas", "gdAreas.xs", "gdAreas.sm", "gdAreas.md", "gdAreas.lg", "gdAreas.xl", "gdAreas.lt-sm", "gdAreas.lt-md", "gdAreas.lt-lg", "gdAreas.lt-xl", "gdAreas.gt-xs", "gdAreas.gt-sm", "gdAreas.gt-md", "gdAreas.gt-lg"] }, { type: i3$8.DefaultGridColumnsDirective, selector: "  [gdColumns],  [gdColumns.xs], [gdColumns.sm], [gdColumns.md], [gdColumns.lg], [gdColumns.xl],  [gdColumns.lt-sm], [gdColumns.lt-md], [gdColumns.lt-lg], [gdColumns.lt-xl],  [gdColumns.gt-xs], [gdColumns.gt-sm], [gdColumns.gt-md], [gdColumns.gt-lg]", inputs: ["gdColumns", "gdColumns.xs", "gdColumns.sm", "gdColumns.md", "gdColumns.lg", "gdColumns.xl", "gdColumns.lt-sm", "gdColumns.lt-md", "gdColumns.lt-lg", "gdColumns.lt-xl", "gdColumns.gt-xs", "gdColumns.gt-sm", "gdColumns.gt-md", "gdColumns.gt-lg"] }, { type: i3$8.DefaultGridAreaDirective, selector: "  [gdArea],  [gdArea.xs], [gdArea.sm], [gdArea.md], [gdArea.lg], [gdArea.xl],  [gdArea.lt-sm], [gdArea.lt-md], [gdArea.lt-lg], [gdArea.lt-xl],  [gdArea.gt-xs], [gdArea.gt-sm], [gdArea.gt-md], [gdArea.gt-lg]", inputs: ["gdArea", "gdArea.xs", "gdArea.sm", "gdArea.md", "gdArea.lg", "gdArea.xl", "gdArea.lt-sm", "gdArea.lt-md", "gdArea.lt-lg", "gdArea.lt-xl", "gdArea.gt-xs", "gdArea.gt-sm", "gdArea.gt-md", "gdArea.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1$2.TranslatePipe } });
+TaskContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TaskContentComponent, selector: "nc-task-content", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"loading$ | async; else notLoading\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n    <mat-spinner color=\"primary\"></mat-spinner>\n</div>\n\n<ng-template #notLoading>\n    <div *ngIf=\"hasDataToDisplay$ | async; else noContentToDisplay\"\n         [ngClass]=\"{'paper-view-content mat-elevation-z10': isPaperView(), 'scrolling_data': this.scrollingNeeded()}\"\n         [ngStyle]=\"{'max-height': this.resolveContentHeightCss()}\">\n        <div fxLayout=\"column\" fxLayoutAlign=\"start stretch\"\n             *ngFor=\"let subgrid of dataSource; trackBy: trackBySubgridFn\">\n            <div [gdAreas]=\"subgrid.gridAreas\" [gdColumns]=\"subgrid.getGridColumns()\" class=\"grid-rows-auto\" [ngClass.lt-sm]=\"{'responsive-grid': true}\">\n                <div *ngFor=\"let item of subgrid.content; trackBy: trackByFn\"\n                     [gdArea]=\"item.gridAreaId\"\n                     class=\"border\" fxLayout=\"row\" [fxLayoutAlign]=\"getItemAlignment(item)\">\n                    <nc-field-component-resolver [id]=\"item?.item?.stringId\" [gridElement]=\"item\"\n                                                 [taskContentComponentClassReference]=\"taskContentComponentClass\" fxFlex  class=\"width-100\"></nc-field-component-resolver>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #noContentToDisplay>\n    <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\n        <mat-icon *ngIf=\"displayNoDataIcon\">{{noDataIcon ? noDataIcon : 'block'}}</mat-icon>\n        <span>{{(noDataText ? noDataText : 'tasks.view.noData') | translate}}</span>\n    </div>\n</ng-template>\n", styles: [".border{overflow-y:auto}.paper-view-content{padding:20px;width:22cm;border:1px solid #dddddd}.scrolling_data{overflow-y:auto!important}.grid-rows-auto{grid-template-rows:auto}.responsive-grid{display:block!important}.width-100{width:100%}\n"], components: [{ type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: FieldComponentResolverComponent, selector: "nc-field-component-resolver", inputs: ["taskContentComponentClassReference"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$8.DefaultGridAreasDirective, selector: "  [gdAreas],  [gdAreas.xs], [gdAreas.sm], [gdAreas.md], [gdAreas.lg], [gdAreas.xl],  [gdAreas.lt-sm], [gdAreas.lt-md], [gdAreas.lt-lg], [gdAreas.lt-xl],  [gdAreas.gt-xs], [gdAreas.gt-sm], [gdAreas.gt-md], [gdAreas.gt-lg]", inputs: ["gdAreas", "gdAreas.xs", "gdAreas.sm", "gdAreas.md", "gdAreas.lg", "gdAreas.xl", "gdAreas.lt-sm", "gdAreas.lt-md", "gdAreas.lt-lg", "gdAreas.lt-xl", "gdAreas.gt-xs", "gdAreas.gt-sm", "gdAreas.gt-md", "gdAreas.gt-lg"] }, { type: i3$8.DefaultGridColumnsDirective, selector: "  [gdColumns],  [gdColumns.xs], [gdColumns.sm], [gdColumns.md], [gdColumns.lg], [gdColumns.xl],  [gdColumns.lt-sm], [gdColumns.lt-md], [gdColumns.lt-lg], [gdColumns.lt-xl],  [gdColumns.gt-xs], [gdColumns.gt-sm], [gdColumns.gt-md], [gdColumns.gt-lg]", inputs: ["gdColumns", "gdColumns.xs", "gdColumns.sm", "gdColumns.md", "gdColumns.lg", "gdColumns.xl", "gdColumns.lt-sm", "gdColumns.lt-md", "gdColumns.lt-lg", "gdColumns.lt-xl", "gdColumns.gt-xs", "gdColumns.gt-sm", "gdColumns.gt-md", "gdColumns.gt-lg"] }, { type: i3$8.DefaultGridAreaDirective, selector: "  [gdArea],  [gdArea.xs], [gdArea.sm], [gdArea.md], [gdArea.lg], [gdArea.xl],  [gdArea.lt-sm], [gdArea.lt-md], [gdArea.lt-lg], [gdArea.lt-xl],  [gdArea.gt-xs], [gdArea.gt-sm], [gdArea.gt-md], [gdArea.gt-lg]", inputs: ["gdArea", "gdArea.xs", "gdArea.sm", "gdArea.md", "gdArea.lg", "gdArea.xl", "gdArea.lt-sm", "gdArea.lt-md", "gdArea.lt-lg", "gdArea.lt-xl", "gdArea.gt-xs", "gdArea.gt-sm", "gdArea.gt-md", "gdArea.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TaskContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-task-content', template: "<div *ngIf=\"loading$ | async; else notLoading\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n    <mat-spinner color=\"primary\"></mat-spinner>\n</div>\n\n<ng-template #notLoading>\n    <div *ngIf=\"hasDataToDisplay$ | async; else noContentToDisplay\"\n         [ngClass]=\"{'paper-view-content mat-elevation-z10': isPaperView(), 'scrolling_data': this.scrollingNeeded()}\"\n         [ngStyle]=\"{'max-height': this.resolveContentHeightCss()}\">\n        <div fxLayout=\"column\" fxLayoutAlign=\"start stretch\"\n             *ngFor=\"let subgrid of dataSource; trackBy: trackBySubgridFn\">\n            <div [gdAreas]=\"subgrid.gridAreas\" [gdColumns]=\"subgrid.getGridColumns()\" class=\"grid-rows-auto\" [ngClass.lt-sm]=\"{'responsive-grid': true}\">\n                <div *ngFor=\"let item of subgrid.content; trackBy: trackByFn\"\n                     [gdArea]=\"item.gridAreaId\"\n                     class=\"border\" fxLayout=\"row\" [fxLayoutAlign]=\"getItemAlignment(item)\">\n                    <nc-field-component-resolver [id]=\"item?.item?.stringId\" [gridElement]=\"item\"\n                                                 [taskContentComponentClassReference]=\"taskContentComponentClass\" fxFlex  class=\"width-100\"></nc-field-component-resolver>\n                </div>\n            </div>\n        </div>\n    </div>\n</ng-template>\n\n<ng-template #noContentToDisplay>\n    <div fxLayout=\"column\" fxLayoutAlign=\"center center\">\n        <mat-icon *ngIf=\"displayNoDataIcon\">{{noDataIcon ? noDataIcon : 'block'}}</mat-icon>\n        <span>{{(noDataText ? noDataText : 'tasks.view.noData') | translate}}</span>\n    </div>\n</ng-template>\n", styles: [".border{overflow-y:auto}.paper-view-content{padding:20px;width:22cm;border:1px solid #dddddd}.scrolling_data{overflow-y:auto!important}.grid-rows-auto{grid-template-rows:auto}.responsive-grid{display:block!important}.width-100{width:100%}\n"] }]
@@ -2546,7 +2595,7 @@ class PanelComponent extends AbstractPanelComponent {
     }
 }
 PanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelComponent, deps: [{ token: i1.CaseListFontColorService }, { token: i2$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-PanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PanelComponent, selector: "nc-app-panel", usesInheritance: true, ngImport: i0, template: "<mat-expansion-panel [@.disabled]=\"expansionDisabled\" hideToggle (afterExpand)=\"emitExpand()\"\n                     (afterCollapse)=\"emitCollapse()\" #matExpansionPanel class=\"panel-body\"\n                     [ngClass]=\"{'margin-bottom':last, 'panel-last':last}\" [disabled]='preventCollapse'>\n    <mat-expansion-panel-header *ngIf=\"showPanelHeader()\"\n                                (click)=\"expandPanel()\" class=\"panel-color header-padding header-min-height\"\n                                [ngStyle]=\"{'background': caseColor, 'color': getCaseFontColor()}\">\n        <mat-panel-description *ngTemplateOutlet=\"panelHeader\">\n        </mat-panel-description>\n    </mat-expansion-panel-header>\n    <ng-template matExpansionPanelContent>\n        <div *ngTemplateOutlet=\"panelContent\"></div>\n    </ng-template>\n</mat-expansion-panel>\n\n", styles: [".mat-expansion-panel-header{border-bottom:1px solid rgba(0,0,0,.03);color:#000000de}.header-padding{padding:0 16px}.header-min-height{min-height:53px!important;height:auto!important}.margin-bottom{margin-bottom:2px}.mat-expansion-panel{-webkit-user-select:text!important;user-select:text!important}.panel-last{padding-bottom:16px;border-bottom-left-radius:8px!important;border-bottom-right-radius:8px!important}\n"], components: [{ type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i9.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.MatExpansionPanelDescription, selector: "mat-panel-description" }, { type: i9.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }] });
+PanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PanelComponent, selector: "nc-app-panel", usesInheritance: true, ngImport: i0, template: "<mat-expansion-panel [@.disabled]=\"expansionDisabled\" hideToggle (afterExpand)=\"emitExpand()\"\n                     (afterCollapse)=\"emitCollapse()\" #matExpansionPanel class=\"panel-body\"\n                     [ngClass]=\"{'margin-bottom':last, 'panel-last':last}\" [disabled]='preventCollapse'>\n    <mat-expansion-panel-header *ngIf=\"showPanelHeader()\"\n                                (click)=\"expandPanel()\" class=\"panel-color header-padding header-min-height\"\n                                [ngStyle]=\"{'background': caseColor, 'color': getCaseFontColor()}\">\n        <mat-panel-description *ngTemplateOutlet=\"panelHeader\">\n        </mat-panel-description>\n    </mat-expansion-panel-header>\n    <ng-template matExpansionPanelContent>\n        <div *ngTemplateOutlet=\"panelContent\"></div>\n    </ng-template>\n</mat-expansion-panel>\n\n", styles: [".mat-expansion-panel-header{border-bottom:1px solid rgba(0,0,0,.03);color:#000000de}.header-padding{padding:0 16px}.header-min-height{min-height:53px!important;height:auto!important}.margin-bottom{margin-bottom:2px}.mat-expansion-panel{-webkit-user-select:text!important;user-select:text!important}.panel-last{padding-bottom:16px;border-bottom-left-radius:8px!important;border-bottom-right-radius:8px!important}\n"], components: [{ type: i9.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { type: i9.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.MatExpansionPanelDescription, selector: "mat-panel-description" }, { type: i9.MatExpansionPanelContent, selector: "ng-template[matExpansionPanelContent]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-app-panel', template: "<mat-expansion-panel [@.disabled]=\"expansionDisabled\" hideToggle (afterExpand)=\"emitExpand()\"\n                     (afterCollapse)=\"emitCollapse()\" #matExpansionPanel class=\"panel-body\"\n                     [ngClass]=\"{'margin-bottom':last, 'panel-last':last}\" [disabled]='preventCollapse'>\n    <mat-expansion-panel-header *ngIf=\"showPanelHeader()\"\n                                (click)=\"expandPanel()\" class=\"panel-color header-padding header-min-height\"\n                                [ngStyle]=\"{'background': caseColor, 'color': getCaseFontColor()}\">\n        <mat-panel-description *ngTemplateOutlet=\"panelHeader\">\n        </mat-panel-description>\n    </mat-expansion-panel-header>\n    <ng-template matExpansionPanelContent>\n        <div *ngTemplateOutlet=\"panelContent\"></div>\n    </ng-template>\n</mat-expansion-panel>\n\n", styles: [".mat-expansion-panel-header{border-bottom:1px solid rgba(0,0,0,.03);color:#000000de}.header-padding{padding:0 16px}.header-min-height{min-height:53px!important;height:auto!important}.margin-bottom{margin-bottom:2px}.mat-expansion-panel{-webkit-user-select:text!important;user-select:text!important}.panel-last{padding-bottom:16px;border-bottom-left-radius:8px!important;border-bottom-right-radius:8px!important}\n"] }]
@@ -2577,7 +2626,7 @@ ImmediateFilterTextContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersi
         { provide: NAE_SEARCH_CATEGORIES, useFactory: filterTextCategoriesFactory, deps: [CategoryFactory, NAE_FILTER_TEXT] },
         CategoryFactory,
         SearchService,
-    ], usesInheritance: true, ngImport: i0, template: "<div [matTooltip]=\"ellipsis ? tooltip : null\" [ngClass]=\"{'ellipsis': ellipsis}\" fxFlex>\n    <ng-template ngFor let-segment [ngForOf]=\"segments\">\n        <span [ngClass]=\"{'bold-text': segment.bold}\" class=\"span-margin\">\n            {{segment.uppercase ? (segment.segment | translate | uppercase) : (segment.segment | translate)}}\n        </span>\n    </ng-template>\n</div>\n", styles: [".bold-text{font-weight:700}.span-margin{margin-right:.4ex}.ellipsis{word-break:break-word!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}\n"], directives: [{ type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "uppercase": i4$1.UpperCasePipe, "translate": i1$2.TranslatePipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<div [matTooltip]=\"ellipsis ? tooltip : null\" [ngClass]=\"{'ellipsis': ellipsis}\" fxFlex>\n    <ng-template ngFor let-segment [ngForOf]=\"segments\">\n        <span [ngClass]=\"{'bold-text': segment.bold}\" class=\"span-margin\">\n            {{segment.uppercase ? (segment.segment | translate | uppercase) : (segment.segment | translate)}}\n        </span>\n    </ng-template>\n</div>\n", styles: [".bold-text{font-weight:700}.span-margin{margin-right:.4ex}.ellipsis{word-break:break-word!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}\n"], directives: [{ type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "uppercase": i4$1.UpperCasePipe, "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ImmediateFilterTextContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-immediate-filter-text-content', providers: [
@@ -2615,15 +2664,15 @@ class PanelItemComponent extends AbstractPanelItemComponent {
     }
 }
 PanelItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PanelItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PanelItemComponent, selector: "nc-panel-item", usesInheritance: true, ngImport: i0, template: "<span class='text-column-margin' fxLayoutAlign='start center'>\n    <mat-icon class='panel-icon panel-primary-icon' *ngIf='leadingIconEnabled'>\n        {{leadingIcon ? leadingIcon : 'label'}}</mat-icon>\n    <mat-icon class='panel-icon panel-primary-icon'\n              *ngIf=\"!!featuredValue.icon && !!featuredValue.value && featuredValue.type !== 'button' && !leadingIconEnabled\">{{featuredValue.icon}}</mat-icon>\n    <ng-container [ngSwitch]='featuredValue.type'>\n        <span *ngSwitchDefault class=\"panel-text\"\n              [ngClass]=\"{'text-column-ellipsis': textEllipsis, 'text-column-word-wrap': !textEllipsis}\"\n              [matTooltip]='featuredValue.value'\n              [matTooltipDisabled]='!textEllipsis'\n              [matTooltipClass]=\"'pre-line-dialog'\">{{featuredValue.value}}</span>\n        <button *ngSwitchCase=\"'button'\" mat-flat-button color='primary'>{{featuredValue.value}}</button>\n        <nc-immediate-filter-text *ngSwitchCase=\"'filter'\"\n                                  [filterMetadata]='featuredValue.filterMetadata'\n                                  [ellipsis]='textEllipsis'\n                                  class='width-100'>\n        </nc-immediate-filter-text>\n    </ng-container>\n</span>\n", styles: [".text-column-margin{margin-right:15px;line-height:24px}.panel-icon{margin-right:8px}.text-column-ellipsis{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.text-column-word-wrap{word-break:break-word!important;white-space:pre-line!important}.pre-line-dialog{white-space:pre-line!important}.width-100{width:100%}.panel-text{font-style:normal;font-weight:500;font-size:14px;line-height:20px;letter-spacing:.1px}\n"], components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: ImmediateFilterTextComponent, selector: "nc-immediate-filter-text" }], directives: [{ type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
+PanelItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PanelItemComponent, selector: "nc-panel-item", usesInheritance: true, ngImport: i0, template: "<span class='text-column-margin' fxLayoutAlign='start center'>\n    <mat-icon class='panel-icon panel-primary-icon' *ngIf='leadingIconEnabled'>\n        {{leadingIcon ? leadingIcon : 'label'}}</mat-icon>\n    <mat-icon class='panel-icon panel-primary-icon'\n              *ngIf=\"!!featuredValue.icon && !!featuredValue.value && featuredValue.type !== 'button' && !leadingIconEnabled\">{{featuredValue.icon}}</mat-icon>\n    <ng-container [ngSwitch]='featuredValue.type'>\n        <span *ngSwitchDefault class=\"panel-text\"\n              [ngClass]=\"{'text-column-ellipsis': textEllipsis, 'text-column-word-wrap': !textEllipsis}\"\n              [matTooltip]='featuredValue.value'\n              [matTooltipDisabled]='!textEllipsis'\n              [matTooltipClass]=\"'pre-line-dialog'\">{{featuredValue.value}}</span>\n        <button *ngSwitchCase=\"'button'\" mat-flat-button color='primary'>{{featuredValue.value}}</button>\n        <nc-immediate-filter-text *ngSwitchCase=\"'filter'\"\n                                  [filterMetadata]='featuredValue.filterMetadata'\n                                  [ellipsis]='textEllipsis'\n                                  class='width-100'>\n        </nc-immediate-filter-text>\n    </ng-container>\n</span>\n", styles: [".text-column-margin{margin-right:15px;line-height:24px}.panel-icon{margin-right:8px}.text-column-ellipsis{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.text-column-word-wrap{word-break:break-word!important;white-space:pre-line!important}.pre-line-dialog{white-space:pre-line!important}.width-100{width:100%}.panel-text{font-style:normal;font-weight:500;font-size:14px;line-height:20px;letter-spacing:.1px}\n"], components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: ImmediateFilterTextComponent, selector: "nc-immediate-filter-text" }], directives: [{ type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-panel-item', template: "<span class='text-column-margin' fxLayoutAlign='start center'>\n    <mat-icon class='panel-icon panel-primary-icon' *ngIf='leadingIconEnabled'>\n        {{leadingIcon ? leadingIcon : 'label'}}</mat-icon>\n    <mat-icon class='panel-icon panel-primary-icon'\n              *ngIf=\"!!featuredValue.icon && !!featuredValue.value && featuredValue.type !== 'button' && !leadingIconEnabled\">{{featuredValue.icon}}</mat-icon>\n    <ng-container [ngSwitch]='featuredValue.type'>\n        <span *ngSwitchDefault class=\"panel-text\"\n              [ngClass]=\"{'text-column-ellipsis': textEllipsis, 'text-column-word-wrap': !textEllipsis}\"\n              [matTooltip]='featuredValue.value'\n              [matTooltipDisabled]='!textEllipsis'\n              [matTooltipClass]=\"'pre-line-dialog'\">{{featuredValue.value}}</span>\n        <button *ngSwitchCase=\"'button'\" mat-flat-button color='primary'>{{featuredValue.value}}</button>\n        <nc-immediate-filter-text *ngSwitchCase=\"'filter'\"\n                                  [filterMetadata]='featuredValue.filterMetadata'\n                                  [ellipsis]='textEllipsis'\n                                  class='width-100'>\n        </nc-immediate-filter-text>\n    </ng-container>\n</span>\n", styles: [".text-column-margin{margin-right:15px;line-height:24px}.panel-icon{margin-right:8px}.text-column-ellipsis{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.text-column-word-wrap{word-break:break-word!important;white-space:pre-line!important}.pre-line-dialog{white-space:pre-line!important}.width-100{width:100%}.panel-text{font-style:normal;font-weight:500;font-size:14px;line-height:20px;letter-spacing:.1px}\n"] }]
         }], ctorParameters: function () { return []; } });
 
 class TaskPanelComponent extends AbstractTaskPanelComponent {
-    constructor(_taskContentService, _log, _taskViewService, _paperView, _taskEventService, _assignTaskService, _delegateTaskService, _cancelTaskService, _finishTaskService, _taskState, _taskDataService, _assignPolicyService, _finishPolicyService, _callChain, _translate, _taskOperations, _disableFunctions, isEnabled, _parentInjector, _currencyPipe, _changedFieldsService, _permissionService, overflowService, _taskForceOpen) {
-        super(_taskContentService, _log, _taskViewService, _paperView, _taskEventService, _assignTaskService, _delegateTaskService, _cancelTaskService, _finishTaskService, _taskState, _taskDataService, _assignPolicyService, _finishPolicyService, _callChain, _taskOperations, _disableFunctions, _translate, _currencyPipe, _changedFieldsService, _permissionService, overflowService, _taskForceOpen);
+    constructor(_taskContentService, _log, _taskViewService, _paperView, _taskEventService, _assignTaskService, _delegateTaskService, _cancelTaskService, _finishTaskService, _taskState, _taskDataService, _assignPolicyService, _finishPolicyService, _callChain, _translate, _taskOperations, _disableFunctions, isEnabled, _parentInjector, _currencyPipe, _changedFieldsService, _permissionService, overflowService, _taskForceOpen, injectedTabData) {
+        super(_taskContentService, _log, _taskViewService, _paperView, _taskEventService, _assignTaskService, _delegateTaskService, _cancelTaskService, _finishTaskService, _taskState, _taskDataService, _assignPolicyService, _finishPolicyService, _callChain, _taskOperations, _disableFunctions, _translate, _currencyPipe, _changedFieldsService, _permissionService, overflowService, _taskForceOpen, injectedTabData);
         this._taskContentService = _taskContentService;
         this._log = _log;
         this._taskViewService = _taskViewService;
@@ -2664,7 +2713,7 @@ class TaskPanelComponent extends AbstractTaskPanelComponent {
         }
     }
 }
-TaskPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TaskPanelComponent, deps: [{ token: i1.TaskContentService }, { token: i1.LoggerService }, { token: i1.TaskViewService }, { token: i1.PaperViewService }, { token: i1.TaskEventService }, { token: i1.AssignTaskService }, { token: i1.DelegateTaskService }, { token: i1.CancelTaskService }, { token: i1.FinishTaskService }, { token: i1.TaskRequestStateService }, { token: i1.TaskDataService }, { token: i1.AssignPolicyService }, { token: i1.FinishPolicyService }, { token: i1.CallChainService }, { token: i1$2.TranslateService }, { token: NAE_TASK_OPERATIONS }, { token: NAE_TASK_PANEL_DISABLE_BUTTON_FUNCTIONS, optional: true }, { token: BOOLEAN_VALUE_LABEL_ENABLED, optional: true }, { token: i0.Injector }, { token: i4$1.CurrencyPipe }, { token: i1.ChangedFieldsService }, { token: i1.PermissionService }, { token: i1.OverflowService, optional: true }, { token: NAE_TASK_FORCE_OPEN, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TaskPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TaskPanelComponent, deps: [{ token: i1.TaskContentService }, { token: i1.LoggerService }, { token: i1.TaskViewService }, { token: i1.PaperViewService }, { token: i1.TaskEventService }, { token: i1.AssignTaskService }, { token: i1.DelegateTaskService }, { token: i1.CancelTaskService }, { token: i1.FinishTaskService }, { token: i1.TaskRequestStateService }, { token: i1.TaskDataService }, { token: i1.AssignPolicyService }, { token: i1.FinishPolicyService }, { token: i1.CallChainService }, { token: i1$2.TranslateService }, { token: NAE_TASK_OPERATIONS }, { token: NAE_TASK_PANEL_DISABLE_BUTTON_FUNCTIONS, optional: true }, { token: BOOLEAN_VALUE_LABEL_ENABLED, optional: true }, { token: i0.Injector }, { token: i4$1.CurrencyPipe }, { token: i1.ChangedFieldsService }, { token: i1.PermissionService }, { token: i1.OverflowService, optional: true }, { token: NAE_TASK_FORCE_OPEN, optional: true }, { token: NAE_TAB_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
 TaskPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TaskPanelComponent, selector: "nc-task-panel", providers: [
         { provide: TaskContentService, useClass: SingleTaskContentService },
         TaskDataService,
@@ -2680,7 +2729,7 @@ TaskPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
         FinishPolicyService,
         ChangedFieldsService,
         { provide: NAE_TASK_OPERATIONS, useClass: SubjectTaskOperations },
-    ], usesInheritance: true, ngImport: i0, template: "<nc-app-panel [panelContent]=\"taskPanelContent\" [panelHeader]=\"taskPanelHeader\"\n              (stopLoading)=\"stopLoading()\" (getExpansionPanelRef)=\"setPanelRef($event)\" [first]=\"first\" [last]=\"last\"\n              [preventCollapse]='preventCollapse' [hidePanelHeader]='hidePanelHeader'>\n    <ng-template #taskPanelHeader>\n        <div fxLayoutAlign=\"start center\" fxLayout=\"row\" fxFlex=\"95\" (click)=\"preventSelectionClick($event)\">\n            <div *ngFor=\"let field of featuredFieldsValues; let i = index\" fxFlex\n                 class=\"text-column-div\"\n                 [fxHide.lt-xl]=\"i >= 4 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-lg]=\"i >= 3 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-md]=\"i >= 2 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-sm]=\"i >= 1 && responsiveBody && !overflowMode\"\n                 [ngClass]=\"{'panel-header-padding': !textEllipsis && field.type !== 'button'}\">\n                <nc-panel-item\n                    [leadingIcon]=\"taskPanelData.task.icon\"\n                    [leadingIconEnabled]=\"i === 0\"\n                    [featuredValue]=\"field\"\n                    [textEllipsis]=\"textEllipsis\">\n                </nc-panel-item>\n            </div>\n        </div>\n        <div fxLayout=\"row\" fxLayoutAlign=\"end center\" fxFlex=\"5\">\n            <button mat-icon-button (click)=\"preventPanelOpen($event)\"\n                    *ngIf=\"!isLoading && showMoreMenu && (canAssign() || canDo('delegate') || canReassign() || canCancel() || canFinish())\"\n                    [matMenuTriggerFor]=\"menu\">\n                <mat-icon>more_vert</mat-icon>\n            </button>\n            <mat-menu #menu=\"matMenu\">\n                <button mat-menu-item *ngIf=\"canAssign()\" (click)=\"assign()\" [disabled]=\"canDisable('assign')\">\n                    <mat-icon>person</mat-icon>\n                    <span>{{ getAssignTitle() | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canDo('delegate')\" (click)=\"delegate()\"\n                        [disabled]=\"canDisable('delegate')\">\n                    <mat-icon>person_outline</mat-icon>\n                    <span>{{ getDelegateTitle() | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canReassign()\" (click)=\"delegate()\" [disabled]=\"canDisable('reassign')\">\n                    <mat-icon>person_add</mat-icon>\n                    <span>{{ 'tasks.view.reassign' | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canCancel()\" (click)=\"cancel()\" [disabled]=\"canDisable('cancel')\">\n                    <mat-icon>cancel</mat-icon>\n                    <span>{{ getCancelTitle() | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canFinish()\" (click)=\"finish()\" [disabled]=\"canDisable('finish')\">\n                    <mat-icon>done</mat-icon>\n                    <span>{{ getFinishTitle() | translate}}</span>\n                </button>\n            </mat-menu>\n            <mat-spinner *ngIf=\"isLoading\" [diameter]=\"30\"></mat-spinner>\n        </div>\n    </ng-template>\n    <ng-template #taskPanelContent>\n        <div class=\"panel-main-content\" fxLayout=\"column\"\n             [ngStyle]=\"(isForceOpen() && {'min-height': getContentMinHeight()}) || null\">\n            <div class=\"task-panel-body\" [ngClass]=\"{'paper-view': isPaperView()}\" fxFlex=\"100\">\n                <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n            </div>\n            <mat-action-row *ngIf=\"!hideActionRow\" fxLayout.lt-sm=\"column\" [ngStyle]=\"{'justify-content': actionRowJustifyContent ?? 'flex-end' }\">\n                <mat-spinner class='action-row-spinner' *ngIf=\"isLoading && hidePanelHeader\"\n                             [diameter]=\"20\"></mat-spinner>\n                <div fxLayoutAlign.lt-sm=\"center stretch\" ngClass.lt-sm=\"width-100\"\n                     *ngFor='let button of (!!actionButtonTemplates && actionButtonTemplates.length > 0 ?\n                    actionButtonTemplates : [assignButton, delegateButton, reassignButton, cancelButton, finishButton, collapseButton])'>\n                    <ng-container *ngTemplateOutlet='button; context:thisContext'></ng-container>\n                </div>\n            </mat-action-row>\n        </div>\n    </ng-template>\n</nc-app-panel>\n\n<ng-template #assignButton>\n    <button *ngIf=\"canAssign() && getAssignTitle()?.length > 0\" (click)=\"assign()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('assign')\">\n        {{ getAssignTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #delegateButton>\n    <button *ngIf=\"canDo('delegate') && getDelegateTitle()?.length > 0\" (click)=\"delegate()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('delegate')\">\n        {{ getDelegateTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #reassignButton>\n    <button *ngIf=\"canReassign()\" (click)=\"delegate()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('reassign')\">\n        {{ 'tasks.view.reassign' | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #cancelButton>\n    <button *ngIf=\"canCancel() && getCancelTitle()?.length > 0\" (click)=\"cancel()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('cancel')\">\n        {{ getCancelTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #finishButton>\n    <button *ngIf=\"canFinish() && getFinishTitle()?.length > 0\" (click)=\"finish()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('finish')\">\n        {{ getFinishTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #collapseButton>\n    <button *ngIf=\"canCollapse()\" color=\"primary\" (click)=\"collapse()\" mat-stroked-button color=\"primary\">\n        {{ 'tasks.view.collapse' | translate | uppercase }}</button>\n</ng-template>\n", styles: [".task-panel-icon{margin-right:8px}.task-panel-footer{border-top:1px solid rgba(0,0,0,.03);padding:5px 24px}.task-panel-body{padding:10px 24px}.paper-view{margin:auto}.width-100{width:100%}.text-column-ellipsis{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.text-column-word-wrap{word-break:break-word!important;white-space:pre-line!important}.text-column-div{min-width:0;width:0}.text-column-margin{margin-right:15px;line-height:24px}.panel-header-padding{padding:9px 0!important}.pre-line-dialog{white-space:pre-line!important}.action-row-spinner{box-sizing:border-box;width:20px;height:20px;display:inline;margin:auto 5px}@media only screen and (max-width: 959.99px){.task-panel-body{padding:10px 0}.task-panel-action-row{padding:8px}}\n"], components: [{ type: PanelComponent, selector: "nc-app-panel" }, { type: PanelItemComponent, selector: "nc-panel-item" }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i10$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i10$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7$1.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i1$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { type: i9.MatExpansionPanelActionRow, selector: "mat-action-row" }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i1$2.TranslatePipe, "uppercase": i4$1.UpperCasePipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<nc-app-panel [panelContent]=\"taskPanelContent\" [panelHeader]=\"taskPanelHeader\"\n              (stopLoading)=\"stopLoading()\" (getExpansionPanelRef)=\"setPanelRef($event)\" [first]=\"first\" [last]=\"last\"\n              [preventCollapse]='preventCollapse' [hidePanelHeader]='hidePanelHeader'>\n    <ng-template #taskPanelHeader>\n        <div fxLayoutAlign=\"start center\" fxLayout=\"row\" fxFlex=\"95\" (click)=\"preventSelectionClick($event)\">\n            <div *ngFor=\"let field of featuredFieldsValues; let i = index\" fxFlex\n                 class=\"text-column-div\"\n                 [fxHide.lt-xl]=\"i >= 4 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-lg]=\"i >= 3 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-md]=\"i >= 2 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-sm]=\"i >= 1 && responsiveBody && !overflowMode\"\n                 [ngClass]=\"{'panel-header-padding': !textEllipsis && field.type !== 'button'}\">\n                <nc-panel-item\n                    [leadingIcon]=\"taskPanelData.task.icon\"\n                    [leadingIconEnabled]=\"i === 0\"\n                    [featuredValue]=\"field\"\n                    [textEllipsis]=\"textEllipsis\">\n                </nc-panel-item>\n            </div>\n        </div>\n        <div fxLayout=\"row\" fxLayoutAlign=\"end center\" fxFlex=\"5\">\n            <button mat-icon-button (click)=\"preventPanelOpen($event)\"\n                    *ngIf=\"!isLoading && showMoreMenu && (canAssign() || canDo('delegate') || canReassign() || canCancel() || canFinish())\"\n                    [matMenuTriggerFor]=\"menu\">\n                <mat-icon>more_vert</mat-icon>\n            </button>\n            <mat-menu #menu=\"matMenu\">\n                <button mat-menu-item *ngIf=\"canAssign()\" (click)=\"assign()\" [disabled]=\"canDisable('assign')\">\n                    <mat-icon>person</mat-icon>\n                    <span>{{ getAssignTitle() | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canDo('delegate')\" (click)=\"delegate()\"\n                        [disabled]=\"canDisable('delegate')\">\n                    <mat-icon>person_outline</mat-icon>\n                    <span>{{ getDelegateTitle() | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canReassign()\" (click)=\"delegate()\" [disabled]=\"canDisable('reassign')\">\n                    <mat-icon>person_add</mat-icon>\n                    <span>{{ 'tasks.view.reassign' | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canCancel()\" (click)=\"cancel()\" [disabled]=\"canDisable('cancel')\">\n                    <mat-icon>cancel</mat-icon>\n                    <span>{{ getCancelTitle() | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canFinish()\" (click)=\"finish()\" [disabled]=\"canDisable('finish')\">\n                    <mat-icon>done</mat-icon>\n                    <span>{{ getFinishTitle() | translate}}</span>\n                </button>\n            </mat-menu>\n            <mat-spinner *ngIf=\"isLoading\" [diameter]=\"30\"></mat-spinner>\n        </div>\n    </ng-template>\n    <ng-template #taskPanelContent>\n        <div class=\"panel-main-content\" fxLayout=\"column\"\n             [ngStyle]=\"(isForceOpen() && {'min-height': getContentMinHeight()}) || null\">\n            <div class=\"task-panel-body\" [ngClass]=\"{'paper-view': isPaperView()}\" fxFlex=\"100\">\n                <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n            </div>\n            <mat-action-row *ngIf=\"!hideActionRow\" fxLayout.lt-sm=\"column\" [ngStyle]=\"{'justify-content': actionRowJustifyContent ?? 'flex-end' }\">\n                <mat-spinner class='action-row-spinner' *ngIf=\"isLoading && hidePanelHeader\"\n                             [diameter]=\"20\"></mat-spinner>\n                <div fxLayoutAlign.lt-sm=\"center stretch\" ngClass.lt-sm=\"width-100\"\n                     *ngFor='let button of (!!actionButtonTemplates && actionButtonTemplates.length > 0 ?\n                    actionButtonTemplates : [assignButton, delegateButton, reassignButton, cancelButton, finishButton, collapseButton])'>\n                    <ng-container *ngTemplateOutlet='button; context:thisContext'></ng-container>\n                </div>\n            </mat-action-row>\n        </div>\n    </ng-template>\n</nc-app-panel>\n\n<ng-template #assignButton>\n    <button *ngIf=\"canAssign() && getAssignTitle()?.length > 0\" (click)=\"assign()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('assign')\">\n        {{ getAssignTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #delegateButton>\n    <button *ngIf=\"canDo('delegate') && getDelegateTitle()?.length > 0\" (click)=\"delegate()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('delegate')\">\n        {{ getDelegateTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #reassignButton>\n    <button *ngIf=\"canReassign()\" (click)=\"delegate()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('reassign')\">\n        {{ 'tasks.view.reassign' | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #cancelButton>\n    <button *ngIf=\"canCancel() && getCancelTitle()?.length > 0\" (click)=\"cancel()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('cancel')\">\n        {{ getCancelTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #finishButton>\n    <button *ngIf=\"canFinish() && getFinishTitle()?.length > 0\" (click)=\"finish()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('finish')\">\n        {{ getFinishTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #collapseButton>\n    <button *ngIf=\"canCollapse()\" color=\"primary\" (click)=\"collapse()\" mat-stroked-button color=\"primary\">\n        {{ 'tasks.view.collapse' | translate | uppercase }}</button>\n</ng-template>\n", styles: [".task-panel-icon{margin-right:8px}.task-panel-footer{border-top:1px solid rgba(0,0,0,.03);padding:5px 24px}.task-panel-body{padding:10px 24px}.paper-view{margin:auto}.width-100{width:100%}.text-column-ellipsis{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.text-column-word-wrap{word-break:break-word!important;white-space:pre-line!important}.text-column-div{min-width:0;width:0}.text-column-margin{margin-right:15px;line-height:24px}.panel-header-padding{padding:9px 0!important}.pre-line-dialog{white-space:pre-line!important}.action-row-spinner{box-sizing:border-box;width:20px;height:20px;display:inline;margin:auto 5px}@media only screen and (max-width: 959.99px){.task-panel-body{padding:10px 0}.task-panel-action-row{padding:8px}}\n"], components: [{ type: PanelComponent, selector: "nc-app-panel" }, { type: PanelItemComponent, selector: "nc-panel-item" }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i10$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i10$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$2.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i1$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { type: i9.MatExpansionPanelActionRow, selector: "mat-action-row" }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i1$2.TranslatePipe, "uppercase": i4$1.UpperCasePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TaskPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-task-panel', providers: [
@@ -2720,6 +2769,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     }, {
                         type: Inject,
                         args: [NAE_TASK_FORCE_OPEN]
+                    }] }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [NAE_TAB_DATA]
                     }] }];
     } });
 
@@ -2732,7 +2786,7 @@ class TaskListPaginationComponent extends AbstractTaskListPaginationComponent {
     }
 }
 TaskListPaginationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TaskListPaginationComponent, deps: [{ token: i1.TaskViewService }, { token: i1.LoggerService }, { token: NAE_TAB_DATA, optional: true }, { token: i2$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-TaskListPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TaskListPaginationComponent, selector: "nc-task-list-pagination", providers: [{ provide: MatPaginatorIntl, useClass: NetgrifPaginatorIntl }], usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex>\n    <ng-container *ngIf=\"tasks$ | async as tasks\">\n\n        <div *ngIf=\"(loading$ | async) === false && tasks.length === 0\" fxLayout=\"column\" fxLayoutAlign=\"center center\"\n             fxFlex>\n            <mat-icon color=\"accent\">check_box</mat-icon>\n            <span class=\"font-size-20\">{{ 'tasks.view.noTasksSatisfyingThisFilter' | translate }}</span>\n        </div>\n\n        <mat-accordion [multi]=\"allowMultiOpen\" class=\"full-width\" >\n            <div class=\"fix-padding\">\n                <nc-task-panel #panel\n                    [textEllipsis]=\"textEllipsis\"\n                    *ngFor=\"let task of tasks | slice: (pageIndex) * pageSize : (pageIndex + 1) * pageSize;\n                                    let i = index;\n                                    let first = first;\n                                    let last = last;\n                                    trackBy: trackBy\"\n                    [taskPanelData]=\"task\" [selectedHeaders$]=\"selectedHeaders$\" [first]=\"first\" [last]=\"last\"\n                    [forceLoadDataOnOpen]=\"forceLoadDataOnOpen\"\n                    [responsiveBody]=\"responsiveBody\"\n                    (taskEvent)=\"emitTaskEvent($event)\"\n                    (panelRefOutput)=\"addToPanelRefs(task, $event)\"\n                    [showMoreMenu]=\"showMoreMenu\"\n                    class=\"panel-expanded-spacing\" [ngClass]=\"{'single-task-fix': tasks.length === 1 && panel.isExpanded()}\">\n                </nc-task-panel>\n\n                <div *ngIf=\"loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n                    <mat-spinner color=\"primary\" diameter=\"52\"></mat-spinner>\n                </div>\n            </div>\n        </mat-accordion>\n        <mat-paginator [length]=\"length\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\" color=\"primary\" [disabled]=\"disabled\"\n                       [pageSizeOptions]=\"pageSizeOptions\" (page)=\"onPageChanged($event)\" showFirstLastButtons>\n        </mat-paginator>\n    </ng-container>\n</div>\n", styles: [".font-size-20{font-size:20px}.full-width{width:100%}.full-height{height:100%}.fix-padding{padding:0 1px}\n"], components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: TaskPanelComponent, selector: "nc-task-panel" }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i6$3.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1$2.TranslatePipe, "slice": i4$1.SlicePipe } });
+TaskListPaginationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TaskListPaginationComponent, selector: "nc-task-list-pagination", providers: [{ provide: MatPaginatorIntl, useClass: NetgrifPaginatorIntl }], usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex>\n    <ng-container *ngIf=\"tasks$ | async as tasks\">\n\n        <div *ngIf=\"(loading$ | async) === false && tasks.length === 0\" fxLayout=\"column\" fxLayoutAlign=\"center center\"\n             fxFlex>\n            <mat-icon color=\"accent\">check_box</mat-icon>\n            <span class=\"font-size-20\">{{ 'tasks.view.noTasksSatisfyingThisFilter' | translate }}</span>\n        </div>\n\n        <mat-accordion [multi]=\"allowMultiOpen\" class=\"full-width\" >\n            <div class=\"fix-padding\">\n                <nc-task-panel #panel\n                    [textEllipsis]=\"textEllipsis\"\n                    *ngFor=\"let task of tasks | slice: (pageIndex) * pageSize : (pageIndex + 1) * pageSize;\n                                    let i = index;\n                                    let first = first;\n                                    let last = last;\n                                    trackBy: trackBy\"\n                    [taskPanelData]=\"task\" [selectedHeaders$]=\"selectedHeaders$\" [first]=\"first\" [last]=\"last\"\n                    [forceLoadDataOnOpen]=\"forceLoadDataOnOpen\"\n                    [responsiveBody]=\"responsiveBody\"\n                    (taskEvent)=\"emitTaskEvent($event)\"\n                    (panelRefOutput)=\"addToPanelRefs(task, $event)\"\n                    [showMoreMenu]=\"showMoreMenu\"\n                    class=\"panel-expanded-spacing\" [ngClass]=\"{'single-task-fix': tasks.length === 1 && panel.isExpanded()}\">\n                </nc-task-panel>\n\n                <div *ngIf=\"loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n                    <mat-spinner color=\"primary\" diameter=\"52\"></mat-spinner>\n                </div>\n            </div>\n        </mat-accordion>\n        <mat-paginator [length]=\"length\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\" color=\"primary\" [disabled]=\"disabled\"\n                       [pageSizeOptions]=\"pageSizeOptions\" (page)=\"onPageChanged($event)\" showFirstLastButtons>\n        </mat-paginator>\n    </ng-container>\n</div>\n", styles: [".font-size-20{font-size:20px}.full-width{width:100%}.full-height{height:100%}.fix-padding{padding:0 1px}\n"], components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: TaskPanelComponent, selector: "nc-task-panel" }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i6$3.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1$2.TranslatePipe, "slice": i4$1.SlicePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TaskListPaginationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-task-list-pagination', providers: [{ provide: MatPaginatorIntl, useClass: NetgrifPaginatorIntl }], template: "<div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex>\n    <ng-container *ngIf=\"tasks$ | async as tasks\">\n\n        <div *ngIf=\"(loading$ | async) === false && tasks.length === 0\" fxLayout=\"column\" fxLayoutAlign=\"center center\"\n             fxFlex>\n            <mat-icon color=\"accent\">check_box</mat-icon>\n            <span class=\"font-size-20\">{{ 'tasks.view.noTasksSatisfyingThisFilter' | translate }}</span>\n        </div>\n\n        <mat-accordion [multi]=\"allowMultiOpen\" class=\"full-width\" >\n            <div class=\"fix-padding\">\n                <nc-task-panel #panel\n                    [textEllipsis]=\"textEllipsis\"\n                    *ngFor=\"let task of tasks | slice: (pageIndex) * pageSize : (pageIndex + 1) * pageSize;\n                                    let i = index;\n                                    let first = first;\n                                    let last = last;\n                                    trackBy: trackBy\"\n                    [taskPanelData]=\"task\" [selectedHeaders$]=\"selectedHeaders$\" [first]=\"first\" [last]=\"last\"\n                    [forceLoadDataOnOpen]=\"forceLoadDataOnOpen\"\n                    [responsiveBody]=\"responsiveBody\"\n                    (taskEvent)=\"emitTaskEvent($event)\"\n                    (panelRefOutput)=\"addToPanelRefs(task, $event)\"\n                    [showMoreMenu]=\"showMoreMenu\"\n                    class=\"panel-expanded-spacing\" [ngClass]=\"{'single-task-fix': tasks.length === 1 && panel.isExpanded()}\">\n                </nc-task-panel>\n\n                <div *ngIf=\"loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n                    <mat-spinner color=\"primary\" diameter=\"52\"></mat-spinner>\n                </div>\n            </div>\n        </mat-accordion>\n        <mat-paginator [length]=\"length\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\" color=\"primary\" [disabled]=\"disabled\"\n                       [pageSizeOptions]=\"pageSizeOptions\" (page)=\"onPageChanged($event)\" showFirstLastButtons>\n        </mat-paginator>\n    </ng-container>\n</div>\n", styles: [".font-size-20{font-size:20px}.full-width{width:100%}.full-height{height:100%}.fix-padding{padding:0 1px}\n"] }]
@@ -2937,7 +2991,7 @@ class TaskListComponent extends AbstractTaskListComponent {
     }
 }
 TaskListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TaskListComponent, deps: [{ token: i1.TaskViewService }, { token: i1.LoggerService }, { token: NAE_TAB_DATA, optional: true }, { token: i2$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-TaskListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TaskListComponent, selector: "nc-task-list", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"showVirtualScroll\" fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex>\n    <ng-container *ngIf=\"tasks$ | async as tasks\">\n\n        <div *ngIf=\"(loading$ | async) === false && tasks.length === 0\" fxLayout=\"column\" fxLayoutAlign=\"center center\"\n             fxFlex>\n            <mat-icon color=\"accent\">check_box</mat-icon>\n            <span class=\"font-size-20\">{{ 'tasks.view.noTasksSatisfyingThisFilter' | translate }}</span>\n        </div>\n\n        <mat-accordion [multi]=\"allowMultiOpen\" class=\"full-width panel-list-content\" fxFlex=\"100\">\n            <cdk-virtual-scroll-viewport itemSize=\"52\" (scrolledIndexChange)=\"loadNextPage()\" #taskListVirtualScroll\n                                         [ngClass]=\"{'task-panel-scroll-container': (loading$ | async) === false && tasks.length > 0}\" class=\"full-width full-height dashboard-task-list\">\n                <nc-task-panel\n                    [textEllipsis]=\"textEllipsis\"\n                    *cdkVirtualFor=\"let task of tasks;\n                                    let i = index;\n                                    let first = first;\n                                    let last = last;\n                                    trackBy: trackBy;\n                                    templateCacheSize: 0\"\n                    [taskPanelData]=\"task\" [selectedHeaders$]=\"selectedHeaders$\" [first]=\"first\" [last]=\"last\"\n                    [forceLoadDataOnOpen]=\"forceLoadDataOnOpen\"\n                    [responsiveBody]=\"responsiveBody\"\n                    (taskEvent)=\"emitTaskEvent($event)\"\n                    (panelRefOutput)=\"addToPanelRefs(task, $event)\"\n                    [taskListVirtualScroll]=\"taskListVirtualScroll\"\n                    [showMoreMenu]=\"showMoreMenu\"\n                    class=\"panel-expanded-spacing\">\n                </nc-task-panel>\n\n                <div *ngIf=\"loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n                    <mat-spinner color=\"primary\" diameter=\"52\"></mat-spinner>\n                </div>\n\n            </cdk-virtual-scroll-viewport>\n        </mat-accordion>\n\n    </ng-container>\n</div>\n\n<div *ngIf=\"!showVirtualScroll\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n    <mat-spinner color=\"primary\" diameter=\"52\"></mat-spinner>\n</div>\n", styles: [".font-size-20{font-size:20px}.full-width{width:100%}.full-height{height:100%}\n"], components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: TaskPanelComponent, selector: "nc-task-panel" }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i9.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1$2.TranslatePipe } });
+TaskListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TaskListComponent, selector: "nc-task-list", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"showVirtualScroll\" fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex>\n    <ng-container *ngIf=\"tasks$ | async as tasks\">\n\n        <div *ngIf=\"(loading$ | async) === false && tasks.length === 0\" fxLayout=\"column\" fxLayoutAlign=\"center center\"\n             fxFlex>\n            <mat-icon color=\"accent\">check_box</mat-icon>\n            <span class=\"font-size-20\">{{ 'tasks.view.noTasksSatisfyingThisFilter' | translate }}</span>\n        </div>\n\n        <mat-accordion [multi]=\"allowMultiOpen\" class=\"full-width panel-list-content\" fxFlex=\"100\">\n            <cdk-virtual-scroll-viewport itemSize=\"52\" (scrolledIndexChange)=\"loadNextPage()\" #taskListVirtualScroll\n                                         [ngClass]=\"{'task-panel-scroll-container': (loading$ | async) === false && tasks.length > 0}\" class=\"full-width full-height dashboard-task-list\">\n                <nc-task-panel\n                    [textEllipsis]=\"textEllipsis\"\n                    *cdkVirtualFor=\"let task of tasks;\n                                    let i = index;\n                                    let first = first;\n                                    let last = last;\n                                    trackBy: trackBy;\n                                    templateCacheSize: 0\"\n                    [taskPanelData]=\"task\" [selectedHeaders$]=\"selectedHeaders$\" [first]=\"first\" [last]=\"last\"\n                    [forceLoadDataOnOpen]=\"forceLoadDataOnOpen\"\n                    [responsiveBody]=\"responsiveBody\"\n                    (taskEvent)=\"emitTaskEvent($event)\"\n                    (panelRefOutput)=\"addToPanelRefs(task, $event)\"\n                    [taskListVirtualScroll]=\"taskListVirtualScroll\"\n                    [showMoreMenu]=\"showMoreMenu\"\n                    class=\"panel-expanded-spacing\">\n                </nc-task-panel>\n\n                <div *ngIf=\"loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n                    <mat-spinner color=\"primary\" diameter=\"52\"></mat-spinner>\n                </div>\n\n            </cdk-virtual-scroll-viewport>\n        </mat-accordion>\n\n    </ng-container>\n</div>\n\n<div *ngIf=\"!showVirtualScroll\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n    <mat-spinner color=\"primary\" diameter=\"52\"></mat-spinner>\n</div>\n", styles: [".font-size-20{font-size:20px}.full-width{width:100%}.full-height{height:100%}\n"], components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: TaskPanelComponent, selector: "nc-task-panel" }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i9.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TaskListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-task-list', template: "<div *ngIf=\"showVirtualScroll\" fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex>\n    <ng-container *ngIf=\"tasks$ | async as tasks\">\n\n        <div *ngIf=\"(loading$ | async) === false && tasks.length === 0\" fxLayout=\"column\" fxLayoutAlign=\"center center\"\n             fxFlex>\n            <mat-icon color=\"accent\">check_box</mat-icon>\n            <span class=\"font-size-20\">{{ 'tasks.view.noTasksSatisfyingThisFilter' | translate }}</span>\n        </div>\n\n        <mat-accordion [multi]=\"allowMultiOpen\" class=\"full-width panel-list-content\" fxFlex=\"100\">\n            <cdk-virtual-scroll-viewport itemSize=\"52\" (scrolledIndexChange)=\"loadNextPage()\" #taskListVirtualScroll\n                                         [ngClass]=\"{'task-panel-scroll-container': (loading$ | async) === false && tasks.length > 0}\" class=\"full-width full-height dashboard-task-list\">\n                <nc-task-panel\n                    [textEllipsis]=\"textEllipsis\"\n                    *cdkVirtualFor=\"let task of tasks;\n                                    let i = index;\n                                    let first = first;\n                                    let last = last;\n                                    trackBy: trackBy;\n                                    templateCacheSize: 0\"\n                    [taskPanelData]=\"task\" [selectedHeaders$]=\"selectedHeaders$\" [first]=\"first\" [last]=\"last\"\n                    [forceLoadDataOnOpen]=\"forceLoadDataOnOpen\"\n                    [responsiveBody]=\"responsiveBody\"\n                    (taskEvent)=\"emitTaskEvent($event)\"\n                    (panelRefOutput)=\"addToPanelRefs(task, $event)\"\n                    [taskListVirtualScroll]=\"taskListVirtualScroll\"\n                    [showMoreMenu]=\"showMoreMenu\"\n                    class=\"panel-expanded-spacing\">\n                </nc-task-panel>\n\n                <div *ngIf=\"loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n                    <mat-spinner color=\"primary\" diameter=\"52\"></mat-spinner>\n                </div>\n\n            </cdk-virtual-scroll-viewport>\n        </mat-accordion>\n\n    </ng-container>\n</div>\n\n<div *ngIf=\"!showVirtualScroll\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n    <mat-spinner color=\"primary\" diameter=\"52\"></mat-spinner>\n</div>\n", styles: [".font-size-20{font-size:20px}.full-width{width:100%}.full-height{height:100%}\n"] }]
@@ -3169,7 +3223,7 @@ class CasePanelComponent extends AbstractCasePanelComponent {
     }
 }
 CasePanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CasePanelComponent, deps: [{ token: i1.CaseResourceService }, { token: i1.CaseViewService }, { token: i1.SnackBarService }, { token: i1$2.TranslateService }, { token: i1.LoggerService }, { token: i1.UserService }, { token: i4$1.CurrencyPipe }, { token: i1.PermissionService }, { token: i1.OverflowService, optional: true }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-CasePanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CasePanelComponent, selector: "nc-case-panel", usesInheritance: true, ngImport: i0, template: "<nc-app-panel [panelHeader]=\"casePanelHeader\" [preventExpand]=\"true\" [first]=\"first\" [last]=\"last\"\n              [caseColor]=case_.color>\n    <ng-template #casePanelHeader>\n        <div fxLayoutAlign=\"start center\" fxLayout=\"row\" fxFlex=\"95\" (click)=\"preventSelectionClick($event)\">\n            <mat-checkbox *ngIf=\"approval && typeApproval() === 'multichoice'\" [formControl]=\"approvalFormControl\" (click)=\"$event.stopPropagation();\" color='primary' class=\"checkbox-padding\"></mat-checkbox>\n            <mat-radio-group *ngIf=\"approval && typeApproval() === 'enumeration'\" [formControl]=\"approvalFormControl\" (click)=\"$event.stopPropagation();\" class=\"radio-padding\" color='primary'>\n                <mat-radio-button [value]=\"caseValue()\"></mat-radio-button>\n            </mat-radio-group>\n            <div *ngFor=\"let field of featuredFieldsValues; let i = index\" fxFlex\n                 class=\"text-column-div\" [ngStyle]=\"{'min-width': getMinWidth()}\"\n                 [fxHide.lt-xl]=\"i >= 4 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-lg]=\"i >= 3 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-md]=\"i >= 2 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-sm]=\"i >= 1 && responsiveBody && !overflowMode\"\n                 [ngClass]=\"{'panel-header-padding': !textEllipsis && field.type !== 'button'}\">\n                <nc-panel-item\n                    [leadingIcon]=\"case_.icon\"\n                    [leadingIconEnabled]=\"i === 0\"\n                    [featuredValue]=\"field\"\n                    [textEllipsis]=\"textEllipsis\">\n                </nc-panel-item>\n            </div>\n        </div>\n        <div fxLayout=\"row\" fxLayoutAlign=\"end center\" fxFlex=\"5\">\n            <div *ngIf=\"showDeleteMenu && canDelete()\">\n                <button mat-icon-button (click)=\"show($event)\" [matMenuTriggerFor]=\"menu\">\n                    <mat-icon>more_vert</mat-icon>\n                </button>\n                <mat-menu #menu=\"matMenu\">\n                    <button mat-menu-item (click)=\"deleteCase()\">\n                        <mat-icon>delete</mat-icon>\n                        <span>{{ 'panel.case.delete' | translate}}</span>\n                    </button>\n                </mat-menu>\n            </div>\n        </div>\n    </ng-template>\n</nc-app-panel>\n", styles: [".case-panel-icon{margin-right:8px}.panel-main-content{margin-top:16px}.text-column-ellipsis{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.text-column-word-wrap{word-break:break-word!important;white-space:pre-line!important}.text-column-margin{margin-right:15px;line-height:24px}.text-column-div{min-width:0;width:0}.panel-header-padding{padding:9px 0!important}.width-100{width:100%}.pre-line-dialog{white-space:pre-line!important}.checkbox-padding{padding-right:12px}.radio-padding{padding-left:2px;padding-right:6px}\n"], components: [{ type: PanelComponent, selector: "nc-app-panel" }, { type: i1$5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3$5.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: PanelItemComponent, selector: "nc-panel-item" }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i10$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i10$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$5.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i7$1.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i10$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], pipes: { "translate": i1$2.TranslatePipe } });
+CasePanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CasePanelComponent, selector: "nc-case-panel", usesInheritance: true, ngImport: i0, template: "<nc-app-panel [panelHeader]=\"casePanelHeader\" [preventExpand]=\"true\" [first]=\"first\" [last]=\"last\"\n              [caseColor]=case_.color>\n    <ng-template #casePanelHeader>\n        <div fxLayoutAlign=\"start center\" fxLayout=\"row\" fxFlex=\"95\" (click)=\"preventSelectionClick($event)\">\n            <mat-checkbox *ngIf=\"approval && typeApproval() === 'multichoice'\" [formControl]=\"approvalFormControl\" (click)=\"$event.stopPropagation();\" color='primary' class=\"checkbox-padding\"></mat-checkbox>\n            <mat-radio-group *ngIf=\"approval && typeApproval() === 'enumeration'\" [formControl]=\"approvalFormControl\" (click)=\"$event.stopPropagation();\" class=\"radio-padding\" color='primary'>\n                <mat-radio-button [value]=\"caseValue()\"></mat-radio-button>\n            </mat-radio-group>\n            <div *ngFor=\"let field of featuredFieldsValues; let i = index\" fxFlex\n                 class=\"text-column-div\" [ngStyle]=\"{'min-width': getMinWidth()}\"\n                 [fxHide.lt-xl]=\"i >= 4 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-lg]=\"i >= 3 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-md]=\"i >= 2 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-sm]=\"i >= 1 && responsiveBody && !overflowMode\"\n                 [ngClass]=\"{'panel-header-padding': !textEllipsis && field.type !== 'button'}\">\n                <nc-panel-item\n                    [leadingIcon]=\"case_.icon\"\n                    [leadingIconEnabled]=\"i === 0\"\n                    [featuredValue]=\"field\"\n                    [textEllipsis]=\"textEllipsis\">\n                </nc-panel-item>\n            </div>\n        </div>\n        <div fxLayout=\"row\" fxLayoutAlign=\"end center\" fxFlex=\"5\">\n            <div *ngIf=\"showDeleteMenu && canDelete()\">\n                <button mat-icon-button (click)=\"show($event)\" [matMenuTriggerFor]=\"menu\">\n                    <mat-icon>more_vert</mat-icon>\n                </button>\n                <mat-menu #menu=\"matMenu\">\n                    <button mat-menu-item (click)=\"deleteCase()\">\n                        <mat-icon>delete</mat-icon>\n                        <span>{{ 'panel.case.delete' | translate}}</span>\n                    </button>\n                </mat-menu>\n            </div>\n        </div>\n    </ng-template>\n</nc-app-panel>\n", styles: [".case-panel-icon{margin-right:8px}.panel-main-content{margin-top:16px}.text-column-ellipsis{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.text-column-word-wrap{word-break:break-word!important;white-space:pre-line!important}.text-column-margin{margin-right:15px;line-height:24px}.text-column-div{min-width:0;width:0}.panel-header-padding{padding:9px 0!important}.width-100{width:100%}.pre-line-dialog{white-space:pre-line!important}.checkbox-padding{padding-right:12px}.radio-padding{padding-left:2px;padding-right:6px}\n"], components: [{ type: PanelComponent, selector: "nc-app-panel" }, { type: i1$5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3$5.MatRadioButton, selector: "mat-radio-button", inputs: ["disableRipple", "tabIndex"], exportAs: ["matRadioButton"] }, { type: PanelItemComponent, selector: "nc-panel-item" }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i10$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i10$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i3$5.MatRadioGroup, selector: "mat-radio-group", exportAs: ["matRadioGroup"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i6$2.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i10$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], pipes: { "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CasePanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-case-panel', template: "<nc-app-panel [panelHeader]=\"casePanelHeader\" [preventExpand]=\"true\" [first]=\"first\" [last]=\"last\"\n              [caseColor]=case_.color>\n    <ng-template #casePanelHeader>\n        <div fxLayoutAlign=\"start center\" fxLayout=\"row\" fxFlex=\"95\" (click)=\"preventSelectionClick($event)\">\n            <mat-checkbox *ngIf=\"approval && typeApproval() === 'multichoice'\" [formControl]=\"approvalFormControl\" (click)=\"$event.stopPropagation();\" color='primary' class=\"checkbox-padding\"></mat-checkbox>\n            <mat-radio-group *ngIf=\"approval && typeApproval() === 'enumeration'\" [formControl]=\"approvalFormControl\" (click)=\"$event.stopPropagation();\" class=\"radio-padding\" color='primary'>\n                <mat-radio-button [value]=\"caseValue()\"></mat-radio-button>\n            </mat-radio-group>\n            <div *ngFor=\"let field of featuredFieldsValues; let i = index\" fxFlex\n                 class=\"text-column-div\" [ngStyle]=\"{'min-width': getMinWidth()}\"\n                 [fxHide.lt-xl]=\"i >= 4 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-lg]=\"i >= 3 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-md]=\"i >= 2 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-sm]=\"i >= 1 && responsiveBody && !overflowMode\"\n                 [ngClass]=\"{'panel-header-padding': !textEllipsis && field.type !== 'button'}\">\n                <nc-panel-item\n                    [leadingIcon]=\"case_.icon\"\n                    [leadingIconEnabled]=\"i === 0\"\n                    [featuredValue]=\"field\"\n                    [textEllipsis]=\"textEllipsis\">\n                </nc-panel-item>\n            </div>\n        </div>\n        <div fxLayout=\"row\" fxLayoutAlign=\"end center\" fxFlex=\"5\">\n            <div *ngIf=\"showDeleteMenu && canDelete()\">\n                <button mat-icon-button (click)=\"show($event)\" [matMenuTriggerFor]=\"menu\">\n                    <mat-icon>more_vert</mat-icon>\n                </button>\n                <mat-menu #menu=\"matMenu\">\n                    <button mat-menu-item (click)=\"deleteCase()\">\n                        <mat-icon>delete</mat-icon>\n                        <span>{{ 'panel.case.delete' | translate}}</span>\n                    </button>\n                </mat-menu>\n            </div>\n        </div>\n    </ng-template>\n</nc-app-panel>\n", styles: [".case-panel-icon{margin-right:8px}.panel-main-content{margin-top:16px}.text-column-ellipsis{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.text-column-word-wrap{word-break:break-word!important;white-space:pre-line!important}.text-column-margin{margin-right:15px;line-height:24px}.text-column-div{min-width:0;width:0}.panel-header-padding{padding:9px 0!important}.width-100{width:100%}.pre-line-dialog{white-space:pre-line!important}.checkbox-padding{padding-right:12px}.radio-padding{padding-left:2px;padding-right:6px}\n"] }]
@@ -3196,7 +3250,7 @@ class CaseListPaginatorComponent extends AbstractCaseListPaginatorComponent {
     }
 }
 CaseListPaginatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CaseListPaginatorComponent, deps: [{ token: i1.CaseViewService }, { token: i1.LoggerService }, { token: NAE_TAB_DATA, optional: true }, { token: i2$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-CaseListPaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CaseListPaginatorComponent, selector: "nc-case-list-paginator", providers: [{ provide: MatPaginatorIntl, useClass: NetgrifPaginatorIntl }], usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex>\n    <ng-container *ngIf=\"cases$ | async as cases\">\n\n        <div *ngIf=\"(loading$ | async) === false && cases.length === 0\" fxLayout=\"column\"\n             fxLayoutAlign=\"center center\" fxFlex>\n            <mat-icon color=\"accent\" class=\"margin-bottom-default\">storage</mat-icon>\n            <span class=\"font-size-20\">{{ 'view-list.noCasesSatisfyingThisFilter' | translate}}</span>\n        </div>\n\n        <mat-accordion multi=\"true\" class=\"full-width\" >\n            <div [ngStyle]=\"{'width': width ? width : '100%' }\" class=\"fix-padding\">\n                <nc-case-panel [responsiveBody]=\"responsiveBody\"\n                               [textEllipsis]=\"textEllipsis\"\n                               *ngFor=\"let case_ of cases | slice: (pageIndex) * pageSize : (pageIndex + 1) * pageSize;\n                                let first = first;\n                                let last = last;\n                                trackBy: trackById\"\n                               [showCasePanelIcon]=\"showCasePanelIcon\" [approval]=\"approval\"\n                               [showDeleteMenu]=\"showDeleteMenu\" [first]=\"first\" [last]=\"last\"\n                               [case_]=\"case_\" [selectedHeaders$]=\"selectedHeaders$\" (click)=\"onCaseClick(case_)\">\n                </nc-case-panel>\n\n                <div *ngIf=\"loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\"\n                     class=\"margin-top-default\">\n                    <mat-spinner color=\"primary\" diameter=\"50\"></mat-spinner>\n                </div>\n            </div>\n        </mat-accordion>\n        <mat-paginator [length]=\"length\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\" color=\"primary\" [disabled]=\"disabled\"\n                       [pageSizeOptions]=\"pageSizeOptions\" (page)=\"onPageChanged($event)\" showFirstLastButtons>\n        </mat-paginator>\n    </ng-container>\n</div>\n", styles: [".font-size-20{font-size:20px}.margin-bottom-default{margin-bottom:8px}.margin-top-default{margin-top:8px}.full-width{width:100%}.fix-padding{padding:0 1px}\n"], components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CasePanelComponent, selector: "nc-case-panel" }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i6$3.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1$2.TranslatePipe, "slice": i4$1.SlicePipe } });
+CaseListPaginatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CaseListPaginatorComponent, selector: "nc-case-list-paginator", providers: [{ provide: MatPaginatorIntl, useClass: NetgrifPaginatorIntl }], usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex>\n    <ng-container *ngIf=\"cases$ | async as cases\">\n\n        <div *ngIf=\"(loading$ | async) === false && cases.length === 0\" fxLayout=\"column\"\n             fxLayoutAlign=\"center center\" fxFlex>\n            <mat-icon color=\"accent\" class=\"margin-bottom-default\">storage</mat-icon>\n            <span class=\"font-size-20\">{{ 'view-list.noCasesSatisfyingThisFilter' | translate}}</span>\n        </div>\n\n        <mat-accordion multi=\"true\" class=\"full-width\" >\n            <div [ngStyle]=\"{'width': width ? width : '100%' }\" class=\"fix-padding\">\n                <nc-case-panel [responsiveBody]=\"responsiveBody\"\n                               [textEllipsis]=\"textEllipsis\"\n                               *ngFor=\"let case_ of cases | slice: (pageIndex) * pageSize : (pageIndex + 1) * pageSize;\n                                let first = first;\n                                let last = last;\n                                trackBy: trackById\"\n                               [showCasePanelIcon]=\"showCasePanelIcon\" [approval]=\"approval\"\n                               [showDeleteMenu]=\"showDeleteMenu\" [first]=\"first\" [last]=\"last\"\n                               [case_]=\"case_\" [selectedHeaders$]=\"selectedHeaders$\" (click)=\"onCaseClick(case_)\">\n                </nc-case-panel>\n\n                <div *ngIf=\"loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\"\n                     class=\"margin-top-default\">\n                    <mat-spinner color=\"primary\" diameter=\"50\"></mat-spinner>\n                </div>\n            </div>\n        </mat-accordion>\n        <mat-paginator [length]=\"length\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\" color=\"primary\" [disabled]=\"disabled\"\n                       [pageSizeOptions]=\"pageSizeOptions\" (page)=\"onPageChanged($event)\" showFirstLastButtons>\n        </mat-paginator>\n    </ng-container>\n</div>\n", styles: [".font-size-20{font-size:20px}.margin-bottom-default{margin-bottom:8px}.margin-top-default{margin-top:8px}.full-width{width:100%}.fix-padding{padding:0 1px}\n"], components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: CasePanelComponent, selector: "nc-case-panel" }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i6$3.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1$2.TranslatePipe, "slice": i4$1.SlicePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CaseListPaginatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-case-list-paginator', providers: [{ provide: MatPaginatorIntl, useClass: NetgrifPaginatorIntl }], template: "<div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex>\n    <ng-container *ngIf=\"cases$ | async as cases\">\n\n        <div *ngIf=\"(loading$ | async) === false && cases.length === 0\" fxLayout=\"column\"\n             fxLayoutAlign=\"center center\" fxFlex>\n            <mat-icon color=\"accent\" class=\"margin-bottom-default\">storage</mat-icon>\n            <span class=\"font-size-20\">{{ 'view-list.noCasesSatisfyingThisFilter' | translate}}</span>\n        </div>\n\n        <mat-accordion multi=\"true\" class=\"full-width\" >\n            <div [ngStyle]=\"{'width': width ? width : '100%' }\" class=\"fix-padding\">\n                <nc-case-panel [responsiveBody]=\"responsiveBody\"\n                               [textEllipsis]=\"textEllipsis\"\n                               *ngFor=\"let case_ of cases | slice: (pageIndex) * pageSize : (pageIndex + 1) * pageSize;\n                                let first = first;\n                                let last = last;\n                                trackBy: trackById\"\n                               [showCasePanelIcon]=\"showCasePanelIcon\" [approval]=\"approval\"\n                               [showDeleteMenu]=\"showDeleteMenu\" [first]=\"first\" [last]=\"last\"\n                               [case_]=\"case_\" [selectedHeaders$]=\"selectedHeaders$\" (click)=\"onCaseClick(case_)\">\n                </nc-case-panel>\n\n                <div *ngIf=\"loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\"\n                     class=\"margin-top-default\">\n                    <mat-spinner color=\"primary\" diameter=\"50\"></mat-spinner>\n                </div>\n            </div>\n        </mat-accordion>\n        <mat-paginator [length]=\"length\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\" color=\"primary\" [disabled]=\"disabled\"\n                       [pageSizeOptions]=\"pageSizeOptions\" (page)=\"onPageChanged($event)\" showFirstLastButtons>\n        </mat-paginator>\n    </ng-container>\n</div>\n", styles: [".font-size-20{font-size:20px}.margin-bottom-default{margin-bottom:8px}.margin-top-default{margin-top:8px}.full-width{width:100%}.fix-padding{padding:0 1px}\n"] }]
@@ -3269,9 +3323,6 @@ class DefaultCaseRefListViewComponent extends AbstractCaseViewComponent {
     }
     createdCase(caze) {
         this.handleCaseClick(caze);
-        // if (this._dataFieldPortalData !== null && this._dataFieldPortalData.dataField instanceof MultichoiceField) {
-        //     this._dataFieldPortalData.dataField.choices = [...this._dataFieldPortalData.dataField.choices, {key: caze.stringId, value: ''}];
-        // }
     }
 }
 DefaultCaseRefListViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DefaultCaseRefListViewComponent, deps: [{ token: i1.CaseViewService }, { token: i1.OverflowService, optional: true }, { token: NAE_TAB_DATA, optional: true }, { token: DATA_FIELD_PORTAL_DATA, optional: true }, { token: NAE_CASE_REF_CREATE_CASE, optional: true }, { token: NAE_CASE_REF_SEARCH, optional: true }], target: i0.ɵɵFactoryTarget.Component });
@@ -3288,7 +3339,7 @@ DefaultCaseRefListViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
         { provide: NAE_VIEW_ID_SEGMENT, useValue: 'case' },
         ViewIdService,
         { provide: NAE_SEARCH_CATEGORIES, useFactory: defaultCaseSearchCategoriesFactory, deps: [CategoryFactory] },
-    ], viewQueries: [{ propertyName: "caseHeaderComponent", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"case-view-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n\n    <div class=\"case-view-search-container\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"space-between\">\n            <div fxLayoutAlign=\"start center\" fxFlex *ngIf=\"search\">\n                <nc-search class=\"search-width\" [disabled]=\"disabled()\" [additionalFilterData]=\"additionalFilterData\"></nc-search>\n            </div>\n            <div fxLayoutAlign=\"end center\" *ngIf=\"createCase\">\n                <nc-create-case-button [disabled]=\"disabled()\" [newCaseCreationConfig]=\"newCaseCreationConfig\" (caseCreatedEvent)=\"createdCase($event)\"></nc-create-case-button>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"full-height transform-div custom-scrollbar\" [ngClass]=\"{'overflow-div': getOverflowStatus()}\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n        <div class=\"full-height transform-div max-width-fix\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n            <nc-header #header [type]=\"headerType\" [responsiveHeaders]=\"true\" class=\"case-header-padding\" [ngStyle]=\"{'width': getWidth()}\" [approval]=\"isApproval()\"></nc-header>\n\n            <nc-case-list-paginator [selectedHeaders$]=\"selectedHeaders$\" [showDeleteMenu]=\"true\" [width]=\"getWidth()\" [approval]=\"isApproval()\" [disabled]=\"disabled()\"\n                                    (caseClick)=\"handleCaseClick($event)\" [responsiveBody]=\"true\" fxFlex [textEllipsis]=\"true\"></nc-case-list-paginator>\n        </div>\n    </div>\n</div>\n\n", styles: [".case-view-container{margin:16px 24px;height:calc(100% - 32px);overflow:auto}@media screen and (max-width: 599.99px){.case-view-container{margin:12px}}.case-view-search-container{margin-top:16px;margin-bottom:2px;padding:0;max-height:50%}.case-header-padding{padding-top:16px;padding-left:1px;padding-right:1px}.font-size-20{font-size:20px}.search-width{width:100%}.search-fix{min-height:calc(100% + 2px);max-height:100%;overflow-y:auto}.full-height{height:100%}.overflow-div{overflow-x:scroll}.transform-div{transform:rotateX(180deg);-ms-transform:rotateX(180deg);-webkit-transform:rotateX(180deg)}.custom-scrollbar::-webkit-scrollbar{width:15px;height:15px;cursor:pointer}.max-width-fix{max-width:calc(100% - 8px)!important}.max-height{max-height:100%}\n"], components: [{ type: SearchComponent, selector: "nc-search" }, { type: CreateCaseButtonComponent, selector: "nc-create-case-button", inputs: ["newCaseCreationConfig", "disabled"], outputs: ["caseCreatedEvent"] }, { type: HeaderComponent, selector: "nc-header" }, { type: CaseListPaginatorComponent, selector: "nc-case-list-paginator" }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }] });
+    ], viewQueries: [{ propertyName: "caseHeaderComponent", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"case-view-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n\n    <div class=\"case-view-search-container\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"space-between\">\n            <div fxLayoutAlign=\"start center\" fxFlex *ngIf=\"search\">\n                <nc-search class=\"search-width\" [disabled]=\"disabled()\" [additionalFilterData]=\"additionalFilterData\"></nc-search>\n            </div>\n            <div fxLayoutAlign=\"end center\" *ngIf=\"createCase\">\n                <nc-create-case-button [disabled]=\"disabled()\" [newCaseCreationConfig]=\"newCaseCreationConfig\" (caseCreatedEvent)=\"createdCase($event)\"></nc-create-case-button>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"full-height transform-div custom-scrollbar\" [ngClass]=\"{'overflow-div': getOverflowStatus()}\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n        <div class=\"full-height transform-div max-width-fix\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n            <nc-header #header [type]=\"headerType\" [responsiveHeaders]=\"true\" class=\"case-header-padding\" [ngStyle]=\"{'width': getWidth()}\" [approval]=\"isApproval()\"></nc-header>\n\n            <nc-case-list-paginator [selectedHeaders$]=\"selectedHeaders$\" [showDeleteMenu]=\"false\" [width]=\"getWidth()\" [approval]=\"isApproval()\" [disabled]=\"disabled()\"\n                                    (caseClick)=\"handleCaseClick($event)\" [responsiveBody]=\"true\" fxFlex [textEllipsis]=\"true\"></nc-case-list-paginator>\n        </div>\n    </div>\n</div>\n\n", styles: [".case-view-container{margin:16px 24px;height:calc(100% - 32px);overflow:auto}@media screen and (max-width: 599.99px){.case-view-container{margin:12px}}.case-view-search-container{margin-top:16px;margin-bottom:2px;padding:0;max-height:50%}.case-header-padding{padding-top:16px;padding-left:1px;padding-right:1px}.font-size-20{font-size:20px}.search-width{width:100%}.search-fix{min-height:calc(100% + 2px);max-height:100%;overflow-y:auto}.full-height{height:100%}.overflow-div{overflow-x:scroll}.transform-div{transform:rotateX(180deg);-ms-transform:rotateX(180deg);-webkit-transform:rotateX(180deg)}.custom-scrollbar::-webkit-scrollbar{width:15px;height:15px;cursor:pointer}.max-width-fix{max-width:calc(100% - 8px)!important}.max-height{max-height:100%}\n"], components: [{ type: SearchComponent, selector: "nc-search" }, { type: CreateCaseButtonComponent, selector: "nc-create-case-button", inputs: ["newCaseCreationConfig", "disabled"], outputs: ["caseCreatedEvent"] }, { type: HeaderComponent, selector: "nc-header" }, { type: CaseListPaginatorComponent, selector: "nc-case-list-paginator" }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DefaultCaseRefListViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-default-case-view', providers: [
@@ -3304,7 +3355,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         { provide: NAE_VIEW_ID_SEGMENT, useValue: 'case' },
                         ViewIdService,
                         { provide: NAE_SEARCH_CATEGORIES, useFactory: defaultCaseSearchCategoriesFactory, deps: [CategoryFactory] },
-                    ], template: "<div class=\"case-view-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n\n    <div class=\"case-view-search-container\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"space-between\">\n            <div fxLayoutAlign=\"start center\" fxFlex *ngIf=\"search\">\n                <nc-search class=\"search-width\" [disabled]=\"disabled()\" [additionalFilterData]=\"additionalFilterData\"></nc-search>\n            </div>\n            <div fxLayoutAlign=\"end center\" *ngIf=\"createCase\">\n                <nc-create-case-button [disabled]=\"disabled()\" [newCaseCreationConfig]=\"newCaseCreationConfig\" (caseCreatedEvent)=\"createdCase($event)\"></nc-create-case-button>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"full-height transform-div custom-scrollbar\" [ngClass]=\"{'overflow-div': getOverflowStatus()}\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n        <div class=\"full-height transform-div max-width-fix\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n            <nc-header #header [type]=\"headerType\" [responsiveHeaders]=\"true\" class=\"case-header-padding\" [ngStyle]=\"{'width': getWidth()}\" [approval]=\"isApproval()\"></nc-header>\n\n            <nc-case-list-paginator [selectedHeaders$]=\"selectedHeaders$\" [showDeleteMenu]=\"true\" [width]=\"getWidth()\" [approval]=\"isApproval()\" [disabled]=\"disabled()\"\n                                    (caseClick)=\"handleCaseClick($event)\" [responsiveBody]=\"true\" fxFlex [textEllipsis]=\"true\"></nc-case-list-paginator>\n        </div>\n    </div>\n</div>\n\n", styles: [".case-view-container{margin:16px 24px;height:calc(100% - 32px);overflow:auto}@media screen and (max-width: 599.99px){.case-view-container{margin:12px}}.case-view-search-container{margin-top:16px;margin-bottom:2px;padding:0;max-height:50%}.case-header-padding{padding-top:16px;padding-left:1px;padding-right:1px}.font-size-20{font-size:20px}.search-width{width:100%}.search-fix{min-height:calc(100% + 2px);max-height:100%;overflow-y:auto}.full-height{height:100%}.overflow-div{overflow-x:scroll}.transform-div{transform:rotateX(180deg);-ms-transform:rotateX(180deg);-webkit-transform:rotateX(180deg)}.custom-scrollbar::-webkit-scrollbar{width:15px;height:15px;cursor:pointer}.max-width-fix{max-width:calc(100% - 8px)!important}.max-height{max-height:100%}\n"] }]
+                    ], template: "<div class=\"case-view-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n\n    <div class=\"case-view-search-container\">\n        <div fxLayout=\"row\" fxLayoutAlign=\"space-between\">\n            <div fxLayoutAlign=\"start center\" fxFlex *ngIf=\"search\">\n                <nc-search class=\"search-width\" [disabled]=\"disabled()\" [additionalFilterData]=\"additionalFilterData\"></nc-search>\n            </div>\n            <div fxLayoutAlign=\"end center\" *ngIf=\"createCase\">\n                <nc-create-case-button [disabled]=\"disabled()\" [newCaseCreationConfig]=\"newCaseCreationConfig\" (caseCreatedEvent)=\"createdCase($event)\"></nc-create-case-button>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"full-height transform-div custom-scrollbar\" [ngClass]=\"{'overflow-div': getOverflowStatus()}\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n        <div class=\"full-height transform-div max-width-fix\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n            <nc-header #header [type]=\"headerType\" [responsiveHeaders]=\"true\" class=\"case-header-padding\" [ngStyle]=\"{'width': getWidth()}\" [approval]=\"isApproval()\"></nc-header>\n\n            <nc-case-list-paginator [selectedHeaders$]=\"selectedHeaders$\" [showDeleteMenu]=\"false\" [width]=\"getWidth()\" [approval]=\"isApproval()\" [disabled]=\"disabled()\"\n                                    (caseClick)=\"handleCaseClick($event)\" [responsiveBody]=\"true\" fxFlex [textEllipsis]=\"true\"></nc-case-list-paginator>\n        </div>\n    </div>\n</div>\n\n", styles: [".case-view-container{margin:16px 24px;height:calc(100% - 32px);overflow:auto}@media screen and (max-width: 599.99px){.case-view-container{margin:12px}}.case-view-search-container{margin-top:16px;margin-bottom:2px;padding:0;max-height:50%}.case-header-padding{padding-top:16px;padding-left:1px;padding-right:1px}.font-size-20{font-size:20px}.search-width{width:100%}.search-fix{min-height:calc(100% + 2px);max-height:100%;overflow-y:auto}.full-height{height:100%}.overflow-div{overflow-x:scroll}.transform-div{transform:rotateX(180deg);-ms-transform:rotateX(180deg);-webkit-transform:rotateX(180deg)}.custom-scrollbar::-webkit-scrollbar{width:15px;height:15px;cursor:pointer}.max-width-fix{max-width:calc(100% - 8px)!important}.max-height{max-height:100%}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i1.CaseViewService }, { type: i1.OverflowService, decorators: [{
                         type: Optional
@@ -3391,6 +3442,115 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     }] }];
     } });
 
+class SignaturePadFieldComponent extends AbstractSimpleTextFieldComponent {
+    constructor(_translate, _ngZone, dataFieldPortalData) {
+        super(_translate, dataFieldPortalData);
+        this._translate = _translate;
+        this._ngZone = _ngZone;
+        this.aspectRatio = 0.2;
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.signPadElement = this.signPad.nativeElement;
+            this.context = this.signPadElement.getContext('2d');
+            this.canvasWidth = this.canvasDiv.nativeElement.clientWidth - 2;
+            this.canvasHeight = this.canvasWidth * this.aspectRatio;
+            this.formControlRef.valueChanges.pipe(filter(value => value !== this.signatureImg)).subscribe(value => {
+                this.signatureImg = value;
+                const img = new Image();
+                img.onload = () => {
+                    this.context.drawImage(img, 0, 0, this.canvasWidth, this.canvasHeight);
+                };
+                img.src = this.signatureImg;
+            });
+        });
+    }
+    onMouseDown(e) {
+        this.isDrawing = true;
+        const coords = this.relativeCoords(e);
+        this.context.moveTo(coords.x, coords.y);
+    }
+    onMouseUp(e) {
+        this.isDrawing = false;
+    }
+    mouseUp(e) {
+        this.isDrawing = false;
+        this.saveSignature();
+    }
+    onMouseMove(e) {
+        if (this.isDrawing) {
+            const coords = this.relativeCoords(e);
+            this.context.lineTo(coords.x, coords.y);
+            this.context.stroke();
+        }
+    }
+    clearSignature() {
+        this.signatureImg = undefined;
+        this.context.clearRect(0, 0, this.signPadElement.width, this.signPadElement.height);
+        this.context.beginPath();
+        this.formControlRef.setValue(undefined);
+    }
+    saveSignature() {
+        this.signatureImg = this.signPadElement.toDataURL('image/png');
+        this.formControlRef.setValue(this.signatureImg);
+    }
+    relativeCoords(event) {
+        const bounds = event.target.getBoundingClientRect();
+        const cords = {
+            clientX: event.clientX || event.changedTouches[0].clientX,
+            clientY: event.clientY || event.changedTouches[0].clientY
+        };
+        const x = cords.clientX - bounds.left;
+        const y = cords.clientY - bounds.top;
+        return { x, y };
+    }
+}
+SignaturePadFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SignaturePadFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: i0.NgZone }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+SignaturePadFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SignaturePadFieldComponent, selector: "nc-signature-pad-field", host: { listeners: { "document:mouseup": "onMouseUp($event)", "document:blur": "mouseUp($event)" } }, viewQueries: [{ propertyName: "signPad", first: true, predicate: ["signPad"], descendants: true }, { propertyName: "canvasDiv", first: true, predicate: ["canvasDiv"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"canvas-div\" #canvasDiv [ngClass]=\"{'canvas-disabled': formControlRef.disabled}\" (blur)=\"mouseUp($event)\">\n    <canvas (mousedown)=\"onMouseDown($event)\" (mousemove)=\"onMouseMove($event)\" (touchmove)=\"onMouseMove($event)\"\n            (touchstart)=\"onMouseDown($event)\" #signPad width=\"{{canvasWidth}}\" (blur)=\"mouseUp($event)\" height=\"{{canvasHeight}}\"\n            class=\"canvas\" [ngClass]=\"{'canvas-background-disabled': formControlRef.disabled}\">\n    </canvas>\n</div>\n<button mat-stroked-button color=\"primary\" *ngIf=\"!formControlRef.disabled\" (click)=\"clearSignature()\">{{'dataField.clear' | translate }}</button>\n<button mat-stroked-button *ngIf=\"!formControlRef.disabled\" (click)=\"saveSignature()\">{{'dataField.save' | translate }}</button>\n\n", styles: [".canvas-div{width:100%;height:100%}.canvas{border:1px solid #64748B;border-radius:6px;-webkit-text-stroke-color:#000}.canvas-disabled{cursor:not-allowed;pointer-events:none}.canvas-background-disabled{background-color:#cbd5e1;pointer-events:none}\n"], components: [{ type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1$2.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SignaturePadFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nc-signature-pad-field', template: "<div class=\"canvas-div\" #canvasDiv [ngClass]=\"{'canvas-disabled': formControlRef.disabled}\" (blur)=\"mouseUp($event)\">\n    <canvas (mousedown)=\"onMouseDown($event)\" (mousemove)=\"onMouseMove($event)\" (touchmove)=\"onMouseMove($event)\"\n            (touchstart)=\"onMouseDown($event)\" #signPad width=\"{{canvasWidth}}\" (blur)=\"mouseUp($event)\" height=\"{{canvasHeight}}\"\n            class=\"canvas\" [ngClass]=\"{'canvas-background-disabled': formControlRef.disabled}\">\n    </canvas>\n</div>\n<button mat-stroked-button color=\"primary\" *ngIf=\"!formControlRef.disabled\" (click)=\"clearSignature()\">{{'dataField.clear' | translate }}</button>\n<button mat-stroked-button *ngIf=\"!formControlRef.disabled\" (click)=\"saveSignature()\">{{'dataField.save' | translate }}</button>\n\n", styles: [".canvas-div{width:100%;height:100%}.canvas{border:1px solid #64748B;border-radius:6px;-webkit-text-stroke-color:#000}.canvas-disabled{cursor:not-allowed;pointer-events:none}.canvas-background-disabled{background-color:#cbd5e1;pointer-events:none}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1$2.TranslateService }, { type: i0.NgZone }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    }, propDecorators: { signPad: [{
+                type: ViewChild,
+                args: ['signPad', { static: false }]
+            }], canvasDiv: [{
+                type: ViewChild,
+                args: ['canvasDiv']
+            }], onMouseUp: [{
+                type: HostListener,
+                args: ['document:mouseup', ['$event']]
+            }], mouseUp: [{
+                type: HostListener,
+                args: ['document:blur', ['$event']]
+            }] } });
+
+class StringCollectionDefaultFieldComponent extends AbstractStringCollectionDefaultFieldComponent {
+    constructor(_translate, dataFieldPortalData) {
+        super(_translate, dataFieldPortalData);
+        this._translate = _translate;
+    }
+}
+StringCollectionDefaultFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StringCollectionDefaultFieldComponent, deps: [{ token: i1$2.TranslateService }, { token: DATA_FIELD_PORTAL_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+StringCollectionDefaultFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: StringCollectionDefaultFieldComponent, selector: "nc-string-collection-default-field", usesInheritance: true, ngImport: i0, template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <mat-chip-list #chipList aria-label=\"Autocomplete\" [formControl]=\"formControlRef\">\n        <mat-chip\n            *ngFor=\"let option of dataField.value\" (removed)=\"remove(option)\">\n            {{option}}\n            <button *ngIf=\"!formControlRef.disabled\" matChipRemove>\n                <mat-icon>cancel</mat-icon>\n            </button>\n        </mat-chip>\n        <input\n            matInput\n            #input\n            [placeholder]=\"dataField.placeholder\"\n            [required]=\"dataField.behavior.required\"\n            [matChipInputFor]=\"chipList\"\n            (matChipInputTokenEnd)=\"add($event)\"\n            (blur)=\"add($event)\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\n    </mat-chip-list>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error\n        *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"], components: [{ type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$7.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$7.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i2$7.MatChipRemove, selector: "[matChipRemove]" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i2$7.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$1.MatError, selector: "mat-error", inputs: ["id"] }], pipes: { "translate": i1$2.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: StringCollectionDefaultFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nc-string-collection-default-field', template: "<mat-form-field [appearance]=\"dataField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{dataField.title}}</mat-label>\n    <mat-chip-list #chipList aria-label=\"Autocomplete\" [formControl]=\"formControlRef\">\n        <mat-chip\n            *ngFor=\"let option of dataField.value\" (removed)=\"remove(option)\">\n            {{option}}\n            <button *ngIf=\"!formControlRef.disabled\" matChipRemove>\n                <mat-icon>cancel</mat-icon>\n            </button>\n        </mat-chip>\n        <input\n            matInput\n            #input\n            [placeholder]=\"dataField.placeholder\"\n            [required]=\"dataField.behavior.required\"\n            [matChipInputFor]=\"chipList\"\n            (matChipInputTokenEnd)=\"add($event)\"\n            (blur)=\"add($event)\"\n            [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\">\n    </mat-chip-list>\n    <mat-hint [ngClass]=\"{'mat-hint-disabled': formControlRef.disabled}\">{{dataField.description}}</mat-hint>\n    <mat-error\n        *ngIf=\"dataField.isInvalid(formControlRef)\">{{'dataField.validations.required' | translate}}</mat-error>\n</mat-form-field>\n", styles: [".full-width{display:block;margin:0 auto;width:100%}\n"] }]
+        }], ctorParameters: function () {
+        return [{ type: i1$2.TranslateService }, { type: undefined, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [DATA_FIELD_PORTAL_DATA]
+                    }] }];
+    } });
+
 class DataFieldsComponentModule {
     constructor(registry) {
         registry.register("boolean-default", (injector) => new ComponentPortal(BooleanDefaultFieldComponent, null, injector));
@@ -3418,11 +3578,13 @@ class DataFieldsComponentModule {
         registry.register("multichoice-autocomplete", (injector) => new ComponentPortal(MultichoiceAutocompleteFieldComponent, null, injector));
         registry.register("number-default", (injector) => new ComponentPortal(NumberDefaultFieldComponent, null, injector));
         registry.register("number-currency", (injector) => new ComponentPortal(NumberCurrencyFieldComponent, null, injector));
+        registry.register("number-decimal", (injector) => new ComponentPortal(NumberDecimalFieldComponent, null, injector));
         registry.register("text-default", (injector) => new ComponentPortal(SimpleTextFieldComponent, null, injector));
         registry.register("text-password", (injector) => new ComponentPortal(PasswordTextFieldComponent, null, injector));
         registry.register("text-textarea", (injector) => new ComponentPortal(TextareaFieldComponent, null, injector));
         registry.register("text-richtextarea", (injector) => new ComponentPortal(RichTextareaFieldComponent, null, injector));
         registry.register("text-htmltextarea", (injector) => new ComponentPortal(HtmlTextareaFieldComponent, null, injector));
+        registry.register("text-signature", (injector) => new ComponentPortal(SignaturePadFieldComponent, null, injector));
         registry.register("text-dashboard_line_chart", (injector) => new ComponentPortal(DashboardLineChartTextFieldComponent, null, injector));
         registry.register("text-dashboard_pie_chart", (injector) => new ComponentPortal(DashboardPieChartTextFieldComponent, null, injector));
         registry.register("text-dashboard_bar_chart", (injector) => new ComponentPortal(DashboardBarChartTextFieldComponent, null, injector));
@@ -3433,6 +3595,7 @@ class DataFieldsComponentModule {
         registry.register("case-ref-default", (injector) => new ComponentPortal(CaseRefDefaultComponent, null, injector));
         registry.register("user-default", (injector) => new ComponentPortal(UserDefaultFieldComponent, null, injector));
         registry.register("user-list-default", (injector) => new ComponentPortal(UserListDefaultFieldComponent, null, injector));
+        registry.register("string-collection-default", (injector) => new ComponentPortal(StringCollectionDefaultFieldComponent, null, injector));
     }
 }
 DataFieldsComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DataFieldsComponentModule, deps: [{ token: i1.ComponentRegistryService }], target: i0.ɵɵFactoryTarget.NgModule });
@@ -3495,7 +3658,10 @@ DataFieldsComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0
         TaskRefListFieldComponent,
         CaseRefDefaultComponent,
         MultichoiceCaserefFieldComponent,
-        EnumerationCaserefFieldComponent], imports: [CommonModule,
+        EnumerationCaserefFieldComponent,
+        StringCollectionDefaultFieldComponent,
+        SignaturePadFieldComponent,
+        NumberDecimalFieldComponent], imports: [CommonModule,
         FlexLayoutModule,
         MaterialModule,
         CovalentModule,
@@ -3604,7 +3770,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         TaskRefListFieldComponent,
                         CaseRefDefaultComponent,
                         MultichoiceCaserefFieldComponent,
-                        EnumerationCaserefFieldComponent
+                        EnumerationCaserefFieldComponent,
+                        StringCollectionDefaultFieldComponent,
+                        SignaturePadFieldComponent,
+                        NumberDecimalFieldComponent
                     ],
                     exports: [
                         DataFieldTemplateComponent
@@ -3990,34 +4159,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  */
 
 class LanguageSelectorComponent extends AbstractLanguageSelectorComponent {
-    constructor(_select) {
-        super(_select);
-        this._select = _select;
-        this.skFlag = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABAElEQVRYhWP4//8/w0DiAbV81AGjDkB2wECB' +
-            'UQeMOgC/A34fO4ET08UBb2VU4BgE3mkZwfn/Pn6kngO4/Rb9R8dNNSvAFn2tb4H7GESD+CDxxrxZGHpIxXgdALIA5oBPodFgB4BoujsA5Os/V66' +
-            'BHQCiQXy6OKC5aytGGkDmg6KIpg6wzN/y/6GN+/8a0+T/8dZF/7n8FoJpEP+BrtV/j6qdtHUACJf27gVbjI5B4pRajuKAdzKq/7HhDxYO/0vQHJ' +
-            'HatO3/R3c/rOpJxQQdAMLvtYz/r22c+98dGOTr+leD+dSwnGgHIIcGtSwmywG0wKMOGDwOGEg86oBRBwy4AwD9AXxVUM8swgAAAABJRU5ErkJgg' +
-            'g==';
-        this.deFlag = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAPElEQVRYw+3WIREAMADDwPjXNk8ZnIQOBIQ/' +
-            '6hWVZQQI8AUAcFGAAAHeDoCTAgT4B3BwUoAAAXrFAQIoF+hFdQp+ds+vAAAAAElFTkSuQmCC';
-        this.gbFlag = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAByElEQVRYw+2WvUvDUBTFA04u7VTo0sGpf4Ao' +
-            '1L2L4FApdHN01slBcFIEJ0EcFDqqFaGubkJdtIhVKWhBobjZwc5+NMeeSNI0vOTdpmId8uBt7+N3Ts69LwYAY5TTiAAigH8B8Fwo4LPVwvtHB6u' +
-            '7VYxN7cOY3AucpgnU4nFcW0cAqdkD7Z7FjQpeNrdwn0rhrVSCA9BcWsZtIoF2uWwddlV/RXr++NcAJuYOcX5SwUMmg6dczhL71TF7ALysenSGej' +
-            'oNqRtSAIVqPDbbmF447QFwIS9a276A1A0dgJ/q9eINxmeK1po+AHv2uZHP+7oRBBCk2n2XEkDqhgpAoloEIHHDC7CycylSPRCA1427ZNJxg8MN0' +
-            'MhmRaqVAAg53AAhxw9ALRazDvrr6QCM4nKKHvoTWAd1P0OYYZqQhZBBYqAYLAaMQWPgVAAMKIPKwDK4ujdFC8ASYilxsLRYYiw1lpwXgKXJEiUk' +
-            'S5alyxIOelN8AVSq2VzYZNhs2HS8AHbfYLOy3WATC3JDCeCnmu3VXuMHYPcNqRt9ADrV7o1BAO4uqnPDAZCoHhRA6Ub3qXe74QBIVIcB0LnhAEh' +
-            'UDwPg50b0VxwBRACc37+H2GuakEPwAAAAAElFTkSuQmCC';
-    }
-    getFlag(flagCode) {
-        return flagCode === 'sk' ? this.skFlag : (flagCode === 'gb' ? this.gbFlag : this.deFlag);
-    }
-}
-LanguageSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LanguageSelectorComponent, deps: [{ token: i1.LanguageService }], target: i0.ɵɵFactoryTarget.Component });
-LanguageSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: LanguageSelectorComponent, selector: "nc-language-selector", usesInheritance: true, ngImport: i0, template: "<mat-menu #languageMenu=\"matMenu\">\n    <button *ngFor=\"let lang of langMenuItems\" mat-menu-item (click)=\"setLang(lang.key)\" fxLayout=\"row\"\n            fxLayoutAlign=\"start center\" [style.backgroundColor]=\"lang.key === language ? 'rgba(253,151,31,0.1)':''\">\n        <img [src]='getFlag(flagCode(lang.key))' alt=\"Country icon\" class=\"icon-small-dimensions\">\n        <span class=\"margin-left-default\">{{'toolbar.menu.' + lang.value | translate}}</span>\n    </button>\n</mat-menu>\n\n<button mat-icon-button [matMenuTriggerFor]=\"languageMenu\">\n    <img [src]='getFlag(flagCountryCode)'\n         alt=\"Country icon\" class=\"icon-medium-dimensions\">\n</button>\n", styles: [".icon-small-dimensions{width:24px;height:24px}.margin-left-default{margin-left:8px}.icon-medium-dimensions{width:32px;height:32px}\n"], components: [{ type: i10$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i10$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i10$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], pipes: { "translate": i1$2.TranslatePipe } });
+    constructor(_langService, _languageIconsService) {
+        super(_langService, _languageIconsService);
+        this._langService = _langService;
+        this._languageIconsService = _languageIconsService;
+    }
+}
+LanguageSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LanguageSelectorComponent, deps: [{ token: i1.LanguageService }, { token: i1.LanguageIconsService }], target: i0.ɵɵFactoryTarget.Component });
+LanguageSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: LanguageSelectorComponent, selector: "nc-language-selector", usesInheritance: true, ngImport: i0, template: "<mat-menu #languageMenu=\"matMenu\">\n    <button *ngFor=\"let lang of getLangKeys()\" mat-menu-item (click)=\"setLang(lang)\" fxLayout=\"row\"\n            fxLayoutAlign=\"start center\" [style.backgroundColor]=\"lang === getCurrentLang() ? 'rgba(253,151,31,0.1)':''\">\n        <div [innerHTML]=\"getLangIcon(lang)\" class=\"icon-small-dimensions\"></div>\n        <span class=\"margin-left-default\">{{'toolbar.menu.' + lang | translate}}</span>\n    </button>\n</mat-menu>\n\n<button mat-icon-button [matMenuTriggerFor]=\"languageMenu\">\n    <div [innerHTML]=\"getLangIcon(getCurrentLang())\"\n         alt=\"Country icon\" class=\"icon-medium-dimensions\">\n    </div>\n</button>\n", styles: [".icon-small-dimensions{height:20px;line-height:normal}.margin-left-default{margin-left:8px}.icon-medium-dimensions{height:20px;line-height:normal}\n"], components: [{ type: i10$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i10$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i10$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }], pipes: { "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LanguageSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nc-language-selector', template: "<mat-menu #languageMenu=\"matMenu\">\n    <button *ngFor=\"let lang of langMenuItems\" mat-menu-item (click)=\"setLang(lang.key)\" fxLayout=\"row\"\n            fxLayoutAlign=\"start center\" [style.backgroundColor]=\"lang.key === language ? 'rgba(253,151,31,0.1)':''\">\n        <img [src]='getFlag(flagCode(lang.key))' alt=\"Country icon\" class=\"icon-small-dimensions\">\n        <span class=\"margin-left-default\">{{'toolbar.menu.' + lang.value | translate}}</span>\n    </button>\n</mat-menu>\n\n<button mat-icon-button [matMenuTriggerFor]=\"languageMenu\">\n    <img [src]='getFlag(flagCountryCode)'\n         alt=\"Country icon\" class=\"icon-medium-dimensions\">\n</button>\n", styles: [".icon-small-dimensions{width:24px;height:24px}.margin-left-default{margin-left:8px}.icon-medium-dimensions{width:32px;height:32px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.LanguageService }]; } });
+            args: [{ selector: 'nc-language-selector', template: "<mat-menu #languageMenu=\"matMenu\">\n    <button *ngFor=\"let lang of getLangKeys()\" mat-menu-item (click)=\"setLang(lang)\" fxLayout=\"row\"\n            fxLayoutAlign=\"start center\" [style.backgroundColor]=\"lang === getCurrentLang() ? 'rgba(253,151,31,0.1)':''\">\n        <div [innerHTML]=\"getLangIcon(lang)\" class=\"icon-small-dimensions\"></div>\n        <span class=\"margin-left-default\">{{'toolbar.menu.' + lang | translate}}</span>\n    </button>\n</mat-menu>\n\n<button mat-icon-button [matMenuTriggerFor]=\"languageMenu\">\n    <div [innerHTML]=\"getLangIcon(getCurrentLang())\"\n         alt=\"Country icon\" class=\"icon-medium-dimensions\">\n    </div>\n</button>\n", styles: [".icon-small-dimensions{height:20px;line-height:normal}.margin-left-default{margin-left:8px}.icon-medium-dimensions{height:20px;line-height:normal}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.LanguageService }, { type: i1.LanguageIconsService }]; } });
 
 class InternalLinkComponent extends AbstractInternalLinkComponent {
     constructor() {
@@ -4078,10 +4231,10 @@ class QuickPanelComponent extends AbstractQuickPanelComponent {
     }
 }
 QuickPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: QuickPanelComponent, deps: [{ token: i1.LanguageService }, { token: i1.PaperViewService }], target: i0.ɵɵFactoryTarget.Component });
-QuickPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: QuickPanelComponent, selector: "nc-quick-panel", usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"quick-panel\" [style.width.px]=\"width\">\n    <nc-language-selector *ngIf=\"items.includes('language')\" [language]=\"getLang()\"></nc-language-selector>\n    <nc-internal-link *ngIf=\"items.includes('settings')\" icon=\"settings\" link=\"/settings\"></nc-internal-link>\n    <nc-impersonate-quick-panel *ngIf=\"items.includes('impersonation')\"></nc-impersonate-quick-panel>\n    <nc-logout-shortcut *ngIf=\"items.includes('logout')\"></nc-logout-shortcut>\n\n    <button mat-icon-button [matMenuTriggerFor]=\"quickPanelMoreMenu\">\n        <mat-icon class=\"quick-panel-more-icon\">more_vert</mat-icon>\n    </button>\n</div>\n<mat-menu #quickPanelMoreMenu=\"matMenu\">\n    <button mat-menu-item (click)=\"setPaperView()\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <mat-icon *ngIf=\"isPaperView()\">cancel</mat-icon>\n        <mat-icon *ngIf=\"!isPaperView()\">check</mat-icon>\n        <span>{{isPaperView() ? 'Disable' : 'Enable'}} Paper View</span>\n    </button>\n</mat-menu>\n", styles: [".quick-panel{height:62px;padding:8px}.quick-panel-more-icon{text-align:center;font-size:24px}\n"], components: [{ type: LanguageSelectorComponent, selector: "nc-language-selector" }, { type: InternalLinkComponent, selector: "nc-internal-link" }, { type: ImpersonateQuickPanelComponent, selector: "nc-impersonate-quick-panel" }, { type: LogoutShortcutComponent, selector: "nc-logout-shortcut" }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i10$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i10$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
+QuickPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: QuickPanelComponent, selector: "nc-quick-panel", usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"quick-panel\" [style.width.px]=\"width\">\n    <nc-language-selector *ngIf=\"items.includes('language')\"></nc-language-selector>\n    <nc-internal-link *ngIf=\"items.includes('settings')\" icon=\"settings\" link=\"/settings\"></nc-internal-link>\n    <nc-impersonate-quick-panel *ngIf=\"items.includes('impersonation')\"></nc-impersonate-quick-panel>\n    <nc-logout-shortcut *ngIf=\"items.includes('logout')\"></nc-logout-shortcut>\n\n    <button mat-icon-button [matMenuTriggerFor]=\"quickPanelMoreMenu\">\n        <mat-icon class=\"quick-panel-more-icon\">more_vert</mat-icon>\n    </button>\n</div>\n<mat-menu #quickPanelMoreMenu=\"matMenu\">\n    <button mat-menu-item (click)=\"setPaperView()\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <mat-icon *ngIf=\"isPaperView()\">cancel</mat-icon>\n        <mat-icon *ngIf=\"!isPaperView()\">check</mat-icon>\n        <span>{{isPaperView() ? 'Disable' : 'Enable'}} Paper View</span>\n    </button>\n</mat-menu>\n", styles: [".quick-panel{height:62px;padding:8px}.quick-panel-more-icon{text-align:center;font-size:24px}\n"], components: [{ type: LanguageSelectorComponent, selector: "nc-language-selector" }, { type: InternalLinkComponent, selector: "nc-internal-link" }, { type: ImpersonateQuickPanelComponent, selector: "nc-impersonate-quick-panel" }, { type: LogoutShortcutComponent, selector: "nc-logout-shortcut" }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i10$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i10$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: QuickPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nc-quick-panel', template: "<div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"quick-panel\" [style.width.px]=\"width\">\n    <nc-language-selector *ngIf=\"items.includes('language')\" [language]=\"getLang()\"></nc-language-selector>\n    <nc-internal-link *ngIf=\"items.includes('settings')\" icon=\"settings\" link=\"/settings\"></nc-internal-link>\n    <nc-impersonate-quick-panel *ngIf=\"items.includes('impersonation')\"></nc-impersonate-quick-panel>\n    <nc-logout-shortcut *ngIf=\"items.includes('logout')\"></nc-logout-shortcut>\n\n    <button mat-icon-button [matMenuTriggerFor]=\"quickPanelMoreMenu\">\n        <mat-icon class=\"quick-panel-more-icon\">more_vert</mat-icon>\n    </button>\n</div>\n<mat-menu #quickPanelMoreMenu=\"matMenu\">\n    <button mat-menu-item (click)=\"setPaperView()\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <mat-icon *ngIf=\"isPaperView()\">cancel</mat-icon>\n        <mat-icon *ngIf=\"!isPaperView()\">check</mat-icon>\n        <span>{{isPaperView() ? 'Disable' : 'Enable'}} Paper View</span>\n    </button>\n</mat-menu>\n", styles: [".quick-panel{height:62px;padding:8px}.quick-panel-more-icon{text-align:center;font-size:24px}\n"] }]
+            args: [{ selector: 'nc-quick-panel', template: "<div fxLayout=\"row\" fxLayoutAlign=\"space-between center\" class=\"quick-panel\" [style.width.px]=\"width\">\n    <nc-language-selector *ngIf=\"items.includes('language')\"></nc-language-selector>\n    <nc-internal-link *ngIf=\"items.includes('settings')\" icon=\"settings\" link=\"/settings\"></nc-internal-link>\n    <nc-impersonate-quick-panel *ngIf=\"items.includes('impersonation')\"></nc-impersonate-quick-panel>\n    <nc-logout-shortcut *ngIf=\"items.includes('logout')\"></nc-logout-shortcut>\n\n    <button mat-icon-button [matMenuTriggerFor]=\"quickPanelMoreMenu\">\n        <mat-icon class=\"quick-panel-more-icon\">more_vert</mat-icon>\n    </button>\n</div>\n<mat-menu #quickPanelMoreMenu=\"matMenu\">\n    <button mat-menu-item (click)=\"setPaperView()\" fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <mat-icon *ngIf=\"isPaperView()\">cancel</mat-icon>\n        <mat-icon *ngIf=\"!isPaperView()\">check</mat-icon>\n        <span>{{isPaperView() ? 'Disable' : 'Enable'}} Paper View</span>\n    </button>\n</mat-menu>\n", styles: [".quick-panel{height:62px;padding:8px}.quick-panel-more-icon{text-align:center;font-size:24px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.LanguageService }, { type: i1.PaperViewService }]; } });
 
 class QuickPanelComponentModule {
@@ -4141,7 +4294,7 @@ class UserCardComponent extends AbstractUserCardComponent {
     }
 }
 UserCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UserCardComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-UserCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UserCardComponent, selector: "nc-user-card", usesInheritance: true, ngImport: i0, template: "<div [ngSwitch]=\"mode\" class=\"no-outline\">\n    <div *ngSwitchCase=\"'full'\" #fullShowcase fxLayout=\"column\" fxLayoutAlign=\"start center\"\n         class=\"full-showcase-container no-outline margin-bottom-x2\" [style.width.px]=\"width\"\n         [routerLink]=\"link\">\n        <ng-template [ngIf]=\"!userBannerExists()\">\n            <div class=\"banner-wrapper mat-elevation-z6\" matRipple [matRippleTrigger]=\"fullShowcase\">\n                <div [style.backgroundImage]=\"'url(assets/netgrif-cubes-upper-left.png)'\" class=\"cube-upper-left\">\n                    <div [style.backgroundImage]=\"'url(assets/netgrif-cubes-down-right.png)'\" class=\"cube-down-right\"></div>\n                </div>\n            </div>\n        </ng-template>\n        <ng-template [ngIf]=\"userBannerExists()\">\n            <div [style.backgroundImage]=\"'url('+userBanner+')'\" class=\"full-width user-banner mat-elevation-z6\" matRipple\n                 [matRippleTrigger]=\"fullShowcase\"></div>\n        </ng-template>\n        <div class=\"user-avatar-large margin-bottom-default mat-elevation-z6\" matRipple\n             [matRippleTrigger]=\"fullShowcase\">\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n        <div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"full-width full-showcase-text padding-default\">\n            <span>{{user.fullName}}</span>\n            <span class=\"impersonated-user-name\" *ngIf=\"user.isImpersonating()\">{{'side-menu.impersonation.impersonating' | translate }} {{user.getSelfOrImpersonated().fullName}}</span>\n            <span>{{user.email}}</span>\n        </div>\n    </div>\n    <div *ngSwitchCase=\"'horizontal'\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n         class=\"horizontal-showcase-container no-outline padding-default\" [routerLink]=\"link\" matRipple>\n        <div class=\"user-avatar-large mat-elevation-z6\">\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n        <div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"full-width full-showcase-text\">\n            <span>{{user.fullName}}</span>\n            <span>{{user.email}}</span>\n        </div>\n    </div>\n    <div *ngSwitchCase=\"'vertical'\" fxLayout=\"column\" fxLayoutAlign=\"start center\"\n         class=\"vertical-showcase-container no-outline padding-default\"\n         [routerLink]=\"link\" matRipple>\n        <div class=\"user-avatar-large mat-elevation-z6\">\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n        <div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"full-width full-showcase-text\">\n            <span>{{user.fullName}}</span>\n            <span>{{user.email}}</span>\n        </div>\n    </div>\n    <div *ngSwitchCase=\"'icon'\" [routerLink]=\"link\">\n        <div class=\"mat-elevation-z6 no-outline\"\n             [ngClass]=\"{'user-avatar-large':iconStyle === 'large', 'user-avatar-small':iconStyle==='small'}\"\n             [matTooltip]=\"user.fullName+'\\n'+user.email\"\n             matTooltipHideDelay=\"1000\"\n             [matTooltipPosition]=\"tooltipPosition\"\n             matRipple>\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n    </div>\n    <div *ngSwitchDefault>\n        <span>{{ 'side-menu.user.showcase' | translate}}</span>\n    </div>\n</div>\n\n\n", styles: [".full-height{height:100%;min-height:100%}.full-width{width:100%;min-width:100%}.padding-default{padding:8px}.padding-half{padding:4px}.padding-x2{padding:16px}.margin-default{margin:8px}.margin-half{margin:4px}.margin-x2{margin:16px}.margin-top-default{margin-top:8px}.margin-top-half{margin-top:4px}.margin-top-x2{margin-top:16px}.margin-bottom-default{margin-bottom:8px}.margin-bottom-half{margin-bottom:4px}.margin-bottom-x2{margin-bottom:16px}.margin-left-default{margin-left:8px}.margin-left-half{margin-left:4px}.margin-left-x2{margin-left:16px}.margin-right-default{margin-right:8px}.margin-right-half{margin-right:4px}.margin-right-x2{margin-right:16px}.full-showcase-container .user-banner{height:100px;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.full-showcase-container .user-avatar-large{margin-top:-32px}.banner-wrapper{height:100px;width:100%}.cube-upper-left{width:100%;height:100%;background-repeat:no-repeat;background-size:auto 80px}.cube-down-right{background-repeat:no-repeat;background-position-x:right;background-position-y:bottom;background-size:auto 30px;min-width:100%;min-height:100%;padding:0;margin:0}.user-avatar-large{width:64px;height:64px;border-radius:64px}.user-avatar-small{width:46px;height:46px;border-radius:46px}.full-showcase-text{text-align:center}.full-showcase-text span{font-size:12px;color:#616161}.full-showcase-text span:first-child{font-size:20px;color:#424242;margin-bottom:4px}.impersonated-user-name{font-size:16px}.horizontal-showcase-container{height:80px;border:1px solid #fd971f;border-radius:6px}.horizontal-showcase-container .user-avatar-large{margin-right:8px}.vertical-showcase-container{width:160px;border:1px solid #f0ad4e;border-radius:6px;white-space:pre-line}.vertical-showcase-container .user-avatar-large{margin-bottom:8px}::ng-deep .mat-tooltip{white-space:pre-line!important;text-align:center}.no-outline{outline:none!important}\n"], directives: [{ type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i2$2.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "translate": i1$2.TranslatePipe } });
+UserCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: UserCardComponent, selector: "nc-user-card", usesInheritance: true, ngImport: i0, template: "<div [ngSwitch]=\"mode\" class=\"no-outline\">\n    <div *ngSwitchCase=\"'full'\" #fullShowcase fxLayout=\"column\" fxLayoutAlign=\"start center\"\n         class=\"full-showcase-container no-outline margin-bottom-x2\" [style.width.px]=\"width\"\n         [routerLink]=\"link\">\n        <ng-template [ngIf]=\"!userBannerExists()\">\n            <div class=\"banner-wrapper mat-elevation-z6\" matRipple [matRippleTrigger]=\"fullShowcase\">\n                <div [style.backgroundImage]=\"'url(assets/netgrif-cubes-upper-left.png)'\" class=\"cube-upper-left\">\n                    <div [style.backgroundImage]=\"'url(assets/netgrif-cubes-down-right.png)'\" class=\"cube-down-right\"></div>\n                </div>\n            </div>\n        </ng-template>\n        <ng-template [ngIf]=\"userBannerExists()\">\n            <div [style.backgroundImage]=\"'url('+userBanner+')'\" class=\"full-width user-banner mat-elevation-z6\" matRipple\n                 [matRippleTrigger]=\"fullShowcase\"></div>\n        </ng-template>\n        <div class=\"user-avatar-large margin-bottom-default mat-elevation-z6\" matRipple\n             [matRippleTrigger]=\"fullShowcase\">\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n        <div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"full-width full-showcase-text padding-default\">\n            <span>{{user.fullName}}</span>\n            <span class=\"impersonated-user-name\" *ngIf=\"user.isImpersonating()\">{{'side-menu.impersonation.impersonating' | translate }} {{user.getSelfOrImpersonated().fullName}}</span>\n            <span>{{user.email}}</span>\n        </div>\n    </div>\n    <div *ngSwitchCase=\"'horizontal'\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n         class=\"horizontal-showcase-container no-outline padding-default\" [routerLink]=\"link\" matRipple>\n        <div class=\"user-avatar-large mat-elevation-z6\">\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n        <div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"full-width full-showcase-text\">\n            <span>{{user.fullName}}</span>\n            <span>{{user.email}}</span>\n        </div>\n    </div>\n    <div *ngSwitchCase=\"'vertical'\" fxLayout=\"column\" fxLayoutAlign=\"start center\"\n         class=\"vertical-showcase-container no-outline padding-default\"\n         [routerLink]=\"link\" matRipple>\n        <div class=\"user-avatar-large mat-elevation-z6\">\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n        <div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"full-width full-showcase-text\">\n            <span>{{user.fullName}}</span>\n            <span>{{user.email}}</span>\n        </div>\n    </div>\n    <div *ngSwitchCase=\"'icon'\" [routerLink]=\"link\">\n        <div class=\"mat-elevation-z6 no-outline\"\n             [ngClass]=\"{'user-avatar-large':iconStyle === 'large', 'user-avatar-small':iconStyle==='small'}\"\n             [matTooltip]=\"user.fullName+'\\n'+user.email\"\n             matTooltipHideDelay=\"1000\"\n             [matTooltipPosition]=\"tooltipPosition\"\n             matRipple>\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n    </div>\n    <div *ngSwitchDefault>\n        <span>{{ 'side-menu.user.showcase' | translate}}</span>\n    </div>\n</div>\n\n\n", styles: [".full-height{height:100%;min-height:100%}.full-width{width:100%;min-width:100%}.padding-default{padding:8px}.padding-half{padding:4px}.padding-x2{padding:16px}.margin-default{margin:8px}.margin-half{margin:4px}.margin-x2{margin:16px}.margin-top-default{margin-top:8px}.margin-top-half{margin-top:4px}.margin-top-x2{margin-top:16px}.margin-bottom-default{margin-bottom:8px}.margin-bottom-half{margin-bottom:4px}.margin-bottom-x2{margin-bottom:16px}.margin-left-default{margin-left:8px}.margin-left-half{margin-left:4px}.margin-left-x2{margin-left:16px}.margin-right-default{margin-right:8px}.margin-right-half{margin-right:4px}.margin-right-x2{margin-right:16px}.full-showcase-container .user-banner{height:100px;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.full-showcase-container .user-avatar-large{margin-top:-32px}.banner-wrapper{height:100px;width:100%}.cube-upper-left{width:100%;height:100%;background-repeat:no-repeat;background-size:auto 80px}.cube-down-right{background-repeat:no-repeat;background-position-x:right;background-position-y:bottom;background-size:auto 30px;min-width:100%;min-height:100%;padding:0;margin:0}.user-avatar-large{width:64px;height:64px;border-radius:64px}.user-avatar-small{width:46px;height:46px;border-radius:46px}.full-showcase-text{text-align:center}.full-showcase-text span{font-size:12px;color:#616161}.full-showcase-text span:first-child{font-size:20px;color:#424242;margin-bottom:4px}.impersonated-user-name{font-size:16px}.horizontal-showcase-container{height:80px;border:1px solid #fd971f;border-radius:6px}.horizontal-showcase-container .user-avatar-large{margin-right:8px}.vertical-showcase-container{width:160px;border:1px solid #f0ad4e;border-radius:6px;white-space:pre-line}.vertical-showcase-container .user-avatar-large{margin-bottom:8px}::ng-deep .mat-tooltip{white-space:pre-line!important;text-align:center}.no-outline{outline:none!important}\n"], directives: [{ type: i4$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i2$2.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }], pipes: { "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UserCardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-user-card', template: "<div [ngSwitch]=\"mode\" class=\"no-outline\">\n    <div *ngSwitchCase=\"'full'\" #fullShowcase fxLayout=\"column\" fxLayoutAlign=\"start center\"\n         class=\"full-showcase-container no-outline margin-bottom-x2\" [style.width.px]=\"width\"\n         [routerLink]=\"link\">\n        <ng-template [ngIf]=\"!userBannerExists()\">\n            <div class=\"banner-wrapper mat-elevation-z6\" matRipple [matRippleTrigger]=\"fullShowcase\">\n                <div [style.backgroundImage]=\"'url(assets/netgrif-cubes-upper-left.png)'\" class=\"cube-upper-left\">\n                    <div [style.backgroundImage]=\"'url(assets/netgrif-cubes-down-right.png)'\" class=\"cube-down-right\"></div>\n                </div>\n            </div>\n        </ng-template>\n        <ng-template [ngIf]=\"userBannerExists()\">\n            <div [style.backgroundImage]=\"'url('+userBanner+')'\" class=\"full-width user-banner mat-elevation-z6\" matRipple\n                 [matRippleTrigger]=\"fullShowcase\"></div>\n        </ng-template>\n        <div class=\"user-avatar-large margin-bottom-default mat-elevation-z6\" matRipple\n             [matRippleTrigger]=\"fullShowcase\">\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n        <div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"full-width full-showcase-text padding-default\">\n            <span>{{user.fullName}}</span>\n            <span class=\"impersonated-user-name\" *ngIf=\"user.isImpersonating()\">{{'side-menu.impersonation.impersonating' | translate }} {{user.getSelfOrImpersonated().fullName}}</span>\n            <span>{{user.email}}</span>\n        </div>\n    </div>\n    <div *ngSwitchCase=\"'horizontal'\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n         class=\"horizontal-showcase-container no-outline padding-default\" [routerLink]=\"link\" matRipple>\n        <div class=\"user-avatar-large mat-elevation-z6\">\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n        <div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"full-width full-showcase-text\">\n            <span>{{user.fullName}}</span>\n            <span>{{user.email}}</span>\n        </div>\n    </div>\n    <div *ngSwitchCase=\"'vertical'\" fxLayout=\"column\" fxLayoutAlign=\"start center\"\n         class=\"vertical-showcase-container no-outline padding-default\"\n         [routerLink]=\"link\" matRipple>\n        <div class=\"user-avatar-large mat-elevation-z6\">\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n        <div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"full-width full-showcase-text\">\n            <span>{{user.fullName}}</span>\n            <span>{{user.email}}</span>\n        </div>\n    </div>\n    <div *ngSwitchCase=\"'icon'\" [routerLink]=\"link\">\n        <div class=\"mat-elevation-z6 no-outline\"\n             [ngClass]=\"{'user-avatar-large':iconStyle === 'large', 'user-avatar-small':iconStyle==='small'}\"\n             [matTooltip]=\"user.fullName+'\\n'+user.email\"\n             matTooltipHideDelay=\"1000\"\n             [matTooltipPosition]=\"tooltipPosition\"\n             matRipple>\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n    </div>\n    <div *ngSwitchDefault>\n        <span>{{ 'side-menu.user.showcase' | translate}}</span>\n    </div>\n</div>\n\n\n", styles: [".full-height{height:100%;min-height:100%}.full-width{width:100%;min-width:100%}.padding-default{padding:8px}.padding-half{padding:4px}.padding-x2{padding:16px}.margin-default{margin:8px}.margin-half{margin:4px}.margin-x2{margin:16px}.margin-top-default{margin-top:8px}.margin-top-half{margin-top:4px}.margin-top-x2{margin-top:16px}.margin-bottom-default{margin-bottom:8px}.margin-bottom-half{margin-bottom:4px}.margin-bottom-x2{margin-bottom:16px}.margin-left-default{margin-left:8px}.margin-left-half{margin-left:4px}.margin-left-x2{margin-left:16px}.margin-right-default{margin-right:8px}.margin-right-half{margin-right:4px}.margin-right-x2{margin-right:16px}.full-showcase-container .user-banner{height:100px;border-bottom-left-radius:6px;border-bottom-right-radius:6px}.full-showcase-container .user-avatar-large{margin-top:-32px}.banner-wrapper{height:100px;width:100%}.cube-upper-left{width:100%;height:100%;background-repeat:no-repeat;background-size:auto 80px}.cube-down-right{background-repeat:no-repeat;background-position-x:right;background-position-y:bottom;background-size:auto 30px;min-width:100%;min-height:100%;padding:0;margin:0}.user-avatar-large{width:64px;height:64px;border-radius:64px}.user-avatar-small{width:46px;height:46px;border-radius:46px}.full-showcase-text{text-align:center}.full-showcase-text span{font-size:12px;color:#616161}.full-showcase-text span:first-child{font-size:20px;color:#424242;margin-bottom:4px}.impersonated-user-name{font-size:16px}.horizontal-showcase-container{height:80px;border:1px solid #fd971f;border-radius:6px}.horizontal-showcase-container .user-avatar-large{margin-right:8px}.vertical-showcase-container{width:160px;border:1px solid #f0ad4e;border-radius:6px;white-space:pre-line}.vertical-showcase-container .user-avatar-large{margin-bottom:8px}::ng-deep .mat-tooltip{white-space:pre-line!important;text-align:center}.no-outline{outline:none!important}\n"] }]
@@ -4279,17 +4432,17 @@ function filterCaseTabbedDataSearchCategoriesFactory(categoryResolverService, ta
 }
 
 class BreadcrumbsComponent extends AbstractBreadcrumbsComponent {
-    constructor(_uriService) {
-        super(_uriService);
+    constructor(_uriService, _caseResourceService, _activatedRoute, _router, _dynamicRoutingService, _translateService, _log) {
+        super(_uriService, _caseResourceService, _activatedRoute, _router, _dynamicRoutingService, _translateService, _log);
         this._uriService = _uriService;
     }
 }
-BreadcrumbsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BreadcrumbsComponent, deps: [{ token: i1.UriService }], target: i0.ɵɵFactoryTarget.Component });
-BreadcrumbsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: BreadcrumbsComponent, selector: "nc-breadcrumbs", usesInheritance: true, ngImport: i0, template: "<div class=\"breadcrumbs\">\n    <div *ngIf=\"showHome\">\n        <span class=\"breadcrumbs-span\" (click)=\"reset()\">{{'toolbar.menu.home' | translate}}</span>\n    </div>\n    <div *ngFor=\"let path of getPath();let i = index;let last = last;\">\n        <span class=\"breadcrumbs-span\" (click)=\"changePath(path, i)\">{{path | titlecase}}</span>\n        <span class=\"delimeter\" *ngIf=\"!last\">/</span>\n    </div>\n</div>\n", styles: [".breadcrumbs{margin:4px;align-items:center;align-self:center;display:flex;flex-grow:1;flex-wrap:wrap}.breadcrumbs-span{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.4px}.breadcrumbs-span:hover{cursor:pointer}.delimeter{margin:0 8px}\n"], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$2.TranslatePipe, "titlecase": i4$1.TitleCasePipe } });
+BreadcrumbsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BreadcrumbsComponent, deps: [{ token: i1.UriService }, { token: i1.CaseResourceService }, { token: i2$2.ActivatedRoute }, { token: i2$2.Router }, { token: i1.DynamicNavigationRouteProviderService }, { token: i1$2.TranslateService }, { token: i1.LoggerService }], target: i0.ɵɵFactoryTarget.Component });
+BreadcrumbsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: BreadcrumbsComponent, selector: "nc-breadcrumbs", usesInheritance: true, ngImport: i0, template: "<div class=\"breadcrumbs\">\n    <div *ngIf=\"showHome\">\n        <span class=\"breadcrumbs-span\" (click)=\"reset()\">{{'toolbar.menu.home' | translate}}</span>\n    </div>\n    <div *ngFor=\"let path of breadcrumbsParts;let i = index;let last = last;\">\n        <span class=\"breadcrumbs-span\" (click)=\"changePath(path, i)\">{{path | titlecase}}</span>\n        <span class=\"delimeter\" *ngIf=\"!last || (showFilter && !!filterName)\">/</span>\n    </div>\n    <div *ngIf=\"showFilter && !!filterName\">\n        <span class=\"breadcrumbs-span\">{{filterName}}</span>\n    </div>\n</div>\n", styles: [".breadcrumbs{margin:4px;align-items:center;align-self:center;display:flex;flex-grow:1;flex-wrap:wrap}.breadcrumbs-span{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.4px}.breadcrumbs-span:hover{cursor:pointer}.delimeter{margin:0 8px}\n"], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i1$2.TranslatePipe, "titlecase": i4$1.TitleCasePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BreadcrumbsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nc-breadcrumbs', template: "<div class=\"breadcrumbs\">\n    <div *ngIf=\"showHome\">\n        <span class=\"breadcrumbs-span\" (click)=\"reset()\">{{'toolbar.menu.home' | translate}}</span>\n    </div>\n    <div *ngFor=\"let path of getPath();let i = index;let last = last;\">\n        <span class=\"breadcrumbs-span\" (click)=\"changePath(path, i)\">{{path | titlecase}}</span>\n        <span class=\"delimeter\" *ngIf=\"!last\">/</span>\n    </div>\n</div>\n", styles: [".breadcrumbs{margin:4px;align-items:center;align-self:center;display:flex;flex-grow:1;flex-wrap:wrap}.breadcrumbs-span{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.4px}.breadcrumbs-span:hover{cursor:pointer}.delimeter{margin:0 8px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.UriService }]; } });
+            args: [{ selector: 'nc-breadcrumbs', template: "<div class=\"breadcrumbs\">\n    <div *ngIf=\"showHome\">\n        <span class=\"breadcrumbs-span\" (click)=\"reset()\">{{'toolbar.menu.home' | translate}}</span>\n    </div>\n    <div *ngFor=\"let path of breadcrumbsParts;let i = index;let last = last;\">\n        <span class=\"breadcrumbs-span\" (click)=\"changePath(path, i)\">{{path | titlecase}}</span>\n        <span class=\"delimeter\" *ngIf=\"!last || (showFilter && !!filterName)\">/</span>\n    </div>\n    <div *ngIf=\"showFilter && !!filterName\">\n        <span class=\"breadcrumbs-span\">{{filterName}}</span>\n    </div>\n</div>\n", styles: [".breadcrumbs{margin:4px;align-items:center;align-self:center;display:flex;flex-grow:1;flex-wrap:wrap}.breadcrumbs-span{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.4px}.breadcrumbs-span:hover{cursor:pointer}.delimeter{margin:0 8px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.UriService }, { type: i1.CaseResourceService }, { type: i2$2.ActivatedRoute }, { type: i2$2.Router }, { type: i1.DynamicNavigationRouteProviderService }, { type: i1$2.TranslateService }, { type: i1.LoggerService }]; } });
 
 class CaseListComponent extends AbstractCaseListComponent {
     constructor(_caseViewService, _log, injectedTabData, route) {
@@ -4300,7 +4453,7 @@ class CaseListComponent extends AbstractCaseListComponent {
     }
 }
 CaseListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CaseListComponent, deps: [{ token: i1.CaseViewService }, { token: i1.LoggerService }, { token: NAE_TAB_DATA, optional: true }, { token: i2$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
-CaseListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CaseListComponent, selector: "nc-case-list", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"showVirtualScroll\" fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex>\n    <ng-container *ngIf=\"cases$ | async as cases\">\n\n        <div *ngIf=\"(loading$ | async) === false && cases.length === 0\" fxLayout=\"column\"\n             fxLayoutAlign=\"center center\" fxFlex>\n            <mat-icon color=\"accent\" class=\"margin-bottom-default\">storage</mat-icon>\n            <span class=\"font-size-20\">{{ 'view-list.noCasesSatisfyingThisFilter' | translate}}</span>\n        </div>\n\n        <mat-accordion multi=\"true\" class=\"full-width panel-list-content\" fxFlex=\"100\">\n            <cdk-virtual-scroll-viewport itemSize=\"50\" (scrolledIndexChange)=\"loadNextPage()\"\n                                         class=\"full-height scroll-container dashboard-case-list\"\n                                         [ngStyle]=\"{'width': width ? width : '100%' }\">\n\n                <nc-case-panel [responsiveBody]=\"responsiveBody\"\n                               [textEllipsis]=\"textEllipsis\"\n                               *cdkVirtualFor=\"let case_ of cases;\n                                let i = index;\n                                let first = first;\n                                let last = last;\n                                trackBy: trackBy;\n                                templateCacheSize: 0\"\n                               [showCasePanelIcon]=\"showCasePanelIcon\"\n                               [showDeleteMenu]=\"showDeleteMenu\"\n                               [case_]=\"case_\" [selectedHeaders$]=\"selectedHeaders$\" (click)=\"onCaseClick(case_)\"\n                               [first]=\"first\" [last]=\"last\">\n                </nc-case-panel>\n\n                <div *ngIf=\"loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\"\n                     class=\"margin-top-default\">\n                    <mat-spinner color=\"primary\" diameter=\"50\"></mat-spinner>\n                </div>\n\n            </cdk-virtual-scroll-viewport>\n        </mat-accordion>\n    </ng-container>\n</div>\n", styles: [".font-size-20{font-size:20px}.font-size-40{font-size:40px}.block-size-40{width:40px;height:40px}.margin-bottom-default{margin-bottom:8px}.margin-top-default{margin-top:8px}.full-width{width:100%}.full-height{height:100%}.scroll-container{padding:0 1px}\n"], components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: CasePanelComponent, selector: "nc-case-panel" }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i9.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1$2.TranslatePipe } });
+CaseListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: CaseListComponent, selector: "nc-case-list", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"showVirtualScroll\" fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex>\n    <ng-container *ngIf=\"cases$ | async as cases\">\n\n        <div *ngIf=\"(loading$ | async) === false && cases.length === 0\" fxLayout=\"column\"\n             fxLayoutAlign=\"center center\" fxFlex>\n            <mat-icon color=\"accent\" class=\"margin-bottom-default\">storage</mat-icon>\n            <span class=\"font-size-20\">{{ 'view-list.noCasesSatisfyingThisFilter' | translate}}</span>\n        </div>\n\n        <mat-accordion multi=\"true\" class=\"full-width panel-list-content\" fxFlex=\"100\">\n            <cdk-virtual-scroll-viewport itemSize=\"50\" (scrolledIndexChange)=\"loadNextPage()\"\n                                         class=\"full-height scroll-container dashboard-case-list\"\n                                         [ngStyle]=\"{'width': width ? width : '100%' }\">\n\n                <nc-case-panel [responsiveBody]=\"responsiveBody\"\n                               [textEllipsis]=\"textEllipsis\"\n                               *cdkVirtualFor=\"let case_ of cases;\n                                let i = index;\n                                let first = first;\n                                let last = last;\n                                trackBy: trackBy;\n                                templateCacheSize: 0\"\n                               [showCasePanelIcon]=\"showCasePanelIcon\"\n                               [showDeleteMenu]=\"showDeleteMenu\"\n                               [case_]=\"case_\" [selectedHeaders$]=\"selectedHeaders$\" (click)=\"onCaseClick(case_)\"\n                               [first]=\"first\" [last]=\"last\">\n                </nc-case-panel>\n\n                <div *ngIf=\"loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\"\n                     class=\"margin-top-default\">\n                    <mat-spinner color=\"primary\" diameter=\"50\"></mat-spinner>\n                </div>\n\n            </cdk-virtual-scroll-viewport>\n        </mat-accordion>\n    </ng-container>\n</div>\n", styles: [".font-size-20{font-size:20px}.font-size-40{font-size:40px}.block-size-40{width:40px;height:40px}.margin-bottom-default{margin-bottom:8px}.margin-top-default{margin-top:8px}.full-width{width:100%}.full-height{height:100%}.scroll-container{padding:0 1px}\n"], components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: CasePanelComponent, selector: "nc-case-panel" }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i9.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: CaseListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-case-list', template: "<div *ngIf=\"showVirtualScroll\" fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex>\n    <ng-container *ngIf=\"cases$ | async as cases\">\n\n        <div *ngIf=\"(loading$ | async) === false && cases.length === 0\" fxLayout=\"column\"\n             fxLayoutAlign=\"center center\" fxFlex>\n            <mat-icon color=\"accent\" class=\"margin-bottom-default\">storage</mat-icon>\n            <span class=\"font-size-20\">{{ 'view-list.noCasesSatisfyingThisFilter' | translate}}</span>\n        </div>\n\n        <mat-accordion multi=\"true\" class=\"full-width panel-list-content\" fxFlex=\"100\">\n            <cdk-virtual-scroll-viewport itemSize=\"50\" (scrolledIndexChange)=\"loadNextPage()\"\n                                         class=\"full-height scroll-container dashboard-case-list\"\n                                         [ngStyle]=\"{'width': width ? width : '100%' }\">\n\n                <nc-case-panel [responsiveBody]=\"responsiveBody\"\n                               [textEllipsis]=\"textEllipsis\"\n                               *cdkVirtualFor=\"let case_ of cases;\n                                let i = index;\n                                let first = first;\n                                let last = last;\n                                trackBy: trackBy;\n                                templateCacheSize: 0\"\n                               [showCasePanelIcon]=\"showCasePanelIcon\"\n                               [showDeleteMenu]=\"showDeleteMenu\"\n                               [case_]=\"case_\" [selectedHeaders$]=\"selectedHeaders$\" (click)=\"onCaseClick(case_)\"\n                               [first]=\"first\" [last]=\"last\">\n                </nc-case-panel>\n\n                <div *ngIf=\"loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\"\n                     class=\"margin-top-default\">\n                    <mat-spinner color=\"primary\" diameter=\"50\"></mat-spinner>\n                </div>\n\n            </cdk-virtual-scroll-viewport>\n        </mat-accordion>\n    </ng-container>\n</div>\n", styles: [".font-size-20{font-size:20px}.font-size-40{font-size:40px}.block-size-40{width:40px;height:40px}.margin-bottom-default{margin-bottom:8px}.margin-top-default{margin-top:8px}.full-width{width:100%}.full-height{height:100%}.scroll-container{padding:0 1px}\n"] }]
@@ -4315,11 +4468,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 class DefaultTabbedCaseViewComponent extends AbstractTabbedCaseViewComponent {
     constructor(caseViewService, loggerService, viewIdService, overflowService, _injectedTabData) {
+        var _a, _b;
         super(caseViewService, loggerService, _injectedTabData, overflowService, undefined, undefined, _injectedTabData.newCaseButtonConfiguration);
         this._injectedTabData = _injectedTabData;
         this.initialSearchMode = _injectedTabData.caseViewSearchTypeConfiguration.initialSearchMode;
         this.showToggleButton = _injectedTabData.caseViewSearchTypeConfiguration.showSearchToggleButton;
         this.enableSearch = _injectedTabData.caseViewSearchTypeConfiguration.initialSearchMode !== undefined;
+        this.showCreateCaseButton = (_b = (_a = _injectedTabData.newCaseButtonConfiguration) === null || _a === void 0 ? void 0 : _a.newCaseButtonConfig) === null || _b === void 0 ? void 0 : _b.showCreateCaseButton;
         this.showDeleteMenu = _injectedTabData.caseViewShowMoreMenu;
         this.headersChangeable = _injectedTabData.caseViewHeadersChangeable;
         this.headersMode = _injectedTabData.caseViewHeadersMode ? _injectedTabData.caseViewHeadersMode : [];
@@ -4377,13 +4532,11 @@ class DefaultTabbedCaseViewComponent extends AbstractTabbedCaseViewComponent {
         if (additionalFilter === undefined) {
             filter = baseFilter;
         }
+        else if (mergeFilters) {
+            filter = additionalFilter.merge(baseFilter, MergeOperator.AND);
+        }
         else {
-            if (mergeFilters) {
-                filter = additionalFilter.merge(baseFilter, MergeOperator.AND);
-            }
-            else {
-                filter = additionalFilter;
-            }
+            filter = additionalFilter;
         }
         return filter;
     }
@@ -4439,7 +4592,7 @@ DefaultTabbedCaseViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             useFactory: navigationItemCaseViewDefaultHeadersFactory,
             deps: [NAE_NAVIGATION_ITEM_TASK_DATA]
         }
-    ], viewQueries: [{ propertyName: "caseHeaderComponent", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"case-view-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n    <nc-breadcrumbs></nc-breadcrumbs>\n\n    <div class=\"case-view-search-container\">\n        <div fxLayout=\"row\" class=\"max-height\" fxLayoutAlign=\"space-between\">\n            <div fxLayoutAlign=\"start center\" fxFlex>\n                <nc-search class=\"search-width search-fix\" *ngIf=\"(enableSearch)\" [showSearchToggleButton]=\"showToggleButton\"\n                           [initialSearchMode]=\"initialSearchMode\" (filterLoaded)=\"loadFilter($event)\"></nc-search>\n            </div>\n            <div fxLayoutAlign=\"end center\">\n                <nc-create-case-button [newCaseCreationConfig]=\"newCaseCreationConfig\" (caseCreatedEvent)=\"handleCaseClick($event)\"></nc-create-case-button>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"full-height transform-div custom-scrollbar\"\n         [ngClass]=\"{'overflow-div': getOverflowStatus()}\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n        <div class=\"full-height transform-div max-width-fix\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n            <nc-header #header [type]=\"headerType\" [maxHeaderColumns]=\"9\" [responsiveHeaders]=\"false\" [ngStyle]=\"{'width': getWidth()}\" [hideHeaderMenu]=\"!headersChangeable\" [showEditButton]=\"isMenuOptionEnabled('edit')\"\n                       [showSortButton]=\"isMenuOptionEnabled('sort')\" [showSearchButton]=\"isMenuOptionEnabled('search')\"\n                       [showTableSection]=\"allowTableMode\" class=\"case-header-padding\"></nc-header>\n\n            <nc-case-list [selectedHeaders$]=\"selectedHeaders$\" [textEllipsis]=\"true\" [showDeleteMenu]=\"showDeleteMenu\" [width]=\"getWidth()\"\n                          (caseClick)=\"handleCaseClick($event)\" [responsiveBody]=\"true\" fxFlex></nc-case-list>\n        </div>\n    </div>\n</div>\n", styles: [".case-view-container{margin:16px 24px;height:calc(100% - 32px);overflow:auto}.case-view-search-container{margin-top:16px;margin-bottom:2px;padding:0;max-height:50%}.case-header-padding{padding-left:1px;padding-right:1px;padding-top:16px}.search-width{width:100%}.full-height{height:100%}.overflow-div{overflow-x:scroll}.transform-div{transform:rotateX(180deg);-ms-transform:rotateX(180deg);-webkit-transform:rotateX(180deg)}.custom-scrollbar::-webkit-scrollbar{width:15px;height:15px;cursor:pointer}.max-width-fix{max-width:calc(100% - 8px)!important}.max-height{max-height:100%}.search-fix{min-height:calc(100% + 2px);max-height:100%;overflow-y:auto}@media screen and (max-width: 599.99px){.case-view-container{margin:12px}}\n"], components: [{ type: BreadcrumbsComponent, selector: "nc-breadcrumbs" }, { type: SearchComponent, selector: "nc-search" }, { type: CreateCaseButtonComponent, selector: "nc-create-case-button", inputs: ["newCaseCreationConfig", "disabled"], outputs: ["caseCreatedEvent"] }, { type: HeaderComponent, selector: "nc-header" }, { type: CaseListComponent, selector: "nc-case-list" }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }] });
+    ], viewQueries: [{ propertyName: "caseHeaderComponent", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"case-view-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n    <nc-breadcrumbs></nc-breadcrumbs>\n\n    <div class=\"case-view-search-container\">\n        <div fxLayout=\"row\" class=\"max-height\" fxLayoutAlign=\"space-between\">\n            <div fxLayoutAlign=\"start center\" fxFlex>\n                <nc-search class=\"search-width search-fix\" *ngIf=\"(enableSearch)\" [showSearchToggleButton]=\"showToggleButton\"\n                           [initialSearchMode]=\"initialSearchMode\" (filterLoaded)=\"loadFilter($event)\"></nc-search>\n            </div>\n            <div fxLayoutAlign=\"end center\" *ngIf=\"showCreateCaseButton\">\n                <nc-create-case-button [newCaseCreationConfig]=\"newCaseCreationConfig\" (caseCreatedEvent)=\"handleCaseClick($event)\"></nc-create-case-button>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"full-height transform-div custom-scrollbar\"\n         [ngClass]=\"{'overflow-div': getOverflowStatus()}\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n        <div class=\"full-height transform-div max-width-fix\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n            <nc-header #header [type]=\"headerType\" [maxHeaderColumns]=\"9\" [responsiveHeaders]=\"false\" [ngStyle]=\"{'width': getWidth()}\" [hideHeaderMenu]=\"!headersChangeable\" [showEditButton]=\"isMenuOptionEnabled('edit')\"\n                       [showSortButton]=\"isMenuOptionEnabled('sort')\" [showSearchButton]=\"isMenuOptionEnabled('search')\"\n                       [showTableSection]=\"allowTableMode\" class=\"case-header-padding\"></nc-header>\n\n            <nc-case-list [selectedHeaders$]=\"selectedHeaders$\" [textEllipsis]=\"true\" [showDeleteMenu]=\"showDeleteMenu\" [width]=\"getWidth()\"\n                          (caseClick)=\"handleCaseClick($event)\" [responsiveBody]=\"true\" fxFlex></nc-case-list>\n        </div>\n    </div>\n</div>\n", styles: [".case-view-container{margin:16px 24px;height:calc(100% - 32px);overflow:auto}.case-view-search-container{margin-top:16px;margin-bottom:2px;padding:0;max-height:50%}.case-header-padding{padding-left:1px;padding-right:1px;padding-top:16px}.search-width{width:100%}.full-height{height:100%}.overflow-div{overflow-x:scroll}.transform-div{transform:rotateX(180deg);-ms-transform:rotateX(180deg);-webkit-transform:rotateX(180deg)}.custom-scrollbar::-webkit-scrollbar{width:15px;height:15px;cursor:pointer}.max-width-fix{max-width:calc(100% - 8px)!important}.max-height{max-height:100%}.search-fix{min-height:calc(100% + 2px);max-height:100%;overflow-y:auto}@media screen and (max-width: 599.99px){.case-view-container{margin:12px}}\n"], components: [{ type: BreadcrumbsComponent, selector: "nc-breadcrumbs" }, { type: SearchComponent, selector: "nc-search" }, { type: CreateCaseButtonComponent, selector: "nc-create-case-button", inputs: ["newCaseCreationConfig", "disabled"], outputs: ["caseCreatedEvent"] }, { type: HeaderComponent, selector: "nc-header" }, { type: CaseListComponent, selector: "nc-case-list" }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DefaultTabbedCaseViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-default-tabbed-case-view', providers: [
@@ -4468,7 +4621,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             useFactory: navigationItemCaseViewDefaultHeadersFactory,
                             deps: [NAE_NAVIGATION_ITEM_TASK_DATA]
                         }
-                    ], template: "<div class=\"case-view-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n    <nc-breadcrumbs></nc-breadcrumbs>\n\n    <div class=\"case-view-search-container\">\n        <div fxLayout=\"row\" class=\"max-height\" fxLayoutAlign=\"space-between\">\n            <div fxLayoutAlign=\"start center\" fxFlex>\n                <nc-search class=\"search-width search-fix\" *ngIf=\"(enableSearch)\" [showSearchToggleButton]=\"showToggleButton\"\n                           [initialSearchMode]=\"initialSearchMode\" (filterLoaded)=\"loadFilter($event)\"></nc-search>\n            </div>\n            <div fxLayoutAlign=\"end center\">\n                <nc-create-case-button [newCaseCreationConfig]=\"newCaseCreationConfig\" (caseCreatedEvent)=\"handleCaseClick($event)\"></nc-create-case-button>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"full-height transform-div custom-scrollbar\"\n         [ngClass]=\"{'overflow-div': getOverflowStatus()}\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n        <div class=\"full-height transform-div max-width-fix\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n            <nc-header #header [type]=\"headerType\" [maxHeaderColumns]=\"9\" [responsiveHeaders]=\"false\" [ngStyle]=\"{'width': getWidth()}\" [hideHeaderMenu]=\"!headersChangeable\" [showEditButton]=\"isMenuOptionEnabled('edit')\"\n                       [showSortButton]=\"isMenuOptionEnabled('sort')\" [showSearchButton]=\"isMenuOptionEnabled('search')\"\n                       [showTableSection]=\"allowTableMode\" class=\"case-header-padding\"></nc-header>\n\n            <nc-case-list [selectedHeaders$]=\"selectedHeaders$\" [textEllipsis]=\"true\" [showDeleteMenu]=\"showDeleteMenu\" [width]=\"getWidth()\"\n                          (caseClick)=\"handleCaseClick($event)\" [responsiveBody]=\"true\" fxFlex></nc-case-list>\n        </div>\n    </div>\n</div>\n", styles: [".case-view-container{margin:16px 24px;height:calc(100% - 32px);overflow:auto}.case-view-search-container{margin-top:16px;margin-bottom:2px;padding:0;max-height:50%}.case-header-padding{padding-left:1px;padding-right:1px;padding-top:16px}.search-width{width:100%}.full-height{height:100%}.overflow-div{overflow-x:scroll}.transform-div{transform:rotateX(180deg);-ms-transform:rotateX(180deg);-webkit-transform:rotateX(180deg)}.custom-scrollbar::-webkit-scrollbar{width:15px;height:15px;cursor:pointer}.max-width-fix{max-width:calc(100% - 8px)!important}.max-height{max-height:100%}.search-fix{min-height:calc(100% + 2px);max-height:100%;overflow-y:auto}@media screen and (max-width: 599.99px){.case-view-container{margin:12px}}\n"] }]
+                    ], template: "<div class=\"case-view-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n    <nc-breadcrumbs></nc-breadcrumbs>\n\n    <div class=\"case-view-search-container\">\n        <div fxLayout=\"row\" class=\"max-height\" fxLayoutAlign=\"space-between\">\n            <div fxLayoutAlign=\"start center\" fxFlex>\n                <nc-search class=\"search-width search-fix\" *ngIf=\"(enableSearch)\" [showSearchToggleButton]=\"showToggleButton\"\n                           [initialSearchMode]=\"initialSearchMode\" (filterLoaded)=\"loadFilter($event)\"></nc-search>\n            </div>\n            <div fxLayoutAlign=\"end center\" *ngIf=\"showCreateCaseButton\">\n                <nc-create-case-button [newCaseCreationConfig]=\"newCaseCreationConfig\" (caseCreatedEvent)=\"handleCaseClick($event)\"></nc-create-case-button>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"full-height transform-div custom-scrollbar\"\n         [ngClass]=\"{'overflow-div': getOverflowStatus()}\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n        <div class=\"full-height transform-div max-width-fix\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n            <nc-header #header [type]=\"headerType\" [maxHeaderColumns]=\"9\" [responsiveHeaders]=\"false\" [ngStyle]=\"{'width': getWidth()}\" [hideHeaderMenu]=\"!headersChangeable\" [showEditButton]=\"isMenuOptionEnabled('edit')\"\n                       [showSortButton]=\"isMenuOptionEnabled('sort')\" [showSearchButton]=\"isMenuOptionEnabled('search')\"\n                       [showTableSection]=\"allowTableMode\" class=\"case-header-padding\"></nc-header>\n\n            <nc-case-list [selectedHeaders$]=\"selectedHeaders$\" [textEllipsis]=\"true\" [showDeleteMenu]=\"showDeleteMenu\" [width]=\"getWidth()\"\n                          (caseClick)=\"handleCaseClick($event)\" [responsiveBody]=\"true\" fxFlex></nc-case-list>\n        </div>\n    </div>\n</div>\n", styles: [".case-view-container{margin:16px 24px;height:calc(100% - 32px);overflow:auto}.case-view-search-container{margin-top:16px;margin-bottom:2px;padding:0;max-height:50%}.case-header-padding{padding-left:1px;padding-right:1px;padding-top:16px}.search-width{width:100%}.full-height{height:100%}.overflow-div{overflow-x:scroll}.transform-div{transform:rotateX(180deg);-ms-transform:rotateX(180deg);-webkit-transform:rotateX(180deg)}.custom-scrollbar::-webkit-scrollbar{width:15px;height:15px;cursor:pointer}.max-width-fix{max-width:calc(100% - 8px)!important}.max-height{max-height:100%}.search-fix{min-height:calc(100% + 2px);max-height:100%;overflow-y:auto}@media screen and (max-width: 599.99px){.case-view-container{margin:12px}}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i1.CaseViewService }, { type: i1.LoggerService }, { type: i1.ViewIdService }, { type: i1.OverflowService }, { type: undefined, decorators: [{
                         type: Inject,
@@ -4510,7 +4663,7 @@ class TabViewComponent extends AbstractTabViewComponent {
     }
 }
 TabViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabViewComponent, deps: [{ token: i1.ViewService }, { token: i1.LoggerService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-TabViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TabViewComponent, selector: "nc-tab-view", usesInheritance: true, ngImport: i0, template: "<mat-tab-group [selectedIndex]=\"tabView.selectedIndex.value\"\n               [class.center-tabs]=\"align === 'center'\"\n               [class.end-tabs]=\"align === 'end'\"\n               (selectedTabChange)=\"tabView.tabChange($event)\" class=\"tab-group\"\n               [class.nae-tab-fill-height]=\"stretch\" fxFlex>\n    <mat-tab *ngFor=\"let tab of tabView.openedTabs; let i=index\" [ngClass]=\"{'label-opacity': i === tabView.selectedIndex.value}\">\n        <ng-template mat-tab-label>\n            <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                    <mat-icon class=\"icon-margin-right\" [ngClass]=\"{'icon-tab-color': i === tabView.selectedIndex.value}\"\n                              *ngIf=\"tab.getIcon() !== undefined\">{{tab.getIcon$()|async}}</mat-icon>\n                    <span class=\"custom-badge\" [matBadge]=\"(badgeCount(tab) | async)\"\n                          [matBadgeHidden]=\"(badgeHidden(tab) | async)\">{{((tab.getText$() | async) | translate) + ((badgeHidden(tab) | async) ? '' : offset)}}</span>\n                </div>\n                <button mat-icon-button *ngIf=\"tab.canBeClosed\" (click)=\"tabView.closeTabIndex(i)\">\n                    <mat-icon [ngClass]=\"{'icon-tab-color': i === tabView.selectedIndex.value}\">clear</mat-icon>\n                </button>\n            </div>\n        </ng-template>\n        <!--        TODO 16.4.2020 - lazy loading of tab contents is disabled for now -->\n        <!--        <ng-template matTabContent>-->\n        <nc-tab-creation-detector [initializeTabFunction]=\"initializeTabLambda\"\n                                  [tabIndex]=\"i\"></nc-tab-creation-detector>\n        <ng-template [ngIf]=\"tab.isTabInitialized\" class=\"full-height\">\n            <ng-template [cdkPortalOutlet]=\"tab.portal\" class=\"full-height\"></ng-template>\n        </ng-template>\n    </mat-tab>\n</mat-tab-group>\n", styles: [".icon-margin-right{margin-right:5px}.full-height{height:100%}.full-width{width:100%}.tab-group{height:100%}.mat-badge-content{top:-3px!important;right:-24px!important}.custom-badge{font-weight:400;font-size:14px;line-height:20px;letter-spacing:.25px}.custom-badge .mat-badge-content{width:-moz-fit-content;width:fit-content;min-width:16px;text-align:center;border-radius:8px;padding-left:3px;padding-right:3px}\n"], components: [{ type: i2$7.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i2$7.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: TabCreationDetectorComponent, selector: "nc-tab-creation-detector" }], directives: [{ type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$7.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { type: i1$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1$2.TranslatePipe } });
+TabViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TabViewComponent, selector: "nc-tab-view", usesInheritance: true, ngImport: i0, template: "<mat-tab-group [selectedIndex]=\"tabView.selectedIndex.value\"\n               [class.center-tabs]=\"align === 'center'\"\n               [class.end-tabs]=\"align === 'end'\"\n               (selectedTabChange)=\"tabView.tabChange($event)\" class=\"tab-group\"\n               [class.nae-tab-fill-height]=\"stretch\" fxFlex>\n    <mat-tab *ngFor=\"let tab of tabView.openedTabs; let i=index\" [ngClass]=\"{'label-opacity': i === tabView.selectedIndex.value}\">\n        <ng-template mat-tab-label>\n            <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                    <mat-icon class=\"icon-margin-right\" [ngClass]=\"{'icon-tab-color': i === tabView.selectedIndex.value}\"\n                              *ngIf=\"tab.getIcon() !== undefined\">{{tab.getIcon$()|async}}</mat-icon>\n                    <span class=\"custom-badge\" [matBadge]=\"(badgeCount(tab) | async)\"\n                          [matBadgeHidden]=\"(badgeHidden(tab) | async)\">{{((tab.getText$() | async) | translate) + ((badgeHidden(tab) | async) ? '' : offset)}}</span>\n                </div>\n                <button mat-icon-button *ngIf=\"tab.canBeClosed\" (click)=\"tabView.closeTabIndex(i)\">\n                    <mat-icon [ngClass]=\"{'icon-tab-color': i === tabView.selectedIndex.value}\">clear</mat-icon>\n                </button>\n            </div>\n        </ng-template>\n        <!--        TODO 16.4.2020 - lazy loading of tab contents is disabled for now -->\n        <!--        <ng-template matTabContent>-->\n        <nc-tab-creation-detector [initializeTabFunction]=\"initializeTabLambda\"\n                                  [tabIndex]=\"i\"></nc-tab-creation-detector>\n        <ng-template [ngIf]=\"tab.isTabInitialized\" class=\"full-height\">\n            <ng-template [cdkPortalOutlet]=\"tab.portal\" class=\"full-height\"></ng-template>\n        </ng-template>\n    </mat-tab>\n</mat-tab-group>\n", styles: [".icon-margin-right{margin-right:5px}.full-height{height:100%}.full-width{width:100%}.tab-group{height:100%}.mat-badge-content{top:-3px!important;right:-24px!important}.custom-badge{font-weight:400;font-size:14px;line-height:20px;letter-spacing:.25px}.custom-badge .mat-badge-content{width:-moz-fit-content;width:fit-content;min-width:16px;text-align:center;border-radius:8px;padding-left:3px;padding-right:3px}\n"], components: [{ type: i2$8.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i2$8.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: TabCreationDetectorComponent, selector: "nc-tab-creation-detector" }], directives: [{ type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2$8.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { type: i1$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], pipes: { "async": i4$1.AsyncPipe, "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-tab-view', template: "<mat-tab-group [selectedIndex]=\"tabView.selectedIndex.value\"\n               [class.center-tabs]=\"align === 'center'\"\n               [class.end-tabs]=\"align === 'end'\"\n               (selectedTabChange)=\"tabView.tabChange($event)\" class=\"tab-group\"\n               [class.nae-tab-fill-height]=\"stretch\" fxFlex>\n    <mat-tab *ngFor=\"let tab of tabView.openedTabs; let i=index\" [ngClass]=\"{'label-opacity': i === tabView.selectedIndex.value}\">\n        <ng-template mat-tab-label>\n            <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                <div fxFlex fxLayout=\"row\" fxLayoutAlign=\"start center\">\n                    <mat-icon class=\"icon-margin-right\" [ngClass]=\"{'icon-tab-color': i === tabView.selectedIndex.value}\"\n                              *ngIf=\"tab.getIcon() !== undefined\">{{tab.getIcon$()|async}}</mat-icon>\n                    <span class=\"custom-badge\" [matBadge]=\"(badgeCount(tab) | async)\"\n                          [matBadgeHidden]=\"(badgeHidden(tab) | async)\">{{((tab.getText$() | async) | translate) + ((badgeHidden(tab) | async) ? '' : offset)}}</span>\n                </div>\n                <button mat-icon-button *ngIf=\"tab.canBeClosed\" (click)=\"tabView.closeTabIndex(i)\">\n                    <mat-icon [ngClass]=\"{'icon-tab-color': i === tabView.selectedIndex.value}\">clear</mat-icon>\n                </button>\n            </div>\n        </ng-template>\n        <!--        TODO 16.4.2020 - lazy loading of tab contents is disabled for now -->\n        <!--        <ng-template matTabContent>-->\n        <nc-tab-creation-detector [initializeTabFunction]=\"initializeTabLambda\"\n                                  [tabIndex]=\"i\"></nc-tab-creation-detector>\n        <ng-template [ngIf]=\"tab.isTabInitialized\" class=\"full-height\">\n            <ng-template [cdkPortalOutlet]=\"tab.portal\" class=\"full-height\"></ng-template>\n        </ng-template>\n    </mat-tab>\n</mat-tab-group>\n", styles: [".icon-margin-right{margin-right:5px}.full-height{height:100%}.full-width{width:100%}.tab-group{height:100%}.mat-badge-content{top:-3px!important;right:-24px!important}.custom-badge{font-weight:400;font-size:14px;line-height:20px;letter-spacing:.25px}.custom-badge .mat-badge-content{width:-moz-fit-content;width:fit-content;min-width:16px;text-align:center;border-radius:8px;padding-left:3px;padding-right:3px}\n"] }]
@@ -4542,12 +4695,14 @@ class DefaultTabViewComponent {
         const createCaseButtonTitle = extractFieldValueFromData(this._navigationItemTaskData, GroupNavigationConstants.ITEM_FIELD_ID_CREATE_CASE_BUTTON_TITLE);
         const createCaseButtonIcon = extractFieldValueFromData(this._navigationItemTaskData, GroupNavigationConstants.ITEM_FIELD_ID_CREATE_CASE_BUTTON_ICON);
         const requireTitle = extractFieldValueFromData(this._navigationItemTaskData, GroupNavigationConstants.ITEM_FIELD_ID_CASE_TITLE_IN_CREATION);
+        const showCreateCaseButton = extractFieldValueFromData(this._navigationItemTaskData, GroupNavigationConstants.ITEM_FIELD_ID_SHOW_CREATE_CASE_BUTTON);
         const newCaseButtonConfig = {
             enableCaseTitle: requireTitle,
             isCaseTitleRequired: requireTitle,
             newCaseButtonConfig: {
                 createCaseButtonTitle,
-                createCaseButtonIcon
+                createCaseButtonIcon,
+                showCreateCaseButton: showCreateCaseButton,
             },
             blockNets: blockNets
         };
@@ -4905,7 +5060,7 @@ class WorkflowPanelComponent extends AbstractWorkflowPanelComponent {
     }
 }
 WorkflowPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: WorkflowPanelComponent, deps: [{ token: i1.LoggerService }, { token: i1$2.TranslateService }, { token: i1.WorkflowViewService }, { token: i1.PetriNetResourceService }, { token: i1.OverflowService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-WorkflowPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: WorkflowPanelComponent, selector: "nc-workflow-panel", usesInheritance: true, ngImport: i0, template: "<nc-app-panel [panelHeader]=\"header\" [panelContent]=\"content\" (getExpansionPanelRef)=\"setPanelRef($event)\" [first]=\"first\" [last]=\"last\">\n    <ng-template #header>\n        <div fxLayoutAlign=\"start center\" fxLayout=\"row\" fxFlex=\"95\" (click)=\"preventSelectionClick($event)\">\n            <div *ngFor=\"let field of featuredFieldsValues; let i = index\" fxLayoutAlign=\"start center\" fxFlex\n                 [fxHide.lt-xl]=\"i >= 4 && responsiveBody\"\n                 [fxHide.lt-lg]=\"i >= 3 && responsiveBody\"\n                 [fxHide.lt-md]=\"i >= 2 && responsiveBody\"\n                 [fxHide.lt-sm]=\"i >= 1 && responsiveBody\">\n                <mat-icon class=\"workflow-panel-icon panel-primary-icon\"\n                          *ngIf=\"!!field.icon && !!field.value\">{{field.icon}}</mat-icon>\n                {{field.value}}\n            </div>\n        </div>\n        <div fxFlex=\"5\"></div>\n    </ng-template>\n    <ng-template #content>\n        <div class=\"panel-main-content\" fxLayout=\"column\">\n            <div class=\"workflow-panel-body netgrif-input\" fxFlex=\"100\">\n                <div fxLayout=\"row\">\n                    <div fxFlex=\"50\">\n                        <nc-data-field-template *ngIf=\"!panelContent.netIdentifier.behavior.hidden\"\n                                                [dataField]=\"panelContent.netIdentifier\">\n                        </nc-data-field-template>\n                    </div>\n                    <div fxFlex=\"50\">\n                        <nc-data-field-template *ngIf=\"!panelContent.title.behavior.hidden\"\n                                                [dataField]=\"panelContent.title\">\n                        </nc-data-field-template>\n                    </div>\n                </div>\n                <div fxLayout=\"row\">\n                    <div fxFlex=\"50\">\n                        <nc-data-field-template *ngIf=\"!panelContent.version.behavior.hidden\"\n                                                [dataField]=\"panelContent.version\">\n                        </nc-data-field-template>\n                    </div>\n                    <div fxFlex=\"50\">\n                        <nc-data-field-template *ngIf=\"!panelContent.author.behavior.hidden\"\n                                                [dataField]=\"panelContent.author\">\n                        </nc-data-field-template>\n                    </div>\n                </div>\n                <div fxLayout=\"row\">\n                    <div fxFlex=\"50\">\n                        <nc-data-field-template *ngIf=\"!panelContent.uploaded.behavior.hidden\"\n                                                [dataField]=\"panelContent.uploaded\">\n                        </nc-data-field-template>\n                    </div>\n                </div>\n            </div>\n            <mat-action-row>\n                <button mat-stroked-button color=\"primary\"\n                        (click)=\"downloadNetFile()\">{{'workflow.download' | translate | uppercase }}</button>\n                <button *ngIf=\"showDeleteMenu\" mat-stroked-button color=\"warn\"\n                        (click)=\"deleteWorkflow()\">{{'workflow.delete' | translate | uppercase }}</button>\n                <button mat-button color=\"primary\"\n                        (click)=\"panelRef.expanded = false\">{{'tasks.view.collapse' | translate | uppercase }}</button>\n            </mat-action-row>\n        </div>\n    </ng-template>\n</nc-app-panel>\n", styles: [".task-panel-icon{margin-right:10px}.workflow-panel-footer{border-top:1px solid rgba(0,0,0,.03);padding:5px 24px}.workflow-panel-body{padding:10px 24px}.workflow-panel-icon{margin-right:8px}\n"], components: [{ type: PanelComponent, selector: "nc-app-panel" }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DataFieldTemplateComponent, selector: "nc-data-field-template" }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7$1.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.MatExpansionPanelActionRow, selector: "mat-action-row" }], pipes: { "uppercase": i4$1.UpperCasePipe, "translate": i1$2.TranslatePipe } });
+WorkflowPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: WorkflowPanelComponent, selector: "nc-workflow-panel", usesInheritance: true, ngImport: i0, template: "<nc-app-panel [panelHeader]=\"header\" [panelContent]=\"content\" (getExpansionPanelRef)=\"setPanelRef($event)\" [first]=\"first\" [last]=\"last\">\n    <ng-template #header>\n        <div fxLayoutAlign=\"start center\" fxLayout=\"row\" fxFlex=\"95\" (click)=\"preventSelectionClick($event)\">\n            <div *ngFor=\"let field of featuredFieldsValues; let i = index\" fxLayoutAlign=\"start center\" fxFlex\n                 [fxHide.lt-xl]=\"i >= 4 && responsiveBody\"\n                 [fxHide.lt-lg]=\"i >= 3 && responsiveBody\"\n                 [fxHide.lt-md]=\"i >= 2 && responsiveBody\"\n                 [fxHide.lt-sm]=\"i >= 1 && responsiveBody\">\n                <mat-icon class=\"workflow-panel-icon panel-primary-icon\"\n                          *ngIf=\"!!field.icon && !!field.value\">{{field.icon}}</mat-icon>\n                {{field.value}}\n            </div>\n        </div>\n        <div fxFlex=\"5\"></div>\n    </ng-template>\n    <ng-template #content>\n        <div class=\"panel-main-content\" fxLayout=\"column\">\n            <div class=\"workflow-panel-body netgrif-input\" fxFlex=\"100\">\n                <div fxLayout=\"row\">\n                    <div fxFlex=\"50\">\n                        <nc-data-field-template *ngIf=\"!panelContent.netIdentifier.behavior.hidden\"\n                                                [dataField]=\"panelContent.netIdentifier\">\n                        </nc-data-field-template>\n                    </div>\n                    <div fxFlex=\"50\">\n                        <nc-data-field-template *ngIf=\"!panelContent.title.behavior.hidden\"\n                                                [dataField]=\"panelContent.title\">\n                        </nc-data-field-template>\n                    </div>\n                </div>\n                <div fxLayout=\"row\">\n                    <div fxFlex=\"50\">\n                        <nc-data-field-template *ngIf=\"!panelContent.version.behavior.hidden\"\n                                                [dataField]=\"panelContent.version\">\n                        </nc-data-field-template>\n                    </div>\n                    <div fxFlex=\"50\">\n                        <nc-data-field-template *ngIf=\"!panelContent.author.behavior.hidden\"\n                                                [dataField]=\"panelContent.author\">\n                        </nc-data-field-template>\n                    </div>\n                </div>\n                <div fxLayout=\"row\">\n                    <div fxFlex=\"50\">\n                        <nc-data-field-template *ngIf=\"!panelContent.uploaded.behavior.hidden\"\n                                                [dataField]=\"panelContent.uploaded\">\n                        </nc-data-field-template>\n                    </div>\n                </div>\n            </div>\n            <mat-action-row>\n                <button mat-stroked-button color=\"primary\"\n                        (click)=\"downloadNetFile()\">{{'workflow.download' | translate | uppercase }}</button>\n                <button *ngIf=\"showDeleteMenu\" mat-stroked-button color=\"warn\"\n                        (click)=\"deleteWorkflow()\">{{'workflow.delete' | translate | uppercase }}</button>\n                <button mat-button color=\"primary\"\n                        (click)=\"panelRef.expanded = false\">{{'tasks.view.collapse' | translate | uppercase }}</button>\n            </mat-action-row>\n        </div>\n    </ng-template>\n</nc-app-panel>\n", styles: [".task-panel-icon{margin-right:10px}.workflow-panel-footer{border-top:1px solid rgba(0,0,0,.03);padding:5px 24px}.workflow-panel-body{padding:10px 24px}.workflow-panel-icon{margin-right:8px}\n"], components: [{ type: PanelComponent, selector: "nc-app-panel" }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: DataFieldTemplateComponent, selector: "nc-data-field-template" }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$2.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.MatExpansionPanelActionRow, selector: "mat-action-row" }], pipes: { "uppercase": i4$1.UpperCasePipe, "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: WorkflowPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-workflow-panel', template: "<nc-app-panel [panelHeader]=\"header\" [panelContent]=\"content\" (getExpansionPanelRef)=\"setPanelRef($event)\" [first]=\"first\" [last]=\"last\">\n    <ng-template #header>\n        <div fxLayoutAlign=\"start center\" fxLayout=\"row\" fxFlex=\"95\" (click)=\"preventSelectionClick($event)\">\n            <div *ngFor=\"let field of featuredFieldsValues; let i = index\" fxLayoutAlign=\"start center\" fxFlex\n                 [fxHide.lt-xl]=\"i >= 4 && responsiveBody\"\n                 [fxHide.lt-lg]=\"i >= 3 && responsiveBody\"\n                 [fxHide.lt-md]=\"i >= 2 && responsiveBody\"\n                 [fxHide.lt-sm]=\"i >= 1 && responsiveBody\">\n                <mat-icon class=\"workflow-panel-icon panel-primary-icon\"\n                          *ngIf=\"!!field.icon && !!field.value\">{{field.icon}}</mat-icon>\n                {{field.value}}\n            </div>\n        </div>\n        <div fxFlex=\"5\"></div>\n    </ng-template>\n    <ng-template #content>\n        <div class=\"panel-main-content\" fxLayout=\"column\">\n            <div class=\"workflow-panel-body netgrif-input\" fxFlex=\"100\">\n                <div fxLayout=\"row\">\n                    <div fxFlex=\"50\">\n                        <nc-data-field-template *ngIf=\"!panelContent.netIdentifier.behavior.hidden\"\n                                                [dataField]=\"panelContent.netIdentifier\">\n                        </nc-data-field-template>\n                    </div>\n                    <div fxFlex=\"50\">\n                        <nc-data-field-template *ngIf=\"!panelContent.title.behavior.hidden\"\n                                                [dataField]=\"panelContent.title\">\n                        </nc-data-field-template>\n                    </div>\n                </div>\n                <div fxLayout=\"row\">\n                    <div fxFlex=\"50\">\n                        <nc-data-field-template *ngIf=\"!panelContent.version.behavior.hidden\"\n                                                [dataField]=\"panelContent.version\">\n                        </nc-data-field-template>\n                    </div>\n                    <div fxFlex=\"50\">\n                        <nc-data-field-template *ngIf=\"!panelContent.author.behavior.hidden\"\n                                                [dataField]=\"panelContent.author\">\n                        </nc-data-field-template>\n                    </div>\n                </div>\n                <div fxLayout=\"row\">\n                    <div fxFlex=\"50\">\n                        <nc-data-field-template *ngIf=\"!panelContent.uploaded.behavior.hidden\"\n                                                [dataField]=\"panelContent.uploaded\">\n                        </nc-data-field-template>\n                    </div>\n                </div>\n            </div>\n            <mat-action-row>\n                <button mat-stroked-button color=\"primary\"\n                        (click)=\"downloadNetFile()\">{{'workflow.download' | translate | uppercase }}</button>\n                <button *ngIf=\"showDeleteMenu\" mat-stroked-button color=\"warn\"\n                        (click)=\"deleteWorkflow()\">{{'workflow.delete' | translate | uppercase }}</button>\n                <button mat-button color=\"primary\"\n                        (click)=\"panelRef.expanded = false\">{{'tasks.view.collapse' | translate | uppercase }}</button>\n            </mat-action-row>\n        </div>\n    </ng-template>\n</nc-app-panel>\n", styles: [".task-panel-icon{margin-right:10px}.workflow-panel-footer{border-top:1px solid rgba(0,0,0,.03);padding:5px 24px}.workflow-panel-body{padding:10px 24px}.workflow-panel-icon{margin-right:8px}\n"] }]
@@ -4960,7 +5115,7 @@ class PublicWorkflowPanelComponent extends AbstractWorkflowPanelComponent {
     }
 }
 PublicWorkflowPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PublicWorkflowPanelComponent, deps: [{ token: i1.LoggerService }, { token: i1$2.TranslateService }, { token: i1.WorkflowViewService }, { token: i1.PetriNetResourceService }, { token: i1.OverflowService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-PublicWorkflowPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PublicWorkflowPanelComponent, selector: "nc-public-workflow-panel", usesInheritance: true, ngImport: i0, template: "<nc-app-panel [panelHeader]=\"header\" [preventExpand]=\"true\">\n    <ng-template #header>\n        <div fxLayoutAlign=\"start center\" fxLayout=\"row\" fxFlex=\"95\">\n            <div *ngFor=\"let field of featuredFieldsValues; let i = index\" fxLayoutAlign=\"start center\" fxFlex\n                 [fxHide.lt-xl]=\"i >= 4 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-lg]=\"i >= 3 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-md]=\"i >= 2 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-sm]=\"i >= 1 && responsiveBody && !overflowMode\"\n            >\n                <mat-icon class=\"workflow-panel-icon panel-primary-icon\"\n                          *ngIf=\"!!field.icon && !!field.value\">{{field.icon}}</mat-icon>\n                {{field.value}}\n            </div>\n        </div>\n        <div fxFlex=\"5\"></div>\n    </ng-template>\n</nc-app-panel>\n", styles: [""], components: [{ type: PanelComponent, selector: "nc-app-panel" }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7$1.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+PublicWorkflowPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PublicWorkflowPanelComponent, selector: "nc-public-workflow-panel", usesInheritance: true, ngImport: i0, template: "<nc-app-panel [panelHeader]=\"header\" [preventExpand]=\"true\">\n    <ng-template #header>\n        <div fxLayoutAlign=\"start center\" fxLayout=\"row\" fxFlex=\"95\">\n            <div *ngFor=\"let field of featuredFieldsValues; let i = index\" fxLayoutAlign=\"start center\" fxFlex\n                 [fxHide.lt-xl]=\"i >= 4 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-lg]=\"i >= 3 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-md]=\"i >= 2 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-sm]=\"i >= 1 && responsiveBody && !overflowMode\"\n            >\n                <mat-icon class=\"workflow-panel-icon panel-primary-icon\"\n                          *ngIf=\"!!field.icon && !!field.value\">{{field.icon}}</mat-icon>\n                {{field.value}}\n            </div>\n        </div>\n        <div fxFlex=\"5\"></div>\n    </ng-template>\n</nc-app-panel>\n", styles: [""], components: [{ type: PanelComponent, selector: "nc-app-panel" }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$2.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PublicWorkflowPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-public-workflow-panel', template: "<nc-app-panel [panelHeader]=\"header\" [preventExpand]=\"true\">\n    <ng-template #header>\n        <div fxLayoutAlign=\"start center\" fxLayout=\"row\" fxFlex=\"95\">\n            <div *ngFor=\"let field of featuredFieldsValues; let i = index\" fxLayoutAlign=\"start center\" fxFlex\n                 [fxHide.lt-xl]=\"i >= 4 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-lg]=\"i >= 3 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-md]=\"i >= 2 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-sm]=\"i >= 1 && responsiveBody && !overflowMode\"\n            >\n                <mat-icon class=\"workflow-panel-icon panel-primary-icon\"\n                          *ngIf=\"!!field.icon && !!field.value\">{{field.icon}}</mat-icon>\n                {{field.value}}\n            </div>\n        </div>\n        <div fxFlex=\"5\"></div>\n    </ng-template>\n</nc-app-panel>\n", styles: [""] }]
@@ -5165,7 +5320,7 @@ class NavigationDoubleDrawerComponent extends AbstractNavigationDoubleDrawerComp
     }
 }
 NavigationDoubleDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationDoubleDrawerComponent, deps: [{ token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i1$6.BreakpointObserver }, { token: i1.LanguageService }, { token: i1$2.TranslateService }, { token: i1.UserService }, { token: i1.AccessService }, { token: i1.LoggerService }, { token: i1.ConfigurationService }, { token: i1.UriService }, { token: i1.CaseResourceService }, { token: i1.ImpersonationUserSelectService }, { token: i1.ImpersonationService }, { token: i1.DynamicNavigationRouteProviderService }], target: i0.ɵɵFactoryTarget.Component });
-NavigationDoubleDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NavigationDoubleDrawerComponent, selector: "nc-navigation-double-drawer", usesInheritance: true, ngImport: i0, template: "<div class=\"drawer-control rail-color height-60\" [ngClass]=\"{'index-menu': !configLeftMenu.opened}\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n    <button mat-icon-button (click)=\"toggleMenu()\" class=\"menu-button mat-typography menu-font-color\">\n        <mat-icon>menu</mat-icon>\n    </button>\n</div>\n<mat-toolbar fxHide.gt-sm class=\"toolbar\">\n    <mat-toolbar-row fxLayout=\"row\" fxLayoutAlign=\"space-between stretch\">\n        <div fxFlex fxLayoutAlign=\"start center\">\n            <button mat-icon-button (click)=\"toggleMenu()\">\n                <mat-icon>menu</mat-icon>\n            </button>\n        </div>\n        <div fxLayoutAlign=\"center center\" fxFlex>\n            <img #logo [alt]=\"imageAlt\" [src]=\"image\" class=\"logoimg-tool\"\n                 [routerLink]=\"imageRouterLink !== undefined ? imageRouterLink : []\">\n        </div>\n        <div fxFlex></div>\n    </mat-toolbar-row>\n</mat-toolbar>\n<mat-spinner *ngIf=\"!logo\"></mat-spinner>\n<mat-sidenav-container class=\"rail-container deny-select\">\n    <mat-sidenav mode=\"side\" [(opened)]=\"configLeftMenu.opened\" position=\"start\"\n                 [disableClose]=\"configLeftMenu.disableClose\"\n                 class=\"rail-content\">\n\n        <div fxLayout=\"column\" class=\"rail-color\" fxFlex>\n\n            <div *ngTemplateOutlet=\"portalLeftMenu || defaultLeftSide\"></div>\n\n            <div fxFlex></div>\n\n            <mat-menu #userRailMenu=\"matMenu\">\n                <div mat-menu-item role=\"menuitem\" class=\"large-menu-item\" fxLayout=\"row\" fxFlexAlign=\"center center\"\n                     [routerLink]=\"profileRouterLink\" routerLinkActive=\"active-tree-node\">\n                    <mat-icon class=\"margin-auto\" fxFlex>face</mat-icon>\n                    <div class=\"large-menu-item\" fxLayout=\"column\" fxFlexAlign=\"start center\" fxFlex>\n                        <span *ngIf=\"!user.isImpersonating()\"  class=\"large-menu-item-text\" fxFlex=\"50\">{{user.fullName}}</span>\n                        <span *ngIf=\"user.isImpersonating()\" class=\"large-menu-item-text\" fxFlex=\"50\">{{user.fullName}} ({{user.getSelfOrImpersonated().fullName}})</span>\n                        <span class=\"large-menu-item-text\" style=\"font-size: 12px;\" fxFlex=\"50\">{{user.email}}</span>\n                    </div>\n                </div>\n                <button *ngIf=\"includeImpersonation && !user.isImpersonating()\" mat-menu-item (click)=\"impersonate()\">\n                    <mat-icon>supervisor_account</mat-icon>\n                    <span>{{'side-menu.impersonation.submit' | translate}}</span>\n                </button>\n                <button *ngIf=\"includeImpersonation && user.isImpersonating()\" mat-menu-item (click)=\"stopImpersonating()\">\n                    <mat-icon>clear</mat-icon>\n                    <span>{{'side-menu.impersonation.cease' | translate }}</span>\n                </button>\n                <button mat-menu-item (click)=\"logout()\">\n                    <mat-icon>exit_to_app</mat-icon>\n                    <span>{{ 'toolbar.menu.logout' | translate }}</span>\n                </button>\n            </mat-menu>\n            <button *ngIf=\"includeUser\" mat-icon-button [matMenuTriggerFor]=\"userRailMenu\" class=\"menu-button mat-typography menu-font-color\"\n                    [matTooltip]=\"user.fullName\"\n                    [matTooltipPosition]=\"'right'\">\n                <mat-icon>account_circle</mat-icon>\n            </button>\n\n            <div *ngIf=\"includeLanguage\" fxLayout=\"row\" class=\"icon-container\" fxLayoutAlign=\"center center\">\n                <nc-language-selector fxLayout=\"row\" [language]=\"getLang()\"></nc-language-selector>\n            </div>\n\n            <mat-menu #railMenu=\"matMenu\">\n                <button *ngFor='let item of hiddenCustomItems; trackBy: itemsTrackBy' mat-menu-item\n                        [routerLink]='item.routing.path' routerLinkActive=\"active-tree-node\">\n                    <mat-icon>{{item.navigation.icon}}</mat-icon>\n                    <span>{{item.navigation.title}}</span>\n                </button>\n            </mat-menu>\n            <!--            <div fxLayout=\"row\" class=\"margin-bottom-x2 icon-container\" matTooltip=\"Otvori\u0165 menu\"-->\n            <!--                 matTooltipPosition=\"right\"-->\n            <!--                 fxLayoutAlign=\"center center\">-->\n            <!--                <button mat-icon-button [matMenuTriggerFor]=\"railMenu\">-->\n            <!--                    <mat-icon class=\"icon-large sidemenu-icon\">more_vert</mat-icon>-->\n            <!--                </button>-->\n            <!--            </div>-->\n            <button mat-icon-button [matMenuTriggerFor]=\"railMenu\"\n                    class=\"menu-button mat-typography menu-font-color margin-bottom-x2\"\n                    [matTooltip]=\"'toolbar.menu.open' | translate\"\n                    matTooltipPosition=\"right\">\n                <mat-icon>more_vert</mat-icon>\n            </button>\n\n        </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content class=\"first-content index-menu\" >\n        <mat-sidenav-container class=\"drawer-container\" (backdropClick)=\"toggleLeftMenu()\">\n            <mat-sidenav [mode]=\"configRightMenu.mode\" [(opened)]=\"configRightMenu.opened\" position=\"start\"\n                         [disableClose]=\"configRightMenu.disableClose\"\n                         class=\"drawer-content\"\n                         mwlResizable\n                         [style.width.px]=\"configRightMenu.width\"\n                         [resizeCursorPrecision]=\"20\"\n                         [resizeEdges]=\"{right: true}\"\n                         (resizing)=\"onResizeEvent($event)\">\n\n                <div *ngTemplateOutlet=\"portalRightMenu || defaultRightSide\"></div>\n\n            </mat-sidenav>\n\n            <mat-sidenav-content class=\"content-color\">\n                <ng-content></ng-content>\n            </mat-sidenav-content>\n        </mat-sidenav-container>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n\n<ng-template #defaultLeftSide>\n\n    <div class=\"height-60 border-bottom\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n        <button mat-icon-button (click)=\"toggleRightMenu()\" class=\"menu-button mat-typography menu-font-color\">\n            <mat-icon>menu</mat-icon>\n        </button>\n    </div>\n\n    <button mat-icon-button (click)=\"onHomeClick()\" class=\"menu-button mat-typography menu-font-color margin-top-default\"\n            [matTooltip]=\"'toolbar.menu.home' | translate\"\n            matTooltipPosition=\"right\">\n        <mat-icon>home</mat-icon>\n    </button>\n\n    <button *ngIf='!isOnZeroLevel() && (canGoBackLoading$ | async) === false' mat-icon-button (click)=\"onBackClick()\"\n            class=\"menu-button mat-typography menu-font-color\" [matTooltip]=\"'toolbar.menu.back' | translate\"\n            matTooltipPosition=\"right\">\n        <mat-icon>arrow_back</mat-icon>\n    </button>\n    <div *ngIf=\"(canGoBackLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"30\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n\n    <div class=\"margin-top-x2\"></div>\n\n    <button *ngFor='let folder of leftItems; trackBy: itemsTrackBy' mat-icon-button (click)=\"onItemClick(folder)\"\n            class=\"menu-button mat-typography menu-font-color\" [matTooltip]=\"folder.navigation.title\" [matTooltipPosition]=\"'right'\"\n            [ngClass]=\"isItemAndNodeEqual(folder, currentNode) ? 'rail-selected-color' : 'menu-font-color'\" [routerLink]='folder.routing.path'\n            routerLinkActive=\"active\">\n        <mat-icon>{{folder.navigation.icon}}</mat-icon>\n    </button>\n\n    <div *ngIf=\"(leftLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"30\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n</ng-template>\n\n<ng-template #defaultRightSide>\n    <div class=\"logo border-bottom\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n        <img *ngIf=\"image !== undefined\" [alt]=\"imageAlt\" [src]=\"image\" class=\"logoimg\"\n             [routerLink]=\"imageRouterLink !== undefined ? imageRouterLink : []\">\n    </div>\n    <div *ngIf=\"(rightLoading$ | async) === false\">\n        <div fxLayout=\"column\" fxLayoutAlign=\"end end\" class=\"order-icon-wrapper\">\n            <button mat-icon-button fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"mat-button mat-typography menu-font-color order-icon\" (click)=\"switchOrder()\"\n                    [matTooltip]=\"isAscending() ? ('dynamicNavigation.ascending' | translate) : ('dynamicNavigation.descending' | translate)\">\n                <mat-icon>{{isAscending() ? \"expand_more\" : \"expand_less\"}}</mat-icon>\n            </button>\n        </div>\n        <div *ngFor='let item of rightItems; trackBy: itemsTrackBy' (click)=\"onItemClick(item)\"\n             class=\"tree-node mat-typography mat-body-2\" fxLayoutAlign=\"start center\" [routerLink]='item.routing.path'\n             routerLinkActive=\"active-tree-node\">\n            <mat-icon class=\"tree-node-icon\">{{item.navigation.icon}}</mat-icon>\n            <span>{{item.navigation.title}}</span>\n            <span class=\"menu-item-focus-overlay\"></span>\n        </div>\n        <div *ngIf=\"moreItems.length > 0\">\n            <button mat-button color=\"primary\" (click)=\"loadMoreItems()\">{{'dynamicNavigation.loadMoreItems' | translate}}</button>\n        </div>\n    </div>\n    <div *ngIf=\"(rightLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"40\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n</ng-template>\n", styles: [".rail-container{height:100%}.rail-content{width:52px;min-width:52px;border-right:none!important}.drawer-container{height:100%}.menu-button{margin-left:6px;margin-right:6px;border-radius:8px}.drawer-content{width:300px;min-width:300px;box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.height-60{height:60px}.drawer-control{position:absolute;box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.index-menu{z-index:2}.first-content{box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.border-bottom{border-bottom:1px solid #E2E8F0}.logo{height:60px}.logo-closed{width:60px!important}.logoimg{margin-left:auto;margin-right:auto;height:35px;outline:none!important;cursor:pointer}.icon-large{height:40px;width:40px;font-size:40px;color:#000000b3}.icon-container{outline:none!important;height:40px}.icon-large:hover{cursor:pointer}.menu-font-color{color:#000000b3!important}.margin-top-65{margin-top:49px}.margin-auto{margin:auto}.padding-top-65{padding-top:49px}.padding-top-8{padding-top:8px}.margin-bottom-x2{margin-bottom:16px}.tree-node{outline:none!important;cursor:pointer;padding:10px 8px;margin:0 8px;color:#000000b3;position:relative;border-radius:8px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:.1px}.tree-node mat-icon.tree-node-icon{height:24px;width:24px;font-size:24px;margin-right:4px}.tree-node .tree-node-label{height:24px;font-size:16px}.tree-node .margin-component{width:8px;margin-right:4px}.tree-node .menu-item-focus-overlay{opacity:0;position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:black;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}.tree-node:hover .menu-item-focus-overlay{opacity:.04}.margin-top-default{margin-top:8px}.margin-top-x2{margin-top:16px}.logoimg-tool{height:33px;outline:none!important;cursor:pointer;background:#fafafa}.toolbar{min-height:50px!important;height:50px;border-bottom:1px solid #E2E8F0}@media screen and (max-width: 959.99px){.rail-container{height:calc(100% - 50px)}.rail-content{width:52px;min-width:52px;top:0;border-right:none!important}.margin-top-65{margin-top:16px}.padding-top-65{padding-top:16px}}.profile-tooltip{font-size:20px}.sidemenu-icon{line-height:unset!important}.line{width:calc(100% - 16px);padding-left:8px;padding-right:8px;flex:1}.headline-text{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.4px;padding-top:4px}.headline-padding{padding:0 8px}.large-menu-item{height:64px;line-height:64px}.large-menu-item-text{line-height:32px}.cursor-pointer{cursor:pointer}.box-container{box-sizing:content-box;display:block;overflow:hidden}.content-color{background-color:#f8fafc}.expansion-indicator{color:#00000080;margin-right:10px}.expansion-indicator:after{border-style:solid;border-width:0 2px 2px 0;content:\"\";display:inline-block;padding:3px;vertical-align:middle;transform:rotate(45deg)}.order-icon{transform:scale(.7)}.order-text{color:#000000b3}.order-icon-wrapper{margin-bottom:0}.deny-select{-webkit-user-select:none;user-select:none}\n"], components: [{ type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i3$b.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i3$b.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i10$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i10$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: LanguageSelectorComponent, selector: "nc-language-selector" }, { type: i3$b.MatSidenavContent, selector: "mat-sidenav-content" }], directives: [{ type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i7$1.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i2$2.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6$1.DefaultFlexAlignDirective, selector: "  [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md],  [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md],  [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm],  [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }, { type: i2$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i10$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10$3.ResizableDirective, selector: "[mwlResizable]", inputs: ["resizeEdges", "enableGhostResize", "resizeSnapGrid", "resizeCursors", "resizeCursorPrecision", "ghostElementPositioning", "allowNegativeResizes", "mouseMoveThrottleMS", "validateResize"], outputs: ["resizeStart", "resizing", "resizeEnd"] }], pipes: { "translate": i1$2.TranslatePipe, "async": i4$1.AsyncPipe }, animations: [
+NavigationDoubleDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NavigationDoubleDrawerComponent, selector: "nc-navigation-double-drawer", usesInheritance: true, ngImport: i0, template: "<div class=\"drawer-control rail-color height-60\" [ngClass]=\"{'index-menu': !configLeftMenu.opened}\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n    <button mat-icon-button (click)=\"toggleMenu()\" class=\"menu-button mat-typography menu-font-color\">\n        <mat-icon>menu</mat-icon>\n    </button>\n</div>\n<mat-toolbar fxHide.gt-sm class=\"toolbar\">\n    <mat-toolbar-row fxLayout=\"row\" fxLayoutAlign=\"space-between stretch\">\n        <div fxFlex fxLayoutAlign=\"start center\">\n            <button mat-icon-button (click)=\"toggleMenu()\">\n                <mat-icon>menu</mat-icon>\n            </button>\n        </div>\n        <div fxLayoutAlign=\"center center\" fxFlex>\n            <img #logo [alt]=\"imageAlt\" [src]=\"image\" class=\"logoimg-tool\"\n                 [routerLink]=\"imageRouterLink !== undefined ? imageRouterLink : []\">\n        </div>\n        <div fxFlex></div>\n    </mat-toolbar-row>\n</mat-toolbar>\n<mat-spinner *ngIf=\"!logo\"></mat-spinner>\n<mat-sidenav-container class=\"rail-container deny-select\">\n    <mat-sidenav mode=\"side\" [(opened)]=\"configLeftMenu.opened\" position=\"start\"\n                 [disableClose]=\"configLeftMenu.disableClose\"\n                 class=\"rail-content\">\n\n        <div fxLayout=\"column\" class=\"rail-color\" fxFlex>\n\n            <div *ngTemplateOutlet=\"portalLeftMenu || defaultLeftSide\"></div>\n\n            <div fxFlex></div>\n\n            <mat-menu #userRailMenu=\"matMenu\">\n                <div mat-menu-item role=\"menuitem\" class=\"large-menu-item\" fxLayout=\"row\" fxFlexAlign=\"center center\"\n                     [routerLink]=\"profileRouterLink\" routerLinkActive=\"active-tree-node\">\n                    <mat-icon class=\"margin-auto\" fxFlex>face</mat-icon>\n                    <div class=\"large-menu-item\" fxLayout=\"column\" fxFlexAlign=\"start center\" fxFlex>\n                        <span *ngIf=\"!user.isImpersonating()\"  class=\"large-menu-item-text\" fxFlex=\"50\">{{user.fullName}}</span>\n                        <span *ngIf=\"user.isImpersonating()\" class=\"large-menu-item-text\" fxFlex=\"50\">{{user.fullName}} ({{user.getSelfOrImpersonated().fullName}})</span>\n                        <span class=\"large-menu-item-text\" style=\"font-size: 12px;\" fxFlex=\"50\">{{user.email}}</span>\n                    </div>\n                </div>\n                <button *ngIf=\"includeImpersonation && !user.isImpersonating()\" mat-menu-item (click)=\"impersonate()\">\n                    <mat-icon>supervisor_account</mat-icon>\n                    <span>{{'side-menu.impersonation.submit' | translate}}</span>\n                </button>\n                <button *ngIf=\"includeImpersonation && user.isImpersonating()\" mat-menu-item (click)=\"stopImpersonating()\">\n                    <mat-icon>clear</mat-icon>\n                    <span>{{'side-menu.impersonation.cease' | translate }}</span>\n                </button>\n                <button mat-menu-item (click)=\"logout()\">\n                    <mat-icon>exit_to_app</mat-icon>\n                    <span>{{ 'toolbar.menu.logout' | translate }}</span>\n                </button>\n            </mat-menu>\n            <button *ngIf=\"includeUser\" mat-icon-button [matMenuTriggerFor]=\"userRailMenu\" class=\"menu-button mat-typography menu-font-color\"\n                    [matTooltip]=\"user.fullName\"\n                    [matTooltipPosition]=\"'right'\">\n                <mat-icon>account_circle</mat-icon>\n            </button>\n\n            <div *ngIf=\"includeLanguage\" fxLayout=\"row\" class=\"icon-container\" fxLayoutAlign=\"center center\">\n                <nc-language-selector fxLayout=\"row\" ></nc-language-selector>\n            </div>\n\n            <mat-menu #railMenu=\"matMenu\">\n                <button *ngFor='let item of hiddenCustomItems; trackBy: itemsTrackBy' mat-menu-item\n                        [routerLink]='item.routing.path' routerLinkActive=\"active-tree-node\">\n                    <mat-icon>{{item.navigation.icon}}</mat-icon>\n                    <span>{{item.navigation.title}}</span>\n                </button>\n            </mat-menu>\n            <!--            <div fxLayout=\"row\" class=\"margin-bottom-x2 icon-container\" matTooltip=\"Otvori\u0165 menu\"-->\n            <!--                 matTooltipPosition=\"right\"-->\n            <!--                 fxLayoutAlign=\"center center\">-->\n            <!--                <button mat-icon-button [matMenuTriggerFor]=\"railMenu\">-->\n            <!--                    <mat-icon class=\"icon-large sidemenu-icon\">more_vert</mat-icon>-->\n            <!--                </button>-->\n            <!--            </div>-->\n            <button mat-icon-button [matMenuTriggerFor]=\"railMenu\"\n                    class=\"menu-button mat-typography menu-font-color margin-bottom-x2\"\n                    [matTooltip]=\"'toolbar.menu.open' | translate\"\n                    matTooltipPosition=\"right\">\n                <mat-icon>more_vert</mat-icon>\n            </button>\n\n        </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content class=\"first-content index-menu\" >\n        <mat-sidenav-container class=\"drawer-container\" (backdropClick)=\"toggleLeftMenu()\">\n            <mat-sidenav [mode]=\"configRightMenu.mode\" [(opened)]=\"configRightMenu.opened\" position=\"start\"\n                         [disableClose]=\"configRightMenu.disableClose\"\n                         class=\"drawer-content\"\n                         mwlResizable\n                         [style.width.px]=\"configRightMenu.width\"\n                         [resizeCursorPrecision]=\"20\"\n                         [resizeEdges]=\"{right: true}\"\n                         (resizing)=\"onResizeEvent($event)\">\n\n                <div *ngTemplateOutlet=\"portalRightMenu || defaultRightSide\"></div>\n\n            </mat-sidenav>\n\n            <mat-sidenav-content class=\"content-color\">\n                <ng-content></ng-content>\n            </mat-sidenav-content>\n        </mat-sidenav-container>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n\n<ng-template #defaultLeftSide>\n\n    <div class=\"height-60 border-bottom\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n        <button mat-icon-button (click)=\"toggleRightMenu()\" class=\"menu-button mat-typography menu-font-color\">\n            <mat-icon>menu</mat-icon>\n        </button>\n    </div>\n\n    <button mat-icon-button (click)=\"onHomeClick()\" class=\"menu-button mat-typography menu-font-color margin-top-default\"\n            [matTooltip]=\"'toolbar.menu.home' | translate\"\n            matTooltipPosition=\"right\">\n        <mat-icon>home</mat-icon>\n    </button>\n\n    <button *ngIf='!isOnZeroLevel() && (canGoBackLoading$ | async) === false' mat-icon-button (click)=\"onBackClick()\"\n            class=\"menu-button mat-typography menu-font-color\" [matTooltip]=\"'toolbar.menu.back' | translate\"\n            matTooltipPosition=\"right\">\n        <mat-icon>arrow_back</mat-icon>\n    </button>\n    <div *ngIf=\"(canGoBackLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"30\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n\n    <div class=\"margin-top-x2\"></div>\n\n    <button *ngFor='let folder of leftItems; trackBy: itemsTrackBy' mat-icon-button (click)=\"onItemClick(folder)\"\n            class=\"menu-button mat-typography menu-font-color\" [matTooltip]=\"folder.navigation.title\" [matTooltipPosition]=\"'right'\"\n            [ngClass]=\"isItemAndNodeEqual(folder, currentNode) ? 'rail-selected-color' : 'menu-font-color'\" [routerLink]='folder.routing.path'\n            routerLinkActive=\"active\">\n        <mat-icon>{{folder.navigation.icon}}</mat-icon>\n    </button>\n\n    <div *ngIf=\"(leftLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"30\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n</ng-template>\n\n<ng-template #defaultRightSide>\n    <div class=\"logo border-bottom\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n        <img *ngIf=\"image !== undefined\" [alt]=\"imageAlt\" [src]=\"image\" class=\"logoimg\"\n             [routerLink]=\"imageRouterLink !== undefined ? imageRouterLink : []\">\n    </div>\n    <div *ngIf=\"(rightLoading$ | async) === false\">\n        <div fxLayout=\"column\" fxLayoutAlign=\"end end\" class=\"order-icon-wrapper\">\n            <button mat-icon-button fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"mat-button mat-typography menu-font-color order-icon\" (click)=\"switchOrder()\"\n                    [matTooltip]=\"isAscending() ? ('dynamicNavigation.ascending' | translate) : ('dynamicNavigation.descending' | translate)\">\n                <mat-icon>{{isAscending() ? \"expand_more\" : \"expand_less\"}}</mat-icon>\n            </button>\n        </div>\n        <div *ngFor='let item of rightItems; trackBy: itemsTrackBy' (click)=\"onItemClick(item)\"\n             class=\"tree-node mat-typography mat-body-2\" fxLayoutAlign=\"start center\" [routerLink]='item.routing.path'\n             routerLinkActive=\"active-tree-node\">\n            <mat-icon class=\"tree-node-icon\">{{item.navigation.icon}}</mat-icon>\n            <span>{{item.navigation.title}}</span>\n            <span class=\"menu-item-focus-overlay\"></span>\n        </div>\n        <div *ngIf=\"moreItems.length > 0\">\n            <button mat-button color=\"primary\" (click)=\"loadMoreItems()\">{{'dynamicNavigation.loadMoreItems' | translate}}</button>\n        </div>\n    </div>\n    <div *ngIf=\"(rightLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"40\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n</ng-template>\n", styles: [".rail-container{height:100%}.rail-content{width:52px;min-width:52px;border-right:none!important}.drawer-container{height:100%}.menu-button{margin-left:6px;margin-right:6px;border-radius:8px}.drawer-content{width:300px;min-width:300px;box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.height-60{height:60px}.drawer-control{position:absolute;box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.index-menu{z-index:2}.first-content{box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.border-bottom{border-bottom:1px solid #E2E8F0}.logo{height:60px}.logo-closed{width:60px!important}.logoimg{margin-left:auto;margin-right:auto;height:35px;outline:none!important;cursor:pointer}.icon-large{height:40px;width:40px;font-size:40px;color:#000000b3}.icon-container{outline:none!important;height:40px}.icon-large:hover{cursor:pointer}.menu-font-color{color:#000000b3!important}.margin-top-65{margin-top:49px}.margin-auto{margin:auto}.padding-top-65{padding-top:49px}.padding-top-8{padding-top:8px}.margin-bottom-x2{margin-bottom:16px}.tree-node{outline:none!important;cursor:pointer;padding:10px 8px;margin:0 8px;color:#000000b3;position:relative;border-radius:8px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:.1px}.tree-node mat-icon.tree-node-icon{height:24px;width:24px;font-size:24px;margin-right:4px}.tree-node .tree-node-label{height:24px;font-size:16px}.tree-node .margin-component{width:8px;margin-right:4px}.tree-node .menu-item-focus-overlay{opacity:0;position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:black;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}.tree-node:hover .menu-item-focus-overlay{opacity:.04}.margin-top-default{margin-top:8px}.margin-top-x2{margin-top:16px}.logoimg-tool{height:33px;outline:none!important;cursor:pointer;background:#fafafa}.toolbar{min-height:50px!important;height:50px;border-bottom:1px solid #E2E8F0}@media screen and (max-width: 959.99px){.rail-container{height:calc(100% - 50px)}.rail-content{width:52px;min-width:52px;top:0;border-right:none!important}.margin-top-65{margin-top:16px}.padding-top-65{padding-top:16px}}.profile-tooltip{font-size:20px}.sidemenu-icon{line-height:unset!important}.line{width:calc(100% - 16px);padding-left:8px;padding-right:8px;flex:1}.headline-text{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.4px;padding-top:4px}.headline-padding{padding:0 8px}.large-menu-item{height:64px;line-height:64px}.large-menu-item-text{line-height:32px}.cursor-pointer{cursor:pointer}.box-container{box-sizing:content-box;display:block;overflow:hidden}.content-color{background-color:#f8fafc}.expansion-indicator{color:#00000080;margin-right:10px}.expansion-indicator:after{border-style:solid;border-width:0 2px 2px 0;content:\"\";display:inline-block;padding:3px;vertical-align:middle;transform:rotate(45deg)}.order-icon{transform:scale(.7)}.order-text{color:#000000b3}.order-icon-wrapper{margin-bottom:0}.deny-select{-webkit-user-select:none;user-select:none}\n"], components: [{ type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }, { type: i3$b.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i3$b.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i10$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i10$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: LanguageSelectorComponent, selector: "nc-language-selector" }, { type: i3$b.MatSidenavContent, selector: "mat-sidenav-content" }], directives: [{ type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i6$2.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i2$2.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6$1.DefaultFlexAlignDirective, selector: "  [fxFlexAlign], [fxFlexAlign.xs], [fxFlexAlign.sm], [fxFlexAlign.md],  [fxFlexAlign.lg], [fxFlexAlign.xl], [fxFlexAlign.lt-sm], [fxFlexAlign.lt-md],  [fxFlexAlign.lt-lg], [fxFlexAlign.lt-xl], [fxFlexAlign.gt-xs], [fxFlexAlign.gt-sm],  [fxFlexAlign.gt-md], [fxFlexAlign.gt-lg]", inputs: ["fxFlexAlign", "fxFlexAlign.xs", "fxFlexAlign.sm", "fxFlexAlign.md", "fxFlexAlign.lg", "fxFlexAlign.xl", "fxFlexAlign.lt-sm", "fxFlexAlign.lt-md", "fxFlexAlign.lt-lg", "fxFlexAlign.lt-xl", "fxFlexAlign.gt-xs", "fxFlexAlign.gt-sm", "fxFlexAlign.gt-md", "fxFlexAlign.gt-lg"] }, { type: i2$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i10$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10$3.ResizableDirective, selector: "[mwlResizable]", inputs: ["resizeEdges", "enableGhostResize", "resizeSnapGrid", "resizeCursors", "resizeCursorPrecision", "ghostElementPositioning", "allowNegativeResizes", "mouseMoveThrottleMS", "validateResize"], outputs: ["resizeStart", "resizing", "resizeEnd"] }], pipes: { "translate": i1$2.TranslatePipe, "async": i4$1.AsyncPipe }, animations: [
         trigger('sectionExpansion', [
             state('expanded, void', style({
                 height: '*',
@@ -5218,7 +5373,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 animate('225ms cubic-bezier(0.4,0.0,0.2,1)')
                             ])
                         ])
-                    ], template: "<div class=\"drawer-control rail-color height-60\" [ngClass]=\"{'index-menu': !configLeftMenu.opened}\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n    <button mat-icon-button (click)=\"toggleMenu()\" class=\"menu-button mat-typography menu-font-color\">\n        <mat-icon>menu</mat-icon>\n    </button>\n</div>\n<mat-toolbar fxHide.gt-sm class=\"toolbar\">\n    <mat-toolbar-row fxLayout=\"row\" fxLayoutAlign=\"space-between stretch\">\n        <div fxFlex fxLayoutAlign=\"start center\">\n            <button mat-icon-button (click)=\"toggleMenu()\">\n                <mat-icon>menu</mat-icon>\n            </button>\n        </div>\n        <div fxLayoutAlign=\"center center\" fxFlex>\n            <img #logo [alt]=\"imageAlt\" [src]=\"image\" class=\"logoimg-tool\"\n                 [routerLink]=\"imageRouterLink !== undefined ? imageRouterLink : []\">\n        </div>\n        <div fxFlex></div>\n    </mat-toolbar-row>\n</mat-toolbar>\n<mat-spinner *ngIf=\"!logo\"></mat-spinner>\n<mat-sidenav-container class=\"rail-container deny-select\">\n    <mat-sidenav mode=\"side\" [(opened)]=\"configLeftMenu.opened\" position=\"start\"\n                 [disableClose]=\"configLeftMenu.disableClose\"\n                 class=\"rail-content\">\n\n        <div fxLayout=\"column\" class=\"rail-color\" fxFlex>\n\n            <div *ngTemplateOutlet=\"portalLeftMenu || defaultLeftSide\"></div>\n\n            <div fxFlex></div>\n\n            <mat-menu #userRailMenu=\"matMenu\">\n                <div mat-menu-item role=\"menuitem\" class=\"large-menu-item\" fxLayout=\"row\" fxFlexAlign=\"center center\"\n                     [routerLink]=\"profileRouterLink\" routerLinkActive=\"active-tree-node\">\n                    <mat-icon class=\"margin-auto\" fxFlex>face</mat-icon>\n                    <div class=\"large-menu-item\" fxLayout=\"column\" fxFlexAlign=\"start center\" fxFlex>\n                        <span *ngIf=\"!user.isImpersonating()\"  class=\"large-menu-item-text\" fxFlex=\"50\">{{user.fullName}}</span>\n                        <span *ngIf=\"user.isImpersonating()\" class=\"large-menu-item-text\" fxFlex=\"50\">{{user.fullName}} ({{user.getSelfOrImpersonated().fullName}})</span>\n                        <span class=\"large-menu-item-text\" style=\"font-size: 12px;\" fxFlex=\"50\">{{user.email}}</span>\n                    </div>\n                </div>\n                <button *ngIf=\"includeImpersonation && !user.isImpersonating()\" mat-menu-item (click)=\"impersonate()\">\n                    <mat-icon>supervisor_account</mat-icon>\n                    <span>{{'side-menu.impersonation.submit' | translate}}</span>\n                </button>\n                <button *ngIf=\"includeImpersonation && user.isImpersonating()\" mat-menu-item (click)=\"stopImpersonating()\">\n                    <mat-icon>clear</mat-icon>\n                    <span>{{'side-menu.impersonation.cease' | translate }}</span>\n                </button>\n                <button mat-menu-item (click)=\"logout()\">\n                    <mat-icon>exit_to_app</mat-icon>\n                    <span>{{ 'toolbar.menu.logout' | translate }}</span>\n                </button>\n            </mat-menu>\n            <button *ngIf=\"includeUser\" mat-icon-button [matMenuTriggerFor]=\"userRailMenu\" class=\"menu-button mat-typography menu-font-color\"\n                    [matTooltip]=\"user.fullName\"\n                    [matTooltipPosition]=\"'right'\">\n                <mat-icon>account_circle</mat-icon>\n            </button>\n\n            <div *ngIf=\"includeLanguage\" fxLayout=\"row\" class=\"icon-container\" fxLayoutAlign=\"center center\">\n                <nc-language-selector fxLayout=\"row\" [language]=\"getLang()\"></nc-language-selector>\n            </div>\n\n            <mat-menu #railMenu=\"matMenu\">\n                <button *ngFor='let item of hiddenCustomItems; trackBy: itemsTrackBy' mat-menu-item\n                        [routerLink]='item.routing.path' routerLinkActive=\"active-tree-node\">\n                    <mat-icon>{{item.navigation.icon}}</mat-icon>\n                    <span>{{item.navigation.title}}</span>\n                </button>\n            </mat-menu>\n            <!--            <div fxLayout=\"row\" class=\"margin-bottom-x2 icon-container\" matTooltip=\"Otvori\u0165 menu\"-->\n            <!--                 matTooltipPosition=\"right\"-->\n            <!--                 fxLayoutAlign=\"center center\">-->\n            <!--                <button mat-icon-button [matMenuTriggerFor]=\"railMenu\">-->\n            <!--                    <mat-icon class=\"icon-large sidemenu-icon\">more_vert</mat-icon>-->\n            <!--                </button>-->\n            <!--            </div>-->\n            <button mat-icon-button [matMenuTriggerFor]=\"railMenu\"\n                    class=\"menu-button mat-typography menu-font-color margin-bottom-x2\"\n                    [matTooltip]=\"'toolbar.menu.open' | translate\"\n                    matTooltipPosition=\"right\">\n                <mat-icon>more_vert</mat-icon>\n            </button>\n\n        </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content class=\"first-content index-menu\" >\n        <mat-sidenav-container class=\"drawer-container\" (backdropClick)=\"toggleLeftMenu()\">\n            <mat-sidenav [mode]=\"configRightMenu.mode\" [(opened)]=\"configRightMenu.opened\" position=\"start\"\n                         [disableClose]=\"configRightMenu.disableClose\"\n                         class=\"drawer-content\"\n                         mwlResizable\n                         [style.width.px]=\"configRightMenu.width\"\n                         [resizeCursorPrecision]=\"20\"\n                         [resizeEdges]=\"{right: true}\"\n                         (resizing)=\"onResizeEvent($event)\">\n\n                <div *ngTemplateOutlet=\"portalRightMenu || defaultRightSide\"></div>\n\n            </mat-sidenav>\n\n            <mat-sidenav-content class=\"content-color\">\n                <ng-content></ng-content>\n            </mat-sidenav-content>\n        </mat-sidenav-container>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n\n<ng-template #defaultLeftSide>\n\n    <div class=\"height-60 border-bottom\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n        <button mat-icon-button (click)=\"toggleRightMenu()\" class=\"menu-button mat-typography menu-font-color\">\n            <mat-icon>menu</mat-icon>\n        </button>\n    </div>\n\n    <button mat-icon-button (click)=\"onHomeClick()\" class=\"menu-button mat-typography menu-font-color margin-top-default\"\n            [matTooltip]=\"'toolbar.menu.home' | translate\"\n            matTooltipPosition=\"right\">\n        <mat-icon>home</mat-icon>\n    </button>\n\n    <button *ngIf='!isOnZeroLevel() && (canGoBackLoading$ | async) === false' mat-icon-button (click)=\"onBackClick()\"\n            class=\"menu-button mat-typography menu-font-color\" [matTooltip]=\"'toolbar.menu.back' | translate\"\n            matTooltipPosition=\"right\">\n        <mat-icon>arrow_back</mat-icon>\n    </button>\n    <div *ngIf=\"(canGoBackLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"30\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n\n    <div class=\"margin-top-x2\"></div>\n\n    <button *ngFor='let folder of leftItems; trackBy: itemsTrackBy' mat-icon-button (click)=\"onItemClick(folder)\"\n            class=\"menu-button mat-typography menu-font-color\" [matTooltip]=\"folder.navigation.title\" [matTooltipPosition]=\"'right'\"\n            [ngClass]=\"isItemAndNodeEqual(folder, currentNode) ? 'rail-selected-color' : 'menu-font-color'\" [routerLink]='folder.routing.path'\n            routerLinkActive=\"active\">\n        <mat-icon>{{folder.navigation.icon}}</mat-icon>\n    </button>\n\n    <div *ngIf=\"(leftLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"30\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n</ng-template>\n\n<ng-template #defaultRightSide>\n    <div class=\"logo border-bottom\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n        <img *ngIf=\"image !== undefined\" [alt]=\"imageAlt\" [src]=\"image\" class=\"logoimg\"\n             [routerLink]=\"imageRouterLink !== undefined ? imageRouterLink : []\">\n    </div>\n    <div *ngIf=\"(rightLoading$ | async) === false\">\n        <div fxLayout=\"column\" fxLayoutAlign=\"end end\" class=\"order-icon-wrapper\">\n            <button mat-icon-button fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"mat-button mat-typography menu-font-color order-icon\" (click)=\"switchOrder()\"\n                    [matTooltip]=\"isAscending() ? ('dynamicNavigation.ascending' | translate) : ('dynamicNavigation.descending' | translate)\">\n                <mat-icon>{{isAscending() ? \"expand_more\" : \"expand_less\"}}</mat-icon>\n            </button>\n        </div>\n        <div *ngFor='let item of rightItems; trackBy: itemsTrackBy' (click)=\"onItemClick(item)\"\n             class=\"tree-node mat-typography mat-body-2\" fxLayoutAlign=\"start center\" [routerLink]='item.routing.path'\n             routerLinkActive=\"active-tree-node\">\n            <mat-icon class=\"tree-node-icon\">{{item.navigation.icon}}</mat-icon>\n            <span>{{item.navigation.title}}</span>\n            <span class=\"menu-item-focus-overlay\"></span>\n        </div>\n        <div *ngIf=\"moreItems.length > 0\">\n            <button mat-button color=\"primary\" (click)=\"loadMoreItems()\">{{'dynamicNavigation.loadMoreItems' | translate}}</button>\n        </div>\n    </div>\n    <div *ngIf=\"(rightLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"40\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n</ng-template>\n", styles: [".rail-container{height:100%}.rail-content{width:52px;min-width:52px;border-right:none!important}.drawer-container{height:100%}.menu-button{margin-left:6px;margin-right:6px;border-radius:8px}.drawer-content{width:300px;min-width:300px;box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.height-60{height:60px}.drawer-control{position:absolute;box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.index-menu{z-index:2}.first-content{box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.border-bottom{border-bottom:1px solid #E2E8F0}.logo{height:60px}.logo-closed{width:60px!important}.logoimg{margin-left:auto;margin-right:auto;height:35px;outline:none!important;cursor:pointer}.icon-large{height:40px;width:40px;font-size:40px;color:#000000b3}.icon-container{outline:none!important;height:40px}.icon-large:hover{cursor:pointer}.menu-font-color{color:#000000b3!important}.margin-top-65{margin-top:49px}.margin-auto{margin:auto}.padding-top-65{padding-top:49px}.padding-top-8{padding-top:8px}.margin-bottom-x2{margin-bottom:16px}.tree-node{outline:none!important;cursor:pointer;padding:10px 8px;margin:0 8px;color:#000000b3;position:relative;border-radius:8px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:.1px}.tree-node mat-icon.tree-node-icon{height:24px;width:24px;font-size:24px;margin-right:4px}.tree-node .tree-node-label{height:24px;font-size:16px}.tree-node .margin-component{width:8px;margin-right:4px}.tree-node .menu-item-focus-overlay{opacity:0;position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:black;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}.tree-node:hover .menu-item-focus-overlay{opacity:.04}.margin-top-default{margin-top:8px}.margin-top-x2{margin-top:16px}.logoimg-tool{height:33px;outline:none!important;cursor:pointer;background:#fafafa}.toolbar{min-height:50px!important;height:50px;border-bottom:1px solid #E2E8F0}@media screen and (max-width: 959.99px){.rail-container{height:calc(100% - 50px)}.rail-content{width:52px;min-width:52px;top:0;border-right:none!important}.margin-top-65{margin-top:16px}.padding-top-65{padding-top:16px}}.profile-tooltip{font-size:20px}.sidemenu-icon{line-height:unset!important}.line{width:calc(100% - 16px);padding-left:8px;padding-right:8px;flex:1}.headline-text{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.4px;padding-top:4px}.headline-padding{padding:0 8px}.large-menu-item{height:64px;line-height:64px}.large-menu-item-text{line-height:32px}.cursor-pointer{cursor:pointer}.box-container{box-sizing:content-box;display:block;overflow:hidden}.content-color{background-color:#f8fafc}.expansion-indicator{color:#00000080;margin-right:10px}.expansion-indicator:after{border-style:solid;border-width:0 2px 2px 0;content:\"\";display:inline-block;padding:3px;vertical-align:middle;transform:rotate(45deg)}.order-icon{transform:scale(.7)}.order-text{color:#000000b3}.order-icon-wrapper{margin-bottom:0}.deny-select{-webkit-user-select:none;user-select:none}\n"] }]
+                    ], template: "<div class=\"drawer-control rail-color height-60\" [ngClass]=\"{'index-menu': !configLeftMenu.opened}\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n    <button mat-icon-button (click)=\"toggleMenu()\" class=\"menu-button mat-typography menu-font-color\">\n        <mat-icon>menu</mat-icon>\n    </button>\n</div>\n<mat-toolbar fxHide.gt-sm class=\"toolbar\">\n    <mat-toolbar-row fxLayout=\"row\" fxLayoutAlign=\"space-between stretch\">\n        <div fxFlex fxLayoutAlign=\"start center\">\n            <button mat-icon-button (click)=\"toggleMenu()\">\n                <mat-icon>menu</mat-icon>\n            </button>\n        </div>\n        <div fxLayoutAlign=\"center center\" fxFlex>\n            <img #logo [alt]=\"imageAlt\" [src]=\"image\" class=\"logoimg-tool\"\n                 [routerLink]=\"imageRouterLink !== undefined ? imageRouterLink : []\">\n        </div>\n        <div fxFlex></div>\n    </mat-toolbar-row>\n</mat-toolbar>\n<mat-spinner *ngIf=\"!logo\"></mat-spinner>\n<mat-sidenav-container class=\"rail-container deny-select\">\n    <mat-sidenav mode=\"side\" [(opened)]=\"configLeftMenu.opened\" position=\"start\"\n                 [disableClose]=\"configLeftMenu.disableClose\"\n                 class=\"rail-content\">\n\n        <div fxLayout=\"column\" class=\"rail-color\" fxFlex>\n\n            <div *ngTemplateOutlet=\"portalLeftMenu || defaultLeftSide\"></div>\n\n            <div fxFlex></div>\n\n            <mat-menu #userRailMenu=\"matMenu\">\n                <div mat-menu-item role=\"menuitem\" class=\"large-menu-item\" fxLayout=\"row\" fxFlexAlign=\"center center\"\n                     [routerLink]=\"profileRouterLink\" routerLinkActive=\"active-tree-node\">\n                    <mat-icon class=\"margin-auto\" fxFlex>face</mat-icon>\n                    <div class=\"large-menu-item\" fxLayout=\"column\" fxFlexAlign=\"start center\" fxFlex>\n                        <span *ngIf=\"!user.isImpersonating()\"  class=\"large-menu-item-text\" fxFlex=\"50\">{{user.fullName}}</span>\n                        <span *ngIf=\"user.isImpersonating()\" class=\"large-menu-item-text\" fxFlex=\"50\">{{user.fullName}} ({{user.getSelfOrImpersonated().fullName}})</span>\n                        <span class=\"large-menu-item-text\" style=\"font-size: 12px;\" fxFlex=\"50\">{{user.email}}</span>\n                    </div>\n                </div>\n                <button *ngIf=\"includeImpersonation && !user.isImpersonating()\" mat-menu-item (click)=\"impersonate()\">\n                    <mat-icon>supervisor_account</mat-icon>\n                    <span>{{'side-menu.impersonation.submit' | translate}}</span>\n                </button>\n                <button *ngIf=\"includeImpersonation && user.isImpersonating()\" mat-menu-item (click)=\"stopImpersonating()\">\n                    <mat-icon>clear</mat-icon>\n                    <span>{{'side-menu.impersonation.cease' | translate }}</span>\n                </button>\n                <button mat-menu-item (click)=\"logout()\">\n                    <mat-icon>exit_to_app</mat-icon>\n                    <span>{{ 'toolbar.menu.logout' | translate }}</span>\n                </button>\n            </mat-menu>\n            <button *ngIf=\"includeUser\" mat-icon-button [matMenuTriggerFor]=\"userRailMenu\" class=\"menu-button mat-typography menu-font-color\"\n                    [matTooltip]=\"user.fullName\"\n                    [matTooltipPosition]=\"'right'\">\n                <mat-icon>account_circle</mat-icon>\n            </button>\n\n            <div *ngIf=\"includeLanguage\" fxLayout=\"row\" class=\"icon-container\" fxLayoutAlign=\"center center\">\n                <nc-language-selector fxLayout=\"row\" ></nc-language-selector>\n            </div>\n\n            <mat-menu #railMenu=\"matMenu\">\n                <button *ngFor='let item of hiddenCustomItems; trackBy: itemsTrackBy' mat-menu-item\n                        [routerLink]='item.routing.path' routerLinkActive=\"active-tree-node\">\n                    <mat-icon>{{item.navigation.icon}}</mat-icon>\n                    <span>{{item.navigation.title}}</span>\n                </button>\n            </mat-menu>\n            <!--            <div fxLayout=\"row\" class=\"margin-bottom-x2 icon-container\" matTooltip=\"Otvori\u0165 menu\"-->\n            <!--                 matTooltipPosition=\"right\"-->\n            <!--                 fxLayoutAlign=\"center center\">-->\n            <!--                <button mat-icon-button [matMenuTriggerFor]=\"railMenu\">-->\n            <!--                    <mat-icon class=\"icon-large sidemenu-icon\">more_vert</mat-icon>-->\n            <!--                </button>-->\n            <!--            </div>-->\n            <button mat-icon-button [matMenuTriggerFor]=\"railMenu\"\n                    class=\"menu-button mat-typography menu-font-color margin-bottom-x2\"\n                    [matTooltip]=\"'toolbar.menu.open' | translate\"\n                    matTooltipPosition=\"right\">\n                <mat-icon>more_vert</mat-icon>\n            </button>\n\n        </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content class=\"first-content index-menu\" >\n        <mat-sidenav-container class=\"drawer-container\" (backdropClick)=\"toggleLeftMenu()\">\n            <mat-sidenav [mode]=\"configRightMenu.mode\" [(opened)]=\"configRightMenu.opened\" position=\"start\"\n                         [disableClose]=\"configRightMenu.disableClose\"\n                         class=\"drawer-content\"\n                         mwlResizable\n                         [style.width.px]=\"configRightMenu.width\"\n                         [resizeCursorPrecision]=\"20\"\n                         [resizeEdges]=\"{right: true}\"\n                         (resizing)=\"onResizeEvent($event)\">\n\n                <div *ngTemplateOutlet=\"portalRightMenu || defaultRightSide\"></div>\n\n            </mat-sidenav>\n\n            <mat-sidenav-content class=\"content-color\">\n                <ng-content></ng-content>\n            </mat-sidenav-content>\n        </mat-sidenav-container>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n\n<ng-template #defaultLeftSide>\n\n    <div class=\"height-60 border-bottom\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n        <button mat-icon-button (click)=\"toggleRightMenu()\" class=\"menu-button mat-typography menu-font-color\">\n            <mat-icon>menu</mat-icon>\n        </button>\n    </div>\n\n    <button mat-icon-button (click)=\"onHomeClick()\" class=\"menu-button mat-typography menu-font-color margin-top-default\"\n            [matTooltip]=\"'toolbar.menu.home' | translate\"\n            matTooltipPosition=\"right\">\n        <mat-icon>home</mat-icon>\n    </button>\n\n    <button *ngIf='!isOnZeroLevel() && (canGoBackLoading$ | async) === false' mat-icon-button (click)=\"onBackClick()\"\n            class=\"menu-button mat-typography menu-font-color\" [matTooltip]=\"'toolbar.menu.back' | translate\"\n            matTooltipPosition=\"right\">\n        <mat-icon>arrow_back</mat-icon>\n    </button>\n    <div *ngIf=\"(canGoBackLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"30\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n\n    <div class=\"margin-top-x2\"></div>\n\n    <button *ngFor='let folder of leftItems; trackBy: itemsTrackBy' mat-icon-button (click)=\"onItemClick(folder)\"\n            class=\"menu-button mat-typography menu-font-color\" [matTooltip]=\"folder.navigation.title\" [matTooltipPosition]=\"'right'\"\n            [ngClass]=\"isItemAndNodeEqual(folder, currentNode) ? 'rail-selected-color' : 'menu-font-color'\" [routerLink]='folder.routing.path'\n            routerLinkActive=\"active\">\n        <mat-icon>{{folder.navigation.icon}}</mat-icon>\n    </button>\n\n    <div *ngIf=\"(leftLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"30\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n</ng-template>\n\n<ng-template #defaultRightSide>\n    <div class=\"logo border-bottom\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n        <img *ngIf=\"image !== undefined\" [alt]=\"imageAlt\" [src]=\"image\" class=\"logoimg\"\n             [routerLink]=\"imageRouterLink !== undefined ? imageRouterLink : []\">\n    </div>\n    <div *ngIf=\"(rightLoading$ | async) === false\">\n        <div fxLayout=\"column\" fxLayoutAlign=\"end end\" class=\"order-icon-wrapper\">\n            <button mat-icon-button fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"mat-button mat-typography menu-font-color order-icon\" (click)=\"switchOrder()\"\n                    [matTooltip]=\"isAscending() ? ('dynamicNavigation.ascending' | translate) : ('dynamicNavigation.descending' | translate)\">\n                <mat-icon>{{isAscending() ? \"expand_more\" : \"expand_less\"}}</mat-icon>\n            </button>\n        </div>\n        <div *ngFor='let item of rightItems; trackBy: itemsTrackBy' (click)=\"onItemClick(item)\"\n             class=\"tree-node mat-typography mat-body-2\" fxLayoutAlign=\"start center\" [routerLink]='item.routing.path'\n             routerLinkActive=\"active-tree-node\">\n            <mat-icon class=\"tree-node-icon\">{{item.navigation.icon}}</mat-icon>\n            <span>{{item.navigation.title}}</span>\n            <span class=\"menu-item-focus-overlay\"></span>\n        </div>\n        <div *ngIf=\"moreItems.length > 0\">\n            <button mat-button color=\"primary\" (click)=\"loadMoreItems()\">{{'dynamicNavigation.loadMoreItems' | translate}}</button>\n        </div>\n    </div>\n    <div *ngIf=\"(rightLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"40\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n</ng-template>\n", styles: [".rail-container{height:100%}.rail-content{width:52px;min-width:52px;border-right:none!important}.drawer-container{height:100%}.menu-button{margin-left:6px;margin-right:6px;border-radius:8px}.drawer-content{width:300px;min-width:300px;box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.height-60{height:60px}.drawer-control{position:absolute;box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.index-menu{z-index:2}.first-content{box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.border-bottom{border-bottom:1px solid #E2E8F0}.logo{height:60px}.logo-closed{width:60px!important}.logoimg{margin-left:auto;margin-right:auto;height:35px;outline:none!important;cursor:pointer}.icon-large{height:40px;width:40px;font-size:40px;color:#000000b3}.icon-container{outline:none!important;height:40px}.icon-large:hover{cursor:pointer}.menu-font-color{color:#000000b3!important}.margin-top-65{margin-top:49px}.margin-auto{margin:auto}.padding-top-65{padding-top:49px}.padding-top-8{padding-top:8px}.margin-bottom-x2{margin-bottom:16px}.tree-node{outline:none!important;cursor:pointer;padding:10px 8px;margin:0 8px;color:#000000b3;position:relative;border-radius:8px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:.1px}.tree-node mat-icon.tree-node-icon{height:24px;width:24px;font-size:24px;margin-right:4px}.tree-node .tree-node-label{height:24px;font-size:16px}.tree-node .margin-component{width:8px;margin-right:4px}.tree-node .menu-item-focus-overlay{opacity:0;position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:black;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}.tree-node:hover .menu-item-focus-overlay{opacity:.04}.margin-top-default{margin-top:8px}.margin-top-x2{margin-top:16px}.logoimg-tool{height:33px;outline:none!important;cursor:pointer;background:#fafafa}.toolbar{min-height:50px!important;height:50px;border-bottom:1px solid #E2E8F0}@media screen and (max-width: 959.99px){.rail-container{height:calc(100% - 50px)}.rail-content{width:52px;min-width:52px;top:0;border-right:none!important}.margin-top-65{margin-top:16px}.padding-top-65{padding-top:16px}}.profile-tooltip{font-size:20px}.sidemenu-icon{line-height:unset!important}.line{width:calc(100% - 16px);padding-left:8px;padding-right:8px;flex:1}.headline-text{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.4px;padding-top:4px}.headline-padding{padding:0 8px}.large-menu-item{height:64px;line-height:64px}.large-menu-item-text{line-height:32px}.cursor-pointer{cursor:pointer}.box-container{box-sizing:content-box;display:block;overflow:hidden}.content-color{background-color:#f8fafc}.expansion-indicator{color:#00000080;margin-right:10px}.expansion-indicator:after{border-style:solid;border-width:0 2px 2px 0;content:\"\";display:inline-block;padding:3px;vertical-align:middle;transform:rotate(45deg)}.order-icon{transform:scale(.7)}.order-text{color:#000000b3}.order-icon-wrapper{margin-bottom:0}.deny-select{-webkit-user-select:none;user-select:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i1$6.BreakpointObserver }, { type: i1.LanguageService }, { type: i1$2.TranslateService }, { type: i1.UserService }, { type: i1.AccessService }, { type: i1.LoggerService }, { type: i1.ConfigurationService }, { type: i1.UriService }, { type: i1.CaseResourceService }, { type: i1.ImpersonationUserSelectService }, { type: i1.ImpersonationService }, { type: i1.DynamicNavigationRouteProviderService }]; } });
 
 class NavigationComponentModule {
@@ -5350,6 +5505,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
 /* Advanced search */
 
+/**
+ * @deprecated
+ * */
 class NewCaseComponent extends AbstractNewCaseComponent {
     constructor(_sideMenuControl, _formBuilder, _snackBarService, _caseResourceService, _hotkeysService, _translate) {
         super(_sideMenuControl, _formBuilder, _snackBarService, _caseResourceService, _hotkeysService, _translate);
@@ -5426,6 +5584,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }] });
 
+/**
+ * @deprecated
+ * */
 class ImportNetComponent extends AbstractImportNetComponent {
     constructor(_sideMenuControl, _petriNetResource, _uriService, _log, _snackbar, _translate) {
         super(_sideMenuControl, _petriNetResource, _uriService, _log, _snackbar, _translate);
@@ -5473,7 +5634,9 @@ SideMenuImportNetComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion:
         FlexModule,
         FormsModule,
         TranslateLibModule], exports: [ImportNetComponent] });
-SideMenuImportNetComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SideMenuImportNetComponentModule, imports: [[
+SideMenuImportNetComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SideMenuImportNetComponentModule, providers: [
+        { provide: NAE_IMPORT_NET_COMPONENT, useValue: ImportNetComponent }
+    ], imports: [[
             CommonModule,
             MaterialModule,
             CovalentModule,
@@ -5497,7 +5660,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         FormsModule,
                         TranslateLibModule
                     ],
-                    exports: [ImportNetComponent]
+                    exports: [ImportNetComponent],
+                    providers: [
+                        { provide: NAE_IMPORT_NET_COMPONENT, useValue: ImportNetComponent }
+                    ]
                 }]
         }] });
 
@@ -5515,6 +5681,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }] });
 
 /**
+ *
+ * @deprecated
  * Allows user to choose a {@link Filter} from the {@link FilterRepository}.
  *
  * Publishes events to the {@link SideMenuControl} object when:
@@ -5588,6 +5756,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }] });
 
+/**
+ * @deprecated
+ * */
 class OptionSelectorComponent extends AbstractOptionSelectorComponent {
     constructor(_sideMenuControl) {
         super(_sideMenuControl);
@@ -5657,6 +5828,9 @@ function baseFilterFactory$4(sideMenuControl) {
 function localAllowedNetsFactory$4(factory) {
     return factory.createFromArray([UserFilterConstants.FILTER_NET_IDENTIFIER]);
 }
+/**
+ * @deprecated
+ * */
 class SaveFilterComponent extends AbstractSaveFilterComponent {
     constructor(sideMenuControl, userFilterService, log, taskViewService) {
         super(sideMenuControl, userFilterService, log, taskViewService);
@@ -5736,6 +5910,9 @@ function baseFilterFactory$3(sideMenuControl) {
 function localAllowedNetsFactory$3(factory) {
     return factory.createFromArray([UserFilterConstants.FILTER_NET_IDENTIFIER]);
 }
+/**
+ * @deprecated
+ * */
 class LoadFilterComponent extends AbstractLoadFilterComponent {
     constructor(sideMenuControl, log, caseViewService) {
         super(sideMenuControl, log, caseViewService);
@@ -5756,7 +5933,7 @@ LoadFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             deps: [AllowedNetsServiceFactory] },
         { provide: NAE_DEFAULT_HEADERS,
             useValue: ['meta-title', `${UserFilterConstants.FILTER_NET_IDENTIFIER}-${UserFilterConstants.FILTER_FIELD_ID}`] }
-    ], viewQueries: [{ propertyName: "caseHeaderComponent", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-toolbar color=\"primary\">{{'search.tooltip.load' | translate}}</mat-toolbar>\n<div class=\"load-filter-container side-menu-root\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n    <nc-header #header [type]=\"headerType\" [maxHeaderColumns]=\"2\" [responsiveHeaders]=\"true\" [hideHeaderMenu]=\"true\" class=\"case-header-padding\" [ngStyle]=\"{'width': getWidth()}\"></nc-header>\n    <nc-case-list [selectedHeaders$]=\"selectedHeaders$\" [showDeleteMenu]=\"false\" [width]=\"getWidth()\"\n                  (caseClick)=\"handleCaseClick($event)\" [responsiveBody]=\"true\" fxFlex [textEllipsis]=\"true\" class=\"virtual-scroll-list-padding\"></nc-case-list>\n</div>\n", styles: [".load-filter-container{height:calc(100% - 64px);padding-left:8px;padding-right:8px}.case-header-padding{padding-bottom:16px;padding-top:4px}.virtual-scroll-list-padding{padding-right:4px}\n"], components: [{ type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: HeaderComponent, selector: "nc-header" }, { type: CaseListComponent, selector: "nc-case-list" }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "translate": i1$2.TranslatePipe } });
+    ], viewQueries: [{ propertyName: "caseHeaderComponent", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-toolbar color=\"primary\">{{'search.tooltip.load' | translate}}</mat-toolbar>\n<div class=\"load-filter-container side-menu-root\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n    <nc-header #header [type]=\"headerType\" [maxHeaderColumns]=\"2\" [responsiveHeaders]=\"true\" [hideHeaderMenu]=\"true\" class=\"case-header-padding\" [ngStyle]=\"{'width': getWidth()}\"></nc-header>\n    <nc-case-list [selectedHeaders$]=\"selectedHeaders$\" [showDeleteMenu]=\"false\" [width]=\"getWidth()\"\n                  (caseClick)=\"handleCaseClick($event)\" [responsiveBody]=\"true\" fxFlex [textEllipsis]=\"true\" class=\"virtual-scroll-list-padding\"></nc-case-list>\n</div>\n", styles: [".load-filter-container{height:calc(100% - 64px);padding-left:8px;padding-right:8px}.case-header-padding{padding-bottom:16px;padding-top:4px}.virtual-scroll-list-padding{padding-right:4px}\n"], components: [{ type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: HeaderComponent, selector: "nc-header" }, { type: CaseListComponent, selector: "nc-case-list" }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LoadFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-load-filter', providers: [
@@ -5825,7 +6002,7 @@ class AdminImpersonateItemComponent extends AbstractUserAssignItemComponent {
     }
 }
 AdminImpersonateItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AdminImpersonateItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AdminImpersonateItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AdminImpersonateItemComponent, selector: "nc-admin-impersonate-item", usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"user-item\" [ngClass]=\"{\n            'admin-impersonate-item-selected': (selectedId$ | async) === user.id\n        }\">\n    <mat-icon class=\"icon\">account_circle</mat-icon>\n    <div fxLayout=\"column\">\n        <span>{{user.fullName}}</span>\n        <span>{{user.email}}</span>\n    </div>\n</div>\n", styles: [".user-item{padding:10px 15px;cursor:pointer}.user-item:hover{background-color:#00000024;border-radius:2.5px}.icon{margin-right:16px;height:40px;width:40px;font-size:40px}.email-selected,.email-unselected{font-size:.9em}\n"], components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "async": i4$1.AsyncPipe } });
+AdminImpersonateItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: AdminImpersonateItemComponent, selector: "nc-admin-impersonate-item", usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"user-item\" [ngClass]=\"{\n            'admin-impersonate-item-selected': (selectedId$ | async) === user.id\n        }\">\n    <mat-icon class=\"icon\">account_circle</mat-icon>\n    <div fxLayout=\"column\">\n        <span>{{user.fullName}}</span>\n        <span>{{user.email}}</span>\n    </div>\n</div>\n", styles: [".user-item{padding:10px 15px;cursor:pointer}.user-item:hover{background-color:#00000024;border-radius:2.5px}.icon{margin-right:16px;height:40px;width:40px;font-size:40px}.email-selected,.email-unselected{font-size:.9em}\n"], components: [{ type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }], pipes: { "async": i4$1.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AdminImpersonateItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-admin-impersonate-item', template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"user-item\" [ngClass]=\"{\n            'admin-impersonate-item-selected': (selectedId$ | async) === user.id\n        }\">\n    <mat-icon class=\"icon\">account_circle</mat-icon>\n    <div fxLayout=\"column\">\n        <span>{{user.fullName}}</span>\n        <span>{{user.email}}</span>\n    </div>\n</div>\n", styles: [".user-item{padding:10px 15px;cursor:pointer}.user-item:hover{background-color:#00000024;border-radius:2.5px}.icon{margin-right:16px;height:40px;width:40px;font-size:40px}.email-selected,.email-unselected{font-size:.9em}\n"] }]
@@ -5847,6 +6024,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.UserListService }]; } });
 
 /**
+ * @deprecated
  * Is the main - parent component of the entire user assignment in the side menu.
  *
  * Holds logic link of the [AdminImpersonateListComponent]{@link AdminImpersonateListComponent}
@@ -5933,6 +6111,9 @@ function baseFilterFactory$2(sideMenuControl) {
 function localAllowedNetsFactory$2(factory) {
     return factory.createFromArray([UserImpersonationConstants.IMPERSONATION_CONFIG_NET_IDENTIFIER]);
 }
+/**
+ * @deprecated
+ * */
 class UserImpersonateComponent extends AbstractUserImpersonateComponent {
     constructor(sideMenuControl, log, caseViewService) {
         super(sideMenuControl, caseViewService);
@@ -5957,7 +6138,7 @@ UserImpersonateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
                 `${UserImpersonationConstants.IMPERSONATION_CONFIG_NET_IDENTIFIER}-${UserImpersonationConstants.IMPERSONATION_CONFIG_FIELD_ROLES}`,
                 `${UserImpersonationConstants.IMPERSONATION_CONFIG_NET_IDENTIFIER}-${UserImpersonationConstants.IMPERSONATION_CONFIG_FIELD_AUTHS}`,
             ] }
-    ], viewQueries: [{ propertyName: "caseHeaderComponent", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-toolbar color=\"primary\">{{'side-menu.impersonation.title' | translate}}</mat-toolbar>\n<div class=\"load-filter-container side-menu-root\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n    <nc-header #header [type]=\"headerType\" [maxHeaderColumns]=\"3\" [responsiveHeaders]=\"true\" [hideHeaderMenu]=\"true\" class=\"case-header-padding\" [ngStyle]=\"{'width': getWidth()}\"></nc-header>\n    <nc-case-list [selectedHeaders$]=\"selectedHeaders$\" [showDeleteMenu]=\"false\" [width]=\"getWidth()\"\n                  (caseClick)=\"handleCaseClick($event)\" [responsiveBody]=\"true\" fxFlex [textEllipsis]=\"true\" class=\"virtual-scroll-list-padding\"></nc-case-list>\n</div>\n", styles: [".load-filter-container{height:calc(100% - 64px);padding-left:8px;padding-right:8px}.case-header-padding{padding-bottom:16px;padding-top:4px}.virtual-scroll-list-padding{padding-right:4px}\n"], components: [{ type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: HeaderComponent, selector: "nc-header" }, { type: CaseListComponent, selector: "nc-case-list" }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "translate": i1$2.TranslatePipe } });
+    ], viewQueries: [{ propertyName: "caseHeaderComponent", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-toolbar color=\"primary\">{{'side-menu.impersonation.title' | translate}}</mat-toolbar>\n<div class=\"load-filter-container side-menu-root\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n    <nc-header #header [type]=\"headerType\" [maxHeaderColumns]=\"3\" [responsiveHeaders]=\"true\" [hideHeaderMenu]=\"true\" class=\"case-header-padding\" [ngStyle]=\"{'width': getWidth()}\"></nc-header>\n    <nc-case-list [selectedHeaders$]=\"selectedHeaders$\" [showDeleteMenu]=\"false\" [width]=\"getWidth()\"\n                  (caseClick)=\"handleCaseClick($event)\" [responsiveBody]=\"true\" fxFlex [textEllipsis]=\"true\" class=\"virtual-scroll-list-padding\"></nc-case-list>\n</div>\n", styles: [".load-filter-container{height:calc(100% - 64px);padding-left:8px;padding-right:8px}.case-header-padding{padding-bottom:16px;padding-top:4px}.virtual-scroll-list-padding{padding-right:4px}\n"], components: [{ type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: HeaderComponent, selector: "nc-header" }, { type: CaseListComponent, selector: "nc-case-list" }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UserImpersonateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-user-impersonate', providers: [
@@ -6046,6 +6227,8 @@ SideMenuContentComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "1
         SideMenuLoadFilterComponentModule] });
 SideMenuContentComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SideMenuContentComponentModule, providers: [
         { provide: NAE_USER_ASSIGN_COMPONENT, useValue: UserAssignComponent },
+        { provide: NAE_IMPORT_NET_COMPONENT, useValue: ImportNetComponent },
+        { provide: NAE_MULTI_USER_ASSIGN_COMPONENT, useValue: MultiUserAssignComponent },
         { provide: NAE_ADMIN_IMPERSONATE_COMPONENT, useValue: AdminImpersonateComponent },
         { provide: NAE_USER_IMPERSONATE_COMPONENT, useValue: UserImpersonateComponent },
         { provide: NAE_NEW_CASE_COMPONENT, useValue: NewCaseComponent },
@@ -6104,6 +6287,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     ],
                     providers: [
                         { provide: NAE_USER_ASSIGN_COMPONENT, useValue: UserAssignComponent },
+                        { provide: NAE_IMPORT_NET_COMPONENT, useValue: ImportNetComponent },
+                        { provide: NAE_MULTI_USER_ASSIGN_COMPONENT, useValue: MultiUserAssignComponent },
                         { provide: NAE_ADMIN_IMPERSONATE_COMPONENT, useValue: AdminImpersonateComponent },
                         { provide: NAE_USER_IMPERSONATE_COMPONENT, useValue: UserImpersonateComponent },
                         { provide: NAE_NEW_CASE_COMPONENT, useValue: NewCaseComponent },
@@ -6117,6 +6302,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 /* MODULES */
 /* MODELS */
 
+/**
+ * @deprecated
+ * */
 class SideMenuContainerComponent extends AbstractSideMenuContainerComponent {
     constructor(_sideMenuService) {
         super(_sideMenuService);
@@ -6124,7 +6312,7 @@ class SideMenuContainerComponent extends AbstractSideMenuContainerComponent {
     }
 }
 SideMenuContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SideMenuContainerComponent, deps: [{ token: i1.SideMenuService }], target: i0.ɵɵFactoryTarget.Component });
-SideMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SideMenuContainerComponent, selector: "nc-side-menu-container", usesInheritance: true, ngImport: i0, template: "<mat-sidenav-container class=\"side-menu-container\">\n    <mat-sidenav #rightSideMenu mode=\"over\" position=\"end\" class=\"side-menu\" ngClass.lt-sm=\"side-menu-size-mobile\"\n                 [ngClass.gt-xs]=\"portalWrapper.size\">\n        <ng-template [cdkPortalOutlet]=\"portalWrapper.portal\"></ng-template>\n    </mat-sidenav>\n    <mat-sidenav-content>\n        <ng-content></ng-content>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [".side-menu-container{position:absolute;inset:0}.side-menu{border-radius:4px}.side-menu-width-small{width:296px}.side-menu-width-medium{width:400px}.side-menu-width-large{width:496px}.side-menu-width-xl{width:600px}.side-menu-size-mobile{width:246px}\n"], components: [{ type: i3$b.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i3$b.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i3$b.MatSidenavContent, selector: "mat-sidenav-content" }], directives: [{ type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i1$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
+SideMenuContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SideMenuContainerComponent, selector: "nc-side-menu-container", usesInheritance: true, ngImport: i0, template: "<mat-sidenav-container class=\"side-menu-container\">\n    <mat-sidenav #rightSideMenu mode=\"over\" position=\"end\" class=\"side-menu\" ngClass.lt-sm=\"side-menu-size-mobile\"\n                 [ngClass.gt-xs]=\"portalWrapper.size\">\n        <ng-template [cdkPortalOutlet]=\"portalWrapper.portal\"></ng-template>\n    </mat-sidenav>\n    <mat-sidenav-content>\n        <ng-content></ng-content>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [".side-menu-container{position:absolute;inset:0}.side-menu{border-radius:4px}.side-menu-width-small{width:296px}.side-menu-width-medium{width:400px}.side-menu-width-large{width:496px}.side-menu-width-xl{width:600px}.side-menu-size-mobile{width:246px}\n"], components: [{ type: i3$b.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i3$b.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i3$b.MatSidenavContent, selector: "mat-sidenav-content" }], directives: [{ type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i1$4.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SideMenuContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-side-menu-container', template: "<mat-sidenav-container class=\"side-menu-container\">\n    <mat-sidenav #rightSideMenu mode=\"over\" position=\"end\" class=\"side-menu\" ngClass.lt-sm=\"side-menu-size-mobile\"\n                 [ngClass.gt-xs]=\"portalWrapper.size\">\n        <ng-template [cdkPortalOutlet]=\"portalWrapper.portal\"></ng-template>\n    </mat-sidenav>\n    <mat-sidenav-content>\n        <ng-content></ng-content>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [".side-menu-container{position:absolute;inset:0}.side-menu{border-radius:4px}.side-menu-width-small{width:296px}.side-menu-width-medium{width:400px}.side-menu-width-large{width:496px}.side-menu-width-xl{width:600px}.side-menu-size-mobile{width:246px}\n"] }]
@@ -6176,7 +6364,7 @@ class ToolbarComponent extends AbstractToolbarComponent {
     }
 }
 ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: i1$2.TranslateService }, { token: i1.LanguageService }], target: i0.ɵɵFactoryTarget.Component });
-ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarComponent, selector: "nc-toolbar", usesInheritance: true, ngImport: i0, template: "<mat-toolbar color=\"primary\">\n    <mat-toolbar-row fxLayout=\"row\">\n        <div class=\"main-toolbar-logo\" fxFlex fxLayout=\"row\">\n            <a href=\"/\">\n                <img [src]=\"logoSrc\" [alt]=\"logoAlt\">\n            </a>\n        </div>\n        <div fxFlex fxHide.gt-xs=\"false\" fxHide.lt-md=\"true\" fxLayout=\"row\" fxLayoutAlign=\"center\">\n            {{appName}}\n        </div>\n        <div class=\"main-toolbar-menu\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"end\">\n            <button mat-button [matMenuTriggerFor]=\"mainMenu\" class=\"main-toolbar-menu-button\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n                <span class=\"main-toolbar-logged-user\" fxHide.xs=\"true\">{{loggedUser}}</span>\n                <mat-icon class=\"main-toolbar-icon\" aria-hidden=\"false\" aria-label=\"Example home icon\">account_circle\n                </mat-icon>\n                <mat-menu #mainMenu=\"matMenu\" class=\"main-toolbar-opened-menu\">\n                    <button mat-menu-item [matMenuTriggerFor]=\"languages\">\n                        <mat-icon class=\"main-toolbar-menu-icon\" aria-hidden=\"false\" aria-label=\"Example home icon\">\n                            language\n                        </mat-icon>\n                        {{ 'toolbar.menu.lang' | translate }}\n                    </button>\n                    <button mat-menu-item>\n                        <mat-icon class=\"main-toolbar-menu-icon\" aria-hidden=\"false\" aria-label=\"Example home icon\">\n                            account_circle\n                        </mat-icon>\n                        {{ 'toolbar.menu.profile' | translate }}\n                    </button>\n                    <button mat-menu-item>\n                        <mat-icon class=\"main-toolbar-menu-icon\" aria-hidden=\"false\" aria-label=\"Example home icon\">\n                            exit_to_app\n                        </mat-icon>\n                        {{ 'toolbar.menu.logout' | translate }}\n                    </button>\n                </mat-menu>\n                <mat-menu #languages=\"matMenu\">\n                    <button mat-menu-item (click)=\"setLang('en-UK')\">{{ 'toolbar.menu.en' | translate }}\n                        <mat-icon *ngIf=\"activeLang('en-UK')\" class=\"main-toolbar-menu-icon\"\n                                  aria-hidden=\"false\" aria-label=\"Example home icon\">keyboard_arrow_left\n                        </mat-icon>\n                    </button>\n                    <button mat-menu-item (click)=\"setLang('sk-SK')\">{{ 'toolbar.menu.sk' | translate }}\n                        <mat-icon *ngIf=\"activeLang('sk-SK')\" class=\"main-toolbar-menu-icon\"\n                                  aria-hidden=\"false\" aria-label=\"Example home icon\">keyboard_arrow_left\n                        </mat-icon>\n                    </button>\n                    <button mat-menu-item (click)=\"setLang('de-DE')\">{{ 'toolbar.menu.de' | translate }}\n                        <mat-icon *ngIf=\"activeLang('de-DE')\" class=\"main-toolbar-menu-icon\"\n                                  aria-hidden=\"false\" aria-label=\"Example home icon\">keyboard_arrow_left\n                        </mat-icon>\n                    </button>\n                </mat-menu>\n            </button>\n        </div>\n    </mat-toolbar-row>\n</mat-toolbar>\n", styles: [".main-toolbar-logo{max-height:60%}.main-toolbar-logo img{width:120px}mat-icon.main-toolbar-icon{font-size:48px;height:100%;margin-right:15px}.main-toolbar-logged-user{margin-right:15px}.main-toolbar-menu,.main-toolbar-menu-button{font-size:20px;height:100%}.main-toolbar-menu-icon{font-size:23px}\n"], components: [{ type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i10$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i10$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i2.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i7$1.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i10$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1$2.TranslatePipe } });
+ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarComponent, selector: "nc-toolbar", usesInheritance: true, ngImport: i0, template: "<mat-toolbar color=\"primary\">\n    <mat-toolbar-row fxLayout=\"row\">\n        <div class=\"main-toolbar-logo\" fxFlex fxLayout=\"row\">\n            <a href=\"/\">\n                <img [src]=\"logoSrc\" [alt]=\"logoAlt\">\n            </a>\n        </div>\n        <div fxFlex fxHide.gt-xs=\"false\" fxHide.lt-md=\"true\" fxLayout=\"row\" fxLayoutAlign=\"center\">\n            {{appName}}\n        </div>\n        <div class=\"main-toolbar-menu\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"end\">\n            <button mat-button [matMenuTriggerFor]=\"mainMenu\" class=\"main-toolbar-menu-button\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n                <span class=\"main-toolbar-logged-user\" fxHide.xs=\"true\">{{loggedUser}}</span>\n                <mat-icon class=\"main-toolbar-icon\" aria-hidden=\"false\" aria-label=\"Example home icon\">account_circle\n                </mat-icon>\n                <mat-menu #mainMenu=\"matMenu\" class=\"main-toolbar-opened-menu\">\n                    <button mat-menu-item [matMenuTriggerFor]=\"languages\">\n                        <mat-icon class=\"main-toolbar-menu-icon\" aria-hidden=\"false\" aria-label=\"Example home icon\">\n                            language\n                        </mat-icon>\n                        {{ 'toolbar.menu.lang' | translate }}\n                    </button>\n                    <button mat-menu-item>\n                        <mat-icon class=\"main-toolbar-menu-icon\" aria-hidden=\"false\" aria-label=\"Example home icon\">\n                            account_circle\n                        </mat-icon>\n                        {{ 'toolbar.menu.profile' | translate }}\n                    </button>\n                    <button mat-menu-item>\n                        <mat-icon class=\"main-toolbar-menu-icon\" aria-hidden=\"false\" aria-label=\"Example home icon\">\n                            exit_to_app\n                        </mat-icon>\n                        {{ 'toolbar.menu.logout' | translate }}\n                    </button>\n                </mat-menu>\n                <mat-menu #languages=\"matMenu\">\n                    <button mat-menu-item (click)=\"setLang('en-UK')\">{{ 'toolbar.menu.en' | translate }}\n                        <mat-icon *ngIf=\"activeLang('en-UK')\" class=\"main-toolbar-menu-icon\"\n                                  aria-hidden=\"false\" aria-label=\"Example home icon\">keyboard_arrow_left\n                        </mat-icon>\n                    </button>\n                    <button mat-menu-item (click)=\"setLang('sk-SK')\">{{ 'toolbar.menu.sk' | translate }}\n                        <mat-icon *ngIf=\"activeLang('sk-SK')\" class=\"main-toolbar-menu-icon\"\n                                  aria-hidden=\"false\" aria-label=\"Example home icon\">keyboard_arrow_left\n                        </mat-icon>\n                    </button>\n                    <button mat-menu-item (click)=\"setLang('de-DE')\">{{ 'toolbar.menu.de' | translate }}\n                        <mat-icon *ngIf=\"activeLang('de-DE')\" class=\"main-toolbar-menu-icon\"\n                                  aria-hidden=\"false\" aria-label=\"Example home icon\">keyboard_arrow_left\n                        </mat-icon>\n                    </button>\n                </mat-menu>\n            </button>\n        </div>\n    </mat-toolbar-row>\n</mat-toolbar>\n", styles: [".main-toolbar-logo{max-height:60%}.main-toolbar-logo img{width:120px}mat-icon.main-toolbar-icon{font-size:48px;height:100%;margin-right:15px}.main-toolbar-logged-user{margin-right:15px}.main-toolbar-menu,.main-toolbar-menu-button{font-size:20px;height:100%}.main-toolbar-menu-icon{font-size:23px}\n"], components: [{ type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i10$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i10$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }], directives: [{ type: i2.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i6$2.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i10$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-toolbar', template: "<mat-toolbar color=\"primary\">\n    <mat-toolbar-row fxLayout=\"row\">\n        <div class=\"main-toolbar-logo\" fxFlex fxLayout=\"row\">\n            <a href=\"/\">\n                <img [src]=\"logoSrc\" [alt]=\"logoAlt\">\n            </a>\n        </div>\n        <div fxFlex fxHide.gt-xs=\"false\" fxHide.lt-md=\"true\" fxLayout=\"row\" fxLayoutAlign=\"center\">\n            {{appName}}\n        </div>\n        <div class=\"main-toolbar-menu\" fxFlex fxLayout=\"row\" fxLayoutAlign=\"end\">\n            <button mat-button [matMenuTriggerFor]=\"mainMenu\" class=\"main-toolbar-menu-button\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n                <span class=\"main-toolbar-logged-user\" fxHide.xs=\"true\">{{loggedUser}}</span>\n                <mat-icon class=\"main-toolbar-icon\" aria-hidden=\"false\" aria-label=\"Example home icon\">account_circle\n                </mat-icon>\n                <mat-menu #mainMenu=\"matMenu\" class=\"main-toolbar-opened-menu\">\n                    <button mat-menu-item [matMenuTriggerFor]=\"languages\">\n                        <mat-icon class=\"main-toolbar-menu-icon\" aria-hidden=\"false\" aria-label=\"Example home icon\">\n                            language\n                        </mat-icon>\n                        {{ 'toolbar.menu.lang' | translate }}\n                    </button>\n                    <button mat-menu-item>\n                        <mat-icon class=\"main-toolbar-menu-icon\" aria-hidden=\"false\" aria-label=\"Example home icon\">\n                            account_circle\n                        </mat-icon>\n                        {{ 'toolbar.menu.profile' | translate }}\n                    </button>\n                    <button mat-menu-item>\n                        <mat-icon class=\"main-toolbar-menu-icon\" aria-hidden=\"false\" aria-label=\"Example home icon\">\n                            exit_to_app\n                        </mat-icon>\n                        {{ 'toolbar.menu.logout' | translate }}\n                    </button>\n                </mat-menu>\n                <mat-menu #languages=\"matMenu\">\n                    <button mat-menu-item (click)=\"setLang('en-UK')\">{{ 'toolbar.menu.en' | translate }}\n                        <mat-icon *ngIf=\"activeLang('en-UK')\" class=\"main-toolbar-menu-icon\"\n                                  aria-hidden=\"false\" aria-label=\"Example home icon\">keyboard_arrow_left\n                        </mat-icon>\n                    </button>\n                    <button mat-menu-item (click)=\"setLang('sk-SK')\">{{ 'toolbar.menu.sk' | translate }}\n                        <mat-icon *ngIf=\"activeLang('sk-SK')\" class=\"main-toolbar-menu-icon\"\n                                  aria-hidden=\"false\" aria-label=\"Example home icon\">keyboard_arrow_left\n                        </mat-icon>\n                    </button>\n                    <button mat-menu-item (click)=\"setLang('de-DE')\">{{ 'toolbar.menu.de' | translate }}\n                        <mat-icon *ngIf=\"activeLang('de-DE')\" class=\"main-toolbar-menu-icon\"\n                                  aria-hidden=\"false\" aria-label=\"Example home icon\">keyboard_arrow_left\n                        </mat-icon>\n                    </button>\n                </mat-menu>\n            </button>\n        </div>\n    </mat-toolbar-row>\n</mat-toolbar>\n", styles: [".main-toolbar-logo{max-height:60%}.main-toolbar-logo img{width:120px}mat-icon.main-toolbar-icon{font-size:48px;height:100%;margin-right:15px}.main-toolbar-logged-user{margin-right:15px}.main-toolbar-menu,.main-toolbar-menu-button{font-size:20px;height:100%}.main-toolbar-menu-icon{font-size:23px}\n"] }]
@@ -6218,7 +6406,7 @@ class ProfileComponent extends AbstractProfileComponent {
     }
 }
 ProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProfileComponent, deps: [{ token: i1.UserService }], target: i0.ɵɵFactoryTarget.Component });
-ProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ProfileComponent, selector: "nc-user-profile", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!user\">\n    <div fxLayout=\"row\" fxFlex=\"50\" fxLayoutAlign=\"center center\">\n        <mat-card fxLayoutAlign=\"center center\">\n            <h1>{{ 'profile.notLogged' | translate}}</h1>\n        </mat-card>\n    </div>\n</div>\n<div *ngIf=\"user\" fxLayout=\"column\" fxLayoutAlign=\"center start\">\n    <div [style.backgroundImage]=\"'url('+userBanner+')'\" fxLayout=\"row\" class=\"full-width banner mat-elevation-z6\"\n         matRipple fxLayoutAlign=\"start center\">\n        <div class=\"user-avatar-large mat-elevation-z6 margin-banner\" matRipple>\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n        <h1 class=\"white-name\">{{user.fullName}}</h1>\n    </div>\n    <div fxLayout=\"row\" fxFlex fxLayoutAlign=\"center end\" class=\"full-width div-background netgrif-input\">\n        <div fxFlex=\"80\" class=\"tab-group margin-bottom-x2 mat-elevation-z4\">\n            <div fxLayout=\"row\">\n                <div fxFlex=\"50\" class=\"padding-x2\" fxLayout=\"column\">\n                    <div fxLayout=\"column\" class=\"full-height border\">\n                        <div fxLayoutAlign=\"center start\" class=\"card-title\" matRipple>\n                            <h2>{{ 'profile.personal' | translate}}</h2>\n                        </div>\n                        <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"padding-default\">\n                            <mat-form-field appearance=\"outline\" class=\"full-width\">\n                                <mat-label>{{ 'profile.name' | translate}}</mat-label>\n                                <input matInput disabled [value]=user.firstName>\n                            </mat-form-field>\n                            <mat-form-field appearance=\"outline\" class=\"full-width\">\n                                <mat-label>{{ 'profile.surname' | translate}}</mat-label>\n                                <input matInput disabled [value]=user.lastName>\n                            </mat-form-field>\n                            <mat-form-field appearance=\"outline\" class=\"full-width\">\n                                <mat-label>Email</mat-label>\n                                <input disabled matInput [value]=\"user.email\">\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n                <div fxFlex=\"50\" class=\"padding-x2\" fxLayout=\"column\">\n                    <div fxLayout=\"column\" class=\"full-height border\">\n                        <div fxLayoutAlign=\"center start\" class=\"card-title\" matRipple>\n                            <h2>{{ 'profile.authority' | translate}}</h2>\n                        </div>\n                        <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"padding-default\">\n                            <mat-form-field appearance=\"outline\" class=\"user-chip-list\">\n                                <mat-chip-list disabled>\n                                    <mat-chip color=\"primary\"\n                                              *ngFor=\"let authority of user.authorities\">{{authority}}</mat-chip>\n                                </mat-chip-list>\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div fxLayout=\"row\">\n                <div fxFlex=\"50\" class=\"padding-x2\" fxLayout=\"column\">\n                    <div fxLayout=\"column\" class=\"full-height border\">\n                        <div fxLayoutAlign=\"center start\" class=\"card-title\" matRipple>\n                            <h2>{{ 'profile.roles' | translate}}</h2>\n                        </div>\n                        <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"padding-default\">\n                            <mat-form-field appearance=\"outline\" class=\"user-chip-list\">\n                                <mat-chip-list disabled>\n                                    <mat-chip color=\"primary\" *ngFor=\"let role of user.roles\">{{role.name}}</mat-chip>\n                                </mat-chip-list>\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n                <div fxFlex=\"50\" class=\"padding-x2\" fxLayout=\"column\">\n                    <div fxLayout=\"column\" class=\"full-height border\">\n                        <div fxLayoutAlign=\"center start\" class=\"card-title\" matRipple>\n                            <h2>{{ 'profile.groups' | translate}}</h2>\n                        </div>\n                        <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"padding-default\">\n                            <mat-form-field appearance=\"outline\" class=\"user-chip-list\">\n                                <mat-chip-list disabled>\n                                    <mat-chip color=\"primary\" *ngFor=\"let group of user.groups\">{{group}}</mat-chip>\n                                </mat-chip-list>\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".full-height{height:100%;min-height:100%}.full-width{width:100%;min-width:100%}.padding-default{padding:8px}.padding-half{padding:4px}.padding-x2{padding:16px}.margin-default{margin:8px}.margin-half{margin:4px}.margin-x2{margin:16px}.margin-top-default{margin-top:8px}.margin-top-half{margin-top:4px}.margin-top-x2{margin-top:16px}.margin-bottom-default{margin-bottom:8px}.margin-bottom-half{margin-bottom:4px}.margin-bottom-x2{margin-bottom:16px}.margin-left-default{margin-left:8px}.margin-left-half{margin-left:4px}.margin-left-x2{margin-left:16px}.margin-right-default{margin-right:8px}.margin-right-half{margin-right:4px}.margin-right-x2{margin-right:16px}.user-avatar-large{width:100px;height:100px;border-radius:100px}.banner{height:250px;background-repeat:no-repeat;background-size:cover}.margin-banner{margin-left:10%;margin-right:32px}.white-name{color:#fff}.tab-group{margin-top:-48px;z-index:100;background:#f0f0f0}.div-background{background:#ddd}.user-chip-list{width:100%}.border{border:1px solid #dddddd;border-radius:6px;background:white}\n"], components: [{ type: i3$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$6.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i3$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }], pipes: { "translate": i1$2.TranslatePipe } });
+ProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ProfileComponent, selector: "nc-user-profile", usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"!user\">\n    <div fxLayout=\"row\" fxFlex=\"50\" fxLayoutAlign=\"center center\">\n        <mat-card fxLayoutAlign=\"center center\">\n            <h1>{{ 'profile.notLogged' | translate}}</h1>\n        </mat-card>\n    </div>\n</div>\n<div *ngIf=\"user\" fxLayout=\"column\" fxLayoutAlign=\"center start\">\n    <div [style.backgroundImage]=\"'url('+userBanner+')'\" fxLayout=\"row\" class=\"full-width banner mat-elevation-z6\"\n         matRipple fxLayoutAlign=\"start center\">\n        <div class=\"user-avatar-large mat-elevation-z6 margin-banner\" matRipple>\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n        <h1 class=\"white-name\">{{user.fullName}}</h1>\n    </div>\n    <div fxLayout=\"row\" fxFlex fxLayoutAlign=\"center end\" class=\"full-width div-background netgrif-input\">\n        <div fxFlex=\"80\" class=\"tab-group margin-bottom-x2 mat-elevation-z4\">\n            <div fxLayout=\"row\">\n                <div fxFlex=\"50\" class=\"padding-x2\" fxLayout=\"column\">\n                    <div fxLayout=\"column\" class=\"full-height border\">\n                        <div fxLayoutAlign=\"center start\" class=\"card-title\" matRipple>\n                            <h2>{{ 'profile.personal' | translate}}</h2>\n                        </div>\n                        <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"padding-default\">\n                            <mat-form-field appearance=\"outline\" class=\"full-width\">\n                                <mat-label>{{ 'profile.name' | translate}}</mat-label>\n                                <input matInput disabled [value]=user.firstName>\n                            </mat-form-field>\n                            <mat-form-field appearance=\"outline\" class=\"full-width\">\n                                <mat-label>{{ 'profile.surname' | translate}}</mat-label>\n                                <input matInput disabled [value]=user.lastName>\n                            </mat-form-field>\n                            <mat-form-field appearance=\"outline\" class=\"full-width\">\n                                <mat-label>Email</mat-label>\n                                <input disabled matInput [value]=\"user.email\">\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n                <div fxFlex=\"50\" class=\"padding-x2\" fxLayout=\"column\">\n                    <div fxLayout=\"column\" class=\"full-height border\">\n                        <div fxLayoutAlign=\"center start\" class=\"card-title\" matRipple>\n                            <h2>{{ 'profile.authority' | translate}}</h2>\n                        </div>\n                        <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"padding-default\">\n                            <mat-form-field appearance=\"outline\" class=\"user-chip-list\">\n                                <mat-chip-list disabled>\n                                    <mat-chip color=\"primary\"\n                                              *ngFor=\"let authority of user.authorities\">{{authority}}</mat-chip>\n                                </mat-chip-list>\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div fxLayout=\"row\">\n                <div fxFlex=\"50\" class=\"padding-x2\" fxLayout=\"column\">\n                    <div fxLayout=\"column\" class=\"full-height border\">\n                        <div fxLayoutAlign=\"center start\" class=\"card-title\" matRipple>\n                            <h2>{{ 'profile.roles' | translate}}</h2>\n                        </div>\n                        <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"padding-default\">\n                            <mat-form-field appearance=\"outline\" class=\"user-chip-list\">\n                                <mat-chip-list disabled>\n                                    <mat-chip color=\"primary\" *ngFor=\"let role of user.roles\">{{role.name}}</mat-chip>\n                                </mat-chip-list>\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n                <div fxFlex=\"50\" class=\"padding-x2\" fxLayout=\"column\">\n                    <div fxLayout=\"column\" class=\"full-height border\">\n                        <div fxLayoutAlign=\"center start\" class=\"card-title\" matRipple>\n                            <h2>{{ 'profile.groups' | translate}}</h2>\n                        </div>\n                        <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"padding-default\">\n                            <mat-form-field appearance=\"outline\" class=\"user-chip-list\">\n                                <mat-chip-list disabled>\n                                    <mat-chip color=\"primary\" *ngFor=\"let group of user.groups\">{{group}}</mat-chip>\n                                </mat-chip-list>\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".full-height{height:100%;min-height:100%}.full-width{width:100%;min-width:100%}.padding-default{padding:8px}.padding-half{padding:4px}.padding-x2{padding:16px}.margin-default{margin:8px}.margin-half{margin:4px}.margin-x2{margin:16px}.margin-top-default{margin-top:8px}.margin-top-half{margin-top:4px}.margin-top-x2{margin-top:16px}.margin-bottom-default{margin-bottom:8px}.margin-bottom-half{margin-bottom:4px}.margin-bottom-x2{margin-bottom:16px}.margin-left-default{margin-left:8px}.margin-left-half{margin-left:4px}.margin-left-x2{margin-left:16px}.margin-right-default{margin-right:8px}.margin-right-half{margin-right:4px}.margin-right-x2{margin-right:16px}.user-avatar-large{width:100px;height:100px;border-radius:100px}.banner{height:250px;background-repeat:no-repeat;background-size:cover}.margin-banner{margin-left:10%;margin-right:32px}.white-name{color:#fff}.tab-group{margin-top:-48px;z-index:100;background:#f0f0f0}.div-background{background:#ddd}.user-chip-list{width:100%}.border{border:1px solid #dddddd;border-radius:6px;background:white}\n"], components: [{ type: i3$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2$7.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }], directives: [{ type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i3$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i2$1.MatLabel, selector: "mat-label" }, { type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i4$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$7.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }], pipes: { "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProfileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-user-profile', template: "<div *ngIf=\"!user\">\n    <div fxLayout=\"row\" fxFlex=\"50\" fxLayoutAlign=\"center center\">\n        <mat-card fxLayoutAlign=\"center center\">\n            <h1>{{ 'profile.notLogged' | translate}}</h1>\n        </mat-card>\n    </div>\n</div>\n<div *ngIf=\"user\" fxLayout=\"column\" fxLayoutAlign=\"center start\">\n    <div [style.backgroundImage]=\"'url('+userBanner+')'\" fxLayout=\"row\" class=\"full-width banner mat-elevation-z6\"\n         matRipple fxLayoutAlign=\"start center\">\n        <div class=\"user-avatar-large mat-elevation-z6 margin-banner\" matRipple>\n            <img [src]=\"userAvatar\" alt=\"user avatar\" class=\"full-width full-height\">\n        </div>\n        <h1 class=\"white-name\">{{user.fullName}}</h1>\n    </div>\n    <div fxLayout=\"row\" fxFlex fxLayoutAlign=\"center end\" class=\"full-width div-background netgrif-input\">\n        <div fxFlex=\"80\" class=\"tab-group margin-bottom-x2 mat-elevation-z4\">\n            <div fxLayout=\"row\">\n                <div fxFlex=\"50\" class=\"padding-x2\" fxLayout=\"column\">\n                    <div fxLayout=\"column\" class=\"full-height border\">\n                        <div fxLayoutAlign=\"center start\" class=\"card-title\" matRipple>\n                            <h2>{{ 'profile.personal' | translate}}</h2>\n                        </div>\n                        <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"padding-default\">\n                            <mat-form-field appearance=\"outline\" class=\"full-width\">\n                                <mat-label>{{ 'profile.name' | translate}}</mat-label>\n                                <input matInput disabled [value]=user.firstName>\n                            </mat-form-field>\n                            <mat-form-field appearance=\"outline\" class=\"full-width\">\n                                <mat-label>{{ 'profile.surname' | translate}}</mat-label>\n                                <input matInput disabled [value]=user.lastName>\n                            </mat-form-field>\n                            <mat-form-field appearance=\"outline\" class=\"full-width\">\n                                <mat-label>Email</mat-label>\n                                <input disabled matInput [value]=\"user.email\">\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n                <div fxFlex=\"50\" class=\"padding-x2\" fxLayout=\"column\">\n                    <div fxLayout=\"column\" class=\"full-height border\">\n                        <div fxLayoutAlign=\"center start\" class=\"card-title\" matRipple>\n                            <h2>{{ 'profile.authority' | translate}}</h2>\n                        </div>\n                        <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"padding-default\">\n                            <mat-form-field appearance=\"outline\" class=\"user-chip-list\">\n                                <mat-chip-list disabled>\n                                    <mat-chip color=\"primary\"\n                                              *ngFor=\"let authority of user.authorities\">{{authority}}</mat-chip>\n                                </mat-chip-list>\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <div fxLayout=\"row\">\n                <div fxFlex=\"50\" class=\"padding-x2\" fxLayout=\"column\">\n                    <div fxLayout=\"column\" class=\"full-height border\">\n                        <div fxLayoutAlign=\"center start\" class=\"card-title\" matRipple>\n                            <h2>{{ 'profile.roles' | translate}}</h2>\n                        </div>\n                        <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"padding-default\">\n                            <mat-form-field appearance=\"outline\" class=\"user-chip-list\">\n                                <mat-chip-list disabled>\n                                    <mat-chip color=\"primary\" *ngFor=\"let role of user.roles\">{{role.name}}</mat-chip>\n                                </mat-chip-list>\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n                <div fxFlex=\"50\" class=\"padding-x2\" fxLayout=\"column\">\n                    <div fxLayout=\"column\" class=\"full-height border\">\n                        <div fxLayoutAlign=\"center start\" class=\"card-title\" matRipple>\n                            <h2>{{ 'profile.groups' | translate}}</h2>\n                        </div>\n                        <div fxFlex fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"padding-default\">\n                            <mat-form-field appearance=\"outline\" class=\"user-chip-list\">\n                                <mat-chip-list disabled>\n                                    <mat-chip color=\"primary\" *ngFor=\"let group of user.groups\">{{group}}</mat-chip>\n                                </mat-chip-list>\n                            </mat-form-field>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".full-height{height:100%;min-height:100%}.full-width{width:100%;min-width:100%}.padding-default{padding:8px}.padding-half{padding:4px}.padding-x2{padding:16px}.margin-default{margin:8px}.margin-half{margin:4px}.margin-x2{margin:16px}.margin-top-default{margin-top:8px}.margin-top-half{margin-top:4px}.margin-top-x2{margin-top:16px}.margin-bottom-default{margin-bottom:8px}.margin-bottom-half{margin-bottom:4px}.margin-bottom-x2{margin-bottom:16px}.margin-left-default{margin-left:8px}.margin-left-half{margin-left:4px}.margin-left-x2{margin-left:16px}.margin-right-default{margin-right:8px}.margin-right-half{margin-right:4px}.margin-right-x2{margin-right:16px}.user-avatar-large{width:100px;height:100px;border-radius:100px}.banner{height:250px;background-repeat:no-repeat;background-size:cover}.margin-banner{margin-left:10%;margin-right:32px}.white-name{color:#fff}.tab-group{margin-top:-48px;z-index:100;background:#f0f0f0}.div-background{background:#ddd}.user-chip-list{width:100%}.border{border:1px solid #dddddd;border-radius:6px;background:white}\n"] }]
@@ -6440,7 +6628,7 @@ class TreeComponent extends AbstractTreeComponent {
     }
 }
 TreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TreeComponent, deps: [{ token: i1.CaseTreeService }], target: i0.ɵɵFactoryTarget.Component });
-TreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TreeComponent, selector: "nc-tree-component", providers: [CaseTreeService], usesInheritance: true, ngImport: i0, template: "<mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n    <!-- This is the tree node template for leaf nodes -->\n    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle>\n        <div class=\"min-node-height width-100\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n             [ngClass]=\"{'selected-tree-node border-radius': selectedCaseNode(node)}\" (click)=\"caseNodeClicked(node)\">\n            <mat-icon *ngIf=\"node.beforeTextIcon()\" [matTooltip]=\"node.beforeTextIconTitle()\" [svgIcon]=\"node.beforeTextIcon()\"></mat-icon>\n            <span class=\"padding-12px\"\n                  [ngClass]=\"{'selected-tree-node': selectedCaseNode(node)}\">{{node.case.title}}</span>\n            <div fxFlex></div>\n            <nc-add-child-node [node]=\"node\" *ngIf=\"node.canAddChildren()\"></nc-add-child-node>\n            <nc-remove-node [node]=\"node\" *ngIf=\"node.canBeRemoved()\"></nc-remove-node>\n        </div>\n    </mat-tree-node>\n\n    <!-- This is the tree node template for expandable nodes -->\n    <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\">\n        <div class=\"min-node-height\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n             [ngClass]=\"{'selected-tree-node border-radius': selectedCaseNode(node)}\">\n            <div class=\"mat-tree-node\" (click)=\"caseNodeClicked(node)\">\n                <mat-icon *ngIf=\"node.beforeTextIcon()\" [svgIcon]=\"node.beforeTextIcon()\"></mat-icon>\n                <span class=\"padding-12px\"\n                      [ngClass]=\"{'selected-tree-node': selectedCaseNode(node)}\">{{node.case.title}}</span>\n                <div fxFlex></div>\n                <nc-add-child-node [node]=\"node\" *ngIf=\"node.canAddChildren()\"></nc-add-child-node>\n                <nc-remove-node [node]=\"node\" *ngIf=\"node.canBeRemoved()\"></nc-remove-node>\n\n                <button *ngIf=\"!node.isLoadingChildren()\" (click)=\"toggleCaseNode($event, node)\" mat-icon-button\n                        [attr.aria-label]=\"'toggle ' + node.case.title\">\n                    <mat-icon class=\"mat-icon-rtl-mirror\">\n                        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\n                    </mat-icon>\n                </button>\n\n                <div *ngIf=\"node.isLoadingChildren()\" class=\"spinner-margin\">\n                    <mat-spinner [diameter]=\"24\"></mat-spinner>\n                </div>\n            </div>\n        </div>\n        <div class=\"tree-offset\" [class.tree-invisible]=\"!treeControl.isExpanded(node)\">\n            <ng-container matTreeNodeOutlet></ng-container>\n        </div>\n    </mat-nested-tree-node>\n</mat-tree>\n", styles: [".padding-12px{padding-left:12px;padding-right:12px}.padding-12px:hover{cursor:pointer}.border-radius{border-radius:8px}.tree-offset{margin-left:20px}.tree-invisible{display:none}.mat-tree-node{min-height:0!important}.min-node-height{min-height:40px!important}.width-100{width:100%}.spinner-margin{margin:8px}\n"], components: [{ type: i3$a.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AddChildNodeComponent, selector: "nc-add-child-node" }, { type: RemoveNodeComponent, selector: "nc-remove-node" }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i3$a.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { type: i3$a.MatTreeNode, selector: "mat-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { type: i3$a.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i3$a.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["role", "disabled", "tabIndex", "matNestedTreeNode"], exportAs: ["matNestedTreeNode"] }, { type: i3$a.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }] });
+TreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TreeComponent, selector: "nc-tree-component", providers: [CaseTreeService], usesInheritance: true, ngImport: i0, template: "<mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n    <!-- This is the tree node template for leaf nodes -->\n    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle>\n        <div class=\"min-node-height width-100\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n             [ngClass]=\"{'selected-tree-node border-radius': selectedCaseNode(node)}\" (click)=\"caseNodeClicked(node)\">\n            <mat-icon *ngIf=\"node.beforeTextIcon()\" [matTooltip]=\"node.beforeTextIconTitle()\" [svgIcon]=\"node.beforeTextIcon()\"></mat-icon>\n            <span class=\"padding-12px\"\n                  [ngClass]=\"{'selected-tree-node': selectedCaseNode(node)}\">{{node.case.title}}</span>\n            <div fxFlex></div>\n            <nc-add-child-node [node]=\"node\" *ngIf=\"node.canAddChildren()\"></nc-add-child-node>\n            <nc-remove-node [node]=\"node\" *ngIf=\"node.canBeRemoved()\"></nc-remove-node>\n        </div>\n    </mat-tree-node>\n\n    <!-- This is the tree node template for expandable nodes -->\n    <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\">\n        <div class=\"min-node-height\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n             [ngClass]=\"{'selected-tree-node border-radius': selectedCaseNode(node)}\">\n            <div class=\"mat-tree-node\" (click)=\"caseNodeClicked(node)\">\n                <mat-icon *ngIf=\"node.beforeTextIcon()\" [svgIcon]=\"node.beforeTextIcon()\"></mat-icon>\n                <span class=\"padding-12px\"\n                      [ngClass]=\"{'selected-tree-node': selectedCaseNode(node)}\">{{node.case.title}}</span>\n                <div fxFlex></div>\n                <nc-add-child-node [node]=\"node\" *ngIf=\"node.canAddChildren()\"></nc-add-child-node>\n                <nc-remove-node [node]=\"node\" *ngIf=\"node.canBeRemoved()\"></nc-remove-node>\n\n                <button *ngIf=\"!node.isLoadingChildren()\" (click)=\"toggleCaseNode($event, node)\" mat-icon-button\n                        [attr.aria-label]=\"'toggle ' + node.case.title\">\n                    <mat-icon class=\"mat-icon-rtl-mirror\">\n                        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\n                    </mat-icon>\n                </button>\n\n                <div *ngIf=\"node.isLoadingChildren()\" class=\"spinner-margin\">\n                    <mat-spinner [diameter]=\"24\"></mat-spinner>\n                </div>\n            </div>\n        </div>\n        <div class=\"tree-offset\" [class.tree-invisible]=\"!treeControl.isExpanded(node)\">\n            <ng-container matTreeNodeOutlet></ng-container>\n        </div>\n    </mat-nested-tree-node>\n</mat-tree>\n", styles: [".padding-12px{padding-left:12px;padding-right:12px}.padding-12px:hover{cursor:pointer}.border-radius{border-radius:8px}.tree-offset{margin-left:20px}.tree-invisible{display:none}.mat-tree-node{min-height:0!important}.min-node-height{min-height:40px!important}.width-100{width:100%}.spinner-margin{margin:8px}\n"], components: [{ type: i3$a.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: AddChildNodeComponent, selector: "nc-add-child-node" }, { type: RemoveNodeComponent, selector: "nc-remove-node" }, { type: i4.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i3$a.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { type: i3$a.MatTreeNode, selector: "mat-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { type: i3$a.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { type: i3$a.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["role", "disabled", "tabIndex", "matNestedTreeNode"], exportAs: ["matNestedTreeNode"] }, { type: i3$a.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-tree-component', providers: [CaseTreeService], template: "<mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\n    <!-- This is the tree node template for leaf nodes -->\n    <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle>\n        <div class=\"min-node-height width-100\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n             [ngClass]=\"{'selected-tree-node border-radius': selectedCaseNode(node)}\" (click)=\"caseNodeClicked(node)\">\n            <mat-icon *ngIf=\"node.beforeTextIcon()\" [matTooltip]=\"node.beforeTextIconTitle()\" [svgIcon]=\"node.beforeTextIcon()\"></mat-icon>\n            <span class=\"padding-12px\"\n                  [ngClass]=\"{'selected-tree-node': selectedCaseNode(node)}\">{{node.case.title}}</span>\n            <div fxFlex></div>\n            <nc-add-child-node [node]=\"node\" *ngIf=\"node.canAddChildren()\"></nc-add-child-node>\n            <nc-remove-node [node]=\"node\" *ngIf=\"node.canBeRemoved()\"></nc-remove-node>\n        </div>\n    </mat-tree-node>\n\n    <!-- This is the tree node template for expandable nodes -->\n    <mat-nested-tree-node *matTreeNodeDef=\"let node; when: hasChild\">\n        <div class=\"min-node-height\" fxLayout=\"row\" fxLayoutAlign=\"start center\"\n             [ngClass]=\"{'selected-tree-node border-radius': selectedCaseNode(node)}\">\n            <div class=\"mat-tree-node\" (click)=\"caseNodeClicked(node)\">\n                <mat-icon *ngIf=\"node.beforeTextIcon()\" [svgIcon]=\"node.beforeTextIcon()\"></mat-icon>\n                <span class=\"padding-12px\"\n                      [ngClass]=\"{'selected-tree-node': selectedCaseNode(node)}\">{{node.case.title}}</span>\n                <div fxFlex></div>\n                <nc-add-child-node [node]=\"node\" *ngIf=\"node.canAddChildren()\"></nc-add-child-node>\n                <nc-remove-node [node]=\"node\" *ngIf=\"node.canBeRemoved()\"></nc-remove-node>\n\n                <button *ngIf=\"!node.isLoadingChildren()\" (click)=\"toggleCaseNode($event, node)\" mat-icon-button\n                        [attr.aria-label]=\"'toggle ' + node.case.title\">\n                    <mat-icon class=\"mat-icon-rtl-mirror\">\n                        {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\n                    </mat-icon>\n                </button>\n\n                <div *ngIf=\"node.isLoadingChildren()\" class=\"spinner-margin\">\n                    <mat-spinner [diameter]=\"24\"></mat-spinner>\n                </div>\n            </div>\n        </div>\n        <div class=\"tree-offset\" [class.tree-invisible]=\"!treeControl.isExpanded(node)\">\n            <ng-container matTreeNodeOutlet></ng-container>\n        </div>\n    </mat-nested-tree-node>\n</mat-tree>\n", styles: [".padding-12px{padding-left:12px;padding-right:12px}.padding-12px:hover{cursor:pointer}.border-radius{border-radius:8px}.tree-offset{margin-left:20px}.tree-invisible{display:none}.mat-tree-node{min-height:0!important}.min-node-height{min-height:40px!important}.width-100{width:100%}.spinner-margin{margin:8px}\n"] }]
@@ -6650,7 +6838,7 @@ FilterFieldTabbedCaseViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersio
             deps: [AllowedNetsServiceFactory] },
         { provide: NAE_SEARCH_CATEGORIES, useFactory: searchCategoryConverter, deps: [CategoryResolverService, NAE_TAB_DATA, NAE_DEFAULT_CASE_SEARCH_CATEGORIES, NAE_DEFAULT_TASK_SEARCH_CATEGORIES] },
         { provide: NAE_NEW_CASE_CONFIGURATION, useFactory: newCaseConfigFactory, deps: [NAE_TAB_DATA] }
-    ], viewQueries: [{ propertyName: "caseHeaderComponent", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"case-view-container min-height-custom\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n    <div class=\"full-height transform-div custom-scrollbar\" [ngClass]=\"{'overflow-div': getOverflowStatus()}\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n        <div class=\"full-height transform-div max-width-fix\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n            <nc-header #header [type]=\"headerType\" [maxHeaderColumns]=\"7\" [responsiveHeaders]=\"true\" class=\"case-header-padding\" [ngStyle]=\"{'width': getWidth()}\"></nc-header>\n\n            <nc-case-list [selectedHeaders$]=\"selectedHeaders$\" [showDeleteMenu]=\"true\" [width]=\"getWidth()\"\n                          (caseClick)=\"handleCaseClick($event)\" [responsiveBody]=\"true\" fxFlex [textEllipsis]=\"true\" [redirectEnabled]=\"true\"></nc-case-list>\n        </div>\n    </div>\n</div>\n", styles: [".case-view-container{margin:8px;height:calc(100% - 16px);overflow:auto}.case-view-search-container{padding:8px}.case-header-padding{padding-bottom:8px;padding-top:8px}.font-size-20{font-size:20px}.search-width{width:100%}.full-height{height:100%}.overflow-div{overflow-x:scroll}.transform-div{transform:rotateX(180deg);-ms-transform:rotateX(180deg);-webkit-transform:rotateX(180deg)}.custom-scrollbar::-webkit-scrollbar{width:15px;height:15px;cursor:pointer}.max-width-fix{max-width:calc(100% - 8px)!important}.min-height-custom{min-height:400px;height:400px}\n"], components: [{ type: HeaderComponent, selector: "nc-header" }, { type: CaseListComponent, selector: "nc-case-list" }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7$1.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
+    ], viewQueries: [{ propertyName: "caseHeaderComponent", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"case-view-container min-height-custom\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n    <div class=\"full-height transform-div custom-scrollbar\" [ngClass]=\"{'overflow-div': getOverflowStatus()}\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n        <div class=\"full-height transform-div max-width-fix\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n            <nc-header #header [type]=\"headerType\" [maxHeaderColumns]=\"7\" [responsiveHeaders]=\"true\" class=\"case-header-padding\" [ngStyle]=\"{'width': getWidth()}\"></nc-header>\n\n            <nc-case-list [selectedHeaders$]=\"selectedHeaders$\" [showDeleteMenu]=\"true\" [width]=\"getWidth()\"\n                          (caseClick)=\"handleCaseClick($event)\" [responsiveBody]=\"true\" fxFlex [textEllipsis]=\"true\" [redirectEnabled]=\"true\"></nc-case-list>\n        </div>\n    </div>\n</div>\n", styles: [".case-view-container{margin:8px;height:calc(100% - 16px);overflow:auto}.case-view-search-container{padding:8px}.case-header-padding{padding-bottom:8px;padding-top:8px}.font-size-20{font-size:20px}.search-width{width:100%}.full-height{height:100%}.overflow-div{overflow-x:scroll}.transform-div{transform:rotateX(180deg);-ms-transform:rotateX(180deg);-webkit-transform:rotateX(180deg)}.custom-scrollbar::-webkit-scrollbar{width:15px;height:15px;cursor:pointer}.max-width-fix{max-width:calc(100% - 8px)!important}.min-height-custom{min-height:400px;height:400px}\n"], components: [{ type: HeaderComponent, selector: "nc-header" }, { type: CaseListComponent, selector: "nc-case-list" }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i4$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6$2.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterFieldTabbedCaseViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-filter-field-tabbed-case-view', providers: [
@@ -6896,7 +7084,7 @@ class NewCaseDialogComponent {
         return this._notInitialized$.asObservable();
     }
     displayFn(process) {
-        return process && process.viewValue ? process.viewValue : '';
+        return (process === null || process === void 0 ? void 0 : process.viewValue) ? process === null || process === void 0 ? void 0 : process.viewValue : '';
     }
     createNewCase() {
         if (this.loadingSubmit.value) {
@@ -7004,7 +7192,8 @@ class NewCaseDialogComponent {
         return this.isCaseTitleEnabled() && !!((_c = (_b = (_a = this._injectedData) === null || _a === void 0 ? void 0 : _a.newCaseCreationConfiguration) === null || _b === void 0 ? void 0 : _b.isCaseTitleRequired) !== null && _c !== void 0 ? _c : true);
     }
     showVersion(option) {
-        if (option !== undefined && option.value !== undefined && option.value.version !== undefined)
+        var _a;
+        if (((_a = option === null || option === void 0 ? void 0 : option.value) === null || _a === void 0 ? void 0 : _a.version) !== undefined)
             this.netVersion = option.value.version;
     }
     checkVersion(viewValue) {
@@ -7014,7 +7203,7 @@ class NewCaseDialogComponent {
         }
     }
     toNextStep(viewValue) {
-        if (viewValue !== null && viewValue.value !== undefined) {
+        if (viewValue !== null && (viewValue === null || viewValue === void 0 ? void 0 : viewValue.value) !== undefined) {
             this.stepper1.next();
         }
     }
@@ -7167,7 +7356,7 @@ UserImpersonateDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                 `${UserImpersonationConstants.IMPERSONATION_CONFIG_NET_IDENTIFIER}-${UserImpersonationConstants.IMPERSONATION_CONFIG_FIELD_AUTHS}`,
             ]
         }
-    ], viewQueries: [{ propertyName: "caseHeaderComponent", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mat-dialog-title\" fxLayout=\"column\" fxLayoutAlign=\"center none\">\n    {{ 'side-menu.impersonation.title' | translate  }}\n</div>\n<div mat-dialog-content class=\"load-filter-container side-menu-root\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n    <nc-header #header [type]=\"headerType\" [maxHeaderColumns]=\"3\" [responsiveHeaders]=\"true\" [hideHeaderMenu]=\"true\" class=\"case-header-padding\" [ngStyle]=\"{'width': getWidth()}\"></nc-header>\n    <nc-case-list [selectedHeaders$]=\"selectedHeaders$\" [showDeleteMenu]=\"false\" [width]=\"getWidth()\"\n                  (caseClick)=\"handleCaseClick($event)\" [responsiveBody]=\"true\" fxFlex [textEllipsis]=\"true\" class=\"virtual-scroll-list-padding\"></nc-case-list>\n</div>\n\n", styles: [".load-filter-container{height:calc(100% - 64px);padding-left:8px;padding-right:8px}.case-header-padding{padding-top:4px}.virtual-scroll-list-padding{padding-right:4px}\n"], components: [{ type: HeaderComponent, selector: "nc-header" }, { type: CaseListComponent, selector: "nc-case-list" }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "translate": i1$2.TranslatePipe } });
+    ], viewQueries: [{ propertyName: "caseHeaderComponent", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mat-dialog-title\" fxLayout=\"column\" fxLayoutAlign=\"center none\">\n    {{ 'side-menu.impersonation.title' | translate  }}\n</div>\n<div mat-dialog-content class=\"load-filter-container side-menu-root\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n    <nc-header #header [type]=\"headerType\" [maxHeaderColumns]=\"3\" [responsiveHeaders]=\"true\" [hideHeaderMenu]=\"true\" class=\"case-header-padding\" [ngStyle]=\"{'width': getWidth()}\"></nc-header>\n    <nc-case-list [selectedHeaders$]=\"selectedHeaders$\" [showDeleteMenu]=\"false\" [width]=\"getWidth()\"\n                  (caseClick)=\"handleCaseClick($event)\" [responsiveBody]=\"true\" fxFlex [textEllipsis]=\"true\" class=\"virtual-scroll-list-padding\"></nc-case-list>\n</div>\n\n", styles: [".load-filter-container{height:calc(100% - 64px);padding-left:8px;padding-right:8px}.case-header-padding{padding-top:4px}.virtual-scroll-list-padding{padding-right:4px}\n"], components: [{ type: HeaderComponent, selector: "nc-header" }, { type: CaseListComponent, selector: "nc-case-list" }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: UserImpersonateDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-user-impersonate-dialog', providers: [
@@ -7230,7 +7419,7 @@ class FilterSelectorDialogComponent {
         const filterConstraints = this._data;
         let caseFilters = [];
         let taskFilters = [];
-        if (filterConstraints && filterConstraints.filterIdsConstraint) {
+        if (filterConstraints === null || filterConstraints === void 0 ? void 0 : filterConstraints.filterIdsConstraint) {
             const filters = this._filterRepository.getFilters(filterConstraints.filterIdsConstraint);
             filters.forEach(filter => {
                 if (filter.type === FilterType.CASE &&
@@ -7244,13 +7433,11 @@ class FilterSelectorDialogComponent {
             });
         }
         else {
-            if (!filterConstraints ||
-                !filterConstraints.filterTypeConstraint ||
-                filterConstraints.filterTypeConstraint === FilterType.CASE) {
+            if (!(filterConstraints === null || filterConstraints === void 0 ? void 0 : filterConstraints.filterTypeConstraint) ||
+                (filterConstraints === null || filterConstraints === void 0 ? void 0 : filterConstraints.filterTypeConstraint) === FilterType.CASE) {
                 caseFilters = this._filterRepository.getFilters(this._filterRepository.getCaseFilterList());
             }
-            if (!filterConstraints ||
-                !filterConstraints.filterTypeConstraint ||
+            if (!(filterConstraints === null || filterConstraints === void 0 ? void 0 : filterConstraints.filterTypeConstraint) ||
                 filterConstraints.filterTypeConstraint === FilterType.TASK) {
                 taskFilters = this._filterRepository.getFilters(this._filterRepository.getTaskFilterList());
             }
@@ -7408,7 +7595,7 @@ LoadFilterDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             provide: NAE_DEFAULT_HEADERS,
             useValue: ['meta-title', `${UserFilterConstants.FILTER_NET_IDENTIFIER}-${UserFilterConstants.FILTER_FIELD_ID}`]
         }
-    ], viewQueries: [{ propertyName: "caseHeaderComponent", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mat-dialog-title\" fxLayout=\"column\" fxLayoutAlign=\"center none\">\n    {{ 'search.tooltip.load' | translate  }}\n</div>\n<div mat-dialog-content class=\"load-filter-container side-menu-root\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n    <nc-header #header [type]=\"headerType\" [maxHeaderColumns]=\"2\" [responsiveHeaders]=\"true\" [hideHeaderMenu]=\"true\" class=\"case-header-padding\" [ngStyle]=\"{'width': getWidth()}\"></nc-header>\n    <nc-case-list [selectedHeaders$]=\"selectedHeaders$\" [showDeleteMenu]=\"false\" [width]=\"getWidth()\"\n                  (caseClick)=\"handleCaseClick($event)\" [responsiveBody]=\"true\" fxFlex [textEllipsis]=\"true\" class=\"virtual-scroll-list-padding\"></nc-case-list>\n</div>\n\n", styles: [".load-filter-container{height:calc(100% - 64px);padding-left:8px;padding-right:8px;margin:0}.case-header-padding{padding-top:4px}.virtual-scroll-list-padding{padding-right:1px;margin-left:-1px}\n"], components: [{ type: HeaderComponent, selector: "nc-header" }, { type: CaseListComponent, selector: "nc-case-list" }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7$1.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "translate": i1$2.TranslatePipe } });
+    ], viewQueries: [{ propertyName: "caseHeaderComponent", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mat-dialog-title\" fxLayout=\"column\" fxLayoutAlign=\"center none\">\n    {{ 'search.tooltip.load' | translate  }}\n</div>\n<div mat-dialog-content class=\"load-filter-container side-menu-root\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n    <nc-header #header [type]=\"headerType\" [maxHeaderColumns]=\"2\" [responsiveHeaders]=\"true\" [hideHeaderMenu]=\"true\" class=\"case-header-padding\" [ngStyle]=\"{'width': getWidth()}\"></nc-header>\n    <nc-case-list [selectedHeaders$]=\"selectedHeaders$\" [showDeleteMenu]=\"false\" [width]=\"getWidth()\"\n                  (caseClick)=\"handleCaseClick($event)\" [responsiveBody]=\"true\" fxFlex [textEllipsis]=\"true\" class=\"virtual-scroll-list-padding\"></nc-case-list>\n</div>\n\n", styles: [".load-filter-container{height:calc(100% - 64px);padding-left:8px;padding-right:8px;margin:0}.case-header-padding{padding-top:4px}.virtual-scroll-list-padding{padding-right:1px;margin-left:-1px}\n"], components: [{ type: HeaderComponent, selector: "nc-header" }, { type: CaseListComponent, selector: "nc-case-list" }], directives: [{ type: i6$1.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { type: i6$1.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { type: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i4$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6$2.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i6$1.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }], pipes: { "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LoadFilterDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-load-filter-dialog', providers: [
@@ -7657,6 +7844,8 @@ DialogComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         TaskViewDialogComponent] });
 DialogComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogComponentsModule, providers: [
         { provide: NAE_USER_ASSIGN_DIALOG_COMPONENT, useValue: UserAssignDialogComponent },
+        { provide: NAE_IMPORT_NET_DIALOG_COMPONENT, useValue: ImportNetDialogComponent },
+        { provide: NAE_MULTI_USER_ASSIGN_DIALOG_COMPONENT, useValue: MultiUserAssignDialogComponent },
         { provide: NAE_ADMIN_IMPERSONATE_DIALOG_COMPONENT, useValue: AdminImpersonateDialogComponent },
         { provide: NAE_USER_IMPERSONATE_DIALOG_COMPONENT, useValue: UserImpersonateDialogComponent },
         { provide: NAE_NEW_CASE_DIALOG_COMPONENT, useValue: NewCaseDialogComponent },
@@ -7742,6 +7931,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     ],
                     providers: [
                         { provide: NAE_USER_ASSIGN_DIALOG_COMPONENT, useValue: UserAssignDialogComponent },
+                        { provide: NAE_IMPORT_NET_DIALOG_COMPONENT, useValue: ImportNetDialogComponent },
+                        { provide: NAE_MULTI_USER_ASSIGN_DIALOG_COMPONENT, useValue: MultiUserAssignDialogComponent },
                         { provide: NAE_ADMIN_IMPERSONATE_DIALOG_COMPONENT, useValue: AdminImpersonateDialogComponent },
                         { provide: NAE_USER_IMPERSONATE_DIALOG_COMPONENT, useValue: UserImpersonateDialogComponent },
                         { provide: NAE_NEW_CASE_DIALOG_COMPONENT, useValue: NewCaseDialogComponent },