@netgrif/components 6.4.0-beta.4 → 6.4.0-beta.5

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, 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, NAE_INFORM_ABOUT_INVALID_DATA, AbstractButtonFieldComponent, AbstractDateFieldComponent, DATE_FORMAT, AbstractDateTimeFieldComponent, DATE_TIME_FORMAT, AbstractEnumerationFieldComponent, AbstractEnumerationAutocompleteSelectFieldComponent, DATA_FIELD_PORTAL_DATA, AbstractEnumerationSelectFieldComponent, AbstractEnumerationListFieldComponent, AbstractFileFieldComponent, AbstractFileListFieldComponent, AbstractMultichoiceFieldComponent, AbstractMultichoiceSelectFieldComponent, AbstractMultichoiceListFieldComponent, AbstractNumberFieldComponent, AbstractTextFieldComponent, AbstractTextareaFieldComponent, AbstractRichTextareaFieldComponent, AbstractSimpleTextFieldComponent, AbstractUserFieldComponent, AbstractHtmlTextareaFieldComponent, AbstractCurrencyNumberFieldComponent, AbstractDefaultNumberFieldComponent, AbstractPasswordTextFieldComponent, FilePreviewType, AbstractEnumerationStepperFieldComponent, AbstractEnumerationIconFieldComponent, AbstractEnumerationAutocompleteDynamicFieldComponent, AbstractFilterFieldComponent, AbstractSearchOperandInputComponent, SearchInputType, DATE_FORMAT_STRING, DATE_TIME_FORMAT_STRING, AbstractSearchConfigurationInputComponent, OperatorTemplatePartType, AbstractSearchPredicateComponent, NAE_SEARCH_CATEGORIES, AbstractSearchClauseComponent, AbstractAdvancedSearchComponent, AdvancedSearchComponentInitializationService, SimpleFilter, AbstractFilterFieldContentComponent, NAE_FILTER_FIELD, NAE_BASE_FILTER, AllowedNetsService, AllowedNetsServiceFactory, CategoryFactory, CategoryResolverService, SearchService, AbstractUserAssignItemComponent, AbstractUserAssignListComponent, AbstractUserAssignComponent, NAE_SIDE_MENU_CONTROL, UserListService, CovalentModule, UtilityModule, NAE_USER_ASSIGN_COMPONENT, AbstractI18nFieldComponent, AbstractI18nDividerFieldComponent, AbstractI18nTextFieldComponent, AbstractMultichoiceAutocompleteFieldComponentComponent, AbstractUserListFieldComponent, AbstractMultiUserAssignItemComponent, AbstractMultiUserAssignListComponent, AbstractMultiUserAssignComponent, AbstractTaskRefFieldComponent, AbstractTaskRefDashboardTileComponent, NAE_TASK_OPERATIONS, TaskContentService, UnlimitedTaskContentService, AbstractDashboardLineChartTextFieldComponent, AbstractDashboardPieChartTextFieldComponent, AbstractDashboardPortalTextFieldComponent, AbstractDashboardBarChartTextFieldComponent, AbstractDashboardIframeTextFieldComponent, AbstractFilterFieldTabViewContentComponent, AbstractBooleanDefaultFieldComponent, AbstractButtonDefaultFieldComponent, AbstractDateDefaultFieldComponent, AbstractDateTimeDefaultFieldComponent, AbstractFileDefaultFieldComponent, AbstractFileListDefaultFieldComponent, AbstractFilterDefaultFieldComponent, Dashboard, AbstractUserDefaultFieldComponent, AbstractUserListDefaultFieldComponent, AbstractTaskRefDashboardFieldComponent, AbstractSortModeComponent, AbstractSearchModeComponent, AbstractEditModeComponent, AbstractLoadingModeComponent, AbstractHeaderComponent, CaseHeaderService, TaskHeaderService, WorkflowHeaderService, HeaderSearchService, AbstractFieldComponentResolverComponent, EnumerationField, MultichoiceField, DateField, DateTimeField, FileField, FileListField, AbstractTaskContentComponent, NAE_ASYNC_RENDERING_CONFIGURATION, AbstractPanelComponent, AbstractImmediateFilterTextContentComponent, NAE_FILTER_TEXT, AbstractImmediateFilterTextComponent, AbstractPanelItemComponent, AbstractTaskPanelComponent, BOOLEAN_VALUE_LABEL_ENABLED, NAE_TASK_PANEL_DISABLE_BUTTON_FUNCTIONS, NAE_TASK_FORCE_OPEN, SingleTaskContentService, TaskDataService, TaskEventService, AssignTaskService, DelegateTaskService, CancelTaskService, FinishTaskService, TaskRequestStateService, DataFocusPolicyService, AssignPolicyService, FinishPolicyService, ChangedFieldsService, SubjectTaskOperations, AbstractTaskListPaginationComponent, NAE_TAB_DATA, AbstractTaskViewComponent, TaskViewService, ViewIdService, AbstractTaskRefListFieldComponent, AbstractFulltextSearchComponent, Filter, FilterType, Category, AbstractSearchComponent, NAE_SEARCH_COMPONENT_CONFIGURATION, NAE_FILTERS_FILTER, NAE_NAVIGATION_ITEM_TASK_DATA, NAE_DEFAULT_CASE_SEARCH_CATEGORIES, NAE_DEFAULT_TASK_SEARCH_CATEGORIES, AbstractTaskListComponent, AbstractTabbedTaskViewComponent, HeaderMode, OverflowService, tabbedAllowedNetsServiceFactory, NAE_TASK_VIEW_CONFIGURATION, tabbedTaskViewConfigurationFactory, NAE_DEFAULT_HEADERS, navigationItemTaskViewDefaultHeadersFactory, LoadingEmitter, AbstractCasePanelComponent, AbstractCaseListPaginatorComponent, AbstractCaseViewComponent, NAE_CASE_REF_CREATE_CASE, NAE_CASE_REF_SEARCH, CaseViewService, NAE_VIEW_ID_SEGMENT, defaultCaseSearchCategoriesFactory, AbstractCaseRefDefaultComponent, CurrencyModule, CustomDateAdapter, AbstractLegalNoticeComponent, AbstractEmailSubmissionFormComponent, AbstractLoginFormComponent, AbstractRegistrationFormComponent, NAE_MIN_PASSWORD_LENGTH, AbstractForgottenPasswordComponent, AbstractChangePasswordComponent, ProfileModule, AbstractLanguageSelectorComponent, AbstractInternalLinkComponent, AbstractLogoutShortcutComponent, AbstractQuickPanelComponent, AbstractUserCardComponent, AbstractNavigationTreeComponent, AbstractNavigationDrawerComponent, AbstractNavigationRailComponent, AbstractGroupNavigationComponentResolverComponent, navigationItemTaskFilterFactory, navigationItemTaskAllowedNetsServiceFactory, navigationItemTaskCategoryFactory, AbstractBreadcrumbsComponent, AbstractCaseListComponent, AbstractTabbedCaseViewComponent, MergeOperator, FilterExtractionService, BaseAllowedNetsService, navigationItemCaseViewDefaultHeadersFactory, AbstractTabCreationDetectorComponent, AbstractTabViewComponent, extractFilterFromData, extractIconAndTitle, extractFieldValueFromData, GroupNavigationConstants, extractSearchTypeFromData, SearchMode, groupNavigationViewIdSegmentFactory, GroupNavigationComponentResolverService, RoutingBuilderService, defaultTaskSearchCategoriesFactory, DefaultSearchCategoriesModule, AbstractWorkflowPanelComponent, SnackBarModule, AbstractSingleTaskComponent, AbstractNavigationDoubleDrawerComponent, NAE_GROUP_NAVIGATION_COMPONENT_RESOLVER_COMPONENT, AbstractNewCaseComponent, NAE_NEW_CASE_COMPONENT, AbstractImportNetComponent, AbstractFilterSelectorListItemComponent, AbstractFilterSelectorComponent, AbstractOptionSelectorComponent, NAE_OPTION_SELECTOR_COMPONENT, UserFilterConstants, AbstractSaveFilterComponent, NAE_SAVE_FILTER_COMPONENT, AbstractLoadFilterComponent, NAE_LOAD_FILTER_COMPONENT, ImpersonationUserListService, NAE_ADMIN_IMPERSONATE_COMPONENT, UserImpersonationConstants, AbstractUserImpersonateComponent, NAE_USER_IMPERSONATE_COMPONENT, AbstractSideMenuContainerComponent, AbstractToolbarComponent, AbstractProfileComponent, ProgressType, AbstractWorkflowViewComponent, WorkflowViewService, AbstractAddChildNodeComponent, AbstractRemoveNodeComponent, AbstractTreeComponent, CaseTreeService, AbstractTreeTaskContentComponent, TreeTaskContentService, SelectedCaseService, NAE_NEW_CASE_CREATION_CONFIGURATION_DATA, NAE_NEW_CASE_CONFIGURATION, AbstractFilterFieldTabViewComponent, NAE_NET_VERSION_VISIBLE, NAE_NET_ALL_VERSIONS, FilteredArray, getImmediateData, TaskEvent, NAE_USER_ASSIGN_DIALOG_COMPONENT, NAE_ADMIN_IMPERSONATE_DIALOG_COMPONENT, NAE_USER_IMPERSONATE_DIALOG_COMPONENT, NAE_NEW_CASE_DIALOG_COMPONENT, NAE_SAVE_FILTER_DIALOG_COMPONENT, NAE_LOAD_FILTER_DIALOG_COMPONENT } from '@netgrif/components-core';
+import { AbstractRoleAssignmentComponent, RoleAssignmentService, AbstractLdapGroupRoleAssignmentComponent, RoleAssignmentLdapGroupService, AbstractUserInviteComponent, MaterialModule, TranslateLibModule, AbstractAuthenticationOverlayComponent, AbstractSessionIdleComponent, AbstractIframeCardComponent, AbstractCountCardComponent, AbstractCustomCardComponent, DashboardSingleData, DashboardMultiData, AbstractDashboardContentComponent, AbstractDataFieldTemplateComponent, AbstractBooleanFieldComponent, NAE_INFORM_ABOUT_INVALID_DATA, AbstractButtonFieldComponent, AbstractDateFieldComponent, DATE_FORMAT, AbstractDateTimeFieldComponent, DATE_TIME_FORMAT, AbstractEnumerationFieldComponent, AbstractEnumerationAutocompleteSelectFieldComponent, DATA_FIELD_PORTAL_DATA, AbstractEnumerationSelectFieldComponent, AbstractEnumerationListFieldComponent, AbstractFileFieldComponent, AbstractFileListFieldComponent, AbstractMultichoiceFieldComponent, AbstractMultichoiceSelectFieldComponent, AbstractMultichoiceListFieldComponent, AbstractNumberFieldComponent, AbstractTextFieldComponent, AbstractTextareaFieldComponent, AbstractRichTextareaFieldComponent, AbstractSimpleTextFieldComponent, AbstractUserFieldComponent, AbstractHtmlTextareaFieldComponent, AbstractCurrencyNumberFieldComponent, AbstractDefaultNumberFieldComponent, AbstractPasswordTextFieldComponent, FilePreviewType, AbstractEnumerationStepperFieldComponent, AbstractEnumerationIconFieldComponent, AbstractEnumerationAutocompleteDynamicFieldComponent, AbstractFilterFieldComponent, AbstractSearchOperandInputComponent, SearchInputType, DATE_FORMAT_STRING, DATE_TIME_FORMAT_STRING, AbstractSearchConfigurationInputComponent, OperatorTemplatePartType, AbstractSearchPredicateComponent, NAE_SEARCH_CATEGORIES, AbstractSearchClauseComponent, AbstractAdvancedSearchComponent, AdvancedSearchComponentInitializationService, SimpleFilter, AbstractFilterFieldContentComponent, NAE_FILTER_FIELD, NAE_BASE_FILTER, AllowedNetsService, AllowedNetsServiceFactory, CategoryFactory, CategoryResolverService, SearchService, AbstractUserAssignItemComponent, AbstractUserAssignListComponent, AbstractUserAssignComponent, NAE_SIDE_MENU_CONTROL, UserListService, CovalentModule, UtilityModule, NAE_USER_ASSIGN_COMPONENT, AbstractI18nFieldComponent, AbstractI18nDividerFieldComponent, AbstractI18nTextFieldComponent, AbstractMultichoiceAutocompleteFieldComponentComponent, AbstractUserListFieldComponent, AbstractMultiUserAssignItemComponent, AbstractMultiUserAssignListComponent, AbstractMultiUserAssignComponent, AbstractTaskRefFieldComponent, AbstractTaskRefDashboardTileComponent, NAE_TASK_OPERATIONS, FrontActionService, TaskContentService, UnlimitedTaskContentService, AbstractDashboardLineChartTextFieldComponent, AbstractDashboardPieChartTextFieldComponent, AbstractDashboardPortalTextFieldComponent, AbstractDashboardBarChartTextFieldComponent, AbstractDashboardIframeTextFieldComponent, AbstractFilterFieldTabViewContentComponent, AbstractBooleanDefaultFieldComponent, AbstractButtonDefaultFieldComponent, AbstractDateDefaultFieldComponent, AbstractDateTimeDefaultFieldComponent, AbstractFileDefaultFieldComponent, AbstractFileListDefaultFieldComponent, AbstractFilterDefaultFieldComponent, Dashboard, AbstractUserDefaultFieldComponent, AbstractUserListDefaultFieldComponent, AbstractTaskRefDashboardFieldComponent, AbstractSortModeComponent, AbstractSearchModeComponent, AbstractEditModeComponent, AbstractLoadingModeComponent, AbstractHeaderComponent, CaseHeaderService, TaskHeaderService, WorkflowHeaderService, HeaderSearchService, AbstractFieldComponentResolverComponent, EnumerationField, MultichoiceField, DateField, DateTimeField, FileField, FileListField, AbstractTaskContentComponent, NAE_ASYNC_RENDERING_CONFIGURATION, AbstractPanelComponent, AbstractImmediateFilterTextContentComponent, NAE_FILTER_TEXT, AbstractImmediateFilterTextComponent, AbstractPanelItemComponent, AbstractTaskPanelComponent, BOOLEAN_VALUE_LABEL_ENABLED, NAE_TASK_PANEL_DISABLE_BUTTON_FUNCTIONS, NAE_TASK_FORCE_OPEN, SingleTaskContentService, TaskDataService, TaskEventService, AssignTaskService, DelegateTaskService, CancelTaskService, FinishTaskService, TaskRequestStateService, DataFocusPolicyService, AssignPolicyService, FinishPolicyService, ChangedFieldsService, SubjectTaskOperations, AbstractTaskListPaginationComponent, NAE_TAB_DATA, AbstractTaskViewComponent, TaskViewService, ViewIdService, AbstractTaskRefListFieldComponent, AbstractFulltextSearchComponent, Filter, FilterType, Category, AbstractSearchComponent, NAE_SEARCH_COMPONENT_CONFIGURATION, NAE_FILTERS_FILTER, NAE_NAVIGATION_ITEM_TASK_DATA, NAE_DEFAULT_CASE_SEARCH_CATEGORIES, NAE_DEFAULT_TASK_SEARCH_CATEGORIES, AbstractTaskListComponent, AbstractTabbedTaskViewComponent, HeaderMode, OverflowService, tabbedAllowedNetsServiceFactory, NAE_TASK_VIEW_CONFIGURATION, tabbedTaskViewConfigurationFactory, NAE_DEFAULT_HEADERS, navigationItemTaskViewDefaultHeadersFactory, LoadingEmitter, AbstractCasePanelComponent, AbstractCaseListPaginatorComponent, AbstractCaseViewComponent, NAE_CASE_REF_CREATE_CASE, NAE_CASE_REF_SEARCH, CaseViewService, NAE_VIEW_ID_SEGMENT, defaultCaseSearchCategoriesFactory, AbstractCaseRefDefaultComponent, CurrencyModule, FrontActionModule, CustomDateAdapter, AbstractLegalNoticeComponent, AbstractEmailSubmissionFormComponent, AbstractLoginFormComponent, AbstractRegistrationFormComponent, NAE_MIN_PASSWORD_LENGTH, AbstractForgottenPasswordComponent, AbstractChangePasswordComponent, ProfileModule, AbstractLanguageSelectorComponent, AbstractInternalLinkComponent, AbstractLogoutShortcutComponent, AbstractQuickPanelComponent, AbstractUserCardComponent, AbstractNavigationTreeComponent, AbstractNavigationDrawerComponent, AbstractNavigationRailComponent, AbstractGroupNavigationComponentResolverComponent, navigationItemTaskFilterFactory, navigationItemTaskAllowedNetsServiceFactory, navigationItemTaskCategoryFactory, AbstractBreadcrumbsComponent, AbstractCaseListComponent, AbstractTabbedCaseViewComponent, MergeOperator, FilterExtractionService, BaseAllowedNetsService, navigationItemCaseViewDefaultHeadersFactory, AbstractTabCreationDetectorComponent, AbstractTabViewComponent, extractFilterFromData, extractIconAndTitle, extractFieldValueFromData, GroupNavigationConstants, extractSearchTypeFromData, SearchMode, groupNavigationViewIdSegmentFactory, GroupNavigationComponentResolverService, RoutingBuilderService, defaultTaskSearchCategoriesFactory, DefaultSearchCategoriesModule, AbstractWorkflowPanelComponent, SnackBarModule, AbstractSingleTaskComponent, AbstractNavigationDoubleDrawerComponent, NAE_GROUP_NAVIGATION_COMPONENT_RESOLVER_COMPONENT, AbstractNewCaseComponent, NAE_NEW_CASE_COMPONENT, AbstractImportNetComponent, AbstractFilterSelectorListItemComponent, AbstractFilterSelectorComponent, AbstractOptionSelectorComponent, NAE_OPTION_SELECTOR_COMPONENT, UserFilterConstants, AbstractSaveFilterComponent, NAE_SAVE_FILTER_COMPONENT, AbstractLoadFilterComponent, NAE_LOAD_FILTER_COMPONENT, ImpersonationUserListService, NAE_ADMIN_IMPERSONATE_COMPONENT, UserImpersonationConstants, AbstractUserImpersonateComponent, NAE_USER_IMPERSONATE_COMPONENT, AbstractSideMenuContainerComponent, AbstractToolbarComponent, AbstractProfileComponent, ProgressType, AbstractWorkflowViewComponent, WorkflowViewService, AbstractAddChildNodeComponent, AbstractRemoveNodeComponent, AbstractTreeComponent, CaseTreeService, AbstractTreeTaskContentComponent, TreeTaskContentService, SelectedCaseService, NAE_NEW_CASE_CREATION_CONFIGURATION_DATA, NAE_NEW_CASE_CONFIGURATION, AbstractFilterFieldTabViewComponent, NAE_NET_VERSION_VISIBLE, NAE_NET_ALL_VERSIONS, FilteredArray, getImmediateData, TaskEvent, AbstractSingleTaskViewComponent, NAE_TASK_VIEW_COMPONENT, reloadTaskAction, NAE_USER_ASSIGN_DIALOG_COMPONENT, NAE_ADMIN_IMPERSONATE_DIALOG_COMPONENT, NAE_USER_IMPERSONATE_DIALOG_COMPONENT, NAE_NEW_CASE_DIALOG_COMPONENT, NAE_SAVE_FILTER_DIALOG_COMPONENT, NAE_LOAD_FILTER_DIALOG_COMPONENT } from '@netgrif/components-core';
 import * as i2 from '@angular/material/toolbar';
 import * as i2$1 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -31,7 +31,7 @@ import * as i1$2 from '@ngx-translate/core';
 import * as i2$2 from '@angular/router';
 import { RouterModule, ActivatedRoute } from '@angular/router';
 import * as i1$3 from '@angular/material/dialog';
-import { MatDialogModule, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatDialogModule, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
 import { take, map, tap, startWith } from 'rxjs/operators';
 import { FlexModule, FlexLayoutModule } from '@angular/flex-layout';
 import * as i3$2 from '@angular/platform-browser';
@@ -1727,11 +1727,13 @@ class TaskRefDashboardTileComponent extends AbstractTaskRefDashboardTileComponen
 }
 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: [
+        FrontActionService,
         { 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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$3.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: [
+                        FrontActionService,
                         { 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: [{
@@ -2483,6 +2485,7 @@ TaskPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", versi
 TaskPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TaskPanelComponent, selector: "nc-task-panel", providers: [
         { provide: TaskContentService, useClass: SingleTaskContentService },
         TaskDataService,
+        FrontActionService,
         TaskEventService,
         AssignTaskService,
         DelegateTaskService,
@@ -2494,12 +2497,13 @@ TaskPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
         FinishPolicyService,
         ChangedFieldsService,
         { provide: NAE_TASK_OPERATIONS, useClass: SubjectTaskOperations },
-    ], usesInheritance: true, ngImport: i0, template: "<nc-app-panel [panelContent]=\"taskPanelContent\" [panelHeader]=\"taskPanelHeader\"\n              (stopLoading)=\"stopLoading()\" (getExpansionPanelRef)=\"setPanelRef($event)\" [first]=\"first\" [last]=\"last\"\n              [preventCollapse]='preventCollapse' [hidePanelHeader]='hidePanelHeader'>\n    <ng-template #taskPanelHeader>\n        <div fxLayoutAlign=\"start center\" fxLayout=\"row\" fxFlex=\"95\" (click)=\"preventSelectionClick($event)\">\n            <div *ngFor=\"let field of featuredFieldsValues; let i = index\" fxFlex\n                 class=\"text-column-div\"\n                 [fxHide.lt-xl]=\"i >= 4 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-lg]=\"i >= 3 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-md]=\"i >= 2 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-sm]=\"i >= 1 && responsiveBody && !overflowMode\"\n                 [ngClass]=\"{'panel-header-padding': !textEllipsis && field.type !== 'button'}\">\n                <nc-panel-item\n                    [leadingIcon]=\"taskPanelData.task.icon\"\n                    [leadingIconEnabled]=\"i === 0\"\n                    [featuredValue]=\"field\"\n                    [textEllipsis]=\"textEllipsis\">\n                </nc-panel-item>\n            </div>\n        </div>\n        <div fxLayout=\"row\" fxLayoutAlign=\"end center\" fxFlex=\"5\">\n            <button mat-icon-button (click)=\"preventPanelOpen($event)\"\n                    *ngIf=\"!isLoading && showMoreMenu && (canAssign() || canDo('delegate') || canReassign() || canCancel() || canFinish())\"\n                    [matMenuTriggerFor]=\"menu\">\n                <mat-icon>more_vert</mat-icon>\n            </button>\n            <mat-menu #menu=\"matMenu\">\n                <button mat-menu-item *ngIf=\"canAssign()\" (click)=\"assign()\" [disabled]=\"canDisable('assign')\">\n                    <mat-icon>person</mat-icon>\n                    <span>{{ getAssignTitle() | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canDo('delegate')\" (click)=\"delegate()\"\n                        [disabled]=\"canDisable('delegate')\">\n                    <mat-icon>person_outline</mat-icon>\n                    <span>{{ getDelegateTitle() | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canReassign()\" (click)=\"delegate()\" [disabled]=\"canDisable('reassign')\">\n                    <mat-icon>person_add</mat-icon>\n                    <span>{{ 'tasks.view.reassign' | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canCancel()\" (click)=\"cancel()\" [disabled]=\"canDisable('cancel')\">\n                    <mat-icon>cancel</mat-icon>\n                    <span>{{ getCancelTitle() | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canFinish()\" (click)=\"finish()\" [disabled]=\"canDisable('finish')\">\n                    <mat-icon>done</mat-icon>\n                    <span>{{ getFinishTitle() | translate}}</span>\n                </button>\n            </mat-menu>\n            <mat-spinner *ngIf=\"isLoading\" [diameter]=\"30\"></mat-spinner>\n        </div>\n    </ng-template>\n    <ng-template #taskPanelContent>\n        <div class=\"panel-main-content\" fxLayout=\"column\"\n             [ngStyle]=\"(isForceOpen() && {'min-height': getContentMinHeight()}) || null\">\n            <div class=\"task-panel-body\" [ngClass]=\"{'paper-view': isPaperView()}\" fxFlex=\"100\">\n                <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n            </div>\n            <mat-action-row fxLayout.lt-sm=\"column\" [ngStyle]=\"{'justify-content': actionRowJustifyContent ?? 'flex-end' }\">\n                <mat-spinner class='action-row-spinner' *ngIf=\"isLoading && hidePanelHeader\"\n                             [diameter]=\"20\"></mat-spinner>\n                <div fxLayoutAlign.lt-sm=\"center stretch\" ngClass.lt-sm=\"width-100\"\n                     *ngFor='let button of (!!actionButtonTemplates && actionButtonTemplates.length > 0 ?\n                    actionButtonTemplates : [assignButton, delegateButton, reassignButton, cancelButton, finishButton, collapseButton])'>\n                    <ng-container *ngTemplateOutlet='button; context:thisContext'></ng-container>\n                </div>\n            </mat-action-row>\n        </div>\n    </ng-template>\n</nc-app-panel>\n\n<ng-template #assignButton>\n    <button *ngIf=\"canAssign() && getAssignTitle()?.length > 0\" (click)=\"assign()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('assign')\">\n        {{ getAssignTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #delegateButton>\n    <button *ngIf=\"canDo('delegate') && getDelegateTitle()?.length > 0\" (click)=\"delegate()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('delegate')\">\n        {{ getDelegateTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #reassignButton>\n    <button *ngIf=\"canReassign()\" (click)=\"delegate()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('reassign')\">\n        {{ 'tasks.view.reassign' | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #cancelButton>\n    <button *ngIf=\"canCancel() && getCancelTitle()?.length > 0\" (click)=\"cancel()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('cancel')\">\n        {{ getCancelTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #finishButton>\n    <button *ngIf=\"canFinish() && getFinishTitle()?.length > 0\" (click)=\"finish()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('finish')\">\n        {{ getFinishTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #collapseButton>\n    <button *ngIf=\"canCollapse()\" color=\"primary\" (click)=\"collapse()\" mat-stroked-button color=\"primary\">\n        {{ 'tasks.view.collapse' | translate | uppercase }}</button>\n</ng-template>\n", styles: [".task-panel-icon{margin-right:8px}.task-panel-footer{border-top:1px solid rgba(0,0,0,.03);padding:5px 24px}.task-panel-body{padding:10px 24px}.paper-view{margin:auto}.width-100{width:100%}.text-column-ellipsis{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.text-column-word-wrap{word-break:break-word!important;white-space:pre-line!important}.text-column-div{min-width:0;width:0}.text-column-margin{margin-right:15px;line-height:24px}.panel-header-padding{padding:9px 0!important}.pre-line-dialog{white-space:pre-line!important}.action-row-spinner{box-sizing:border-box;width:20px;height:20px;display:inline;margin:auto 5px}@media only screen and (max-width: 959.99px){.task-panel-body{padding:10px 0}.task-panel-action-row{padding:8px}}\n"], components: [{ type: PanelComponent, selector: "nc-app-panel" }, { type: PanelItemComponent, selector: "nc-panel-item" }, { type: 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$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i8$1.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: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i8.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i2$3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { type: i9.MatExpansionPanelActionRow, selector: "mat-action-row" }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i1$2.TranslatePipe, "uppercase": i4.UpperCasePipe } });
+    ], usesInheritance: true, ngImport: i0, template: "<nc-app-panel [panelContent]=\"taskPanelContent\" [panelHeader]=\"taskPanelHeader\"\n              (stopLoading)=\"stopLoading()\" (getExpansionPanelRef)=\"setPanelRef($event)\" [first]=\"first\" [last]=\"last\"\n              [preventCollapse]='preventCollapse' [hidePanelHeader]='hidePanelHeader'>\n    <ng-template #taskPanelHeader>\n        <div fxLayoutAlign=\"start center\" fxLayout=\"row\" fxFlex=\"95\" (click)=\"preventSelectionClick($event)\">\n            <div *ngFor=\"let field of featuredFieldsValues; let i = index\" fxFlex\n                 class=\"text-column-div\"\n                 [fxHide.lt-xl]=\"i >= 4 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-lg]=\"i >= 3 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-md]=\"i >= 2 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-sm]=\"i >= 1 && responsiveBody && !overflowMode\"\n                 [ngClass]=\"{'panel-header-padding': !textEllipsis && field.type !== 'button'}\">\n                <nc-panel-item\n                    [leadingIcon]=\"taskPanelData.task.icon\"\n                    [leadingIconEnabled]=\"i === 0\"\n                    [featuredValue]=\"field\"\n                    [textEllipsis]=\"textEllipsis\">\n                </nc-panel-item>\n            </div>\n        </div>\n        <div fxLayout=\"row\" fxLayoutAlign=\"end center\" fxFlex=\"5\">\n            <button mat-icon-button (click)=\"preventPanelOpen($event)\"\n                    *ngIf=\"!isLoading && showMoreMenu && (canAssign() || canDo('delegate') || canReassign() || canCancel() || canFinish())\"\n                    [matMenuTriggerFor]=\"menu\">\n                <mat-icon>more_vert</mat-icon>\n            </button>\n            <mat-menu #menu=\"matMenu\">\n                <button mat-menu-item *ngIf=\"canAssign()\" (click)=\"assign()\" [disabled]=\"canDisable('assign')\">\n                    <mat-icon>person</mat-icon>\n                    <span>{{ getAssignTitle() | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canDo('delegate')\" (click)=\"delegate()\"\n                        [disabled]=\"canDisable('delegate')\">\n                    <mat-icon>person_outline</mat-icon>\n                    <span>{{ getDelegateTitle() | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canReassign()\" (click)=\"delegate()\" [disabled]=\"canDisable('reassign')\">\n                    <mat-icon>person_add</mat-icon>\n                    <span>{{ 'tasks.view.reassign' | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canCancel()\" (click)=\"cancel()\" [disabled]=\"canDisable('cancel')\">\n                    <mat-icon>cancel</mat-icon>\n                    <span>{{ getCancelTitle() | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canFinish()\" (click)=\"finish()\" [disabled]=\"canDisable('finish')\">\n                    <mat-icon>done</mat-icon>\n                    <span>{{ getFinishTitle() | translate}}</span>\n                </button>\n            </mat-menu>\n            <mat-spinner *ngIf=\"isLoading\" [diameter]=\"30\"></mat-spinner>\n        </div>\n    </ng-template>\n    <ng-template #taskPanelContent>\n        <div class=\"panel-main-content\" fxLayout=\"column\"\n             [ngStyle]=\"(isForceOpen() && {'min-height': getContentMinHeight()}) || null\">\n            <div class=\"task-panel-body\" [ngClass]=\"{'paper-view': isPaperView()}\" fxFlex=\"100\">\n                <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n            </div>\n            <mat-action-row *ngIf=\"!hideActionRow\" fxLayout.lt-sm=\"column\" [ngStyle]=\"{'justify-content': actionRowJustifyContent ?? 'flex-end' }\">\n                <mat-spinner class='action-row-spinner' *ngIf=\"isLoading && hidePanelHeader\"\n                             [diameter]=\"20\"></mat-spinner>\n                <div fxLayoutAlign.lt-sm=\"center stretch\" ngClass.lt-sm=\"width-100\"\n                     *ngFor='let button of (!!actionButtonTemplates && actionButtonTemplates.length > 0 ?\n                    actionButtonTemplates : [assignButton, delegateButton, reassignButton, cancelButton, finishButton, collapseButton])'>\n                    <ng-container *ngTemplateOutlet='button; context:thisContext'></ng-container>\n                </div>\n            </mat-action-row>\n        </div>\n    </ng-template>\n</nc-app-panel>\n\n<ng-template #assignButton>\n    <button *ngIf=\"canAssign() && getAssignTitle()?.length > 0\" (click)=\"assign()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('assign')\">\n        {{ getAssignTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #delegateButton>\n    <button *ngIf=\"canDo('delegate') && getDelegateTitle()?.length > 0\" (click)=\"delegate()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('delegate')\">\n        {{ getDelegateTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #reassignButton>\n    <button *ngIf=\"canReassign()\" (click)=\"delegate()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('reassign')\">\n        {{ 'tasks.view.reassign' | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #cancelButton>\n    <button *ngIf=\"canCancel() && getCancelTitle()?.length > 0\" (click)=\"cancel()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('cancel')\">\n        {{ getCancelTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #finishButton>\n    <button *ngIf=\"canFinish() && getFinishTitle()?.length > 0\" (click)=\"finish()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('finish')\">\n        {{ getFinishTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #collapseButton>\n    <button *ngIf=\"canCollapse()\" color=\"primary\" (click)=\"collapse()\" mat-stroked-button color=\"primary\">\n        {{ 'tasks.view.collapse' | translate | uppercase }}</button>\n</ng-template>\n", styles: [".task-panel-icon{margin-right:8px}.task-panel-footer{border-top:1px solid rgba(0,0,0,.03);padding:5px 24px}.task-panel-body{padding:10px 24px}.paper-view{margin:auto}.width-100{width:100%}.text-column-ellipsis{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.text-column-word-wrap{word-break:break-word!important;white-space:pre-line!important}.text-column-div{min-width:0;width:0}.text-column-margin{margin-right:15px;line-height:24px}.panel-header-padding{padding:9px 0!important}.pre-line-dialog{white-space:pre-line!important}.action-row-spinner{box-sizing:border-box;width:20px;height:20px;display:inline;margin:auto 5px}@media only screen and (max-width: 959.99px){.task-panel-body{padding:10px 0}.task-panel-action-row{padding:8px}}\n"], components: [{ type: PanelComponent, selector: "nc-app-panel" }, { type: PanelItemComponent, selector: "nc-panel-item" }, { type: 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$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i8$1.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: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i8.DefaultStyleDirective, selector: "  [ngStyle],  [ngStyle.xs], [ngStyle.sm], [ngStyle.md], [ngStyle.lg], [ngStyle.xl],  [ngStyle.lt-sm], [ngStyle.lt-md], [ngStyle.lt-lg], [ngStyle.lt-xl],  [ngStyle.gt-xs], [ngStyle.gt-sm], [ngStyle.gt-md], [ngStyle.gt-lg]", inputs: ["ngStyle", "ngStyle.xs", "ngStyle.sm", "ngStyle.md", "ngStyle.lg", "ngStyle.xl", "ngStyle.lt-sm", "ngStyle.lt-md", "ngStyle.lt-lg", "ngStyle.lt-xl", "ngStyle.gt-xs", "ngStyle.gt-sm", "ngStyle.gt-md", "ngStyle.gt-lg"] }, { type: i2$3.CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { type: i9.MatExpansionPanelActionRow, selector: "mat-action-row" }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i1$2.TranslatePipe, "uppercase": i4.UpperCasePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TaskPanelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-task-panel', providers: [
                         { provide: TaskContentService, useClass: SingleTaskContentService },
                         TaskDataService,
+                        FrontActionService,
                         TaskEventService,
                         AssignTaskService,
                         DelegateTaskService,
@@ -2511,7 +2515,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 && showMoreMenu && (canAssign() || canDo('delegate') || canReassign() || canCancel() || canFinish())\"\n                    [matMenuTriggerFor]=\"menu\">\n                <mat-icon>more_vert</mat-icon>\n            </button>\n            <mat-menu #menu=\"matMenu\">\n                <button mat-menu-item *ngIf=\"canAssign()\" (click)=\"assign()\" [disabled]=\"canDisable('assign')\">\n                    <mat-icon>person</mat-icon>\n                    <span>{{ getAssignTitle() | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canDo('delegate')\" (click)=\"delegate()\"\n                        [disabled]=\"canDisable('delegate')\">\n                    <mat-icon>person_outline</mat-icon>\n                    <span>{{ getDelegateTitle() | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canReassign()\" (click)=\"delegate()\" [disabled]=\"canDisable('reassign')\">\n                    <mat-icon>person_add</mat-icon>\n                    <span>{{ 'tasks.view.reassign' | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canCancel()\" (click)=\"cancel()\" [disabled]=\"canDisable('cancel')\">\n                    <mat-icon>cancel</mat-icon>\n                    <span>{{ getCancelTitle() | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canFinish()\" (click)=\"finish()\" [disabled]=\"canDisable('finish')\">\n                    <mat-icon>done</mat-icon>\n                    <span>{{ getFinishTitle() | translate}}</span>\n                </button>\n            </mat-menu>\n            <mat-spinner *ngIf=\"isLoading\" [diameter]=\"30\"></mat-spinner>\n        </div>\n    </ng-template>\n    <ng-template #taskPanelContent>\n        <div class=\"panel-main-content\" fxLayout=\"column\"\n             [ngStyle]=\"(isForceOpen() && {'min-height': getContentMinHeight()}) || null\">\n            <div class=\"task-panel-body\" [ngClass]=\"{'paper-view': isPaperView()}\" fxFlex=\"100\">\n                <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n            </div>\n            <mat-action-row fxLayout.lt-sm=\"column\" [ngStyle]=\"{'justify-content': actionRowJustifyContent ?? 'flex-end' }\">\n                <mat-spinner class='action-row-spinner' *ngIf=\"isLoading && hidePanelHeader\"\n                             [diameter]=\"20\"></mat-spinner>\n                <div fxLayoutAlign.lt-sm=\"center stretch\" ngClass.lt-sm=\"width-100\"\n                     *ngFor='let button of (!!actionButtonTemplates && actionButtonTemplates.length > 0 ?\n                    actionButtonTemplates : [assignButton, delegateButton, reassignButton, cancelButton, finishButton, collapseButton])'>\n                    <ng-container *ngTemplateOutlet='button; context:thisContext'></ng-container>\n                </div>\n            </mat-action-row>\n        </div>\n    </ng-template>\n</nc-app-panel>\n\n<ng-template #assignButton>\n    <button *ngIf=\"canAssign() && getAssignTitle()?.length > 0\" (click)=\"assign()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('assign')\">\n        {{ getAssignTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #delegateButton>\n    <button *ngIf=\"canDo('delegate') && getDelegateTitle()?.length > 0\" (click)=\"delegate()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('delegate')\">\n        {{ getDelegateTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #reassignButton>\n    <button *ngIf=\"canReassign()\" (click)=\"delegate()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('reassign')\">\n        {{ 'tasks.view.reassign' | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #cancelButton>\n    <button *ngIf=\"canCancel() && getCancelTitle()?.length > 0\" (click)=\"cancel()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('cancel')\">\n        {{ getCancelTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #finishButton>\n    <button *ngIf=\"canFinish() && getFinishTitle()?.length > 0\" (click)=\"finish()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('finish')\">\n        {{ getFinishTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #collapseButton>\n    <button *ngIf=\"canCollapse()\" color=\"primary\" (click)=\"collapse()\" mat-stroked-button color=\"primary\">\n        {{ 'tasks.view.collapse' | translate | uppercase }}</button>\n</ng-template>\n", styles: [".task-panel-icon{margin-right:8px}.task-panel-footer{border-top:1px solid rgba(0,0,0,.03);padding:5px 24px}.task-panel-body{padding:10px 24px}.paper-view{margin:auto}.width-100{width:100%}.text-column-ellipsis{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.text-column-word-wrap{word-break:break-word!important;white-space:pre-line!important}.text-column-div{min-width:0;width:0}.text-column-margin{margin-right:15px;line-height:24px}.panel-header-padding{padding:9px 0!important}.pre-line-dialog{white-space:pre-line!important}.action-row-spinner{box-sizing:border-box;width:20px;height:20px;display:inline;margin:auto 5px}@media only screen and (max-width: 959.99px){.task-panel-body{padding:10px 0}.task-panel-action-row{padding:8px}}\n"] }]
+                    ], template: "<nc-app-panel [panelContent]=\"taskPanelContent\" [panelHeader]=\"taskPanelHeader\"\n              (stopLoading)=\"stopLoading()\" (getExpansionPanelRef)=\"setPanelRef($event)\" [first]=\"first\" [last]=\"last\"\n              [preventCollapse]='preventCollapse' [hidePanelHeader]='hidePanelHeader'>\n    <ng-template #taskPanelHeader>\n        <div fxLayoutAlign=\"start center\" fxLayout=\"row\" fxFlex=\"95\" (click)=\"preventSelectionClick($event)\">\n            <div *ngFor=\"let field of featuredFieldsValues; let i = index\" fxFlex\n                 class=\"text-column-div\"\n                 [fxHide.lt-xl]=\"i >= 4 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-lg]=\"i >= 3 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-md]=\"i >= 2 && responsiveBody && !overflowMode\"\n                 [fxHide.lt-sm]=\"i >= 1 && responsiveBody && !overflowMode\"\n                 [ngClass]=\"{'panel-header-padding': !textEllipsis && field.type !== 'button'}\">\n                <nc-panel-item\n                    [leadingIcon]=\"taskPanelData.task.icon\"\n                    [leadingIconEnabled]=\"i === 0\"\n                    [featuredValue]=\"field\"\n                    [textEllipsis]=\"textEllipsis\">\n                </nc-panel-item>\n            </div>\n        </div>\n        <div fxLayout=\"row\" fxLayoutAlign=\"end center\" fxFlex=\"5\">\n            <button mat-icon-button (click)=\"preventPanelOpen($event)\"\n                    *ngIf=\"!isLoading && showMoreMenu && (canAssign() || canDo('delegate') || canReassign() || canCancel() || canFinish())\"\n                    [matMenuTriggerFor]=\"menu\">\n                <mat-icon>more_vert</mat-icon>\n            </button>\n            <mat-menu #menu=\"matMenu\">\n                <button mat-menu-item *ngIf=\"canAssign()\" (click)=\"assign()\" [disabled]=\"canDisable('assign')\">\n                    <mat-icon>person</mat-icon>\n                    <span>{{ getAssignTitle() | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canDo('delegate')\" (click)=\"delegate()\"\n                        [disabled]=\"canDisable('delegate')\">\n                    <mat-icon>person_outline</mat-icon>\n                    <span>{{ getDelegateTitle() | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canReassign()\" (click)=\"delegate()\" [disabled]=\"canDisable('reassign')\">\n                    <mat-icon>person_add</mat-icon>\n                    <span>{{ 'tasks.view.reassign' | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canCancel()\" (click)=\"cancel()\" [disabled]=\"canDisable('cancel')\">\n                    <mat-icon>cancel</mat-icon>\n                    <span>{{ getCancelTitle() | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canFinish()\" (click)=\"finish()\" [disabled]=\"canDisable('finish')\">\n                    <mat-icon>done</mat-icon>\n                    <span>{{ getFinishTitle() | translate}}</span>\n                </button>\n            </mat-menu>\n            <mat-spinner *ngIf=\"isLoading\" [diameter]=\"30\"></mat-spinner>\n        </div>\n    </ng-template>\n    <ng-template #taskPanelContent>\n        <div class=\"panel-main-content\" fxLayout=\"column\"\n             [ngStyle]=\"(isForceOpen() && {'min-height': getContentMinHeight()}) || null\">\n            <div class=\"task-panel-body\" [ngClass]=\"{'paper-view': isPaperView()}\" fxFlex=\"100\">\n                <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n            </div>\n            <mat-action-row *ngIf=\"!hideActionRow\" fxLayout.lt-sm=\"column\" [ngStyle]=\"{'justify-content': actionRowJustifyContent ?? 'flex-end' }\">\n                <mat-spinner class='action-row-spinner' *ngIf=\"isLoading && hidePanelHeader\"\n                             [diameter]=\"20\"></mat-spinner>\n                <div fxLayoutAlign.lt-sm=\"center stretch\" ngClass.lt-sm=\"width-100\"\n                     *ngFor='let button of (!!actionButtonTemplates && actionButtonTemplates.length > 0 ?\n                    actionButtonTemplates : [assignButton, delegateButton, reassignButton, cancelButton, finishButton, collapseButton])'>\n                    <ng-container *ngTemplateOutlet='button; context:thisContext'></ng-container>\n                </div>\n            </mat-action-row>\n        </div>\n    </ng-template>\n</nc-app-panel>\n\n<ng-template #assignButton>\n    <button *ngIf=\"canAssign() && getAssignTitle()?.length > 0\" (click)=\"assign()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('assign')\">\n        {{ getAssignTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #delegateButton>\n    <button *ngIf=\"canDo('delegate') && getDelegateTitle()?.length > 0\" (click)=\"delegate()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('delegate')\">\n        {{ getDelegateTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #reassignButton>\n    <button *ngIf=\"canReassign()\" (click)=\"delegate()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('reassign')\">\n        {{ 'tasks.view.reassign' | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #cancelButton>\n    <button *ngIf=\"canCancel() && getCancelTitle()?.length > 0\" (click)=\"cancel()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('cancel')\">\n        {{ getCancelTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #finishButton>\n    <button *ngIf=\"canFinish() && getFinishTitle()?.length > 0\" (click)=\"finish()\" mat-stroked-button color=\"primary\" [disabled]=\"canDisable('finish')\">\n        {{ getFinishTitle() | translate | uppercase }}</button>\n</ng-template>\n\n<ng-template #collapseButton>\n    <button *ngIf=\"canCollapse()\" color=\"primary\" (click)=\"collapse()\" mat-stroked-button color=\"primary\">\n        {{ 'tasks.view.collapse' | translate | uppercase }}</button>\n</ng-template>\n", styles: [".task-panel-icon{margin-right:8px}.task-panel-footer{border-top:1px solid rgba(0,0,0,.03);padding:5px 24px}.task-panel-body{padding:10px 24px}.paper-view{margin:auto}.width-100{width:100%}.text-column-ellipsis{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.text-column-word-wrap{word-break:break-word!important;white-space:pre-line!important}.text-column-div{min-width:0;width:0}.text-column-margin{margin-right:15px;line-height:24px}.panel-header-padding{padding:9px 0!important}.pre-line-dialog{white-space:pre-line!important}.action-row-spinner{box-sizing:border-box;width:20px;height:20px;display:inline;margin:auto 5px}@media only screen and (max-width: 959.99px){.task-panel-body{padding:10px 0}.task-panel-action-row{padding:8px}}\n"] }]
         }], 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: i1$2.TranslateService }, { type: i1.SubjectTaskOperations, decorators: [{
                     type: Inject,
                     args: [NAE_TASK_OPERATIONS]
@@ -3179,7 +3183,8 @@ DataFieldsComponentModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0
         BrowserModule,
         BrowserAnimationsModule,
         DashboardComponentModule,
-        RouterModule], exports: [DataFieldTemplateComponent] });
+        RouterModule,
+        FrontActionModule], exports: [DataFieldTemplateComponent] });
 DataFieldsComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DataFieldsComponentModule, providers: [
         { provide: DateAdapter, useClass: CustomDateAdapter }
     ], imports: [[
@@ -3203,7 +3208,8 @@ DataFieldsComponentModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0
             BrowserModule,
             BrowserAnimationsModule,
             DashboardComponentModule,
-            RouterModule
+            RouterModule,
+            FrontActionModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DataFieldsComponentModule, decorators: [{
             type: NgModule,
@@ -3292,7 +3298,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         BrowserModule,
                         BrowserAnimationsModule,
                         DashboardComponentModule,
-                        RouterModule
+                        RouterModule,
+                        FrontActionModule
                     ],
                     providers: [
                         { provide: DateAdapter, useClass: CustomDateAdapter }
@@ -3967,8 +3974,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 }] }, { type: i2$2.ActivatedRoute }]; } });
 
 class DefaultTabbedCaseViewComponent extends AbstractTabbedCaseViewComponent {
-    constructor(caseViewService, loggerService, viewIdService, _injectedTabData) {
-        super(caseViewService, loggerService, _injectedTabData, undefined, undefined, undefined, _injectedTabData.newCaseButtonConfiguration);
+    constructor(caseViewService, loggerService, viewIdService, overflowService, _injectedTabData) {
+        super(caseViewService, loggerService, _injectedTabData, overflowService, undefined, undefined, _injectedTabData.newCaseButtonConfiguration);
         this._injectedTabData = _injectedTabData;
         this.initialSearchMode = _injectedTabData.caseViewSearchTypeConfiguration.initialSearchMode;
         this.showToggleButton = _injectedTabData.caseViewSearchTypeConfiguration.showSearchToggleButton;
@@ -4065,7 +4072,7 @@ class DefaultTabbedCaseViewComponent extends AbstractTabbedCaseViewComponent {
         }
     }
 }
-DefaultTabbedCaseViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DefaultTabbedCaseViewComponent, deps: [{ token: i1.CaseViewService }, { token: i1.LoggerService }, { token: i1.ViewIdService }, { token: NAE_TAB_DATA }], target: i0.ɵɵFactoryTarget.Component });
+DefaultTabbedCaseViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DefaultTabbedCaseViewComponent, deps: [{ token: i1.CaseViewService }, { token: i1.LoggerService }, { token: i1.ViewIdService }, { token: i1.OverflowService }, { token: NAE_TAB_DATA }], target: i0.ɵɵFactoryTarget.Component });
 DefaultTabbedCaseViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: DefaultTabbedCaseViewComponent, selector: "nc-default-tabbed-case-view", providers: [
         CategoryFactory,
         CaseViewService,
@@ -4122,7 +4129,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                             deps: [NAE_NAVIGATION_ITEM_TASK_DATA]
                         }
                     ], template: "<div class=\"case-view-container\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n    <nc-breadcrumbs></nc-breadcrumbs>\n\n    <div class=\"case-view-search-container\">\n        <div fxLayout=\"row\" class=\"max-height\" fxLayoutAlign=\"space-between\">\n            <div fxLayoutAlign=\"start center\" fxFlex>\n                <nc-search class=\"search-width search-fix\" *ngIf=\"(enableSearch)\" [showSearchToggleButton]=\"showToggleButton\"\n                           [initialSearchMode]=\"initialSearchMode\" (filterLoaded)=\"loadFilter($event)\"></nc-search>\n            </div>\n            <div fxLayoutAlign=\"end center\">\n                <nc-create-case-button [newCaseCreationConfig]=\"newCaseCreationConfig\" (caseCreatedEvent)=\"handleCaseClick($event)\"></nc-create-case-button>\n            </div>\n        </div>\n    </div>\n\n    <div class=\"full-height transform-div custom-scrollbar\"\n         [ngClass]=\"{'overflow-div': getOverflowStatus()}\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n        <div class=\"full-height transform-div max-width-fix\" fxLayout=\"column\" fxLayoutAlign=\"start stretch\">\n            <nc-header #header [type]=\"headerType\" [maxHeaderColumns]=\"9\" [responsiveHeaders]=\"false\" [ngStyle]=\"{'width': getWidth()}\" [hideHeaderMenu]=\"!headersChangeable\" [showEditButton]=\"isMenuOptionEnabled('edit')\"\n                       [showSortButton]=\"isMenuOptionEnabled('sort')\" [showSearchButton]=\"isMenuOptionEnabled('search')\"\n                       [showTableSection]=\"allowTableMode\" class=\"case-header-padding\"></nc-header>\n\n            <nc-case-list [selectedHeaders$]=\"selectedHeaders$\" [textEllipsis]=\"true\" [showDeleteMenu]=\"showDeleteMenu\" [width]=\"getWidth()\"\n                          (caseClick)=\"handleCaseClick($event)\" [responsiveBody]=\"true\" fxFlex></nc-case-list>\n        </div>\n    </div>\n</div>\n", styles: [".case-view-container{margin:16px 24px;height:calc(100% - 32px);overflow:auto}.case-view-search-container{margin-top:16px;margin-bottom:2px;padding:0;max-height:50%}.case-header-padding{padding-left:1px;padding-right:1px;padding-top:16px}.search-width{width:100%}.full-height{height:100%}.overflow-div{overflow-x:scroll}.transform-div{transform:rotateX(180deg);-ms-transform:rotateX(180deg);-webkit-transform:rotateX(180deg)}.custom-scrollbar::-webkit-scrollbar{width:15px;height:15px;cursor:pointer}.max-width-fix{max-width:calc(100% - 8px)!important}.max-height{max-height:100%}.search-fix{min-height:calc(100% + 2px);max-height:100%;overflow-y:auto}@media screen and (max-width: 599.99px){.case-view-container{margin:12px}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1.CaseViewService }, { type: i1.LoggerService }, { type: i1.ViewIdService }, { type: undefined, decorators: [{
+        }], ctorParameters: function () { return [{ type: i1.CaseViewService }, { type: i1.LoggerService }, { type: i1.ViewIdService }, { type: i1.OverflowService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [NAE_TAB_DATA]
                 }] }]; }, propDecorators: { caseHeaderComponent: [{
@@ -4622,10 +4629,10 @@ class SingleTaskComponent extends AbstractSingleTaskComponent {
     }
 }
 SingleTaskComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SingleTaskComponent, deps: [{ token: i1.LoggerService }, { token: i2$2.ActivatedRoute }, { token: NAE_TAB_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-SingleTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SingleTaskComponent, selector: "nc-single-task", usesInheritance: true, ngImport: i0, template: "<div fxLayout='column' fxLayoutAlign='start center' fxFlex>\n    <ng-container *nccLet=\"(task$ | async) as task\">\n\n        <div *ngIf='(loading$ | async) === false && !task' fxLayout='column' fxLayoutAlign='center center'\n             fxFlex>\n            <div *ngTemplateOutlet =\"noTaskSection ?? defaultNoTaskSection\"></div>\n        </div>\n\n        <cdk-virtual-scroll-viewport *ngIf=\"task\" itemSize=\"1\" class=\"task-panel-scroll-container full-width full-height\">\n            <div *ngTemplateOutlet='pageHeader ?? defaultPageHeader'></div>\n            <nc-task-panel\n                [textEllipsis]='textEllipsis'\n                [taskPanelData]='task'\n                [selectedHeaders$]='selectedHeaders$'\n                [forceLoadDataOnOpen]='forceLoadDataOnOpen'\n                [responsiveBody]='responsiveBody'\n                (taskEvent)='emitTaskEvent($event)'\n                (panelRefOutput)='setPanelRef($event)'\n                [preventCollapse]='preventCollapse'\n                [hidePanelHeader]='hidePanelHeader'\n                [actionButtonTemplates]='actionButtonTemplates'\n                [actionRowJustifyContent]='actionRowJustifyContent'\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            <div *ngTemplateOutlet='pageFooter ?? defaultPageFooter'></div>\n        </cdk-virtual-scroll-viewport>\n\n        <ng-template #defaultNoTaskSection>\n            <mat-icon color='accent'>check_box</mat-icon>\n            <span class='font-size-20'>{{ 'tasks.view.noTasksSatisfyingThisFilter' | translate }}</span>\n        </ng-template>\n\n        <ng-template #defaultPageHeader>\n            <mat-card class=\"top-card\">\n                <span class=\"top-card-title\"><strong>{{headerTitle ?? (!!task && !!task.task ? task.task.title : '')}}</strong></span>\n            </mat-card>\n        </ng-template>\n\n        <ng-template #defaultPageFooter>\n            <mat-card class='bottom-card footer'>\n                <span class=\"bottom-card-title footer-font\"><strong>{{footerText ?? 'tasks.footer.defaultText' | translate}}</strong></span>\n            </mat-card>\n        </ng-template>\n    </ng-container>\n</div>\n", styles: [".font-size-20{font-size:20px}.full-width{width:100%}.full-height{height:100%}.top-card{margin-bottom:10px;margin-top:10px}.top-card-title{display:flex;align-items:center;flex-direction:column}.bottom-card{margin-bottom:10px;margin-top:10px}.bottom-card-title{display:block;align-items:start;flex-direction:column}\n"], components: [{ 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"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$3.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"] }, { type: i1.LetDirective, selector: "[nccLet]", inputs: ["nccLet"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }], pipes: { "async": i4.AsyncPipe, "translate": i1$2.TranslatePipe } });
+SingleTaskComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: SingleTaskComponent, selector: "nc-single-task", usesInheritance: true, ngImport: i0, template: "<div fxLayout='column' fxLayoutAlign='start center' fxFlex>\n    <ng-container *nccLet=\"(task$ | async) as task\">\n\n        <div *ngIf='(loading$ | async) === false && !task' fxLayout='column' fxLayoutAlign='center center'\n             fxFlex>\n            <div *ngTemplateOutlet =\"noTaskSection ?? defaultNoTaskSection\"></div>\n        </div>\n\n        <cdk-virtual-scroll-viewport *ngIf=\"task\" itemSize=\"1\" class=\"task-panel-scroll-container full-width full-height\">\n            <div *ngTemplateOutlet='pageHeader ?? defaultPageHeader'></div>\n            <nc-task-panel\n                [textEllipsis]='textEllipsis'\n                [taskPanelData]='task'\n                [selectedHeaders$]='selectedHeaders$'\n                [forceLoadDataOnOpen]='forceLoadDataOnOpen'\n                [responsiveBody]='responsiveBody'\n                (taskEvent)='emitTaskEvent($event)'\n                (panelRefOutput)='setPanelRef($event)'\n                [preventCollapse]='preventCollapse'\n                [hidePanelHeader]='hidePanelHeader'\n                [actionButtonTemplates]='actionButtonTemplates'\n                [actionRowJustifyContent]='actionRowJustifyContent'\n                [first]='true'\n                [last]='true'\n                [hideActionRow]=\"hideActionRow\"\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            <div *ngTemplateOutlet='pageFooter ?? defaultPageFooter'></div>\n        </cdk-virtual-scroll-viewport>\n\n        <ng-template #defaultNoTaskSection>\n            <mat-icon color='accent'>check_box</mat-icon>\n            <span class='font-size-20'>{{ 'tasks.view.noTasksSatisfyingThisFilter' | translate }}</span>\n        </ng-template>\n\n        <ng-template #defaultPageHeader>\n            <mat-card class=\"top-card\" *ngIf=\"showPageHeader\">\n                <span class=\"top-card-title\"><strong>{{headerTitle ?? (!!task && !!task.task ? task.task.title : '')}}</strong></span>\n            </mat-card>\n        </ng-template>\n\n        <ng-template #defaultPageFooter>\n            <mat-card class='bottom-card footer' *ngIf=\"showPageFooter\">\n                <span class=\"bottom-card-title footer-font\"><strong>{{footerText ?? 'tasks.footer.defaultText' | translate}}</strong></span>\n            </mat-card>\n        </ng-template>\n    </ng-container>\n</div>\n", styles: [".font-size-20{font-size:20px}.full-width{width:100%}.full-height{height:100%}.top-card{margin-bottom:10px;margin-top:10px}.top-card-title{display:flex;align-items:center;flex-direction:column}.bottom-card{margin-bottom:10px;margin-top:10px}.bottom-card-title{display:block;align-items:start;flex-direction:column}\n"], components: [{ 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"] }, { type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: i3$3.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"] }, { type: i1.LetDirective, selector: "[nccLet]", inputs: ["nccLet"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }], pipes: { "async": i4.AsyncPipe, "translate": i1$2.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: SingleTaskComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'nc-single-task', template: "<div fxLayout='column' fxLayoutAlign='start center' fxFlex>\n    <ng-container *nccLet=\"(task$ | async) as task\">\n\n        <div *ngIf='(loading$ | async) === false && !task' fxLayout='column' fxLayoutAlign='center center'\n             fxFlex>\n            <div *ngTemplateOutlet =\"noTaskSection ?? defaultNoTaskSection\"></div>\n        </div>\n\n        <cdk-virtual-scroll-viewport *ngIf=\"task\" itemSize=\"1\" class=\"task-panel-scroll-container full-width full-height\">\n            <div *ngTemplateOutlet='pageHeader ?? defaultPageHeader'></div>\n            <nc-task-panel\n                [textEllipsis]='textEllipsis'\n                [taskPanelData]='task'\n                [selectedHeaders$]='selectedHeaders$'\n                [forceLoadDataOnOpen]='forceLoadDataOnOpen'\n                [responsiveBody]='responsiveBody'\n                (taskEvent)='emitTaskEvent($event)'\n                (panelRefOutput)='setPanelRef($event)'\n                [preventCollapse]='preventCollapse'\n                [hidePanelHeader]='hidePanelHeader'\n                [actionButtonTemplates]='actionButtonTemplates'\n                [actionRowJustifyContent]='actionRowJustifyContent'\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            <div *ngTemplateOutlet='pageFooter ?? defaultPageFooter'></div>\n        </cdk-virtual-scroll-viewport>\n\n        <ng-template #defaultNoTaskSection>\n            <mat-icon color='accent'>check_box</mat-icon>\n            <span class='font-size-20'>{{ 'tasks.view.noTasksSatisfyingThisFilter' | translate }}</span>\n        </ng-template>\n\n        <ng-template #defaultPageHeader>\n            <mat-card class=\"top-card\">\n                <span class=\"top-card-title\"><strong>{{headerTitle ?? (!!task && !!task.task ? task.task.title : '')}}</strong></span>\n            </mat-card>\n        </ng-template>\n\n        <ng-template #defaultPageFooter>\n            <mat-card class='bottom-card footer'>\n                <span class=\"bottom-card-title footer-font\"><strong>{{footerText ?? 'tasks.footer.defaultText' | translate}}</strong></span>\n            </mat-card>\n        </ng-template>\n    </ng-container>\n</div>\n", styles: [".font-size-20{font-size:20px}.full-width{width:100%}.full-height{height:100%}.top-card{margin-bottom:10px;margin-top:10px}.top-card-title{display:flex;align-items:center;flex-direction:column}.bottom-card{margin-bottom:10px;margin-top:10px}.bottom-card-title{display:block;align-items:start;flex-direction:column}\n"] }]
+            args: [{ selector: 'nc-single-task', template: "<div fxLayout='column' fxLayoutAlign='start center' fxFlex>\n    <ng-container *nccLet=\"(task$ | async) as task\">\n\n        <div *ngIf='(loading$ | async) === false && !task' fxLayout='column' fxLayoutAlign='center center'\n             fxFlex>\n            <div *ngTemplateOutlet =\"noTaskSection ?? defaultNoTaskSection\"></div>\n        </div>\n\n        <cdk-virtual-scroll-viewport *ngIf=\"task\" itemSize=\"1\" class=\"task-panel-scroll-container full-width full-height\">\n            <div *ngTemplateOutlet='pageHeader ?? defaultPageHeader'></div>\n            <nc-task-panel\n                [textEllipsis]='textEllipsis'\n                [taskPanelData]='task'\n                [selectedHeaders$]='selectedHeaders$'\n                [forceLoadDataOnOpen]='forceLoadDataOnOpen'\n                [responsiveBody]='responsiveBody'\n                (taskEvent)='emitTaskEvent($event)'\n                (panelRefOutput)='setPanelRef($event)'\n                [preventCollapse]='preventCollapse'\n                [hidePanelHeader]='hidePanelHeader'\n                [actionButtonTemplates]='actionButtonTemplates'\n                [actionRowJustifyContent]='actionRowJustifyContent'\n                [first]='true'\n                [last]='true'\n                [hideActionRow]=\"hideActionRow\"\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            <div *ngTemplateOutlet='pageFooter ?? defaultPageFooter'></div>\n        </cdk-virtual-scroll-viewport>\n\n        <ng-template #defaultNoTaskSection>\n            <mat-icon color='accent'>check_box</mat-icon>\n            <span class='font-size-20'>{{ 'tasks.view.noTasksSatisfyingThisFilter' | translate }}</span>\n        </ng-template>\n\n        <ng-template #defaultPageHeader>\n            <mat-card class=\"top-card\" *ngIf=\"showPageHeader\">\n                <span class=\"top-card-title\"><strong>{{headerTitle ?? (!!task && !!task.task ? task.task.title : '')}}</strong></span>\n            </mat-card>\n        </ng-template>\n\n        <ng-template #defaultPageFooter>\n            <mat-card class='bottom-card footer' *ngIf=\"showPageFooter\">\n                <span class=\"bottom-card-title footer-font\"><strong>{{footerText ?? 'tasks.footer.defaultText' | translate}}</strong></span>\n            </mat-card>\n        </ng-template>\n    </ng-container>\n</div>\n", styles: [".font-size-20{font-size:20px}.full-width{width:100%}.full-height{height:100%}.top-card{margin-bottom:10px;margin-top:10px}.top-card-title{display:flex;align-items:center;flex-direction:column}.bottom-card{margin-bottom:10px;margin-top:10px}.bottom-card-title{display:block;align-items:start;flex-direction:column}\n"] }]
         }], ctorParameters: function () { return [{ type: i1.LoggerService }, { type: i2$2.ActivatedRoute }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -4807,7 +4814,7 @@ class NavigationDoubleDrawerComponent extends AbstractNavigationDoubleDrawerComp
     }
 }
 NavigationDoubleDrawerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: NavigationDoubleDrawerComponent, deps: [{ token: i2$2.Router }, { token: i2$2.ActivatedRoute }, { token: i1$5.BreakpointObserver }, { token: i1.LanguageService }, { token: i1$2.TranslateService }, { token: i1.UserService }, { token: i1.AccessService }, { token: i1.LoggerService }, { token: i1.ConfigurationService }, { token: i1.UriService }, { token: i1.ImpersonationUserSelectService }, { token: i1.ImpersonationService }, { token: i1.DynamicNavigationRouteProviderService }], target: i0.ɵɵFactoryTarget.Component });
-NavigationDoubleDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NavigationDoubleDrawerComponent, selector: "nc-navigation-double-drawer", usesInheritance: true, ngImport: i0, template: "<div class=\"drawer-control rail-color height-60\" [ngClass]=\"{'index-menu': !configLeftMenu.opened}\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n    <button mat-icon-button (click)=\"toggleMenu()\" class=\"menu-button mat-typography menu-font-color\">\n        <mat-icon>menu</mat-icon>\n    </button>\n</div>\n<mat-toolbar fxHide.gt-sm class=\"toolbar\">\n    <mat-toolbar-row fxLayout=\"row\" fxLayoutAlign=\"space-between stretch\">\n        <div fxFlex fxLayoutAlign=\"start center\">\n            <button mat-icon-button (click)=\"toggleMenu()\">\n                <mat-icon>menu</mat-icon>\n            </button>\n        </div>\n        <div fxLayoutAlign=\"center center\" fxFlex>\n            <img #logo [alt]=\"imageAlt\" [src]=\"image\" class=\"logoimg-tool\"\n                 [routerLink]=\"imageRouterLink !== undefined ? imageRouterLink : []\">\n        </div>\n        <div fxFlex></div>\n    </mat-toolbar-row>\n</mat-toolbar>\n<mat-spinner *ngIf=\"!logo\"></mat-spinner>\n<mat-sidenav-container class=\"rail-container deny-select\">\n    <mat-sidenav mode=\"side\" [(opened)]=\"configLeftMenu.opened\" position=\"start\"\n                 [disableClose]=\"configLeftMenu.disableClose\"\n                 class=\"rail-content\">\n\n        <div fxLayout=\"column\" class=\"rail-color\" fxFlex>\n\n            <div *ngTemplateOutlet=\"portalLeftMenu || defaultLeftSide\"></div>\n\n            <div fxFlex></div>\n\n            <mat-menu #userRailMenu=\"matMenu\">\n                <div mat-menu-item role=\"menuitem\" class=\"large-menu-item\" fxLayout=\"row\" fxFlexAlign=\"center center\"\n                     [routerLink]=\"profileRouterLink\" routerLinkActive=\"active-tree-node\">\n                    <mat-icon class=\"margin-auto\" fxFlex>face</mat-icon>\n                    <div class=\"large-menu-item\" fxLayout=\"column\" fxFlexAlign=\"start center\" fxFlex>\n                        <span *ngIf=\"!user.isImpersonating()\"  class=\"large-menu-item-text\" fxFlex=\"50\">{{user.fullName}}</span>\n                        <span *ngIf=\"user.isImpersonating()\" class=\"large-menu-item-text\" fxFlex=\"50\">{{user.fullName}} ({{user.getSelfOrImpersonated().fullName}})</span>\n                        <span class=\"large-menu-item-text\" style=\"font-size: 12px;\" fxFlex=\"50\">{{user.email}}</span>\n                    </div>\n                </div>\n                <button *ngIf=\"includeImpersonation && !user.isImpersonating()\" mat-menu-item (click)=\"impersonate()\">\n                    <mat-icon>supervisor_account</mat-icon>\n                    <span>{{'side-menu.impersonation.submit' | translate}}</span>\n                </button>\n                <button *ngIf=\"includeImpersonation && user.isImpersonating()\" mat-menu-item (click)=\"stopImpersonating()\">\n                    <mat-icon>clear</mat-icon>\n                    <span>{{'side-menu.impersonation.cease' | translate }}</span>\n                </button>\n                <button mat-menu-item (click)=\"logout()\">\n                    <mat-icon>exit_to_app</mat-icon>\n                    <span>{{ 'toolbar.menu.logout' | translate }}</span>\n                </button>\n            </mat-menu>\n            <button *ngIf=\"includeUser\" mat-icon-button [matMenuTriggerFor]=\"userRailMenu\" class=\"menu-button mat-typography menu-font-color\"\n                    [matTooltip]=\"user.fullName\"\n                    [matTooltipPosition]=\"'right'\">\n                <mat-icon>account_circle</mat-icon>\n            </button>\n\n            <div *ngIf=\"includeLanguage\" fxLayout=\"row\" class=\"icon-container\" fxLayoutAlign=\"center center\">\n                <nc-language-selector fxLayout=\"row\" [language]=\"getLang()\"></nc-language-selector>\n            </div>\n\n            <mat-menu #railMenu=\"matMenu\">\n                <button *ngFor='let item of hiddenCustomItems; trackBy: itemsTrackBy' mat-menu-item\n                        [routerLink]='item.routing.path' routerLinkActive=\"active-tree-node\" (click)=\"onItemClick(item)\">\n                    <mat-icon>{{item.navigation.icon}}</mat-icon>\n                    <span>{{item.navigation.title}}</span>\n                </button>\n            </mat-menu>\n            <!--            <div fxLayout=\"row\" class=\"margin-bottom-x2 icon-container\" matTooltip=\"Otvori\u0165 menu\"-->\n            <!--                 matTooltipPosition=\"right\"-->\n            <!--                 fxLayoutAlign=\"center center\">-->\n            <!--                <button mat-icon-button [matMenuTriggerFor]=\"railMenu\">-->\n            <!--                    <mat-icon class=\"icon-large sidemenu-icon\">more_vert</mat-icon>-->\n            <!--                </button>-->\n            <!--            </div>-->\n            <button mat-icon-button [matMenuTriggerFor]=\"railMenu\"\n                    class=\"menu-button mat-typography menu-font-color margin-bottom-x2\"\n                    [matTooltip]=\"'toolbar.menu.open' | translate\"\n                    matTooltipPosition=\"right\">\n                <mat-icon>more_vert</mat-icon>\n            </button>\n\n        </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content class=\"first-content index-menu\" >\n        <mat-sidenav-container class=\"drawer-container\" (backdropClick)=\"toggleLeftMenu()\">\n            <mat-sidenav [mode]=\"configRightMenu.mode\" [(opened)]=\"configRightMenu.opened\" position=\"start\"\n                         [disableClose]=\"configRightMenu.disableClose\"\n                         class=\"drawer-content\"\n                         mwlResizable\n                         [style.width.px]=\"configRightMenu.width\"\n                         [resizeCursorPrecision]=\"20\"\n                         [resizeEdges]=\"{right: true}\"\n                         (resizing)=\"onResizeEvent($event)\">\n\n                <div *ngTemplateOutlet=\"portalRightMenu || defaultRightSide\"></div>\n\n            </mat-sidenav>\n\n            <mat-sidenav-content class=\"content-color\">\n                <ng-content></ng-content>\n            </mat-sidenav-content>\n        </mat-sidenav-container>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n\n<ng-template #defaultLeftSide>\n\n    <div class=\"height-60 border-bottom\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n        <button mat-icon-button (click)=\"toggleRightMenu()\" class=\"menu-button mat-typography menu-font-color\">\n            <mat-icon>menu</mat-icon>\n        </button>\n    </div>\n\n    <button mat-icon-button (click)=\"onHomeClick()\" class=\"menu-button mat-typography menu-font-color margin-top-default\"\n            [matTooltip]=\"'toolbar.menu.home' | translate\"\n            matTooltipPosition=\"right\">\n        <mat-icon>home</mat-icon>\n    </button>\n\n    <button *ngIf='!isOnZeroLevel() && (canGoBackLoading$ | async) === false' mat-icon-button (click)=\"onBackClick()\"\n            class=\"menu-button mat-typography menu-font-color\" [matTooltip]=\"'toolbar.menu.back' | translate\"\n            matTooltipPosition=\"right\">\n        <mat-icon>arrow_back</mat-icon>\n    </button>\n    <div *ngIf=\"(canGoBackLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"30\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n\n    <div class=\"margin-top-x2\"></div>\n\n    <button *ngFor='let folder of leftItems; trackBy: itemsTrackBy' mat-icon-button (click)=\"onItemClick(folder)\"\n            class=\"menu-button mat-typography menu-font-color\" [matTooltip]=\"folder.navigation.title\" [matTooltipPosition]=\"'right'\"\n            [ngClass]=\"isItemAndNodeEqual(folder, currentNode) ? 'rail-selected-color' : 'menu-font-color'\" [routerLink]='folder.routing.path'\n            routerLinkActive=\"active\">\n        <mat-icon>{{folder.navigation.icon}}</mat-icon>\n    </button>\n\n    <div *ngIf=\"(leftLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"30\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n</ng-template>\n\n<ng-template #defaultRightSide>\n    <div class=\"logo border-bottom\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n        <img *ngIf=\"image !== undefined\" [alt]=\"imageAlt\" [src]=\"image\" class=\"logoimg\"\n             [routerLink]=\"imageRouterLink !== undefined ? imageRouterLink : []\">\n    </div>\n    <div *ngIf=\"(rightLoading$ | async) === false\">\n        <div fxLayout=\"column\" fxLayoutAlign=\"end end\" class=\"order-icon-wrapper\">\n            <button mat-icon-button fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"mat-button mat-typography menu-font-color order-icon\" (click)=\"switchOrder()\"\n                    [matTooltip]=\"isAscending() ? ('dynamicNavigation.ascending' | translate) : ('dynamicNavigation.descending' | translate)\">\n                <mat-icon>{{isAscending() ? \"south\" : \"north\"}}</mat-icon>\n            </button>\n        </div>\n        <div *ngFor='let item of rightItems; trackBy: itemsTrackBy' (click)=\"onItemClick(item)\"\n             class=\"tree-node mat-typography mat-body-2\" fxLayoutAlign=\"start center\" [routerLink]='item.routing.path'\n             routerLinkActive=\"active-tree-node\">\n            <mat-icon class=\"tree-node-icon\">{{item.navigation.icon}}</mat-icon>\n            <span>{{item.navigation.title}}</span>\n            <span class=\"menu-item-focus-overlay\"></span>\n        </div>\n        <div *ngIf=\"moreItems.length > 0\">\n            <button mat-button color=\"primary\" (click)=\"loadMoreItems()\">{{'dynamicNavigation.loadMoreItems' | translate}}</button>\n        </div>\n    </div>\n    <div *ngIf=\"(rightLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"40\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n</ng-template>\n", styles: [".rail-container{height:100%}.rail-content{width:52px;min-width:52px;border-right:none!important}.drawer-container{height:100%}.menu-button{margin-left:6px;margin-right:6px;border-radius:8px}.drawer-content{width:300px;min-width:300px;box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.height-60{height:60px}.drawer-control{position:absolute;box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.index-menu{z-index:2}.first-content{box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.border-bottom{border-bottom:1px solid #E2E8F0}.logo{height:60px}.logo-closed{width:60px!important}.logoimg{margin-left:auto;margin-right:auto;height:35px;outline:none!important;cursor:pointer}.icon-large{height:40px;width:40px;font-size:40px;color:#000000b3}.icon-container{outline:none!important;height:40px}.icon-large:hover{cursor:pointer}.menu-font-color{color:#000000b3!important}.margin-top-65{margin-top:49px}.margin-auto{margin:auto}.padding-top-65{padding-top:49px}.padding-top-8{padding-top:8px}.margin-bottom-x2{margin-bottom:16px}.tree-node{outline:none!important;cursor:pointer;padding:10px 8px;margin:0 8px;color:#000000b3;position:relative;border-radius:8px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:.1px}.tree-node mat-icon.tree-node-icon{height:24px;width:24px;font-size:24px;margin-right:4px}.tree-node .tree-node-label{height:24px;font-size:16px}.tree-node .margin-component{width:8px;margin-right:4px}.tree-node .menu-item-focus-overlay{opacity:0;position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:black;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}.tree-node:hover .menu-item-focus-overlay{opacity:.04}.margin-top-default{margin-top:8px}.margin-top-x2{margin-top:16px}.logoimg-tool{height:33px;outline:none!important;cursor:pointer;background:#fafafa}.toolbar{min-height:50px!important;height:50px;border-bottom:1px solid #E2E8F0}@media screen and (max-width: 959.99px){.rail-container{height:calc(100% - 50px)}.rail-content{width:52px;min-width:52px;top:0;border-right:none!important}.margin-top-65{margin-top:16px}.padding-top-65{padding-top:16px}}.profile-tooltip{font-size:20px}.sidemenu-icon{line-height:unset!important}.line{width:calc(100% - 16px);padding-left:8px;padding-right:8px;flex:1}.headline-text{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.4px;padding-top:4px}.headline-padding{padding:0 8px}.large-menu-item{height:64px;line-height:64px}.large-menu-item-text{line-height:32px}.cursor-pointer{cursor:pointer}.box-container{box-sizing:content-box;display:block;overflow:hidden}.content-color{background-color:#f8fafc}.expansion-indicator{color:#00000080;margin-right:10px}.expansion-indicator:after{border-style:solid;border-width:0 2px 2px 0;content:\"\";display:inline-block;padding:3px;vertical-align:middle;transform:rotate(45deg)}.order-icon{transform:scale(.8)}.order-text{color:#000000b3}.order-icon-wrapper{margin-bottom:0}.deny-select{-webkit-user-select:none;user-select:none}\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$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i8$1.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" }], 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: i8.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { type: i6$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$2.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.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$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10$2.ResizableDirective, selector: "[mwlResizable]", inputs: ["resizeEdges", "enableGhostResize", "resizeSnapGrid", "resizeCursors", "resizeCursorPrecision", "ghostElementPositioning", "allowNegativeResizes", "mouseMoveThrottleMS", "validateResize"], outputs: ["resizeStart", "resizing", "resizeEnd"] }], pipes: { "translate": i1$2.TranslatePipe, "async": i4.AsyncPipe }, animations: [
+NavigationDoubleDrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: NavigationDoubleDrawerComponent, selector: "nc-navigation-double-drawer", usesInheritance: true, ngImport: i0, template: "<div class=\"drawer-control rail-color height-60\" [ngClass]=\"{'index-menu': !configLeftMenu.opened}\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n    <button mat-icon-button (click)=\"toggleMenu()\" class=\"menu-button mat-typography menu-font-color\">\n        <mat-icon>menu</mat-icon>\n    </button>\n</div>\n<mat-toolbar fxHide.gt-sm class=\"toolbar\">\n    <mat-toolbar-row fxLayout=\"row\" fxLayoutAlign=\"space-between stretch\">\n        <div fxFlex fxLayoutAlign=\"start center\">\n            <button mat-icon-button (click)=\"toggleMenu()\">\n                <mat-icon>menu</mat-icon>\n            </button>\n        </div>\n        <div fxLayoutAlign=\"center center\" fxFlex>\n            <img #logo [alt]=\"imageAlt\" [src]=\"image\" class=\"logoimg-tool\"\n                 [routerLink]=\"imageRouterLink !== undefined ? imageRouterLink : []\">\n        </div>\n        <div fxFlex></div>\n    </mat-toolbar-row>\n</mat-toolbar>\n<mat-spinner *ngIf=\"!logo\"></mat-spinner>\n<mat-sidenav-container class=\"rail-container deny-select\">\n    <mat-sidenav mode=\"side\" [(opened)]=\"configLeftMenu.opened\" position=\"start\"\n                 [disableClose]=\"configLeftMenu.disableClose\"\n                 class=\"rail-content\">\n\n        <div fxLayout=\"column\" class=\"rail-color\" fxFlex>\n\n            <div *ngTemplateOutlet=\"portalLeftMenu || defaultLeftSide\"></div>\n\n            <div fxFlex></div>\n\n            <mat-menu #userRailMenu=\"matMenu\">\n                <div mat-menu-item role=\"menuitem\" class=\"large-menu-item\" fxLayout=\"row\" fxFlexAlign=\"center center\"\n                     [routerLink]=\"profileRouterLink\" routerLinkActive=\"active-tree-node\">\n                    <mat-icon class=\"margin-auto\" fxFlex>face</mat-icon>\n                    <div class=\"large-menu-item\" fxLayout=\"column\" fxFlexAlign=\"start center\" fxFlex>\n                        <span *ngIf=\"!user.isImpersonating()\"  class=\"large-menu-item-text\" fxFlex=\"50\">{{user.fullName}}</span>\n                        <span *ngIf=\"user.isImpersonating()\" class=\"large-menu-item-text\" fxFlex=\"50\">{{user.fullName}} ({{user.getSelfOrImpersonated().fullName}})</span>\n                        <span class=\"large-menu-item-text\" style=\"font-size: 12px;\" fxFlex=\"50\">{{user.email}}</span>\n                    </div>\n                </div>\n                <button *ngIf=\"includeImpersonation && !user.isImpersonating()\" mat-menu-item (click)=\"impersonate()\">\n                    <mat-icon>supervisor_account</mat-icon>\n                    <span>{{'side-menu.impersonation.submit' | translate}}</span>\n                </button>\n                <button *ngIf=\"includeImpersonation && user.isImpersonating()\" mat-menu-item (click)=\"stopImpersonating()\">\n                    <mat-icon>clear</mat-icon>\n                    <span>{{'side-menu.impersonation.cease' | translate }}</span>\n                </button>\n                <button mat-menu-item (click)=\"logout()\">\n                    <mat-icon>exit_to_app</mat-icon>\n                    <span>{{ 'toolbar.menu.logout' | translate }}</span>\n                </button>\n            </mat-menu>\n            <button *ngIf=\"includeUser\" mat-icon-button [matMenuTriggerFor]=\"userRailMenu\" class=\"menu-button mat-typography menu-font-color\"\n                    [matTooltip]=\"user.fullName\"\n                    [matTooltipPosition]=\"'right'\">\n                <mat-icon>account_circle</mat-icon>\n            </button>\n\n            <div *ngIf=\"includeLanguage\" fxLayout=\"row\" class=\"icon-container\" fxLayoutAlign=\"center center\">\n                <nc-language-selector fxLayout=\"row\" [language]=\"getLang()\"></nc-language-selector>\n            </div>\n\n            <mat-menu #railMenu=\"matMenu\">\n                <button *ngFor='let item of hiddenCustomItems; trackBy: itemsTrackBy' mat-menu-item\n                        [routerLink]='item.routing.path' routerLinkActive=\"active-tree-node\">\n                    <mat-icon>{{item.navigation.icon}}</mat-icon>\n                    <span>{{item.navigation.title}}</span>\n                </button>\n            </mat-menu>\n            <!--            <div fxLayout=\"row\" class=\"margin-bottom-x2 icon-container\" matTooltip=\"Otvori\u0165 menu\"-->\n            <!--                 matTooltipPosition=\"right\"-->\n            <!--                 fxLayoutAlign=\"center center\">-->\n            <!--                <button mat-icon-button [matMenuTriggerFor]=\"railMenu\">-->\n            <!--                    <mat-icon class=\"icon-large sidemenu-icon\">more_vert</mat-icon>-->\n            <!--                </button>-->\n            <!--            </div>-->\n            <button mat-icon-button [matMenuTriggerFor]=\"railMenu\"\n                    class=\"menu-button mat-typography menu-font-color margin-bottom-x2\"\n                    [matTooltip]=\"'toolbar.menu.open' | translate\"\n                    matTooltipPosition=\"right\">\n                <mat-icon>more_vert</mat-icon>\n            </button>\n\n        </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content class=\"first-content index-menu\" >\n        <mat-sidenav-container class=\"drawer-container\" (backdropClick)=\"toggleLeftMenu()\">\n            <mat-sidenav [mode]=\"configRightMenu.mode\" [(opened)]=\"configRightMenu.opened\" position=\"start\"\n                         [disableClose]=\"configRightMenu.disableClose\"\n                         class=\"drawer-content\"\n                         mwlResizable\n                         [style.width.px]=\"configRightMenu.width\"\n                         [resizeCursorPrecision]=\"20\"\n                         [resizeEdges]=\"{right: true}\"\n                         (resizing)=\"onResizeEvent($event)\">\n\n                <div *ngTemplateOutlet=\"portalRightMenu || defaultRightSide\"></div>\n\n            </mat-sidenav>\n\n            <mat-sidenav-content class=\"content-color\">\n                <ng-content></ng-content>\n            </mat-sidenav-content>\n        </mat-sidenav-container>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n\n<ng-template #defaultLeftSide>\n\n    <div class=\"height-60 border-bottom\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n        <button mat-icon-button (click)=\"toggleRightMenu()\" class=\"menu-button mat-typography menu-font-color\">\n            <mat-icon>menu</mat-icon>\n        </button>\n    </div>\n\n    <button mat-icon-button (click)=\"onHomeClick()\" class=\"menu-button mat-typography menu-font-color margin-top-default\"\n            [matTooltip]=\"'toolbar.menu.home' | translate\"\n            matTooltipPosition=\"right\">\n        <mat-icon>home</mat-icon>\n    </button>\n\n    <button *ngIf='!isOnZeroLevel() && (canGoBackLoading$ | async) === false' mat-icon-button (click)=\"onBackClick()\"\n            class=\"menu-button mat-typography menu-font-color\" [matTooltip]=\"'toolbar.menu.back' | translate\"\n            matTooltipPosition=\"right\">\n        <mat-icon>arrow_back</mat-icon>\n    </button>\n    <div *ngIf=\"(canGoBackLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"30\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n\n    <div class=\"margin-top-x2\"></div>\n\n    <button *ngFor='let folder of leftItems; trackBy: itemsTrackBy' mat-icon-button (click)=\"onItemClick(folder)\"\n            class=\"menu-button mat-typography menu-font-color\" [matTooltip]=\"folder.navigation.title\" [matTooltipPosition]=\"'right'\"\n            [ngClass]=\"isItemAndNodeEqual(folder, currentNode) ? 'rail-selected-color' : 'menu-font-color'\" [routerLink]='folder.routing.path'\n            routerLinkActive=\"active\">\n        <mat-icon>{{folder.navigation.icon}}</mat-icon>\n    </button>\n\n    <div *ngIf=\"(leftLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"30\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n</ng-template>\n\n<ng-template #defaultRightSide>\n    <div class=\"logo border-bottom\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n        <img *ngIf=\"image !== undefined\" [alt]=\"imageAlt\" [src]=\"image\" class=\"logoimg\"\n             [routerLink]=\"imageRouterLink !== undefined ? imageRouterLink : []\">\n    </div>\n    <div *ngIf=\"(rightLoading$ | async) === false\">\n        <div fxLayout=\"column\" fxLayoutAlign=\"end end\" class=\"order-icon-wrapper\">\n            <button mat-icon-button fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"mat-button mat-typography menu-font-color order-icon\" (click)=\"switchOrder()\"\n                    [matTooltip]=\"isAscending() ? ('dynamicNavigation.ascending' | translate) : ('dynamicNavigation.descending' | translate)\">\n                <mat-icon>{{isAscending() ? \"south\" : \"north\"}}</mat-icon>\n            </button>\n        </div>\n        <div *ngFor='let item of rightItems; trackBy: itemsTrackBy' (click)=\"onItemClick(item)\"\n             class=\"tree-node mat-typography mat-body-2\" fxLayoutAlign=\"start center\" [routerLink]='item.routing.path'\n             routerLinkActive=\"active-tree-node\">\n            <mat-icon class=\"tree-node-icon\">{{item.navigation.icon}}</mat-icon>\n            <span>{{item.navigation.title}}</span>\n            <span class=\"menu-item-focus-overlay\"></span>\n        </div>\n        <div *ngIf=\"moreItems.length > 0\">\n            <button mat-button color=\"primary\" (click)=\"loadMoreItems()\">{{'dynamicNavigation.loadMoreItems' | translate}}</button>\n        </div>\n    </div>\n    <div *ngIf=\"(rightLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"40\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n</ng-template>\n", styles: [".rail-container{height:100%}.rail-content{width:52px;min-width:52px;border-right:none!important}.drawer-container{height:100%}.menu-button{margin-left:6px;margin-right:6px;border-radius:8px}.drawer-content{width:300px;min-width:300px;box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.height-60{height:60px}.drawer-control{position:absolute;box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.index-menu{z-index:2}.first-content{box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.border-bottom{border-bottom:1px solid #E2E8F0}.logo{height:60px}.logo-closed{width:60px!important}.logoimg{margin-left:auto;margin-right:auto;height:35px;outline:none!important;cursor:pointer}.icon-large{height:40px;width:40px;font-size:40px;color:#000000b3}.icon-container{outline:none!important;height:40px}.icon-large:hover{cursor:pointer}.menu-font-color{color:#000000b3!important}.margin-top-65{margin-top:49px}.margin-auto{margin:auto}.padding-top-65{padding-top:49px}.padding-top-8{padding-top:8px}.margin-bottom-x2{margin-bottom:16px}.tree-node{outline:none!important;cursor:pointer;padding:10px 8px;margin:0 8px;color:#000000b3;position:relative;border-radius:8px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:.1px}.tree-node mat-icon.tree-node-icon{height:24px;width:24px;font-size:24px;margin-right:4px}.tree-node .tree-node-label{height:24px;font-size:16px}.tree-node .margin-component{width:8px;margin-right:4px}.tree-node .menu-item-focus-overlay{opacity:0;position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:black;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}.tree-node:hover .menu-item-focus-overlay{opacity:.04}.margin-top-default{margin-top:8px}.margin-top-x2{margin-top:16px}.logoimg-tool{height:33px;outline:none!important;cursor:pointer;background:#fafafa}.toolbar{min-height:50px!important;height:50px;border-bottom:1px solid #E2E8F0}@media screen and (max-width: 959.99px){.rail-container{height:calc(100% - 50px)}.rail-content{width:52px;min-width:52px;top:0;border-right:none!important}.margin-top-65{margin-top:16px}.padding-top-65{padding-top:16px}}.profile-tooltip{font-size:20px}.sidemenu-icon{line-height:unset!important}.line{width:calc(100% - 16px);padding-left:8px;padding-right:8px;flex:1}.headline-text{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.4px;padding-top:4px}.headline-padding{padding:0 8px}.large-menu-item{height:64px;line-height:64px}.large-menu-item-text{line-height:32px}.cursor-pointer{cursor:pointer}.box-container{box-sizing:content-box;display:block;overflow:hidden}.content-color{background-color:#f8fafc}.expansion-indicator{color:#00000080;margin-right:10px}.expansion-indicator:after{border-style:solid;border-width:0 2px 2px 0;content:\"\";display:inline-block;padding:3px;vertical-align:middle;transform:rotate(45deg)}.order-icon{transform:scale(.8)}.order-text{color:#000000b3}.order-icon-wrapper{margin-bottom:0}.deny-select{-webkit-user-select:none;user-select:none}\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$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i8$1.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" }], 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: i8.DefaultShowHideDirective, selector: "  [fxShow], [fxShow.print],  [fxShow.xs], [fxShow.sm], [fxShow.md], [fxShow.lg], [fxShow.xl],  [fxShow.lt-sm], [fxShow.lt-md], [fxShow.lt-lg], [fxShow.lt-xl],  [fxShow.gt-xs], [fxShow.gt-sm], [fxShow.gt-md], [fxShow.gt-lg],  [fxHide], [fxHide.print],  [fxHide.xs], [fxHide.sm], [fxHide.md], [fxHide.lg], [fxHide.xl],  [fxHide.lt-sm], [fxHide.lt-md], [fxHide.lt-lg], [fxHide.lt-xl],  [fxHide.gt-xs], [fxHide.gt-sm], [fxHide.gt-md], [fxHide.gt-lg]", inputs: ["fxShow", "fxShow.print", "fxShow.xs", "fxShow.sm", "fxShow.md", "fxShow.lg", "fxShow.xl", "fxShow.lt-sm", "fxShow.lt-md", "fxShow.lt-lg", "fxShow.lt-xl", "fxShow.gt-xs", "fxShow.gt-sm", "fxShow.gt-md", "fxShow.gt-lg", "fxHide", "fxHide.print", "fxHide.xs", "fxHide.sm", "fxHide.md", "fxHide.lg", "fxHide.xl", "fxHide.lt-sm", "fxHide.lt-md", "fxHide.lt-lg", "fxHide.lt-xl", "fxHide.gt-xs", "fxHide.gt-sm", "fxHide.gt-md", "fxHide.gt-lg"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }, { type: i2.MatToolbarRow, selector: "mat-toolbar-row", exportAs: ["matToolbarRow"] }, { type: i6$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$2.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo", "routerLink"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.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$2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { type: i8$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i10$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10$2.ResizableDirective, selector: "[mwlResizable]", inputs: ["resizeEdges", "enableGhostResize", "resizeSnapGrid", "resizeCursors", "resizeCursorPrecision", "ghostElementPositioning", "allowNegativeResizes", "mouseMoveThrottleMS", "validateResize"], outputs: ["resizeStart", "resizing", "resizeEnd"] }], pipes: { "translate": i1$2.TranslatePipe, "async": i4.AsyncPipe }, animations: [
         trigger('sectionExpansion', [
             state('expanded, void', style({
                 height: '*',
@@ -4860,7 +4867,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                                 animate('225ms cubic-bezier(0.4,0.0,0.2,1)')
                             ])
                         ])
-                    ], template: "<div class=\"drawer-control rail-color height-60\" [ngClass]=\"{'index-menu': !configLeftMenu.opened}\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n    <button mat-icon-button (click)=\"toggleMenu()\" class=\"menu-button mat-typography menu-font-color\">\n        <mat-icon>menu</mat-icon>\n    </button>\n</div>\n<mat-toolbar fxHide.gt-sm class=\"toolbar\">\n    <mat-toolbar-row fxLayout=\"row\" fxLayoutAlign=\"space-between stretch\">\n        <div fxFlex fxLayoutAlign=\"start center\">\n            <button mat-icon-button (click)=\"toggleMenu()\">\n                <mat-icon>menu</mat-icon>\n            </button>\n        </div>\n        <div fxLayoutAlign=\"center center\" fxFlex>\n            <img #logo [alt]=\"imageAlt\" [src]=\"image\" class=\"logoimg-tool\"\n                 [routerLink]=\"imageRouterLink !== undefined ? imageRouterLink : []\">\n        </div>\n        <div fxFlex></div>\n    </mat-toolbar-row>\n</mat-toolbar>\n<mat-spinner *ngIf=\"!logo\"></mat-spinner>\n<mat-sidenav-container class=\"rail-container deny-select\">\n    <mat-sidenav mode=\"side\" [(opened)]=\"configLeftMenu.opened\" position=\"start\"\n                 [disableClose]=\"configLeftMenu.disableClose\"\n                 class=\"rail-content\">\n\n        <div fxLayout=\"column\" class=\"rail-color\" fxFlex>\n\n            <div *ngTemplateOutlet=\"portalLeftMenu || defaultLeftSide\"></div>\n\n            <div fxFlex></div>\n\n            <mat-menu #userRailMenu=\"matMenu\">\n                <div mat-menu-item role=\"menuitem\" class=\"large-menu-item\" fxLayout=\"row\" fxFlexAlign=\"center center\"\n                     [routerLink]=\"profileRouterLink\" routerLinkActive=\"active-tree-node\">\n                    <mat-icon class=\"margin-auto\" fxFlex>face</mat-icon>\n                    <div class=\"large-menu-item\" fxLayout=\"column\" fxFlexAlign=\"start center\" fxFlex>\n                        <span *ngIf=\"!user.isImpersonating()\"  class=\"large-menu-item-text\" fxFlex=\"50\">{{user.fullName}}</span>\n                        <span *ngIf=\"user.isImpersonating()\" class=\"large-menu-item-text\" fxFlex=\"50\">{{user.fullName}} ({{user.getSelfOrImpersonated().fullName}})</span>\n                        <span class=\"large-menu-item-text\" style=\"font-size: 12px;\" fxFlex=\"50\">{{user.email}}</span>\n                    </div>\n                </div>\n                <button *ngIf=\"includeImpersonation && !user.isImpersonating()\" mat-menu-item (click)=\"impersonate()\">\n                    <mat-icon>supervisor_account</mat-icon>\n                    <span>{{'side-menu.impersonation.submit' | translate}}</span>\n                </button>\n                <button *ngIf=\"includeImpersonation && user.isImpersonating()\" mat-menu-item (click)=\"stopImpersonating()\">\n                    <mat-icon>clear</mat-icon>\n                    <span>{{'side-menu.impersonation.cease' | translate }}</span>\n                </button>\n                <button mat-menu-item (click)=\"logout()\">\n                    <mat-icon>exit_to_app</mat-icon>\n                    <span>{{ 'toolbar.menu.logout' | translate }}</span>\n                </button>\n            </mat-menu>\n            <button *ngIf=\"includeUser\" mat-icon-button [matMenuTriggerFor]=\"userRailMenu\" class=\"menu-button mat-typography menu-font-color\"\n                    [matTooltip]=\"user.fullName\"\n                    [matTooltipPosition]=\"'right'\">\n                <mat-icon>account_circle</mat-icon>\n            </button>\n\n            <div *ngIf=\"includeLanguage\" fxLayout=\"row\" class=\"icon-container\" fxLayoutAlign=\"center center\">\n                <nc-language-selector fxLayout=\"row\" [language]=\"getLang()\"></nc-language-selector>\n            </div>\n\n            <mat-menu #railMenu=\"matMenu\">\n                <button *ngFor='let item of hiddenCustomItems; trackBy: itemsTrackBy' mat-menu-item\n                        [routerLink]='item.routing.path' routerLinkActive=\"active-tree-node\" (click)=\"onItemClick(item)\">\n                    <mat-icon>{{item.navigation.icon}}</mat-icon>\n                    <span>{{item.navigation.title}}</span>\n                </button>\n            </mat-menu>\n            <!--            <div fxLayout=\"row\" class=\"margin-bottom-x2 icon-container\" matTooltip=\"Otvori\u0165 menu\"-->\n            <!--                 matTooltipPosition=\"right\"-->\n            <!--                 fxLayoutAlign=\"center center\">-->\n            <!--                <button mat-icon-button [matMenuTriggerFor]=\"railMenu\">-->\n            <!--                    <mat-icon class=\"icon-large sidemenu-icon\">more_vert</mat-icon>-->\n            <!--                </button>-->\n            <!--            </div>-->\n            <button mat-icon-button [matMenuTriggerFor]=\"railMenu\"\n                    class=\"menu-button mat-typography menu-font-color margin-bottom-x2\"\n                    [matTooltip]=\"'toolbar.menu.open' | translate\"\n                    matTooltipPosition=\"right\">\n                <mat-icon>more_vert</mat-icon>\n            </button>\n\n        </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content class=\"first-content index-menu\" >\n        <mat-sidenav-container class=\"drawer-container\" (backdropClick)=\"toggleLeftMenu()\">\n            <mat-sidenav [mode]=\"configRightMenu.mode\" [(opened)]=\"configRightMenu.opened\" position=\"start\"\n                         [disableClose]=\"configRightMenu.disableClose\"\n                         class=\"drawer-content\"\n                         mwlResizable\n                         [style.width.px]=\"configRightMenu.width\"\n                         [resizeCursorPrecision]=\"20\"\n                         [resizeEdges]=\"{right: true}\"\n                         (resizing)=\"onResizeEvent($event)\">\n\n                <div *ngTemplateOutlet=\"portalRightMenu || defaultRightSide\"></div>\n\n            </mat-sidenav>\n\n            <mat-sidenav-content class=\"content-color\">\n                <ng-content></ng-content>\n            </mat-sidenav-content>\n        </mat-sidenav-container>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n\n<ng-template #defaultLeftSide>\n\n    <div class=\"height-60 border-bottom\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n        <button mat-icon-button (click)=\"toggleRightMenu()\" class=\"menu-button mat-typography menu-font-color\">\n            <mat-icon>menu</mat-icon>\n        </button>\n    </div>\n\n    <button mat-icon-button (click)=\"onHomeClick()\" class=\"menu-button mat-typography menu-font-color margin-top-default\"\n            [matTooltip]=\"'toolbar.menu.home' | translate\"\n            matTooltipPosition=\"right\">\n        <mat-icon>home</mat-icon>\n    </button>\n\n    <button *ngIf='!isOnZeroLevel() && (canGoBackLoading$ | async) === false' mat-icon-button (click)=\"onBackClick()\"\n            class=\"menu-button mat-typography menu-font-color\" [matTooltip]=\"'toolbar.menu.back' | translate\"\n            matTooltipPosition=\"right\">\n        <mat-icon>arrow_back</mat-icon>\n    </button>\n    <div *ngIf=\"(canGoBackLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"30\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n\n    <div class=\"margin-top-x2\"></div>\n\n    <button *ngFor='let folder of leftItems; trackBy: itemsTrackBy' mat-icon-button (click)=\"onItemClick(folder)\"\n            class=\"menu-button mat-typography menu-font-color\" [matTooltip]=\"folder.navigation.title\" [matTooltipPosition]=\"'right'\"\n            [ngClass]=\"isItemAndNodeEqual(folder, currentNode) ? 'rail-selected-color' : 'menu-font-color'\" [routerLink]='folder.routing.path'\n            routerLinkActive=\"active\">\n        <mat-icon>{{folder.navigation.icon}}</mat-icon>\n    </button>\n\n    <div *ngIf=\"(leftLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"30\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n</ng-template>\n\n<ng-template #defaultRightSide>\n    <div class=\"logo border-bottom\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n        <img *ngIf=\"image !== undefined\" [alt]=\"imageAlt\" [src]=\"image\" class=\"logoimg\"\n             [routerLink]=\"imageRouterLink !== undefined ? imageRouterLink : []\">\n    </div>\n    <div *ngIf=\"(rightLoading$ | async) === false\">\n        <div fxLayout=\"column\" fxLayoutAlign=\"end end\" class=\"order-icon-wrapper\">\n            <button mat-icon-button fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"mat-button mat-typography menu-font-color order-icon\" (click)=\"switchOrder()\"\n                    [matTooltip]=\"isAscending() ? ('dynamicNavigation.ascending' | translate) : ('dynamicNavigation.descending' | translate)\">\n                <mat-icon>{{isAscending() ? \"south\" : \"north\"}}</mat-icon>\n            </button>\n        </div>\n        <div *ngFor='let item of rightItems; trackBy: itemsTrackBy' (click)=\"onItemClick(item)\"\n             class=\"tree-node mat-typography mat-body-2\" fxLayoutAlign=\"start center\" [routerLink]='item.routing.path'\n             routerLinkActive=\"active-tree-node\">\n            <mat-icon class=\"tree-node-icon\">{{item.navigation.icon}}</mat-icon>\n            <span>{{item.navigation.title}}</span>\n            <span class=\"menu-item-focus-overlay\"></span>\n        </div>\n        <div *ngIf=\"moreItems.length > 0\">\n            <button mat-button color=\"primary\" (click)=\"loadMoreItems()\">{{'dynamicNavigation.loadMoreItems' | translate}}</button>\n        </div>\n    </div>\n    <div *ngIf=\"(rightLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"40\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n</ng-template>\n", styles: [".rail-container{height:100%}.rail-content{width:52px;min-width:52px;border-right:none!important}.drawer-container{height:100%}.menu-button{margin-left:6px;margin-right:6px;border-radius:8px}.drawer-content{width:300px;min-width:300px;box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.height-60{height:60px}.drawer-control{position:absolute;box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.index-menu{z-index:2}.first-content{box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.border-bottom{border-bottom:1px solid #E2E8F0}.logo{height:60px}.logo-closed{width:60px!important}.logoimg{margin-left:auto;margin-right:auto;height:35px;outline:none!important;cursor:pointer}.icon-large{height:40px;width:40px;font-size:40px;color:#000000b3}.icon-container{outline:none!important;height:40px}.icon-large:hover{cursor:pointer}.menu-font-color{color:#000000b3!important}.margin-top-65{margin-top:49px}.margin-auto{margin:auto}.padding-top-65{padding-top:49px}.padding-top-8{padding-top:8px}.margin-bottom-x2{margin-bottom:16px}.tree-node{outline:none!important;cursor:pointer;padding:10px 8px;margin:0 8px;color:#000000b3;position:relative;border-radius:8px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:.1px}.tree-node mat-icon.tree-node-icon{height:24px;width:24px;font-size:24px;margin-right:4px}.tree-node .tree-node-label{height:24px;font-size:16px}.tree-node .margin-component{width:8px;margin-right:4px}.tree-node .menu-item-focus-overlay{opacity:0;position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:black;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}.tree-node:hover .menu-item-focus-overlay{opacity:.04}.margin-top-default{margin-top:8px}.margin-top-x2{margin-top:16px}.logoimg-tool{height:33px;outline:none!important;cursor:pointer;background:#fafafa}.toolbar{min-height:50px!important;height:50px;border-bottom:1px solid #E2E8F0}@media screen and (max-width: 959.99px){.rail-container{height:calc(100% - 50px)}.rail-content{width:52px;min-width:52px;top:0;border-right:none!important}.margin-top-65{margin-top:16px}.padding-top-65{padding-top:16px}}.profile-tooltip{font-size:20px}.sidemenu-icon{line-height:unset!important}.line{width:calc(100% - 16px);padding-left:8px;padding-right:8px;flex:1}.headline-text{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.4px;padding-top:4px}.headline-padding{padding:0 8px}.large-menu-item{height:64px;line-height:64px}.large-menu-item-text{line-height:32px}.cursor-pointer{cursor:pointer}.box-container{box-sizing:content-box;display:block;overflow:hidden}.content-color{background-color:#f8fafc}.expansion-indicator{color:#00000080;margin-right:10px}.expansion-indicator:after{border-style:solid;border-width:0 2px 2px 0;content:\"\";display:inline-block;padding:3px;vertical-align:middle;transform:rotate(45deg)}.order-icon{transform:scale(.8)}.order-text{color:#000000b3}.order-icon-wrapper{margin-bottom:0}.deny-select{-webkit-user-select:none;user-select:none}\n"] }]
+                    ], template: "<div class=\"drawer-control rail-color height-60\" [ngClass]=\"{'index-menu': !configLeftMenu.opened}\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n    <button mat-icon-button (click)=\"toggleMenu()\" class=\"menu-button mat-typography menu-font-color\">\n        <mat-icon>menu</mat-icon>\n    </button>\n</div>\n<mat-toolbar fxHide.gt-sm class=\"toolbar\">\n    <mat-toolbar-row fxLayout=\"row\" fxLayoutAlign=\"space-between stretch\">\n        <div fxFlex fxLayoutAlign=\"start center\">\n            <button mat-icon-button (click)=\"toggleMenu()\">\n                <mat-icon>menu</mat-icon>\n            </button>\n        </div>\n        <div fxLayoutAlign=\"center center\" fxFlex>\n            <img #logo [alt]=\"imageAlt\" [src]=\"image\" class=\"logoimg-tool\"\n                 [routerLink]=\"imageRouterLink !== undefined ? imageRouterLink : []\">\n        </div>\n        <div fxFlex></div>\n    </mat-toolbar-row>\n</mat-toolbar>\n<mat-spinner *ngIf=\"!logo\"></mat-spinner>\n<mat-sidenav-container class=\"rail-container deny-select\">\n    <mat-sidenav mode=\"side\" [(opened)]=\"configLeftMenu.opened\" position=\"start\"\n                 [disableClose]=\"configLeftMenu.disableClose\"\n                 class=\"rail-content\">\n\n        <div fxLayout=\"column\" class=\"rail-color\" fxFlex>\n\n            <div *ngTemplateOutlet=\"portalLeftMenu || defaultLeftSide\"></div>\n\n            <div fxFlex></div>\n\n            <mat-menu #userRailMenu=\"matMenu\">\n                <div mat-menu-item role=\"menuitem\" class=\"large-menu-item\" fxLayout=\"row\" fxFlexAlign=\"center center\"\n                     [routerLink]=\"profileRouterLink\" routerLinkActive=\"active-tree-node\">\n                    <mat-icon class=\"margin-auto\" fxFlex>face</mat-icon>\n                    <div class=\"large-menu-item\" fxLayout=\"column\" fxFlexAlign=\"start center\" fxFlex>\n                        <span *ngIf=\"!user.isImpersonating()\"  class=\"large-menu-item-text\" fxFlex=\"50\">{{user.fullName}}</span>\n                        <span *ngIf=\"user.isImpersonating()\" class=\"large-menu-item-text\" fxFlex=\"50\">{{user.fullName}} ({{user.getSelfOrImpersonated().fullName}})</span>\n                        <span class=\"large-menu-item-text\" style=\"font-size: 12px;\" fxFlex=\"50\">{{user.email}}</span>\n                    </div>\n                </div>\n                <button *ngIf=\"includeImpersonation && !user.isImpersonating()\" mat-menu-item (click)=\"impersonate()\">\n                    <mat-icon>supervisor_account</mat-icon>\n                    <span>{{'side-menu.impersonation.submit' | translate}}</span>\n                </button>\n                <button *ngIf=\"includeImpersonation && user.isImpersonating()\" mat-menu-item (click)=\"stopImpersonating()\">\n                    <mat-icon>clear</mat-icon>\n                    <span>{{'side-menu.impersonation.cease' | translate }}</span>\n                </button>\n                <button mat-menu-item (click)=\"logout()\">\n                    <mat-icon>exit_to_app</mat-icon>\n                    <span>{{ 'toolbar.menu.logout' | translate }}</span>\n                </button>\n            </mat-menu>\n            <button *ngIf=\"includeUser\" mat-icon-button [matMenuTriggerFor]=\"userRailMenu\" class=\"menu-button mat-typography menu-font-color\"\n                    [matTooltip]=\"user.fullName\"\n                    [matTooltipPosition]=\"'right'\">\n                <mat-icon>account_circle</mat-icon>\n            </button>\n\n            <div *ngIf=\"includeLanguage\" fxLayout=\"row\" class=\"icon-container\" fxLayoutAlign=\"center center\">\n                <nc-language-selector fxLayout=\"row\" [language]=\"getLang()\"></nc-language-selector>\n            </div>\n\n            <mat-menu #railMenu=\"matMenu\">\n                <button *ngFor='let item of hiddenCustomItems; trackBy: itemsTrackBy' mat-menu-item\n                        [routerLink]='item.routing.path' routerLinkActive=\"active-tree-node\">\n                    <mat-icon>{{item.navigation.icon}}</mat-icon>\n                    <span>{{item.navigation.title}}</span>\n                </button>\n            </mat-menu>\n            <!--            <div fxLayout=\"row\" class=\"margin-bottom-x2 icon-container\" matTooltip=\"Otvori\u0165 menu\"-->\n            <!--                 matTooltipPosition=\"right\"-->\n            <!--                 fxLayoutAlign=\"center center\">-->\n            <!--                <button mat-icon-button [matMenuTriggerFor]=\"railMenu\">-->\n            <!--                    <mat-icon class=\"icon-large sidemenu-icon\">more_vert</mat-icon>-->\n            <!--                </button>-->\n            <!--            </div>-->\n            <button mat-icon-button [matMenuTriggerFor]=\"railMenu\"\n                    class=\"menu-button mat-typography menu-font-color margin-bottom-x2\"\n                    [matTooltip]=\"'toolbar.menu.open' | translate\"\n                    matTooltipPosition=\"right\">\n                <mat-icon>more_vert</mat-icon>\n            </button>\n\n        </div>\n    </mat-sidenav>\n\n    <mat-sidenav-content class=\"first-content index-menu\" >\n        <mat-sidenav-container class=\"drawer-container\" (backdropClick)=\"toggleLeftMenu()\">\n            <mat-sidenav [mode]=\"configRightMenu.mode\" [(opened)]=\"configRightMenu.opened\" position=\"start\"\n                         [disableClose]=\"configRightMenu.disableClose\"\n                         class=\"drawer-content\"\n                         mwlResizable\n                         [style.width.px]=\"configRightMenu.width\"\n                         [resizeCursorPrecision]=\"20\"\n                         [resizeEdges]=\"{right: true}\"\n                         (resizing)=\"onResizeEvent($event)\">\n\n                <div *ngTemplateOutlet=\"portalRightMenu || defaultRightSide\"></div>\n\n            </mat-sidenav>\n\n            <mat-sidenav-content class=\"content-color\">\n                <ng-content></ng-content>\n            </mat-sidenav-content>\n        </mat-sidenav-container>\n    </mat-sidenav-content>\n</mat-sidenav-container>\n\n<ng-template #defaultLeftSide>\n\n    <div class=\"height-60 border-bottom\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n        <button mat-icon-button (click)=\"toggleRightMenu()\" class=\"menu-button mat-typography menu-font-color\">\n            <mat-icon>menu</mat-icon>\n        </button>\n    </div>\n\n    <button mat-icon-button (click)=\"onHomeClick()\" class=\"menu-button mat-typography menu-font-color margin-top-default\"\n            [matTooltip]=\"'toolbar.menu.home' | translate\"\n            matTooltipPosition=\"right\">\n        <mat-icon>home</mat-icon>\n    </button>\n\n    <button *ngIf='!isOnZeroLevel() && (canGoBackLoading$ | async) === false' mat-icon-button (click)=\"onBackClick()\"\n            class=\"menu-button mat-typography menu-font-color\" [matTooltip]=\"'toolbar.menu.back' | translate\"\n            matTooltipPosition=\"right\">\n        <mat-icon>arrow_back</mat-icon>\n    </button>\n    <div *ngIf=\"(canGoBackLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"30\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n\n    <div class=\"margin-top-x2\"></div>\n\n    <button *ngFor='let folder of leftItems; trackBy: itemsTrackBy' mat-icon-button (click)=\"onItemClick(folder)\"\n            class=\"menu-button mat-typography menu-font-color\" [matTooltip]=\"folder.navigation.title\" [matTooltipPosition]=\"'right'\"\n            [ngClass]=\"isItemAndNodeEqual(folder, currentNode) ? 'rail-selected-color' : 'menu-font-color'\" [routerLink]='folder.routing.path'\n            routerLinkActive=\"active\">\n        <mat-icon>{{folder.navigation.icon}}</mat-icon>\n    </button>\n\n    <div *ngIf=\"(leftLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"30\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n</ng-template>\n\n<ng-template #defaultRightSide>\n    <div class=\"logo border-bottom\" fxLayoutAlign=\"center center\" fxHide.lt-md>\n        <img *ngIf=\"image !== undefined\" [alt]=\"imageAlt\" [src]=\"image\" class=\"logoimg\"\n             [routerLink]=\"imageRouterLink !== undefined ? imageRouterLink : []\">\n    </div>\n    <div *ngIf=\"(rightLoading$ | async) === false\">\n        <div fxLayout=\"column\" fxLayoutAlign=\"end end\" class=\"order-icon-wrapper\">\n            <button mat-icon-button fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"mat-button mat-typography menu-font-color order-icon\" (click)=\"switchOrder()\"\n                    [matTooltip]=\"isAscending() ? ('dynamicNavigation.ascending' | translate) : ('dynamicNavigation.descending' | translate)\">\n                <mat-icon>{{isAscending() ? \"south\" : \"north\"}}</mat-icon>\n            </button>\n        </div>\n        <div *ngFor='let item of rightItems; trackBy: itemsTrackBy' (click)=\"onItemClick(item)\"\n             class=\"tree-node mat-typography mat-body-2\" fxLayoutAlign=\"start center\" [routerLink]='item.routing.path'\n             routerLinkActive=\"active-tree-node\">\n            <mat-icon class=\"tree-node-icon\">{{item.navigation.icon}}</mat-icon>\n            <span>{{item.navigation.title}}</span>\n            <span class=\"menu-item-focus-overlay\"></span>\n        </div>\n        <div *ngIf=\"moreItems.length > 0\">\n            <button mat-button color=\"primary\" (click)=\"loadMoreItems()\">{{'dynamicNavigation.loadMoreItems' | translate}}</button>\n        </div>\n    </div>\n    <div *ngIf=\"(rightLoading$ | async)\" fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"margin-top-default\">\n        <mat-spinner color=\"primary\" diameter=\"40\" mode=\"indeterminate\"></mat-spinner>\n    </div>\n</ng-template>\n", styles: [".rail-container{height:100%}.rail-content{width:52px;min-width:52px;border-right:none!important}.drawer-container{height:100%}.menu-button{margin-left:6px;margin-right:6px;border-radius:8px}.drawer-content{width:300px;min-width:300px;box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.height-60{height:60px}.drawer-control{position:absolute;box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.index-menu{z-index:2}.first-content{box-shadow:0 2px 4px #0d2d3c29,0 4px 8px #546e7a29}.border-bottom{border-bottom:1px solid #E2E8F0}.logo{height:60px}.logo-closed{width:60px!important}.logoimg{margin-left:auto;margin-right:auto;height:35px;outline:none!important;cursor:pointer}.icon-large{height:40px;width:40px;font-size:40px;color:#000000b3}.icon-container{outline:none!important;height:40px}.icon-large:hover{cursor:pointer}.menu-font-color{color:#000000b3!important}.margin-top-65{margin-top:49px}.margin-auto{margin:auto}.padding-top-65{padding-top:49px}.padding-top-8{padding-top:8px}.margin-bottom-x2{margin-bottom:16px}.tree-node{outline:none!important;cursor:pointer;padding:10px 8px;margin:0 8px;color:#000000b3;position:relative;border-radius:8px;font-weight:500;font-size:14px;line-height:20px;letter-spacing:.1px}.tree-node mat-icon.tree-node-icon{height:24px;width:24px;font-size:24px;margin-right:4px}.tree-node .tree-node-label{height:24px;font-size:16px}.tree-node .margin-component{width:8px;margin-right:4px}.tree-node .menu-item-focus-overlay{opacity:0;position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:black;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}.tree-node:hover .menu-item-focus-overlay{opacity:.04}.margin-top-default{margin-top:8px}.margin-top-x2{margin-top:16px}.logoimg-tool{height:33px;outline:none!important;cursor:pointer;background:#fafafa}.toolbar{min-height:50px!important;height:50px;border-bottom:1px solid #E2E8F0}@media screen and (max-width: 959.99px){.rail-container{height:calc(100% - 50px)}.rail-content{width:52px;min-width:52px;top:0;border-right:none!important}.margin-top-65{margin-top:16px}.padding-top-65{padding-top:16px}}.profile-tooltip{font-size:20px}.sidemenu-icon{line-height:unset!important}.line{width:calc(100% - 16px);padding-left:8px;padding-right:8px;flex:1}.headline-text{font-weight:400;font-size:12px;line-height:16px;letter-spacing:.4px;padding-top:4px}.headline-padding{padding:0 8px}.large-menu-item{height:64px;line-height:64px}.large-menu-item-text{line-height:32px}.cursor-pointer{cursor:pointer}.box-container{box-sizing:content-box;display:block;overflow:hidden}.content-color{background-color:#f8fafc}.expansion-indicator{color:#00000080;margin-right:10px}.expansion-indicator:after{border-style:solid;border-width:0 2px 2px 0;content:\"\";display:inline-block;padding:3px;vertical-align:middle;transform:rotate(45deg)}.order-icon{transform:scale(.8)}.order-text{color:#000000b3}.order-icon-wrapper{margin-bottom:0}.deny-select{-webkit-user-select:none;user-select:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i2$2.Router }, { type: i2$2.ActivatedRoute }, { type: i1$5.BreakpointObserver }, { type: i1.LanguageService }, { type: i1$2.TranslateService }, { type: i1.UserService }, { type: i1.AccessService }, { type: i1.LoggerService }, { type: i1.ConfigurationService }, { type: i1.UriService }, { type: i1.ImpersonationUserSelectService }, { type: i1.ImpersonationService }, { type: i1.DynamicNavigationRouteProviderService }]; } });
 
 class NavigationComponentModule {
@@ -6085,6 +6092,7 @@ class TreeTaskContentComponent extends AbstractTreeTaskContentComponent {
 }
 TreeTaskContentComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TreeTaskContentComponent, deps: [{ token: i1.TreeTaskContentService }, { token: i1.TaskEventService }, { token: i1.AssignTaskService }, { token: i1.CancelTaskService }, { token: i1.FinishTaskService }, { token: i1.TaskContentService }, { token: i1.PermissionService }], target: i0.ɵɵFactoryTarget.Component });
 TreeTaskContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TreeTaskContentComponent, selector: "nc-tree-task-content", providers: [
+        FrontActionService,
         { provide: TaskContentService, useClass: UnlimitedTaskContentService },
         TreeTaskContentService,
         AssignTaskService,
@@ -6102,6 +6110,7 @@ TreeTaskContentComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TreeTaskContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'nc-tree-task-content', providers: [
+                        FrontActionService,
                         { provide: TaskContentService, useClass: UnlimitedTaskContentService },
                         TreeTaskContentService,
                         AssignTaskService,
@@ -7116,9 +7125,107 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                     args: [MAT_DIALOG_DATA]
                 }] }, { type: i1.UserFiltersService }, { type: i1.LoggerService }, { type: i1.TaskViewService }, { type: i2$2.ActivatedRoute }]; } });
 
+function taskViewFilterFactory(dialogControl) {
+    if (!dialogControl) {
+        throw new Error('NewFilterCaseId was not provided in the sidemenu injectio data');
+    }
+    const injectedData = dialogControl;
+    return {
+        filter: SimpleFilter.fromTaskQuery({
+            stringId: injectedData.taskIds
+        })
+    };
+}
+class TaskViewDialogComponent extends AbstractSingleTaskViewComponent {
+    constructor(_dialogRef, _data, _userFilterService, _log, taskViewService, baseFilter, _activatedRoute) {
+        super(taskViewService, _activatedRoute, baseFilter);
+        this._dialogRef = _dialogRef;
+        this._data = _data;
+        this._userFilterService = _userFilterService;
+        this._log = _log;
+        if (this._data) {
+            this._injectedData = this._data;
+        }
+    }
+    ngAfterViewInit() {
+        this.initializeHeader(this.taskHeaderComponent);
+    }
+    processTaskEvents(notification) {
+        if (!notification.success) {
+            return;
+        }
+        if (notification.event === TaskEvent.FINISH) {
+            this._dialogRef.close({ opened: false, message: 'Task finished' });
+        }
+        if (notification.event === TaskEvent.CANCEL) {
+            this._dialogRef.close({ opened: false, message: 'Task canceled' });
+        }
+    }
+}
+TaskViewDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TaskViewDialogComponent, deps: [{ token: i1$3.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i1.UserFiltersService }, { token: i1.LoggerService }, { token: i1.TaskViewService }, { token: NAE_BASE_FILTER }, { token: i2$2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
+TaskViewDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TaskViewDialogComponent, selector: "nc-task-view-dialog", providers: [
+        TaskViewService,
+        SearchService,
+        {
+            provide: NAE_BASE_FILTER,
+            useFactory: taskViewFilterFactory,
+            deps: [MAT_DIALOG_DATA]
+        },
+        {
+            provide: AllowedNetsService,
+            useFactory: localAllowedNetsFactory$4,
+            deps: [AllowedNetsServiceFactory]
+        }
+    ], viewQueries: [{ propertyName: "taskHeaderComponent", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"mat-dialog-title\" fxLayout=\"column\" fxLayoutAlign=\"center none\" *nccLet=\"(task$ | async) as taskPanelData\">\n    {{!!taskPanelData?.task?.title ? taskPanelData?.task?.title : taskPanelData?.task?.transitionId}}\n</div>\n<div mat-dialog-content class=\"task-view-container side-menu-root\">\n        <nc-header [hidden]='true' #header type=\"task\" class=\"task-panel-padding-mini\"></nc-header>\n        <nc-single-task class=\"virtual-scroll-padding\" [task$]=\"task$\"\n                        [loading$]=\"loading$\"\n                        [selectedHeaders$]=\"selectedHeaders$\"\n                        (taskEvent)=\"processTaskEvents($event)\"\n                        [actionRowJustifyContent]='\"center\"'\n                        [preventCollapse]=\"preventCollapse\"\n                        [showPageHeader]=\"false\"\n                        [showPageFooter]=\"false\"\n                        fxFlex>\n        </nc-single-task>\n</div>\n", styles: [".task-tab-background{height:100%;width:100%;overflow:auto;background-color:transparent}.search-panel{margin-top:8px}.content-margin{margin:0 8px}.task-panel-padding-mini{padding-bottom:8px;padding-top:8px}.search-width{width:100%}.full-height{height:100%}.public-button{height:36px;width:200px}.public-button-padding{padding:16px;flex-direction:column;display:flex;align-items:center}.single-page-task{width:85%!important;padding-bottom:25px}.logoimg{height:120px;outline:none!important;cursor:pointer}.upper-card{margin-bottom:10px}.upper-card-title{display:flex;align-items:center;flex-direction:column}.upper-divider{border-top-width:20px;border-top-color:#023b7e;border-radius:4px;margin-bottom:10px}.footer-custom{border-radius:4px;margin-bottom:10px}.task-view-container{height:calc(100% - 64px)!important;padding-left:8px!important;padding-right:8px!important;margin:0}.virtual-scroll-padding{padding-right:4px}\n"], components: [{ type: HeaderComponent, selector: "nc-header" }, { type: SingleTaskComponent, selector: "nc-single-task" }], directives: [{ type: i1.LetDirective, selector: "[nccLet]", inputs: ["nccLet"] }, { 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: i1$3.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { 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": i4.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TaskViewDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nc-task-view-dialog', providers: [
+                        TaskViewService,
+                        SearchService,
+                        {
+                            provide: NAE_BASE_FILTER,
+                            useFactory: taskViewFilterFactory,
+                            deps: [MAT_DIALOG_DATA]
+                        },
+                        {
+                            provide: AllowedNetsService,
+                            useFactory: localAllowedNetsFactory$4,
+                            deps: [AllowedNetsServiceFactory]
+                        }
+                    ], template: "<div class=\"mat-dialog-title\" fxLayout=\"column\" fxLayoutAlign=\"center none\" *nccLet=\"(task$ | async) as taskPanelData\">\n    {{!!taskPanelData?.task?.title ? taskPanelData?.task?.title : taskPanelData?.task?.transitionId}}\n</div>\n<div mat-dialog-content class=\"task-view-container side-menu-root\">\n        <nc-header [hidden]='true' #header type=\"task\" class=\"task-panel-padding-mini\"></nc-header>\n        <nc-single-task class=\"virtual-scroll-padding\" [task$]=\"task$\"\n                        [loading$]=\"loading$\"\n                        [selectedHeaders$]=\"selectedHeaders$\"\n                        (taskEvent)=\"processTaskEvents($event)\"\n                        [actionRowJustifyContent]='\"center\"'\n                        [preventCollapse]=\"preventCollapse\"\n                        [showPageHeader]=\"false\"\n                        [showPageFooter]=\"false\"\n                        fxFlex>\n        </nc-single-task>\n</div>\n", styles: [".task-tab-background{height:100%;width:100%;overflow:auto;background-color:transparent}.search-panel{margin-top:8px}.content-margin{margin:0 8px}.task-panel-padding-mini{padding-bottom:8px;padding-top:8px}.search-width{width:100%}.full-height{height:100%}.public-button{height:36px;width:200px}.public-button-padding{padding:16px;flex-direction:column;display:flex;align-items:center}.single-page-task{width:85%!important;padding-bottom:25px}.logoimg{height:120px;outline:none!important;cursor:pointer}.upper-card{margin-bottom:10px}.upper-card-title{display:flex;align-items:center;flex-direction:column}.upper-divider{border-top-width:20px;border-top-color:#023b7e;border-radius:4px;margin-bottom:10px}.footer-custom{border-radius:4px;margin-bottom:10px}.task-view-container{height:calc(100% - 64px)!important;padding-left:8px!important;padding-right:8px!important;margin:0}.virtual-scroll-padding{padding-right:4px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$3.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i1.UserFiltersService }, { type: i1.LoggerService }, { type: i1.TaskViewService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [NAE_BASE_FILTER]
+                }] }, { type: i2$2.ActivatedRoute }]; }, propDecorators: { taskHeaderComponent: [{
+                type: ViewChild,
+                args: ['header']
+            }] } });
+
+const openTaskDialog = {
+    call: (injector, frontAction) => {
+        const dialogComponent = injector.get(NAE_TASK_VIEW_COMPONENT);
+        const dialog = injector.get(MatDialog);
+        const ref = dialog.open(dialogComponent, {
+            panelClass: "dialog-responsive",
+            data: {
+                taskIds: frontAction.args[0]
+            },
+        });
+        ref.afterClosed().subscribe(event => {
+            reloadTaskAction.call(injector, frontAction);
+        });
+    }
+};
+
 class DialogComponentsModule {
+    constructor(frontActionRegistry) {
+        frontActionRegistry.register('openDialog', openTaskDialog);
+    }
 }
-DialogComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DialogComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogComponentsModule, deps: [{ token: i1.FrontActionRegistryService }], target: i0.ɵɵFactoryTarget.NgModule });
 DialogComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogComponentsModule, declarations: [NewCaseDialogComponent,
         ImportNetDialogComponent,
         UserAssignDialogComponent,
@@ -7127,7 +7234,8 @@ DialogComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         FilterSelectorDialogComponent,
         LoadFilterDialogComponent,
         SaveFilterDialogComponent,
-        MultiUserAssignDialogComponent], imports: [BrowserAnimationsModule,
+        MultiUserAssignDialogComponent,
+        TaskViewDialogComponent], imports: [BrowserAnimationsModule,
         SideMenuUserAssignComponentModule,
         TranslateLibModule,
         CommonModule,
@@ -7147,7 +7255,7 @@ DialogComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         SideMenuMultiUserAssignComponentModule,
         CaseViewComponentModule,
         HeaderComponentModule,
-        PanelComponentModule, i3$b.HotkeyModule], exports: [NewCaseDialogComponent,
+        PanelComponentModule, i3$b.HotkeyModule, UtilityModule], exports: [NewCaseDialogComponent,
         ImportNetDialogComponent,
         UserAssignDialogComponent,
         AdminImpersonateDialogComponent,
@@ -7155,14 +7263,16 @@ DialogComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         FilterSelectorDialogComponent,
         LoadFilterDialogComponent,
         SaveFilterDialogComponent,
-        MultiUserAssignDialogComponent] });
+        MultiUserAssignDialogComponent,
+        TaskViewDialogComponent] });
 DialogComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogComponentsModule, providers: [
         { provide: NAE_USER_ASSIGN_DIALOG_COMPONENT, useValue: UserAssignDialogComponent },
         { provide: NAE_ADMIN_IMPERSONATE_DIALOG_COMPONENT, useValue: AdminImpersonateDialogComponent },
         { provide: NAE_USER_IMPERSONATE_DIALOG_COMPONENT, useValue: UserImpersonateDialogComponent },
         { provide: NAE_NEW_CASE_DIALOG_COMPONENT, useValue: NewCaseDialogComponent },
         { provide: NAE_SAVE_FILTER_DIALOG_COMPONENT, useValue: SaveFilterDialogComponent },
-        { provide: NAE_LOAD_FILTER_DIALOG_COMPONENT, useValue: LoadFilterDialogComponent }
+        { provide: NAE_LOAD_FILTER_DIALOG_COMPONENT, useValue: LoadFilterDialogComponent },
+        { provide: NAE_TASK_VIEW_COMPONENT, useValue: TaskViewDialogComponent }
     ], imports: [[
             BrowserAnimationsModule,
             SideMenuUserAssignComponentModule,
@@ -7185,7 +7295,8 @@ DialogComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
             CaseViewComponentModule,
             HeaderComponentModule,
             PanelComponentModule,
-            HotkeyModule.forRoot()
+            HotkeyModule.forRoot(),
+            UtilityModule
         ]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DialogComponentsModule, decorators: [{
             type: NgModule,
@@ -7199,7 +7310,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         FilterSelectorDialogComponent,
                         LoadFilterDialogComponent,
                         SaveFilterDialogComponent,
-                        MultiUserAssignDialogComponent
+                        MultiUserAssignDialogComponent,
+                        TaskViewDialogComponent
                     ],
                     exports: [
                         NewCaseDialogComponent,
@@ -7210,7 +7322,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         FilterSelectorDialogComponent,
                         LoadFilterDialogComponent,
                         SaveFilterDialogComponent,
-                        MultiUserAssignDialogComponent
+                        MultiUserAssignDialogComponent,
+                        TaskViewDialogComponent
                     ],
                     imports: [
                         BrowserAnimationsModule,
@@ -7234,7 +7347,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         CaseViewComponentModule,
                         HeaderComponentModule,
                         PanelComponentModule,
-                        HotkeyModule.forRoot()
+                        HotkeyModule.forRoot(),
+                        UtilityModule
                     ],
                     providers: [
                         { provide: NAE_USER_ASSIGN_DIALOG_COMPONENT, useValue: UserAssignDialogComponent },
@@ -7242,10 +7356,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                         { provide: NAE_USER_IMPERSONATE_DIALOG_COMPONENT, useValue: UserImpersonateDialogComponent },
                         { provide: NAE_NEW_CASE_DIALOG_COMPONENT, useValue: NewCaseDialogComponent },
                         { provide: NAE_SAVE_FILTER_DIALOG_COMPONENT, useValue: SaveFilterDialogComponent },
-                        { provide: NAE_LOAD_FILTER_DIALOG_COMPONENT, useValue: LoadFilterDialogComponent }
+                        { provide: NAE_LOAD_FILTER_DIALOG_COMPONENT, useValue: LoadFilterDialogComponent },
+                        { provide: NAE_TASK_VIEW_COMPONENT, useValue: TaskViewDialogComponent }
                     ]
                 }]
-        }] });
+        }], ctorParameters: function () { return [{ type: i1.FrontActionRegistryService }]; } });
 
 /*
  * Public API Surface of netgrif-components
@@ -7255,5 +7370,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AdminComponentModule, AdminImpersonateComponent, AdminImpersonateDialogComponent, AdminImpersonateListComponent, AdvancedSearchComponent, AuthenticationComponentModule, AuthenticationOverlayComponent, BarchartCardComponent, BreadcrumbsComponent, CaseListComponent, CaseListPaginatorComponent, CasePanelComponent, CaseSearchComponent, CaseViewComponentModule, ChangePasswordFormComponent, ChangePasswordFormComponentModule, CountCardComponent, CreateCaseButtonComponent, DashboardComponentModule, DashboardContentComponent, DataFieldTemplateComponent, DataFieldsComponentModule, DefaultSimpleTaskViewComponent, DefaultTabViewComponent, DefaultTabbedCaseViewComponent, DefaultTabbedTaskViewComponent, DefaultTaskViewComponent, DialogComponentsModule, EditModeComponent, EmailSubmissionFormComponent, EmailSubmissionFormComponentModule, FieldComponentResolverComponent, FilterFieldContentModule, FilterFieldTabViewComponent, FilterFieldTabbedCaseViewComponent, FilterFieldTabbedTaskViewComponent, FilterSelectorComponent, FilterSelectorDialogComponent, FilterSelectorListItemComponent, ForgottenPasswordFormComponent, ForgottenPasswordFormComponentModule, FulltextSearchComponent, GroupNavigationComponentResolverComponent, HeaderComponent, HeaderComponentModule, IframeCardComponent, ImmediateFilterTextComponent, ImmediateFilterTextContentComponent, ImpersonateQuickPanelComponent, ImportNetComponent, ImportNetDialogComponent, InternalLinkComponent, LanguageSelectorComponent, LdapGroupRoleAssignmentComponent, LegalNoticeComponent, LegalNoticeModule, LineChartCardComponent, LinearGaugeCardComponent, LoadFilterComponent, LoadFilterDialogComponent, LoadingModeComponent, LoginFormComponent, LoginFormComponentModule, LogoutShortcutComponent, MultiUserAssignComponent, MultiUserAssignDialogComponent, MultiUserAssignListComponent, NavigationComponentModule, NavigationDoubleDrawerComponent, NavigationDrawerComponent, NavigationRailComponent, NavigationTreeComponent, NewCaseComponent, NewCaseDialogComponent, OptionSelectorComponent, PanelComponent, PanelComponentModule, PanelItemComponent, PieChartCardComponent, PortalCardComponent, ProfileComponent, ProfileComponentModule, PublicWorkflowPanelComponent, QuickPanelComponent, QuickPanelComponentModule, RedirectComponent, RedirectComponentModule, RegistrationFormComponent, RegistrationFormComponentModule, RoleAssignmentComponent, SaveFilterComponent, SaveFilterDialogComponent, 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, ToolbarComponent, ToolbarComponentModule, TreeCaseViewComponentModule, TreeComponent, TreeTaskContentComponent, UserAssignComponent, UserAssignDialogComponent, UserAssignListComponent, UserCardComponent, UserComponentModule, UserImpersonateComponent, UserImpersonateDialogComponent, UserInviteComponent, WorkflowPanelComponent, WorkflowViewComponent, WorkflowViewComponentModule, baseFilterFactory$5 as baseFilterFactory, filterCaseTabbedDataAllowedNetsServiceFactory, filterCaseTabbedDataFilterFactory, filterCaseTabbedDataSearchCategoriesFactory, filterTextAllowedNetsFactory, filterTextBaseFilterFactory, filterTextCategoriesFactory, loadBaseFilterFactory, localAllowedNetsFactory$1 as localAllowedNetsFactory, newCaseConfigFactory, saveBaseFilterFactory, searchCategoryConverter };
+export { AdminComponentModule, AdminImpersonateComponent, AdminImpersonateDialogComponent, AdminImpersonateListComponent, AdvancedSearchComponent, AuthenticationComponentModule, AuthenticationOverlayComponent, BarchartCardComponent, BreadcrumbsComponent, CaseListComponent, CaseListPaginatorComponent, CasePanelComponent, CaseSearchComponent, CaseViewComponentModule, ChangePasswordFormComponent, ChangePasswordFormComponentModule, CountCardComponent, CreateCaseButtonComponent, DashboardComponentModule, DashboardContentComponent, DataFieldTemplateComponent, DataFieldsComponentModule, DefaultSimpleTaskViewComponent, DefaultTabViewComponent, DefaultTabbedCaseViewComponent, DefaultTabbedTaskViewComponent, DefaultTaskViewComponent, DialogComponentsModule, EditModeComponent, EmailSubmissionFormComponent, EmailSubmissionFormComponentModule, FieldComponentResolverComponent, FilterFieldContentModule, FilterFieldTabViewComponent, FilterFieldTabbedCaseViewComponent, FilterFieldTabbedTaskViewComponent, FilterSelectorComponent, FilterSelectorDialogComponent, FilterSelectorListItemComponent, ForgottenPasswordFormComponent, ForgottenPasswordFormComponentModule, FulltextSearchComponent, GroupNavigationComponentResolverComponent, HeaderComponent, HeaderComponentModule, IframeCardComponent, ImmediateFilterTextComponent, ImmediateFilterTextContentComponent, ImpersonateQuickPanelComponent, ImportNetComponent, ImportNetDialogComponent, InternalLinkComponent, LanguageSelectorComponent, LdapGroupRoleAssignmentComponent, LegalNoticeComponent, LegalNoticeModule, LineChartCardComponent, LinearGaugeCardComponent, LoadFilterComponent, LoadFilterDialogComponent, LoadingModeComponent, LoginFormComponent, LoginFormComponentModule, LogoutShortcutComponent, MultiUserAssignComponent, MultiUserAssignDialogComponent, MultiUserAssignListComponent, NavigationComponentModule, NavigationDoubleDrawerComponent, NavigationDrawerComponent, NavigationRailComponent, NavigationTreeComponent, NewCaseComponent, NewCaseDialogComponent, OptionSelectorComponent, PanelComponent, PanelComponentModule, PanelItemComponent, PieChartCardComponent, PortalCardComponent, ProfileComponent, ProfileComponentModule, PublicWorkflowPanelComponent, QuickPanelComponent, QuickPanelComponentModule, RedirectComponent, RedirectComponentModule, RegistrationFormComponent, RegistrationFormComponentModule, RoleAssignmentComponent, SaveFilterComponent, SaveFilterDialogComponent, 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, TaskViewDialogComponent, ToolbarComponent, ToolbarComponentModule, TreeCaseViewComponentModule, TreeComponent, TreeTaskContentComponent, UserAssignComponent, UserAssignDialogComponent, UserAssignListComponent, UserCardComponent, UserComponentModule, UserImpersonateComponent, UserImpersonateDialogComponent, UserInviteComponent, WorkflowPanelComponent, WorkflowViewComponent, WorkflowViewComponentModule, baseFilterFactory$5 as baseFilterFactory, filterCaseTabbedDataAllowedNetsServiceFactory, filterCaseTabbedDataFilterFactory, filterCaseTabbedDataSearchCategoriesFactory, filterTextAllowedNetsFactory, filterTextBaseFilterFactory, filterTextCategoriesFactory, loadBaseFilterFactory, localAllowedNetsFactory$1 as localAllowedNetsFactory, newCaseConfigFactory, saveBaseFilterFactory, searchCategoryConverter, taskViewFilterFactory };
 //# sourceMappingURL=netgrif-components.mjs.map