@elderbyte/ngx-starter 12.12.1 → 12.13.1

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

@@ -3339,8 +3339,8 @@
             _this._started = new rxjs.BehaviorSubject(false);
             _this._closed = new rxjs.BehaviorSubject(false);
             _this._primaryIndex = new Map();
-            _this.unsubscribe$ = new rxjs.Subject();
             _this._reloadQueue = new rxjs.Subject();
+            _this.unsubscribe$ = new rxjs.Subject();
             _this._dataSource = dataSource;
             _this._loading = _this._status.pipe(operators.map(function (status) { return status.loading; }));
             _this._filter.filters.pipe(operators.filter(function () { return _this.started; }), operators.takeUntil(_this.unsubscribe$)).subscribe(function (filters) { return _this.onFiltersChanged(filters); });
@@ -3467,6 +3467,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(DataContextBase.prototype, "isStarted$", {
+            get: function () {
+                return this._started.asObservable();
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(DataContextBase.prototype, "isClosed", {
             get: function () {
                 return this._closed.getValue();
@@ -3645,6 +3652,11 @@
         DataContextBase.prototype.onStatus = function (status) {
             this._status.next(status);
         };
+        /***************************************************************************
+         *                                                                         *
+         * Private methods                                                         *
+         *                                                                         *
+         **************************************************************************/
         DataContextBase.prototype.clearIndex = function () {
             this._primaryIndex.clear();
         };
@@ -3954,7 +3966,7 @@
         // protected nextContinuationToken?: string;
         /***************************************************************************
          *                                                                         *
-         * Constructors                                                            *
+         * Constructor                                                             *
          *                                                                         *
          **************************************************************************/
         function DataContextContinuableToken(dataSource, chunkSize, indexFn, localApply, localSort) {
@@ -4376,28 +4388,215 @@
         return MatTableDataContextBinding;
     }());
 
-    var DataSourceToDataContextBinding = /** @class */ (function () {
-        function DataSourceToDataContextBinding(_dataContext, _dataApi) {
+    /**
+     * Allows making any kind of subscription which will be automatically unsubscribed
+     * upon data context closing/cleanup.
+     */
+    var DataContextLifeCycleBinding = /** @class */ (function () {
+        /***************************************************************************
+         *                                                                         *
+         * Constructor                                                             *
+         *                                                                         *
+         **************************************************************************/
+        function DataContextLifeCycleBinding(_dataContext) {
             var _this = this;
             this._dataContext = _dataContext;
-            this._dataApi = _dataApi;
-            this.logger = tsLogger.LoggerFactory.getLogger(this.constructor.name);
-            this.subscribe();
+            if (_dataContext == null) {
+                throw new Error('dataContext must not be null!');
+            }
             this._dataContext.data.subscribe(function (changed) { }, function (err) { }, function () { return _this.unsubscribe(); });
         }
-        DataSourceToDataContextBinding.prototype.unsubscribe = function () {
+        /***************************************************************************
+         *                                                                         *
+         * Public API                                                              *
+         *                                                                         *
+         **************************************************************************/
+        DataContextLifeCycleBinding.prototype.unsubscribe = function () {
             if (this._subscription) {
                 this._subscription.unsubscribe();
                 this._subscription = null;
             }
         };
-        DataSourceToDataContextBinding.prototype.subscribe = function () {
+        return DataContextLifeCycleBinding;
+    }());
+
+    var RequiredFilterContextChangedEvent = /** @class */ (function () {
+        function RequiredFilterContextChangedEvent(requiredFilters, currentFilters, isValid) {
+            this.requiredFilters = requiredFilters;
+            this.currentFilters = currentFilters;
+            this.isValid = isValid;
+        }
+        return RequiredFilterContextChangedEvent;
+    }());
+    var RequiredFilterEvaluator = /** @class */ (function () {
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        function RequiredFilterEvaluator(filterContext, requiredFilters) {
+            var _this = this;
+            this._requiredFilters = new rxjs.BehaviorSubject([]);
+            if (filterContext == null) {
+                throw new Error('filterContext must not be null!');
+            }
+            this._filterContext = filterContext;
+            if (requiredFilters) {
+                this._requiredFilters.next(requiredFilters);
+            }
+            this.context$ = rxjs.combineLatest([
+                this._requiredFilters,
+                this._filterContext.filters
+            ]).pipe(operators.map(function (_a) {
+                var _b = __read(_a, 2), required = _b[0], currentFilters = _b[1];
+                return _this.createEvent(requiredFilters, currentFilters);
+            }));
+        }
+        Object.defineProperty(RequiredFilterEvaluator.prototype, "filterContext", {
+            /***************************************************************************
+             *                                                                         *
+             * Properties                                                              *
+             *                                                                         *
+             **************************************************************************/
+            get: function () {
+                return this._filterContext;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(RequiredFilterEvaluator.prototype, "requiredFilters$", {
+            get: function () {
+                return this._requiredFilters.asObservable();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(RequiredFilterEvaluator.prototype, "requiredFilters", {
+            get: function () {
+                return this._requiredFilters.getValue();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        /***************************************************************************
+         *                                                                         *
+         * Public API                                                              *
+         *                                                                         *
+         **************************************************************************/
+        /***************************************************************************
+         *                                                                         *
+         * Private methods                                                         *
+         *                                                                         *
+         **************************************************************************/
+        RequiredFilterEvaluator.prototype.createEvent = function (requiredFilters, currentFilters) {
+            return new RequiredFilterContextChangedEvent(requiredFilters, currentFilters, this.allRequiredFiltersPresent(requiredFilters, currentFilters));
+        };
+        RequiredFilterEvaluator.prototype.allRequiredFiltersPresent = function (requiredFilters, currentFilters) {
             var _this = this;
-            this._subscription = this._dataApi.dataChanged.subscribe(function (change) { return _this._dataContext.reload(); });
+            if (requiredFilters) {
+                var validatedFilterGroups = requiredFilters.map(function (filterGroup) { return _this.hasAllFilters(filterGroup, currentFilters); });
+                return validatedFilterGroups.find(function (validGroup) { return !!validGroup; });
+            }
+            return true;
         };
-        return DataSourceToDataContextBinding;
+        RequiredFilterEvaluator.prototype.hasAllFilters = function (requiredFilters, currentFilters) {
+            var currentFilterKeys = currentFilters.map(function (f) { return f.key; });
+            var currentFilterKeySet = new Set(currentFilterKeys);
+            return requiredFilters.every(function (required) { return currentFilterKeySet.has(required); });
+        };
+        return RequiredFilterEvaluator;
     }());
 
+    var AutoStartSpec = /** @class */ (function () {
+        function AutoStartSpec(requiredFilters, initialSort) {
+            this.requiredFilters = requiredFilters;
+            this.initialSort = initialSort;
+        }
+        AutoStartSpec.asap = function (sort) {
+            return new AutoStartSpec(null, sort);
+        };
+        AutoStartSpec.requireFiltersAll = function (filters, sort) {
+            return AutoStartSpec.requireFilters([filters], sort);
+        };
+        AutoStartSpec.requireFiltersAny = function (filters, sort) {
+            var separateFilterArrays = filters.map(function (singleFilter) { return [singleFilter]; });
+            return AutoStartSpec.requireFilters(separateFilterArrays, sort);
+        };
+        AutoStartSpec.requireFilters = function (filters, sort) {
+            return new AutoStartSpec(filters, sort);
+        };
+        return AutoStartSpec;
+    }());
+    var DataContextAutoStarter = /** @class */ (function (_super) {
+        __extends(DataContextAutoStarter, _super);
+        /***************************************************************************
+         *                                                                         *
+         * Constructor                                                             *
+         *                                                                         *
+         **************************************************************************/
+        function DataContextAutoStarter(dataContext, _autoStartSpec) {
+            var _this = _super.call(this, dataContext) || this;
+            _this._autoStartSpec = _autoStartSpec;
+            /***************************************************************************
+             *                                                                         *
+             * Fields                                                                  *
+             *                                                                         *
+             **************************************************************************/
+            _this.logger = tsLogger.LoggerFactory.getLogger(_this.constructor.name);
+            if (_autoStartSpec == null) {
+                throw new Error('autoStartSpec must not be null!');
+            }
+            if (_autoStartSpec.requiredFilters) {
+                _this._autoStartConditionFulfilled$ = _this.buildRequiredFilterConditionObservable();
+            }
+            else {
+                // no condition defined, try to start immediately
+                _this.startDataContext();
+            }
+            _this.subscribe();
+            return _this;
+        }
+        /***************************************************************************
+         *                                                                         *
+         * Public API                                                              *
+         *                                                                         *
+         **************************************************************************/
+        DataContextAutoStarter.prototype.subscribe = function () {
+            var _this = this;
+            if (this._autoStartConditionFulfilled$) {
+                this._subscription = this._autoStartConditionFulfilled$.pipe(operators.filter(function (fulfilled) { return !!fulfilled; })).subscribe(function () { return _this.startDataContext(); });
+            }
+        };
+        /***************************************************************************
+         *                                                                         *
+         * Private methods                                                         *
+         *                                                                         *
+         **************************************************************************/
+        DataContextAutoStarter.prototype.buildRequiredFilterConditionObservable = function () {
+            return new RequiredFilterEvaluator(this._dataContext.filter, this._autoStartSpec.requiredFilters).context$.pipe(operators.map(function (event) { return event.isValid; }));
+        };
+        DataContextAutoStarter.prototype.startDataContext = function () {
+            this.logger.debug('Auto starting data context...');
+            this._dataContext.start(this._autoStartSpec.initialSort);
+        };
+        return DataContextAutoStarter;
+    }(DataContextLifeCycleBinding));
+
+    var DataContextSourceAutoReloader = /** @class */ (function (_super) {
+        __extends(DataContextSourceAutoReloader, _super);
+        function DataContextSourceAutoReloader(dataContext, dataApi) {
+            var _this = _super.call(this, dataContext) || this;
+            _this.dataApi = dataApi;
+            _this.subscribe();
+            return _this;
+        }
+        DataContextSourceAutoReloader.prototype.subscribe = function () {
+            var _this = this;
+            this._subscription = this.dataApi.dataChanged.subscribe(function () { return _this._dataContext.reload(); });
+        };
+        return DataContextSourceAutoReloader;
+    }(DataContextLifeCycleBinding));
+
     var EntityIdUtil = /** @class */ (function () {
         function EntityIdUtil() {
         }
@@ -4869,6 +5068,22 @@
             this._reloadOnLocalChanges = true;
             return this;
         };
+        DataContextBuilder.prototype.autoStartAsap = function (sort) {
+            return this.autoStartOn(AutoStartSpec.asap(sort));
+        };
+        DataContextBuilder.prototype.autoStartOnFilters = function (filters, sort) {
+            return this.autoStartOn(AutoStartSpec.requireFilters(filters, sort));
+        };
+        DataContextBuilder.prototype.autoStartOnFiltersAll = function (filters, sort) {
+            return this.autoStartOn(AutoStartSpec.requireFiltersAll(filters, sort));
+        };
+        DataContextBuilder.prototype.autoStartOnFiltersAny = function (filters, sort) {
+            return this.autoStartOn(AutoStartSpec.requireFiltersAny(filters, sort));
+        };
+        DataContextBuilder.prototype.autoStartOn = function (spec) {
+            this._autoStartSpec = spec;
+            return this;
+        };
         /***************************************************************************
          *                                                                         *
          * DataSource Builder                                                      *
@@ -4966,7 +5181,10 @@
             else {
                 throw new Error('Unsupported IDataSource type: ' + typeof (ds));
             }
-            return this.bindToDataSource(dataContext, ds);
+            if (this._autoStartSpec) {
+                this.setupDataContextAutoStart(dataContext, this._autoStartSpec);
+            }
+            return this.setupDataContextAutoReload(dataContext, ds);
         };
         DataContextBuilder.prototype.fromListSource = function (listSource) {
             return new DataContextSimple(listSource, this._indexFn, this._localApply, this._localSort);
@@ -4980,9 +5198,16 @@
         DataContextBuilder.prototype.fromActivePageSource = function (pageSource) {
             return new DataContextActivePage(pageSource, this._pageSize, this._indexFn, this._localApply, this._skipLocalSort ? null : this._localSort);
         };
-        DataContextBuilder.prototype.bindToDataSource = function (dc, dataSource) {
+        DataContextBuilder.prototype.setupDataContextAutoReload = function (dc, dataSource) {
             if (this._reloadOnLocalChanges) {
-                var binding = new DataSourceToDataContextBinding(dc, dataSource);
+                var binding = new DataContextSourceAutoReloader(dc, dataSource);
+            }
+            return dc;
+        };
+        DataContextBuilder.prototype.setupDataContextAutoStart = function (dc, autoStartSpec) {
+            if (this._autoStartSpec) {
+                this.logger.debug('Setting up data context auto start with spec:', this._autoStartSpec);
+                var binding = new DataContextAutoStarter(dc, autoStartSpec);
             }
             return dc;
         };
@@ -9273,7 +9498,6 @@
          *                                                                         *
          **************************************************************************/
         function ElderBlobViewerComponent(httpPristine, domSanitizer, toastService) {
-            var _this = this;
             this.httpPristine = httpPristine;
             this.domSanitizer = domSanitizer;
             this.toastService = toastService;
@@ -9288,6 +9512,14 @@
             this._mimeType$ = new rxjs.BehaviorSubject(null);
             this.destroy$ = new rxjs.Subject();
             this._displayUnknownAsText = false;
+        }
+        /***************************************************************************
+         *                                                                         *
+         * Life Cycle                                                              *
+         *                                                                         *
+         **************************************************************************/
+        ElderBlobViewerComponent.prototype.ngOnInit = function () {
+            var _this = this;
             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;
@@ -9295,13 +9527,7 @@
                 var _b = __read(_a, 2), url = _b[0], mimeType = _b[1];
                 return BlobUrl.from(url, mimeType);
             })).subscribe(function (blobUrl) { return _this.blobUrl = blobUrl; });
-        }
-        /***************************************************************************
-         *                                                                         *
-         * Life Cycle                                                              *
-         *                                                                         *
-         **************************************************************************/
-        ElderBlobViewerComponent.prototype.ngOnInit = function () { };
+        };
         ElderBlobViewerComponent.prototype.ngOnDestroy = function () {
             this.destroy$.next();
             this.destroy$.complete();
@@ -11094,6 +11320,54 @@
         { type: DataContextSelectionDirective }
     ]; };
 
+    var DataContextStateIndicatorComponent = /** @class */ (function () {
+        /***************************************************************************
+         *                                                                         *
+         * Constructor                                                             *
+         *                                                                         *
+         **************************************************************************/
+        function DataContextStateIndicatorComponent() {
+            /***************************************************************************
+             *                                                                         *
+             * Fields                                                                  *
+             *                                                                         *
+             **************************************************************************/
+            this.dataContext$ = new rxjs.BehaviorSubject(null);
+        }
+        /***************************************************************************
+         *                                                                         *
+         * Life Cycle                                                              *
+         *                                                                         *
+         **************************************************************************/
+        DataContextStateIndicatorComponent.prototype.ngOnInit = function () {
+        };
+        Object.defineProperty(DataContextStateIndicatorComponent.prototype, "dataContext", {
+            /***************************************************************************
+             *                                                                         *
+             * Properties                                                              *
+             *                                                                         *
+             **************************************************************************/
+            set: function (dataContext) {
+                this.dataContext$.next(dataContext);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        return DataContextStateIndicatorComponent;
+    }());
+    DataContextStateIndicatorComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'elder-data-context-state-indicator',
+                    template: "<ng-container *ngIf=\"dataContext$ | async as dataContext\">\n\n  <ng-container *ngIf=\"dataContext else noDataContext\">\n\n    <ng-container *ngIf=\"(dataContext.isStarted$ | async) else dataContextNotStarted\">\n\n      <ng-container *ngIf=\"!(dataContext?.status | async)?.hasError else dataContextHasError\">\n\n        <ng-container *ngIf=\"(dataContext?.data | async)?.length === 0\">\n          <ng-template [ngTemplateOutlet]=\"dataContextNoData\"></ng-template>\n        </ng-container>\n\n      </ng-container>\n\n    </ng-container>\n\n  </ng-container>\n\n</ng-container>\n\n<ng-template #noDataContext>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', text: 'No data context'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextNotStarted>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', text: 'Data context not started'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextHasError>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'warning', iconColor: 'warn', text: 'Error while loading data'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #dataContextNoData>\n  <ng-container *ngTemplateOutlet=\"indicator; context:{icon: 'info', text: 'No data available'}\">\n  </ng-container>\n</ng-template>\n\n<ng-template #indicator let-icon=\"icon\" let-iconColor=\"iconColor\" let-text=\"text\">\n\n  <div fxFill\n       fxLayout=\"column\"\n       fxLayoutAlign=\"center center\"\n       class=\"elder-table-hint mat-body-1\">\n\n    <div fxLayout=\"row\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n      <mat-icon [color]=\"iconColor\">{{icon}}</mat-icon>\n      <span class=\"hint mat-body-1\">{{text | translate}}</span>\n    </div>\n\n  </div>\n\n</ng-template>\n",
+                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    styles: [""]
+                },] }
+    ];
+    DataContextStateIndicatorComponent.ctorParameters = function () { return []; };
+    DataContextStateIndicatorComponent.propDecorators = {
+        dataContext: [{ type: i0.Input }]
+    };
+
     var ElderDataCommonModule = /** @class */ (function () {
         function ElderDataCommonModule() {
         }
@@ -11117,14 +11391,16 @@
                         ElderToolbarContentDirective,
                         ElderSingleSortComponent,
                         ElderSelectionMasterCheckboxComponent,
-                        DataContextSelectionDirective
+                        DataContextSelectionDirective,
+                        DataContextStateIndicatorComponent
                     ],
                     exports: [
                         ElderDataToolbarComponent,
                         ElderToolbarContentDirective,
                         ElderSingleSortComponent,
                         ElderSelectionMasterCheckboxComponent,
-                        DataContextSelectionDirective
+                        DataContextSelectionDirective,
+                        DataContextStateIndicatorComponent
                     ],
                 },] }
     ];
@@ -11657,6 +11933,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 +11949,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 +12056,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 +12114,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 +12165,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 +12639,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 +12669,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 +12755,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 +12814,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 +12854,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 +12896,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  <elder-data-context-state-indicator fxFlex [dataContext]=\"dataContext\">\n  </elder-data-context-state-indicator>\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 +12930,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,19 +14910,10 @@
              */
             _this.idField = 'id';
             _this.selectionVisible = true;
-            _this.interactionMode = 'open';
             _this.pageSizeOptions = [30, 50, 100, 150, 200];
             _this.destroy$ = new rxjs.Subject();
-            _this._itemClickSubject = new rxjs.Subject();
             return _this;
         }
-        Object.defineProperty(ElderGridComponent.prototype, "itemClick", {
-            get: function () {
-                return this._itemClickSubject;
-            },
-            enumerable: false,
-            configurable: true
-        });
         /***************************************************************************
          *                                                                         *
          * Lifecycle                                                               *
@@ -14749,18 +15016,6 @@
          * Public API                                                              *
          *                                                                         *
          **************************************************************************/
-        ElderGridComponent.prototype.onItemClick = function (entity) {
-            switch (this.interactionMode) {
-                case 'open':
-                    if (this.selectionModel.hasValue) {
-                        this.selectionModel.toggle(entity);
-                    }
-                    else {
-                        this._itemClickSubject.next(entity);
-                    }
-                    break;
-            }
-        };
         ElderGridComponent.prototype.inSelectionMode = function (currentSelection) {
             if (this.interactionMode === 'selection') {
                 return true;
@@ -14844,7 +15099,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    <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               (click)=\"$event ? onItemClick(tile) : null\">\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",
+                    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: [
                         {
@@ -14872,11 +15127,9 @@
         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 },] }],
-        itemClick: [{ type: i0.Output }],
         tileTemplate: [{ type: i0.Input }],
         toolbarTemplate: [{ type: i0.Input }],
         data: [{ type: i0.Input }],
@@ -24632,7 +24885,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"]
                 },] }
@@ -25404,6 +25657,7 @@
      */
 
     exports.AuditedEntity = AuditedEntity;
+    exports.AutoStartSpec = AutoStartSpec;
     exports.BlobUrl = BlobUrl;
     exports.BytesFormat = BytesFormat;
     exports.BytesPerSecondFormat = BytesPerSecondFormat;
@@ -25426,18 +25680,20 @@
     exports.CurrencyUnitRegistry = CurrencyUnitRegistry;
     exports.CustomDateAdapter = CustomDateAdapter;
     exports.DataContextActivePage = DataContextActivePage;
+    exports.DataContextAutoStarter = DataContextAutoStarter;
     exports.DataContextBase = DataContextBase;
     exports.DataContextBuilder = DataContextBuilder;
     exports.DataContextContinuableBase = DataContextContinuableBase;
     exports.DataContextContinuablePaged = DataContextContinuablePaged;
     exports.DataContextContinuableToken = DataContextContinuableToken;
+    exports.DataContextLifeCycleBinding = DataContextLifeCycleBinding;
     exports.DataContextSelectionDirective = DataContextSelectionDirective;
     exports.DataContextSimple = DataContextSimple;
     exports.DataContextSnapshot = DataContextSnapshot;
+    exports.DataContextSourceAutoReloader = DataContextSourceAutoReloader;
     exports.DataContextStatus = DataContextStatus;
     exports.DataSourceAdapter = DataSourceAdapter;
     exports.DataSourceProcessor = DataSourceProcessor;
-    exports.DataSourceToDataContextBinding = DataSourceToDataContextBinding;
     exports.DataTransferFactory = DataTransferFactory;
     exports.DataTransferProgress = DataTransferProgress;
     exports.DataTransferProgressAggregate = DataTransferProgressAggregate;
@@ -25785,12 +26041,13 @@
     exports.ɵd = createSelectionModel;
     exports.ɵe = createDataViewSelection;
     exports.ɵf = ELDER_DATA_VIEW;
-    exports.ɵh = ElderTripleStateCheckboxDirective;
-    exports.ɵi = ElderTableColumnDirective;
-    exports.ɵj = ElderTableRowDirective;
-    exports.ɵk = ElderPaginatorIntl;
-    exports.ɵl = StandardToastComponent;
-    exports.ɵm = ElderSelectBase;
+    exports.ɵh = DataContextStateIndicatorComponent;
+    exports.ɵi = ElderTripleStateCheckboxDirective;
+    exports.ɵj = ElderTableColumnDirective;
+    exports.ɵk = ElderTableRowDirective;
+    exports.ɵl = ElderPaginatorIntl;
+    exports.ɵm = StandardToastComponent;
+    exports.ɵn = ElderSelectBase;
 
     Object.defineProperty(exports, '__esModule', { value: true });