@netgrif/components 6.0.4 → 6.1.0-rc.1

package/bundles/netgrif-components.umd.js

@@ -1306,8 +1306,8 @@
         HtmlTextareaFieldComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'nc-html-textarea-field',
-                        template: "<div class=\"height-100\" #quillContainer>\n    <quill-editor theme=\"snow\" *ngIf=\"!formControlRef.disabled\" [(ngModel)]=\"textAreaField.value\"\n                  [modules]=\"quillModules\" [bounds]=\"quillContainer\"></quill-editor>\n    <mat-error *ngIf=\"textAreaField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n    <input type=\"hidden\" [formControl]=\"formControlRef\">\n    <div *ngIf=\"formControlRef.disabled\" class=\"border ql-snow\">\n        <div class=\"ql-editor\" [innerHTML]=\"disabledDisplay\"></div>\n    </div>\n</div>\n",
-                        styles: [".height-100{height:100%}.border{border:1px solid #ddd;border-radius:4px;padding:10px;z-index:1;word-wrap:break-word}"]
+                        template: "<div class=\"height-100\" #quillContainer>\n    <quill-editor theme=\"snow\" *ngIf=\"!formControlRef.disabled\" [(ngModel)]=\"textAreaField.value\"\n                  [modules]=\"quillModules\" [bounds]=\"quillContainer\"></quill-editor>\n    <mat-error *ngIf=\"textAreaField.isInvalid(formControlRef)\">{{getErrorMessage()}}</mat-error>\n    <input type=\"hidden\" [formControl]=\"formControlRef\">\n    <div *ngIf=\"formControlRef.disabled\" class=\"border ql-snow user-select-auto\">\n        <div class=\"ql-editor\" [innerHTML]=\"disabledDisplay\"></div>\n    </div>\n</div>\n",
+                        styles: [".height-100{height:100%}.border{border:1px solid #ddd;border-radius:4px;padding:10px;z-index:1;word-wrap:break-word}.user-select-auto{-webkit-user-select:auto;-moz-user-select:auto;-ms-user-select:auto;user-select:auto}"]
                     },] }
         ];
         HtmlTextareaFieldComponent.ctorParameters = function () { return [
@@ -3190,7 +3190,7 @@
         TaskPanelComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'nc-task-panel',
-                        template: "<nc-app-panel [panelContent]=\"taskPanelContent\" [panelHeader]=\"taskPanelHeader\"\n              (stopLoading)=\"stopLoading()\" (getExpansionPanelRef)=\"setPanelRef($event)\" [first]=\"first\" [last]=\"last\">\n    <ng-template #taskPanelHeader>\n        <div fxLayoutAlign=\"start center\" fxLayout=\"row\" fxFlex=\"95\" (click)=\"preventSelectionClick($event)\">\n            <div fxFlex class=\"text-column-div\" [ngClass]=\"{'panel-header-padding': !textEllipsis}\">\n                <span class=\"text-column-margin\" fxLayoutAlign=\"start center\">\n                    <mat-icon class=\"task-panel-icon panel-primary-icon\">\n                        {{taskPanelData.task.icon ? taskPanelData.task.icon : 'label'}}</mat-icon>\n                    <span [ngClass]=\"{\n                                     'text-column-ellipsis': textEllipsis,\n                                     'text-column-word-wrap': !textEllipsis\n                              }\">{{firstFeaturedValue}}</span>\n                </span>\n            </div>\n            <div *ngFor=\"let field of featuredFieldsValues; let i = index\" fxFlex\n                  class=\"text-column-div\"\n                  [fxHide.lt-xl]=\"i >= 3 && responsiveBody\"\n                  [fxHide.lt-lg]=\"i >= 2 && responsiveBody\"\n                  [fxHide.lt-md]=\"i >= 1 && responsiveBody\"\n                  [fxHide.lt-sm]=\"i >= 0 && responsiveBody\"\n                    [ngClass]=\"{'panel-header-padding': !textEllipsis && field.type !== 'button'}\">\n                <span class=\"text-column-margin\" fxLayoutAlign=\"start center\">\n                    <mat-icon class=\"task-panel-icon panel-primary-icon\"\n                              *ngIf=\"!!field.icon && !!field.value && field.type !== 'button'\">{{field.icon}}</mat-icon>\n                    <button *ngIf=\"field.type === 'button'\" mat-flat-button color=\"primary\">{{field.value}}</button>\n                    <span [ngClass]=\"{\n                                 'text-column-ellipsis': textEllipsis,\n                                 'text-column-word-wrap': !textEllipsis\n                              }\" [matTooltip]=\"field.value\"\n                          [matTooltipDisabled]=\"!textEllipsis\"\n                          [matTooltipClass]=\"'pre-line-dialog'\"\n                    >{{field.type === 'button' ? '' : field.value }}</span>\n                </span>\n            </div>\n        </div>\n        <div fxLayout=\"row\" fxLayoutAlign=\"end center\" fxFlex=\"5\">\n            <button mat-icon-button (click)=\"preventPanelOpen($event)\"\n                    *ngIf=\"!isLoading && (canAssign() || canDo('delegate') || canReassign() || canCancel() || canFinish())\"\n                    [matMenuTriggerFor]=\"menu\">\n                <mat-icon>more_vert</mat-icon>\n            </button>\n            <mat-menu #menu=\"matMenu\">\n                <button mat-menu-item *ngIf=\"canAssign()\" (click)=\"assign()\" [disabled]=\"canDisable('assign')\">\n                    <mat-icon>person</mat-icon>\n                    <span>{{ getAssignTitle() | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canDo('delegate')\" (click)=\"delegate()\"\n                        [disabled]=\"canDisable('delegate')\">\n                    <mat-icon>person_outline</mat-icon>\n                    <span>{{ getDelegateTitle() | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canReassign()\" (click)=\"delegate()\" [disabled]=\"canDisable('reassign')\">\n                    <mat-icon>person_add</mat-icon>\n                    <span>{{ 'tasks.view.reassign' | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canCancel()\" (click)=\"cancel()\" [disabled]=\"canDisable('cancel')\">\n                    <mat-icon>cancel</mat-icon>\n                    <span>{{ getCancelTitle() | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canFinish()\" (click)=\"finish()\" [disabled]=\"canDisable('finish')\">\n                    <mat-icon>done</mat-icon>\n                    <span>{{ getFinishTitle() | translate}}</span>\n                </button>\n            </mat-menu>\n            <mat-spinner *ngIf=\"isLoading\" [diameter]=\"30\"></mat-spinner>\n        </div>\n    </ng-template>\n    <ng-template #taskPanelContent>\n        <div class=\"panel-main-content\" fxLayout=\"column\">\n            <div class=\"task-panel-body\" [ngClass]=\"{'paper-view': isPaperView()}\" fxFlex=\"100\">\n                <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n            </div>\n            <mat-action-row>\n                <div fxLayout.lt-sm=\"column\" fxLayoutAlign.lt-sm=\"center stretch\" ngClass.lt-sm=\"width-100\">\n                    <button *ngIf=\"canAssign()\" (click)=\"assign()\" mat-button [disabled]=\"canDisable('assign')\">\n                        {{ getAssignTitle() | translate | uppercase }}</button>\n                    <button *ngIf=\"canDo('delegate')\" (click)=\"delegate()\" mat-button [disabled]=\"canDisable('delegate')\">\n                        {{ getDelegateTitle() | translate | uppercase }}</button>\n                    <button *ngIf=\"canReassign()\" (click)=\"delegate()\" mat-button [disabled]=\"canDisable('reassign')\">\n                        {{ 'tasks.view.reassign' | translate | uppercase }}</button>\n                    <button *ngIf=\"canCancel()\" (click)=\"cancel()\" mat-button [disabled]=\"canDisable('cancel')\">\n                        {{ getCancelTitle() | translate | uppercase }}</button>\n                    <button *ngIf=\"canFinish()\" (click)=\"finish()\" mat-button [disabled]=\"canDisable('finish')\">\n                        {{ getFinishTitle() | translate | uppercase }}</button>\n                    <button *ngIf=\"canCollapse()\" color=\"primary\" (click)=\"collapse()\" mat-button>\n                        {{ 'tasks.view.collapse' | translate | uppercase }}</button>\n                </div>\n            </mat-action-row>\n        </div>\n    </ng-template>\n</nc-app-panel>\n",
+                        template: "<nc-app-panel [panelContent]=\"taskPanelContent\" [panelHeader]=\"taskPanelHeader\"\n              (stopLoading)=\"stopLoading()\" (getExpansionPanelRef)=\"setPanelRef($event)\" [first]=\"first\" [last]=\"last\">\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\"\n                  [fxHide.lt-lg]=\"i >= 3 && responsiveBody\"\n                  [fxHide.lt-md]=\"i >= 2 && responsiveBody\"\n                  [fxHide.lt-sm]=\"i >= 1 && responsiveBody\"\n                    [ngClass]=\"{'panel-header-padding': !textEllipsis && field.type !== 'button'}\">\n                <nc-panel-item\n                    [leadingIcon]=\"taskPanelData.task.icon\"\n                    [leadingIconEnabled]=\"i === 0\"\n                    [featuredValue]=\"field\"\n                    [textEllipsis]=\"textEllipsis\">\n                </nc-panel-item>\n            </div>\n        </div>\n        <div fxLayout=\"row\" fxLayoutAlign=\"end center\" fxFlex=\"5\">\n            <button mat-icon-button (click)=\"preventPanelOpen($event)\"\n                    *ngIf=\"!isLoading && (canAssign() || canDo('delegate') || canReassign() || canCancel() || canFinish())\"\n                    [matMenuTriggerFor]=\"menu\">\n                <mat-icon>more_vert</mat-icon>\n            </button>\n            <mat-menu #menu=\"matMenu\">\n                <button mat-menu-item *ngIf=\"canAssign()\" (click)=\"assign()\" [disabled]=\"canDisable('assign')\">\n                    <mat-icon>person</mat-icon>\n                    <span>{{ getAssignTitle() | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canDo('delegate')\" (click)=\"delegate()\"\n                        [disabled]=\"canDisable('delegate')\">\n                    <mat-icon>person_outline</mat-icon>\n                    <span>{{ getDelegateTitle() | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canReassign()\" (click)=\"delegate()\" [disabled]=\"canDisable('reassign')\">\n                    <mat-icon>person_add</mat-icon>\n                    <span>{{ 'tasks.view.reassign' | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canCancel()\" (click)=\"cancel()\" [disabled]=\"canDisable('cancel')\">\n                    <mat-icon>cancel</mat-icon>\n                    <span>{{ getCancelTitle() | translate}}</span>\n                </button>\n                <button mat-menu-item *ngIf=\"canFinish()\" (click)=\"finish()\" [disabled]=\"canDisable('finish')\">\n                    <mat-icon>done</mat-icon>\n                    <span>{{ getFinishTitle() | translate}}</span>\n                </button>\n            </mat-menu>\n            <mat-spinner *ngIf=\"isLoading\" [diameter]=\"30\"></mat-spinner>\n        </div>\n    </ng-template>\n    <ng-template #taskPanelContent>\n        <div class=\"panel-main-content\" fxLayout=\"column\">\n            <div class=\"task-panel-body\" [ngClass]=\"{'paper-view': isPaperView()}\" fxFlex=\"100\">\n                <ng-template [cdkPortalOutlet]=\"portal\"></ng-template>\n            </div>\n            <mat-action-row>\n                <div fxLayout.lt-sm=\"column\" fxLayoutAlign.lt-sm=\"center stretch\" ngClass.lt-sm=\"width-100\">\n                    <button *ngIf=\"canAssign()\" (click)=\"assign()\" mat-button [disabled]=\"canDisable('assign')\">\n                        {{ getAssignTitle() | translate | uppercase }}</button>\n                    <button *ngIf=\"canDo('delegate')\" (click)=\"delegate()\" mat-button [disabled]=\"canDisable('delegate')\">\n                        {{ getDelegateTitle() | translate | uppercase }}</button>\n                    <button *ngIf=\"canReassign()\" (click)=\"delegate()\" mat-button [disabled]=\"canDisable('reassign')\">\n                        {{ 'tasks.view.reassign' | translate | uppercase }}</button>\n                    <button *ngIf=\"canCancel()\" (click)=\"cancel()\" mat-button [disabled]=\"canDisable('cancel')\">\n                        {{ getCancelTitle() | translate | uppercase }}</button>\n                    <button *ngIf=\"canFinish()\" (click)=\"finish()\" mat-button [disabled]=\"canDisable('finish')\">\n                        {{ getFinishTitle() | translate | uppercase }}</button>\n                    <button *ngIf=\"canCollapse()\" color=\"primary\" (click)=\"collapse()\" mat-button>\n                        {{ 'tasks.view.collapse' | translate | uppercase }}</button>\n                </div>\n            </mat-action-row>\n        </div>\n    </ng-template>\n</nc-app-panel>\n",
                         providers: [
                             { provide: componentsCore.TaskContentService, useClass: componentsCore.SingleTaskContentService },
                             componentsCore.TaskDataService,
@@ -3264,7 +3264,7 @@
         CasePanelComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'nc-case-panel',
-                        template: "<nc-app-panel [panelHeader]=\"casePanelHeader\" [preventExpand]=\"true\" [first]=\"first\" [last]=\"last\" [caseColor] = case_.color>\n    <ng-template #casePanelHeader>\n        <div fxLayoutAlign=\"start center\" fxLayout=\"row\" fxFlex=\"95\" (click)=\"preventSelectionClick($event)\">\n            <div fxFlex class=\"text-column-div\" [ngClass]=\"{'panel-header-padding': !textEllipsis}\" [ngStyle]=\"{'min-width': getMinWidth()}\">\n                <span class=\"text-column-margin\" fxLayoutAlign=\"start center\">\n                    <mat-icon class=\"case-panel-icon panel-primary-icon\" *ngIf=\"showCasePanelIcon\">\n                            {{case_.icon ? case_.icon : 'label'}}</mat-icon>\n                    <span [ngClass]=\"{\n                                 'text-column-ellipsis': textEllipsis,\n                                 'text-column-word-wrap': !textEllipsis\n                          }\">{{firstFeaturedValue}}</span>\n                </span>\n            </div>\n            <div *ngFor=\"let field of featuredFieldsValues; let i = index\" fxFlex\n                 class=\"text-column-div\" [ngStyle]=\"{'min-width': getMinWidth()}\"\n                 [fxHide.lt-xl]=\"i >= 3 && responsiveBody\"\n                 [fxHide.lt-lg]=\"i >= 2 && responsiveBody\"\n                 [fxHide.lt-md]=\"i >= 1 && responsiveBody\"\n                 [fxHide.lt-sm]=\"i >= 0 && responsiveBody\"\n                 [ngClass]=\"{'panel-header-padding': !textEllipsis && field.type !== 'button'}\">\n                <span class=\"text-column-margin\" fxLayoutAlign=\"start center\">\n                    <mat-icon class=\"case-panel-icon panel-primary-icon\"\n                              *ngIf=\"field.icon && field.value && field.type !== 'button'\">{{field.icon}}</mat-icon>\n                    <ng-container [ngSwitch]=\"field.type\">\n                        <span *ngSwitchDefault\n                              [ngClass]=\"{'text-column-ellipsis': textEllipsis, 'text-column-word-wrap': !textEllipsis}\"\n                              [matTooltip]=\"field.value\"\n                              [matTooltipDisabled]=\"!textEllipsis\"\n                              [matTooltipClass]=\"'pre-line-dialog'\">{{field.value}}</span>\n                        <button *ngSwitchCase=\"'button'\" mat-flat-button color=\"primary\">{{field.value}}</button>\n                        <nc-immediate-filter-text *ngSwitchCase=\"'filter'\"\n                                                  [filterMetadata]=\"field.filterMetadata\"\n                                                  [ellipsis]=\"textEllipsis\"\n                                                  class=\"width-100\">\n                        </nc-immediate-filter-text>\n                    </ng-container>\n                </span>\n            </div>\n        </div>\n        <div fxLayout=\"row\" fxLayoutAlign=\"end center\" fxFlex=\"5\">\n            <div *ngIf=\"showDeleteMenu && canDelete()\">\n                <button mat-icon-button (click)=\"show($event)\" [matMenuTriggerFor]=\"menu\">\n                    <mat-icon>more_vert</mat-icon>\n                </button>\n                <mat-menu #menu=\"matMenu\">\n                    <button mat-menu-item (click)=\"deleteCase()\">\n                        <mat-icon>delete</mat-icon>\n                        <span>{{ 'panel.case.delete' | translate}}</span>\n                    </button>\n                </mat-menu>\n            </div>\n        </div>\n    </ng-template>\n</nc-app-panel>\n",
+                        template: "<nc-app-panel [panelHeader]=\"casePanelHeader\" [preventExpand]=\"true\" [first]=\"first\" [last]=\"last\" [caseColor] = case_.color>\n    <ng-template #casePanelHeader>\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\" [ngStyle]=\"{'min-width': getMinWidth()}\"\n                 [fxHide.lt-xl]=\"i >= 4 && responsiveBody\"\n                 [fxHide.lt-lg]=\"i >= 3 && responsiveBody\"\n                 [fxHide.lt-md]=\"i >= 2 && responsiveBody\"\n                 [fxHide.lt-sm]=\"i >= 1 && responsiveBody\"\n                 [ngClass]=\"{'panel-header-padding': !textEllipsis && field.type !== 'button'}\">\n                <nc-panel-item\n                    [leadingIcon]=\"case_.icon\"\n                    [leadingIconEnabled]=\"i === 0\"\n                    [featuredValue]=\"field\"\n                    [textEllipsis]=\"textEllipsis\">\n                </nc-panel-item>\n            </div>\n        </div>\n        <div fxLayout=\"row\" fxLayoutAlign=\"end center\" fxFlex=\"5\">\n            <div *ngIf=\"showDeleteMenu && canDelete()\">\n                <button mat-icon-button (click)=\"show($event)\" [matMenuTriggerFor]=\"menu\">\n                    <mat-icon>more_vert</mat-icon>\n                </button>\n                <mat-menu #menu=\"matMenu\">\n                    <button mat-menu-item (click)=\"deleteCase()\">\n                        <mat-icon>delete</mat-icon>\n                        <span>{{ 'panel.case.delete' | translate}}</span>\n                    </button>\n                </mat-menu>\n            </div>\n        </div>\n    </ng-template>\n</nc-app-panel>\n",
                         styles: [".case-panel-icon{margin-right:8px}.panel-main-content{margin-top:16px}.text-column-ellipsis{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.text-column-word-wrap{word-break:break-word!important;white-space:pre-line!important}.text-column-margin{margin-right:15px;line-height:24px}.text-column-div{min-width:0;width:0}.panel-header-padding{padding:12px 0!important}.width-100{width:100%}.pre-line-dialog{white-space:pre-line!important}"]
                     },] }
         ];
@@ -3481,6 +3481,53 @@
         return ImmediateFilterTextComponent;
     }(componentsCore.AbstractImmediateFilterTextComponent));
 
+    var PanelItemComponent = /** @class */ (function (_super) {
+        __extends(PanelItemComponent, _super);
+        function PanelItemComponent() {
+            return _super.call(this) || this;
+        }
+        PanelItemComponent.decorators = [
+            { type: core.Component, args: [{
+                        selector: 'nc-panel-item',
+                        template: "<span class='text-column-margin' fxLayoutAlign='start center'>\n    <mat-icon class='panel-icon panel-primary-icon' *ngIf='leadingIconEnabled'>\n        {{leadingIcon ? leadingIcon : 'label'}}</mat-icon>\n    <mat-icon class='panel-icon panel-primary-icon'\n              *ngIf=\"!!featuredValue.icon && !!featuredValue.value && featuredValue.type !== 'button' && !leadingIconEnabled\">{{featuredValue.icon}}</mat-icon>\n    <ng-container [ngSwitch]='featuredValue.type'>\n        <span *ngSwitchDefault\n              [ngClass]=\"{'text-column-ellipsis': textEllipsis, 'text-column-word-wrap': !textEllipsis}\"\n              [matTooltip]='featuredValue.value'\n              [matTooltipDisabled]='!textEllipsis'\n              [matTooltipClass]=\"'pre-line-dialog'\">{{featuredValue.value}}</span>\n        <button *ngSwitchCase=\"'button'\" mat-flat-button color='primary'>{{featuredValue.value}}</button>\n        <nc-immediate-filter-text *ngSwitchCase=\"'filter'\"\n                                  [filterMetadata]='featuredValue.filterMetadata'\n                                  [ellipsis]='textEllipsis'\n                                  class='width-100'>\n        </nc-immediate-filter-text>\n    </ng-container>\n</span>\n",
+                        styles: [".text-column-margin{margin-right:15px;line-height:24px}.panel-icon{margin-right:8px}.text-column-ellipsis{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.text-column-word-wrap{word-break:break-word!important;white-space:pre-line!important}.pre-line-dialog{white-space:pre-line!important}.width-100{width:100%}"]
+                    },] }
+        ];
+        PanelItemComponent.ctorParameters = function () { return []; };
+        return PanelItemComponent;
+    }(componentsCore.AbstractPanelItemComponent));
+
+    var TaskListPaginationComponent = /** @class */ (function (_super) {
+        __extends(TaskListPaginationComponent, _super);
+        function TaskListPaginationComponent(_taskViewService, _log, injectedTabData, route) {
+            var _this = _super.call(this, _taskViewService, _log, injectedTabData, route) || this;
+            _this._taskViewService = _taskViewService;
+            _this._log = _log;
+            _this.route = route;
+            return _this;
+        }
+        TaskListPaginationComponent.ctorParameters = function () { return [
+            { type: componentsCore.TaskViewService },
+            { type: componentsCore.LoggerService },
+            { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [componentsCore.NAE_TAB_DATA,] }] },
+            { type: router.ActivatedRoute }
+        ]; };
+        TaskListPaginationComponent.decorators = [
+            { type: core.Component, args: [{
+                        selector: 'nc-task-list-pagination',
+                        template: "<div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex>\n    <ng-container *ngIf=\"tasks$ | async as tasks\">\n\n        <div *ngIf=\"(loading$ | async) === false && tasks.length === 0\" fxLayout=\"column\" fxLayoutAlign=\"center center\"\n             fxFlex>\n            <mat-icon color=\"accent\">check_box</mat-icon>\n            <span class=\"font-size-20\">{{ 'tasks.view.noTasksSatisfyingThisFilter' | translate }}</span>\n        </div>\n\n        <mat-accordion [multi]=\"allowMultiOpen\" class=\"full-width\" >\n\n                <nc-task-panel\n                    [textEllipsis]=\"textEllipsis\"\n                    *ngFor=\"let task of tasks | slice: (pageIndex) * pageSize : (pageIndex + 1) * pageSize;\n                                    let i = index;\n                                    let first = first;\n                                    let last = last;\n                                    trackBy: trackBy\"\n                    [taskPanelData]=\"task\" [selectedHeaders$]=\"selectedHeaders$\" [first]=\"first\" [last]=\"last\"\n                    [forceLoadDataOnOpen]=\"forceLoadDataOnOpen\"\n                    [responsiveBody]=\"responsiveBody\"\n                    (taskEvent)=\"emitTaskEvent($event)\"\n                    (panelRefOutput)=\"addToPanelRefs(task, $event)\"\n                    class=\"panel-expanded-spacing\">\n                </nc-task-panel>\n\n                <div *ngIf=\"loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\">\n                    <mat-spinner color=\"primary\" diameter=\"52\"></mat-spinner>\n                </div>\n\n        </mat-accordion>\n        <mat-paginator [length]=\"length\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\" color=\"primary\"\n                       [pageSizeOptions]=\"pageSizeOptions\" (page)=\"onPageChanged($event)\" showFirstLastButtons>\n        </mat-paginator>\n    </ng-container>\n</div>\n",
+                        styles: [".font-size-20{font-size:20px}.full-width{width:100%}.full-height{height:100%}"]
+                    },] }
+        ];
+        TaskListPaginationComponent.ctorParameters = function () { return [
+            { type: componentsCore.TaskViewService },
+            { type: componentsCore.LoggerService },
+            { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [componentsCore.NAE_TAB_DATA,] }] },
+            { type: router.ActivatedRoute }
+        ]; };
+        return TaskListPaginationComponent;
+    }(componentsCore.AbstractTaskListPaginationComponent));
+
     var PanelComponentModule = /** @class */ (function () {
         function PanelComponentModule() {
         }
@@ -3495,6 +3542,8 @@
                             PublicWorkflowPanelComponent,
                             ImmediateFilterTextComponent,
                             ImmediateFilterTextContentComponent,
+                            PanelItemComponent,
+                            TaskListPaginationComponent
                         ],
                         imports: [
                             common.CommonModule,
@@ -3515,6 +3564,7 @@
                             TaskListComponent,
                             PublicWorkflowPanelComponent,
                             ImmediateFilterTextComponent,
+                            TaskListPaginationComponent
                         ],
                         entryComponents: [
                             ImmediateFilterTextContentComponent,
@@ -3634,13 +3684,47 @@
         return CaseListComponent;
     }(componentsCore.AbstractCaseListComponent));
 
+    var CaseListPaginatorComponent = /** @class */ (function (_super) {
+        __extends(CaseListPaginatorComponent, _super);
+        function CaseListPaginatorComponent(_caseViewService, _log, injectedTabData, route) {
+            var _this = _super.call(this, _caseViewService, _log, injectedTabData, route) || this;
+            _this._caseViewService = _caseViewService;
+            _this._log = _log;
+            _this.route = route;
+            return _this;
+        }
+        CaseListPaginatorComponent.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+        };
+        CaseListPaginatorComponent.ctorParameters = function () { return [
+            { type: componentsCore.CaseViewService },
+            { type: componentsCore.LoggerService },
+            { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [componentsCore.NAE_TAB_DATA,] }] },
+            { type: router.ActivatedRoute }
+        ]; };
+        CaseListPaginatorComponent.decorators = [
+            { type: core.Component, args: [{
+                        selector: 'nc-case-list-paginator',
+                        template: "<div fxLayout=\"column\" fxLayoutAlign=\"start center\" fxFlex>\n    <ng-container *ngIf=\"cases$ | async as cases\">\n\n        <div *ngIf=\"(loading$ | async) === false && cases.length === 0\" fxLayout=\"column\"\n             fxLayoutAlign=\"center center\" fxFlex>\n            <mat-icon color=\"accent\" class=\"margin-bottom-default\">storage</mat-icon>\n            <span class=\"font-size-20\">{{ 'view-list.noCasesSatisfyingThisFilter' | translate}}</span>\n        </div>\n\n        <mat-accordion multi=\"true\" class=\"full-width\" >\n\n                <nc-case-panel [responsiveBody]=\"responsiveBody\"\n                               [textEllipsis]=\"textEllipsis\"\n                               *ngFor=\"let case_ of cases | slice: (pageIndex) * pageSize : (pageIndex + 1) * pageSize;\n                                let first = first;\n                                let last = last;\n                                trackBy: trackById\"\n                               [showCasePanelIcon]=\"showCasePanelIcon\"\n                               [showDeleteMenu]=\"showDeleteMenu\" [first]=\"first\" [last]=\"last\"\n                               [case_]=\"case_\" [selectedHeaders$]=\"selectedHeaders$\" (click)=\"onCaseClick(case_)\">\n                </nc-case-panel>\n\n                <div *ngIf=\"loading$ | async\" fxLayout=\"column\" fxLayoutAlign=\"center center\"\n                     class=\"margin-top-default\">\n                    <mat-spinner color=\"primary\" diameter=\"50\"></mat-spinner>\n                </div>\n\n        </mat-accordion>\n        <mat-paginator [length]=\"length\" [pageSize]=\"pageSize\" [pageIndex]=\"pageIndex\" color=\"primary\"\n                       [pageSizeOptions]=\"pageSizeOptions\" (page)=\"onPageChanged($event)\" showFirstLastButtons>\n        </mat-paginator>\n    </ng-container>\n</div>\n",
+                        styles: [".font-size-20{font-size:20px}.margin-bottom-default{margin-bottom:8px}.margin-top-default{margin-top:8px}.full-width{width:100%}"]
+                    },] }
+        ];
+        CaseListPaginatorComponent.ctorParameters = function () { return [
+            { type: componentsCore.CaseViewService },
+            { type: componentsCore.LoggerService },
+            { type: undefined, decorators: [{ type: core.Optional }, { type: core.Inject, args: [componentsCore.NAE_TAB_DATA,] }] },
+            { type: router.ActivatedRoute }
+        ]; };
+        return CaseListPaginatorComponent;
+    }(componentsCore.AbstractCaseListPaginatorComponent));
+
     var CaseViewComponentModule = /** @class */ (function () {
         function CaseViewComponentModule() {
         }
         CaseViewComponentModule.decorators = [
             { type: core.NgModule, args: [{
-                        declarations: [CaseListComponent],
-                        exports: [CaseListComponent],
+                        declarations: [CaseListComponent, CaseListPaginatorComponent],
+                        exports: [CaseListComponent, CaseListPaginatorComponent],
                         imports: [
                             common.CommonModule,
                             componentsCore.MaterialModule,
@@ -4655,6 +4739,7 @@
     exports.OptionSelectorComponent = OptionSelectorComponent;
     exports.PanelComponent = PanelComponent;
     exports.PanelComponentModule = PanelComponentModule;
+    exports.PanelItemComponent = PanelItemComponent;
     exports.PieChartCardComponent = PieChartCardComponent;
     exports.PortalCardComponent = PortalCardComponent;
     exports.ProfileComponent = ProfileComponent;
@@ -4692,6 +4777,7 @@
     exports.TaskContentComponent = TaskContentComponent;
     exports.TaskContentComponentModule = TaskContentComponentModule;
     exports.TaskListComponent = TaskListComponent;
+    exports.TaskListPaginationComponent = TaskListPaginationComponent;
     exports.TaskPanelComponent = TaskPanelComponent;
     exports.TaskSearchComponent = TaskSearchComponent;
     exports.TextFieldComponent = TextFieldComponent;
@@ -4734,10 +4820,11 @@
     exports.ɵbr = filterTextAllowedNetsFactory;
     exports.ɵbs = filterTextCategoriesFactory;
     exports.ɵbt = ImmediateFilterTextContentComponent;
-    exports.ɵbu = DefaultGroupNavigationComponentResolverService;
-    exports.ɵbv = FilterSelectorListItemComponent;
-    exports.ɵbw = AddChildNodeComponent;
-    exports.ɵbx = RemoveNodeComponent;
+    exports.ɵbu = CaseListPaginatorComponent;
+    exports.ɵbv = DefaultGroupNavigationComponentResolverService;
+    exports.ɵbw = FilterSelectorListItemComponent;
+    exports.ɵbx = AddChildNodeComponent;
+    exports.ɵby = RemoveNodeComponent;
     exports.ɵc = baseFilterFactory$2;
     exports.ɵd = localAllowedNetsFactory$1;
     exports.ɵe = UserInviteComponent;