@elderbyte/ngx-starter 12.10.1 → 12.12.0

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/platform-browser'), require('@js-joda/core'), require('@elderbyte/ts-logger'), require('rxjs'), require('rxjs/operators'), require('@angular/common/http'), require('@angular/cdk/collections'), require('@angular/forms'), require('@angular/cdk/coercion'), require('@ngx-translate/core'), require('@angular/flex-layout'), require('@angular/material/card'), require('@angular/material/icon'), require('@angular/material/button'), require('@angular/material/autocomplete'), require('@angular/material/input'), require('@angular/material/chips'), require('@angular/material/core'), require('@angular/material/list'), require('@angular/material/progress-bar'), require('@angular/material/snack-bar'), require('@angular/cdk/drag-drop'), require('@angular/material/divider'), require('@angular/router'), require('@angular/material/badge'), require('@angular/material/checkbox'), require('@angular/material/dialog'), require('@angular/material/menu'), require('@angular/material/tooltip'), require('@angular/material/toolbar'), require('@angular/cdk/a11y'), require('@angular/material/paginator'), require('@angular/material/sort'), require('@angular/material/table'), require('@angular/cdk/table'), require('@angular/material/form-field'), require('@angular/material/select'), require('@angular/cdk/scrolling'), require('@elderbyte/ngx-simple-webstorage'), require('@angular/animations'), require('@angular/material/sidenav'), require('@angular/material/datepicker'), require('@angular/common/locales/de-CH'), require('rxjs/internal/BehaviorSubject'), require('rxjs/internal/Subject'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/material/progress-spinner'), require('streamsaver')) :
-    typeof define === 'function' && define.amd ? define('@elderbyte/ngx-starter', ['exports', '@angular/common', '@angular/core', '@angular/platform-browser', '@js-joda/core', '@elderbyte/ts-logger', 'rxjs', 'rxjs/operators', '@angular/common/http', '@angular/cdk/collections', '@angular/forms', '@angular/cdk/coercion', '@ngx-translate/core', '@angular/flex-layout', '@angular/material/card', '@angular/material/icon', '@angular/material/button', '@angular/material/autocomplete', '@angular/material/input', '@angular/material/chips', '@angular/material/core', '@angular/material/list', '@angular/material/progress-bar', '@angular/material/snack-bar', '@angular/cdk/drag-drop', '@angular/material/divider', '@angular/router', '@angular/material/badge', '@angular/material/checkbox', '@angular/material/dialog', '@angular/material/menu', '@angular/material/tooltip', '@angular/material/toolbar', '@angular/cdk/a11y', '@angular/material/paginator', '@angular/material/sort', '@angular/material/table', '@angular/cdk/table', '@angular/material/form-field', '@angular/material/select', '@angular/cdk/scrolling', '@elderbyte/ngx-simple-webstorage', '@angular/animations', '@angular/material/sidenav', '@angular/material/datepicker', '@angular/common/locales/de-CH', 'rxjs/internal/BehaviorSubject', 'rxjs/internal/Subject', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/material/progress-spinner', 'streamsaver'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.elderbyte = global.elderbyte || {}, global.elderbyte['ngx-starter'] = {}), global.ng.common, global.ng.core, global.ng.platformBrowser, global.core, global.tsLogger, global.rxjs, global.rxjs.operators, global.ng.common.http, global.ng.cdk.collections, global.ng.forms, global.ng.cdk.coercion, global.i1$1, global.ng.flexLayout, global.ng.material.card, global.ng.material.icon, global.ng.material.button, global.ng.material.autocomplete, global.ng.material.input, global.ng.material.chips, global.ng.material.core, global.ng.material.list, global.ng.material.progressBar, global.ng.material.snackBar, global.ng.cdk.dragDrop, global.ng.material.divider, global.ng.router, global.ng.material.badge, global.ng.material.checkbox, global.ng.material.dialog, global.ng.material.menu, global.ng.material.tooltip, global.ng.material.toolbar, global.ng.cdk.a11y, global.ng.material.paginator, global.ng.material.sort, global.ng.material.table, global.ng.cdk.table, global.ng.material.formField, global.ng.material.select, global.ng.cdk.scrolling, global.i2$1, global.ng.animations, global.ng.material.sidenav, global.ng.material.datepicker, global.ng.common.locales.deCH, global.rxjs['internal/BehaviorSubject'], global.rxjs['internal/Subject'], global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.material.progressSpinner, global.StreamSaver));
-}(this, (function (exports, common, i0, platformBrowser, core, tsLogger, rxjs, operators, i1, collections, forms, coercion, i1$1, flexLayout, card, icon, button, autocomplete, input, chips, core$1, list, progressBar, i2, dragDrop, divider, i1$2, badge, checkbox, i1$3, menu, tooltip, toolbar, a11y, paginator, sort, table$1, table, formField, select, scrolling, i2$1, animations, sidenav, datepicker, localeDECH, BehaviorSubject, Subject, overlay, portal, progressSpinner, StreamSaver) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/platform-browser'), require('@js-joda/core'), require('@elderbyte/ts-logger'), require('rxjs'), require('rxjs/operators'), require('@angular/common/http'), require('@angular/cdk/collections'), require('@angular/forms'), require('@angular/cdk/coercion'), require('@ngx-translate/core'), require('@angular/flex-layout'), require('@angular/material/card'), require('@angular/material/icon'), require('@angular/material/button'), require('@angular/material/autocomplete'), require('@angular/material/input'), require('@angular/material/chips'), require('@angular/material/core'), require('@angular/material/list'), require('@angular/material/progress-bar'), require('@angular/material/snack-bar'), require('@angular/cdk/drag-drop'), require('@angular/material/divider'), require('@angular/router'), require('@angular/material/badge'), require('@angular/material/checkbox'), require('@angular/material/dialog'), require('@angular/material/menu'), require('@angular/material/tooltip'), require('@angular/material/toolbar'), require('@angular/cdk/a11y'), require('@angular/material/paginator'), require('@angular/material/sort'), require('@angular/material/table'), require('@angular/cdk/table'), require('@angular/material/form-field'), require('@angular/material/select'), require('@angular/cdk/scrolling'), require('@elderbyte/ngx-simple-webstorage'), require('@angular/animations'), require('@angular/material/sidenav'), require('@angular/material/datepicker'), require('@angular/common/locales/de-CH'), require('rxjs/internal/BehaviorSubject'), require('rxjs/internal/Subject'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@angular/material/progress-spinner'), require('streamsaver'), require('@angular/material/expansion')) :
+    typeof define === 'function' && define.amd ? define('@elderbyte/ngx-starter', ['exports', '@angular/common', '@angular/core', '@angular/platform-browser', '@js-joda/core', '@elderbyte/ts-logger', 'rxjs', 'rxjs/operators', '@angular/common/http', '@angular/cdk/collections', '@angular/forms', '@angular/cdk/coercion', '@ngx-translate/core', '@angular/flex-layout', '@angular/material/card', '@angular/material/icon', '@angular/material/button', '@angular/material/autocomplete', '@angular/material/input', '@angular/material/chips', '@angular/material/core', '@angular/material/list', '@angular/material/progress-bar', '@angular/material/snack-bar', '@angular/cdk/drag-drop', '@angular/material/divider', '@angular/router', '@angular/material/badge', '@angular/material/checkbox', '@angular/material/dialog', '@angular/material/menu', '@angular/material/tooltip', '@angular/material/toolbar', '@angular/cdk/a11y', '@angular/material/paginator', '@angular/material/sort', '@angular/material/table', '@angular/cdk/table', '@angular/material/form-field', '@angular/material/select', '@angular/cdk/scrolling', '@elderbyte/ngx-simple-webstorage', '@angular/animations', '@angular/material/sidenav', '@angular/material/datepicker', '@angular/common/locales/de-CH', 'rxjs/internal/BehaviorSubject', 'rxjs/internal/Subject', '@angular/cdk/overlay', '@angular/cdk/portal', '@angular/material/progress-spinner', 'streamsaver', '@angular/material/expansion'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.elderbyte = global.elderbyte || {}, global.elderbyte['ngx-starter'] = {}), global.ng.common, global.ng.core, global.ng.platformBrowser, global.core, global.tsLogger, global.rxjs, global.rxjs.operators, global.ng.common.http, global.ng.cdk.collections, global.ng.forms, global.ng.cdk.coercion, global.i1$1, global.ng.flexLayout, global.ng.material.card, global.ng.material.icon, global.ng.material.button, global.ng.material.autocomplete, global.ng.material.input, global.ng.material.chips, global.ng.material.core, global.ng.material.list, global.ng.material.progressBar, global.ng.material.snackBar, global.ng.cdk.dragDrop, global.ng.material.divider, global.ng.router, global.ng.material.badge, global.ng.material.checkbox, global.ng.material.dialog, global.ng.material.menu, global.ng.material.tooltip, global.ng.material.toolbar, global.ng.cdk.a11y, global.ng.material.paginator, global.ng.material.sort, global.ng.material.table, global.ng.cdk.table, global.ng.material.formField, global.ng.material.select, global.ng.cdk.scrolling, global.i2$1, global.ng.animations, global.ng.material.sidenav, global.ng.material.datepicker, global.ng.common.locales.deCH, global.rxjs['internal/BehaviorSubject'], global.rxjs['internal/Subject'], global.ng.cdk.overlay, global.ng.cdk.portal, global.ng.material.progressSpinner, global.StreamSaver, global.ng.material.expansion));
+}(this, (function (exports, common, i0, platformBrowser, core, tsLogger, rxjs, operators, i1, collections, forms, coercion, i1$1, flexLayout, card, icon, button, autocomplete, input, chips, core$1, list, progressBar, i2, dragDrop, divider, i1$2, badge, checkbox, i1$3, menu, tooltip, toolbar, a11y, paginator, sort, table$1, table, formField, select, scrolling, i2$1, animations, sidenav, datepicker, localeDECH, BehaviorSubject, Subject, overlay, portal, progressSpinner, StreamSaver, expansion) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -9286,17 +9286,15 @@
             this.blobContext$ = new rxjs.BehaviorSubject(null);
             this._url$ = new rxjs.BehaviorSubject(null);
             this._mimeType$ = new rxjs.BehaviorSubject(null);
-            this.unsubscribe$ = new rxjs.Subject();
+            this.destroy$ = new rxjs.Subject();
             this._displayUnknownAsText = false;
-            rxjs.combineLatest([this._url$, this._mimeType$]).pipe(operators.takeUntil(this.unsubscribe$), operators.filter(function (_a) {
+            rxjs.combineLatest([this._url$, this._mimeType$]).pipe(operators.takeUntil(this.destroy$), operators.filter(function (_a) {
                 var _b = __read(_a, 2), url = _b[0], mimeType = _b[1];
-                return !!url && !!mimeType;
+                return !!url;
             }), operators.map(function (_a) {
                 var _b = __read(_a, 2), url = _b[0], mimeType = _b[1];
                 return BlobUrl.from(url, mimeType);
-            })).subscribe(function (blobUrl) {
-                _this.blobUrl = blobUrl;
-            });
+            })).subscribe(function (blobUrl) { return _this.blobUrl = blobUrl; });
         }
         /***************************************************************************
          *                                                                         *
@@ -9305,8 +9303,8 @@
          **************************************************************************/
         ElderBlobViewerComponent.prototype.ngOnInit = function () { };
         ElderBlobViewerComponent.prototype.ngOnDestroy = function () {
-            this.unsubscribe$.next();
-            this.unsubscribe$.complete();
+            this.destroy$.next();
+            this.destroy$.complete();
         };
         Object.defineProperty(ElderBlobViewerComponent.prototype, "displayUnknownAsText", {
             /***************************************************************************
@@ -9441,7 +9439,7 @@
                     selector: 'elder-blob-viewer',
                     template: "<div fxLayout=\"column\" fxLayoutAlign=\"center center\" class=\"document-viewer\" fxFill>\n\n  <ng-container *ngIf=\"blobContext$ | async as blobContext\">\n\n    <!-- Video -->\n    <div fxLayout=\"column\" fxLayoutAlign=\"center center\" *ngIf=\"blobContext.mimeType.isVideo\" fxFill>\n      <video class=\"video\"\n             controls autoplay loop\n\n      >\n        <source [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\">\n        Your browser does not support HTML5 video.\n      </video>\n    </div>\n\n    <!-- Audio -->\n    <div fxLayout=\"column\" fxLayoutAlign=\"center center\" *ngIf=\"blobContext.mimeType.isAudio\" fxFill>\n      <audio class=\"audio\"\n             controls autoplay loop\n      >\n        <source [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\">\n        Your browser does not support HTML5 audio.\n      </audio>\n    </div>\n\n    <!-- Image -->\n    <div fxLayout=\"column\" *ngIf=\"blobContext.mimeType.isImage\" style=\"overflow: hidden\" fxFill>\n      <img class=\"cover\" fxFlex\n           [src]=\"blobContext.safeUrl\" alt=\"blob image\"/>\n    </div>\n\n    <!-- Embedded (PDFs etc) -->\n    <div fxLayout=\"column\" *ngIf=\"blobContext.displayEmbedded\" fxFill>\n      <div style=\"width: 100%;height: 100%\">\n        <embed class=\"embedded\" [src]=\"blobContext.safeUrl\" [type]=\"blobContext.mimeType.value\" width=\"100%\" height=\"100%\">\n      </div>\n    </div>\n\n    <!-- Plain Text -->\n    <div fxLayout=\"column\" *ngIf=\"blobContext.displayAsText\" fxFill>\n      <textarea\n        class=\"document-content\"\n        placeholder=\"Content\"\n        [value]=\"blobContext.text\" wrap=\"off\"\n        readonly\n      ></textarea>\n    </div>\n\n    <div fxLayout=\"column\" fxLayoutAlign=\"center center\" *ngIf=\"blobContext.cantDisplay\" fxFill>\n      <p>Cant display {{blobContext.mimeType.value}}!</p>\n    </div>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!(blobContext$ | async)\">\n    <div fxLayout=\"column\" fxLayoutAlign=\"center center\" fxFill>\n      <p>No Document.</p>\n    </div>\n  </ng-container>\n\n\n</div>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [".document-viewer{background-color:#dedede;color:#1f1e1e}.video{width:100%;height:auto}.audio{width:100%;height:auto}.embedded{width:100%;height:100%}.cover{-o-object-fit:scale-down;object-fit:scale-down;width:100%;height:auto;overflow:hidden}.document-content{font-family:Courier,monospace;font-size:14px;background-color:#575757;color:#ccc;outline:none;resize:none;width:100%;height:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;border-radius:0;box-shadow:0 2px 14px #000;border-top:1px solid #FFF;border-bottom:1px solid #FFF}\n"]
+                    styles: [":host{overflow:hidden}.document-viewer{background-color:#dedede;color:#1f1e1e}.video{width:100%;height:auto}.audio{width:100%;height:auto}.embedded{width:100%;height:100%}.cover{-o-object-fit:scale-down;object-fit:scale-down;width:100%;height:auto;overflow:hidden}.document-content{font-family:Courier,monospace;font-size:14px;background-color:#575757;color:#ccc;outline:none;resize:none;width:100%;height:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;border-radius:0;box-shadow:0 2px 14px #000;border-top:1px solid #FFF;border-bottom:1px solid #FFF}\n"]
                 },] }
     ];
     ElderBlobViewerComponent.ctorParameters = function () { return [
@@ -9514,7 +9512,7 @@
              * Fields                                                                  *
              *                                                                         *
              **************************************************************************/
-            this.logger = tsLogger.LoggerFactory.getLogger('ElderCardOrganizerComponent');
+            this.logger = tsLogger.LoggerFactory.getLogger(this.constructor.name);
             this.canRemove = true;
             /**
              * If enabled, the card organizer will
@@ -9584,7 +9582,7 @@
     }());
     ElderCardOrganizerComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'elder-card-organizer, ebs-card-organizer',
+                    selector: 'elder-card-organizer',
                     template: "\n<div fxLayout=\"row\" fxLayoutGap=\"20px\" class=\"padding-10 card-organizer\" fxFill>\n\n    <elder-card-stack fxFlex\n                    *ngFor=\"let stack of stacks$ | async\"\n\n                    [stack]=\"stack\"\n\n                    [stackId]=\"stack.id\"\n                    [headerEnabled]=\"headerEnabled\"\n                    [headerTitle]=\"stack.title\"\n                    [canRemove]=\"canRemove\"\n\n                    [cardTemplate]=\"stackCardTemplate\"\n                    [removeConfirmation]=\"removeConfirmation\"\n                    [autoMoveCards]=\"autoMoveCards\"\n                    (requestNewCard)=\"onRequestNewCard($event)\"\n                    (requestRemoveCard)=\"onRequestRemoveCard($event)\"\n                    (cardClick)=\"onCardClicked($event)\"\n\n                    [connectedTo]=\"organizerModel.stackIds | async\"\n                    (cardDropped)=\"onCardDropped($event)\"\n                    [canEnterPredicate]=\"canEnterPredicate\"\n                    [copyOnDrag]=\"copyOnDrag\"\n    >\n    </elder-card-stack>\n\n</div>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [""]
@@ -14637,6 +14635,8 @@
             _this.idField = 'id';
             _this.selectionVisible = true;
             _this.interactionMode = 'open';
+            _this.pageSizeOptions = [30, 50, 100, 150, 200];
+            _this.destroy$ = new rxjs.Subject();
             return _this;
         }
         /***************************************************************************
@@ -14667,7 +14667,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 () {
@@ -14698,10 +14706,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
@@ -14811,7 +14824,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              <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    <!-- 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: [
                         {
@@ -14840,6 +14853,8 @@
         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 }],
@@ -14867,7 +14882,7 @@
                         i1$1.TranslateModule,
                         ElderDataCommonModule,
                         ElderInfiniteScrollModule,
-                        ElderFormsDirectivesModule
+                        ElderFormsDirectivesModule, paginator.MatPaginatorModule
                     ],
                     declarations: [
                         ElderGridComponent,
@@ -24477,6 +24492,167 @@
                 },] }
     ];
 
+    var ExceptionDetailCtx = /** @class */ (function () {
+        function ExceptionDetailCtx(detail) {
+            var _a;
+            this.detail = detail;
+            if (detail) {
+                this.panelTitle = (_a = detail.title) === null || _a === void 0 ? void 0 : _a.substring(0, 50);
+                this.panelDescription = detail.detail.substring(0, 100);
+            }
+        }
+        ExceptionDetailCtx.of = function (detail) {
+            return new ExceptionDetailCtx(detail);
+        };
+        return ExceptionDetailCtx;
+    }());
+    ExceptionDetailCtx.Empty = new ExceptionDetailCtx(null);
+    var ElderExceptionDetailComponent = /** @class */ (function () {
+        /***************************************************************************
+         *                                                                         *
+         * Constructor                                                             *
+         *                                                                         *
+         **************************************************************************/
+        function ElderExceptionDetailComponent() {
+            /***************************************************************************
+             *                                                                         *
+             * Fields                                                                  *
+             *                                                                         *
+             **************************************************************************/
+            this.errorCtx$ = new rxjs.BehaviorSubject(ExceptionDetailCtx.Empty);
+            this.expanded = false;
+            this.stacktraceRows = 8;
+        }
+        /***************************************************************************
+         *                                                                         *
+         * Life Cycle                                                              *
+         *                                                                         *
+         **************************************************************************/
+        ElderExceptionDetailComponent.prototype.ngOnInit = function () {
+        };
+        Object.defineProperty(ElderExceptionDetailComponent.prototype, "error", {
+            /***************************************************************************
+             *                                                                         *
+             * Properties                                                              *
+             *                                                                         *
+             **************************************************************************/
+            set: function (error) {
+                this.errorCtx$.next(ExceptionDetailCtx.of(error));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return ElderExceptionDetailComponent;
+    }());
+    ElderExceptionDetailComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'elder-exception-detail',
+                    template: "<ng-container *ngIf=\"errorCtx$ | async as errorCtx\">\n\n  <mat-accordion *ngIf=\"errorCtx.detail as error\" fxFill>\n    <mat-expansion-panel [expanded]=\"expanded\">\n      <mat-expansion-panel-header>\n        <mat-panel-title fxLayoutAlign=\"start center\" fxLayoutGap=\"8px\">\n          <mat-icon color=\"warn\" class=\"noselect\">warning</mat-icon>\n          <span class=\"noselect\">{{errorCtx.panelTitle}}</span>\n        </mat-panel-title>\n        <mat-panel-description class=\"noselect\">\n          <span class=\"mat-caption\">{{errorCtx.panelDescription}}</span>\n        </mat-panel-description>\n      </mat-expansion-panel-header>\n\n      <div fxLayout=\"column\" fxFlex style=\"overflow: hidden\">\n\n        <mat-form-field class=\"full-width\">\n          <mat-label>Detail</mat-label>\n          <input matInput [value]=\"error.detail\" readonly>\n        </mat-form-field>\n\n        <mat-form-field class=\"full-width\">\n          <mat-label>Stacktrace</mat-label>\n          <textarea class=\"stacktrace\" matInput [value]=\"error.stacktrace\" [rows]=\"stacktraceRows\"></textarea>\n        </mat-form-field>\n\n      </div>\n    </mat-expansion-panel>\n  </mat-accordion>\n\n</ng-container>\n\n\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".stacktrace{font-size:11px;font-family:monospace;white-space:pre;overflow-wrap:normal;overflow-x:scroll;background-color:#575757;color:#d0b795}\n"]
+                },] }
+    ];
+    ElderExceptionDetailComponent.ctorParameters = function () { return []; };
+    ElderExceptionDetailComponent.propDecorators = {
+        expanded: [{ type: i0.Input }],
+        stacktraceRows: [{ type: i0.Input }],
+        error: [{ type: i0.Input }]
+    };
+
+    /**
+     * Provides Error Indicators and Exception detail components.
+     */
+    var ElderErrorModule = /** @class */ (function () {
+        function ElderErrorModule() {
+        }
+        return ElderErrorModule;
+    }());
+    ElderErrorModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [
+                        ElderExceptionDetailComponent
+                    ],
+                    exports: [
+                        ElderExceptionDetailComponent
+                    ],
+                    imports: [
+                        common.CommonModule,
+                        expansion.MatExpansionModule,
+                        icon.MatIconModule,
+                        input.MatInputModule,
+                        flexLayout.FlexModule
+                    ]
+                },] }
+    ];
+
+    var AuditedEntityCtx = /** @class */ (function () {
+        function AuditedEntityCtx(audited) {
+            this.audited = audited;
+        }
+        return AuditedEntityCtx;
+    }());
+    var ElderAuditedEntityComponent = /** @class */ (function () {
+        function ElderAuditedEntityComponent() {
+            this.layout = 'row wrap';
+            this.appearance = 'fill';
+            this.auditedCtx$ = new rxjs.BehaviorSubject(null);
+        }
+        ElderAuditedEntityComponent.prototype.ngOnInit = function () {
+        };
+        Object.defineProperty(ElderAuditedEntityComponent.prototype, "audited", {
+            set: function (audited) {
+                this.auditedCtx$.next(new AuditedEntityCtx(audited));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return ElderAuditedEntityComponent;
+    }());
+    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",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [".decent{opacity:.5}\n"]
+                },] }
+    ];
+    ElderAuditedEntityComponent.ctorParameters = function () { return []; };
+    ElderAuditedEntityComponent.propDecorators = {
+        layout: [{ type: i0.Input }],
+        appearance: [{ type: i0.Input }],
+        audited: [{ type: i0.Input }]
+    };
+
+    var AuditedEntity = /** @class */ (function () {
+        function AuditedEntity() {
+        }
+        return AuditedEntity;
+    }());
+
+    var ElderAuditModule = /** @class */ (function () {
+        function ElderAuditModule() {
+        }
+        return ElderAuditModule;
+    }());
+    ElderAuditModule.decorators = [
+        { type: i0.NgModule, args: [{
+                    declarations: [
+                        ElderAuditedEntityComponent
+                    ],
+                    exports: [
+                        ElderAuditedEntityComponent
+                    ],
+                    imports: [
+                        common.CommonModule,
+                        flexLayout.FlexModule,
+                        input.MatInputModule,
+                        i1$1.TranslateModule,
+                        ElderPipesModule,
+                        icon.MatIconModule
+                    ]
+                },] }
+    ];
+
     /**
      * This class provides a reactive wrapper around an event source.
      *
@@ -25206,6 +25382,7 @@
      * Generated bundle index. Do not edit.
      */
 
+    exports.AuditedEntity = AuditedEntity;
     exports.BlobUrl = BlobUrl;
     exports.BytesFormat = BytesFormat;
     exports.BytesPerSecondFormat = BytesPerSecondFormat;
@@ -25258,6 +25435,8 @@
     exports.ElderAccessDeniedComponent = ElderAccessDeniedComponent;
     exports.ElderAccessDeniedModule = ElderAccessDeniedModule;
     exports.ElderAppHeaderComponent = ElderAppHeaderComponent;
+    exports.ElderAuditModule = ElderAuditModule;
+    exports.ElderAuditedEntityComponent = ElderAuditedEntityComponent;
     exports.ElderAutocompleteComponent = ElderAutocompleteComponent;
     exports.ElderAutocompleteDirective = ElderAutocompleteDirective;
     exports.ElderAutocompleteModule = ElderAutocompleteModule;
@@ -25306,7 +25485,9 @@
     exports.ElderDimensionsInputComponent = ElderDimensionsInputComponent;
     exports.ElderDurationInputComponent = ElderDurationInputComponent;
     exports.ElderEnumTranslationService = ElderEnumTranslationService;
+    exports.ElderErrorModule = ElderErrorModule;
     exports.ElderEventSourceService = ElderEventSourceService;
+    exports.ElderExceptionDetailComponent = ElderExceptionDetailComponent;
     exports.ElderExpandToggleButtonComponent = ElderExpandToggleButtonComponent;
     exports.ElderExpandToggleButtonModule = ElderExpandToggleButtonModule;
     exports.ElderFileDropZoneDirective = ElderFileDropZoneDirective;
@@ -25456,6 +25637,7 @@
     exports.ElderUrlFragmentModule = ElderUrlFragmentModule;
     exports.ElderUrlFragmentSwitcherComponent = ElderUrlFragmentSwitcherComponent;
     exports.ElderViewersModule = ElderViewersModule;
+    exports.ExceptionDetailCtx = ExceptionDetailCtx;
     exports.FileUploadClient = FileUploadClient;
     exports.Filter = Filter;
     exports.FilterContext = FilterContext;