@netgrif/components 6.3.0-rc.8 → 6.3.0

package/fesm2020/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, Injector, Injectable } from '@angular/core';
+import { Component, NgModule, Input, EventEmitter, Output, Optional, Inject, forwardRef, ViewChild, ViewEncapsulation, SkipSelf, Self, Injector, 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, BOOLEAN_VALUE_LABEL_ENABLED, NAE_INFORM_ABOUT_INVALID_DATA, AbstractButtonFieldComponent, AbstractDateFieldComponent, DATE_FORMAT, AbstractDateTimeFieldComponent, DATE_TIME_FORMAT, AbstractEnumerationAutocompleteDynamicFieldComponent, AbstractEnumerationAutocompleteSelectFieldComponent, AbstractEnumerationListFieldComponent, AbstractEnumerationStepperFieldComponent, AbstractEnumerationIconFieldComponent, AbstractEnumerationSelectFieldComponent, AbstractEnumerationFieldComponent, FilePreviewType, AbstractFileFieldComponent, AbstractFileListFieldComponent, AbstractMultichoiceAutocompleteFieldComponentComponent, AbstractMultichoiceListFieldComponent, AbstractMultichoiceSelectFieldComponent, AbstractMultichoiceFieldComponent, AbstractCurrencyNumberFieldComponent, AbstractDefaultNumberFieldComponent, AbstractNumberFieldComponent, AbstractPasswordTextFieldComponent, AbstractTextareaFieldComponent, AbstractRichTextareaFieldComponent, AbstractHtmlTextareaFieldComponent, AbstractSimpleTextFieldComponent, AbstractTextFieldComponent, AbstractUserAssignItemComponent, AbstractUserAssignListComponent, AbstractUserAssignComponent, NAE_SIDE_MENU_CONTROL, UserListService, AbstractUserFieldComponent, 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, AbstractFilterFieldComponent, CovalentModule, UtilityModule, NAE_USER_ASSIGN_COMPONENT, AbstractI18nDividerFieldComponent, AbstractI18nTextFieldComponent, AbstractI18nFieldComponent, AbstractMultiUserAssignItemComponent, AbstractMultiUserAssignListComponent, AbstractMultiUserAssignComponent, AbstractUserListFieldComponent, CurrencyModule, CustomDateAdapter, AbstractLegalNoticeComponent, AbstractEmailSubmissionFormComponent, AbstractLoginFormComponent, AbstractRegistrationFormComponent, NAE_MIN_PASSWORD_LENGTH, AbstractForgottenPasswordComponent, AbstractChangePasswordComponent, ProfileModule, AbstractSortModeComponent, AbstractSearchModeComponent, AbstractEditModeComponent, AbstractLoadingModeComponent, AbstractHeaderComponent, CaseHeaderService, TaskHeaderService, WorkflowHeaderService, HeaderSearchService, AbstractLanguageSelectorComponent, AbstractInternalLinkComponent, AbstractLogoutShortcutComponent, AbstractQuickPanelComponent, AbstractUserCardComponent, AbstractNavigationTreeComponent, AbstractNavigationDrawerComponent, AbstractNavigationRailComponent, AbstractGroupNavigationComponentResolverComponent, navigationItemTaskFilterFactory, navigationItemTaskAllowedNetsServiceFactory, navigationItemTaskCategoryFactory, 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, AbstractPanelComponent, AbstractImmediateFilterTextContentComponent, NAE_FILTER_TEXT, AbstractImmediateFilterTextComponent, AbstractPanelItemComponent, AbstractCasePanelComponent, AbstractCaseListComponent, NAE_TAB_DATA, AbstractTabbedCaseViewComponent, CaseViewService, ViewIdService, FilterExtractionService, BaseAllowedNetsService, AbstractFieldComponentResolverComponent, AbstractTaskContentComponent, NAE_ASYNC_RENDERING_CONFIGURATION, AbstractTaskPanelComponent, TaskContentService, NAE_TASK_OPERATIONS, NAE_TASK_PANEL_DISABLE_BUTTON_FUNCTIONS, SingleTaskContentService, TaskDataService, TaskEventService, AssignTaskService, DelegateTaskService, CancelTaskService, FinishTaskService, TaskRequestStateService, DataFocusPolicyService, AssignPolicyService, FinishPolicyService, ChangedFieldsService, SubjectTaskOperations, AbstractTaskListComponent, AbstractTabbedTaskViewComponent, TaskViewService, tabbedAllowedNetsServiceFactory, NAE_TASK_VIEW_CONFIGURATION, tabbedTaskViewConfigurationFactory, AbstractTabCreationDetectorComponent, AbstractTabViewComponent, extractIconAndTitle, NAE_VIEW_ID_SEGMENT, groupNavigationViewIdSegmentFactory, AbstractTaskViewComponent, GroupNavigationComponentResolverService, extractFilterFromData, defaultCaseSearchCategoriesFactory, defaultTaskSearchCategoriesFactory, DefaultSearchCategoriesModule, AbstractWorkflowPanelComponent, SnackBarModule, AbstractTaskListPaginationComponent, AbstractSingleTaskComponent, AbstractCaseListPaginatorComponent, AbstractNavigationDoubleDrawerComponent, AbstractBreadcrumbsComponent, 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_DEFAULT_HEADERS, NAE_LOAD_FILTER_COMPONENT, ImpersonationUserListService, NAE_ADMIN_IMPERSONATE_COMPONENT, UserImpersonationConstants, AbstractUserImpersonateComponent, NAE_USER_IMPERSONATE_COMPONENT, AbstractSideMenuContainerComponent, AbstractToolbarComponent, AbstractProfileComponent, AbstractWorkflowViewComponent, WorkflowViewService, AbstractAddChildNodeComponent, AbstractRemoveNodeComponent, AbstractTreeComponent, CaseTreeService, AbstractTreeTaskContentComponent, UnlimitedTaskContentService, TreeTaskContentService, SelectedCaseService } from '@netgrif/components-core';
+import { AbstractRoleAssignmentComponent, RoleAssignmentService, AbstractLdapGroupRoleAssignmentComponent, RoleAssignmentLdapGroupService, AbstractUserInviteComponent, MaterialModule, TranslateLibModule, AbstractAuthenticationOverlayComponent, AbstractSessionIdleComponent, AbstractIframeCardComponent, AbstractCountCardComponent, AbstractCustomCardComponent, DashboardSingleData, DashboardMultiData, AbstractDashboardContentComponent, AbstractDataFieldTemplateComponent, AbstractBooleanFieldComponent, BOOLEAN_VALUE_LABEL_ENABLED, NAE_INFORM_ABOUT_INVALID_DATA, AbstractButtonFieldComponent, AbstractDateFieldComponent, DATE_FORMAT, AbstractDateTimeFieldComponent, DATE_TIME_FORMAT, AbstractEnumerationAutocompleteDynamicFieldComponent, AbstractEnumerationAutocompleteSelectFieldComponent, AbstractEnumerationListFieldComponent, AbstractEnumerationStepperFieldComponent, AbstractEnumerationIconFieldComponent, AbstractEnumerationSelectFieldComponent, AbstractEnumerationFieldComponent, FilePreviewType, AbstractFileFieldComponent, AbstractFileListFieldComponent, AbstractMultichoiceAutocompleteFieldComponentComponent, AbstractMultichoiceListFieldComponent, AbstractMultichoiceSelectFieldComponent, AbstractMultichoiceFieldComponent, AbstractCurrencyNumberFieldComponent, AbstractDefaultNumberFieldComponent, AbstractNumberFieldComponent, AbstractPasswordTextFieldComponent, AbstractTextareaFieldComponent, AbstractRichTextareaFieldComponent, AbstractHtmlTextareaFieldComponent, AbstractDashboardLineChartTextFieldComponent, AbstractDashboardPieChartTextFieldComponent, AbstractDashboardBarChartTextFieldComponent, AbstractSimpleTextFieldComponent, AbstractDashboardIframeTextFieldComponent, AbstractDashboardPortalTextFieldComponent, AbstractTextFieldComponent, TextFieldComponent as TextFieldComponent$1, AbstractUserAssignItemComponent, AbstractUserAssignListComponent, AbstractUserAssignComponent, NAE_SIDE_MENU_CONTROL, UserListService, AbstractUserFieldComponent, 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, AbstractFilterFieldTabViewContentComponent, AbstractFilterFieldComponent, Dashboard, CovalentModule, UtilityModule, NAE_USER_ASSIGN_COMPONENT, AbstractI18nDividerFieldComponent, AbstractI18nTextFieldComponent, AbstractI18nFieldComponent, AbstractMultiUserAssignItemComponent, AbstractMultiUserAssignListComponent, AbstractMultiUserAssignComponent, AbstractUserListFieldComponent, AbstractTaskRefDashboardTileComponent, NAE_TASK_OPERATIONS, TaskContentService, UnlimitedTaskContentService, AbstractTaskRefFieldComponent, CurrencyModule, CustomDateAdapter, AbstractLegalNoticeComponent, AbstractEmailSubmissionFormComponent, AbstractLoginFormComponent, AbstractRegistrationFormComponent, NAE_MIN_PASSWORD_LENGTH, AbstractForgottenPasswordComponent, AbstractChangePasswordComponent, ProfileModule, AbstractSortModeComponent, AbstractSearchModeComponent, AbstractEditModeComponent, AbstractLoadingModeComponent, AbstractHeaderComponent, CaseHeaderService, TaskHeaderService, WorkflowHeaderService, HeaderSearchService, AbstractLanguageSelectorComponent, AbstractInternalLinkComponent, AbstractLogoutShortcutComponent, AbstractQuickPanelComponent, AbstractUserCardComponent, AbstractNavigationTreeComponent, AbstractNavigationDrawerComponent, AbstractNavigationRailComponent, AbstractGroupNavigationComponentResolverComponent, navigationItemTaskFilterFactory, navigationItemTaskAllowedNetsServiceFactory, navigationItemTaskCategoryFactory, 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, AbstractPanelComponent, AbstractImmediateFilterTextContentComponent, NAE_FILTER_TEXT, AbstractImmediateFilterTextComponent, AbstractPanelItemComponent, AbstractCasePanelComponent, AbstractCaseListComponent, NAE_TAB_DATA, AbstractTabbedCaseViewComponent, CaseViewService, ViewIdService, FilterExtractionService, BaseAllowedNetsService, AbstractFieldComponentResolverComponent, AbstractTaskContentComponent, NAE_ASYNC_RENDERING_CONFIGURATION, AbstractTaskPanelComponent, NAE_TASK_PANEL_DISABLE_BUTTON_FUNCTIONS, NAE_TASK_FORCE_OPEN, SingleTaskContentService, TaskDataService, TaskEventService, AssignTaskService, DelegateTaskService, CancelTaskService, FinishTaskService, TaskRequestStateService, DataFocusPolicyService, AssignPolicyService, FinishPolicyService, ChangedFieldsService, SubjectTaskOperations, AbstractTaskListComponent, AbstractTabbedTaskViewComponent, TaskViewService, tabbedAllowedNetsServiceFactory, NAE_TASK_VIEW_CONFIGURATION, tabbedTaskViewConfigurationFactory, AbstractTabCreationDetectorComponent, AbstractTabViewComponent, extractIconAndTitle, NAE_VIEW_ID_SEGMENT, groupNavigationViewIdSegmentFactory, AbstractTaskViewComponent, GroupNavigationComponentResolverService, extractFilterFromData, defaultCaseSearchCategoriesFactory, defaultTaskSearchCategoriesFactory, DefaultSearchCategoriesModule, AbstractWorkflowPanelComponent, SnackBarModule, AbstractTaskListPaginationComponent, AbstractSingleTaskComponent, AbstractCaseListPaginatorComponent, AbstractNavigationDoubleDrawerComponent, AbstractBreadcrumbsComponent, 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_DEFAULT_HEADERS, NAE_LOAD_FILTER_COMPONENT, ImpersonationUserListService, NAE_ADMIN_IMPERSONATE_COMPONENT, UserImpersonationConstants, AbstractUserImpersonateComponent, NAE_USER_IMPERSONATE_COMPONENT, AbstractSideMenuContainerComponent, AbstractToolbarComponent, AbstractProfileComponent, AbstractWorkflowViewComponent, WorkflowViewService, AbstractAddChildNodeComponent, AbstractRemoveNodeComponent, AbstractTreeComponent, CaseTreeService, AbstractTreeTaskContentComponent, TreeTaskContentService, SelectedCaseService, NAE_NEW_CASE_CREATION_CONFIGURATION_DATA, OverflowService, NAE_NEW_CASE_CONFIGURATION, AbstractFilterFieldTabViewComponent } from '@netgrif/components-core';
 import * as i2 from '@angular/material/toolbar';
 import * as i3 from '@angular/material/icon';
 import * as i2$1 from '@angular/material/form-field';
@@ -13,6 +13,7 @@ import * as i3$1 from '@angular/cdk/scrolling';
 import * as i5 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import * as i9 from '@angular/material/expansion';
+import { MatExpansionModule } from '@angular/material/expansion';
 import * as i10 from '@angular/material/progress-bar';
 import * as i11 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
@@ -62,22 +63,22 @@ import * as i3$8 from 'ngx-quill';
 import { QuillModule } from 'ngx-quill';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import * as i3$9 from '@angular/flex-layout/grid';
 import * as i1$3 from '@angular/material/sort';
 import * as i8 from '@angular/material/menu';
 import 'hammerjs';
 import * as i1$4 from '@angular/cdk/layout';
-import * as i3$a from '@angular/material/sidenav';
+import * as i3$b from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import * as i3$9 from '@angular/material/tree';
+import * as i3$a from '@angular/material/tree';
 import * as i10$1 from 'angular-resizable-element';
 import { ResizableModule } from 'angular-resizable-element';
-import * as i8$1 from '@angular/flex-layout/grid';
 import * as i2$6 from '@angular/material/tabs';
 import { MatTabsModule } from '@angular/material/tabs';
-import * as i8$2 from '@angular/material/badge';
+import * as i8$1 from '@angular/material/badge';
 import * as i6$3 from '@angular/material/paginator';
 import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
-import * as i3$b from 'angular2-hotkeys';
+import * as i3$c from 'angular2-hotkeys';
 import { HotkeyModule } from 'angular2-hotkeys';
 import * as i5$5 from '@angular/material/stepper';
 
@@ -265,10 +266,10 @@ class IframeCardComponent extends AbstractIframeCardComponent {
     }
 }
 IframeCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: IframeCardComponent, deps: [{ token: i3$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
-IframeCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IframeCardComponent, selector: "nc-iframe-card", usesInheritance: true, ngImport: i0, template: "<mat-card class=\"dashboard-card\" fxLayout=\"row\" fxLayoutAlign=\"start start\">\n    <iframe [src]=\"sanitizedURL\" fxFlex=\"100\" class=\"full-size\" title=\"Dashboard embedded content\"></iframe>\n</mat-card>\n", styles: [".dashboard-card{width:calc(100% - 16px);height:calc(100% - 16px);margin:8px}.full-size{width:100%;height:100%;margin:0;padding:0}\n"], components: [{ type: i3$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }], directives: [{ type: i6$2.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.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.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"] }] });
+IframeCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: IframeCardComponent, selector: "nc-iframe-card", usesInheritance: true, ngImport: i0, template: "<mat-card class=\"dashboard-card\" fxLayout=\"row\" fxLayoutAlign=\"start start\">\n    <iframe [src]=\"sanitizedURL\" fxFlex=\"100\" class=\"full-size dashboard-iframe-card\"\n            title=\"Dashboard embedded content\"></iframe>\n</mat-card>\n", styles: [".dashboard-card{width:calc(100% - 16px);height:calc(100% - 16px);margin:8px}.full-size{width:100%;height:100%;margin:0;padding:0}\n"], components: [{ type: i3$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }], directives: [{ type: i6$2.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.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.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: IframeCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nc-iframe-card', template: "<mat-card class=\"dashboard-card\" fxLayout=\"row\" fxLayoutAlign=\"start start\">\n    <iframe [src]=\"sanitizedURL\" fxFlex=\"100\" class=\"full-size\" title=\"Dashboard embedded content\"></iframe>\n</mat-card>\n", styles: [".dashboard-card{width:calc(100% - 16px);height:calc(100% - 16px);margin:8px}.full-size{width:100%;height:100%;margin:0;padding:0}\n"] }]
+            args: [{ selector: 'nc-iframe-card', template: "<mat-card class=\"dashboard-card\" fxLayout=\"row\" fxLayoutAlign=\"start start\">\n    <iframe [src]=\"sanitizedURL\" fxFlex=\"100\" class=\"full-size dashboard-iframe-card\"\n            title=\"Dashboard embedded content\"></iframe>\n</mat-card>\n", styles: [".dashboard-card{width:calc(100% - 16px);height:calc(100% - 16px);margin:8px}.full-size{width:100%;height:100%;margin:0;padding:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i3$3.DomSanitizer }]; } });
 
 class CountCardComponent extends AbstractCountCardComponent {
@@ -339,10 +340,10 @@ class PieChartCardComponent extends AbstractCustomCardComponent {
     }
 }
 PieChartCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PieChartCardComponent, deps: [{ token: i0.Injector }, { token: i1.DashboardResourceService }, { token: i2$2.TranslateService }, { token: i1.LoggerService }], target: i0.ɵɵFactoryTarget.Component });
-PieChartCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PieChartCardComponent, selector: "nc-pie-chart-card", outputs: { selectEvent: "selectEvent" }, usesInheritance: true, ngImport: i0, template: "<mat-card class=\"dashboard-card custom-mat-card\" fxLayout=\"row\" fxLayoutAlign=\"start start\">\n    <ngx-charts-pie-chart class=\"custom-chart\"\n                          [scheme]=\"colorScheme\"\n                          [results]=\"single\"\n                          [gradient]=\"gradient\"\n                          [legend]=\"showLegend\"\n                          [legendPosition]=\"legendPosition\"\n                          [labels]=\"showLabels\"\n                          [doughnut]=\"isDoughnut\"\n                          (select)=\"onSelect($event)\"\n    >\n    </ngx-charts-pie-chart>\n</mat-card>\n", styles: [".custom-mat-card{padding-left:0;padding-top:0}.dashboard-card{width:calc(100% - 16px);height:calc(100% - 16px);margin:8px}.full-size{width:100%;height:100%;margin:0;padding:0}.custom-chart{width:90%;height:90%}\n"], components: [{ type: i3$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i4.PieChartComponent, selector: "ngx-charts-pie-chart", inputs: ["labels", "legend", "legendTitle", "legendPosition", "explodeSlices", "doughnut", "arcWidth", "gradient", "activeEntries", "tooltipDisabled", "labelFormatting", "trimLabels", "maxLabelLength", "tooltipText", "margins"], outputs: ["dblclick", "select", "activate", "deactivate"] }], directives: [{ type: i6$2.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.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"] }] });
+PieChartCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PieChartCardComponent, selector: "nc-pie-chart-card", outputs: { selectEvent: "selectEvent" }, usesInheritance: true, ngImport: i0, template: "<mat-card class=\"dashboard-card custom-mat-card\" fxLayout=\"row\" fxLayoutAlign=\"start start\">\n    <ngx-charts-pie-chart class=\"custom-chart dashboard-pie-chart\"\n                          [scheme]=\"colorScheme\"\n                          [results]=\"single\"\n                          [gradient]=\"gradient\"\n                          [legend]=\"showLegend\"\n                          [legendPosition]=\"legendPosition\"\n                          [labels]=\"showLabels\"\n                          [doughnut]=\"isDoughnut\"\n                          [legendTitle]=\"card.title\"\n                          (select)=\"onSelect($event)\">\n    </ngx-charts-pie-chart>\n</mat-card>\n", styles: [".custom-mat-card{padding-left:0;padding-top:0}.dashboard-card{width:calc(100% - 16px);height:calc(100% - 16px);margin:8px}.full-size{width:100%;height:100%;margin:0;padding:0}.custom-chart{width:90%;height:90%}\n"], components: [{ type: i3$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i4.PieChartComponent, selector: "ngx-charts-pie-chart", inputs: ["labels", "legend", "legendTitle", "legendPosition", "explodeSlices", "doughnut", "arcWidth", "gradient", "activeEntries", "tooltipDisabled", "labelFormatting", "trimLabels", "maxLabelLength", "tooltipText", "margins"], outputs: ["dblclick", "select", "activate", "deactivate"] }], directives: [{ type: i6$2.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.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: PieChartCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nc-pie-chart-card', template: "<mat-card class=\"dashboard-card custom-mat-card\" fxLayout=\"row\" fxLayoutAlign=\"start start\">\n    <ngx-charts-pie-chart class=\"custom-chart\"\n                          [scheme]=\"colorScheme\"\n                          [results]=\"single\"\n                          [gradient]=\"gradient\"\n                          [legend]=\"showLegend\"\n                          [legendPosition]=\"legendPosition\"\n                          [labels]=\"showLabels\"\n                          [doughnut]=\"isDoughnut\"\n                          (select)=\"onSelect($event)\"\n    >\n    </ngx-charts-pie-chart>\n</mat-card>\n", styles: [".custom-mat-card{padding-left:0;padding-top:0}.dashboard-card{width:calc(100% - 16px);height:calc(100% - 16px);margin:8px}.full-size{width:100%;height:100%;margin:0;padding:0}.custom-chart{width:90%;height:90%}\n"] }]
+            args: [{ selector: 'nc-pie-chart-card', template: "<mat-card class=\"dashboard-card custom-mat-card\" fxLayout=\"row\" fxLayoutAlign=\"start start\">\n    <ngx-charts-pie-chart class=\"custom-chart dashboard-pie-chart\"\n                          [scheme]=\"colorScheme\"\n                          [results]=\"single\"\n                          [gradient]=\"gradient\"\n                          [legend]=\"showLegend\"\n                          [legendPosition]=\"legendPosition\"\n                          [labels]=\"showLabels\"\n                          [doughnut]=\"isDoughnut\"\n                          [legendTitle]=\"card.title\"\n                          (select)=\"onSelect($event)\">\n    </ngx-charts-pie-chart>\n</mat-card>\n", styles: [".custom-mat-card{padding-left:0;padding-top:0}.dashboard-card{width:calc(100% - 16px);height:calc(100% - 16px);margin:8px}.full-size{width:100%;height:100%;margin:0;padding:0}.custom-chart{width:90%;height:90%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.DashboardResourceService }, { type: i2$2.TranslateService }, { type: i1.LoggerService }]; }, propDecorators: { selectEvent: [{
                 type: Output
             }] } });
@@ -371,10 +372,10 @@ class BarchartCardComponent extends AbstractCustomCardComponent {
     }
 }
 BarchartCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: BarchartCardComponent, deps: [{ token: i0.Injector }, { token: i1.DashboardResourceService }, { token: i2$2.TranslateService }, { token: i1.LoggerService }], target: i0.ɵɵFactoryTarget.Component });
-BarchartCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: BarchartCardComponent, selector: "nc-barchart-card", outputs: { selectEvent: "selectEvent" }, usesInheritance: true, ngImport: i0, template: "<mat-card class=\"dashboard-card custom-mat-card\" fxLayout=\"row\" fxLayoutAlign=\"start start\">\n    <ngx-charts-bar-vertical class=\"custom-chart\"\n                             [scheme]=\"colorScheme\"\n                             [results]=\"single\"\n                             [gradient]=\"gradient\"\n                             [xAxis]=\"xAxis\"\n                             [yAxis]=\"yAxis\"\n                             [legend]=\"showLegend\"\n                             [showXAxisLabel]=\"showXAxisLabel\"\n                             [showYAxisLabel]=\"showYAxisLabel\"\n                             [xAxisLabel]=\"card.xAxisLabel\"\n                             [yAxisLabel]=\"card.yAxisLabel\"\n                             (select)=\"onSelect($event)\">\n    </ngx-charts-bar-vertical>\n</mat-card>\n", styles: [".dashboard-card{width:calc(100% - 16px);height:calc(100% - 16px);margin:8px}.full-size{width:100%;height:100%;margin:0;padding:0}.custom-chart{width:90%;height:90%}.custom-mat-card{padding-left:0;padding-top:0}\n"], components: [{ type: i3$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i4.BarVerticalComponent, selector: "ngx-charts-bar-vertical", inputs: ["legend", "legendTitle", "legendPosition", "xAxis", "yAxis", "showXAxisLabel", "showYAxisLabel", "xAxisLabel", "yAxisLabel", "tooltipDisabled", "gradient", "showGridLines", "activeEntries", "schemeType", "trimXAxisTicks", "trimYAxisTicks", "rotateXAxisTicks", "maxXAxisTickLength", "maxYAxisTickLength", "xAxisTickFormatting", "yAxisTickFormatting", "xAxisTicks", "yAxisTicks", "barPadding", "roundDomains", "roundEdges", "yScaleMax", "yScaleMin", "showDataLabel", "dataLabelFormatting", "noBarWhenZero"], outputs: ["activate", "deactivate"] }], directives: [{ type: i6$2.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.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"] }] });
+BarchartCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: BarchartCardComponent, selector: "nc-barchart-card", outputs: { selectEvent: "selectEvent" }, usesInheritance: true, ngImport: i0, template: "<mat-card class=\"dashboard-card custom-mat-card\" fxLayout=\"row\" fxLayoutAlign=\"start start\">\n    <ngx-charts-bar-vertical class=\"custom-chart dashboard-bar-chart\"\n                             [scheme]=\"colorScheme\"\n                             [results]=\"single\"\n                             [gradient]=\"gradient\"\n                             [xAxis]=\"xAxis\"\n                             [yAxis]=\"yAxis\"\n                             [legend]=\"showLegend\"\n                             [showXAxisLabel]=\"showXAxisLabel\"\n                             [showYAxisLabel]=\"showYAxisLabel\"\n                             [xAxisLabel]=\"card.xAxisLabel\"\n                             [yAxisLabel]=\"card.yAxisLabel\"\n                             [legendTitle]=\"card.title\"\n                             (select)=\"onSelect($event)\">\n    </ngx-charts-bar-vertical>\n</mat-card>\n", styles: [".dashboard-card{width:calc(100% - 16px);height:calc(100% - 16px);margin:8px}.full-size{width:100%;height:100%;margin:0;padding:0}.custom-chart{width:90%;height:90%}.custom-mat-card{padding-left:0;padding-top:0}\n"], components: [{ type: i3$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i4.BarVerticalComponent, selector: "ngx-charts-bar-vertical", inputs: ["legend", "legendTitle", "legendPosition", "xAxis", "yAxis", "showXAxisLabel", "showYAxisLabel", "xAxisLabel", "yAxisLabel", "tooltipDisabled", "gradient", "showGridLines", "activeEntries", "schemeType", "trimXAxisTicks", "trimYAxisTicks", "rotateXAxisTicks", "maxXAxisTickLength", "maxYAxisTickLength", "xAxisTickFormatting", "yAxisTickFormatting", "xAxisTicks", "yAxisTicks", "barPadding", "roundDomains", "roundEdges", "yScaleMax", "yScaleMin", "showDataLabel", "dataLabelFormatting", "noBarWhenZero"], outputs: ["activate", "deactivate"] }], directives: [{ type: i6$2.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.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: BarchartCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nc-barchart-card', template: "<mat-card class=\"dashboard-card custom-mat-card\" fxLayout=\"row\" fxLayoutAlign=\"start start\">\n    <ngx-charts-bar-vertical class=\"custom-chart\"\n                             [scheme]=\"colorScheme\"\n                             [results]=\"single\"\n                             [gradient]=\"gradient\"\n                             [xAxis]=\"xAxis\"\n                             [yAxis]=\"yAxis\"\n                             [legend]=\"showLegend\"\n                             [showXAxisLabel]=\"showXAxisLabel\"\n                             [showYAxisLabel]=\"showYAxisLabel\"\n                             [xAxisLabel]=\"card.xAxisLabel\"\n                             [yAxisLabel]=\"card.yAxisLabel\"\n                             (select)=\"onSelect($event)\">\n    </ngx-charts-bar-vertical>\n</mat-card>\n", styles: [".dashboard-card{width:calc(100% - 16px);height:calc(100% - 16px);margin:8px}.full-size{width:100%;height:100%;margin:0;padding:0}.custom-chart{width:90%;height:90%}.custom-mat-card{padding-left:0;padding-top:0}\n"] }]
+            args: [{ selector: 'nc-barchart-card', template: "<mat-card class=\"dashboard-card custom-mat-card\" fxLayout=\"row\" fxLayoutAlign=\"start start\">\n    <ngx-charts-bar-vertical class=\"custom-chart dashboard-bar-chart\"\n                             [scheme]=\"colorScheme\"\n                             [results]=\"single\"\n                             [gradient]=\"gradient\"\n                             [xAxis]=\"xAxis\"\n                             [yAxis]=\"yAxis\"\n                             [legend]=\"showLegend\"\n                             [showXAxisLabel]=\"showXAxisLabel\"\n                             [showYAxisLabel]=\"showYAxisLabel\"\n                             [xAxisLabel]=\"card.xAxisLabel\"\n                             [yAxisLabel]=\"card.yAxisLabel\"\n                             [legendTitle]=\"card.title\"\n                             (select)=\"onSelect($event)\">\n    </ngx-charts-bar-vertical>\n</mat-card>\n", styles: [".dashboard-card{width:calc(100% - 16px);height:calc(100% - 16px);margin:8px}.full-size{width:100%;height:100%;margin:0;padding:0}.custom-chart{width:90%;height:90%}.custom-mat-card{padding-left:0;padding-top:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.DashboardResourceService }, { type: i2$2.TranslateService }, { type: i1.LoggerService }]; }, propDecorators: { selectEvent: [{
                 type: Output
             }] } });
@@ -442,10 +443,10 @@ class LineChartCardComponent extends AbstractCustomCardComponent {
     }
 }
 LineChartCardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: LineChartCardComponent, deps: [{ token: i0.Injector }, { token: i1.DashboardResourceService }, { token: i2$2.TranslateService }, { token: i1.LoggerService }], target: i0.ɵɵFactoryTarget.Component });
-LineChartCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: LineChartCardComponent, selector: "nc-line-chart-card", outputs: { selectEvent: "selectEvent" }, usesInheritance: true, ngImport: i0, template: "<mat-card class=\"dashboard-card custom-mat-card\" fxLayout=\"row\" fxLayoutAlign=\"start start\">\n    <ngx-charts-line-chart class=\"custom-chart\"\n                           [legend]=\"showLegend\"\n                           [showXAxisLabel]=\"showXAxisLabel\"\n                           [showYAxisLabel]=\"showYAxisLabel\"\n                           [xAxis]=\"xAxis\"\n                           [yAxis]=\"yAxis\"\n                           [xAxisLabel]=\"card.xAxisLabel\"\n                           [yAxisLabel]=\"card.yAxisLabel\"\n                           [timeline]=\"timeline\"\n                           [results]=\"multi\"\n                           (select)=\"onSelect($event)\"\n    >\n    </ngx-charts-line-chart>\n</mat-card>\n", styles: [".dashboard-card{width:calc(100% - 16px);height:calc(100% - 16px);margin:8px}.full-size{width:100%;height:100%;margin:0;padding:0}.custom-mat-card{padding-left:0;padding-top:0}\n"], components: [{ type: i3$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i4.LineChartComponent, selector: "ngx-charts-line-chart", inputs: ["legend", "legendTitle", "legendPosition", "xAxis", "yAxis", "showXAxisLabel", "showYAxisLabel", "xAxisLabel", "yAxisLabel", "autoScale", "timeline", "gradient", "showGridLines", "curve", "activeEntries", "schemeType", "rangeFillOpacity", "trimXAxisTicks", "trimYAxisTicks", "rotateXAxisTicks", "maxXAxisTickLength", "maxYAxisTickLength", "xAxisTickFormatting", "yAxisTickFormatting", "xAxisTicks", "yAxisTicks", "roundDomains", "tooltipDisabled", "showRefLines", "referenceLines", "showRefLabels", "xScaleMin", "xScaleMax", "yScaleMin", "yScaleMax"], outputs: ["activate", "deactivate"] }], directives: [{ type: i6$2.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.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"] }] });
+LineChartCardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: LineChartCardComponent, selector: "nc-line-chart-card", outputs: { selectEvent: "selectEvent" }, usesInheritance: true, ngImport: i0, template: "<mat-card class=\"dashboard-card custom-mat-card\" fxLayout=\"row\" fxLayoutAlign=\"start start\">\n    <ngx-charts-line-chart class=\"custom-chart dashboard-line-chart\"\n                           [legend]=\"showLegend\"\n                           [showXAxisLabel]=\"showXAxisLabel\"\n                           [showYAxisLabel]=\"showYAxisLabel\"\n                           [xAxis]=\"xAxis\"\n                           [yAxis]=\"yAxis\"\n                           [xAxisLabel]=\"card.xAxisLabel\"\n                           [yAxisLabel]=\"card.yAxisLabel\"\n                           [timeline]=\"timeline\"\n                           [results]=\"multi\"\n                           [legendTitle]=\"card.title\"\n                           (select)=\"onSelect($event)\">\n    </ngx-charts-line-chart>\n</mat-card>\n", styles: [".dashboard-card{width:calc(100% - 16px);height:calc(100% - 16px);margin:8px}.full-size{width:100%;height:100%;margin:0;padding:0}.custom-mat-card{padding-left:0;padding-top:0}\n"], components: [{ type: i3$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: i4.LineChartComponent, selector: "ngx-charts-line-chart", inputs: ["legend", "legendTitle", "legendPosition", "xAxis", "yAxis", "showXAxisLabel", "showYAxisLabel", "xAxisLabel", "yAxisLabel", "autoScale", "timeline", "gradient", "showGridLines", "curve", "activeEntries", "schemeType", "rangeFillOpacity", "trimXAxisTicks", "trimYAxisTicks", "rotateXAxisTicks", "maxXAxisTickLength", "maxYAxisTickLength", "xAxisTickFormatting", "yAxisTickFormatting", "xAxisTicks", "yAxisTicks", "roundDomains", "tooltipDisabled", "showRefLines", "referenceLines", "showRefLabels", "xScaleMin", "xScaleMax", "yScaleMin", "yScaleMax"], outputs: ["activate", "deactivate"] }], directives: [{ type: i6$2.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.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: LineChartCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nc-line-chart-card', template: "<mat-card class=\"dashboard-card custom-mat-card\" fxLayout=\"row\" fxLayoutAlign=\"start start\">\n    <ngx-charts-line-chart class=\"custom-chart\"\n                           [legend]=\"showLegend\"\n                           [showXAxisLabel]=\"showXAxisLabel\"\n                           [showYAxisLabel]=\"showYAxisLabel\"\n                           [xAxis]=\"xAxis\"\n                           [yAxis]=\"yAxis\"\n                           [xAxisLabel]=\"card.xAxisLabel\"\n                           [yAxisLabel]=\"card.yAxisLabel\"\n                           [timeline]=\"timeline\"\n                           [results]=\"multi\"\n                           (select)=\"onSelect($event)\"\n    >\n    </ngx-charts-line-chart>\n</mat-card>\n", styles: [".dashboard-card{width:calc(100% - 16px);height:calc(100% - 16px);margin:8px}.full-size{width:100%;height:100%;margin:0;padding:0}.custom-mat-card{padding-left:0;padding-top:0}\n"] }]
+            args: [{ selector: 'nc-line-chart-card', template: "<mat-card class=\"dashboard-card custom-mat-card\" fxLayout=\"row\" fxLayoutAlign=\"start start\">\n    <ngx-charts-line-chart class=\"custom-chart dashboard-line-chart\"\n                           [legend]=\"showLegend\"\n                           [showXAxisLabel]=\"showXAxisLabel\"\n                           [showYAxisLabel]=\"showYAxisLabel\"\n                           [xAxis]=\"xAxis\"\n                           [yAxis]=\"yAxis\"\n                           [xAxisLabel]=\"card.xAxisLabel\"\n                           [yAxisLabel]=\"card.yAxisLabel\"\n                           [timeline]=\"timeline\"\n                           [results]=\"multi\"\n                           [legendTitle]=\"card.title\"\n                           (select)=\"onSelect($event)\">\n    </ngx-charts-line-chart>\n</mat-card>\n", styles: [".dashboard-card{width:calc(100% - 16px);height:calc(100% - 16px);margin:8px}.full-size{width:100%;height:100%;margin:0;padding:0}.custom-mat-card{padding-left:0;padding-top:0}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i1.DashboardResourceService }, { type: i2$2.TranslateService }, { type: i1.LoggerService }]; }, propDecorators: { selectEvent: [{
                 type: Output
             }] } });
@@ -484,7 +485,8 @@ DashboardComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0"
         PieChartCardComponent,
         LineChartCardComponent,
         BarchartCardComponent,
-        LinearGaugeCardComponent] });
+        LinearGaugeCardComponent,
+        PortalCardComponent] });
 DashboardComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DashboardComponentModule, imports: [[
             CommonModule,
             MaterialModule,
@@ -513,7 +515,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         PieChartCardComponent,
                         LineChartCardComponent,
                         BarchartCardComponent,
-                        LinearGaugeCardComponent
+                        LinearGaugeCardComponent,
+                        PortalCardComponent
                     ],
                     imports: [
                         CommonModule,
@@ -1003,7 +1006,7 @@ EasymdeWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             useExisting: forwardRef(() => EasymdeWrapperComponent),
             multi: true,
         },
-    ], viewQueries: [{ propertyName: "textarea", first: true, predicate: ["easymde"], descendants: true, static: true }], ngImport: i0, template: '<textarea #easymde></textarea>', isInline: true, styles: ["@charset \"UTF-8\";:host ::ng-deep .CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}:host ::ng-deep .CodeMirror-lines{padding:4px 0}:host ::ng-deep .CodeMirror pre.CodeMirror-line,:host ::ng-deep .CodeMirror pre.CodeMirror-line-like{padding:0 4px}:host ::ng-deep .CodeMirror-gutter-filler,:host ::ng-deep .CodeMirror-scrollbar-filler{background-color:#fff}:host ::ng-deep .CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}:host ::ng-deep .CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}:host ::ng-deep .CodeMirror-guttermarker{color:#000}:host ::ng-deep .CodeMirror-guttermarker-subtle{color:#999}:host ::ng-deep .CodeMirror-cursor{border-left:1px solid #000;border-right:none;width:0}:host ::ng-deep .CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}:host ::ng-deep .cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}:host ::ng-deep .cm-fat-cursor div.CodeMirror-cursors{z-index:1}:host ::ng-deep .cm-fat-cursor .CodeMirror-line::selection,:host ::ng-deep .cm-fat-cursor .CodeMirror-line>span::selection,:host ::ng-deep .cm-fat-cursor .CodeMirror-line>span>span::selection{background:0 0}:host ::ng-deep .cm-fat-cursor .CodeMirror-line::-moz-selection,:host ::ng-deep .cm-fat-cursor .CodeMirror-line>span::-moz-selection,:host ::ng-deep .cm-fat-cursor .CodeMirror-line>span>span::-moz-selection{background:0 0}:host ::ng-deep .cm-fat-cursor{caret-color:transparent}@keyframes blink{50%{background-color:transparent}}:host ::ng-deep .cm-tab{display:inline-block;text-decoration:inherit}:host ::ng-deep .CodeMirror-rulers{position:absolute;inset:-50px 0 0;overflow:hidden}:host ::ng-deep .CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}:host ::ng-deep .cm-s-default .cm-header{color:#00f}:host ::ng-deep .cm-s-default .cm-quote{color:#090}:host ::ng-deep .cm-negative{color:#d44}:host ::ng-deep .cm-positive{color:#292}:host ::ng-deep .cm-header,:host ::ng-deep .cm-strong{font-weight:700}:host ::ng-deep .cm-em{font-style:italic}:host ::ng-deep .cm-link{text-decoration:underline}:host ::ng-deep .cm-strikethrough{text-decoration:line-through}:host ::ng-deep .cm-s-default .cm-keyword{color:#708}:host ::ng-deep .cm-s-default .cm-atom{color:#219}:host ::ng-deep .cm-s-default .cm-number{color:#164}:host ::ng-deep .cm-s-default .cm-def{color:#00f}:host ::ng-deep .cm-s-default .cm-variable-2{color:#05a}:host ::ng-deep .cm-s-default .cm-type,:host ::ng-deep .cm-s-default .cm-variable-3{color:#085}:host ::ng-deep .cm-s-default .cm-comment{color:#a50}:host ::ng-deep .cm-s-default .cm-string{color:#a11}:host ::ng-deep .cm-s-default .cm-string-2{color:#f50}:host ::ng-deep .cm-s-default .cm-meta{color:#555}:host ::ng-deep .cm-s-default .cm-qualifier{color:#555}:host ::ng-deep .cm-s-default .cm-builtin{color:#30a}:host ::ng-deep .cm-s-default .cm-bracket{color:#997}:host ::ng-deep .cm-s-default .cm-tag{color:#170}:host ::ng-deep .cm-s-default .cm-attribute{color:#00c}:host ::ng-deep .cm-s-default .cm-hr{color:#999}:host ::ng-deep .cm-s-default .cm-link{color:#00c}:host ::ng-deep .cm-s-default .cm-error{color:red}:host ::ng-deep .cm-invalidchar{color:red}:host ::ng-deep .CodeMirror-composing{border-bottom:2px solid}:host ::ng-deep div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}:host ::ng-deep div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}:host ::ng-deep .CodeMirror-matchingtag{background:rgba(255,150,0,.3)}:host ::ng-deep .CodeMirror-activeline-background{background:#e8f2ff}:host ::ng-deep .CodeMirror{position:relative;overflow:hidden;background:#fff}:host ::ng-deep .CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:0;position:relative}:host ::ng-deep .CodeMirror-sizer{position:relative;border-right:50px solid transparent}:host ::ng-deep .CodeMirror-gutter-filler,:host ::ng-deep .CodeMirror-hscrollbar,:host ::ng-deep .CodeMirror-scrollbar-filler,:host ::ng-deep .CodeMirror-vscrollbar{position:absolute;z-index:6;display:none;outline:0}:host ::ng-deep .CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}:host ::ng-deep .CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}:host ::ng-deep .CodeMirror-scrollbar-filler{right:0;bottom:0}:host ::ng-deep .CodeMirror-gutter-filler{left:0;bottom:0}:host ::ng-deep .CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}:host ::ng-deep .CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}:host ::ng-deep .CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:0 0!important;border:none!important}:host ::ng-deep .CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}:host ::ng-deep .CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}:host ::ng-deep .CodeMirror-gutter-wrapper ::selection{background-color:transparent}:host ::ng-deep .CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}:host ::ng-deep .CodeMirror-lines{cursor:text;min-height:1px}:host ::ng-deep .CodeMirror pre.CodeMirror-line,:host ::ng-deep .CodeMirror pre.CodeMirror-line-like{border-radius:0;border-width:0;background:0 0;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:contextual;font-feature-settings:\"calt\";font-variant-ligatures:contextual}:host ::ng-deep .CodeMirror-wrap pre.CodeMirror-line,:host ::ng-deep .CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}:host ::ng-deep .CodeMirror-linebackground{position:absolute;inset:0;z-index:0}:host ::ng-deep .CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}:host ::ng-deep .CodeMirror-code{outline:0}:host ::ng-deep .CodeMirror-gutter,:host ::ng-deep .CodeMirror-gutters,:host ::ng-deep .CodeMirror-linenumber,:host ::ng-deep .CodeMirror-scroll,:host ::ng-deep .CodeMirror-sizer{box-sizing:content-box}:host ::ng-deep .CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}:host ::ng-deep .CodeMirror-cursor{position:absolute;pointer-events:none}:host ::ng-deep .CodeMirror-measure pre{position:static}:host ::ng-deep div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}:host ::ng-deep div.CodeMirror-dragcursors{visibility:visible}:host ::ng-deep .CodeMirror-focused div.CodeMirror-cursors{visibility:visible}:host ::ng-deep .CodeMirror-selected{background:#d9d9d9}:host ::ng-deep .CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}:host ::ng-deep .CodeMirror-crosshair{cursor:crosshair}:host ::ng-deep .CodeMirror-line::selection,:host ::ng-deep .CodeMirror-line>span::selection,:host ::ng-deep .CodeMirror-line>span>span::selection{background:#d7d4f0}:host ::ng-deep .CodeMirror-line::-moz-selection,:host ::ng-deep .CodeMirror-line>span::-moz-selection,:host ::ng-deep .CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}:host ::ng-deep .cm-searching{background-color:#ffa;background-color:#ff06}:host ::ng-deep .cm-force-border{padding-right:.1px}@media print{:host ::ng-deep .CodeMirror div.CodeMirror-cursors{visibility:hidden}}:host ::ng-deep .cm-tab-wrap-hack:after{content:\"\"}:host ::ng-deep span.CodeMirror-selectedtext{background:0 0}:host ::ng-deep .EasyMDEContainer{display:block}:host ::ng-deep .CodeMirror-rtl pre{direction:rtl}:host ::ng-deep .EasyMDEContainer.sided--no-fullscreen{display:flex;flex-direction:row;flex-wrap:wrap}:host ::ng-deep .EasyMDEContainer .CodeMirror{box-sizing:border-box;height:auto;border:1px solid #ddd;border-bottom-left-radius:4px;border-bottom-right-radius:4px;padding:10px;font:inherit;z-index:0;word-wrap:break-word}:host ::ng-deep .EasyMDEContainer .CodeMirror-scroll{cursor:text}:host ::ng-deep .EasyMDEContainer .CodeMirror-fullscreen{background:#fff;position:fixed!important;inset:50px 0 0;height:auto;z-index:8;border-right:none!important;border-bottom-right-radius:0!important}:host ::ng-deep .EasyMDEContainer .CodeMirror-sided{width:50%!important}:host ::ng-deep .EasyMDEContainer.sided--no-fullscreen .CodeMirror-sided{border-right:none!important;border-bottom-right-radius:0;position:relative;flex:1 1 auto}:host ::ng-deep .EasyMDEContainer .CodeMirror-placeholder{opacity:.5}:host ::ng-deep .EasyMDEContainer .CodeMirror-focused .CodeMirror-selected{background:#d9d9d9}:host ::ng-deep .editor-toolbar{position:relative;-webkit-user-select:none;-o-user-select:none;user-select:none;padding:9px 10px;border-top:1px solid #bbb;border-left:1px solid #bbb;border-right:1px solid #bbb;border-top-left-radius:4px;border-top-right-radius:4px}:host ::ng-deep .editor-toolbar.fullscreen{width:100%;height:50px;padding-top:10px;padding-bottom:10px;box-sizing:border-box;background:#fff;border:0;position:fixed;top:0;left:0;opacity:1;z-index:9}:host ::ng-deep .editor-toolbar.fullscreen:before{width:20px;height:50px;background:linear-gradient(to right,#fff 0,rgba(255,255,255,0) 100%);position:fixed;top:0;left:0;margin:0;padding:0}:host ::ng-deep .editor-toolbar.fullscreen:after{width:20px;height:50px;background:linear-gradient(to right,rgba(255,255,255,0) 0,#fff 100%);position:fixed;top:0;right:0;margin:0;padding:0}:host ::ng-deep .EasyMDEContainer.sided--no-fullscreen .editor-toolbar{width:100%}:host ::ng-deep .editor-toolbar .easymde-dropdown,:host ::ng-deep .editor-toolbar button{background:0 0;display:inline-block;text-align:center;text-decoration:none!important;height:30px;margin:0;padding:0;border:1px solid transparent;border-radius:3px;cursor:pointer}:host ::ng-deep .editor-toolbar button{width:30px}:host ::ng-deep .editor-toolbar button.active,:host ::ng-deep .editor-toolbar button:hover{background:#fcfcfc;border-color:#95a5a6}:host ::ng-deep .editor-toolbar i.separator{display:inline-block;width:0;border-left:1px solid #d9d9d9;border-right:1px solid #fff;color:transparent;text-indent:-10px;margin:0 6px}:host ::ng-deep .editor-toolbar button:after{font-family:Arial,Helvetica Neue,Helvetica,sans-serif;font-size:65%;vertical-align:text-bottom;position:relative;top:2px}:host ::ng-deep .editor-toolbar button.heading-1:after{content:\"1\"}:host ::ng-deep .editor-toolbar button.heading-2:after{content:\"2\"}:host ::ng-deep .editor-toolbar button.heading-3:after{content:\"3\"}:host ::ng-deep .editor-toolbar button.heading-bigger:after{content:\"\\25b2\"}:host ::ng-deep .editor-toolbar button.heading-smaller:after{content:\"\\25bc\"}:host ::ng-deep .editor-toolbar.disabled-for-preview button:not(.no-disable){opacity:.6;pointer-events:none}@media only screen and (max-width: 700px){:host ::ng-deep .editor-toolbar i.no-mobile{display:none}}:host ::ng-deep .editor-statusbar{padding:8px 10px;font-size:12px;color:#959694;text-align:right}:host ::ng-deep .EasyMDEContainer.sided--no-fullscreen .editor-statusbar{width:100%}:host ::ng-deep .editor-statusbar span{display:inline-block;min-width:4em;margin-left:1em}:host ::ng-deep .editor-statusbar .lines:before{content:\"lines: \"}:host ::ng-deep .editor-statusbar .words:before{content:\"words: \"}:host ::ng-deep .editor-statusbar .characters:before{content:\"characters: \"}:host ::ng-deep .editor-preview-full{position:absolute;width:100%;height:100%;top:0;left:0;z-index:7;overflow:auto;display:none;box-sizing:border-box}:host ::ng-deep .editor-preview-side{position:fixed;bottom:0;width:50%;top:50px;right:0;z-index:9;overflow:auto;display:none;box-sizing:border-box;border:1px solid #ddd;word-wrap:break-word}:host ::ng-deep .editor-preview-active-side{display:block}:host ::ng-deep .EasyMDEContainer.sided--no-fullscreen .editor-preview-active-side{flex:1 1 auto;height:auto;position:static}:host ::ng-deep .editor-preview-active{display:block}:host ::ng-deep .editor-preview{padding:10px;background:#fafafa}:host ::ng-deep .editor-preview>p{margin-top:0}:host ::ng-deep .editor-preview pre{background:#eee;margin-bottom:10px}:host ::ng-deep .editor-preview table td,:host ::ng-deep .editor-preview table th{border:1px solid #ddd;padding:5px}:host ::ng-deep .cm-s-easymde .cm-tag{color:#63a35c}:host ::ng-deep .cm-s-easymde .cm-attribute{color:#795da3}:host ::ng-deep .cm-s-easymde .cm-string{color:#183691}:host ::ng-deep .cm-s-easymde .cm-header-1{font-size:200%;line-height:200%}:host ::ng-deep .cm-s-easymde .cm-header-2{font-size:160%;line-height:160%}:host ::ng-deep .cm-s-easymde .cm-header-3{font-size:125%;line-height:125%}:host ::ng-deep .cm-s-easymde .cm-header-4{font-size:110%;line-height:110%}:host ::ng-deep .cm-s-easymde .cm-comment{background:rgba(0,0,0,.05);border-radius:2px}:host ::ng-deep .cm-s-easymde .cm-link{color:#7f8c8d}:host ::ng-deep .cm-s-easymde .cm-url{color:#aab2b3}:host ::ng-deep .cm-s-easymde .cm-quote{color:#7f8c8d;font-style:italic}:host ::ng-deep .editor-toolbar .easymde-dropdown{position:relative;background:linear-gradient(to bottom right,#fff 0,#fff 84%,#333 50%,#333 100%);border-radius:0;border:1px solid #fff}:host ::ng-deep .editor-toolbar .easymde-dropdown:hover{background:linear-gradient(to bottom right,#fff 0,#fff 84%,#333 50%,#333 100%)}:host ::ng-deep .easymde-dropdown-content{display:block;visibility:hidden;position:absolute;background-color:#f9f9f9;box-shadow:0 8px 16px #0003;padding:8px;z-index:2;top:30px}:host ::ng-deep .easymde-dropdown:active .easymde-dropdown-content,:host ::ng-deep .easymde-dropdown:focus .easymde-dropdown-content,:host ::ng-deep .easymde-dropdown:focus-within .easymde-dropdown-content{visibility:visible}:host ::ng-deep span[data-img-src]:after{content:\"\";background-image:var(--bg-image);display:block;max-height:100%;max-width:100%;background-size:contain;height:0;padding-top:var(--height);width:var(--width);background-repeat:no-repeat}:host ::ng-deep .CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word){background:rgba(255,0,0,.15)}\n"] });
+    ], viewQueries: [{ propertyName: "textarea", first: true, predicate: ["easymde"], descendants: true, static: true }], ngImport: i0, template: '<textarea #easymde></textarea>', isInline: true, styles: ["@charset \"UTF-8\";:host ::ng-deep .CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}:host ::ng-deep .CodeMirror-lines{padding:4px 0}:host ::ng-deep .CodeMirror pre.CodeMirror-line,:host ::ng-deep .CodeMirror pre.CodeMirror-line-like{padding:0 4px}:host ::ng-deep .CodeMirror-gutter-filler,:host ::ng-deep .CodeMirror-scrollbar-filler{background-color:#fff}:host ::ng-deep .CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}:host ::ng-deep .CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}:host ::ng-deep .CodeMirror-guttermarker{color:#000}:host ::ng-deep .CodeMirror-guttermarker-subtle{color:#999}:host ::ng-deep .CodeMirror-cursor{border-left:1px solid #000;border-right:none;width:0}:host ::ng-deep .CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}:host ::ng-deep .cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}:host ::ng-deep .cm-fat-cursor div.CodeMirror-cursors{z-index:1}:host ::ng-deep .cm-fat-cursor .CodeMirror-line::selection,:host ::ng-deep .cm-fat-cursor .CodeMirror-line>span::selection,:host ::ng-deep .cm-fat-cursor .CodeMirror-line>span>span::selection{background:0 0}:host ::ng-deep .cm-fat-cursor .CodeMirror-line::-moz-selection,:host ::ng-deep .cm-fat-cursor .CodeMirror-line>span::-moz-selection,:host ::ng-deep .cm-fat-cursor .CodeMirror-line>span>span::-moz-selection{background:0 0}:host ::ng-deep .cm-fat-cursor{caret-color:transparent}@keyframes blink{50%{background-color:transparent}}:host ::ng-deep .cm-tab{display:inline-block;text-decoration:inherit}:host ::ng-deep .CodeMirror-rulers{position:absolute;inset:-50px 0 0;overflow:hidden}:host ::ng-deep .CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}:host ::ng-deep .cm-s-default .cm-header{color:#00f}:host ::ng-deep .cm-s-default .cm-quote{color:#090}:host ::ng-deep .cm-negative{color:#d44}:host ::ng-deep .cm-positive{color:#292}:host ::ng-deep .cm-header,:host ::ng-deep .cm-strong{font-weight:700}:host ::ng-deep .cm-em{font-style:italic}:host ::ng-deep .cm-link{text-decoration:underline}:host ::ng-deep .cm-strikethrough{text-decoration:line-through}:host ::ng-deep .cm-s-default .cm-keyword{color:#708}:host ::ng-deep .cm-s-default .cm-atom{color:#219}:host ::ng-deep .cm-s-default .cm-number{color:#164}:host ::ng-deep .cm-s-default .cm-def{color:#00f}:host ::ng-deep .cm-s-default .cm-variable-2{color:#05a}:host ::ng-deep .cm-s-default .cm-type,:host ::ng-deep .cm-s-default .cm-variable-3{color:#085}:host ::ng-deep .cm-s-default .cm-comment{color:#a50}:host ::ng-deep .cm-s-default .cm-string{color:#a11}:host ::ng-deep .cm-s-default .cm-string-2{color:#f50}:host ::ng-deep .cm-s-default .cm-meta{color:#555}:host ::ng-deep .cm-s-default .cm-qualifier{color:#555}:host ::ng-deep .cm-s-default .cm-builtin{color:#30a}:host ::ng-deep .cm-s-default .cm-bracket{color:#997}:host ::ng-deep .cm-s-default .cm-tag{color:#170}:host ::ng-deep .cm-s-default .cm-attribute{color:#00c}:host ::ng-deep .cm-s-default .cm-hr{color:#999}:host ::ng-deep .cm-s-default .cm-link{color:#00c}:host ::ng-deep .cm-s-default .cm-error{color:red}:host ::ng-deep .cm-invalidchar{color:red}:host ::ng-deep .CodeMirror-composing{border-bottom:2px solid}:host ::ng-deep div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}:host ::ng-deep div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}:host ::ng-deep .CodeMirror-matchingtag{background:rgba(255,150,0,.3)}:host ::ng-deep .CodeMirror-activeline-background{background:#e8f2ff}:host ::ng-deep .CodeMirror{position:relative;overflow:hidden;background:#fff}:host ::ng-deep .CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:0;position:relative}:host ::ng-deep .CodeMirror-sizer{position:relative;border-right:50px solid transparent}:host ::ng-deep .CodeMirror-gutter-filler,:host ::ng-deep .CodeMirror-hscrollbar,:host ::ng-deep .CodeMirror-scrollbar-filler,:host ::ng-deep .CodeMirror-vscrollbar{position:absolute;z-index:6;display:none;outline:0}:host ::ng-deep .CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}:host ::ng-deep .CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}:host ::ng-deep .CodeMirror-scrollbar-filler{right:0;bottom:0}:host ::ng-deep .CodeMirror-gutter-filler{left:0;bottom:0}:host ::ng-deep .CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}:host ::ng-deep .CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}:host ::ng-deep .CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:0 0!important;border:none!important}:host ::ng-deep .CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}:host ::ng-deep .CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}:host ::ng-deep .CodeMirror-gutter-wrapper ::selection{background-color:transparent}:host ::ng-deep .CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}:host ::ng-deep .CodeMirror-lines{cursor:text;min-height:1px}:host ::ng-deep .CodeMirror pre.CodeMirror-line,:host ::ng-deep .CodeMirror pre.CodeMirror-line-like{border-radius:0;border-width:0;background:0 0;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;font-variant-ligatures:contextual}:host ::ng-deep .CodeMirror-wrap pre.CodeMirror-line,:host ::ng-deep .CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}:host ::ng-deep .CodeMirror-linebackground{position:absolute;inset:0;z-index:0}:host ::ng-deep .CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}:host ::ng-deep .CodeMirror-code{outline:0}:host ::ng-deep .CodeMirror-gutter,:host ::ng-deep .CodeMirror-gutters,:host ::ng-deep .CodeMirror-linenumber,:host ::ng-deep .CodeMirror-scroll,:host ::ng-deep .CodeMirror-sizer{box-sizing:content-box}:host ::ng-deep .CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}:host ::ng-deep .CodeMirror-cursor{position:absolute;pointer-events:none}:host ::ng-deep .CodeMirror-measure pre{position:static}:host ::ng-deep div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}:host ::ng-deep div.CodeMirror-dragcursors{visibility:visible}:host ::ng-deep .CodeMirror-focused div.CodeMirror-cursors{visibility:visible}:host ::ng-deep .CodeMirror-selected{background:#d9d9d9}:host ::ng-deep .CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}:host ::ng-deep .CodeMirror-crosshair{cursor:crosshair}:host ::ng-deep .CodeMirror-line::selection,:host ::ng-deep .CodeMirror-line>span::selection,:host ::ng-deep .CodeMirror-line>span>span::selection{background:#d7d4f0}:host ::ng-deep .CodeMirror-line::-moz-selection,:host ::ng-deep .CodeMirror-line>span::-moz-selection,:host ::ng-deep .CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}:host ::ng-deep .cm-searching{background-color:#ffa;background-color:#ff06}:host ::ng-deep .cm-force-border{padding-right:.1px}@media print{:host ::ng-deep .CodeMirror div.CodeMirror-cursors{visibility:hidden}}:host ::ng-deep .cm-tab-wrap-hack:after{content:\"\"}:host ::ng-deep span.CodeMirror-selectedtext{background:0 0}:host ::ng-deep .EasyMDEContainer{display:block}:host ::ng-deep .CodeMirror-rtl pre{direction:rtl}:host ::ng-deep .EasyMDEContainer.sided--no-fullscreen{display:flex;flex-direction:row;flex-wrap:wrap}:host ::ng-deep .EasyMDEContainer .CodeMirror{box-sizing:border-box;height:auto;border:1px solid #ddd;border-bottom-left-radius:4px;border-bottom-right-radius:4px;padding:10px;font:inherit;z-index:0;word-wrap:break-word}:host ::ng-deep .EasyMDEContainer .CodeMirror-scroll{cursor:text}:host ::ng-deep .EasyMDEContainer .CodeMirror-fullscreen{background:#fff;position:fixed!important;inset:50px 0 0;height:auto;z-index:8;border-right:none!important;border-bottom-right-radius:0!important}:host ::ng-deep .EasyMDEContainer .CodeMirror-sided{width:50%!important}:host ::ng-deep .EasyMDEContainer.sided--no-fullscreen .CodeMirror-sided{border-right:none!important;border-bottom-right-radius:0;position:relative;flex:1 1 auto}:host ::ng-deep .EasyMDEContainer .CodeMirror-placeholder{opacity:.5}:host ::ng-deep .EasyMDEContainer .CodeMirror-focused .CodeMirror-selected{background:#d9d9d9}:host ::ng-deep .editor-toolbar{position:relative;-webkit-user-select:none;-o-user-select:none;user-select:none;padding:9px 10px;border-top:1px solid #bbb;border-left:1px solid #bbb;border-right:1px solid #bbb;border-top-left-radius:4px;border-top-right-radius:4px}:host ::ng-deep .editor-toolbar.fullscreen{width:100%;height:50px;padding-top:10px;padding-bottom:10px;box-sizing:border-box;background:#fff;border:0;position:fixed;top:0;left:0;opacity:1;z-index:9}:host ::ng-deep .editor-toolbar.fullscreen:before{width:20px;height:50px;background:linear-gradient(to right,#fff 0,rgba(255,255,255,0) 100%);position:fixed;top:0;left:0;margin:0;padding:0}:host ::ng-deep .editor-toolbar.fullscreen:after{width:20px;height:50px;background:linear-gradient(to right,rgba(255,255,255,0) 0,#fff 100%);position:fixed;top:0;right:0;margin:0;padding:0}:host ::ng-deep .EasyMDEContainer.sided--no-fullscreen .editor-toolbar{width:100%}:host ::ng-deep .editor-toolbar .easymde-dropdown,:host ::ng-deep .editor-toolbar button{background:0 0;display:inline-block;text-align:center;text-decoration:none!important;height:30px;margin:0;padding:0;border:1px solid transparent;border-radius:3px;cursor:pointer}:host ::ng-deep .editor-toolbar button{width:30px}:host ::ng-deep .editor-toolbar button.active,:host ::ng-deep .editor-toolbar button:hover{background:#fcfcfc;border-color:#95a5a6}:host ::ng-deep .editor-toolbar i.separator{display:inline-block;width:0;border-left:1px solid #d9d9d9;border-right:1px solid #fff;color:transparent;text-indent:-10px;margin:0 6px}:host ::ng-deep .editor-toolbar button:after{font-family:Arial,Helvetica Neue,Helvetica,sans-serif;font-size:65%;vertical-align:text-bottom;position:relative;top:2px}:host ::ng-deep .editor-toolbar button.heading-1:after{content:\"1\"}:host ::ng-deep .editor-toolbar button.heading-2:after{content:\"2\"}:host ::ng-deep .editor-toolbar button.heading-3:after{content:\"3\"}:host ::ng-deep .editor-toolbar button.heading-bigger:after{content:\"\\25b2\"}:host ::ng-deep .editor-toolbar button.heading-smaller:after{content:\"\\25bc\"}:host ::ng-deep .editor-toolbar.disabled-for-preview button:not(.no-disable){opacity:.6;pointer-events:none}@media only screen and (max-width: 700px){:host ::ng-deep .editor-toolbar i.no-mobile{display:none}}:host ::ng-deep .editor-statusbar{padding:8px 10px;font-size:12px;color:#959694;text-align:right}:host ::ng-deep .EasyMDEContainer.sided--no-fullscreen .editor-statusbar{width:100%}:host ::ng-deep .editor-statusbar span{display:inline-block;min-width:4em;margin-left:1em}:host ::ng-deep .editor-statusbar .lines:before{content:\"lines: \"}:host ::ng-deep .editor-statusbar .words:before{content:\"words: \"}:host ::ng-deep .editor-statusbar .characters:before{content:\"characters: \"}:host ::ng-deep .editor-preview-full{position:absolute;width:100%;height:100%;top:0;left:0;z-index:7;overflow:auto;display:none;box-sizing:border-box}:host ::ng-deep .editor-preview-side{position:fixed;bottom:0;width:50%;top:50px;right:0;z-index:9;overflow:auto;display:none;box-sizing:border-box;border:1px solid #ddd;word-wrap:break-word}:host ::ng-deep .editor-preview-active-side{display:block}:host ::ng-deep .EasyMDEContainer.sided--no-fullscreen .editor-preview-active-side{flex:1 1 auto;height:auto;position:static}:host ::ng-deep .editor-preview-active{display:block}:host ::ng-deep .editor-preview{padding:10px;background:#fafafa}:host ::ng-deep .editor-preview>p{margin-top:0}:host ::ng-deep .editor-preview pre{background:#eee;margin-bottom:10px}:host ::ng-deep .editor-preview table td,:host ::ng-deep .editor-preview table th{border:1px solid #ddd;padding:5px}:host ::ng-deep .cm-s-easymde .cm-tag{color:#63a35c}:host ::ng-deep .cm-s-easymde .cm-attribute{color:#795da3}:host ::ng-deep .cm-s-easymde .cm-string{color:#183691}:host ::ng-deep .cm-s-easymde .cm-header-1{font-size:200%;line-height:200%}:host ::ng-deep .cm-s-easymde .cm-header-2{font-size:160%;line-height:160%}:host ::ng-deep .cm-s-easymde .cm-header-3{font-size:125%;line-height:125%}:host ::ng-deep .cm-s-easymde .cm-header-4{font-size:110%;line-height:110%}:host ::ng-deep .cm-s-easymde .cm-comment{background:rgba(0,0,0,.05);border-radius:2px}:host ::ng-deep .cm-s-easymde .cm-link{color:#7f8c8d}:host ::ng-deep .cm-s-easymde .cm-url{color:#aab2b3}:host ::ng-deep .cm-s-easymde .cm-quote{color:#7f8c8d;font-style:italic}:host ::ng-deep .editor-toolbar .easymde-dropdown{position:relative;background:linear-gradient(to bottom right,#fff 0,#fff 84%,#333 50%,#333 100%);border-radius:0;border:1px solid #fff}:host ::ng-deep .editor-toolbar .easymde-dropdown:hover{background:linear-gradient(to bottom right,#fff 0,#fff 84%,#333 50%,#333 100%)}:host ::ng-deep .easymde-dropdown-content{display:block;visibility:hidden;position:absolute;background-color:#f9f9f9;box-shadow:0 8px 16px #0003;padding:8px;z-index:2;top:30px}:host ::ng-deep .easymde-dropdown:active .easymde-dropdown-content,:host ::ng-deep .easymde-dropdown:focus .easymde-dropdown-content,:host ::ng-deep .easymde-dropdown:focus-within .easymde-dropdown-content{visibility:visible}:host ::ng-deep span[data-img-src]:after{content:\"\";background-image:var(--bg-image);display:block;max-height:100%;max-width:100%;background-size:contain;height:0;padding-top:var(--height);width:var(--width);background-repeat:no-repeat}:host ::ng-deep .CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word){background:rgba(255,0,0,.15)}\n"] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: EasymdeWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-easymde-wrapper', template: '<textarea #easymde></textarea>', providers: [
@@ -1012,7 +1015,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             useExisting: forwardRef(() => EasymdeWrapperComponent),
                             multi: true,
                         },
-                    ], styles: ["@charset \"UTF-8\";:host ::ng-deep .CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}:host ::ng-deep .CodeMirror-lines{padding:4px 0}:host ::ng-deep .CodeMirror pre.CodeMirror-line,:host ::ng-deep .CodeMirror pre.CodeMirror-line-like{padding:0 4px}:host ::ng-deep .CodeMirror-gutter-filler,:host ::ng-deep .CodeMirror-scrollbar-filler{background-color:#fff}:host ::ng-deep .CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}:host ::ng-deep .CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}:host ::ng-deep .CodeMirror-guttermarker{color:#000}:host ::ng-deep .CodeMirror-guttermarker-subtle{color:#999}:host ::ng-deep .CodeMirror-cursor{border-left:1px solid #000;border-right:none;width:0}:host ::ng-deep .CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}:host ::ng-deep .cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}:host ::ng-deep .cm-fat-cursor div.CodeMirror-cursors{z-index:1}:host ::ng-deep .cm-fat-cursor .CodeMirror-line::selection,:host ::ng-deep .cm-fat-cursor .CodeMirror-line>span::selection,:host ::ng-deep .cm-fat-cursor .CodeMirror-line>span>span::selection{background:0 0}:host ::ng-deep .cm-fat-cursor .CodeMirror-line::-moz-selection,:host ::ng-deep .cm-fat-cursor .CodeMirror-line>span::-moz-selection,:host ::ng-deep .cm-fat-cursor .CodeMirror-line>span>span::-moz-selection{background:0 0}:host ::ng-deep .cm-fat-cursor{caret-color:transparent}@keyframes blink{50%{background-color:transparent}}:host ::ng-deep .cm-tab{display:inline-block;text-decoration:inherit}:host ::ng-deep .CodeMirror-rulers{position:absolute;inset:-50px 0 0;overflow:hidden}:host ::ng-deep .CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}:host ::ng-deep .cm-s-default .cm-header{color:#00f}:host ::ng-deep .cm-s-default .cm-quote{color:#090}:host ::ng-deep .cm-negative{color:#d44}:host ::ng-deep .cm-positive{color:#292}:host ::ng-deep .cm-header,:host ::ng-deep .cm-strong{font-weight:700}:host ::ng-deep .cm-em{font-style:italic}:host ::ng-deep .cm-link{text-decoration:underline}:host ::ng-deep .cm-strikethrough{text-decoration:line-through}:host ::ng-deep .cm-s-default .cm-keyword{color:#708}:host ::ng-deep .cm-s-default .cm-atom{color:#219}:host ::ng-deep .cm-s-default .cm-number{color:#164}:host ::ng-deep .cm-s-default .cm-def{color:#00f}:host ::ng-deep .cm-s-default .cm-variable-2{color:#05a}:host ::ng-deep .cm-s-default .cm-type,:host ::ng-deep .cm-s-default .cm-variable-3{color:#085}:host ::ng-deep .cm-s-default .cm-comment{color:#a50}:host ::ng-deep .cm-s-default .cm-string{color:#a11}:host ::ng-deep .cm-s-default .cm-string-2{color:#f50}:host ::ng-deep .cm-s-default .cm-meta{color:#555}:host ::ng-deep .cm-s-default .cm-qualifier{color:#555}:host ::ng-deep .cm-s-default .cm-builtin{color:#30a}:host ::ng-deep .cm-s-default .cm-bracket{color:#997}:host ::ng-deep .cm-s-default .cm-tag{color:#170}:host ::ng-deep .cm-s-default .cm-attribute{color:#00c}:host ::ng-deep .cm-s-default .cm-hr{color:#999}:host ::ng-deep .cm-s-default .cm-link{color:#00c}:host ::ng-deep .cm-s-default .cm-error{color:red}:host ::ng-deep .cm-invalidchar{color:red}:host ::ng-deep .CodeMirror-composing{border-bottom:2px solid}:host ::ng-deep div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}:host ::ng-deep div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}:host ::ng-deep .CodeMirror-matchingtag{background:rgba(255,150,0,.3)}:host ::ng-deep .CodeMirror-activeline-background{background:#e8f2ff}:host ::ng-deep .CodeMirror{position:relative;overflow:hidden;background:#fff}:host ::ng-deep .CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:0;position:relative}:host ::ng-deep .CodeMirror-sizer{position:relative;border-right:50px solid transparent}:host ::ng-deep .CodeMirror-gutter-filler,:host ::ng-deep .CodeMirror-hscrollbar,:host ::ng-deep .CodeMirror-scrollbar-filler,:host ::ng-deep .CodeMirror-vscrollbar{position:absolute;z-index:6;display:none;outline:0}:host ::ng-deep .CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}:host ::ng-deep .CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}:host ::ng-deep .CodeMirror-scrollbar-filler{right:0;bottom:0}:host ::ng-deep .CodeMirror-gutter-filler{left:0;bottom:0}:host ::ng-deep .CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}:host ::ng-deep .CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}:host ::ng-deep .CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:0 0!important;border:none!important}:host ::ng-deep .CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}:host ::ng-deep .CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}:host ::ng-deep .CodeMirror-gutter-wrapper ::selection{background-color:transparent}:host ::ng-deep .CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}:host ::ng-deep .CodeMirror-lines{cursor:text;min-height:1px}:host ::ng-deep .CodeMirror pre.CodeMirror-line,:host ::ng-deep .CodeMirror pre.CodeMirror-line-like{border-radius:0;border-width:0;background:0 0;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:contextual;font-feature-settings:\"calt\";font-variant-ligatures:contextual}:host ::ng-deep .CodeMirror-wrap pre.CodeMirror-line,:host ::ng-deep .CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}:host ::ng-deep .CodeMirror-linebackground{position:absolute;inset:0;z-index:0}:host ::ng-deep .CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}:host ::ng-deep .CodeMirror-code{outline:0}:host ::ng-deep .CodeMirror-gutter,:host ::ng-deep .CodeMirror-gutters,:host ::ng-deep .CodeMirror-linenumber,:host ::ng-deep .CodeMirror-scroll,:host ::ng-deep .CodeMirror-sizer{box-sizing:content-box}:host ::ng-deep .CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}:host ::ng-deep .CodeMirror-cursor{position:absolute;pointer-events:none}:host ::ng-deep .CodeMirror-measure pre{position:static}:host ::ng-deep div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}:host ::ng-deep div.CodeMirror-dragcursors{visibility:visible}:host ::ng-deep .CodeMirror-focused div.CodeMirror-cursors{visibility:visible}:host ::ng-deep .CodeMirror-selected{background:#d9d9d9}:host ::ng-deep .CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}:host ::ng-deep .CodeMirror-crosshair{cursor:crosshair}:host ::ng-deep .CodeMirror-line::selection,:host ::ng-deep .CodeMirror-line>span::selection,:host ::ng-deep .CodeMirror-line>span>span::selection{background:#d7d4f0}:host ::ng-deep .CodeMirror-line::-moz-selection,:host ::ng-deep .CodeMirror-line>span::-moz-selection,:host ::ng-deep .CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}:host ::ng-deep .cm-searching{background-color:#ffa;background-color:#ff06}:host ::ng-deep .cm-force-border{padding-right:.1px}@media print{:host ::ng-deep .CodeMirror div.CodeMirror-cursors{visibility:hidden}}:host ::ng-deep .cm-tab-wrap-hack:after{content:\"\"}:host ::ng-deep span.CodeMirror-selectedtext{background:0 0}:host ::ng-deep .EasyMDEContainer{display:block}:host ::ng-deep .CodeMirror-rtl pre{direction:rtl}:host ::ng-deep .EasyMDEContainer.sided--no-fullscreen{display:flex;flex-direction:row;flex-wrap:wrap}:host ::ng-deep .EasyMDEContainer .CodeMirror{box-sizing:border-box;height:auto;border:1px solid #ddd;border-bottom-left-radius:4px;border-bottom-right-radius:4px;padding:10px;font:inherit;z-index:0;word-wrap:break-word}:host ::ng-deep .EasyMDEContainer .CodeMirror-scroll{cursor:text}:host ::ng-deep .EasyMDEContainer .CodeMirror-fullscreen{background:#fff;position:fixed!important;inset:50px 0 0;height:auto;z-index:8;border-right:none!important;border-bottom-right-radius:0!important}:host ::ng-deep .EasyMDEContainer .CodeMirror-sided{width:50%!important}:host ::ng-deep .EasyMDEContainer.sided--no-fullscreen .CodeMirror-sided{border-right:none!important;border-bottom-right-radius:0;position:relative;flex:1 1 auto}:host ::ng-deep .EasyMDEContainer .CodeMirror-placeholder{opacity:.5}:host ::ng-deep .EasyMDEContainer .CodeMirror-focused .CodeMirror-selected{background:#d9d9d9}:host ::ng-deep .editor-toolbar{position:relative;-webkit-user-select:none;-o-user-select:none;user-select:none;padding:9px 10px;border-top:1px solid #bbb;border-left:1px solid #bbb;border-right:1px solid #bbb;border-top-left-radius:4px;border-top-right-radius:4px}:host ::ng-deep .editor-toolbar.fullscreen{width:100%;height:50px;padding-top:10px;padding-bottom:10px;box-sizing:border-box;background:#fff;border:0;position:fixed;top:0;left:0;opacity:1;z-index:9}:host ::ng-deep .editor-toolbar.fullscreen:before{width:20px;height:50px;background:linear-gradient(to right,#fff 0,rgba(255,255,255,0) 100%);position:fixed;top:0;left:0;margin:0;padding:0}:host ::ng-deep .editor-toolbar.fullscreen:after{width:20px;height:50px;background:linear-gradient(to right,rgba(255,255,255,0) 0,#fff 100%);position:fixed;top:0;right:0;margin:0;padding:0}:host ::ng-deep .EasyMDEContainer.sided--no-fullscreen .editor-toolbar{width:100%}:host ::ng-deep .editor-toolbar .easymde-dropdown,:host ::ng-deep .editor-toolbar button{background:0 0;display:inline-block;text-align:center;text-decoration:none!important;height:30px;margin:0;padding:0;border:1px solid transparent;border-radius:3px;cursor:pointer}:host ::ng-deep .editor-toolbar button{width:30px}:host ::ng-deep .editor-toolbar button.active,:host ::ng-deep .editor-toolbar button:hover{background:#fcfcfc;border-color:#95a5a6}:host ::ng-deep .editor-toolbar i.separator{display:inline-block;width:0;border-left:1px solid #d9d9d9;border-right:1px solid #fff;color:transparent;text-indent:-10px;margin:0 6px}:host ::ng-deep .editor-toolbar button:after{font-family:Arial,Helvetica Neue,Helvetica,sans-serif;font-size:65%;vertical-align:text-bottom;position:relative;top:2px}:host ::ng-deep .editor-toolbar button.heading-1:after{content:\"1\"}:host ::ng-deep .editor-toolbar button.heading-2:after{content:\"2\"}:host ::ng-deep .editor-toolbar button.heading-3:after{content:\"3\"}:host ::ng-deep .editor-toolbar button.heading-bigger:after{content:\"\\25b2\"}:host ::ng-deep .editor-toolbar button.heading-smaller:after{content:\"\\25bc\"}:host ::ng-deep .editor-toolbar.disabled-for-preview button:not(.no-disable){opacity:.6;pointer-events:none}@media only screen and (max-width: 700px){:host ::ng-deep .editor-toolbar i.no-mobile{display:none}}:host ::ng-deep .editor-statusbar{padding:8px 10px;font-size:12px;color:#959694;text-align:right}:host ::ng-deep .EasyMDEContainer.sided--no-fullscreen .editor-statusbar{width:100%}:host ::ng-deep .editor-statusbar span{display:inline-block;min-width:4em;margin-left:1em}:host ::ng-deep .editor-statusbar .lines:before{content:\"lines: \"}:host ::ng-deep .editor-statusbar .words:before{content:\"words: \"}:host ::ng-deep .editor-statusbar .characters:before{content:\"characters: \"}:host ::ng-deep .editor-preview-full{position:absolute;width:100%;height:100%;top:0;left:0;z-index:7;overflow:auto;display:none;box-sizing:border-box}:host ::ng-deep .editor-preview-side{position:fixed;bottom:0;width:50%;top:50px;right:0;z-index:9;overflow:auto;display:none;box-sizing:border-box;border:1px solid #ddd;word-wrap:break-word}:host ::ng-deep .editor-preview-active-side{display:block}:host ::ng-deep .EasyMDEContainer.sided--no-fullscreen .editor-preview-active-side{flex:1 1 auto;height:auto;position:static}:host ::ng-deep .editor-preview-active{display:block}:host ::ng-deep .editor-preview{padding:10px;background:#fafafa}:host ::ng-deep .editor-preview>p{margin-top:0}:host ::ng-deep .editor-preview pre{background:#eee;margin-bottom:10px}:host ::ng-deep .editor-preview table td,:host ::ng-deep .editor-preview table th{border:1px solid #ddd;padding:5px}:host ::ng-deep .cm-s-easymde .cm-tag{color:#63a35c}:host ::ng-deep .cm-s-easymde .cm-attribute{color:#795da3}:host ::ng-deep .cm-s-easymde .cm-string{color:#183691}:host ::ng-deep .cm-s-easymde .cm-header-1{font-size:200%;line-height:200%}:host ::ng-deep .cm-s-easymde .cm-header-2{font-size:160%;line-height:160%}:host ::ng-deep .cm-s-easymde .cm-header-3{font-size:125%;line-height:125%}:host ::ng-deep .cm-s-easymde .cm-header-4{font-size:110%;line-height:110%}:host ::ng-deep .cm-s-easymde .cm-comment{background:rgba(0,0,0,.05);border-radius:2px}:host ::ng-deep .cm-s-easymde .cm-link{color:#7f8c8d}:host ::ng-deep .cm-s-easymde .cm-url{color:#aab2b3}:host ::ng-deep .cm-s-easymde .cm-quote{color:#7f8c8d;font-style:italic}:host ::ng-deep .editor-toolbar .easymde-dropdown{position:relative;background:linear-gradient(to bottom right,#fff 0,#fff 84%,#333 50%,#333 100%);border-radius:0;border:1px solid #fff}:host ::ng-deep .editor-toolbar .easymde-dropdown:hover{background:linear-gradient(to bottom right,#fff 0,#fff 84%,#333 50%,#333 100%)}:host ::ng-deep .easymde-dropdown-content{display:block;visibility:hidden;position:absolute;background-color:#f9f9f9;box-shadow:0 8px 16px #0003;padding:8px;z-index:2;top:30px}:host ::ng-deep .easymde-dropdown:active .easymde-dropdown-content,:host ::ng-deep .easymde-dropdown:focus .easymde-dropdown-content,:host ::ng-deep .easymde-dropdown:focus-within .easymde-dropdown-content{visibility:visible}:host ::ng-deep span[data-img-src]:after{content:\"\";background-image:var(--bg-image);display:block;max-height:100%;max-width:100%;background-size:contain;height:0;padding-top:var(--height);width:var(--width);background-repeat:no-repeat}:host ::ng-deep .CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word){background:rgba(255,0,0,.15)}\n"] }]
+                    ], styles: ["@charset \"UTF-8\";:host ::ng-deep .CodeMirror{font-family:monospace;height:300px;color:#000;direction:ltr}:host ::ng-deep .CodeMirror-lines{padding:4px 0}:host ::ng-deep .CodeMirror pre.CodeMirror-line,:host ::ng-deep .CodeMirror pre.CodeMirror-line-like{padding:0 4px}:host ::ng-deep .CodeMirror-gutter-filler,:host ::ng-deep .CodeMirror-scrollbar-filler{background-color:#fff}:host ::ng-deep .CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}:host ::ng-deep .CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}:host ::ng-deep .CodeMirror-guttermarker{color:#000}:host ::ng-deep .CodeMirror-guttermarker-subtle{color:#999}:host ::ng-deep .CodeMirror-cursor{border-left:1px solid #000;border-right:none;width:0}:host ::ng-deep .CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}:host ::ng-deep .cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}:host ::ng-deep .cm-fat-cursor div.CodeMirror-cursors{z-index:1}:host ::ng-deep .cm-fat-cursor .CodeMirror-line::selection,:host ::ng-deep .cm-fat-cursor .CodeMirror-line>span::selection,:host ::ng-deep .cm-fat-cursor .CodeMirror-line>span>span::selection{background:0 0}:host ::ng-deep .cm-fat-cursor .CodeMirror-line::-moz-selection,:host ::ng-deep .cm-fat-cursor .CodeMirror-line>span::-moz-selection,:host ::ng-deep .cm-fat-cursor .CodeMirror-line>span>span::-moz-selection{background:0 0}:host ::ng-deep .cm-fat-cursor{caret-color:transparent}@keyframes blink{50%{background-color:transparent}}:host ::ng-deep .cm-tab{display:inline-block;text-decoration:inherit}:host ::ng-deep .CodeMirror-rulers{position:absolute;inset:-50px 0 0;overflow:hidden}:host ::ng-deep .CodeMirror-ruler{border-left:1px solid #ccc;top:0;bottom:0;position:absolute}:host ::ng-deep .cm-s-default .cm-header{color:#00f}:host ::ng-deep .cm-s-default .cm-quote{color:#090}:host ::ng-deep .cm-negative{color:#d44}:host ::ng-deep .cm-positive{color:#292}:host ::ng-deep .cm-header,:host ::ng-deep .cm-strong{font-weight:700}:host ::ng-deep .cm-em{font-style:italic}:host ::ng-deep .cm-link{text-decoration:underline}:host ::ng-deep .cm-strikethrough{text-decoration:line-through}:host ::ng-deep .cm-s-default .cm-keyword{color:#708}:host ::ng-deep .cm-s-default .cm-atom{color:#219}:host ::ng-deep .cm-s-default .cm-number{color:#164}:host ::ng-deep .cm-s-default .cm-def{color:#00f}:host ::ng-deep .cm-s-default .cm-variable-2{color:#05a}:host ::ng-deep .cm-s-default .cm-type,:host ::ng-deep .cm-s-default .cm-variable-3{color:#085}:host ::ng-deep .cm-s-default .cm-comment{color:#a50}:host ::ng-deep .cm-s-default .cm-string{color:#a11}:host ::ng-deep .cm-s-default .cm-string-2{color:#f50}:host ::ng-deep .cm-s-default .cm-meta{color:#555}:host ::ng-deep .cm-s-default .cm-qualifier{color:#555}:host ::ng-deep .cm-s-default .cm-builtin{color:#30a}:host ::ng-deep .cm-s-default .cm-bracket{color:#997}:host ::ng-deep .cm-s-default .cm-tag{color:#170}:host ::ng-deep .cm-s-default .cm-attribute{color:#00c}:host ::ng-deep .cm-s-default .cm-hr{color:#999}:host ::ng-deep .cm-s-default .cm-link{color:#00c}:host ::ng-deep .cm-s-default .cm-error{color:red}:host ::ng-deep .cm-invalidchar{color:red}:host ::ng-deep .CodeMirror-composing{border-bottom:2px solid}:host ::ng-deep div.CodeMirror span.CodeMirror-matchingbracket{color:#0b0}:host ::ng-deep div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#a22}:host ::ng-deep .CodeMirror-matchingtag{background:rgba(255,150,0,.3)}:host ::ng-deep .CodeMirror-activeline-background{background:#e8f2ff}:host ::ng-deep .CodeMirror{position:relative;overflow:hidden;background:#fff}:host ::ng-deep .CodeMirror-scroll{overflow:scroll!important;margin-bottom:-50px;margin-right:-50px;padding-bottom:50px;height:100%;outline:0;position:relative}:host ::ng-deep .CodeMirror-sizer{position:relative;border-right:50px solid transparent}:host ::ng-deep .CodeMirror-gutter-filler,:host ::ng-deep .CodeMirror-hscrollbar,:host ::ng-deep .CodeMirror-scrollbar-filler,:host ::ng-deep .CodeMirror-vscrollbar{position:absolute;z-index:6;display:none;outline:0}:host ::ng-deep .CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}:host ::ng-deep .CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}:host ::ng-deep .CodeMirror-scrollbar-filler{right:0;bottom:0}:host ::ng-deep .CodeMirror-gutter-filler{left:0;bottom:0}:host ::ng-deep .CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}:host ::ng-deep .CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-50px}:host ::ng-deep .CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:0 0!important;border:none!important}:host ::ng-deep .CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}:host ::ng-deep .CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}:host ::ng-deep .CodeMirror-gutter-wrapper ::selection{background-color:transparent}:host ::ng-deep .CodeMirror-gutter-wrapper ::-moz-selection{background-color:transparent}:host ::ng-deep .CodeMirror-lines{cursor:text;min-height:1px}:host ::ng-deep .CodeMirror pre.CodeMirror-line,:host ::ng-deep .CodeMirror pre.CodeMirror-line-like{border-radius:0;border-width:0;background:0 0;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;font-variant-ligatures:contextual}:host ::ng-deep .CodeMirror-wrap pre.CodeMirror-line,:host ::ng-deep .CodeMirror-wrap pre.CodeMirror-line-like{word-wrap:break-word;white-space:pre-wrap;word-break:normal}:host ::ng-deep .CodeMirror-linebackground{position:absolute;inset:0;z-index:0}:host ::ng-deep .CodeMirror-linewidget{position:relative;z-index:2;padding:.1px}:host ::ng-deep .CodeMirror-code{outline:0}:host ::ng-deep .CodeMirror-gutter,:host ::ng-deep .CodeMirror-gutters,:host ::ng-deep .CodeMirror-linenumber,:host ::ng-deep .CodeMirror-scroll,:host ::ng-deep .CodeMirror-sizer{box-sizing:content-box}:host ::ng-deep .CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}:host ::ng-deep .CodeMirror-cursor{position:absolute;pointer-events:none}:host ::ng-deep .CodeMirror-measure pre{position:static}:host ::ng-deep div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}:host ::ng-deep div.CodeMirror-dragcursors{visibility:visible}:host ::ng-deep .CodeMirror-focused div.CodeMirror-cursors{visibility:visible}:host ::ng-deep .CodeMirror-selected{background:#d9d9d9}:host ::ng-deep .CodeMirror-focused .CodeMirror-selected{background:#d7d4f0}:host ::ng-deep .CodeMirror-crosshair{cursor:crosshair}:host ::ng-deep .CodeMirror-line::selection,:host ::ng-deep .CodeMirror-line>span::selection,:host ::ng-deep .CodeMirror-line>span>span::selection{background:#d7d4f0}:host ::ng-deep .CodeMirror-line::-moz-selection,:host ::ng-deep .CodeMirror-line>span::-moz-selection,:host ::ng-deep .CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}:host ::ng-deep .cm-searching{background-color:#ffa;background-color:#ff06}:host ::ng-deep .cm-force-border{padding-right:.1px}@media print{:host ::ng-deep .CodeMirror div.CodeMirror-cursors{visibility:hidden}}:host ::ng-deep .cm-tab-wrap-hack:after{content:\"\"}:host ::ng-deep span.CodeMirror-selectedtext{background:0 0}:host ::ng-deep .EasyMDEContainer{display:block}:host ::ng-deep .CodeMirror-rtl pre{direction:rtl}:host ::ng-deep .EasyMDEContainer.sided--no-fullscreen{display:flex;flex-direction:row;flex-wrap:wrap}:host ::ng-deep .EasyMDEContainer .CodeMirror{box-sizing:border-box;height:auto;border:1px solid #ddd;border-bottom-left-radius:4px;border-bottom-right-radius:4px;padding:10px;font:inherit;z-index:0;word-wrap:break-word}:host ::ng-deep .EasyMDEContainer .CodeMirror-scroll{cursor:text}:host ::ng-deep .EasyMDEContainer .CodeMirror-fullscreen{background:#fff;position:fixed!important;inset:50px 0 0;height:auto;z-index:8;border-right:none!important;border-bottom-right-radius:0!important}:host ::ng-deep .EasyMDEContainer .CodeMirror-sided{width:50%!important}:host ::ng-deep .EasyMDEContainer.sided--no-fullscreen .CodeMirror-sided{border-right:none!important;border-bottom-right-radius:0;position:relative;flex:1 1 auto}:host ::ng-deep .EasyMDEContainer .CodeMirror-placeholder{opacity:.5}:host ::ng-deep .EasyMDEContainer .CodeMirror-focused .CodeMirror-selected{background:#d9d9d9}:host ::ng-deep .editor-toolbar{position:relative;-webkit-user-select:none;-o-user-select:none;user-select:none;padding:9px 10px;border-top:1px solid #bbb;border-left:1px solid #bbb;border-right:1px solid #bbb;border-top-left-radius:4px;border-top-right-radius:4px}:host ::ng-deep .editor-toolbar.fullscreen{width:100%;height:50px;padding-top:10px;padding-bottom:10px;box-sizing:border-box;background:#fff;border:0;position:fixed;top:0;left:0;opacity:1;z-index:9}:host ::ng-deep .editor-toolbar.fullscreen:before{width:20px;height:50px;background:linear-gradient(to right,#fff 0,rgba(255,255,255,0) 100%);position:fixed;top:0;left:0;margin:0;padding:0}:host ::ng-deep .editor-toolbar.fullscreen:after{width:20px;height:50px;background:linear-gradient(to right,rgba(255,255,255,0) 0,#fff 100%);position:fixed;top:0;right:0;margin:0;padding:0}:host ::ng-deep .EasyMDEContainer.sided--no-fullscreen .editor-toolbar{width:100%}:host ::ng-deep .editor-toolbar .easymde-dropdown,:host ::ng-deep .editor-toolbar button{background:0 0;display:inline-block;text-align:center;text-decoration:none!important;height:30px;margin:0;padding:0;border:1px solid transparent;border-radius:3px;cursor:pointer}:host ::ng-deep .editor-toolbar button{width:30px}:host ::ng-deep .editor-toolbar button.active,:host ::ng-deep .editor-toolbar button:hover{background:#fcfcfc;border-color:#95a5a6}:host ::ng-deep .editor-toolbar i.separator{display:inline-block;width:0;border-left:1px solid #d9d9d9;border-right:1px solid #fff;color:transparent;text-indent:-10px;margin:0 6px}:host ::ng-deep .editor-toolbar button:after{font-family:Arial,Helvetica Neue,Helvetica,sans-serif;font-size:65%;vertical-align:text-bottom;position:relative;top:2px}:host ::ng-deep .editor-toolbar button.heading-1:after{content:\"1\"}:host ::ng-deep .editor-toolbar button.heading-2:after{content:\"2\"}:host ::ng-deep .editor-toolbar button.heading-3:after{content:\"3\"}:host ::ng-deep .editor-toolbar button.heading-bigger:after{content:\"\\25b2\"}:host ::ng-deep .editor-toolbar button.heading-smaller:after{content:\"\\25bc\"}:host ::ng-deep .editor-toolbar.disabled-for-preview button:not(.no-disable){opacity:.6;pointer-events:none}@media only screen and (max-width: 700px){:host ::ng-deep .editor-toolbar i.no-mobile{display:none}}:host ::ng-deep .editor-statusbar{padding:8px 10px;font-size:12px;color:#959694;text-align:right}:host ::ng-deep .EasyMDEContainer.sided--no-fullscreen .editor-statusbar{width:100%}:host ::ng-deep .editor-statusbar span{display:inline-block;min-width:4em;margin-left:1em}:host ::ng-deep .editor-statusbar .lines:before{content:\"lines: \"}:host ::ng-deep .editor-statusbar .words:before{content:\"words: \"}:host ::ng-deep .editor-statusbar .characters:before{content:\"characters: \"}:host ::ng-deep .editor-preview-full{position:absolute;width:100%;height:100%;top:0;left:0;z-index:7;overflow:auto;display:none;box-sizing:border-box}:host ::ng-deep .editor-preview-side{position:fixed;bottom:0;width:50%;top:50px;right:0;z-index:9;overflow:auto;display:none;box-sizing:border-box;border:1px solid #ddd;word-wrap:break-word}:host ::ng-deep .editor-preview-active-side{display:block}:host ::ng-deep .EasyMDEContainer.sided--no-fullscreen .editor-preview-active-side{flex:1 1 auto;height:auto;position:static}:host ::ng-deep .editor-preview-active{display:block}:host ::ng-deep .editor-preview{padding:10px;background:#fafafa}:host ::ng-deep .editor-preview>p{margin-top:0}:host ::ng-deep .editor-preview pre{background:#eee;margin-bottom:10px}:host ::ng-deep .editor-preview table td,:host ::ng-deep .editor-preview table th{border:1px solid #ddd;padding:5px}:host ::ng-deep .cm-s-easymde .cm-tag{color:#63a35c}:host ::ng-deep .cm-s-easymde .cm-attribute{color:#795da3}:host ::ng-deep .cm-s-easymde .cm-string{color:#183691}:host ::ng-deep .cm-s-easymde .cm-header-1{font-size:200%;line-height:200%}:host ::ng-deep .cm-s-easymde .cm-header-2{font-size:160%;line-height:160%}:host ::ng-deep .cm-s-easymde .cm-header-3{font-size:125%;line-height:125%}:host ::ng-deep .cm-s-easymde .cm-header-4{font-size:110%;line-height:110%}:host ::ng-deep .cm-s-easymde .cm-comment{background:rgba(0,0,0,.05);border-radius:2px}:host ::ng-deep .cm-s-easymde .cm-link{color:#7f8c8d}:host ::ng-deep .cm-s-easymde .cm-url{color:#aab2b3}:host ::ng-deep .cm-s-easymde .cm-quote{color:#7f8c8d;font-style:italic}:host ::ng-deep .editor-toolbar .easymde-dropdown{position:relative;background:linear-gradient(to bottom right,#fff 0,#fff 84%,#333 50%,#333 100%);border-radius:0;border:1px solid #fff}:host ::ng-deep .editor-toolbar .easymde-dropdown:hover{background:linear-gradient(to bottom right,#fff 0,#fff 84%,#333 50%,#333 100%)}:host ::ng-deep .easymde-dropdown-content{display:block;visibility:hidden;position:absolute;background-color:#f9f9f9;box-shadow:0 8px 16px #0003;padding:8px;z-index:2;top:30px}:host ::ng-deep .easymde-dropdown:active .easymde-dropdown-content,:host ::ng-deep .easymde-dropdown:focus .easymde-dropdown-content,:host ::ng-deep .easymde-dropdown:focus-within .easymde-dropdown-content{visibility:visible}:host ::ng-deep span[data-img-src]:after{content:\"\";background-image:var(--bg-image);display:block;max-height:100%;max-width:100%;background-size:contain;height:0;padding-top:var(--height);width:var(--width);background-repeat:no-repeat}:host ::ng-deep .CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word){background:rgba(255,0,0,.15)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { formControlRef: [{
                 type: Input
             }], textAreaField: [{
@@ -1056,6 +1059,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             args: [{ selector: 'nc-html-textarea-field', template: "<div class=\"height-100\" #quillContainer>\n    <quill-editor theme=\"snow\" *ngIf=\"!formControlRef.disabled\" [(ngModel)]=\"textAreaField.value\"\n                  [modules]=\"quillModules\" [bounds]=\"quillContainer\" placeholder=\"{{ textAreaField.placeholder |translate}}\"></quill-editor>\n    <mat-error *ngIf=\"textAreaField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n    <input type=\"hidden\" [formControl]=\"formControlRef\">\n    <div *ngIf=\"formControlRef.disabled\" class=\"ql-snow user-select-auto\" [ngClass]=\"{'border' : textAreaField.materialAppearance === 'outline'}\">\n        <div [ngClass]=\"{'ql-editor' : textAreaField.materialAppearance === 'outline'}\" [innerHTML]=\"disabledDisplay\"></div>\n    </div>\n</div>\n", styles: [".height-100{height:100%}.border{border:1px solid #ddd;border-radius:4px;padding:10px;z-index:1;word-wrap:break-word}.user-select-auto{-webkit-user-select:auto;user-select:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: i2$2.TranslateService }, { type: i3$3.DomSanitizer }]; } });
 
+class DashboardLineChartTextFieldComponent extends AbstractDashboardLineChartTextFieldComponent {
+    constructor(translate) {
+        super(translate);
+    }
+}
+DashboardLineChartTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DashboardLineChartTextFieldComponent, deps: [{ token: i2$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+DashboardLineChartTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DashboardLineChartTextFieldComponent, selector: "nc-dashboard-line-chart-text-field", usesInheritance: true, ngImport: i0, template: "<ng-template [ngIf]=\"!formControlRef.disabled && textField.behavior.editable\" [ngIfElse]=\"visibleChart\">\n    <nc-textarea-field [textAreaField]=\"textField\"\n                       [formControlRef]=\"formControlRef\"\n                       [showLargeLayout]=\"showLargeLayout\"></nc-textarea-field>\n</ng-template>\n\n<ng-template #visibleChart>\n    <nc-line-chart-card *ngIf=\"initialized\" [card]=\"card\" class=\"full-size\"></nc-line-chart-card>\n</ng-template>\n", styles: [".full-size{width:100%;height:100%;margin:auto;padding:0}\n"], components: [{ type: TextareaFieldComponent, selector: "nc-textarea-field" }, { type: LineChartCardComponent, selector: "nc-line-chart-card", outputs: ["selectEvent"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DashboardLineChartTextFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nc-dashboard-line-chart-text-field', template: "<ng-template [ngIf]=\"!formControlRef.disabled && textField.behavior.editable\" [ngIfElse]=\"visibleChart\">\n    <nc-textarea-field [textAreaField]=\"textField\"\n                       [formControlRef]=\"formControlRef\"\n                       [showLargeLayout]=\"showLargeLayout\"></nc-textarea-field>\n</ng-template>\n\n<ng-template #visibleChart>\n    <nc-line-chart-card *ngIf=\"initialized\" [card]=\"card\" class=\"full-size\"></nc-line-chart-card>\n</ng-template>\n", styles: [".full-size{width:100%;height:100%;margin:auto;padding:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2$2.TranslateService }]; } });
+
+class DashboardPieChartTextFieldComponent extends AbstractDashboardPieChartTextFieldComponent {
+    constructor(translate) {
+        super(translate);
+    }
+}
+DashboardPieChartTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DashboardPieChartTextFieldComponent, deps: [{ token: i2$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+DashboardPieChartTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DashboardPieChartTextFieldComponent, selector: "nc-dashboard-pie-chart-text-field", usesInheritance: true, ngImport: i0, template: "<ng-template [ngIf]=\"!formControlRef.disabled && textField.behavior.editable\" [ngIfElse]=\"visibleChart\">\n    <nc-textarea-field [textAreaField]=\"textField\"\n                       [formControlRef]=\"formControlRef\"\n                       [showLargeLayout]=\"showLargeLayout\"></nc-textarea-field>\n</ng-template>\n\n<ng-template #visibleChart>\n    <nc-pie-chart-card *ngIf=\"initialized\" [card]=\"card\" class=\"full-size\"></nc-pie-chart-card>\n</ng-template>\n", styles: [".full-size{width:100%;height:100%;margin:auto;padding:0}\n"], components: [{ type: TextareaFieldComponent, selector: "nc-textarea-field" }, { type: PieChartCardComponent, selector: "nc-pie-chart-card", outputs: ["selectEvent"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DashboardPieChartTextFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nc-dashboard-pie-chart-text-field', template: "<ng-template [ngIf]=\"!formControlRef.disabled && textField.behavior.editable\" [ngIfElse]=\"visibleChart\">\n    <nc-textarea-field [textAreaField]=\"textField\"\n                       [formControlRef]=\"formControlRef\"\n                       [showLargeLayout]=\"showLargeLayout\"></nc-textarea-field>\n</ng-template>\n\n<ng-template #visibleChart>\n    <nc-pie-chart-card *ngIf=\"initialized\" [card]=\"card\" class=\"full-size\"></nc-pie-chart-card>\n</ng-template>\n", styles: [".full-size{width:100%;height:100%;margin:auto;padding:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2$2.TranslateService }]; } });
+
+class DashboardBarChartTextFieldComponent extends AbstractDashboardBarChartTextFieldComponent {
+    constructor(translate) {
+        super(translate);
+    }
+}
+DashboardBarChartTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DashboardBarChartTextFieldComponent, deps: [{ token: i2$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+DashboardBarChartTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DashboardBarChartTextFieldComponent, selector: "nc-dashboard-bar-chart-text-field", usesInheritance: true, ngImport: i0, template: "<ng-template [ngIf]=\"!formControlRef.disabled && textField.behavior.editable\" [ngIfElse]=\"visibleChart\">\n    <nc-textarea-field [textAreaField]=\"textField\"\n                       [formControlRef]=\"formControlRef\"\n                       [showLargeLayout]=\"showLargeLayout\"></nc-textarea-field>\n</ng-template>\n\n<ng-template #visibleChart>\n    <nc-barchart-card *ngIf=\"initialized\" [card]=\"card\" class=\"full-size\"></nc-barchart-card>\n</ng-template>\n", styles: [".full-size{width:100%;height:100%;margin:auto;padding:0}\n"], components: [{ type: TextareaFieldComponent, selector: "nc-textarea-field" }, { type: BarchartCardComponent, selector: "nc-barchart-card", outputs: ["selectEvent"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DashboardBarChartTextFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nc-dashboard-bar-chart-text-field', template: "<ng-template [ngIf]=\"!formControlRef.disabled && textField.behavior.editable\" [ngIfElse]=\"visibleChart\">\n    <nc-textarea-field [textAreaField]=\"textField\"\n                       [formControlRef]=\"formControlRef\"\n                       [showLargeLayout]=\"showLargeLayout\"></nc-textarea-field>\n</ng-template>\n\n<ng-template #visibleChart>\n    <nc-barchart-card *ngIf=\"initialized\" [card]=\"card\" class=\"full-size\"></nc-barchart-card>\n</ng-template>\n", styles: [".full-size{width:100%;height:100%;margin:auto;padding:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2$2.TranslateService }]; } });
+
 class SimpleTextFieldComponent extends AbstractSimpleTextFieldComponent {
     constructor(_translate) {
         super(_translate);
@@ -1069,16 +1108,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             args: [{ selector: 'nc-simple-text-field', template: "<mat-form-field [appearance]=\"textField.materialAppearance\" class=\"full-width\" color=\"primary\">\n    <mat-label *ngIf=\"!showLargeLayout.value\">{{textField.title}}</mat-label>\n    <input matInput\n           [placeholder]=\"textField.placeholder\"\n           [required]=\"textField.behavior.required\"\n           [formControl]=\"formControlRef\">\n    <mat-hint>{{textField.description}}</mat-hint>\n    <mat-error *ngIf=\"textField.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: i2$2.TranslateService }]; } });
 
+class DashboardIframeTextFieldComponent extends AbstractDashboardIframeTextFieldComponent {
+    constructor(translate) {
+        super(translate);
+    }
+}
+DashboardIframeTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DashboardIframeTextFieldComponent, deps: [{ token: i2$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+DashboardIframeTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DashboardIframeTextFieldComponent, selector: "nc-dashboard-iframe-text-field", usesInheritance: true, ngImport: i0, template: "<ng-template [ngIf]=\"!formControlRef.disabled && textField.behavior.editable\" [ngIfElse]=\"visibleChart\">\n    <nc-simple-text-field [textField]=\"textField\"\n                       [formControlRef]=\"formControlRef\"\n                       [showLargeLayout]=\"showLargeLayout\"></nc-simple-text-field>\n</ng-template>\n\n<ng-template #visibleChart>\n    <nc-iframe-card *ngIf=\"initialized\" [card]=\"card\" class=\"full-size\"></nc-iframe-card>\n</ng-template>\n", styles: [".full-size{width:100%;height:250px;margin:auto;padding:0}\n"], components: [{ type: SimpleTextFieldComponent, selector: "nc-simple-text-field" }, { type: IframeCardComponent, selector: "nc-iframe-card" }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DashboardIframeTextFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nc-dashboard-iframe-text-field', template: "<ng-template [ngIf]=\"!formControlRef.disabled && textField.behavior.editable\" [ngIfElse]=\"visibleChart\">\n    <nc-simple-text-field [textField]=\"textField\"\n                       [formControlRef]=\"formControlRef\"\n                       [showLargeLayout]=\"showLargeLayout\"></nc-simple-text-field>\n</ng-template>\n\n<ng-template #visibleChart>\n    <nc-iframe-card *ngIf=\"initialized\" [card]=\"card\" class=\"full-size\"></nc-iframe-card>\n</ng-template>\n", styles: [".full-size{width:100%;height:250px;margin:auto;padding:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: i2$2.TranslateService }]; } });
+
+class DashboardPortalTextFieldComponent extends AbstractDashboardPortalTextFieldComponent {
+    constructor(translate, registry, injector) {
+        super(translate);
+        this.registry = registry;
+        this.injector = injector;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.initializePortalComponent();
+        this.sub = this.formControlRef.valueChanges.subscribe(newValue => {
+            this.initializePortalComponent();
+        });
+    }
+    initializePortalComponent() {
+        this.componentPortal = this.registry.get(this.card?.componentName, this.injector);
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.sub.unsubscribe();
+    }
+}
+DashboardPortalTextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DashboardPortalTextFieldComponent, deps: [{ token: i2$2.TranslateService }, { token: i1.DashboardPortalComponentRegistryService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+DashboardPortalTextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DashboardPortalTextFieldComponent, selector: "nc-dashboard-portal-text-field", usesInheritance: true, ngImport: i0, template: "<ng-template [ngIf]=\"!formControlRef.disabled && textField.behavior.editable\" [ngIfElse]=\"visibleChart\">\n    <nc-textarea-field [textAreaField]=\"textField\"\n                       [formControlRef]=\"formControlRef\"\n                       [showLargeLayout]=\"showLargeLayout\"></nc-textarea-field>\n</ng-template>\n\n<ng-template #visibleChart>\n    <nc-portal-card *ngIf=\"initialized\" [componentPortal]=\"componentPortal\"></nc-portal-card>\n</ng-template>\n", styles: [""], components: [{ type: TextareaFieldComponent, selector: "nc-textarea-field" }, { type: PortalCardComponent, selector: "nc-portal-card", inputs: ["componentPortal"], outputs: ["selectEvent"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DashboardPortalTextFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nc-dashboard-portal-text-field', template: "<ng-template [ngIf]=\"!formControlRef.disabled && textField.behavior.editable\" [ngIfElse]=\"visibleChart\">\n    <nc-textarea-field [textAreaField]=\"textField\"\n                       [formControlRef]=\"formControlRef\"\n                       [showLargeLayout]=\"showLargeLayout\"></nc-textarea-field>\n</ng-template>\n\n<ng-template #visibleChart>\n    <nc-portal-card *ngIf=\"initialized\" [componentPortal]=\"componentPortal\"></nc-portal-card>\n</ng-template>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i2$2.TranslateService }, { type: i1.DashboardPortalComponentRegistryService }, { type: i0.Injector }]; } });
+
 class TextFieldComponent extends AbstractTextFieldComponent {
     constructor(informAboutInvalidData) {
         super(informAboutInvalidData);
+        this.textFieldComponentEnum = TextFieldComponent$1;
     }
 }
 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                        [dataFieldTemplate]=\"textFieldTemplate\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n<ng-template #textFieldTemplate let-showLargeLayout=\"showLargeLayout\">\n    <div [ngSwitch]=\"dataField.getComponentType()\">\n        <nc-password-text-field *ngSwitchCase=\"'password'\" [passwordTextField]=\"dataField\" [formControlRef]=\"formControl\"\n                                [showLargeLayout]=\"showLargeLayout\"></nc-password-text-field>\n        <nc-textarea-field *ngSwitchCase=\"'textarea'\" [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=\"'richtextarea'\" [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=\"'htmltextarea'\" [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-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" }, { type: PasswordTextFieldComponent, selector: "nc-password-text-field" }, { type: TextareaFieldComponent, selector: "nc-textarea-field" }, { type: RichTextareaFieldComponent, selector: "nc-rich-textarea-field" }, { type: HtmlTextareaFieldComponent, selector: "nc-html-textarea-field" }, { type: SimpleTextFieldComponent, selector: "nc-simple-text-field" }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+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                        [dataFieldTemplate]=\"textFieldTemplate\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n<ng-template #textFieldTemplate let-showLargeLayout=\"showLargeLayout\">\n    <div [ngSwitch]=\"dataField.getComponentType()\">\n        <nc-password-text-field *ngSwitchCase=\"textFieldComponentEnum.PASSWORD\" [passwordTextField]=\"dataField\" [formControlRef]=\"formControl\"\n                                [showLargeLayout]=\"showLargeLayout\"></nc-password-text-field>\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" }, { type: PasswordTextFieldComponent, selector: "nc-password-text-field" }, { type: TextareaFieldComponent, selector: "nc-textarea-field" }, { type: RichTextareaFieldComponent, selector: "nc-rich-textarea-field" }, { type: HtmlTextareaFieldComponent, selector: "nc-html-textarea-field" }, { type: DashboardLineChartTextFieldComponent, selector: "nc-dashboard-line-chart-text-field" }, { type: DashboardPieChartTextFieldComponent, selector: "nc-dashboard-pie-chart-text-field" }, { type: DashboardBarChartTextFieldComponent, selector: "nc-dashboard-bar-chart-text-field" }, { type: DashboardIframeTextFieldComponent, selector: "nc-dashboard-iframe-text-field" }, { type: DashboardPortalTextFieldComponent, selector: "nc-dashboard-portal-text-field" }, { type: SimpleTextFieldComponent, selector: "nc-simple-text-field" }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
 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                        [dataFieldTemplate]=\"textFieldTemplate\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n<ng-template #textFieldTemplate let-showLargeLayout=\"showLargeLayout\">\n    <div [ngSwitch]=\"dataField.getComponentType()\">\n        <nc-password-text-field *ngSwitchCase=\"'password'\" [passwordTextField]=\"dataField\" [formControlRef]=\"formControl\"\n                                [showLargeLayout]=\"showLargeLayout\"></nc-password-text-field>\n        <nc-textarea-field *ngSwitchCase=\"'textarea'\" [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=\"'richtextarea'\" [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=\"'htmltextarea'\" [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-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                        [dataFieldTemplate]=\"textFieldTemplate\"\n                        [offset]=\"taskOffset\">\n</nc-data-field-template>\n\n<ng-template #textFieldTemplate let-showLargeLayout=\"showLargeLayout\">\n    <div [ngSwitch]=\"dataField.getComponentType()\">\n        <nc-password-text-field *ngSwitchCase=\"textFieldComponentEnum.PASSWORD\" [passwordTextField]=\"dataField\" [formControlRef]=\"formControl\"\n                                [showLargeLayout]=\"showLargeLayout\"></nc-password-text-field>\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"] }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -1273,11 +1353,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     args: [NAE_FILTER_FIELD]
                 }] }, { type: i1.SearchService }]; } });
 
+class FilterFieldTabViewContentComponent extends AbstractFilterFieldTabViewContentComponent {
+    constructor(registry, injector, filterField, searchService) {
+        super(registry, injector, filterField, searchService);
+    }
+}
+FilterFieldTabViewContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterFieldTabViewContentComponent, deps: [{ token: i1.DashboardPortalComponentRegistryService }, { token: i0.Injector }, { token: NAE_FILTER_FIELD }, { token: i1.SearchService }], target: i0.ɵɵFactoryTarget.Component });
+FilterFieldTabViewContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FilterFieldTabViewContentComponent, selector: "nc-filter-field-tab-view-content", providers: [
+        { provide: NAE_BASE_FILTER, useFactory: filterFieldBaseFilterFactory, deps: [NAE_FILTER_FIELD] },
+        { provide: AllowedNetsService, useFactory: filterFieldAllowedNetsFactory, deps: [AllowedNetsServiceFactory, NAE_FILTER_FIELD] },
+        CategoryFactory,
+        { provide: NAE_SEARCH_CATEGORIES, useFactory: filterFieldCategoriesFactory, deps: [CategoryResolverService, NAE_FILTER_FIELD] },
+        SearchService
+    ], usesInheritance: true, ngImport: i0, template: "<ng-template [cdkPortalOutlet]=\"componentPortal\"></ng-template>\n", styles: [""], directives: [{ type: i3$5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterFieldTabViewContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nc-filter-field-tab-view-content', providers: [
+                        { provide: NAE_BASE_FILTER, useFactory: filterFieldBaseFilterFactory, deps: [NAE_FILTER_FIELD] },
+                        { provide: AllowedNetsService, useFactory: filterFieldAllowedNetsFactory, deps: [AllowedNetsServiceFactory, NAE_FILTER_FIELD] },
+                        CategoryFactory,
+                        { provide: NAE_SEARCH_CATEGORIES, useFactory: filterFieldCategoriesFactory, deps: [CategoryResolverService, NAE_FILTER_FIELD] },
+                        SearchService
+                    ], template: "<ng-template [cdkPortalOutlet]=\"componentPortal\"></ng-template>\n", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: i1.DashboardPortalComponentRegistryService }, { type: i0.Injector }, { type: i1.FilterField, decorators: [{
+                    type: Inject,
+                    args: [NAE_FILTER_FIELD]
+                }] }, { type: i1.SearchService }]; } });
+
 class FilterFieldComponent extends AbstractFilterFieldComponent {
     constructor(parentInjector, informAboutInvalidData) {
         super(parentInjector, informAboutInvalidData);
     }
     getFilterContentComponent() {
+        if (this.dataField.component?.name === Dashboard.FILTER_TAB_VIEW_COMPONENT_ID) {
+            return FilterFieldTabViewContentComponent;
+        }
         return FilterFieldContentComponent;
     }
 }
@@ -1581,6 +1691,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }] });
 
+class TaskRefDashboardTileComponent extends AbstractTaskRefDashboardTileComponent {
+    constructor(caseResourceService, processService, logger, taskResourceService, callChainService, taskDataService, parentTaskContentService, taskOperations, _injector, _myTaskContentService) {
+        super(caseResourceService, processService, logger, taskResourceService, callChainService, parentTaskContentService, taskDataService, taskOperations);
+        this._injector = _injector;
+        this._myTaskContentService = _myTaskContentService;
+    }
+    ngOnInit() {
+        if (this.tile.isEmpty) {
+            return;
+        }
+        this._subTask = this._parentTaskContentService.task$.subscribe(t => {
+            const fakeTask = Object.assign({}, t);
+            fakeTask.dataGroups = this.tile.dataGroups;
+            this._myTaskContentService.task = fakeTask;
+            this._myTaskContentService.$shouldCreate.next(fakeTask.dataGroups);
+        });
+        this.portal = new ComponentPortal(this.taskContentComponentClassReference, null, this._injector);
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        if (this._subTask !== undefined) {
+            this._subTask.unsubscribe();
+        }
+    }
+}
+TaskRefDashboardTileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TaskRefDashboardTileComponent, deps: [{ token: i1.CaseResourceService }, { token: i1.ProcessService }, { token: i1.LoggerService }, { token: i1.TaskResourceService }, { token: i1.CallChainService }, { token: i1.TaskDataService }, { token: i1.TaskContentService, skipSelf: true }, { token: NAE_TASK_OPERATIONS }, { token: i0.Injector }, { token: i1.TaskContentService, self: true }], target: i0.ɵɵFactoryTarget.Component });
+TaskRefDashboardTileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TaskRefDashboardTileComponent, selector: "nc-task-ref-dashboard-tile", inputs: { taskContentComponentClassReference: "taskContentComponentClassReference" }, providers: [
+        { provide: TaskContentService, useClass: UnlimitedTaskContentService }
+    ], usesInheritance: true, ngImport: i0, template: "<ng-template [ngIf]=\"!tile.isEmpty\" [ngIfElse]=\"newDashboardTile\">\n    <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n</ng-template>\n\n<ng-template #newDashboardTile>\n    <div class=\"fill-available-space\" [class.new-dashboard-tile]=\"!fc.disabled\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <button mat-icon-button\tcolor=\"primary\" *ngIf=\"!fc.disabled\" (click)=\"createNewDashboardTile()\">\n            <mat-icon>add</mat-icon>\n        </button>\n    </div>\n</ng-template>\n", styles: [".fill-available-space{width:100%;height:100%}\n"], components: [{ type: i6.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: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { type: i6$2.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.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: TaskRefDashboardTileComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nc-task-ref-dashboard-tile', providers: [
+                        { provide: TaskContentService, useClass: UnlimitedTaskContentService }
+                    ], template: "<ng-template [ngIf]=\"!tile.isEmpty\" [ngIfElse]=\"newDashboardTile\">\n    <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n</ng-template>\n\n<ng-template #newDashboardTile>\n    <div class=\"fill-available-space\" [class.new-dashboard-tile]=\"!fc.disabled\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n        <button mat-icon-button\tcolor=\"primary\" *ngIf=\"!fc.disabled\" (click)=\"createNewDashboardTile()\">\n            <mat-icon>add</mat-icon>\n        </button>\n    </div>\n</ng-template>\n", styles: [".fill-available-space{width:100%;height:100%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.CaseResourceService }, { type: i1.ProcessService }, { type: i1.LoggerService }, { type: i1.TaskResourceService }, { type: i1.CallChainService }, { type: i1.TaskDataService }, { type: i1.TaskContentService, decorators: [{
+                    type: SkipSelf
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [NAE_TASK_OPERATIONS]
+                }] }, { type: i0.Injector }, { type: i1.TaskContentService, decorators: [{
+                    type: Self
+                }] }]; }, propDecorators: { taskContentComponentClassReference: [{
+                type: Input
+            }] } });
+
+class TaskRefFieldComponent extends AbstractTaskRefFieldComponent {
+    constructor(logger, informAboutInvalidData) {
+        super(logger, informAboutInvalidData);
+    }
+    getGridColumns() {
+        return `repeat(${this.dataField.dashboardCols}, 1fr)`;
+    }
+    getGridRows() {
+        return `repeat(${this.dataField.dashboardRows}, minmax(320px, auto))`;
+    }
+    getTileGridColumn(tile) {
+        return `${tile.x + 1} / span ${tile.cols}`;
+    }
+    getTileGridRow(tile) {
+        return `${tile.y + 1} / span ${tile.rows}`;
+    }
+}
+TaskRefFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TaskRefFieldComponent, deps: [{ token: i1.LoggerService }, { token: NAE_INFORM_ABOUT_INVALID_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+TaskRefFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TaskRefFieldComponent, selector: "nc-task-ref-field", inputs: { taskContentComponentClassReference: "taskContentComponentClassReference" }, usesInheritance: true, ngImport: i0, template: "<!-- TODO extract dashboard implementation into a separate component class to follow the structure of other field implementations -->\n<div class=\"fill-available-space\" [gdColumns]=\"getGridColumns()\" [gdRows]=\"getGridRows()\">\n    <nc-task-ref-dashboard-tile *ngFor=\"let tile of dashboardTiles\"\n                                [tile]=\"tile\"\n                                [taskRef]=\"dataField\"\n                                [fc]=\"formControl\"\n                                [gdColumn]=\"getTileGridColumn(tile)\"\n                                [gdRow]=\"getTileGridRow(tile)\"\n                                [taskContentComponentClassReference]=\"taskContentComponentClassReference\"></nc-task-ref-dashboard-tile>\n</div>\n", styles: [".fill-available-space{width:100%;height:100%}:host ::ng-deep .dashboard-workflow-view,:host ::ng-deep .dashboard-task-list,:host ::ng-deep .dashboard-case-list{min-height:320px!important}:host ::ng-deep .dashboard-iframe-card{min-height:304px!important}:host ::ng-deep .dashboard-bar-chart,:host ::ng-deep .dashboard-pie-chart,:host ::ng-deep .dashboard-line-chart{height:320px!important;width:200px!important}\n"], components: [{ type: TaskRefDashboardTileComponent, selector: "nc-task-ref-dashboard-tile", inputs: ["taskContentComponentClassReference"] }], directives: [{ type: i3$9.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$9.DefaultGridRowsDirective, selector: "  [gdRows],  [gdRows.xs], [gdRows.sm], [gdRows.md], [gdRows.lg], [gdRows.xl],  [gdRows.lt-sm], [gdRows.lt-md], [gdRows.lt-lg], [gdRows.lt-xl],  [gdRows.gt-xs], [gdRows.gt-sm], [gdRows.gt-md], [gdRows.gt-lg]", inputs: ["gdRows", "gdRows.xs", "gdRows.sm", "gdRows.md", "gdRows.lg", "gdRows.xl", "gdRows.lt-sm", "gdRows.lt-md", "gdRows.lt-lg", "gdRows.lt-xl", "gdRows.gt-xs", "gdRows.gt-sm", "gdRows.gt-md", "gdRows.gt-lg"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$9.DefaultGridColumnDirective, selector: "  [gdColumn],  [gdColumn.xs], [gdColumn.sm], [gdColumn.md], [gdColumn.lg], [gdColumn.xl],  [gdColumn.lt-sm], [gdColumn.lt-md], [gdColumn.lt-lg], [gdColumn.lt-xl],  [gdColumn.gt-xs], [gdColumn.gt-sm], [gdColumn.gt-md], [gdColumn.gt-lg]", inputs: ["gdColumn", "gdColumn.xs", "gdColumn.sm", "gdColumn.md", "gdColumn.lg", "gdColumn.xl", "gdColumn.lt-sm", "gdColumn.lt-md", "gdColumn.lt-lg", "gdColumn.lt-xl", "gdColumn.gt-xs", "gdColumn.gt-sm", "gdColumn.gt-md", "gdColumn.gt-lg"] }, { type: i3$9.DefaultGridRowDirective, selector: "  [gdRow],  [gdRow.xs], [gdRow.sm], [gdRow.md], [gdRow.lg], [gdRow.xl],  [gdRow.lt-sm], [gdRow.lt-md], [gdRow.lt-lg], [gdRow.lt-xl],  [gdRow.gt-xs], [gdRow.gt-sm], [gdRow.gt-md], [gdRow.gt-lg]", inputs: ["gdRow", "gdRow.xs", "gdRow.sm", "gdRow.md", "gdRow.lg", "gdRow.xl", "gdRow.lt-sm", "gdRow.lt-md", "gdRow.lt-lg", "gdRow.lt-xl", "gdRow.gt-xs", "gdRow.gt-sm", "gdRow.gt-md", "gdRow.gt-lg"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TaskRefFieldComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nc-task-ref-field', template: "<!-- TODO extract dashboard implementation into a separate component class to follow the structure of other field implementations -->\n<div class=\"fill-available-space\" [gdColumns]=\"getGridColumns()\" [gdRows]=\"getGridRows()\">\n    <nc-task-ref-dashboard-tile *ngFor=\"let tile of dashboardTiles\"\n                                [tile]=\"tile\"\n                                [taskRef]=\"dataField\"\n                                [fc]=\"formControl\"\n                                [gdColumn]=\"getTileGridColumn(tile)\"\n                                [gdRow]=\"getTileGridRow(tile)\"\n                                [taskContentComponentClassReference]=\"taskContentComponentClassReference\"></nc-task-ref-dashboard-tile>\n</div>\n", styles: [".fill-available-space{width:100%;height:100%}:host ::ng-deep .dashboard-workflow-view,:host ::ng-deep .dashboard-task-list,:host ::ng-deep .dashboard-case-list{min-height:320px!important}:host ::ng-deep .dashboard-iframe-card{min-height:304px!important}:host ::ng-deep .dashboard-bar-chart,:host ::ng-deep .dashboard-pie-chart,:host ::ng-deep .dashboard-line-chart{height:320px!important;width:200px!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.LoggerService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [NAE_INFORM_ABOUT_INVALID_DATA]
+                }] }]; }, propDecorators: { taskContentComponentClassReference: [{
+                type: Input
+            }] } });
+
 class DataFieldsComponentModule {
 }
 DataFieldsComponentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DataFieldsComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1621,7 +1807,15 @@ DataFieldsComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0
         I18nDividerFieldComponent,
         I18nTextFieldComponent,
         EasymdeWrapperComponent,
-        UserListFieldComponent], imports: [CommonModule,
+        UserListFieldComponent,
+        TaskRefFieldComponent,
+        TaskRefDashboardTileComponent,
+        DashboardLineChartTextFieldComponent,
+        DashboardPieChartTextFieldComponent,
+        DashboardPortalTextFieldComponent,
+        DashboardBarChartTextFieldComponent,
+        DashboardIframeTextFieldComponent,
+        FilterFieldTabViewContentComponent], imports: [CommonModule,
         FlexLayoutModule,
         MaterialModule,
         CovalentModule,
@@ -1637,7 +1831,9 @@ DataFieldsComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0
         MatProgressSpinnerModule,
         CurrencyModule,
         BrowserModule,
-        BrowserAnimationsModule], exports: [BooleanFieldComponent,
+        BrowserAnimationsModule,
+        DashboardComponentModule,
+        RouterModule], exports: [BooleanFieldComponent,
         ButtonFieldComponent,
         DataFieldTemplateComponent,
         DateFieldComponent,
@@ -1651,7 +1847,8 @@ DataFieldsComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0
         UserFieldComponent,
         FilterFieldComponent,
         I18nFieldComponent,
-        UserListFieldComponent] });
+        UserListFieldComponent,
+        TaskRefFieldComponent] });
 DataFieldsComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DataFieldsComponentModule, providers: [
         { provide: DateAdapter, useClass: CustomDateAdapter }
     ], imports: [[
@@ -1673,7 +1870,9 @@ DataFieldsComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0
             MatProgressSpinnerModule,
             CurrencyModule,
             BrowserModule,
-            BrowserAnimationsModule
+            BrowserAnimationsModule,
+            DashboardComponentModule,
+            RouterModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DataFieldsComponentModule, decorators: [{
             type: NgModule,
@@ -1717,6 +1916,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         I18nTextFieldComponent,
                         EasymdeWrapperComponent,
                         UserListFieldComponent,
+                        TaskRefFieldComponent,
+                        TaskRefDashboardTileComponent,
+                        DashboardLineChartTextFieldComponent,
+                        DashboardPieChartTextFieldComponent,
+                        DashboardPortalTextFieldComponent,
+                        DashboardBarChartTextFieldComponent,
+                        DashboardIframeTextFieldComponent,
+                        FilterFieldTabViewContentComponent,
                     ],
                     exports: [
                         BooleanFieldComponent,
@@ -1733,7 +1940,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         UserFieldComponent,
                         FilterFieldComponent,
                         I18nFieldComponent,
-                        UserListFieldComponent
+                        UserListFieldComponent,
+                        TaskRefFieldComponent
                     ],
                     imports: [
                         CommonModule,
@@ -1754,7 +1962,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         MatProgressSpinnerModule,
                         CurrencyModule,
                         BrowserModule,
-                        BrowserAnimationsModule
+                        BrowserAnimationsModule,
+                        DashboardComponentModule,
+                        RouterModule
                     ],
                     providers: [
                         { provide: DateAdapter, useClass: CustomDateAdapter }
@@ -2356,7 +2566,7 @@ class NavigationTreeComponent extends AbstractNavigationTreeComponent {
     }
 }
 NavigationTreeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationTreeComponent, deps: [{ token: i1.ConfigurationService }, { token: i2$3.Router }, { token: i1.LoggerService }, { token: i1.UserService }, { token: i1.AccessService }, { token: i1.ActiveGroupService }, { token: i1.TaskResourceService }, { token: i1.LanguageService }, { token: i1.DynamicNavigationRouteProviderService }], target: i0.ɵɵFactoryTarget.Component });
-NavigationTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NavigationTreeComponent, selector: "nc-navigation-tree", usesInheritance: true, ngImport: i0, template: "<mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.width.px]=\"width\">\n\n    <!-- This is the tree node template for leaf nodes -->\n    <mat-tree-node *matTreeNodeDef=\"let node\" [routerLink]=\"node.url\" routerLinkActive=\"active-navigation-route\"\n                   matTreeNodeToggle matRipple class=\"tree-node\">\n        <button *ngIf=\"node.level >= 1\" mat-icon-button disabled class=\"margin-component\"></button>\n        <button *ngIf=\"node.level >= 2\" mat-icon-button disabled class=\"margin-component\"></button>\n        <mat-icon color=\"primary\" class=\"tree-node-icon\">{{node.icon}}</mat-icon>\n        {{node.translate ? (node.name | translate) : node.name}}\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=\"mat-tree-node tree-node\" matTreeNodeToggle matRipple\n             [class.bottom-shadow]=\"treeControl.isExpanded(node)\">\n            <button *ngIf=\"node.level >= 1\" mat-icon-button disabled class=\"margin-component\"></button>\n            <button *ngIf=\"node.level >= 2\" mat-icon-button disabled class=\"margin-component\"></button>\n\n            <mat-icon color=\"primary\" class=\"tree-node-icon\">{{node.icon}}</mat-icon>\n            {{node.translate ? (node.name | translate) : node.name}}\n\n            <div fxFlex></div>\n            <button mat-icon-button class=\"nested-tree-expansion-icon\">\n                <mat-icon>\n                    {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\n                </mat-icon>\n            </button>\n        </div>\n        <div [class.nested-tree-invisible]=\"!treeControl.isExpanded(node)\" class=\"darker-background\">\n            <ng-container matTreeNodeOutlet></ng-container>\n        </div>\n    </mat-nested-tree-node>\n</mat-tree>\n", styles: [".navigation-tree{outline:none!important}.nested-tree-invisible{display:none}.darker-background{background-color:#0000000d}.bottom-shadow{box-shadow:0 2px 4px -4px #0003,0 4px 5px -3px #00000024,0 6px 10px -5px #0000001f}.tree-node{outline:none!important;cursor:pointer;padding:4px 12px}.tree-node mat-icon.tree-node-icon{line-height:40px;height:40px;width:24px;margin-right:4px}.tree-node .margin-component{width:8px;margin-right:4px}.nested-tree-expansion-icon{width:24px}\n"], components: [{ type: i3$9.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { type: i6.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: i3$9.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { type: i3$9.MatTreeNode, selector: "mat-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { type: i2$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i3$9.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { type: i3$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i2$3.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$9.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["role", "disabled", "tabIndex", "matNestedTreeNode"], exportAs: ["matNestedTreeNode"] }, { type: i6$2.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$9.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }], pipes: { "translate": i2$2.TranslatePipe } });
+NavigationTreeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NavigationTreeComponent, selector: "nc-navigation-tree", usesInheritance: true, ngImport: i0, template: "<mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.width.px]=\"width\">\n\n    <!-- This is the tree node template for leaf nodes -->\n    <mat-tree-node *matTreeNodeDef=\"let node\" [routerLink]=\"node.url\" routerLinkActive=\"active-navigation-route\"\n                   matTreeNodeToggle matRipple class=\"tree-node\">\n        <button *ngIf=\"node.level >= 1\" mat-icon-button disabled class=\"margin-component\"></button>\n        <button *ngIf=\"node.level >= 2\" mat-icon-button disabled class=\"margin-component\"></button>\n        <mat-icon color=\"primary\" class=\"tree-node-icon\">{{node.icon}}</mat-icon>\n        {{node.translate ? (node.name | translate) : node.name}}\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=\"mat-tree-node tree-node\" matTreeNodeToggle matRipple\n             [class.bottom-shadow]=\"treeControl.isExpanded(node)\">\n            <button *ngIf=\"node.level >= 1\" mat-icon-button disabled class=\"margin-component\"></button>\n            <button *ngIf=\"node.level >= 2\" mat-icon-button disabled class=\"margin-component\"></button>\n\n            <mat-icon color=\"primary\" class=\"tree-node-icon\">{{node.icon}}</mat-icon>\n            {{node.translate ? (node.name | translate) : node.name}}\n\n            <div fxFlex></div>\n            <button mat-icon-button class=\"nested-tree-expansion-icon\">\n                <mat-icon>\n                    {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\n                </mat-icon>\n            </button>\n        </div>\n        <div [class.nested-tree-invisible]=\"!treeControl.isExpanded(node)\" class=\"darker-background\">\n            <ng-container matTreeNodeOutlet></ng-container>\n        </div>\n    </mat-nested-tree-node>\n</mat-tree>\n", styles: [".navigation-tree{outline:none!important}.nested-tree-invisible{display:none}.darker-background{background-color:#0000000d}.bottom-shadow{box-shadow:0 2px 4px -4px #0003,0 4px 5px -3px #00000024,0 6px 10px -5px #0000001f}.tree-node{outline:none!important;cursor:pointer;padding:4px 12px}.tree-node mat-icon.tree-node-icon{line-height:40px;height:40px;width:24px;margin-right:4px}.tree-node .margin-component{width:8px;margin-right:4px}.nested-tree-expansion-icon{width:24px}\n"], components: [{ type: i3$a.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { type: i6.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: i3$a.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { type: i3$a.MatTreeNode, selector: "mat-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { type: i2$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i3$a.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { type: i3$2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { type: i2$3.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$a.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["role", "disabled", "tabIndex", "matNestedTreeNode"], exportAs: ["matNestedTreeNode"] }, { type: i6$2.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.MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }], pipes: { "translate": i2$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationTreeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-navigation-tree', template: "<mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\" [style.width.px]=\"width\">\n\n    <!-- This is the tree node template for leaf nodes -->\n    <mat-tree-node *matTreeNodeDef=\"let node\" [routerLink]=\"node.url\" routerLinkActive=\"active-navigation-route\"\n                   matTreeNodeToggle matRipple class=\"tree-node\">\n        <button *ngIf=\"node.level >= 1\" mat-icon-button disabled class=\"margin-component\"></button>\n        <button *ngIf=\"node.level >= 2\" mat-icon-button disabled class=\"margin-component\"></button>\n        <mat-icon color=\"primary\" class=\"tree-node-icon\">{{node.icon}}</mat-icon>\n        {{node.translate ? (node.name | translate) : node.name}}\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=\"mat-tree-node tree-node\" matTreeNodeToggle matRipple\n             [class.bottom-shadow]=\"treeControl.isExpanded(node)\">\n            <button *ngIf=\"node.level >= 1\" mat-icon-button disabled class=\"margin-component\"></button>\n            <button *ngIf=\"node.level >= 2\" mat-icon-button disabled class=\"margin-component\"></button>\n\n            <mat-icon color=\"primary\" class=\"tree-node-icon\">{{node.icon}}</mat-icon>\n            {{node.translate ? (node.name | translate) : node.name}}\n\n            <div fxFlex></div>\n            <button mat-icon-button class=\"nested-tree-expansion-icon\">\n                <mat-icon>\n                    {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}\n                </mat-icon>\n            </button>\n        </div>\n        <div [class.nested-tree-invisible]=\"!treeControl.isExpanded(node)\" class=\"darker-background\">\n            <ng-container matTreeNodeOutlet></ng-container>\n        </div>\n    </mat-nested-tree-node>\n</mat-tree>\n", styles: [".navigation-tree{outline:none!important}.nested-tree-invisible{display:none}.darker-background{background-color:#0000000d}.bottom-shadow{box-shadow:0 2px 4px -4px #0003,0 4px 5px -3px #00000024,0 6px 10px -5px #0000001f}.tree-node{outline:none!important;cursor:pointer;padding:4px 12px}.tree-node mat-icon.tree-node-icon{line-height:40px;height:40px;width:24px;margin-right:4px}.tree-node .margin-component{width:8px;margin-right:4px}.nested-tree-expansion-icon{width:24px}\n"] }]
@@ -2371,7 +2581,7 @@ class NavigationDrawerComponent extends AbstractNavigationDrawerComponent {
     }
 }
 NavigationDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationDrawerComponent, deps: [{ token: i1$4.BreakpointObserver }, { token: i1.LoggerService }, { token: i1.UserPreferenceService }], target: i0.ɵɵFactoryTarget.Component });
-NavigationDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NavigationDrawerComponent, selector: "nc-navigation-drawer", usesInheritance: true, ngImport: i0, template: "<mat-sidenav-container class=\"drawer-container\" (panright)=\"swipeRight()\" (panleft)=\"swipeLeft()\" autosize>\n    <mat-sidenav #sidenav [mode]=\"config.mode\" [(opened)]=\"opened\" position=\"start\"\n                 [disableClose]=\"config.disableClose\" class=\"drawer-content mat-elevation-z10\"\n                 mwlResizable\n                 [style.width.px]=\"width\"\n                 [resizeCursorPrecision]=\"10\"\n                 [resizeEdges]=\"{ right: true }\"\n                 (resizing)=\"onResizeEvent($event)\">\n        <div class=\"sidenav-wrapper\">\n            <button\n                class=\"sidenav-close-button\"\n                type=\"button\"\n                aria-label=\"Toggle sidenav\"\n                mat-icon-button\n                *ngIf=\"!fixed\"\n                (click)=\"close()\">\n                <mat-icon aria-label=\"Side nav toggle icon\">close</mat-icon>\n            </button>\n            <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex>\n                <nc-user-card *ngIf=\"showUser\" [user]=\"user\" mode=\"full\" [contentWidth]=\"contentWidth\"></nc-user-card>\n                <mat-divider *ngIf=\"showUser\" class=\"drawer-divider\"></mat-divider>\n                <nc-quick-panel *ngIf=\"showQuickPanel\" [items]=\"quickPanelItems\"\n                                [contentWidth]=\"contentWidth\"></nc-quick-panel>\n                <mat-divider *ngIf=\"showQuickPanel\" class=\"drawer-divider\"></mat-divider>\n                <nc-navigation-tree *ngIf=\"navigation\" [contentWidth]=\"contentWidth\"></nc-navigation-tree>\n            </div>\n        </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content>\n        <div class=\"content-wrapper\" fxLayout=\"row\" fxLayoutAlign=\"space-between none\">\n            <button\n                type=\"button\"\n                aria-label=\"Toggle sidenav\"\n                mat-icon-button\n                (click)=\"open()\"\n                *ngIf=\"!sidenav.opened\">\n                <mat-icon aria-label=\"Side nav toggle icon\">menu</mat-icon>\n            </button>\n            <div fxFlex=\"100\">\n                <ng-content></ng-content>\n            </div>\n        </div>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [".drawer-container{height:100%}.drawer-content{min-width:200px;outline:none!important}.mat-drawer-side{border-right:0}mat-divider.drawer-divider{width:90%}.sidenav-wrapper{overflow-x:hidden!important}.sidenav-close-button{position:absolute;right:0;z-index:100}.content-wrapper{height:100%}\n"], components: [{ type: i3$a.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i3$a.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i6.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: UserCardComponent, selector: "nc-user-card" }, { type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: QuickPanelComponent, selector: "nc-quick-panel" }, { type: NavigationTreeComponent, selector: "nc-navigation-tree" }, { type: i3$a.MatSidenavContent, selector: "mat-sidenav-content" }], directives: [{ type: i10$1.ResizableDirective, selector: "[mwlResizable]", inputs: ["resizeEdges", "enableGhostResize", "resizeSnapGrid", "resizeCursors", "resizeCursorPrecision", "ghostElementPositioning", "allowNegativeResizes", "mouseMoveThrottleMS", "validateResize"], outputs: ["resizeStart", "resizing", "resizeEnd"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$2.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.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.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"] }] });
+NavigationDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NavigationDrawerComponent, selector: "nc-navigation-drawer", usesInheritance: true, ngImport: i0, template: "<mat-sidenav-container class=\"drawer-container\" (panright)=\"swipeRight()\" (panleft)=\"swipeLeft()\" autosize>\n    <mat-sidenav #sidenav [mode]=\"config.mode\" [(opened)]=\"opened\" position=\"start\"\n                 [disableClose]=\"config.disableClose\" class=\"drawer-content mat-elevation-z10\"\n                 mwlResizable\n                 [style.width.px]=\"width\"\n                 [resizeCursorPrecision]=\"10\"\n                 [resizeEdges]=\"{ right: true }\"\n                 (resizing)=\"onResizeEvent($event)\">\n        <div class=\"sidenav-wrapper\">\n            <button\n                class=\"sidenav-close-button\"\n                type=\"button\"\n                aria-label=\"Toggle sidenav\"\n                mat-icon-button\n                *ngIf=\"!fixed\"\n                (click)=\"close()\">\n                <mat-icon aria-label=\"Side nav toggle icon\">close</mat-icon>\n            </button>\n            <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex>\n                <nc-user-card *ngIf=\"showUser\" [user]=\"user\" mode=\"full\" [contentWidth]=\"contentWidth\"></nc-user-card>\n                <mat-divider *ngIf=\"showUser\" class=\"drawer-divider\"></mat-divider>\n                <nc-quick-panel *ngIf=\"showQuickPanel\" [items]=\"quickPanelItems\"\n                                [contentWidth]=\"contentWidth\"></nc-quick-panel>\n                <mat-divider *ngIf=\"showQuickPanel\" class=\"drawer-divider\"></mat-divider>\n                <nc-navigation-tree *ngIf=\"navigation\" [contentWidth]=\"contentWidth\"></nc-navigation-tree>\n            </div>\n        </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content>\n        <div class=\"content-wrapper\" fxLayout=\"row\" fxLayoutAlign=\"space-between none\">\n            <button\n                type=\"button\"\n                aria-label=\"Toggle sidenav\"\n                mat-icon-button\n                (click)=\"open()\"\n                *ngIf=\"!sidenav.opened\">\n                <mat-icon aria-label=\"Side nav toggle icon\">menu</mat-icon>\n            </button>\n            <div fxFlex=\"100\">\n                <ng-content></ng-content>\n            </div>\n        </div>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [".drawer-container{height:100%}.drawer-content{min-width:200px;outline:none!important}.mat-drawer-side{border-right:0}mat-divider.drawer-divider{width:90%}.sidenav-wrapper{overflow-x:hidden!important}.sidenav-close-button{position:absolute;right:0;z-index:100}.content-wrapper{height:100%}\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: i6.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: UserCardComponent, selector: "nc-user-card" }, { type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { type: QuickPanelComponent, selector: "nc-quick-panel" }, { type: NavigationTreeComponent, selector: "nc-navigation-tree" }, { type: i3$b.MatSidenavContent, selector: "mat-sidenav-content" }], directives: [{ type: i10$1.ResizableDirective, selector: "[mwlResizable]", inputs: ["resizeEdges", "enableGhostResize", "resizeSnapGrid", "resizeCursors", "resizeCursorPrecision", "ghostElementPositioning", "allowNegativeResizes", "mouseMoveThrottleMS", "validateResize"], outputs: ["resizeStart", "resizing", "resizeEnd"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$2.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.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.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: NavigationDrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-navigation-drawer', template: "<mat-sidenav-container class=\"drawer-container\" (panright)=\"swipeRight()\" (panleft)=\"swipeLeft()\" autosize>\n    <mat-sidenav #sidenav [mode]=\"config.mode\" [(opened)]=\"opened\" position=\"start\"\n                 [disableClose]=\"config.disableClose\" class=\"drawer-content mat-elevation-z10\"\n                 mwlResizable\n                 [style.width.px]=\"width\"\n                 [resizeCursorPrecision]=\"10\"\n                 [resizeEdges]=\"{ right: true }\"\n                 (resizing)=\"onResizeEvent($event)\">\n        <div class=\"sidenav-wrapper\">\n            <button\n                class=\"sidenav-close-button\"\n                type=\"button\"\n                aria-label=\"Toggle sidenav\"\n                mat-icon-button\n                *ngIf=\"!fixed\"\n                (click)=\"close()\">\n                <mat-icon aria-label=\"Side nav toggle icon\">close</mat-icon>\n            </button>\n            <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex>\n                <nc-user-card *ngIf=\"showUser\" [user]=\"user\" mode=\"full\" [contentWidth]=\"contentWidth\"></nc-user-card>\n                <mat-divider *ngIf=\"showUser\" class=\"drawer-divider\"></mat-divider>\n                <nc-quick-panel *ngIf=\"showQuickPanel\" [items]=\"quickPanelItems\"\n                                [contentWidth]=\"contentWidth\"></nc-quick-panel>\n                <mat-divider *ngIf=\"showQuickPanel\" class=\"drawer-divider\"></mat-divider>\n                <nc-navigation-tree *ngIf=\"navigation\" [contentWidth]=\"contentWidth\"></nc-navigation-tree>\n            </div>\n        </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content>\n        <div class=\"content-wrapper\" fxLayout=\"row\" fxLayoutAlign=\"space-between none\">\n            <button\n                type=\"button\"\n                aria-label=\"Toggle sidenav\"\n                mat-icon-button\n                (click)=\"open()\"\n                *ngIf=\"!sidenav.opened\">\n                <mat-icon aria-label=\"Side nav toggle icon\">menu</mat-icon>\n            </button>\n            <div fxFlex=\"100\">\n                <ng-content></ng-content>\n            </div>\n        </div>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n", styles: [".drawer-container{height:100%}.drawer-content{min-width:200px;outline:none!important}.mat-drawer-side{border-right:0}mat-divider.drawer-divider{width:90%}.sidenav-wrapper{overflow-x:hidden!important}.sidenav-close-button{position:absolute;right:0;z-index:100}.content-wrapper{height:100%}\n"] }]
@@ -2405,7 +2615,7 @@ class NavigationRailComponent extends AbstractNavigationRailComponent {
     }
 }
 NavigationRailComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationRailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NavigationRailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NavigationRailComponent, selector: "nc-navigation-rail", usesInheritance: true, ngImport: i0, template: "<mat-sidenav-container class=\"drawer-container\">\n    <mat-sidenav #sideRail mode=\"side\" opened=\"true\" position=\"start\" disableClose=\"true\"\n                 class=\"drawer-content mat-elevation-z16\"\n                 (mouseenter)=\"expandOnHover && open()\"\n                 (mouseleave)=\"expandOnHover && close()\">\n\n        <div [@transform]=\"expanded ? 'expand' : 'collapse'\">\n\n            <div fxLayout=\"column\" fxLayoutAlign=\"start start\" fxFlex>\n                <div fxLayout=\"row\">\n                    <mat-icon>account_circle</mat-icon>\n                    <span *ngIf=\"expanded\" class=\"margin-left-default\">User</span>\n                </div>\n                <div fxLayout=\"row\">\n                    <mat-icon>assignment</mat-icon>\n                    <span *ngIf=\"expanded\" class=\"margin-left-default\">Report</span>\n                </div>\n                <div fxLayout=\"row\">\n                    <mat-icon>bug_report</mat-icon>\n                    <span *ngIf=\"expanded\" class=\"margin-left-default\">Bugs</span>\n                </div>\n                <div fxLayout=\"row\">\n                    <mat-icon>fingerprint</mat-icon>\n                    <span *ngIf=\"expanded\" class=\"margin-left-default\">Security</span>\n                </div>\n            </div>\n\n        </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content [@transformContent]=\"expanded ? 'shrink' : 'grow'\">\n        <ng-content></ng-content>\n    </mat-sidenav-content>\n\n</mat-sidenav-container>\n", styles: [".margin-left-default{margin-left:8px}\n"], components: [{ type: i3$a.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i3$a.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$a.MatSidenavContent, selector: "mat-sidenav-content" }], directives: [{ type: i6$2.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.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.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: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [railAnimation, railContentAnimation] });
+NavigationRailComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NavigationRailComponent, selector: "nc-navigation-rail", usesInheritance: true, ngImport: i0, template: "<mat-sidenav-container class=\"drawer-container\">\n    <mat-sidenav #sideRail mode=\"side\" opened=\"true\" position=\"start\" disableClose=\"true\"\n                 class=\"drawer-content mat-elevation-z16\"\n                 (mouseenter)=\"expandOnHover && open()\"\n                 (mouseleave)=\"expandOnHover && close()\">\n\n        <div [@transform]=\"expanded ? 'expand' : 'collapse'\">\n\n            <div fxLayout=\"column\" fxLayoutAlign=\"start start\" fxFlex>\n                <div fxLayout=\"row\">\n                    <mat-icon>account_circle</mat-icon>\n                    <span *ngIf=\"expanded\" class=\"margin-left-default\">User</span>\n                </div>\n                <div fxLayout=\"row\">\n                    <mat-icon>assignment</mat-icon>\n                    <span *ngIf=\"expanded\" class=\"margin-left-default\">Report</span>\n                </div>\n                <div fxLayout=\"row\">\n                    <mat-icon>bug_report</mat-icon>\n                    <span *ngIf=\"expanded\" class=\"margin-left-default\">Bugs</span>\n                </div>\n                <div fxLayout=\"row\">\n                    <mat-icon>fingerprint</mat-icon>\n                    <span *ngIf=\"expanded\" class=\"margin-left-default\">Security</span>\n                </div>\n            </div>\n\n        </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content [@transformContent]=\"expanded ? 'shrink' : 'grow'\">\n        <ng-content></ng-content>\n    </mat-sidenav-content>\n\n</mat-sidenav-container>\n", styles: [".margin-left-default{margin-left:8px}\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.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$b.MatSidenavContent, selector: "mat-sidenav-content" }], directives: [{ type: i6$2.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.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.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: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [railAnimation, railContentAnimation] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationRailComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-navigation-rail', animations: [railAnimation, railContentAnimation], template: "<mat-sidenav-container class=\"drawer-container\">\n    <mat-sidenav #sideRail mode=\"side\" opened=\"true\" position=\"start\" disableClose=\"true\"\n                 class=\"drawer-content mat-elevation-z16\"\n                 (mouseenter)=\"expandOnHover && open()\"\n                 (mouseleave)=\"expandOnHover && close()\">\n\n        <div [@transform]=\"expanded ? 'expand' : 'collapse'\">\n\n            <div fxLayout=\"column\" fxLayoutAlign=\"start start\" fxFlex>\n                <div fxLayout=\"row\">\n                    <mat-icon>account_circle</mat-icon>\n                    <span *ngIf=\"expanded\" class=\"margin-left-default\">User</span>\n                </div>\n                <div fxLayout=\"row\">\n                    <mat-icon>assignment</mat-icon>\n                    <span *ngIf=\"expanded\" class=\"margin-left-default\">Report</span>\n                </div>\n                <div fxLayout=\"row\">\n                    <mat-icon>bug_report</mat-icon>\n                    <span *ngIf=\"expanded\" class=\"margin-left-default\">Bugs</span>\n                </div>\n                <div fxLayout=\"row\">\n                    <mat-icon>fingerprint</mat-icon>\n                    <span *ngIf=\"expanded\" class=\"margin-left-default\">Security</span>\n                </div>\n            </div>\n\n        </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content [@transformContent]=\"expanded ? 'shrink' : 'grow'\">\n        <ng-content></ng-content>\n    </mat-sidenav-content>\n\n</mat-sidenav-container>\n", styles: [".margin-left-default{margin-left:8px}\n"] }]
@@ -2743,10 +2953,10 @@ 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$3.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\" fxFlex=\"100\">\n            <cdk-virtual-scroll-viewport itemSize=\"50\" (scrolledIndexChange)=\"loadNextPage()\"\n                                         class=\"full-height scroll-container\" [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 4px}\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: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$2.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.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.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: i5$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": i5$1.AsyncPipe, "translate": i2$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\" 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 4px}\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: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$2.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.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.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: i5$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": i5$1.AsyncPipe, "translate": i2$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\" fxFlex=\"100\">\n            <cdk-virtual-scroll-viewport itemSize=\"50\" (scrolledIndexChange)=\"loadNextPage()\"\n                                         class=\"full-height scroll-container\" [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 4px}\n"] }]
+            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\" 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 4px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.CaseViewService }, { type: i1.LoggerService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -2833,11 +3043,13 @@ class FieldComponentResolverComponent extends AbstractFieldComponentResolverComp
     }
 }
 FieldComponentResolverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FieldComponentResolverComponent, deps: [{ token: i1.TaskContentService }], target: i0.ɵɵFactoryTarget.Component });
-FieldComponentResolverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FieldComponentResolverComponent, selector: "nc-field-component-resolver", usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"row\" fxLayoutAlign=\"start center\" class=\"netgrif-input\" [ngClass]=\"{'min-row-height': isField() && !isCustomHeight()}\" [ngSwitch]=\"getElementType()\">\n    <nc-boolean-field *ngSwitchCase=\"fieldTypeEnum.BOOLEAN\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-boolean-field>\n\n    <nc-text-field *ngSwitchCase=\"fieldTypeEnum.TEXT\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-text-field>\n\n    <nc-number-field *ngSwitchCase=\"fieldTypeEnum.NUMBER\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-number-field>\n\n    <nc-enumeration-field *ngSwitchCase=\"fieldTypeEnum.ENUMERATION\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-enumeration-field>\n\n    <nc-enumeration-field *ngSwitchCase=\"fieldTypeEnum.ENUMERATION_MAP\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-enumeration-field>\n\n    <nc-multichoice-field *ngSwitchCase=\"fieldTypeEnum.MULTICHOICE\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-multichoice-field>\n\n    <nc-multichoice-field *ngSwitchCase=\"fieldTypeEnum.MULTICHOICE_MAP\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-multichoice-field>\n\n    <nc-date-field *ngSwitchCase=\"fieldTypeEnum.DATE\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex class=\"date-field-fix\">\n    </nc-date-field>\n\n    <nc-date-time-field *ngSwitchCase=\"fieldTypeEnum.DATE_TIME\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex class=\"date-field-fix\">\n    </nc-date-time-field>\n\n    <nc-file-field *ngSwitchCase=\"fieldTypeEnum.FILE\" [dataField]=\"getDataField()\" [taskId]=\"getTaskId()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-file-field>\n\n    <nc-file-list-field *ngSwitchCase=\"fieldTypeEnum.FILE_LIST\" [dataField]=\"getDataField()\" [taskId]=\"getTaskId()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-file-list-field>\n\n    <nc-user-field *ngSwitchCase=\"fieldTypeEnum.USER\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-user-field>\n\n    <nc-user-list-field *ngSwitchCase=\"fieldTypeEnum.USER_LIST\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-user-list-field>\n\n    <nc-button-field *ngSwitchCase=\"fieldTypeEnum.BUTTON\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-button-field>\n\n    <nc-filter-field *ngSwitchCase=\"fieldTypeEnum.FILTER\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex=\"\">\n    </nc-filter-field>\n\n    <nc-i18n-field *ngSwitchCase=\"fieldTypeEnum.I18N\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-i18n-field>\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</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:75px}.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}\n"], components: [{ type: BooleanFieldComponent, selector: "nc-boolean-field" }, { type: TextFieldComponent, selector: "nc-text-field" }, { type: NumberFieldComponent, selector: "nc-number-field" }, { type: EnumerationFieldComponent, selector: "nc-enumeration-field" }, { type: MultichoiceFieldComponent, selector: "nc-multichoice-field" }, { type: DateFieldComponent, selector: "nc-date-field" }, { type: DateTimeFieldComponent, selector: "nc-date-time-field" }, { type: FileFieldComponent, selector: "nc-file-field" }, { type: FileListFieldComponent, selector: "nc-file-list-field" }, { type: UserFieldComponent, selector: "nc-user-field" }, { type: UserListFieldComponent, selector: "nc-user-list-field" }, { type: ButtonFieldComponent, selector: "nc-button-field" }, { type: FilterFieldComponent, selector: "nc-filter-field" }, { type: I18nFieldComponent, selector: "nc-i18n-field" }], directives: [{ type: i6$2.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.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: i5$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: i5$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6$2.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"] }] });
+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    <nc-boolean-field *ngSwitchCase=\"fieldTypeEnum.BOOLEAN\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-boolean-field>\n\n    <nc-text-field *ngSwitchCase=\"fieldTypeEnum.TEXT\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-text-field>\n\n    <nc-number-field *ngSwitchCase=\"fieldTypeEnum.NUMBER\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-number-field>\n\n    <nc-enumeration-field *ngSwitchCase=\"fieldTypeEnum.ENUMERATION\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-enumeration-field>\n\n    <nc-enumeration-field *ngSwitchCase=\"fieldTypeEnum.ENUMERATION_MAP\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-enumeration-field>\n\n    <nc-multichoice-field *ngSwitchCase=\"fieldTypeEnum.MULTICHOICE\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-multichoice-field>\n\n    <nc-multichoice-field *ngSwitchCase=\"fieldTypeEnum.MULTICHOICE_MAP\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-multichoice-field>\n\n    <nc-date-field *ngSwitchCase=\"fieldTypeEnum.DATE\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex class=\"date-field-fix\">\n    </nc-date-field>\n\n    <nc-date-time-field *ngSwitchCase=\"fieldTypeEnum.DATE_TIME\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex class=\"date-field-fix\">\n    </nc-date-time-field>\n\n    <nc-file-field *ngSwitchCase=\"fieldTypeEnum.FILE\" [dataField]=\"getDataField()\" [taskId]=\"getTaskId()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-file-field>\n\n    <nc-file-list-field *ngSwitchCase=\"fieldTypeEnum.FILE_LIST\" [dataField]=\"getDataField()\" [taskId]=\"getTaskId()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-file-list-field>\n\n    <nc-user-field *ngSwitchCase=\"fieldTypeEnum.USER\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-user-field>\n\n    <nc-user-list-field *ngSwitchCase=\"fieldTypeEnum.USER_LIST\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-user-list-field>\n\n    <nc-button-field *ngSwitchCase=\"fieldTypeEnum.BUTTON\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-button-field>\n\n    <nc-filter-field *ngSwitchCase=\"fieldTypeEnum.FILTER\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex=\"\">\n    </nc-filter-field>\n\n    <nc-i18n-field *ngSwitchCase=\"fieldTypeEnum.I18N\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-i18n-field>\n\n    <nc-task-ref-field *ngSwitchCase=\"fieldTypeEnum.TASK_REF\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" [taskContentComponentClassReference]=\"taskContentComponentClassReference\" fxFlex>\n    </nc-task-ref-field>\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</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:75px}.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}\n"], components: [{ type: BooleanFieldComponent, selector: "nc-boolean-field" }, { type: TextFieldComponent, selector: "nc-text-field" }, { type: NumberFieldComponent, selector: "nc-number-field" }, { type: EnumerationFieldComponent, selector: "nc-enumeration-field" }, { type: MultichoiceFieldComponent, selector: "nc-multichoice-field" }, { type: DateFieldComponent, selector: "nc-date-field" }, { type: DateTimeFieldComponent, selector: "nc-date-time-field" }, { type: FileFieldComponent, selector: "nc-file-field" }, { type: FileListFieldComponent, selector: "nc-file-list-field" }, { type: UserFieldComponent, selector: "nc-user-field" }, { type: UserListFieldComponent, selector: "nc-user-list-field" }, { type: ButtonFieldComponent, selector: "nc-button-field" }, { type: FilterFieldComponent, selector: "nc-filter-field" }, { type: I18nFieldComponent, selector: "nc-i18n-field" }, { type: TaskRefFieldComponent, selector: "nc-task-ref-field", inputs: ["taskContentComponentClassReference"] }], directives: [{ type: i6$2.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.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: i5$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: i5$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i6$2.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: 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    <nc-boolean-field *ngSwitchCase=\"fieldTypeEnum.BOOLEAN\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-boolean-field>\n\n    <nc-text-field *ngSwitchCase=\"fieldTypeEnum.TEXT\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-text-field>\n\n    <nc-number-field *ngSwitchCase=\"fieldTypeEnum.NUMBER\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-number-field>\n\n    <nc-enumeration-field *ngSwitchCase=\"fieldTypeEnum.ENUMERATION\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-enumeration-field>\n\n    <nc-enumeration-field *ngSwitchCase=\"fieldTypeEnum.ENUMERATION_MAP\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-enumeration-field>\n\n    <nc-multichoice-field *ngSwitchCase=\"fieldTypeEnum.MULTICHOICE\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-multichoice-field>\n\n    <nc-multichoice-field *ngSwitchCase=\"fieldTypeEnum.MULTICHOICE_MAP\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-multichoice-field>\n\n    <nc-date-field *ngSwitchCase=\"fieldTypeEnum.DATE\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex class=\"date-field-fix\">\n    </nc-date-field>\n\n    <nc-date-time-field *ngSwitchCase=\"fieldTypeEnum.DATE_TIME\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex class=\"date-field-fix\">\n    </nc-date-time-field>\n\n    <nc-file-field *ngSwitchCase=\"fieldTypeEnum.FILE\" [dataField]=\"getDataField()\" [taskId]=\"getTaskId()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-file-field>\n\n    <nc-file-list-field *ngSwitchCase=\"fieldTypeEnum.FILE_LIST\" [dataField]=\"getDataField()\" [taskId]=\"getTaskId()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-file-list-field>\n\n    <nc-user-field *ngSwitchCase=\"fieldTypeEnum.USER\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-user-field>\n\n    <nc-user-list-field *ngSwitchCase=\"fieldTypeEnum.USER_LIST\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-user-list-field>\n\n    <nc-button-field *ngSwitchCase=\"fieldTypeEnum.BUTTON\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-button-field>\n\n    <nc-filter-field *ngSwitchCase=\"fieldTypeEnum.FILTER\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex=\"\">\n    </nc-filter-field>\n\n    <nc-i18n-field *ngSwitchCase=\"fieldTypeEnum.I18N\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-i18n-field>\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</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:75px}.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}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.TaskContentService }]; } });
+            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    <nc-boolean-field *ngSwitchCase=\"fieldTypeEnum.BOOLEAN\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-boolean-field>\n\n    <nc-text-field *ngSwitchCase=\"fieldTypeEnum.TEXT\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-text-field>\n\n    <nc-number-field *ngSwitchCase=\"fieldTypeEnum.NUMBER\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-number-field>\n\n    <nc-enumeration-field *ngSwitchCase=\"fieldTypeEnum.ENUMERATION\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-enumeration-field>\n\n    <nc-enumeration-field *ngSwitchCase=\"fieldTypeEnum.ENUMERATION_MAP\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-enumeration-field>\n\n    <nc-multichoice-field *ngSwitchCase=\"fieldTypeEnum.MULTICHOICE\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-multichoice-field>\n\n    <nc-multichoice-field *ngSwitchCase=\"fieldTypeEnum.MULTICHOICE_MAP\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-multichoice-field>\n\n    <nc-date-field *ngSwitchCase=\"fieldTypeEnum.DATE\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex class=\"date-field-fix\">\n    </nc-date-field>\n\n    <nc-date-time-field *ngSwitchCase=\"fieldTypeEnum.DATE_TIME\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex class=\"date-field-fix\">\n    </nc-date-time-field>\n\n    <nc-file-field *ngSwitchCase=\"fieldTypeEnum.FILE\" [dataField]=\"getDataField()\" [taskId]=\"getTaskId()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-file-field>\n\n    <nc-file-list-field *ngSwitchCase=\"fieldTypeEnum.FILE_LIST\" [dataField]=\"getDataField()\" [taskId]=\"getTaskId()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-file-list-field>\n\n    <nc-user-field *ngSwitchCase=\"fieldTypeEnum.USER\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-user-field>\n\n    <nc-user-list-field *ngSwitchCase=\"fieldTypeEnum.USER_LIST\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-user-list-field>\n\n    <nc-button-field *ngSwitchCase=\"fieldTypeEnum.BUTTON\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-button-field>\n\n    <nc-filter-field *ngSwitchCase=\"fieldTypeEnum.FILTER\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex=\"\">\n    </nc-filter-field>\n\n    <nc-i18n-field *ngSwitchCase=\"fieldTypeEnum.I18N\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" fxFlex>\n    </nc-i18n-field>\n\n    <nc-task-ref-field *ngSwitchCase=\"fieldTypeEnum.TASK_REF\" [dataField]=\"getDataField()\" [taskOffset]=\"getFieldOffset()\" [taskContentComponentClassReference]=\"taskContentComponentClassReference\" fxFlex>\n    </nc-task-ref-field>\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</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:75px}.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}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.TaskContentService }]; }, propDecorators: { taskContentComponentClassReference: [{
+                type: Input
+            }] } });
 
 class TaskContentComponent extends AbstractTaskContentComponent {
     constructor(_fieldConverter, taskContentService, _paperView, _logger, _taskEventService, config) {
@@ -2847,13 +3059,14 @@ class TaskContentComponent extends AbstractTaskContentComponent {
         this._paperView = _paperView;
         this._logger = _logger;
         this._taskEventService = _taskEventService;
+        this.taskContentComponentClass = TaskContentComponent;
     }
 }
 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\" fxFlex></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}\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" }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$2.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.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: i5$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: i5$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: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8$1.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: i8$1.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: i8$1.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$2.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": i5$1.AsyncPipe, "translate": i2$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\" [taskContentComponentClassReference]=\"taskContentComponentClass\" fxFlex></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}\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: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$2.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.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: i5$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: i5$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: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$9.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$9.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$9.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$2.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": i5$1.AsyncPipe, "translate": i2$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\" fxFlex></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}\n"] }]
+            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\" [taskContentComponentClassReference]=\"taskContentComponentClass\" fxFlex></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}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.FieldConverterService }, { type: i1.TaskContentService }, { type: i1.PaperViewService }, { type: i1.LoggerService }, { type: i1.TaskEventService, decorators: [{
                     type: Optional
                 }] }, { type: undefined, decorators: [{
@@ -2864,8 +3077,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }] }]; } });
 
 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) {
-        super(_taskContentService, _log, _taskViewService, _paperView, _taskEventService, _assignTaskService, _delegateTaskService, _cancelTaskService, _finishTaskService, _taskState, _taskDataService, _assignPolicyService, _finishPolicyService, _callChain, _taskOperations, _disableFunctions, _translate, _currencyPipe, _changedFieldsService, _permissionService, overflowService);
+    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);
         this._taskContentService = _taskContentService;
         this._log = _log;
         this._taskViewService = _taskViewService;
@@ -2887,6 +3100,10 @@ class TaskPanelComponent extends AbstractTaskPanelComponent {
         this._currencyPipe = _currencyPipe;
         this._changedFieldsService = _changedFieldsService;
         this._permissionService = _permissionService;
+        this._taskForceOpen = _taskForceOpen;
+        if (_taskForceOpen) {
+            this.hidePanelHeader = true;
+        }
     }
     createContentPortal() {
         const providers = [
@@ -2902,7 +3119,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: i2$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: i5$1.CurrencyPipe }, { token: i1.ChangedFieldsService }, { token: i1.PermissionService }, { token: i1.OverflowService, 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: i2$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: i5$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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TaskPanelComponent, selector: "nc-task-panel", providers: [
         { provide: TaskContentService, useClass: SingleTaskContentService },
         TaskDataService,
@@ -2917,7 +3134,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 && (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            <div class=\"task-panel-body\" [ngClass]=\"{'paper-view': isPaperView()}\" fxFlex=\"100\">\n                <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n            </div>\n            <mat-action-row 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()\" (click)=\"assign()\" mat-button [disabled]=\"canDisable('assign')\">\n        {{ getAssignTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #delegateButton>\n    <button *ngIf=\"canDo('delegate')\" (click)=\"delegate()\" mat-button [disabled]=\"canDisable('delegate')\">\n        {{ getDelegateTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #reassignButton>\n    <button *ngIf=\"canReassign()\" (click)=\"delegate()\" mat-button [disabled]=\"canDisable('reassign')\">\n        {{ 'tasks.view.reassign' | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #cancelButton>\n    <button *ngIf=\"canCancel()\" (click)=\"cancel()\" mat-button [disabled]=\"canDisable('cancel')\">\n        {{ getCancelTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #finishButton>\n    <button *ngIf=\"canFinish()\" (click)=\"finish()\" mat-button [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-button>\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}\n"], components: [{ type: PanelComponent, selector: "nc-app-panel" }, { type: PanelItemComponent, selector: "nc-panel-item" }, { type: i6.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: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i8.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$2.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.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.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: i5$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: i5$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: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i3$5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { type: i9.MatExpansionPanelActionRow, selector: "mat-action-row" }, { type: i5$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: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i2$2.TranslatePipe, "uppercase": i5$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 && (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 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()\" (click)=\"assign()\" mat-button [disabled]=\"canDisable('assign')\">\n        {{ getAssignTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #delegateButton>\n    <button *ngIf=\"canDo('delegate')\" (click)=\"delegate()\" mat-button [disabled]=\"canDisable('delegate')\">\n        {{ getDelegateTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #reassignButton>\n    <button *ngIf=\"canReassign()\" (click)=\"delegate()\" mat-button [disabled]=\"canDisable('reassign')\">\n        {{ 'tasks.view.reassign' | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #cancelButton>\n    <button *ngIf=\"canCancel()\" (click)=\"cancel()\" mat-button [disabled]=\"canDisable('cancel')\">\n        {{ getCancelTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #finishButton>\n    <button *ngIf=\"canFinish()\" (click)=\"finish()\" mat-button [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-button>\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}\n"], components: [{ type: PanelComponent, selector: "nc-app-panel" }, { type: PanelItemComponent, selector: "nc-panel-item" }, { type: i6.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: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i8.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$2.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.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.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: i5$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: i5$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: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i5$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$5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { type: i9.MatExpansionPanelActionRow, selector: "mat-action-row" }, { type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i2$2.TranslatePipe, "uppercase": i5$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: [
@@ -2934,7 +3151,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         FinishPolicyService,
                         ChangedFieldsService,
                         { provide: NAE_TASK_OPERATIONS, useClass: SubjectTaskOperations },
-                    ], 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 && (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            <div class=\"task-panel-body\" [ngClass]=\"{'paper-view': isPaperView()}\" fxFlex=\"100\">\n                <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n            </div>\n            <mat-action-row 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()\" (click)=\"assign()\" mat-button [disabled]=\"canDisable('assign')\">\n        {{ getAssignTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #delegateButton>\n    <button *ngIf=\"canDo('delegate')\" (click)=\"delegate()\" mat-button [disabled]=\"canDisable('delegate')\">\n        {{ getDelegateTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #reassignButton>\n    <button *ngIf=\"canReassign()\" (click)=\"delegate()\" mat-button [disabled]=\"canDisable('reassign')\">\n        {{ 'tasks.view.reassign' | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #cancelButton>\n    <button *ngIf=\"canCancel()\" (click)=\"cancel()\" mat-button [disabled]=\"canDisable('cancel')\">\n        {{ getCancelTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #finishButton>\n    <button *ngIf=\"canFinish()\" (click)=\"finish()\" mat-button [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-button>\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}\n"] }]
+                    ], 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 && (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 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()\" (click)=\"assign()\" mat-button [disabled]=\"canDisable('assign')\">\n        {{ getAssignTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #delegateButton>\n    <button *ngIf=\"canDo('delegate')\" (click)=\"delegate()\" mat-button [disabled]=\"canDisable('delegate')\">\n        {{ getDelegateTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #reassignButton>\n    <button *ngIf=\"canReassign()\" (click)=\"delegate()\" mat-button [disabled]=\"canDisable('reassign')\">\n        {{ 'tasks.view.reassign' | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #cancelButton>\n    <button *ngIf=\"canCancel()\" (click)=\"cancel()\" mat-button [disabled]=\"canDisable('cancel')\">\n        {{ getCancelTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #finishButton>\n    <button *ngIf=\"canFinish()\" (click)=\"finish()\" mat-button [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-button>\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}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.TaskContentService }, { type: i1.LoggerService }, { type: i1.TaskViewService }, { type: i1.PaperViewService }, { type: i1.TaskEventService }, { type: i1.AssignTaskService }, { type: i1.DelegateTaskService }, { type: i1.CancelTaskService }, { type: i1.FinishTaskService }, { type: i1.TaskRequestStateService }, { type: i1.TaskDataService }, { type: i1.AssignPolicyService }, { type: i1.FinishPolicyService }, { type: i1.CallChainService }, { type: i2$2.TranslateService }, { type: i1.SubjectTaskOperations, decorators: [{
                     type: Inject,
                     args: [NAE_TASK_OPERATIONS]
@@ -2950,6 +3167,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     args: [BOOLEAN_VALUE_LABEL_ENABLED]
                 }] }, { type: i0.Injector }, { type: i5$1.CurrencyPipe }, { type: i1.ChangedFieldsService }, { type: i1.PermissionService }, { type: i1.OverflowService, decorators: [{
                     type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [NAE_TASK_FORCE_OPEN]
                 }] }]; } });
 
 class TaskListComponent extends AbstractTaskListComponent {
@@ -2961,10 +3183,10 @@ 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$3.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\" fxFlex=\"100\">\n            <cdk-virtual-scroll-viewport itemSize=\"52\" (scrolledIndexChange)=\"loadNextPage()\"\n                                         class=\"task-panel-scroll-container full-width full-height\">\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                    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", styles: [".font-size-20{font-size:20px}.full-width{width:100%}.full-height{height:100%}.task-panel-scroll-container{padding:0 4px}\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: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$2.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.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.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: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], pipes: { "async": i5$1.AsyncPipe, "translate": i2$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\" fxFlex=\"100\">\n            <cdk-virtual-scroll-viewport itemSize=\"52\" (scrolledIndexChange)=\"loadNextPage()\" #taskListVirtualScroll\n                                         class=\"task-panel-scroll-container 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                    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", styles: [".font-size-20{font-size:20px}.full-width{width:100%}.full-height{height:100%}.task-panel-scroll-container{padding:0 4px}\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: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6$2.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.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.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: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], pipes: { "async": i5$1.AsyncPipe, "translate": i2$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\" fxFlex=\"100\">\n            <cdk-virtual-scroll-viewport itemSize=\"52\" (scrolledIndexChange)=\"loadNextPage()\"\n                                         class=\"task-panel-scroll-container full-width full-height\">\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                    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", styles: [".font-size-20{font-size:20px}.full-width{width:100%}.full-height{height:100%}.task-panel-scroll-container{padding:0 4px}\n"] }]
+            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\" fxFlex=\"100\">\n            <cdk-virtual-scroll-viewport itemSize=\"52\" (scrolledIndexChange)=\"loadNextPage()\" #taskListVirtualScroll\n                                         class=\"task-panel-scroll-container 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                    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", styles: [".font-size-20{font-size:20px}.full-width{width:100%}.full-height{height:100%}.task-panel-scroll-container{padding:0 4px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.TaskViewService }, { type: i1.LoggerService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -2972,7 +3194,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     args: [NAE_TAB_DATA]
                 }] }, { type: i2$3.ActivatedRoute }]; } });
 
-function baseFilterFactory$3(injectedTabData) {
+function baseFilterFactory$4(injectedTabData) {
     return {
         filter: injectedTabData.baseFilter
     };
@@ -2994,7 +3216,7 @@ DefaultTabbedTaskViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
         { provide: ViewIdService, useValue: null },
         {
             provide: NAE_BASE_FILTER,
-            useFactory: baseFilterFactory$3,
+            useFactory: baseFilterFactory$4,
             deps: [NAE_TAB_DATA]
         },
         {
@@ -3007,7 +3229,7 @@ DefaultTabbedTaskViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             useFactory: tabbedTaskViewConfigurationFactory,
             deps: [NAE_TAB_DATA]
         }
-    ], viewQueries: [{ propertyName: "taskHeaderComponent", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"task-tab-background full-height\">\n    <div fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"content-margin full-height\" >\n        <mat-card class=\"search-panel\">\n            <nc-search class=\"search-width\"></nc-search>\n        </mat-card>\n        <nc-header #header type=\"task\" class=\"task-panel-padding-mini\"></nc-header>\n        <nc-task-list [tasks$]=\"tasks$\" [loading$]=\"loading$\" [allowMultiOpen]=\"false\" [selectedHeaders$]=\"selectedHeaders$\" [textEllipsis]=\"true\" fxFlex></nc-task-list>\n    </div>\n</div>\n", styles: [".task-tab-background{height:100%;width:100%;overflow:auto;background-color:transparent}.search-panel{margin-top:20px}.content-margin{margin:0 20px}.task-panel-padding-mini{padding-bottom:20px;padding-top:20px}.full-height{height:100%}.search-width{width:100%}\n"], components: [{ type: i3$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: SearchComponent, selector: "nc-search" }, { type: HeaderComponent, selector: "nc-header" }, { type: TaskListComponent, selector: "nc-task-list" }], directives: [{ type: i6$2.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.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.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: "taskHeaderComponent", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"task-tab-background full-height min-height-task-custom\">\n    <div fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"content-margin full-height\" >\n        <mat-card class=\"search-panel\">\n            <nc-search class=\"search-width\"></nc-search>\n        </mat-card>\n        <nc-header #header type=\"task\" class=\"task-panel-padding-mini\"></nc-header>\n        <nc-task-list [tasks$]=\"tasks$\" [loading$]=\"loading$\" [allowMultiOpen]=\"false\" [selectedHeaders$]=\"selectedHeaders$\" [textEllipsis]=\"true\" fxFlex></nc-task-list>\n    </div>\n</div>\n", styles: [".task-tab-background{height:100%;width:100%;overflow:auto;background-color:transparent}.search-panel{margin-top:20px}.content-margin{margin:0 20px}.task-panel-padding-mini{padding-bottom:20px;padding-top:20px}.full-height{height:100%}.search-width{width:100%}.min-height-task-custom{min-height:400px;height:400px}\n"], components: [{ type: i3$4.MatCard, selector: "mat-card", exportAs: ["matCard"] }, { type: SearchComponent, selector: "nc-search" }, { type: HeaderComponent, selector: "nc-header" }, { type: TaskListComponent, selector: "nc-task-list" }], directives: [{ type: i6$2.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.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.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: DefaultTabbedTaskViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-default-tabbed-task-view', providers: [
@@ -3018,7 +3240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         { provide: ViewIdService, useValue: null },
                         {
                             provide: NAE_BASE_FILTER,
-                            useFactory: baseFilterFactory$3,
+                            useFactory: baseFilterFactory$4,
                             deps: [NAE_TAB_DATA]
                         },
                         {
@@ -3031,7 +3253,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             useFactory: tabbedTaskViewConfigurationFactory,
                             deps: [NAE_TAB_DATA]
                         }
-                    ], template: "<div class=\"task-tab-background full-height\">\n    <div fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"content-margin full-height\" >\n        <mat-card class=\"search-panel\">\n            <nc-search class=\"search-width\"></nc-search>\n        </mat-card>\n        <nc-header #header type=\"task\" class=\"task-panel-padding-mini\"></nc-header>\n        <nc-task-list [tasks$]=\"tasks$\" [loading$]=\"loading$\" [allowMultiOpen]=\"false\" [selectedHeaders$]=\"selectedHeaders$\" [textEllipsis]=\"true\" fxFlex></nc-task-list>\n    </div>\n</div>\n", styles: [".task-tab-background{height:100%;width:100%;overflow:auto;background-color:transparent}.search-panel{margin-top:20px}.content-margin{margin:0 20px}.task-panel-padding-mini{padding-bottom:20px;padding-top:20px}.full-height{height:100%}.search-width{width:100%}\n"] }]
+                    ], template: "<div class=\"task-tab-background full-height min-height-task-custom\">\n    <div fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"content-margin full-height\" >\n        <mat-card class=\"search-panel\">\n            <nc-search class=\"search-width\"></nc-search>\n        </mat-card>\n        <nc-header #header type=\"task\" class=\"task-panel-padding-mini\"></nc-header>\n        <nc-task-list [tasks$]=\"tasks$\" [loading$]=\"loading$\" [allowMultiOpen]=\"false\" [selectedHeaders$]=\"selectedHeaders$\" [textEllipsis]=\"true\" fxFlex></nc-task-list>\n    </div>\n</div>\n", styles: [".task-tab-background{height:100%;width:100%;overflow:auto;background-color:transparent}.search-panel{margin-top:20px}.content-margin{margin:0 20px}.task-panel-padding-mini{padding-bottom:20px;padding-top:20px}.full-height{height:100%}.search-width{width:100%}.min-height-task-custom{min-height:400px;height:400px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.TaskViewService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [NAE_TAB_DATA]
@@ -3071,7 +3293,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\">\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\"\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>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 .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$6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i2$6.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: i6.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$2.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: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$6.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { type: i6$2.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.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: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { type: i3$5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], pipes: { "async": i5$1.AsyncPipe, "translate": i2$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\">\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\"\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>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 .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$6.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "disableRipple"], exportAs: ["matTabGroup"] }, { type: i2$6.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: i6.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$2.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: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$6.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { type: i6$2.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.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: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8$1.MatBadge, selector: "[matBadge]", inputs: ["matBadgeDisabled", "matBadgeColor", "matBadgeOverlap", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { type: i3$5.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }], pipes: { "async": i5$1.AsyncPipe, "translate": i2$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\">\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\"\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>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 .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"] }]
@@ -3438,8 +3660,9 @@ PanelComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
         SnackBarModule,
         TaskContentComponentModule,
         SideMenuUserAssignComponentModule,
-        SideMenuMultiUserAssignComponentModule,
         CurrencyModule,
+        MatExpansionModule,
+        SideMenuMultiUserAssignComponentModule,
         UtilityModule], exports: [PanelComponent,
         PanelItemComponent,
         TaskPanelComponent,
@@ -3459,8 +3682,9 @@ PanelComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
             SnackBarModule,
             TaskContentComponentModule,
             SideMenuUserAssignComponentModule,
-            SideMenuMultiUserAssignComponentModule,
             CurrencyModule,
+            MatExpansionModule,
+            SideMenuMultiUserAssignComponentModule,
             UtilityModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelComponentModule, decorators: [{
@@ -3488,8 +3712,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         SnackBarModule,
                         TaskContentComponentModule,
                         SideMenuUserAssignComponentModule,
-                        SideMenuMultiUserAssignComponentModule,
                         CurrencyModule,
+                        MatExpansionModule,
+                        SideMenuMultiUserAssignComponentModule,
                         UtilityModule
                     ],
                     exports: [
@@ -3611,7 +3836,7 @@ class NavigationDoubleDrawerComponent extends AbstractNavigationDoubleDrawerComp
     }
 }
 NavigationDoubleDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationDoubleDrawerComponent, deps: [{ token: i2$3.Router }, { token: i2$3.ActivatedRoute }, { token: i1$4.BreakpointObserver }, { token: i1.LanguageService }, { token: i1.UserService }, { token: i1.AccessService }, { token: i1.LoggerService }, { token: i1.ConfigurationService }, { token: i1.UriService }, { 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\" fxLayoutAlign=\"start center\" fxHide.lt-md>\n    <button mat-icon-button (click)=\"toggleMenu()\" class=\"mat-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 class=\"logo-tool\" 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\">\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\">\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\"\n                              fxFlex=\"50\">{{user.fullName}}</span>\n                        <span *ngIf=\"user.isImpersonating()\" class=\"large-menu-item-text\" fxFlex=\"50\">{{user.fullName}}\n                            ({{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\n                        (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\"\n                    class=\"mat-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 moreMenuItems; trackBy: viewsTrackBy' mat-menu-item\n                        [routerLink]='item.routing.path' routerLinkActive=\"active\">\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 *ngIf=\"includeMoreMenu\" mat-icon-button [matMenuTriggerFor]=\"railMenu\"\n                    class=\"mat-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\n    </mat-sidenav>\n\n    <mat-sidenav-content>\n        <mat-sidenav-container class=\"drawer-container\">\n            <mat-sidenav [mode]=\"configRightMenu.mode\" [(opened)]=\"configRightMenu.opened\" position=\"start\"\n                         [disableClose]=\"configRightMenu.disableClose\"\n                         class=\"drawer-content mat-elevation-z8\"\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>\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    <!--    <div fxLayout=\"row\" class=\"icon-container\" fxLayoutAlign=\"center center\"-->\n    <!--         (click)='onHomeClick()'>-->\n    <!--        <mat-icon class=\"icon-large\" [matTooltip]=\"'Home'\" [matTooltipPosition]=\"'right'\">home</mat-icon>-->\n    <!--    </div>-->\n    <button mat-icon-button (click)=\"onHomeClick()\" class=\"mat-button mat-typography menu-font-color\"\n            [matTooltip]=\"'toolbar.menu.home' | translate\"\n            matTooltipPosition=\"right\">\n        <mat-icon>home</mat-icon>\n    </button>\n\n    <!--    <div *ngIf='!isOnZeroLevel()' fxLayout=\"row\" class=\"icon-container\" fxLayoutAlign=\"center center\"-->\n    <!--         (click)='onBackClick()'>-->\n    <!--        <mat-icon class=\"icon-large\" [matTooltip]=\"'Back'\" [matTooltipPosition]=\"'right'\">arrow_back</mat-icon>-->\n    <!--    </div>-->\n    <button *ngIf='!isOnZeroLevel() && (canGoBackLoading$ | async) === false' mat-icon-button (click)=\"onBackClick()\"\n            class=\"mat-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    <!--    <div *ngFor='let node of leftNodes; trackBy: uriNodeTrackBy' fxLayout=\"row\" class=\"icon-container\"-->\n    <!--         fxLayoutAlign=\"center center\"-->\n    <!--         (click)='onLeftSideClick(node)'>-->\n    <!--        <mat-icon class=\"icon-large\" [matTooltip]=\"node.name\"-->\n    <!--                  [matTooltipPosition]=\"'right'\">{{node.id === currentNode.id ? 'folder_open' : 'folder'}}</mat-icon>-->\n    <!--    </div>-->\n    <button *ngFor='let node of leftNodes; trackBy: uriNodeTrackBy' mat-icon-button (click)=\"onNodeClick(node)\"\n            class=\"mat-button mat-typography menu-font-color\" [matTooltip]=\"node.name\" [matTooltipPosition]=\"'right'\"\n            [ngClass]=\"node.id === currentNode.id ? 'rail-selected-color' : ''\">\n        <mat-icon>{{node.id === currentNode.id ? openedFolderIcon : folderIcon}}</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\" 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\" ngClass.gt-sm=\"padding-top-8\">\n        <div class=\"margin-auto cursor-pointer\" *ngIf='rightNodes | isNonEmpty' (click)=\"toggleSection('folders')\"\n             fxLayout=\"row\" fxFlexAlign=\"start center\">\n            <span class=\"headline-text mat-typography\">{{foldersCategoryName | translate}}</span>\n            <div fxFlex></div>\n            <span *ngIf=\"isSectionOpen\" [@indicatorRotate]=\"isSectionOpen.folders ? 'expanded' : 'collapsed'\"\n                  class=\"expansion-indicator mat-typography\"></span>\n        </div>\n        <div [@sectionExpansion]=\"isSectionOpen.folders ? 'expanded' : 'collapsed'\" class=\"box-container\">\n            <div *ngFor='let node of rightNodes; trackBy: uriNodeTrackBy' (click)=\"onNodeClick(node)\"\n                 class=\"tree-node mat-typography mat-body-2\" fxLayoutAlign=\"start center\" routerLinkActive=\"active\">\n                <mat-icon class=\"tree-node-icon\">folder</mat-icon>\n                <span>{{node.name}}</span>\n                <span class=\"menu-item-focus-overlay\"></span>\n            </div>\n        </div>\n\n        <div class=\"margin-auto\" *ngIf='views | isNonEmpty' fxLayout=\"column\" fxFlexAlign=\"center start\">\n            <div *ngIf=\"rightNodes | isNonEmpty\" class=\"line margin-bottom-x2\">\n                <mat-divider></mat-divider>\n            </div>\n            <div class=\"cursor-pointer\" (click)=\"toggleSection('views')\" fxLayout=\"row\" fxFlexAlign=\"start center\"\n                 fxFlex>\n                <span class=\"headline-text mat-typography\">{{viewsCategoryName | translate}}</span>\n                <div fxFlex></div>\n                <span *ngIf=\"isSectionOpen\" [@indicatorRotate]=\"isSectionOpen.views ? 'expanded' : 'collapsed'\"\n                      class=\"expansion-indicator mat-typography\"></span>\n            </div>\n        </div>\n        <div [@sectionExpansion]=\"isSectionOpen.views ? 'expanded' : 'collapsed'\" class=\"box-container\">\n            <div *ngFor='let view of views; trackBy: viewsTrackBy' class=\"tree-node mat-typography\"\n                 fxLayoutAlign=\"start center\" [routerLink]='view.routing.path' routerLinkActive=\"active\"\n                 (click)=\"onViewClick(view)\">\n                <mat-icon class=\"tree-node-icon\">{{view.navigation.icon}}</mat-icon>\n                <span>{{view.navigation.title}}</span>\n                <span class=\"menu-item-focus-overlay\"></span>\n            </div>\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:60px;min-width:60px;top:48px;border-right:none!important}.drawer-container{height:100%}.mat-button{margin-left:10px;margin-right:10px}.drawer-content{width:300px;min-width:300px}.drawer-control{width:60px!important;height:48px;position:absolute;z-index:2}.logo{height:48px}.logo-closed{width:60px!important}.logoimg{margin-left:auto;margin-right:auto;height:46px;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:8px;color:#000000b3;line-height:24px;position:relative;border-radius:18px}.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}.logo-tool{height:48px}.logoimg-tool{height:46px;outline:none!important;cursor:pointer;background:#fafafa}.toolbar{min-height:48px!important;height:48px;border-bottom:1px solid #ddd}@media screen and (max-width: 959.99px){.rail-container{height:calc(100% - 49px)}.rail-content{width:60px;min-width:60px;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{color:#000000b3;padding-left:8px;padding-right:10px;margin-bottom: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}.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)}\n"], components: [{ type: i6.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$a.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i3$a.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: LanguageSelectorComponent, selector: "nc-language-selector" }, { type: i3$a.MatSidenavContent, selector: "mat-sidenav-content" }, { type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i6$2.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: i2.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { type: i6$2.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.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$3.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6$2.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$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i15.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10$1.ResizableDirective, selector: "[mwlResizable]", inputs: ["resizeEdges", "enableGhostResize", "resizeSnapGrid", "resizeCursors", "resizeCursorPrecision", "ghostElementPositioning", "allowNegativeResizes", "mouseMoveThrottleMS", "validateResize"], outputs: ["resizeStart", "resizing", "resizeEnd"] }, { type: i5$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": i2$2.TranslatePipe, "async": i5$1.AsyncPipe, "isNonEmpty": i1.IsNonEmptyPipe }, 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\" fxLayoutAlign=\"start center\" fxHide.lt-md>\n    <button mat-icon-button (click)=\"toggleMenu()\" class=\"mat-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 class=\"logo-tool\" 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\">\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\">\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\"\n                              fxFlex=\"50\">{{user.fullName}}</span>\n                        <span *ngIf=\"user.isImpersonating()\" class=\"large-menu-item-text\" fxFlex=\"50\">{{user.fullName}}\n                            ({{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\n                        (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\"\n                    class=\"mat-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 moreMenuItems; trackBy: viewsTrackBy' mat-menu-item\n                        [routerLink]='item.routing.path' routerLinkActive=\"active\">\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 *ngIf=\"includeMoreMenu\" mat-icon-button [matMenuTriggerFor]=\"railMenu\"\n                    class=\"mat-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\n    </mat-sidenav>\n\n    <mat-sidenav-content>\n        <mat-sidenav-container class=\"drawer-container\">\n            <mat-sidenav [mode]=\"configRightMenu.mode\" [(opened)]=\"configRightMenu.opened\" position=\"start\"\n                         [disableClose]=\"configRightMenu.disableClose\"\n                         class=\"drawer-content mat-elevation-z8\"\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>\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    <!--    <div fxLayout=\"row\" class=\"icon-container\" fxLayoutAlign=\"center center\"-->\n    <!--         (click)='onHomeClick()'>-->\n    <!--        <mat-icon class=\"icon-large\" [matTooltip]=\"'Home'\" [matTooltipPosition]=\"'right'\">home</mat-icon>-->\n    <!--    </div>-->\n    <button mat-icon-button (click)=\"onHomeClick()\" class=\"mat-button mat-typography menu-font-color\"\n            [matTooltip]=\"'toolbar.menu.home' | translate\"\n            matTooltipPosition=\"right\">\n        <mat-icon>home</mat-icon>\n    </button>\n\n    <!--    <div *ngIf='!isOnZeroLevel()' fxLayout=\"row\" class=\"icon-container\" fxLayoutAlign=\"center center\"-->\n    <!--         (click)='onBackClick()'>-->\n    <!--        <mat-icon class=\"icon-large\" [matTooltip]=\"'Back'\" [matTooltipPosition]=\"'right'\">arrow_back</mat-icon>-->\n    <!--    </div>-->\n    <button *ngIf='!isOnZeroLevel() && (canGoBackLoading$ | async) === false' mat-icon-button (click)=\"onBackClick()\"\n            class=\"mat-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    <!--    <div *ngFor='let node of leftNodes; trackBy: uriNodeTrackBy' fxLayout=\"row\" class=\"icon-container\"-->\n    <!--         fxLayoutAlign=\"center center\"-->\n    <!--         (click)='onLeftSideClick(node)'>-->\n    <!--        <mat-icon class=\"icon-large\" [matTooltip]=\"node.name\"-->\n    <!--                  [matTooltipPosition]=\"'right'\">{{node.id === currentNode.id ? 'folder_open' : 'folder'}}</mat-icon>-->\n    <!--    </div>-->\n    <button *ngFor='let node of leftNodes; trackBy: uriNodeTrackBy' mat-icon-button (click)=\"onNodeClick(node)\"\n            class=\"mat-button mat-typography menu-font-color\" [matTooltip]=\"node.name\" [matTooltipPosition]=\"'right'\"\n            [ngClass]=\"node.id === currentNode.id ? 'rail-selected-color' : ''\">\n        <mat-icon>{{node.id === currentNode.id ? openedFolderIcon : folderIcon}}</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\" 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\" ngClass.gt-sm=\"padding-top-8\">\n        <div class=\"margin-auto cursor-pointer\" *ngIf='rightNodes | isNonEmpty' (click)=\"toggleSection('folders')\"\n             fxLayout=\"row\" fxFlexAlign=\"start center\">\n            <span class=\"headline-text mat-typography\">{{foldersCategoryName | translate}}</span>\n            <div fxFlex></div>\n            <span *ngIf=\"isSectionOpen\" [@indicatorRotate]=\"isSectionOpen.folders ? 'expanded' : 'collapsed'\"\n                  class=\"expansion-indicator mat-typography\"></span>\n        </div>\n        <div [@sectionExpansion]=\"isSectionOpen.folders ? 'expanded' : 'collapsed'\" class=\"box-container\">\n            <div *ngFor='let node of rightNodes; trackBy: uriNodeTrackBy' (click)=\"onNodeClick(node)\"\n                 class=\"tree-node mat-typography mat-body-2\" fxLayoutAlign=\"start center\" routerLinkActive=\"active\">\n                <mat-icon class=\"tree-node-icon\">folder</mat-icon>\n                <span>{{node.name}}</span>\n                <span class=\"menu-item-focus-overlay\"></span>\n            </div>\n        </div>\n\n        <div class=\"margin-auto\" *ngIf='views | isNonEmpty' fxLayout=\"column\" fxFlexAlign=\"center start\">\n            <div *ngIf=\"rightNodes | isNonEmpty\" class=\"line margin-bottom-x2\">\n                <mat-divider></mat-divider>\n            </div>\n            <div class=\"cursor-pointer\" (click)=\"toggleSection('views')\" fxLayout=\"row\" fxFlexAlign=\"start center\"\n                 fxFlex>\n                <span class=\"headline-text mat-typography\">{{viewsCategoryName | translate}}</span>\n                <div fxFlex></div>\n                <span *ngIf=\"isSectionOpen\" [@indicatorRotate]=\"isSectionOpen.views ? 'expanded' : 'collapsed'\"\n                      class=\"expansion-indicator mat-typography\"></span>\n            </div>\n        </div>\n        <div [@sectionExpansion]=\"isSectionOpen.views ? 'expanded' : 'collapsed'\" class=\"box-container\">\n            <div *ngFor='let view of views; trackBy: viewsTrackBy' class=\"tree-node mat-typography\"\n                 fxLayoutAlign=\"start center\" [routerLink]='view.routing.path' routerLinkActive=\"active\"\n                 (click)=\"onViewClick(view)\">\n                <mat-icon class=\"tree-node-icon\">{{view.navigation.icon}}</mat-icon>\n                <span>{{view.navigation.title}}</span>\n                <span class=\"menu-item-focus-overlay\"></span>\n            </div>\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:60px;min-width:60px;top:48px;border-right:none!important}.drawer-container{height:100%}.mat-button{margin-left:10px;margin-right:10px}.drawer-content{width:300px;min-width:300px}.drawer-control{width:60px!important;height:48px;position:absolute;z-index:2}.logo{height:48px}.logo-closed{width:60px!important}.logoimg{margin-left:auto;margin-right:auto;height:46px;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:8px;color:#000000b3;line-height:24px;position:relative;border-radius:18px}.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}.logo-tool{height:48px}.logoimg-tool{height:46px;outline:none!important;cursor:pointer;background:#fafafa}.toolbar{min-height:48px!important;height:48px;border-bottom:1px solid #ddd}@media screen and (max-width: 959.99px){.rail-container{height:calc(100% - 49px)}.rail-content{width:60px;min-width:60px;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{color:#000000b3;padding-left:8px;padding-right:10px;margin-bottom: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}.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)}\n"], components: [{ type: i6.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: i8.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i8.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" }, { type: i11.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], directives: [{ type: i6$2.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: i2.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { type: i6$2.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.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$3.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6$2.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$3.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i15.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10$1.ResizableDirective, selector: "[mwlResizable]", inputs: ["resizeEdges", "enableGhostResize", "resizeSnapGrid", "resizeCursors", "resizeCursorPrecision", "ghostElementPositioning", "allowNegativeResizes", "mouseMoveThrottleMS", "validateResize"], outputs: ["resizeStart", "resizing", "resizeEnd"] }, { type: i5$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": i2$2.TranslatePipe, "async": i5$1.AsyncPipe, "isNonEmpty": i1.IsNonEmptyPipe }, animations: [
         trigger('sectionExpansion', [
             state('expanded, void', style({
                 height: '*',
@@ -3813,7 +4038,7 @@ class NewCaseComponent extends AbstractNewCaseComponent {
         this.isVersionVisible = _sideMenuControl.isVersionVisible;
     }
 }
-NewCaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NewCaseComponent, deps: [{ token: NAE_SIDE_MENU_CONTROL }, { token: i1$1.FormBuilder }, { token: i1.SnackBarService }, { token: i1.CaseResourceService }, { token: i3$b.HotkeysService }, { token: i2$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+NewCaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NewCaseComponent, deps: [{ token: NAE_SIDE_MENU_CONTROL }, { token: i1$1.FormBuilder }, { token: i1.SnackBarService }, { token: i1.CaseResourceService }, { token: i3$c.HotkeysService }, { token: i2$2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
 NewCaseComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NewCaseComponent, selector: "nc-new-case", providers: [{
             provide: STEPPER_GLOBAL_OPTIONS, useValue: { showError: true }
         }], usesInheritance: true, ngImport: i0, template: "<div #toolbar class=\"custom-mat-toolbar\" fxLayout=\"column\" fxLayoutAlign=\"center none\">\n    {{titleShortening()}}\n</div>\n<mat-vertical-stepper *ngIf=\"hasMultipleNets$ | async\" linear #stepper1 class=\"netgrif-input\">\n    <mat-step [stepControl]=\"processFormControl\" errorMessage=\"{{'side-menu.new-case.errFirst' | translate}}\">\n        <ng-template matStepLabel>{{'side-menu.new-case.choose' | translate}}</ng-template>\n        <mat-form-field appearance=\"outline\">\n            <input type=\"text\" matInput [formControl]=\"processFormControl\" [matAutocomplete]=\"auto\" required\n                   (keyup.enter)=\"nextStep()\" (change)=\"checkVersion(processFormControl.value)\">\n            <span class=\"version-span\" *ngIf=\"isVersionVisible\" matSuffix>{{netVersion}}</span>\n            <mat-autocomplete #auto=\"matAutocomplete\" [displayWith]=\"displayFn\"\n                              (optionSelected)=\"showVersion($event.option)\">\n                <mat-option *ngFor=\"let option of filteredOptions$ | async\" [value]=\"option\">\n                    {{option.viewValue}}\n                    <span class=\"version-span\" *ngIf=\"isVersionVisible\">{{option.version}}</span>\n                </mat-option>\n            </mat-autocomplete>\n        </mat-form-field>\n        <div>\n            <button *ngIf=\"isCaseTitleEnabled()\" mat-button\n                    (click)=\"toNextStep(processFormControl.value)\">{{'side-menu.new-case.next' | translate}}</button>\n            <button *ngIf=\"!isCaseTitleEnabled()\" mat-raised-button color=\"primary\"\n                    (click)=\"createNewCase()\">{{'side-menu.new-case.create' | translate}}</button>\n        </div>\n    </mat-step>\n    <mat-step *ngIf=\"isCaseTitleEnabled()\" [stepControl]=\"titleFormControl\"\n              errorMessage=\"{{'side-menu.new-case.errSecond' | translate}}\">\n        <ng-template matStepLabel>{{'side-menu.new-case.caseTitle' | translate}}</ng-template>\n        <mat-form-field appearance=\"outline\">\n            <input matInput placeholder=\"Title\" autocomplete=\"off\" [formControl]=\"titleFormControl\"\n                   [required]=\"isCaseTitleRequired()\" (keyup.enter)=\"nextStep()\">\n        </mat-form-field>\n        <div>\n            <button mat-button\n                    (click)=\"stepper1.reset(); checkVersion(processFormControl.value)\">{{'side-menu.new-case.reset' | translate}}</button>\n            <button mat-button (click)=\"createNewCase()\">\n                <mat-spinner *ngIf=\"loadingSubmit | async\"\n                             mode=\"indeterminate\"\n                             diameter=\"36\"\n                             color=\"accent\"\n                             fxFlex></mat-spinner>\n                <span *ngIf=\"(loadingSubmit | async) === false\"\n                      fxFlex>{{'side-menu.new-case.create' | translate}}</span>\n            </button>\n        </div>\n    </mat-step>\n</mat-vertical-stepper>\n<mat-vertical-stepper *ngIf=\"(hasMultipleNets$ | async) === false\" linear #stepper2 class=\"netgrif-input\">\n    <mat-step [stepControl]=\"titleFormControl\" errorMessage=\"{{'side-menu.new-case.errSecond' | translate}}\">\n        <ng-template matStepLabel>{{'side-menu.new-case.caseTitle' | translate}}</ng-template>\n        <mat-form-field appearance=\"outline\">\n            <input matInput placeholder=\"Title\" autocomplete=\"off\" [formControl]=\"titleFormControl\"\n                   [required]=\"isCaseTitleRequired()\" (keyup.enter)=\"nextStep()\">\n        </mat-form-field>\n        <div>\n            <button mat-button (click)=\"stepper2.reset()\">{{'side-menu.new-case.reset' | translate}}</button>\n            <button mat-raised-button color=\"primary\"\n                    (click)=\"createNewCase()\">{{'side-menu.new-case.create' | translate}}</button>\n        </div>\n    </mat-step>\n</mat-vertical-stepper>\n<div *ngIf=\"(notInitialized$ | async)\" fxLayout=\"row\" fxLayoutAlign=\"center center\">\n    <mat-spinner class=\"spinner-margin\"></mat-spinner>\n</div>\n", styles: [".version-span{padding-left:8px;color:gray}.spinner-margin{margin-top:16px}\n"], components: [{ type: i5$5.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["selectedIndex", "disableRipple", "color", "labelPosition"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { type: i5$5.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i4$3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$2.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i6.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: i6$2.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.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: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5$5.MatStepLabel, selector: "[matStepLabel]" }, { 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: i4$3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { 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: i5$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6$2.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": i5$1.AsyncPipe, "translate": i2$2.TranslatePipe } });
@@ -3825,7 +4050,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
         }], ctorParameters: function () { return [{ type: i1.SideMenuControl, decorators: [{
                     type: Inject,
                     args: [NAE_SIDE_MENU_CONTROL]
-                }] }, { type: i1$1.FormBuilder }, { type: i1.SnackBarService }, { type: i1.CaseResourceService }, { type: i3$b.HotkeysService }, { type: i2$2.TranslateService }]; } });
+                }] }, { type: i1$1.FormBuilder }, { type: i1.SnackBarService }, { type: i1.CaseResourceService }, { type: i3$c.HotkeysService }, { type: i2$2.TranslateService }]; } });
 
 class SideMenuNewCaseComponentModule {
 }
@@ -3837,7 +4062,7 @@ SideMenuNewCaseComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "1
         FlexModule,
         FormsModule,
         SnackBarModule,
-        TranslateLibModule, i3$b.HotkeyModule], exports: [NewCaseComponent] });
+        TranslateLibModule, i3$c.HotkeyModule], exports: [NewCaseComponent] });
 SideMenuNewCaseComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SideMenuNewCaseComponentModule, providers: [
         { provide: NAE_NEW_CASE_COMPONENT, useValue: NewCaseComponent }
     ], imports: [[
@@ -4082,7 +4307,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }] });
 
-function baseFilterFactory$2(sideMenuControl) {
+function baseFilterFactory$3(sideMenuControl) {
     if (!sideMenuControl.data) {
         throw new Error('NewFilterCaseId was not provided in the sidemenu injectio data');
     }
@@ -4094,7 +4319,7 @@ function baseFilterFactory$2(sideMenuControl) {
         })
     };
 }
-function localAllowedNetsFactory$2(factory) {
+function localAllowedNetsFactory$3(factory) {
     return factory.createFromArray([UserFilterConstants.FILTER_NET_IDENTIFIER]);
 }
 class SaveFilterComponent extends AbstractSaveFilterComponent {
@@ -4107,11 +4332,11 @@ SaveFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         TaskViewService,
         SearchService,
         { provide: NAE_BASE_FILTER,
-            useFactory: baseFilterFactory$2,
+            useFactory: baseFilterFactory$3,
             deps: [NAE_SIDE_MENU_CONTROL]
         },
         { provide: AllowedNetsService,
-            useFactory: localAllowedNetsFactory$2,
+            useFactory: localAllowedNetsFactory$3,
             deps: [AllowedNetsServiceFactory] },
     ], usesInheritance: true, ngImport: i0, template: "<mat-toolbar color=\"primary\">{{'search.tooltip.save' | translate}}</mat-toolbar>\n<div class=\"save-filter-container side-menu-root\">\n    <nc-task-list [allowMultiOpen]=\"false\" [tasks$]=\"tasks$\" [loading$]=\"loading$\" [textEllipsis]=\"true\" [forceLoadDataOnOpen]=\"true\"\n                  [responsiveBody]=\"true\" [selectedHeaders$]=\"selectedHeaders$\" (taskEvent)=\"processTaskEvents($event)\" fxFlex class=\"virtual-scroll-list-padding\"></nc-task-list>\n</div>\n", styles: [".save-filter-container{height:calc(100% - 64px);padding-left:8px;padding-right:8px}.virtual-scroll-list-padding{padding-right:4px}\n"], components: [{ type: i2.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { type: TaskListComponent, selector: "nc-task-list" }], directives: [{ type: i6$2.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": i2$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SaveFilterComponent, decorators: [{
@@ -4120,11 +4345,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         TaskViewService,
                         SearchService,
                         { provide: NAE_BASE_FILTER,
-                            useFactory: baseFilterFactory$2,
+                            useFactory: baseFilterFactory$3,
                             deps: [NAE_SIDE_MENU_CONTROL]
                         },
                         { provide: AllowedNetsService,
-                            useFactory: localAllowedNetsFactory$2,
+                            useFactory: localAllowedNetsFactory$3,
                             deps: [AllowedNetsServiceFactory] },
                     ], template: "<mat-toolbar color=\"primary\">{{'search.tooltip.save' | translate}}</mat-toolbar>\n<div class=\"save-filter-container side-menu-root\">\n    <nc-task-list [allowMultiOpen]=\"false\" [tasks$]=\"tasks$\" [loading$]=\"loading$\" [textEllipsis]=\"true\" [forceLoadDataOnOpen]=\"true\"\n                  [responsiveBody]=\"true\" [selectedHeaders$]=\"selectedHeaders$\" (taskEvent)=\"processTaskEvents($event)\" fxFlex class=\"virtual-scroll-list-padding\"></nc-task-list>\n</div>\n", styles: [".save-filter-container{height:calc(100% - 64px);padding-left:8px;padding-right:8px}.virtual-scroll-list-padding{padding-right:4px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.SideMenuControl, decorators: [{
@@ -4164,14 +4389,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }] });
 
-function baseFilterFactory$1(sideMenuControl) {
+function baseFilterFactory$2(sideMenuControl) {
     if (!sideMenuControl.data) {
         throw new Error('NewFilterCaseId was not provided in the side menu injection data');
     }
     const injectedData = sideMenuControl.data;
     return { filter: injectedData.filter };
 }
-function localAllowedNetsFactory$1(factory) {
+function localAllowedNetsFactory$2(factory) {
     return factory.createFromArray([UserFilterConstants.FILTER_NET_IDENTIFIER]);
 }
 class LoadFilterComponent extends AbstractLoadFilterComponent {
@@ -4187,10 +4412,10 @@ LoadFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
         CaseViewService,
         SearchService,
         { provide: NAE_BASE_FILTER,
-            useFactory: baseFilterFactory$1,
+            useFactory: baseFilterFactory$2,
             deps: [NAE_SIDE_MENU_CONTROL] },
         { provide: AllowedNetsService,
-            useFactory: localAllowedNetsFactory$1,
+            useFactory: localAllowedNetsFactory$2,
             deps: [AllowedNetsServiceFactory] },
         { provide: NAE_DEFAULT_HEADERS,
             useValue: ['meta-title', `${UserFilterConstants.FILTER_NET_IDENTIFIER}-${UserFilterConstants.FILTER_FIELD_ID}`] }
@@ -4201,10 +4426,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         CaseViewService,
                         SearchService,
                         { provide: NAE_BASE_FILTER,
-                            useFactory: baseFilterFactory$1,
+                            useFactory: baseFilterFactory$2,
                             deps: [NAE_SIDE_MENU_CONTROL] },
                         { provide: AllowedNetsService,
-                            useFactory: localAllowedNetsFactory$1,
+                            useFactory: localAllowedNetsFactory$2,
                             deps: [AllowedNetsServiceFactory] },
                         { provide: NAE_DEFAULT_HEADERS,
                             useValue: ['meta-title', `${UserFilterConstants.FILTER_NET_IDENTIFIER}-${UserFilterConstants.FILTER_FIELD_ID}`] }
@@ -4357,14 +4582,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }] });
 
-function baseFilterFactory(sideMenuControl) {
+function baseFilterFactory$1(sideMenuControl) {
     if (!sideMenuControl.data) {
         throw new Error('NewFilterCaseId was not provided in the side menu injection data');
     }
     const injectedData = sideMenuControl.data;
     return { filter: injectedData.filter };
 }
-function localAllowedNetsFactory(factory) {
+function localAllowedNetsFactory$1(factory) {
     return factory.createFromArray([UserImpersonationConstants.IMPERSONATION_CONFIG_NET_IDENTIFIER]);
 }
 class UserImpersonateComponent extends AbstractUserImpersonateComponent {
@@ -4380,10 +4605,10 @@ UserImpersonateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
         CaseViewService,
         SearchService,
         { provide: NAE_BASE_FILTER,
-            useFactory: baseFilterFactory,
+            useFactory: baseFilterFactory$1,
             deps: [NAE_SIDE_MENU_CONTROL] },
         { provide: AllowedNetsService,
-            useFactory: localAllowedNetsFactory,
+            useFactory: localAllowedNetsFactory$1,
             deps: [AllowedNetsServiceFactory] },
         { provide: NAE_DEFAULT_HEADERS,
             useValue: [
@@ -4398,10 +4623,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         CaseViewService,
                         SearchService,
                         { provide: NAE_BASE_FILTER,
-                            useFactory: baseFilterFactory,
+                            useFactory: baseFilterFactory$1,
                             deps: [NAE_SIDE_MENU_CONTROL] },
                         { provide: AllowedNetsService,
-                            useFactory: localAllowedNetsFactory,
+                            useFactory: localAllowedNetsFactory$1,
                             deps: [AllowedNetsServiceFactory] },
                         { provide: NAE_DEFAULT_HEADERS,
                             useValue: [
@@ -4556,7 +4781,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$a.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { type: i3$a.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { type: i3$a.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: i3$5.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: 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$5.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"] }]
@@ -4697,10 +4922,10 @@ class WorkflowViewComponent extends AbstractWorkflowViewComponent {
     }
 }
 WorkflowViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: WorkflowViewComponent, deps: [{ token: i1.SideMenuService }, { token: i1.WorkflowViewService }, { token: i1.LoggerService }, { token: i1.ProcessService }], target: i0.ɵɵFactoryTarget.Component });
-WorkflowViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: WorkflowViewComponent, selector: "nc-workflow-view", providers: [WorkflowViewService], usesInheritance: true, ngImport: i0, template: "<div class=\"workflow-container full-height\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n    <div>\n        <button mat-fab color=\"primary\" class=\"upload-petri-net\" (click)=\"importNet()\">\n            <mat-icon>cloud_upload</mat-icon>\n        </button>\n    </div>\n    <div fxLayout=\"row\" fxLayoutAlign=\"center\" class=\"workflow-header\">\n        <nc-header #header fxFlex=\"100\" [type]=\"headerType\"></nc-header>\n    </div>\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex class=\"workflow-panels-container\">\n        <ng-container *ngIf=\"workflows$ | async as workflows\">\n\n            <div *ngIf=\"(loading$ | async) === false && workflows.length === 0\" fxLayout=\"column\"\n                 fxLayoutAlign=\"center center\">\n                <mat-icon color=\"accent\" class=\"font-size-40 block-size-40 margin-bottom-default\">linear_scale\n                </mat-icon>\n                <span class=\"font-size-20\">{{ 'view-list.noProcessesSatisfyingThisFilter' | translate}}</span>\n            </div>\n\n            <mat-accordion [multi]=\"true\" fxFlex=\"100\" class=\"full-width\">\n\n                <cdk-virtual-scroll-viewport itemSize=\"50\" (scrolledIndexChange)=\"loadNextPage()\" class=\"full-height full-width\">\n\n                    <nc-workflow-panel\n                        *cdkVirtualFor=\"let workflow of workflows; let i = index; templateCacheSize: 0; trackBy: trackBy\"\n                        [workflow]=\"workflow\"\n                        [selectedHeaders$]=\"selectedHeaders$\"\n                        [showDeleteMenu]=\"showDeleteMenu\">\n                    </nc-workflow-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\n            </mat-accordion>\n        </ng-container>\n    </div>\n</div>\n", styles: [".workflow-container{padding:16px}.workflow-header,.workflow-panels-container{margin-top:16px}.upload-petri-net{position:fixed;bottom:24px;right:24px;z-index:999}.full-width{width:100%}.full-height{height:100%}.font-size-20{font-size:20px}.font-size-40{font-size:40px}.block-size-40{width:40px;height:40px}\n"], components: [{ type: i6.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: HeaderComponent, selector: "nc-header" }, { type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: WorkflowPanelComponent, selector: "nc-workflow-panel" }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i6$2.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.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.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: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], pipes: { "async": i5$1.AsyncPipe, "translate": i2$2.TranslatePipe } });
+WorkflowViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: WorkflowViewComponent, selector: "nc-workflow-view", providers: [WorkflowViewService], usesInheritance: true, ngImport: i0, template: "<div class=\"workflow-container full-height\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n    <div>\n        <button mat-fab color=\"primary\" class=\"upload-petri-net\" (click)=\"importNet()\">\n            <mat-icon>cloud_upload</mat-icon>\n        </button>\n    </div>\n    <div fxLayout=\"row\" fxLayoutAlign=\"center\" class=\"workflow-header\">\n        <nc-header #header fxFlex=\"100\" [type]=\"headerType\"></nc-header>\n    </div>\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex class=\"workflow-panels-container\">\n        <ng-container *ngIf=\"workflows$ | async as workflows\">\n\n            <div *ngIf=\"(loading$ | async) === false && workflows.length === 0\" fxLayout=\"column\"\n                 fxLayoutAlign=\"center center\">\n                <mat-icon color=\"accent\" class=\"font-size-40 block-size-40 margin-bottom-default\">linear_scale\n                </mat-icon>\n                <span class=\"font-size-20\">{{ 'view-list.noProcessesSatisfyingThisFilter' | translate}}</span>\n            </div>\n\n            <mat-accordion [multi]=\"true\" fxFlex=\"100\" class=\"full-width\">\n                <cdk-virtual-scroll-viewport itemSize=\"50\" (scrolledIndexChange)=\"loadNextPage()\"\n                                             class=\"full-height full-width dashboard-workflow-view\">\n\n                    <nc-workflow-panel\n                        *cdkVirtualFor=\"let workflow of workflows; let i = index; templateCacheSize: 0; trackBy: trackBy\"\n                        [workflow]=\"workflow\"\n                        [selectedHeaders$]=\"selectedHeaders$\"\n                        [showDeleteMenu]=\"showDeleteMenu\">\n                    </nc-workflow-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\n            </mat-accordion>\n        </ng-container>\n    </div>\n</div>\n", styles: [".workflow-container{padding:16px}.workflow-header,.workflow-panels-container{margin-top:16px}.upload-petri-net{position:fixed;bottom:24px;right:24px;z-index:999}.full-width{width:100%}.full-height{height:100%}.font-size-20{font-size:20px}.font-size-40{font-size:40px}.block-size-40{width:40px;height:40px}\n"], components: [{ type: i6.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: HeaderComponent, selector: "nc-header" }, { type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { type: WorkflowPanelComponent, selector: "nc-workflow-panel" }, { type: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "diameter", "strokeWidth", "mode", "value"], exportAs: ["matProgressSpinner"] }], directives: [{ type: i6$2.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.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.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: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], pipes: { "async": i5$1.AsyncPipe, "translate": i2$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: WorkflowViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nc-workflow-view', providers: [WorkflowViewService], template: "<div class=\"workflow-container full-height\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n    <div>\n        <button mat-fab color=\"primary\" class=\"upload-petri-net\" (click)=\"importNet()\">\n            <mat-icon>cloud_upload</mat-icon>\n        </button>\n    </div>\n    <div fxLayout=\"row\" fxLayoutAlign=\"center\" class=\"workflow-header\">\n        <nc-header #header fxFlex=\"100\" [type]=\"headerType\"></nc-header>\n    </div>\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex class=\"workflow-panels-container\">\n        <ng-container *ngIf=\"workflows$ | async as workflows\">\n\n            <div *ngIf=\"(loading$ | async) === false && workflows.length === 0\" fxLayout=\"column\"\n                 fxLayoutAlign=\"center center\">\n                <mat-icon color=\"accent\" class=\"font-size-40 block-size-40 margin-bottom-default\">linear_scale\n                </mat-icon>\n                <span class=\"font-size-20\">{{ 'view-list.noProcessesSatisfyingThisFilter' | translate}}</span>\n            </div>\n\n            <mat-accordion [multi]=\"true\" fxFlex=\"100\" class=\"full-width\">\n\n                <cdk-virtual-scroll-viewport itemSize=\"50\" (scrolledIndexChange)=\"loadNextPage()\" class=\"full-height full-width\">\n\n                    <nc-workflow-panel\n                        *cdkVirtualFor=\"let workflow of workflows; let i = index; templateCacheSize: 0; trackBy: trackBy\"\n                        [workflow]=\"workflow\"\n                        [selectedHeaders$]=\"selectedHeaders$\"\n                        [showDeleteMenu]=\"showDeleteMenu\">\n                    </nc-workflow-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\n            </mat-accordion>\n        </ng-container>\n    </div>\n</div>\n", styles: [".workflow-container{padding:16px}.workflow-header,.workflow-panels-container{margin-top:16px}.upload-petri-net{position:fixed;bottom:24px;right:24px;z-index:999}.full-width{width:100%}.full-height{height:100%}.font-size-20{font-size:20px}.font-size-40{font-size:40px}.block-size-40{width:40px;height:40px}\n"] }]
+            args: [{ selector: 'nc-workflow-view', providers: [WorkflowViewService], template: "<div class=\"workflow-container full-height\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n    <div>\n        <button mat-fab color=\"primary\" class=\"upload-petri-net\" (click)=\"importNet()\">\n            <mat-icon>cloud_upload</mat-icon>\n        </button>\n    </div>\n    <div fxLayout=\"row\" fxLayoutAlign=\"center\" class=\"workflow-header\">\n        <nc-header #header fxFlex=\"100\" [type]=\"headerType\"></nc-header>\n    </div>\n    <div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex class=\"workflow-panels-container\">\n        <ng-container *ngIf=\"workflows$ | async as workflows\">\n\n            <div *ngIf=\"(loading$ | async) === false && workflows.length === 0\" fxLayout=\"column\"\n                 fxLayoutAlign=\"center center\">\n                <mat-icon color=\"accent\" class=\"font-size-40 block-size-40 margin-bottom-default\">linear_scale\n                </mat-icon>\n                <span class=\"font-size-20\">{{ 'view-list.noProcessesSatisfyingThisFilter' | translate}}</span>\n            </div>\n\n            <mat-accordion [multi]=\"true\" fxFlex=\"100\" class=\"full-width\">\n                <cdk-virtual-scroll-viewport itemSize=\"50\" (scrolledIndexChange)=\"loadNextPage()\"\n                                             class=\"full-height full-width dashboard-workflow-view\">\n\n                    <nc-workflow-panel\n                        *cdkVirtualFor=\"let workflow of workflows; let i = index; templateCacheSize: 0; trackBy: trackBy\"\n                        [workflow]=\"workflow\"\n                        [selectedHeaders$]=\"selectedHeaders$\"\n                        [showDeleteMenu]=\"showDeleteMenu\">\n                    </nc-workflow-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\n            </mat-accordion>\n        </ng-container>\n    </div>\n</div>\n", styles: [".workflow-container{padding:16px}.workflow-header,.workflow-panels-container{margin-top:16px}.upload-petri-net{position:fixed;bottom:24px;right:24px;z-index:999}.full-width{width:100%}.full-height{height:100%}.font-size-20{font-size:20px}.font-size-40{font-size:40px}.block-size-40{width:40px;height:40px}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.SideMenuService }, { type: i1.WorkflowViewService }, { type: i1.LoggerService }, { type: i1.ProcessService }]; } });
 
 class AddChildNodeComponent extends AbstractAddChildNodeComponent {
@@ -4736,7 +4961,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$9.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: i6.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$9.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { type: i3$9.MatTreeNode, selector: "mat-tree-node", inputs: ["role", "disabled", "tabIndex"], exportAs: ["matTreeNode"] }, { type: i3$9.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { type: i6$2.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.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: i5$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: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i15.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i6$2.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$9.MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["role", "disabled", "tabIndex", "matNestedTreeNode"], exportAs: ["matNestedTreeNode"] }, { type: i3$9.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: i6.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$2.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.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: i5$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: i5$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i15.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i6$2.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"] }]
@@ -4914,6 +5139,198 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }]
         }] });
 
+const newCaseConfigFactory = () => {
+    return { useCachedProcesses: false };
+};
+function localAllowedNetsFactory(factory) {
+    return factory.createWithAllNets();
+}
+class FilterFieldTabbedCaseViewComponent extends AbstractTabbedCaseViewComponent {
+    constructor(caseViewService, loggerService, injectedTabData, _newCaseCreationConfig = {
+        enableCaseTitle: true,
+        isCaseTitleRequired: true
+    }) {
+        super(caseViewService, loggerService, injectedTabData, undefined, undefined, undefined, _newCaseCreationConfig);
+        this._newCaseCreationConfig = _newCaseCreationConfig;
+    }
+    ngAfterViewInit() {
+        super.initializeHeader(this.caseHeaderComponent);
+    }
+}
+FilterFieldTabbedCaseViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterFieldTabbedCaseViewComponent, deps: [{ token: i1.CaseViewService }, { token: i1.LoggerService }, { token: NAE_TAB_DATA }, { token: NAE_NEW_CASE_CREATION_CONFIGURATION_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+FilterFieldTabbedCaseViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FilterFieldTabbedCaseViewComponent, selector: "nc-filter-field-tabbed-case-view", providers: [
+        CategoryFactory,
+        CaseViewService,
+        SearchService,
+        OverflowService,
+        ViewIdService,
+        { provide: AllowedNetsService,
+            useFactory: localAllowedNetsFactory,
+            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$2.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.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: i5$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: i5$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$2.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: [
+                        CategoryFactory,
+                        CaseViewService,
+                        SearchService,
+                        OverflowService,
+                        ViewIdService,
+                        { provide: AllowedNetsService,
+                            useFactory: localAllowedNetsFactory,
+                            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] }
+                    ], 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"] }]
+        }], ctorParameters: function () { return [{ type: i1.CaseViewService }, { type: i1.LoggerService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [NAE_TAB_DATA]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [NAE_NEW_CASE_CREATION_CONFIGURATION_DATA]
+                }] }]; }, propDecorators: { caseHeaderComponent: [{
+                type: ViewChild,
+                args: ['header']
+            }] } });
+
+function baseFilterFactory(injectedTabData) {
+    return {
+        filter: injectedTabData.baseFilter
+    };
+}
+class FilterFieldTabbedTaskViewComponent extends AbstractTabbedTaskViewComponent {
+    constructor(taskViewService, injectedTabData) {
+        super(taskViewService, injectedTabData);
+    }
+    ngAfterViewInit() {
+        this.initializeHeader(this.taskHeaderComponent);
+    }
+}
+FilterFieldTabbedTaskViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterFieldTabbedTaskViewComponent, deps: [{ token: i1.TaskViewService }, { token: NAE_TAB_DATA }], target: i0.ɵɵFactoryTarget.Component });
+FilterFieldTabbedTaskViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FilterFieldTabbedTaskViewComponent, selector: "nc-filter-field-tabbed-task-view", providers: [
+        CategoryFactory,
+        TaskViewService,
+        SearchService,
+        ChangedFieldsService,
+        { provide: ViewIdService, useValue: null },
+        {
+            provide: NAE_BASE_FILTER,
+            useFactory: baseFilterFactory,
+            deps: [NAE_TAB_DATA]
+        },
+        {
+            provide: AllowedNetsService,
+            useFactory: tabbedAllowedNetsServiceFactory,
+            deps: [AllowedNetsServiceFactory, NAE_TAB_DATA]
+        },
+        {
+            provide: NAE_TASK_VIEW_CONFIGURATION,
+            useFactory: tabbedTaskViewConfigurationFactory,
+            deps: [NAE_TAB_DATA]
+        }
+    ], viewQueries: [{ propertyName: "taskHeaderComponent", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"task-tab-background full-height min-height-task-custom\">\n    <div fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"content-margin full-height\" >\n        <nc-header #header type=\"task\" class=\"task-panel-padding-mini\"></nc-header>\n        <nc-task-list [tasks$]=\"tasks$\" [loading$]=\"loading$\" [allowMultiOpen]=\"false\" [selectedHeaders$]=\"selectedHeaders$\" [textEllipsis]=\"true\" fxFlex></nc-task-list>\n    </div>\n</div>\n", styles: [".task-tab-background{height:100%;width:100%;overflow:auto;background-color:transparent}.search-panel{margin-top:20px}.content-margin{margin:0 20px}.task-panel-padding-mini{padding-bottom:20px;padding-top:20px}.full-height{height:100%}.search-width{width:100%}.min-height-task-custom{min-height:400px;height:400px}\n"], components: [{ type: HeaderComponent, selector: "nc-header" }, { type: TaskListComponent, selector: "nc-task-list" }], directives: [{ type: i6$2.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.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.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: FilterFieldTabbedTaskViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nc-filter-field-tabbed-task-view', providers: [
+                        CategoryFactory,
+                        TaskViewService,
+                        SearchService,
+                        ChangedFieldsService,
+                        { provide: ViewIdService, useValue: null },
+                        {
+                            provide: NAE_BASE_FILTER,
+                            useFactory: baseFilterFactory,
+                            deps: [NAE_TAB_DATA]
+                        },
+                        {
+                            provide: AllowedNetsService,
+                            useFactory: tabbedAllowedNetsServiceFactory,
+                            deps: [AllowedNetsServiceFactory, NAE_TAB_DATA]
+                        },
+                        {
+                            provide: NAE_TASK_VIEW_CONFIGURATION,
+                            useFactory: tabbedTaskViewConfigurationFactory,
+                            deps: [NAE_TAB_DATA]
+                        }
+                    ], template: "<div class=\"task-tab-background full-height min-height-task-custom\">\n    <div fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"content-margin full-height\" >\n        <nc-header #header type=\"task\" class=\"task-panel-padding-mini\"></nc-header>\n        <nc-task-list [tasks$]=\"tasks$\" [loading$]=\"loading$\" [allowMultiOpen]=\"false\" [selectedHeaders$]=\"selectedHeaders$\" [textEllipsis]=\"true\" fxFlex></nc-task-list>\n    </div>\n</div>\n", styles: [".task-tab-background{height:100%;width:100%;overflow:auto;background-color:transparent}.search-panel{margin-top:20px}.content-margin{margin:0 20px}.task-panel-padding-mini{padding-bottom:20px;padding-top:20px}.full-height{height:100%}.search-width{width:100%}.min-height-task-custom{min-height:400px;height:400px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.TaskViewService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [NAE_TAB_DATA]
+                }] }]; }, propDecorators: { taskHeaderComponent: [{
+                type: ViewChild,
+                args: ['header']
+            }] } });
+
+class FilterFieldTabViewComponent extends AbstractFilterFieldTabViewComponent {
+    constructor(registry, filterField) {
+        super(registry, filterField, FilterFieldTabbedCaseViewComponent, FilterFieldTabbedTaskViewComponent);
+    }
+}
+FilterFieldTabViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterFieldTabViewComponent, deps: [{ token: i1.DashboardPortalComponentRegistryService }, { token: NAE_FILTER_FIELD }], target: i0.ɵɵFactoryTarget.Component });
+FilterFieldTabViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: FilterFieldTabViewComponent, selector: "nc-filter-field-tab-view", usesInheritance: true, ngImport: i0, template: "<div fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"full-height\">\n    <nc-tab-view [initialTabs]=\"tabs\" stretch=\"false\" class=\"full-height block\"></nc-tab-view>\n</div>\n", styles: [".full-height{height:100%}.block{display:block!important}\n"], components: [{ type: TabViewComponent, selector: "nc-tab-view" }], directives: [{ type: i6$2.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.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: FilterFieldTabViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nc-filter-field-tab-view', template: "<div fxLayout=\"column\" fxLayoutAlign=\"start stretch\" class=\"full-height\">\n    <nc-tab-view [initialTabs]=\"tabs\" stretch=\"false\" class=\"full-height block\"></nc-tab-view>\n</div>\n", styles: [".full-height{height:100%}.block{display:block!important}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.DashboardPortalComponentRegistryService }, { type: i1.FilterField, decorators: [{
+                    type: Inject,
+                    args: [NAE_FILTER_FIELD]
+                }] }]; } });
+
+class FilterFieldContentModule {
+}
+FilterFieldContentModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterFieldContentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FilterFieldContentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterFieldContentModule, declarations: [FilterFieldTabViewComponent,
+        FilterFieldTabbedCaseViewComponent,
+        FilterFieldTabbedTaskViewComponent], imports: [CommonModule,
+        TabsComponentModule,
+        MaterialModule,
+        FlexModule,
+        SearchComponentModule,
+        CaseViewComponentModule,
+        HeaderComponentModule,
+        PanelComponentModule], exports: [FilterFieldTabViewComponent,
+        FilterFieldTabbedCaseViewComponent,
+        FilterFieldTabbedTaskViewComponent] });
+FilterFieldContentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterFieldContentModule, imports: [[
+            CommonModule,
+            TabsComponentModule,
+            MaterialModule,
+            FlexModule,
+            SearchComponentModule,
+            CaseViewComponentModule,
+            HeaderComponentModule,
+            PanelComponentModule
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: FilterFieldContentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        FilterFieldTabViewComponent,
+                        FilterFieldTabbedCaseViewComponent,
+                        FilterFieldTabbedTaskViewComponent
+                    ],
+                    exports: [
+                        FilterFieldTabViewComponent,
+                        FilterFieldTabbedCaseViewComponent,
+                        FilterFieldTabbedTaskViewComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        TabsComponentModule,
+                        MaterialModule,
+                        FlexModule,
+                        SearchComponentModule,
+                        CaseViewComponentModule,
+                        HeaderComponentModule,
+                        PanelComponentModule
+                    ]
+                }]
+        }] });
+
 /*
  * Public API Surface of netgrif-components
  */
@@ -4922,5 +5339,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AdminComponentModule, AdminImpersonateComponent, AdvancedSearchComponent, AuthenticationComponentModule, AuthenticationOverlayComponent, BarchartCardComponent, BooleanFieldComponent, BreadcrumbsComponent, ButtonFieldComponent, CaseListComponent, CaseListPaginatorComponent, CasePanelComponent, CaseSearchComponent, CaseViewComponentModule, ChangePasswordFormComponent, ChangePasswordFormComponentModule, CountCardComponent, CreateCaseButtonComponent, DashboardComponentModule, DashboardContentComponent, DataFieldTemplateComponent, DataFieldsComponentModule, DateFieldComponent, DateTimeFieldComponent, DefaultSimpleTaskViewComponent, DefaultTabViewComponent, DefaultTabbedCaseViewComponent, DefaultTabbedTaskViewComponent, EditModeComponent, EmailSubmissionFormComponent, EmailSubmissionFormComponentModule, EnumerationFieldComponent, FieldComponentResolverComponent, FileFieldComponent, FileListFieldComponent, FilterFieldComponent, FilterSelectorComponent, ForgottenPasswordFormComponent, ForgottenPasswordFormComponentModule, FulltextSearchComponent, GroupNavigationComponentResolverComponent, HeaderComponent, HeaderComponentModule, I18nFieldComponent, IframeCardComponent, ImmediateFilterTextComponent, ImmediateFilterTextContentComponent, ImpersonateQuickPanelComponent, ImportNetComponent, InternalLinkComponent, LanguageSelectorComponent, LdapGroupRoleAssignmentComponent, LegalNoticeComponent, LegalNoticeModule, LineChartCardComponent, LinearGaugeCardComponent, LoadFilterComponent, LoadingModeComponent, LoginFormComponent, LoginFormComponentModule, LogoutShortcutComponent, MultiUserAssignComponent, MultichoiceFieldComponent, NavigationComponentModule, NavigationDoubleDrawerComponent, NavigationDrawerComponent, NavigationRailComponent, NavigationTreeComponent, NewCaseComponent, NumberFieldComponent, OptionSelectorComponent, PanelComponent, PanelComponentModule, PanelItemComponent, PieChartCardComponent, PortalCardComponent, ProfileComponent, ProfileComponentModule, PublicWorkflowPanelComponent, QuickPanelComponent, QuickPanelComponentModule, RedirectComponent, RedirectComponentModule, RegistrationFormComponent, RegistrationFormComponentModule, RoleAssignmentComponent, SaveFilterComponent, SearchClauseComponent, SearchComponent, SearchComponentModule, SearchConfigurationInputComponent, SearchModeComponent, SearchOperandInputComponent, SearchPredicateComponent, SessionIdleComponent, SideMenuAdminImpersonateComponentModule, SideMenuComponentModule, SideMenuContainerComponent, SideMenuContentComponentModule, SideMenuFilterSelectorComponentModule, SideMenuImportNetComponentModule, SideMenuLoadFilterComponentModule, SideMenuMultiUserAssignComponentModule, SideMenuNewCaseComponentModule, SideMenuOptionSelectorComponentModule, SideMenuSaveFilterComponentModule, SideMenuUserAssignComponentModule, SideMenuUserImpersonateComponentModule, SingleTaskComponent, SortModeComponent, TabCreationDetectorComponent, TabViewComponent, TabsComponentModule, TaskContentComponent, TaskContentComponentModule, TaskListComponent, TaskListPaginationComponent, TaskPanelComponent, TaskSearchComponent, TextFieldComponent, ToolbarComponent, ToolbarComponentModule, TreeCaseViewComponentModule, TreeComponent, TreeTaskContentComponent, UserAssignComponent, UserCardComponent, UserComponentModule, UserFieldComponent, UserImpersonateComponent, UserInviteComponent, UserListFieldComponent, WorkflowPanelComponent, WorkflowViewComponent, WorkflowViewComponentModule, baseFilterFactory$3 as baseFilterFactory, filterCaseTabbedDataAllowedNetsServiceFactory, filterCaseTabbedDataFilterFactory, filterCaseTabbedDataSearchCategoriesFactory, filterTextAllowedNetsFactory, filterTextBaseFilterFactory, filterTextCategoriesFactory, searchCategoryConverter };
+export { AdminComponentModule, AdminImpersonateComponent, AdvancedSearchComponent, AuthenticationComponentModule, AuthenticationOverlayComponent, BarchartCardComponent, BooleanFieldComponent, BreadcrumbsComponent, ButtonFieldComponent, CaseListComponent, CaseListPaginatorComponent, CasePanelComponent, CaseSearchComponent, CaseViewComponentModule, ChangePasswordFormComponent, ChangePasswordFormComponentModule, CountCardComponent, CreateCaseButtonComponent, DashboardComponentModule, DashboardContentComponent, DataFieldTemplateComponent, DataFieldsComponentModule, DateFieldComponent, DateTimeFieldComponent, DefaultSimpleTaskViewComponent, DefaultTabViewComponent, DefaultTabbedCaseViewComponent, DefaultTabbedTaskViewComponent, EditModeComponent, EmailSubmissionFormComponent, EmailSubmissionFormComponentModule, EnumerationFieldComponent, FieldComponentResolverComponent, FileFieldComponent, FileListFieldComponent, FilterFieldComponent, FilterFieldContentModule, FilterFieldTabViewComponent, FilterFieldTabbedCaseViewComponent, FilterFieldTabbedTaskViewComponent, FilterSelectorComponent, ForgottenPasswordFormComponent, ForgottenPasswordFormComponentModule, FulltextSearchComponent, GroupNavigationComponentResolverComponent, HeaderComponent, HeaderComponentModule, I18nFieldComponent, IframeCardComponent, ImmediateFilterTextComponent, ImmediateFilterTextContentComponent, ImpersonateQuickPanelComponent, ImportNetComponent, InternalLinkComponent, LanguageSelectorComponent, LdapGroupRoleAssignmentComponent, LegalNoticeComponent, LegalNoticeModule, LineChartCardComponent, LinearGaugeCardComponent, LoadFilterComponent, LoadingModeComponent, LoginFormComponent, LoginFormComponentModule, LogoutShortcutComponent, MultiUserAssignComponent, MultichoiceFieldComponent, NavigationComponentModule, NavigationDoubleDrawerComponent, NavigationDrawerComponent, NavigationRailComponent, NavigationTreeComponent, NewCaseComponent, NumberFieldComponent, OptionSelectorComponent, PanelComponent, PanelComponentModule, PanelItemComponent, PieChartCardComponent, PortalCardComponent, ProfileComponent, ProfileComponentModule, PublicWorkflowPanelComponent, QuickPanelComponent, QuickPanelComponentModule, RedirectComponent, RedirectComponentModule, RegistrationFormComponent, RegistrationFormComponentModule, RoleAssignmentComponent, SaveFilterComponent, SearchClauseComponent, SearchComponent, SearchComponentModule, SearchConfigurationInputComponent, SearchModeComponent, SearchOperandInputComponent, SearchPredicateComponent, SessionIdleComponent, SideMenuAdminImpersonateComponentModule, SideMenuComponentModule, SideMenuContainerComponent, SideMenuContentComponentModule, SideMenuFilterSelectorComponentModule, SideMenuImportNetComponentModule, SideMenuLoadFilterComponentModule, SideMenuMultiUserAssignComponentModule, SideMenuNewCaseComponentModule, SideMenuOptionSelectorComponentModule, SideMenuSaveFilterComponentModule, SideMenuUserAssignComponentModule, SideMenuUserImpersonateComponentModule, SingleTaskComponent, SortModeComponent, TabCreationDetectorComponent, TabViewComponent, TabsComponentModule, TaskContentComponent, TaskContentComponentModule, TaskListComponent, TaskListPaginationComponent, TaskPanelComponent, TaskRefFieldComponent, TaskSearchComponent, TextFieldComponent, ToolbarComponent, ToolbarComponentModule, TreeCaseViewComponentModule, TreeComponent, TreeTaskContentComponent, UserAssignComponent, UserCardComponent, UserComponentModule, UserFieldComponent, UserImpersonateComponent, UserInviteComponent, UserListFieldComponent, WorkflowPanelComponent, WorkflowViewComponent, WorkflowViewComponentModule, baseFilterFactory$4 as baseFilterFactory, filterCaseTabbedDataAllowedNetsServiceFactory, filterCaseTabbedDataFilterFactory, filterCaseTabbedDataSearchCategoriesFactory, filterTextAllowedNetsFactory, filterTextBaseFilterFactory, filterTextCategoriesFactory, localAllowedNetsFactory, newCaseConfigFactory, searchCategoryConverter };
 //# sourceMappingURL=netgrif-components.mjs.map