@elderbyte/ngx-starter 12.11.0 → 12.12.3

package/bundles/elderbyte-ngx-starter.umd.js

@@ -11657,6 +11657,7 @@
              * Underlying data context.
              */
             this.dataContext$ = new rxjs.BehaviorSubject(null);
+            this.interactionMode = 'open';
             /**
              * If true, this table is in dense mode.
              * Heights are generally reduced.
@@ -11672,6 +11673,7 @@
              * No borders / floating visible so that the table can be embedded into another container
              */
             this._embedded = false;
+            this._itemClickSubject = new rxjs.Subject();
             if (!selectionModel) {
                 this.selectionModel = new SelectionModel(false, [], function (entity) { return entity ? _this.getId(entity) : 0; });
             }
@@ -11778,6 +11780,18 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(ElderDataViewBaseComponent.prototype, "itemClick", {
+            /***************************************************************************
+             *                                                                         *
+             * On click properties                                                     *
+             *                                                                         *
+             **************************************************************************/
+            get: function () {
+                return this._itemClickSubject;
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(ElderDataViewBaseComponent.prototype, "dense", {
             get: function () {
                 return this._dense;
@@ -11824,7 +11838,38 @@
          * @param data
          * @protected
          */
-        ElderDataViewBaseComponent.prototype.onDataContextSet = function (data) { };
+        ElderDataViewBaseComponent.prototype.onDataContextSet = function (data) {
+        };
+        ElderDataViewBaseComponent.prototype.onItemClick = function (entity) {
+            if (entity) {
+                switch (this.interactionMode) {
+                    case 'open':
+                        if (this.selectionModel.hasValue) {
+                            this.selectionModel.toggle(entity);
+                        }
+                        else {
+                            this._itemClickSubject.next(entity);
+                        }
+                        break;
+                    case 'selection':
+                        this.selectionModel.toggle(entity);
+                        break;
+                }
+            }
+        };
+        ElderDataViewBaseComponent.prototype.onItemDoubleClick = function (entity) {
+            if (entity) {
+                switch (this.interactionMode) {
+                    // double click in open mode not supported
+                    case 'open':
+                        break;
+                    // double click in selection mode triggers normal item click
+                    case 'selection':
+                        this._itemClickSubject.next(entity);
+                        break;
+                }
+            }
+        };
         /***************************************************************************
          *                                                                         *
          * Private Methods                                                         *
@@ -11844,11 +11889,13 @@
         { type: ElderDataViewSelectionMode }
     ]; };
     ElderDataViewBaseComponent.propDecorators = {
+        interactionMode: [{ type: i0.Input }],
         selectableEvaluatorFn: [{ type: i0.Input }],
         selection: [{ type: i0.Input }],
         selectionChange: [{ type: i0.Output }],
         selectionSingleChange: [{ type: i0.Output }],
         selectionMultiEnabled: [{ type: i0.Input }],
+        itemClick: [{ type: i0.Output }],
         dense: [{ type: i0.Input }],
         float: [{ type: i0.Input }],
         embedded: [{ type: i0.Input }]
@@ -12316,7 +12363,6 @@
              **************************************************************************/
             _this.logger = tsLogger.LoggerFactory.getLogger(_this.constructor.name);
             _this.destroy$ = new rxjs.Subject();
-            _this._itemClickSubject = new rxjs.Subject();
             /**
              * Load next chunk after current is done
              */
@@ -12347,7 +12393,6 @@
             _this.cleanUp = true;
             _this.keepSelection = true;
             _this.showFooter = false;
-            _this.interactionMode = 'open';
             _this.toolbarRowTemplates$ = new rxjs.BehaviorSubject([]);
             /**
              * Gets the current rows of this table.
@@ -12434,7 +12479,7 @@
                 if (data instanceof Array) {
                     dc = DataContextBuilder.start()
                         .localSort()
-                        .buildLocal(data); // Potential Memory leak (See autoCleanUp)
+                        .buildLocal(data, this.idField); // Potential Memory leak (See autoCleanUp)
                     dc.start();
                 }
                 else if (isDataSource(data)) {
@@ -12493,13 +12538,6 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ElderTableComponent.prototype, "itemClick", {
-            get: function () {
-                return this._itemClickSubject;
-            },
-            enumerable: false,
-            configurable: true
-        });
         /*
         @Output()
         public get activeItem(): Observable<any> {
@@ -12540,42 +12578,6 @@
             enumerable: false,
             configurable: true
         });
-        /**
-         * Occurs when the user clicks on a row
-         */
-        ElderTableComponent.prototype.onItemClick = function (entity) {
-            switch (this.interactionMode) {
-                case 'open':
-                    if (this.selectionModel.hasValue) {
-                        this.selectionModel.toggle(entity);
-                    }
-                    else {
-                        this._itemClickSubject.next(entity);
-                    }
-                    break;
-                case 'selection':
-                    this.selectionModel.toggle(entity);
-                    break;
-                // TODO improve onItemDoubleClick behavior with Observable
-                /*
-                clickStream
-                .bufferTime(250)
-                .map(arr => arr.length)
-                .filter(len => len === 2);
-                */
-            }
-        };
-        ElderTableComponent.prototype.onItemDoubleClick = function (entity) {
-            switch (this.interactionMode) {
-                // double click in open mode not supported
-                case 'open':
-                    break;
-                // double click in selection mode triggers normal item click
-                case 'selection':
-                    this._itemClickSubject.next(entity);
-                    break;
-            }
-        };
         /***************************************************************************
          *                                                                         *
          * Private Methods                                                         *
@@ -12618,7 +12620,7 @@
     ElderTableComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'elder-table, ebs-table',
-                    template: "\n<div fxLayout=\"column\" fxFlex\n     class=\"elder-table\"\n     [class.elder-mat-table-container]=\"!embedded\"\n     [class.mat-elevation-z5]=\"float\"\n     [class.elder-mat-table-flat]=\"!embedded && !float\"\n>\n\n  <!-- Toolbar Rows -->\n  <ng-container *ngFor=\"let toolbarRowTemplate of toolbarRowTemplates$ | async\">\n    <ng-template *ngTemplateOutlet=\"toolbarRowTemplate; context: {$implicit: this}\">\n    </ng-template>\n  </ng-container>\n\n  <!-- Scrollable Table -->\n  <div fxLayout=\"column\" class=\"scrollable elder-table-scroll\"\n       infiniteScroll\n       [eventThrottle]=\"150\"\n       [offsetFactor]=\"2\"\n       [ignoreScrollEvent]=\"!isContinuable || !(canLoadMore$ | async)\"\n       (closeToEnd)=\"requestMoreDataZoned($event)\"\n  >\n    <table\n      mat-table\n      class=\"elder-mat-inner-table\"\n      [trackBy]=\"trackByFn\"\n      [dataSource]=\"dataContext$ | async\"\n      [elderDataContextSelection]=\"dataContext$ | async\" #dataSelection=\"elderDataContextSelection\"\n      [elderDataContextSelectionModel]=\"selectionModel\"\n    >\n\n      <!-- selection Column -->\n      <ng-container matColumnDef=\"select\">\n        <th mat-header-cell *matHeaderCellDef>\n          <elder-selection-master-checkbox></elder-selection-master-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let entity\">\n          <mat-checkbox (click)=\"$event.stopPropagation()\"\n                        (change)=\"$event ? selectionModel.toggle(entity) : null\"\n                        [checked]=\"selectionModel.observeSelection(entity) | async\"\n                        [disabled]=\"!selectionModel.isSelectable(entity)\"\n                        class=\"elder-table-checkbox\"\n                        [class.elder-table-checkbox-visible]=\"(dataSelection.selectionState$ | async).anySelected\"\n          >\n          </mat-checkbox>\n        </td>\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container *ngIf=\"(tableModel.displayedColumnsInner$ | async) as displayedColumnsInner\">\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n        <tr mat-row class=\"elder-table-row\"\n            *matRowDef=\"let entity; columns: displayedColumnsInner;\"\n            [elderTableRow]=\"entity\"\n            [class.dense]=\"dense\"\n            [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n            [class.elder-row-removing]=\"removingField && entity[removingField]\"\n            [class.elder-table-row-selected]=\"interactionMode == 'selection' && selectionModel.observeSelection(entity) | async\"\n            (click)=\"$event ? onItemClick(entity) : null\"\n            (dblclick)=\"$event ? onItemDoubleClick(entity) : null\"\n        >\n        </tr>\n        <ng-container *ngIf=\"showFooter\">\n          <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n        </ng-container>\n      </ng-container>\n    </table>\n  </div>\n\n  <div fxLayout=\"column\" fxFlex fxLayoutAlign=\"center center\">\n\n    <span class=\"elder-table-hint mat-body-1\" *ngIf=\"(dataContext?.data | async)?.length === 0 && !(dataContext?.status | async)?.hasError\">\n      {{'No data available' | translate}}\n    </span>\n\n    <div *ngIf=\"(dataContext?.status | async)?.hasError\"\n         fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"20px\">\n      <mat-icon color=\"warn\">warning</mat-icon>\n      <span class=\"hint mat-body-1\">{{'Error while loading data' | translate}}</span>\n    </div>\n\n  </div>\n\n  <mat-progress-bar fxFlex=\"none\"\n                    [mode]=\"(dataContext?.loading | async) ? 'indeterminate' : 'determinate'\"\n                    [color]=\"((dataContext?.status | async)?.hasError) ? 'warn' : 'primary'\">\n  </mat-progress-bar>\n\n  <!-- Optional Paginator Toolbar -->\n  <mat-paginator #matPaginator *ngIf=\"isActivePaged && (dataActivePaged.page | async) as page\"\n                 fxFlex=\"none\"\n                 [length]=\"dataContext?.total | async\"\n                 [pageIndex]=\"page?.index\"\n                 [pageSize]=\"page?.size\"\n                 [pageSizeOptions]=\"pageSizeOptions\">\n  </mat-paginator>\n\n  <!-- Optional Continuation Footer -->\n  <div *ngIf=\"isContinuable\" class=\"elder-table-footer\"\n       fxLayout=\"row\" fxFlex=\"none\" fxLayoutAlign=\"end center\" fxLayoutGap=\"10px\"\n       style=\"padding-right: 10px\" >\n\n    <span class=\"mat-caption noselect\" style=\"color: gray\">\n      {{(dataContext?.data | async)?.length}} / {{total$ | async}}\n    </span>\n\n    <button mat-icon-button type=\"button\" color=\"primary\"\n            [disabled]=\"!(canLoadMore$ | async)\"\n            (click)=\"dataContinuable.loadMore()\">\n      <mat-icon>keyboard_arrow_down</mat-icon>\n    </button>\n  </div>\n\n</div>\n",
+                    template: "\n<div fxLayout=\"column\" fxFlex\n     class=\"elder-table\"\n     [class.elder-mat-table-container]=\"!embedded\"\n     [class.mat-elevation-z5]=\"float\"\n     [class.elder-mat-table-flat]=\"!embedded && !float\"\n>\n\n  <!-- Toolbar Rows -->\n  <ng-container *ngFor=\"let toolbarRowTemplate of toolbarRowTemplates$ | async\">\n    <ng-template *ngTemplateOutlet=\"toolbarRowTemplate; context: {$implicit: this}\">\n    </ng-template>\n  </ng-container>\n\n  <!-- Scrollable Table -->\n  <div fxLayout=\"column\" class=\"scrollable elder-table-scroll\"\n       infiniteScroll\n       [eventThrottle]=\"150\"\n       [offsetFactor]=\"2\"\n       [ignoreScrollEvent]=\"!isContinuable || !(canLoadMore$ | async)\"\n       (closeToEnd)=\"requestMoreDataZoned($event)\"\n  >\n    <table\n      mat-table\n      class=\"elder-mat-inner-table\"\n      [trackBy]=\"trackByFn\"\n      [dataSource]=\"dataContext$ | async\"\n      [elderDataContextSelection]=\"dataContext$ | async\" #dataSelection=\"elderDataContextSelection\"\n      [elderDataContextSelectionModel]=\"selectionModel\"\n    >\n\n      <!-- selection Column -->\n      <ng-container matColumnDef=\"select\">\n        <th mat-header-cell *matHeaderCellDef>\n          <elder-selection-master-checkbox></elder-selection-master-checkbox>\n        </th>\n        <td mat-cell *matCellDef=\"let entity\">\n          <mat-checkbox (click)=\"$event.stopPropagation()\"\n                        (change)=\"$event ? selectionModel.toggle(entity) : null\"\n                        [checked]=\"selectionModel.observeSelection(entity) | async\"\n                        [disabled]=\"!selectionModel.isSelectable(entity)\"\n                        class=\"elder-table-checkbox\"\n                        [class.elder-table-checkbox-visible]=\"(dataSelection.selectionState$ | async).anySelected\"\n          >\n          </mat-checkbox>\n        </td>\n        <td mat-footer-cell *matFooterCellDef></td>\n      </ng-container>\n\n      <ng-container *ngIf=\"(tableModel.displayedColumnsInner$ | async) as displayedColumnsInner\">\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n        <tr mat-row class=\"elder-table-row\"\n            *matRowDef=\"let entity; columns: displayedColumnsInner;\"\n            [elderTableRow]=\"entity\"\n            [class.dense]=\"dense\"\n            [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n            [class.elder-row-removing]=\"removingField && entity[removingField]\"\n            [class.elder-table-row-selected]=\"interactionMode == 'selection' && selectionModel.observeSelection(entity) | async\"\n            (click)=\"onItemClick(entity)\"\n            (dblclick)=\"onItemDoubleClick(entity)\"\n        >\n        </tr>\n        <ng-container *ngIf=\"showFooter\">\n          <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n        </ng-container>\n      </ng-container>\n    </table>\n  </div>\n\n  <div fxLayout=\"column\" fxFlex fxLayoutAlign=\"center center\">\n\n    <span class=\"elder-table-hint mat-body-1\" *ngIf=\"(dataContext?.data | async)?.length === 0 && !(dataContext?.status | async)?.hasError\">\n      {{'No data available' | translate}}\n    </span>\n\n    <div *ngIf=\"(dataContext?.status | async)?.hasError\"\n         fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"20px\">\n      <mat-icon color=\"warn\">warning</mat-icon>\n      <span class=\"hint mat-body-1\">{{'Error while loading data' | translate}}</span>\n    </div>\n\n  </div>\n\n  <mat-progress-bar fxFlex=\"none\"\n                    [mode]=\"(dataContext?.loading | async) ? 'indeterminate' : 'determinate'\"\n                    [color]=\"((dataContext?.status | async)?.hasError) ? 'warn' : 'primary'\">\n  </mat-progress-bar>\n\n  <!-- Optional Paginator Toolbar -->\n  <mat-paginator #matPaginator *ngIf=\"isActivePaged && (dataActivePaged.page | async) as page\"\n                 fxFlex=\"none\"\n                 [length]=\"dataContext?.total | async\"\n                 [pageIndex]=\"page?.index\"\n                 [pageSize]=\"page?.size\"\n                 [pageSizeOptions]=\"pageSizeOptions\">\n  </mat-paginator>\n\n  <!-- Optional Continuation Footer -->\n  <div *ngIf=\"isContinuable\" class=\"elder-table-footer\"\n       fxLayout=\"row\" fxFlex=\"none\" fxLayoutAlign=\"end center\" fxLayoutGap=\"10px\"\n       style=\"padding-right: 10px\" >\n\n    <span class=\"mat-caption noselect\" style=\"color: gray\">\n      {{(dataContext?.data | async)?.length}} / {{total$ | async}}\n    </span>\n\n    <button mat-icon-button type=\"button\" color=\"primary\"\n            [disabled]=\"!(canLoadMore$ | async)\"\n            (click)=\"dataContinuable.loadMore()\">\n      <mat-icon>keyboard_arrow_down</mat-icon>\n    </button>\n  </div>\n\n</div>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     providers: [
                         ElderTableProviders.ExistingOrNewTableModel,
@@ -12652,14 +12654,12 @@
         cleanUp: [{ type: i0.Input }],
         keepSelection: [{ type: i0.Input }],
         showFooter: [{ type: i0.Input }],
-        interactionMode: [{ type: i0.Input }],
         toolbarRowTemplateQuery: [{ type: i0.ContentChildren, args: [ElderTableToolbarDirective, { read: i0.TemplateRef },] }],
         rowsQuery: [{ type: i0.ViewChildren, args: [ElderTableRowDirective,] }],
         toolbarTemplate: [{ type: i0.Input }],
         data: [{ type: i0.Input }],
         displayedColumns: [{ type: i0.Input }],
-        selectionVisible: [{ type: i0.Input }],
-        itemClick: [{ type: i0.Output }]
+        selectionVisible: [{ type: i0.Input }]
     };
 
     var ElderInfiniteScrollDirective = /** @class */ (function () {
@@ -14634,7 +14634,8 @@
              */
             _this.idField = 'id';
             _this.selectionVisible = true;
-            _this.interactionMode = 'open';
+            _this.pageSizeOptions = [30, 50, 100, 150, 200];
+            _this.destroy$ = new rxjs.Subject();
             return _this;
         }
         /***************************************************************************
@@ -14665,7 +14666,15 @@
                 }
             }
         };
+        ElderGridComponent.prototype.ngAfterViewInit = function () {
+            MatTableDataContextBindingBuilder
+                .start(this.dataContext$)
+                .withPaginator(rxjs.of(this.matPaginator))
+                .bindUntil(this.destroy$);
+        };
         ElderGridComponent.prototype.ngOnDestroy = function () {
+            this.destroy$.next();
+            this.destroy$.complete();
         };
         Object.defineProperty(ElderGridComponent.prototype, "tileTemplate", {
             get: function () {
@@ -14696,10 +14705,15 @@
             set: function (data) {
                 this.dataContext$.next(data);
                 this.total$ = data.total.pipe(operators.map(function (total) { return total ? total + '' : '∞'; }));
-                this.canLoadMore$ = rxjs.combineLatest([data.loading, data.hasMoreData]).pipe(operators.map(function (_a) {
-                    var _b = __read(_a, 2), loading = _b[0], hasMoreData = _b[1];
-                    return !loading && hasMoreData;
-                }));
+                if (isContinuableDataContext(data)) {
+                    this.canLoadMore$ = rxjs.combineLatest([data.loading, data.hasMoreData]).pipe(operators.map(function (_a) {
+                        var _b = __read(_a, 2), loading = _b[0], hasMoreData = _b[1];
+                        return !loading && hasMoreData;
+                    }));
+                }
+                else {
+                    this.canLoadMore$ = rxjs.of(false);
+                }
             },
             enumerable: false,
             configurable: true
@@ -14809,7 +14823,7 @@
     ElderGridComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'elder-grid',
-                    template: "<div fxLayout=\"column\" class=\"scroll-fix\" fxFill>\n\n  <!-- Grid Browser -->\n  <div fxLayout=\"column\" fxFlex\n       class=\"scroll-fix elder-grid-container\"\n       *ngIf=\"dataContext$ | async as data\"\n       [class.elder-mat-table-container]=\"!embedded\"\n       [class.mat-elevation-z5]=\"float\"\n       [class.elder-mat-table-flat]=\"!embedded && !float\"\n\n       [elderDataContextSelection]=\"data\" #dataSelection=\"elderDataContextSelection\"\n       [elderDataContextSelectionModel]=\"selectionModel\"\n  >\n\n    <!-- Toolbar Row -->\n    <div *ngIf=\"toolbarVisible\"\n         fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex=\"none\" class=\"elder-grid-toolbar\">\n\n      <div fxLayout=\"column\" fxFlex=\"none\" style=\"padding-left: 8px; padding-right: 8px\" *ngIf=\"selectionVisible\">\n        <elder-selection-master-checkbox fxFlex=\"none\" style=\"padding-left: 12px\"></elder-selection-master-checkbox>\n      </div>\n\n      <!-- Toolbar -->\n      <ng-container *ngIf=\"toolbarTemplate\">\n        <ng-template *ngTemplateOutlet=\"toolbarTemplate; context: {$implicit: this}\"></ng-template>\n      </ng-container>\n\n      <elder-single-sort *ngIf=\"availableSorts && availableSorts.length > 0 && data.sort.sorts | async as sorts\"\n                         fxFlex=\"none\"\n                         [availableSorts]=\"availableSorts\"\n                         [translationPrefix]=\"sortTranslationPrefix\"\n                         [sort]=\"sorts[0]\"\n                         (sortChange)=\"updateSort($event)\">\n      </elder-single-sort>\n\n    </div>\n\n    <mat-divider *ngIf=\"toolbarVisible\"></mat-divider>\n\n    <!-- [cdkDropListSortingDisabled]=\"true\" -->\n    <!-- cdkDropList -->\n    <cdk-virtual-scroll-viewport\n      class=\"elder-grid-browser\" fxLayout=\"column\" fxFlex\n      id=\"documents-container\"\n      [itemSize]=\"itemHeight\"\n      [minBufferPx]=\"itemHeight * 2\"\n      [maxBufferPx]=\"itemHeight * 3\"\n      #virtualScrollViewPort\n      infiniteScroll\n      [eventThrottle]=\"200\"\n      [offsetFactor]=\"2\"\n      [ignoreScrollEvent]=\"data.loading | async\"\n      [containerId]=\"'documents-container'\" [listenToHost]=\"false\"\n      (closeToEnd)=\"requestMoreDataZoned($event)\"\n\n    >\n\n      <!-- (scrolling)=\"onScrolling($event)\" -->\n\n      <div\n        *cdkVirtualFor=\"let row of dataRows$; trackBy: trackByIndex; templateCacheSize: 50\"\n        class=\"elder-grid-tile-row\"\n        [style.height]=\"itemHeight + 'px'\">\n\n        <ng-container *ngFor=\"let tile of row; trackBy: trackByFn\">\n\n          <!-- Tile Cell -->\n          <div *ngIf=\"showTile(tile)\" class=\"elder-grid-tile\">\n            <!-- cdkDrag [cdkDragDisabled]=\"true\" [cdkDragData]=\"tile\" -->\n            <!-- <div class=\"tile-placeholder\" *cdkDragPlaceholder></div> -->\n            <div class=\"elder-grid-tile-content\">\n              <ng-container\n                *ngTemplateOutlet=\"tileTemplate || simpleTileTemplate; context: {$implicit: tile}\">\n              </ng-container>\n\n              <!-- Overlay (Selection) -->\n              <ng-container *ngIf=\"selectionVisible\">\n                <div *ngIf=\"selectionModel.selection | async as selection\"\n                  class=\"elder-grid-tile-overlay\"\n                  [class.elder-grid-tile-overlay-hidden]=\"!inSelectionMode(selection)\"\n                  [class.elder-grid-tile-overlay-visible]=\"inSelectionMode(selection)\"\n                  [class.elder-click-through]=\"!inSelectionMode(selection)\"\n                  (click)=\"selectionModel.toggle(tile)\"\n                >\n                  <button mat-icon-button type=\"button\"\n                          (click)=\"selectionModel.toggle(tile)\" elderStopEventPropagation\n                          class=\"elder-grid-tile-check\">\n                    <mat-icon\n                      [class.elder-selected]=\"(selectionModel.observeSelection(tile) | async)\"\n                    >\n                      {{(selectionModel.observeSelection(tile) | async) ? 'check_circle' : 'radio_button_unchecked'}}\n                    </mat-icon>\n                  </button>\n                </div>\n              </ng-container>\n\n            </div>\n          </div>\n\n          <div *ngIf=\"!showTile(tile)\" class=\"elder-grid-tile-hidden\"></div>\n        </ng-container>\n\n      </div>\n\n    </cdk-virtual-scroll-viewport>\n\n\n    <mat-progress-bar fxFlex=\"none\"\n                      [mode]=\"(data?.loading | async) ? 'indeterminate' : 'determinate'\"\n                      [color]=\"(data && (data.status | async)?.hasError) ? 'warn' : 'primary'\">\n    </mat-progress-bar>\n\n    <!-- Continuation Footer -->\n    <div class=\"elder-grid-footer\" *ngIf=\"footerVisible\"\n         fxLayout=\"row\" fxFlex=\"none\" fxLayoutAlign=\"end center\" fxLayoutGap=\"10px\"\n         style=\"padding-right: 10px\" >\n      <span class=\"mat-caption noselect\" style=\"color: gray\">\n        {{(dataSnapshot?.data | async)?.length}} / {{total$ | async}}\n      </span>\n\n      <button mat-icon-button type=\"button\"\n              color=\"primary\"\n              [disabled]=\"!(canLoadMore$ | async)\"\n              (click)=\"dataSnapshot.loadMore()\">\n        <mat-icon>keyboard_arrow_down</mat-icon>\n      </button>\n    </div>\n\n\n  </div>\n</div>\n\n<ng-template #simpleTileTemplate let-tile>\n  <div *ngIf=\"tile\" fxLayout=\"column\" fxFlex fxLayoutAlign=\"center center\" style=\"background-color: lightblue\">\n    <p class=\"noselect\">Tile: {{tile}}</p>\n  </div>\n</ng-template>\n",
+                    template: "<div fxLayout=\"column\" class=\"scroll-fix\" fxFill>\n\n  <!-- Grid Browser -->\n  <div fxLayout=\"column\" fxFlex\n       class=\"scroll-fix elder-grid-container\"\n       *ngIf=\"dataContext$ | async as data\"\n       [class.elder-mat-table-container]=\"!embedded\"\n       [class.mat-elevation-z5]=\"float\"\n       [class.elder-mat-table-flat]=\"!embedded && !float\"\n\n       [elderDataContextSelection]=\"data\" #dataSelection=\"elderDataContextSelection\"\n       [elderDataContextSelectionModel]=\"selectionModel\"\n  >\n\n    <!-- Toolbar Row -->\n    <div *ngIf=\"toolbarVisible\"\n         fxLayout=\"row\" fxLayoutAlign=\"start center\" fxFlex=\"none\" class=\"elder-grid-toolbar\">\n\n      <div fxLayout=\"column\" fxFlex=\"none\" style=\"padding-left: 8px; padding-right: 8px\" *ngIf=\"selectionVisible\">\n        <elder-selection-master-checkbox fxFlex=\"none\" style=\"padding-left: 12px\"></elder-selection-master-checkbox>\n      </div>\n\n      <!-- Toolbar -->\n      <ng-container *ngIf=\"toolbarTemplate\">\n        <ng-template *ngTemplateOutlet=\"toolbarTemplate; context: {$implicit: this}\"></ng-template>\n      </ng-container>\n\n      <elder-single-sort *ngIf=\"availableSorts && availableSorts.length > 0 && data.sort.sorts | async as sorts\"\n                         fxFlex=\"none\"\n                         [availableSorts]=\"availableSorts\"\n                         [translationPrefix]=\"sortTranslationPrefix\"\n                         [sort]=\"sorts[0]\"\n                         (sortChange)=\"updateSort($event)\">\n      </elder-single-sort>\n\n    </div>\n\n    <mat-divider *ngIf=\"toolbarVisible\"></mat-divider>\n\n    <span class=\"elder-table-hint mat-body-1\" fxFlex fxLayoutAlign=\"center center\"\n          *ngIf=\"!dataContext?.isStarted\">\n          {{'Datacontext not started' | translate}}\n        </span>\n\n    <div *ngIf=\"(dataContext?.data | async)?.isStarted\" fxFlex fxLayoutAlign=\"center center\">\n\n           <span class=\"elder-table-hint mat-body-1\"\n                 *ngIf=\"(dataContext?.data | async)?.length === 0 && !(dataContext?.status | async)?.hasError\">\n          {{'No data available' | translate}}\n        </span>\n\n      <div *ngIf=\"(dataContext?.status | async)?.hasError\"\n           fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"20px\">\n        <mat-icon color=\"warn\">warning</mat-icon>\n        <span class=\"hint mat-body-1\">{{'Error while loading data' | translate}}</span>\n      </div>\n\n    </div>\n\n    <!-- [cdkDropListSortingDisabled]=\"true\" -->\n    <!-- cdkDropList -->\n    <cdk-virtual-scroll-viewport\n      class=\"elder-grid-browser\" fxLayout=\"column\" fxFlex\n      id=\"documents-container\"\n      [itemSize]=\"itemHeight\"\n      [minBufferPx]=\"itemHeight * 2\"\n      [maxBufferPx]=\"itemHeight * 3\"\n      #virtualScrollViewPort\n      infiniteScroll\n      [eventThrottle]=\"200\"\n      [offsetFactor]=\"2\"\n      [ignoreScrollEvent]=\"data.loading | async\"\n      [containerId]=\"'documents-container'\" [listenToHost]=\"false\"\n      (closeToEnd)=\"requestMoreDataZoned($event)\">\n\n      <!-- (scrolling)=\"onScrolling($event)\" -->\n\n      <div\n        *cdkVirtualFor=\"let row of dataRows$; trackBy: trackByIndex; templateCacheSize: 50\"\n        class=\"elder-grid-tile-row\"\n        [style.height]=\"itemHeight + 'px'\">\n\n        <ng-container *ngFor=\"let tile of row; trackBy: trackByFn\">\n\n          <!-- Tile Cell -->\n          <div *ngIf=\"showTile(tile)\" class=\"elder-grid-tile\">\n            <!-- cdkDrag [cdkDragDisabled]=\"true\" [cdkDragData]=\"tile\" -->\n            <!-- <div class=\"tile-placeholder\" *cdkDragPlaceholder></div> -->\n            <div class=\"elder-grid-tile-content\"\n                 (click)=\"onItemClick(tile)\"\n                 (dblclick)=\"onItemDoubleClick(tile)\">\n              <ng-container\n                *ngTemplateOutlet=\"tileTemplate || simpleTileTemplate; context: {$implicit: tile}\">\n              </ng-container>\n\n              <!-- Overlay (Selection) -->\n              <ng-container *ngIf=\"selectionVisible\">\n                <div *ngIf=\"selectionModel.selection | async as selection\"\n                     class=\"elder-grid-tile-overlay\"\n                     [class.elder-grid-tile-overlay-hidden]=\"!inSelectionMode(selection)\"\n                     [class.elder-grid-tile-overlay-visible]=\"inSelectionMode(selection)\"\n                     [class.elder-click-through]=\"true\"\n                >\n                  <button mat-icon-button type=\"button\"\n                          (click)=\"selectionModel.toggle(tile)\" elderStopEventPropagation\n                          class=\"elder-grid-tile-check\">\n                    <mat-icon\n                      [class.elder-selected]=\"(selectionModel.observeSelection(tile) | async)\"\n                    >\n                      {{(selectionModel.observeSelection(tile) | async) ? 'check_circle' : 'radio_button_unchecked'}}\n                    </mat-icon>\n                  </button>\n                </div>\n              </ng-container>\n\n            </div>\n          </div>\n\n          <div *ngIf=\"!showTile(tile)\" class=\"elder-grid-tile-hidden\"></div>\n        </ng-container>\n\n      </div>\n\n    </cdk-virtual-scroll-viewport>\n\n\n    <mat-progress-bar fxFlex=\"none\"\n                      [mode]=\"(data?.loading | async) ? 'indeterminate' : 'determinate'\"\n                      [color]=\"(data && (data.status | async)?.hasError) ? 'warn' : 'primary'\">\n    </mat-progress-bar>\n\n    <!-- Footer -->\n    <div class=\"elder-grid-footer\" *ngIf=\"footerVisible\"\n         fxLayout=\"row\" fxFlex=\"none\" fxLayoutAlign=\"end center\" fxLayoutGap=\"10px\"\n         style=\"padding-right: 10px\">\n\n      <!-- Continuable -->\n      <ng-container *ngIf=\"isContinuable\">\n         <span class=\"mat-caption noselect\" style=\"color: gray\">\n            {{(dataSnapshot?.data | async)?.length}} / {{total$ | async}}\n          </span>\n\n        <button mat-icon-button type=\"button\"\n                color=\"primary\"\n                [disabled]=\"!(canLoadMore$ | async)\"\n                (click)=\"dataSnapshot.loadMore()\">\n          <mat-icon>keyboard_arrow_down</mat-icon>\n        </button>\n      </ng-container>\n\n      <!-- Paged -->\n      <mat-paginator #matPaginator *ngIf=\"isActivePaged && (dataActivePaged.page | async) as page\"\n                     fxFlex=\"none\"\n                     [length]=\"dataContext?.total | async\"\n                     [pageIndex]=\"page?.index\"\n                     [pageSize]=\"page?.size\"\n                     [pageSizeOptions]=\"pageSizeOptions\">\n      </mat-paginator>\n\n      <!-- Local Source -->\n      <ng-container *ngIf=\"!isActivePaged && !isContinuable\">\n         <span class=\"mat-caption noselect\" style=\"color: gray\">\n            {{(dataSnapshot?.data | async)?.length}}\n          </span>\n      </ng-container>\n\n    </div>\n\n\n  </div>\n</div>\n\n<ng-template #simpleTileTemplate let-tile>\n  <div *ngIf=\"tile\" fxLayout=\"column\" fxFlex fxLayoutAlign=\"center center\" style=\"background-color: lightblue\">\n    <p class=\"noselect\">Tile: {{tile}}</p>\n  </div>\n</ng-template>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     providers: [
                         {
@@ -14837,7 +14851,8 @@
         hiddenField: [{ type: i0.Input }],
         idField: [{ type: i0.Input }],
         selectionVisible: [{ type: i0.Input }],
-        interactionMode: [{ type: i0.Input }],
+        pageSizeOptions: [{ type: i0.Input }],
+        matPaginator: [{ type: i0.ViewChild, args: [paginator.MatPaginator,] }],
         toolbarTemplateQuery: [{ type: i0.ContentChild, args: [ElderGridToolbarDirective, { read: i0.TemplateRef, static: true },] }],
         tileTemplate: [{ type: i0.Input }],
         toolbarTemplate: [{ type: i0.Input }],
@@ -14865,7 +14880,7 @@
                         i1$1.TranslateModule,
                         ElderDataCommonModule,
                         ElderInfiniteScrollModule,
-                        ElderFormsDirectivesModule
+                        ElderFormsDirectivesModule, paginator.MatPaginatorModule
                     ],
                     declarations: [
                         ElderGridComponent,
@@ -24594,7 +24609,7 @@
     ElderAuditedEntityComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'elder-audited-entity',
-                    template: "<section [fxLayout]=\"layout\" fxLayoutGap=\"8px\" *ngIf=\"auditedCtx$ | async as ctx\">\n\n  <mat-form-field class=\"elder-std-form-field\" [appearance]=\"appearance\">\n    <mat-icon class=\"decent noselect\" matSuffix>add_circle_outline</mat-icon>\n    <mat-label>{{'context.createdAt' | translate}} {{ctx.audited?.createdAt | timeAgo}}</mat-label>\n    <input matInput name=\"created\"\n           [value]=\"ctx.audited?.createdAt | date:'dd.MM.yyyy hh:mm'\"\n           readonly>\n    <mat-hint>{{ctx.audited?.createdBy}}</mat-hint>\n  </mat-form-field>\n\n  <mat-form-field class=\"elder-std-form-field\" [appearance]=\"appearance\">\n    <mat-icon class=\"decent noselect\" matSuffix>mode_edit_outline</mat-icon>\n    <mat-label>{{'context.modifiedAt' | translate}} {{ctx.audited?.modifiedAt | timeAgo}}</mat-label>\n    <input matInput name=\"modified\"\n           [value]=\"ctx.audited?.modifiedAt | date:'dd.MM.yyyy hh:mm'\"\n           readonly>\n    <mat-hint>{{ctx.audited?.modifiedBy}}</mat-hint>\n  </mat-form-field>\n\n</section>\n",
+                    template: "<section [fxLayout]=\"layout\" fxLayoutGap=\"8px\" *ngIf=\"auditedCtx$ | async as ctx\">\n\n  <mat-form-field class=\"elder-std-form-field\" [appearance]=\"appearance\">\n    <mat-label fxLayoutAlign=\"start center\" fxLayoutGap=\"4px\">\n      <mat-icon class=\"decent noselect\" inline>add_circle_outline</mat-icon>\n      <span>{{'context.createdAt' | translate}} {{ctx.audited?.createdAt | timeAgo}}</span>\n    </mat-label>\n    <input matInput name=\"created\"\n           [value]=\"ctx.audited?.createdAt | date:'dd.MM.yyyy hh:mm'\"\n           readonly>\n    <mat-hint>{{ctx.audited?.createdBy}}</mat-hint>\n  </mat-form-field>\n\n  <mat-form-field class=\"elder-std-form-field\" [appearance]=\"appearance\">\n    <mat-label fxLayoutAlign=\"start center\" fxLayoutGap=\"4px\">\n      <mat-icon class=\"decent noselect\">mode_edit_outline</mat-icon>\n      <span>{{'context.modifiedAt' | translate}} {{ctx.audited?.modifiedAt | timeAgo}}</span>\n    </mat-label>\n    <input matInput name=\"modified\"\n           [value]=\"ctx.audited?.modifiedAt | date:'dd.MM.yyyy hh:mm'\"\n           readonly>\n    <mat-hint>{{ctx.audited?.modifiedBy}}</mat-hint>\n  </mat-form-field>\n\n</section>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [".decent{opacity:.5}\n"]
                 },] }