@elderbyte/ngx-starter 21.11.0-beta.0 → 21.12.0

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -6,8 +6,8 @@ import * as i1 from '@angular/platform-browser';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Duration, Period, TemporalQueries, LocalTime, Instant, LocalDate, nativeJs, ZoneId, DateTimeFormatter, convert, ZonedDateTime, Temporal as Temporal$1 } from '@js-joda/core';
 import { LoggerFactory } from '@elderbyte/ts-logger';
-import { timer, defer, ReplaySubject, concat, finalize, exhaustMap, BehaviorSubject, Subject, switchMap, of, combineLatest, EMPTY, merge, throwError, forkJoin, mergeWith, Observable, from, toArray, zip, mergeMap as mergeMap$1, fromEvent, mergeAll, skipUntil, filter as filter$1, map as map$1, combineLatestWith as combineLatestWith$1, tap as tap$1, takeUntil as takeUntil$1, NEVER } from 'rxjs';
-import { tap, takeUntil, takeWhile, map, filter, distinctUntilChanged, debounceTime, catchError, first, take, switchMap as switchMap$1, mergeMap, expand, reduce, combineLatestWith, startWith, skip, delay, share, skipWhile, debounce, timeout } from 'rxjs/operators';
+import { timer, defer, ReplaySubject, concat, finalize, exhaustMap, BehaviorSubject, Subject, of, throwError, switchMap, combineLatest, EMPTY, merge, forkJoin, mergeWith, Observable, from, toArray, zip, mergeMap as mergeMap$1, fromEvent, mergeAll, skipUntil, filter as filter$1, map as map$1, combineLatestWith as combineLatestWith$1, tap as tap$1, takeUntil as takeUntil$1, NEVER } from 'rxjs';
+import { tap, takeUntil, takeWhile, map, filter, distinctUntilChanged, debounceTime, catchError, first, take, switchMap as switchMap$1, mergeMap, expand, reduce, combineLatestWith, startWith, skip, delay, share, debounce, timeout, skipWhile } from 'rxjs/operators';
 import { Temporal } from '@js-temporal/polyfill';
 import * as i1$1 from '@angular/common/http';
 import { HttpParams, HttpEventType, HttpRequest, HttpClient, HttpErrorResponse, HTTP_INTERCEPTORS, HttpBackend } from '@angular/common/http';
@@ -4082,1814 +4082,1806 @@ class SortContext {
     }
 }
 
-/***************************************************************************
- *                                                                         *
- * Type Predicates                                                         *
- *                                                                         *
- **************************************************************************/
-function isDataSource(object) {
-    if (!object) {
-        return false;
+class DataSourceEntityPatch {
+    constructor(entityId, patch) {
+        this.entityId = entityId;
+        this.patch = patch;
     }
-    return (object.dataChanged !== undefined &&
-        object.findById !== undefined &&
-        object.getId !== undefined);
-}
-function isListDataSource(object) {
-    return object.findAllFiltered !== undefined;
-}
-function isLocalListDataSource(object) {
-    return (isListDataSource(object) &&
-        object.delete !== undefined &&
-        object.save !== undefined &&
-        object.replaceAll !== undefined);
 }
-function isLocalPagedDataSource(object) {
-    return (isPagedDataSource(object) &&
-        object.findAllPaged !== undefined &&
-        object.findById !== undefined &&
-        object.findByIds !== undefined);
-}
-function isLocalDataSource(object) {
-    if (!object) {
-        return false;
+/**
+ * Notifies about changes in a DataSource.
+ */
+class DataSourceChangeEvent {
+    static unknownChanges() {
+        return new DataSourceChangeEvent(null, null, null, null);
+    }
+    static deleted(ids) {
+        return new DataSourceChangeEvent(ids, null, null, null);
+    }
+    static modified(modified) {
+        return new DataSourceChangeEvent(null, modified, null, null);
+    }
+    static created(created) {
+        return new DataSourceChangeEvent(null, null, created, null);
+    }
+    static patched(patches) {
+        return new DataSourceChangeEvent(null, null, null, patches);
+    }
+    constructor(deletedIds, modified, created, patches) {
+        this.deletedIds = deletedIds;
+        this.modified = modified;
+        this.created = created;
+        this.patches = patches;
+        this.unknownChanges = !deletedIds && !modified && !created && !patches;
     }
-    return isLocalListDataSource(object) || isLocalPagedDataSource(object);
-}
-function isPagedDataSource(object) {
-    return object.findAllPaged !== undefined;
-}
-function isContinuableDataSource(object) {
-    return object.findAllContinuable !== undefined;
 }
 
-class ReloadRequest {
-    constructor(number, reason) {
-        this.number = number;
-        this.reason = reason;
+class EntityIdUtil {
+    static getId(entity, idProperty) {
+        if (entity && idProperty) {
+            if (typeof entity === 'object') {
+                return entity?.[idProperty];
+            }
+        }
+        return entity;
     }
-}
-class AfterReload {
-    constructor(request, result) {
-        this.request = request;
-        this.result = result;
+    static extractIdFnOrProperty(idPropertyOrExtractFn) {
+        if (typeof idPropertyOrExtractFn === 'string') {
+            return EntityIdUtil.extractIdFn(idPropertyOrExtractFn);
+        }
+        else if (typeof idPropertyOrExtractFn === 'function') {
+            return idPropertyOrExtractFn;
+        }
+        else if (idPropertyOrExtractFn === null || idPropertyOrExtractFn === undefined) {
+            return EntityIdUtil.extractIdFn(null);
+        }
+        else {
+            throw new Error('Invalid idPropertyOrExtractFn');
+        }
     }
-    fulfills(minRequest) {
-        return this.request.number >= minRequest.number;
+    static extractIdFn(idProperty) {
+        return (entity) => EntityIdUtil.getId(entity, idProperty);
     }
 }
-class DataContextBase extends DataSource {
-    /***************************************************************************
-     *                                                                         *
-     * Fields                                                                  *
-     *                                                                         *
-     **************************************************************************/
-    static { this.DC_ID_COUNTER = 0; }
+
+class DataSourceBase {
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(dataSource, _indexFn, _localApply, _localSort) {
-        super();
-        this._indexFn = _indexFn;
-        this._localApply = _localApply;
-        this._localSort = _localSort;
-        this.baselog = LoggerFactory.getLogger('DataContextBase');
-        this._filter = new FilterContext();
-        this._sort = new SortContext();
-        this._total = new BehaviorSubject(undefined);
-        this._status = new BehaviorSubject(DataContextStatus.idle());
-        this._started = new BehaviorSubject(false);
-        this._closed = new BehaviorSubject(false);
-        this._customIndex = new Map();
-        this._reloadCounter = 0;
-        this._reloadQueue = new Subject();
-        this._reloaded = new Subject();
-        this.destroy$ = new Subject();
-        this.id = 'DataContext#' + ++DataContextBase.DC_ID_COUNTER;
-        this._dataSource = dataSource;
-        this._data = new IndexedEntities((e) => dataSource.getId(e), _localSort, this._sort);
-        this._loading = this._status.pipe(map((status) => status.loading));
-        this._filter.filters
-            .pipe(filter(() => this.started), takeUntil(this.destroy$))
-            .subscribe((filters) => this.onFiltersChanged(filters));
-        this._sort.sorts
-            .pipe(filter(() => this.started), takeUntil(this.destroy$))
-            .subscribe((sorts) => this.onSortsChanged(sorts));
-        this._reloadQueue
-            .pipe(takeUntil(this.destroy$), filter((request) => this.started), debounceTime(this.getDebounceTime()), switchMap((request) => this.reloadNow(request).pipe(map((result) => new AfterReload(request, result)), catchError((err) => {
-            // Dont die on errors
-            this.baselog.error(this.id + ': Reload queue detected error, bad!', err);
-            return of(new AfterReload(request, err));
-        }))))
-            .subscribe((afterReload) => this._reloaded.next(afterReload));
+    constructor(propertyOrIdExtractor) {
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.dataChangeEvents$ = new Subject();
+        this.extractIdFn = EntityIdUtil.extractIdFnOrProperty(propertyOrIdExtractor);
     }
     /***************************************************************************
      *                                                                         *
-     * Public API Material DC                                                  *
+     * Properties                                                              *
      *                                                                         *
      **************************************************************************/
-    connect(collectionViewer) {
-        return this.data;
+    get dataChanged() {
+        return this.dataChangeEvents$.asObservable();
     }
-    disconnect(collectionViewer) { }
     /***************************************************************************
      *                                                                         *
-     * Properties                                                              *
+     * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    get dataSource() {
-        return this._dataSource;
-    }
-    get snapshot() {
-        return new DataContextSnapshot(this.dataSnapshot, this.isEmpty, this.loadingSnapshot, this.totalSnapshot, this.statusSnapshot);
-    }
-    get total() {
-        return this._total.asObservable();
-    }
-    get totalSnapshot() {
-        return this._total.getValue();
+    publishChangeEvent(e) {
+        this.dataChangeEvents$.next(e);
     }
-    get sort() {
-        return this._sort;
+    getId(entity) {
+        return this.extractIdFn(entity);
     }
-    get filter() {
-        return this._filter;
+}
+
+class SortUtil {
+    static toggleDir(dir) {
+        if (dir === 'asc') {
+            return 'desc';
+        }
+        else {
+            return 'asc';
+        }
     }
-    get loading() {
-        return this._loading;
+    static toggleSort(sort) {
+        return new Sort(sort.prop, SortUtil.toggleDir(sort.dir));
     }
-    get loadingSnapshot() {
-        return this.statusSnapshot?.loading;
+    static sortData(data, sorts, prefix) {
+        if (sorts && sorts.length > 0) {
+            const copy = [...data];
+            const sortFields = sorts.map((s) => (s.dir === 'desc' ? '-' : '') + SortUtil.propertyPath(s, prefix));
+            return copy.sort(ComparatorBuilder.fieldSort(...sortFields));
+        }
+        else {
+            return data;
+        }
     }
-    get data() {
-        return this._data.entities$;
+    /**
+     * Checks if the two arrays have all content references in the exact same order.
+     * @param data
+     * @param other
+     */
+    static equalsExactRefs(data, other) {
+        // eslint-disable-next-line eqeqeq
+        if (data.length == other.length) {
+            for (let i = 0; i < data.length; i++) {
+                // eslint-disable-next-line eqeqeq
+                if (data[i] != other[i]) {
+                    return false;
+                }
+            }
+            return true;
+        }
+        return false;
     }
-    get dataSnapshot() {
-        return this._data.entitiesSnapshot;
+    static propertyPath(sort, prefix) {
+        if (prefix) {
+            return prefix + '.' + sort.prop;
+        }
+        else {
+            return sort.prop;
+        }
     }
-    get status() {
-        return this._status;
+}
+
+class MapUtils {
+    static toDistinctMap(values, keyFn) {
+        return values.reduce((map, value) => {
+            map.set(keyFn(value), value);
+            return map;
+        }, new Map());
     }
-    get statusSnapshot() {
-        return this._status.getValue();
+    static groupByKey(values, keyFn) {
+        const groups = new Map();
+        values.forEach((value) => {
+            const key = keyFn(value);
+            let group = groups.get(key);
+            if (!group) {
+                group = [];
+                groups.set(key, group);
+            }
+            group.push(value);
+        });
+        return groups;
     }
-    get isEmpty() {
-        return this.dataSnapshot.length === 0;
-    }
-    get isStarted() {
-        return this.started;
-    }
-    get isStarted$() {
-        return this._started.asObservable();
-    }
-    get isClosed() {
-        return this._closed.getValue();
-    }
-    get started() {
-        return this._started.getValue();
-    }
-    set started(started) {
-        this._started.next(started);
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Public API                                                              *
-     *                                                                         *
-     **************************************************************************/
-    start(sorts, filters) {
-        if (this.isClosed) {
-            throw new Error(this.id + ': Restarting a closed DataContext is not possible!'); // See unsubscribe$
-        }
-        this.started = false;
-        this._sort.replaceSorts(sorts || this.sort.sortsSnapshot);
-        this._filter.replaceFilters(filters || this.filter.filtersSnapshot);
-        this.baselog.debug(this.id + ': Start ...', {
-            dataSource: this.dataSource,
-            sort: this._sort.sortsSnapshot,
-            filter: this._filter.filtersSnapshot,
-        });
-        this.started = true;
-        return this.reload('START');
-    }
-    reload(reason) {
-        const request = new ReloadRequest(++this._reloadCounter, reason);
-        this.baselog.debug(this.id + ': Enqueuing reload request #' + request.number + ' [' + reason + ']');
-        this._reloadQueue.next(request);
-        return this._reloaded.pipe(filter((reload) => reload.fulfills(request)), map((reload) => reload.result));
-    }
-    findByIndex(key) {
-        if (!this._indexFn) {
-            throw new Error(this.id + ': findByIndex requires you to pass a index function!');
-        }
-        return this._customIndex.get(key);
-    }
-    findById(id) {
-        return this._data.getById(id);
-    }
-    /**
-     * Closes this DataContext and cleans up all used resources.
-     */
-    close() {
-        this.started = false;
-        this.destroy$.next();
-        this.destroy$.complete();
-        this._closed.next(true);
-        this._data.destroy();
-        this._total.complete();
-        this._status.complete();
-        this.clearAll();
-        this.baselog.debug(this.id + ': Has been closed and resources cleaned up!');
-    }
-    refresh() {
-        this._data.notify();
-    }
-    update(entities) {
-        this._data.updateSome(entities);
+    static mapValue(map, valueMapFn) {
+        const newMap = new Map();
+        Array.from(map.entries()).forEach(([key, value]) => newMap.set(key, valueMapFn(value)));
+        return newMap;
     }
+}
+
+class LocalListDataSource extends DataSourceBase {
     /***************************************************************************
      *                                                                         *
-     * Protected methods                                                       *
+     * Static Builder                                                          *
      *                                                                         *
      **************************************************************************/
-    reloadNow(request) {
-        this.baselog.debug(this.id + ': reloadNow triggered. Request #' + request.number + ' ' + request.reason, {
-            filter: this._filter.filtersSnapshot,
-            sort: this._sort.sortsSnapshot,
-            dataSource: this.dataSource,
-            request: request,
-        });
-        return this.reloadInternal(); // TODO This should actually return the real (http) request
-    }
-    /**
-     * Append the given rows to the existing ones.
-     */
-    appendData(additionalData) {
-        additionalData = this.localApply(additionalData);
-        this.indexAll(additionalData);
-        this._data.append(additionalData);
-    }
-    /**
-     * Insert the given rows at the given location.
-     */
-    insertData(additionalData, offset) {
-        additionalData = this.localApply(additionalData);
-        this.indexAll(additionalData);
-        this._data.insert(additionalData, offset);
-    }
-    /**
-     * Replaces the existing data with the new set.
-     * @param newData The new data set.
-     * @param alreadyIndexed The rows will be indexed unless they already have been.
-     */
-    setData(newData, alreadyIndexed = false) {
-        newData = this.localApply(newData);
-        if (!alreadyIndexed) {
-            this.clearIndex();
-            this.indexAll(newData);
-        }
-        this._data.replaceAll(newData);
-    }
-    clearData() {
-        this.setData([]);
-    }
-    localApply(data) {
-        if (this._localApply) {
-            return this._localApply(data);
-        }
-        else {
-            return data;
-        }
-    }
-    setTotal(total) {
-        this._total.next(total);
-    }
     /**
-     * Clears the current data-context cached data.
-     * State such as current sorting and filtersSnapshot are kept.
-     */
-    clearAll(silent = false) {
-        this.clearIndex();
-        if (!silent) {
-            this.setTotal(0);
-            this.clearData();
-        }
-        this.onIdle();
-    }
-    updateIndex() {
-        this.clearIndex();
-        this.indexAll(this.dataSnapshot);
-    }
-    /**
-     * Indexes the given item by key if there is an index function defined.
-     */
-    indexItem(item) {
-        const key = this.getItemKey(item);
-        if (key) {
-            this._customIndex.set(key, item);
-        }
-    }
-    /**
-     * Indexes all the given items by key if there is an index function defined.
+     * Creates an empty local list data-source.
+     * You can set / modify data by using the data property.
+     * @param idPropertyOrExtractor
+     * @param localSort
+     * @param localFilter
      */
-    indexAll(items) {
-        if (this._indexFn) {
-            items.forEach((item) => this.indexItem(item));
-        }
-    }
-    getItemKey(item) {
-        if (this._indexFn) {
-            return this._indexFn(item);
-        }
-        return null;
-    }
-    getItemId(item) {
-        return this.dataSource.getId(item);
-    }
-    getDebounceTime() {
-        if (isLocalDataSource(this.dataSource)) {
-            return 0;
-        }
-        return 50; // Default debounce time
+    static empty(idPropertyOrExtractor, localSort, localFilter) {
+        return this.from([], idPropertyOrExtractor, localSort, localFilter);
     }
-    /***************************************************************************
-     *                                                                         *
-     * Event handler                                                           *
-     *                                                                         *
-     **************************************************************************/
-    /**
-     * Occurs when the sort has changed.
-     */
-    onSortsChanged(sorts) {
-        if (!this._localSort) {
-            this.reload('Sort Changed');
-        }
-        else {
-            this.setData(this.dataSnapshot, true);
+    static from(localData, idPropertyOrExtractor, localSort, localFilter) {
+        if (idPropertyOrExtractor === null) {
+            idPropertyOrExtractor = LocalListDataSource.guessIdProperty(localData);
         }
+        return new LocalListDataSource(localData, localSort, localFilter, idPropertyOrExtractor);
     }
-    /**
-     * Occurs when the filter has changed.
-     */
-    onFiltersChanged(filters) {
-        this.reload('Filters Changed');
-    }
-    onError(err) {
-        this.onStatus(DataContextStatus.error(err));
-    }
-    onIdle() {
-        this.onStatus(DataContextStatus.idle());
-    }
-    onLoading() {
-        this.onStatus(DataContextStatus.loading());
-    }
-    onStatus(status) {
-        this._status.next(status);
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Private methods                                                         *
-     *                                                                         *
-     **************************************************************************/
-    clearIndex() {
-        this._customIndex.clear();
-    }
-}
-
-class DataContextSimple extends DataContextBase {
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(dataSource, indexFn, localApply, localSort) {
-        super(dataSource, indexFn, localApply, localSort);
+    constructor(localData, localSort, localFilter, idPropertyOrExtractor) {
+        super(idPropertyOrExtractor);
         /***************************************************************************
          *                                                                         *
          * Fields                                                                  *
          *                                                                         *
          **************************************************************************/
-        this.log = LoggerFactory.getLogger(this.constructor.name);
+        this.logger = LoggerFactory.getLogger(this.constructor.name);
+        this.data$ = new BehaviorSubject([]);
+        if (!localData) {
+            throw new Error('localData must not be null!');
+        }
+        this.localSort = localSort || SortUtil.sortData;
+        this.localFilter = localFilter || FilterUtil.filterData;
+        this.data = localData;
     }
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
      *                                                                         *
      **************************************************************************/
-    get dataSource() {
-        return super.dataSource;
+    get data() {
+        return this.data$.getValue();
+    }
+    set data(data) {
+        this.replaceAll(data);
     }
     /***************************************************************************
      *                                                                         *
-     * Private methods                                                         *
+     * IDataSource API                                                         *
      *                                                                         *
      **************************************************************************/
-    reloadInternal() {
-        const subject = new Subject();
-        if (this.dataSource) {
-            this.onLoading();
-            this.dataSource
-                .findAllFiltered(this.filter.filtersSnapshot, this.sort.sortsSnapshot)
-                .pipe(first())
-                .subscribe((list) => {
-                this.onIdle();
-                this.setTotal(list.length);
-                this.setData(list);
-                this.log.debug(this.id + ': Got list data: ' + list.length);
-                subject.next();
-            }, (err) => {
-                this.onError(err);
-                this.clearAll();
-                this.log.error(this.id + ': Failed to query data', err);
-                subject.error(err);
-            });
+    findById(id) {
+        if (id === undefined || id === null) {
+            throw new Error('findById: id argument required!');
+        }
+        const found = this.data.find((d) => this.getId(d) === id);
+        if (found) {
+            return of(found);
         }
         else {
-            const errorMsg = this.id + ': Skipping data context load - no list fetcher present!';
-            this.log.warn(errorMsg);
-            subject.error(new Error(errorMsg));
+            return throwError(() => new Error("Could not find local entity by id: '" + id + "'"));
         }
-        return subject.pipe(first());
     }
-}
-
-/**
- * Extends a simple flat list data-context with infinite-scroll pagination support.
- *
- */
-class DataContextContinuableBase extends DataContextBase {
-    /***************************************************************************
-     *                                                                         *
-     * Constructors                                                            *
-     *                                                                         *
-     **************************************************************************/
-    constructor(dataSource, chunkSize, indexFn, localApply, localSort) {
-        super(dataSource, indexFn, localApply, localSort);
-        /***************************************************************************
-         *                                                                         *
-         * Fields                                                                  *
-         *                                                                         *
-         **************************************************************************/
-        this.cblogger = LoggerFactory.getLogger(this.constructor.name);
-        this._chunkSize$ = new BehaviorSubject(chunkSize);
+    findByIds(ids) {
+        if (ids === undefined || ids === null) {
+            throw new Error('findByIds: ids array argument required!');
+        }
+        const desiredIds = new Set(ids);
+        return of(this.data.filter((d) => desiredIds.has(this.getId(d))));
+    }
+    findAllFiltered(filters, sorts) {
+        return of(this.data).pipe(map((data) => this.localFilter(data, filters)), map((data) => this.localSort(data, sorts)));
     }
     /***************************************************************************
      *                                                                         *
      * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    loadAll(sorts, filters) {
-        this.cblogger.debug(this.id + ': Starting to load all data ...');
-        // load first page
-        this.start(sorts, filters).subscribe({
-            next: () => {
-                this.cblogger.debug(this.id + ': First page has been loaded. Loading remaining data ...');
-                // load rest in a recursive manner
-                this.loadAllRec();
-            },
-            error: (err) => {
-                this.onError(err);
-                this.cblogger.error(this.id + ': Failed to load first page of load all procedure!', err);
-            },
-        });
+    replaceAll(data) {
+        this.silentReplaceData(data);
+        this.publishChangeEvent(DataSourceChangeEvent.unknownChanges());
     }
-    get chunkSize$() {
-        return this._chunkSize$.asObservable();
+    delete(entity) {
+        this.deleteAll([entity]);
     }
-    get chunkSize() {
-        return this._chunkSize$.value;
+    deleteAll(toDelete) {
+        if (toDelete?.length > 0) {
+            return this.deleteAllById(toDelete.map((e) => this.getId(e)));
+        }
     }
-    set chunkSize(size) {
-        this.updateChunkSize(size, true);
+    deleteAllById(idsToDelete) {
+        if (idsToDelete?.length > 0) {
+            const existing = this.data;
+            const idsToDeleteSet = new Set(idsToDelete);
+            this.silentReplaceData(existing.filter((e) => !idsToDeleteSet.has(this.getId(e))));
+            this.publishChangeEvent(DataSourceChangeEvent.deleted(idsToDelete));
+        }
+    }
+    saveAll(toSave) {
+        const idDataMap = this.buildIdDataMap(this.data);
+        const createdEntities = [];
+        const modifiedEntities = [];
+        toSave.forEach((entity) => {
+            const id = this.getId(entity);
+            if (!idDataMap.has(id)) {
+                createdEntities.push(entity);
+            }
+            else {
+                modifiedEntities.push(entity);
+            }
+            idDataMap.set(id, entity);
+        });
+        this.silentReplaceData(Array.from(idDataMap.values()));
+        this.publishChanges(createdEntities, modifiedEntities);
+    }
+    save(entity, index) {
+        this.saveAtIndex(entity, index);
+    }
+    saveAtIndex(entity, index) {
+        const id = this.getId(entity);
+        const newData = [...this.data];
+        const existingIndex = newData.findIndex((entity) => this.getId(entity) === id);
+        let created = false;
+        if (existingIndex === -1) {
+            if (index !== null) {
+                newData.splice(index, 0, entity);
+            }
+            else {
+                newData.push(entity);
+            }
+            created = true;
+        }
+        else {
+            newData[existingIndex] = entity;
+        }
+        this.silentReplaceData(newData);
+        this.publishChangeEvent(created ? DataSourceChangeEvent.created([entity]) : DataSourceChangeEvent.modified([entity]));
     }
     /***************************************************************************
      *                                                                         *
-     * Private Methods                                                         *
+     * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
-    updateChunkSize(newSize, reloadOnChange) {
-        if (this._chunkSize$.value !== newSize) {
-            this._chunkSize$.next(newSize);
-            if (reloadOnChange) {
-                this.reload('ChunkSizeChanged:' + newSize);
+    buildIdDataMap(data) {
+        return MapUtils.toDistinctMap(data, (value) => this.getId(value));
+    }
+    silentReplaceData(newData) {
+        this.data$.next(newData);
+    }
+    static guessIdProperty(localData) {
+        const log = LoggerFactory.getLogger('LocalListDataSource');
+        if (localData && localData.length > 0) {
+            const sample = localData[0];
+            if (typeof sample === 'object') {
+                if (Object.prototype.hasOwnProperty.call(sample, 'id')) {
+                    log.warn('DataSource without defined id-property => autodetected property id-property as "id"');
+                    return 'id'; // Use id
+                }
+                else {
+                    log.warn('Local DataSource created without defined id-property and objects. Using object equality!');
+                }
             }
         }
+        return null; // Use value as id if scalar
     }
-    loadAllRec() {
-        this.loadMore().subscribe({
-            next: () => {
-                this.cblogger.debug(this.id + ': Loading data chunk finished, loading next...');
-                this.loadAllRec();
-            },
-            error: (err) => {
-                this.onError(err);
-                this.cblogger.error(this.id + ': Loading all failed!', err);
-            },
-            complete: () => {
-                this.cblogger.info(this.id + ': All data loaded completely.');
-            },
-        });
+    publishChanges(createdEntities, modifiedEntities) {
+        if (createdEntities.length > 0) {
+            this.publishChangeEvent(DataSourceChangeEvent.created(createdEntities));
+        }
+        if (modifiedEntities.length > 0) {
+            this.publishChangeEvent(DataSourceChangeEvent.modified(modifiedEntities));
+        }
     }
 }
 
-/**
- * Extends a simple flat list data-context with infinite-scroll pagination support.
- *
- */
-class DataContextContinuablePaged extends DataContextContinuableBase {
-    /***************************************************************************
-     *                                                                         *
-     * Constructors                                                            *
-     *                                                                         *
-     **************************************************************************/
-    constructor(dataSource, pageSize, indexFn, localApply, localSort) {
-        super(dataSource, pageSize, indexFn, localApply, localSort);
-        /***************************************************************************
-         *                                                                         *
-         * Fields                                                                  *
-         *                                                                         *
-         **************************************************************************/
-        this.logger = LoggerFactory.getLogger(this.constructor.name);
-        this._pageCache = new Map();
-        this._latestPage = 0;
-        this._hasMoreData = combineLatest([this.total, this.data]).pipe(map(([total, data]) => this.checkHasMoreData(total, data)), takeUntil(this.destroy$));
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Properties                                                              *
-     *                                                                         *
-     **************************************************************************/
-    get dataSource() {
-        return super.dataSource;
-    }
+class LocalPagedDataSource {
     /***************************************************************************
      *                                                                         *
-     * Public API                                                              *
+     * Static Builder                                                          *
      *                                                                         *
      **************************************************************************/
     /**
-     * Load the next chunk of data.
-     * Useful for infinite scroll like data flows.
-     *
+     * Creates an empty local list data-source.
+     * You can set / modify data by using the data property.
+     * @param idProperty
+     * @param localSort
+     * @param localFilter
      */
-    loadMore() {
-        if (this.hasMoreDataSnapshot) {
-            this.logger.info(this.id + ': Loading more...' + this._latestPage);
-            if (this.loadingSnapshot) {
-                return EMPTY;
-            }
-            const nextPage = this._latestPage + 1;
-            return this.fetchPage(nextPage, this.chunkSize);
-        }
-        else {
-            this.logger.debug(this.id + ': Cannot load more data, since no more data available.');
-            return EMPTY;
-        }
-    }
-    get hasMoreData() {
-        return this._hasMoreData;
+    static empty(idProperty, localSort, localFilter) {
+        return LocalPagedDataSource.of(LocalListDataSource.empty(idProperty, localSort, localFilter));
     }
-    get hasMoreDataSnapshot() {
-        return this.checkHasMoreData(this.totalSnapshot, this.dataSnapshot);
+    static of(listDataSource) {
+        return new LocalPagedDataSource(listDataSource);
     }
     /***************************************************************************
      *                                                                         *
-     * Private Methods                                                         *
+     * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    checkHasMoreData(total, data) {
-        if (total) {
-            return total > data.length;
+    constructor(listDataSource) {
+        if (!listDataSource) {
+            throw new Error('listDataSource must not be null!');
         }
-        return false;
+        this.localListFetcher = listDataSource;
     }
-    reloadInternal() {
-        // Since continuable data-contexts are appending data,
-        // we need to clear it for a reload.
-        this.clearAll(true);
-        return this.fetchPage(0, this.chunkSize, true);
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    get dataChanged() {
+        return this.localListFetcher.dataChanged;
     }
-    clearAll(silent = false) {
-        super.clearAll(silent);
-        this._pageCache = new Map();
-        this._latestPage = 0;
+    findById(id) {
+        return this.localListFetcher.findById(id);
     }
-    fetchPage(pageIndex, pageSize, clear = false) {
-        const subject = new Subject();
-        const pageRequest = new Pageable(pageIndex, pageSize, this.sort.sortsSnapshot);
-        if (this._pageCache.has(pageIndex)) {
-            // Page already loaded - skipping request!
-            this.logger.debug(this.id + ': Skipping fetching page since its already in page observable cache.');
-            subject.next();
+    findByIds(ids) {
+        return this.localListFetcher.findByIds(ids);
+    }
+    findAllPaged(pageable, filters) {
+        return this.localListFetcher
+            .findAllFiltered(filters, pageable.sorts)
+            .pipe(map((data) => this.pageSlice(pageable, data)));
+    }
+    getId(entity) {
+        return this.localListFetcher.getId(entity);
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    pageSlice(pageable, data) {
+        let page;
+        if (data) {
+            const start = pageable.page * pageable.size;
+            const end = start + pageable.size;
+            const slice = data.slice(start, end);
+            page = Page.fromPage(slice, data.length, pageable);
         }
         else {
-            this.onLoading();
-            this.logger.debug(this.id + `: Loading page ${pageIndex} using pageable:`, pageRequest);
-            const pageObs = this.dataSource.findAllPaged(pageRequest, this.filter.filtersSnapshot);
-            this._pageCache.set(pageIndex, pageObs);
-            pageObs.subscribe((page) => {
-                this.logger.debug(this.id + ': Got page data:', page);
-                this.populatePageData(page, clear);
-                if (this._latestPage < page.number) {
-                    this._latestPage = page.number; // TODO This might cause that pages are skipped
-                }
-                subject.next();
-                this.onIdle();
-            }, (err) => {
-                this.onError(err);
-                this.clearData();
-                this.setTotal(0);
-                this.logger.error(this.id + ': Failed to query data', err);
-                subject.error(err);
-            });
+            page = Page.empty();
         }
-        return subject.pipe(first());
+        return page;
     }
-    /**
-     * Load the data from the given page into the current data context
-     */
-    populatePageData(page, clear) {
-        try {
-            this.setTotal(page.totalElements);
-            const start = page.number * page.size;
-            if (clear) {
-                this.setData(page.content);
-            }
-            else {
-                this.insertData(page.content, start);
-            }
-        }
-        catch (err) {
-            this.onError(err);
-            this.logger.error(this.id + ': Failed to populate data with page', page, err);
-        }
+}
+
+/***************************************************************************
+ *                                                                         *
+ * Type Predicates                                                         *
+ *                                                                         *
+ **************************************************************************/
+function isDataSource(object) {
+    if (!object) {
+        return false;
     }
+    return (object.dataChanged !== undefined &&
+        object.findById !== undefined &&
+        object.getId !== undefined);
+}
+function isListDataSource(object) {
+    return object.findAllFiltered !== undefined;
+}
+function isLocalListDataSource(object) {
+    return object instanceof LocalListDataSource;
+}
+function isLocalPagedDataSource(object) {
+    return object instanceof LocalPagedDataSource;
+}
+function isLocalDataSource(object) {
+    return isLocalListDataSource(object) || isLocalPagedDataSource(object);
+}
+function isPagedDataSource(object) {
+    return object.findAllPaged !== undefined;
+}
+function isContinuableDataSource(object) {
+    return object.findAllContinuable !== undefined;
 }
 
-class DataContextContinuableToken extends DataContextContinuableBase {
+class ReloadRequest {
+    constructor(number, reason) {
+        this.number = number;
+        this.reason = reason;
+    }
+}
+class AfterReload {
+    constructor(request, result) {
+        this.request = request;
+        this.result = result;
+    }
+    fulfills(minRequest) {
+        return this.request.number >= minRequest.number;
+    }
+}
+const DEFAULT_DEBOUNCE_TIME$1 = 50;
+class DataContextBase extends DataSource {
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    static { this.DC_ID_COUNTER = 0; }
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(dataSource, chunkSize, indexFn, localApply, localSort) {
-        super(dataSource, chunkSize, indexFn, localApply, localSort);
-        /***************************************************************************
-         *                                                                         *
-         * Fields                                                                  *
-         *                                                                         *
-         **************************************************************************/
-        this.logger = LoggerFactory.getLogger(this.constructor.name);
-        this._hasMoreData = new BehaviorSubject(false);
-        this._chunkCache = new Set();
+    constructor(dataSource, _indexFn, _localApply, _localSort) {
+        super();
+        this._indexFn = _indexFn;
+        this._localApply = _localApply;
+        this._localSort = _localSort;
+        this.baselog = LoggerFactory.getLogger('DataContextBase');
+        this._filter = new FilterContext();
+        this._sort = new SortContext();
+        this._total = new BehaviorSubject(undefined);
+        this._status = new BehaviorSubject(DataContextStatus.idle());
+        this._started = new BehaviorSubject(false);
+        this._closed = new BehaviorSubject(false);
+        this._customIndex = new Map();
+        this._reloadCounter = 0;
+        this._reloadQueue = new Subject();
+        this._reloaded = new Subject();
+        this.destroy$ = new Subject();
+        this.id = 'DataContext#' + ++DataContextBase.DC_ID_COUNTER;
+        this._dataSource = dataSource;
+        this._data = new IndexedEntities((e) => dataSource.getId(e), _localSort, this._sort);
+        this._loading = this._status.pipe(map((status) => status.loading));
+        this._filter.filters
+            .pipe(filter(() => this.started), takeUntil(this.destroy$))
+            .subscribe((filters) => this.onFiltersChanged(filters));
+        this._sort.sorts
+            .pipe(filter(() => this.started), takeUntil(this.destroy$))
+            .subscribe((sorts) => this.onSortsChanged(sorts));
+        this._reloadQueue
+            .pipe(takeUntil(this.destroy$), filter((request) => this.started), debounceTime(this.getDebounceTime()), switchMap((request) => this.reloadNow(request).pipe(map((result) => new AfterReload(request, result)), catchError((err) => {
+            // Dont die on errors
+            this.baselog.error(this.id + ': Reload queue detected error, bad!', err);
+            return of(new AfterReload(request, err));
+        }))))
+            .subscribe((afterReload) => this._reloaded.next(afterReload));
     }
     /***************************************************************************
      *                                                                         *
-     * Properties                                                              *
+     * Public API Material DC                                                  *
      *                                                                         *
      **************************************************************************/
-    get dataSource() {
-        return super.dataSource;
+    connect(collectionViewer) {
+        return this.data;
     }
+    disconnect(collectionViewer) { }
     /***************************************************************************
      *                                                                         *
-     * Public API                                                              *
+     * Properties                                                              *
      *                                                                         *
      **************************************************************************/
-    get hasMoreDataSnapshot() {
-        return this._hasMoreData.getValue();
+    get dataSource() {
+        return this._dataSource;
+    }
+    get snapshot() {
+        return new DataContextSnapshot(this.dataSnapshot, this.isEmpty, this.loadingSnapshot, this.totalSnapshot, this.statusSnapshot);
+    }
+    get total() {
+        return this._total.asObservable();
+    }
+    get totalSnapshot() {
+        return this._total.getValue();
+    }
+    get sort() {
+        return this._sort;
+    }
+    get filter() {
+        return this._filter;
+    }
+    get loading() {
+        return this._loading;
+    }
+    get loadingSnapshot() {
+        return this.statusSnapshot?.loading;
+    }
+    get data() {
+        return this._data.entities$;
+    }
+    get dataSnapshot() {
+        return this._data.entitiesSnapshot;
+    }
+    get status() {
+        return this._status;
+    }
+    get statusSnapshot() {
+        return this._status.getValue();
+    }
+    get isEmpty() {
+        return this.dataSnapshot.length === 0;
+    }
+    get isStarted() {
+        return this.started;
+    }
+    get isStarted$() {
+        return this._started.asObservable();
+    }
+    get isClosed() {
+        return this._closed.getValue();
     }
-    get hasMoreData() {
-        return this._hasMoreData.asObservable();
+    get started() {
+        return this._started.getValue();
     }
-    loadMore() {
-        if (this.loadingSnapshot) {
-            this.logger.debug(this.id + ': Skipping load-more since already loading a chunk!');
-            return EMPTY;
-        }
-        const token = this._expectedChunkToken;
-        if (token && token.length > 0) {
-            return this.fetchNextChunk(token);
-        }
-        else {
-            this.logger.debug(this.id + ': Cannot load more data, since no more data available.');
-            return EMPTY;
-        }
+    set started(started) {
+        this._started.next(started);
     }
     /***************************************************************************
      *                                                                         *
-     * Protect API                                                             *
+     * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    clearAll(silent = false) {
-        super.clearAll(silent);
-        this._chunkCache.clear();
-        this._hasMoreData.next(true);
-        this._expectedChunkToken = undefined;
+    start(sorts, filters) {
+        if (this.isClosed) {
+            throw new Error(this.id + ': Restarting a closed DataContext is not possible!'); // See unsubscribe$
+        }
+        this.started = false;
+        this._sort.replaceSorts(sorts || this.sort.sortsSnapshot);
+        this._filter.replaceFilters(filters || this.filter.filtersSnapshot);
+        this.baselog.debug(this.id + ': Start ...', {
+            dataSource: this.dataSource,
+            sort: this._sort.sortsSnapshot,
+            filter: this._filter.filtersSnapshot,
+        });
+        this.started = true;
+        return this.reload('START');
     }
-    reloadInternal() {
-        // Since continuable data-contexts are appending data,
-        // we need to clear it for a reload.
-        this.clearAll(true);
-        return this.fetchNextChunk(undefined);
+    reload(reason) {
+        const request = new ReloadRequest(++this._reloadCounter, reason);
+        this.baselog.debug(this.id + ': Enqueuing reload request #' + request.number + ' [' + reason + ']');
+        this._reloadQueue.next(request);
+        return this._reloaded.pipe(filter((reload) => reload.fulfills(request)), map((reload) => reload.result));
     }
-    fetchNextChunk(nextToken) {
-        const subject = new Subject();
-        nextToken = nextToken ? nextToken : undefined;
-        if (this._chunkCache.has(nextToken)) {
-            this.logger.debug(this.id +
-                ': Skipping fetching chunk for token "' +
-                nextToken +
-                '" since its already in observable cache.');
-            subject.complete();
-        }
-        else {
-            this.onLoading();
-            this._chunkCache.add(nextToken);
-            this.dataSource
-                .findAllContinuable(new TokenChunkRequest(nextToken, this.filter.filtersSnapshot, this.sort.sortsSnapshot, this.chunkSize))
-                .pipe(first())
-                .subscribe({
-                next: (chunk) => {
-                    this.onChunkFetched(chunk);
-                    subject.next(chunk);
-                },
-                error: (err) => {
-                    this.onChunkFetchError(err);
-                    subject.error(err);
-                },
-            });
+    findByIndex(key) {
+        if (!this._indexFn) {
+            throw new Error(this.id + ': findByIndex requires you to pass a index function!');
         }
-        return subject.pipe(take(1));
-    }
-    onChunkFetched(chunk) {
-        this.logger.debug(this.id + ': Got next chunk data:', chunk);
-        this._hasMoreData.next(chunk.hasMore);
-        this.updateChunkSize(chunk.chunkSize ?? chunk.maxChunkSize, false);
-        this.populateChunkData(chunk);
-        this.onIdle();
+        return this._customIndex.get(key);
     }
-    onChunkFetchError(err) {
-        this.onError(err);
-        this.logger.error(this.id + ': Failed to query data', err);
-        this.clearData();
-        this.setTotal(0);
+    findById(id) {
+        return this._data.getById(id);
     }
     /**
-     * Load the data from the given page into the current data context
+     * Closes this DataContext and cleans up all used resources.
      */
-    populateChunkData(chunk) {
-        if (this.areTokenEqual(chunk.continuationToken, this._expectedChunkToken)) {
-            try {
-                this.setTotal(chunk.total);
-                if (chunk.continuationToken) {
-                    // We had previous chunks so append to current data.
-                    this.appendData(chunk.content);
-                }
-                else {
-                    this.setData(chunk.content);
-                }
-            }
-            catch (err) {
-                this.onError(err);
-                this.logger.error(this.id + ': Failed to populate data with chunk', chunk, err);
-            }
-            this._expectedChunkToken = chunk.nextContinuationToken;
-        }
-        else {
-            this.logger.warn(this.id +
-                ': Discarding continuable chunk (items: ' +
-                chunk.content.length +
-                ', token: ' +
-                chunk.continuationToken +
-                ' )' +
-                ' as it does not match the expected contiunation-token: ' +
-                this._expectedChunkToken);
-        }
+    close() {
+        this.started = false;
+        this.destroy$.next();
+        this.destroy$.complete();
+        this._closed.next(true);
+        this._data.destroy();
+        this._total.complete();
+        this._status.complete();
+        this.clearAll();
+        this.baselog.debug(this.id + ': Has been closed and resources cleaned up!');
     }
-    areTokenEqual(token1, token2) {
-        if (!token1 && !token2) {
-            return true;
-        }
-        return token1 === token2;
+    refresh() {
+        this._data.notify();
     }
-}
-
-class DataContextActivePage extends DataContextBase {
-    /***************************************************************************
-     *                                                                         *
-     * Constructor                                                             *
-     *                                                                         *
-     **************************************************************************/
-    constructor(dataSource, pageSize, indexFn, localApply, localSort) {
-        super(dataSource, indexFn, localApply, localSort);
-        /***************************************************************************
-         *                                                                         *
-         * Fields                                                                  *
-         *                                                                         *
-         **************************************************************************/
-        this.actlogger = LoggerFactory.getLogger(this.constructor.name);
-        this._page = new BehaviorSubject(new PageRequest(0, pageSize));
+    update(entities) {
+        this._data.updateSome(entities);
     }
     /***************************************************************************
      *                                                                         *
-     * Properties                                                              *
+     * Protected methods                                                       *
      *                                                                         *
      **************************************************************************/
-    get dataSource() {
-        return super.dataSource;
-    }
-    get page() {
-        return this._page.asObservable();
+    reloadNow(request) {
+        this.baselog.debug(this.id + ': reloadNow triggered. Request #' + request.number + ' ' + request.reason, {
+            filter: this._filter.filtersSnapshot,
+            sort: this._sort.sortsSnapshot,
+            dataSource: this.dataSource,
+            request: request,
+        });
+        return this.reloadInternal(); // TODO This should actually return the real (http) request
     }
-    get pageSnapshot() {
-        return this._page.getValue();
+    /**
+     * Append the given rows to the existing ones.
+     */
+    appendData(additionalData) {
+        additionalData = this.localApply(additionalData);
+        this.indexAll(additionalData);
+        this._data.append(additionalData);
     }
-    /***************************************************************************
-     *                                                                         *
-     * Public API                                                              *
-     *                                                                         *
-     **************************************************************************/
     /**
-     * Set the current page index and reload.
-     * @param pageIndex
+     * Insert the given rows at the given location.
      */
-    setActiveIndex(pageIndex) {
-        this.setActivePage(new PageRequest(pageIndex, this.pageSnapshot.size));
+    insertData(additionalData, offset) {
+        additionalData = this.localApply(additionalData);
+        this.indexAll(additionalData);
+        this._data.insert(additionalData, offset);
     }
     /**
-     * Sets the current page index / size and reload.
+     * Replaces the existing data with the new set.
+     * @param newData The new data set.
+     * @param alreadyIndexed The rows will be indexed unless they already have been.
      */
-    setActivePage(request) {
-        if (!request) {
-            throw new Error(this.id + ': Setting page PageRequest must not be null!');
+    setData(newData, alreadyIndexed = false) {
+        newData = this.localApply(newData);
+        if (!alreadyIndexed) {
+            this.clearIndex();
+            this.indexAll(newData);
         }
-        let hasChange = false;
-        const page = this.pageSnapshot;
-        if (page.index !== request.index) {
-            hasChange = true;
+        this._data.replaceAll(newData);
+    }
+    clearData() {
+        this.setData([]);
+    }
+    localApply(data) {
+        if (this._localApply) {
+            return this._localApply(data);
         }
-        else if (page.size !== request.size) {
-            hasChange = true;
+        else {
+            return data;
         }
-        if (hasChange) {
-            this._page.next(request);
-            this.reload('setActivePage');
+    }
+    setTotal(total) {
+        this._total.next(total);
+    }
+    /**
+     * Clears the current data-context cached data.
+     * State such as current sorting and filtersSnapshot are kept.
+     */
+    clearAll(silent = false) {
+        this.clearIndex();
+        if (!silent) {
+            this.setTotal(0);
+            this.clearData();
+        }
+        this.onIdle();
+    }
+    updateIndex() {
+        this.clearIndex();
+        this.indexAll(this.dataSnapshot);
+    }
+    /**
+     * Indexes the given item by key if there is an index function defined.
+     */
+    indexItem(item) {
+        const key = this.getItemKey(item);
+        if (key) {
+            this._customIndex.set(key, item);
         }
     }
-    close() {
-        super.close();
-        if (this._activePageChangedSub) {
-            this._activePageChangedSub.unsubscribe();
+    /**
+     * Indexes all the given items by key if there is an index function defined.
+     */
+    indexAll(items) {
+        if (this._indexFn) {
+            items.forEach((item) => this.indexItem(item));
         }
     }
-    /***************************************************************************
-     *                                                                         *
-     * Private methods                                                         *
-     *                                                                         *
-     **************************************************************************/
-    clearAll() {
-        super.clearAll();
-        this.setActiveIndex(0);
+    getItemKey(item) {
+        if (this._indexFn) {
+            return this._indexFn(item);
+        }
+        return null;
     }
-    reloadInternal() {
-        if (this._activePageLoad) {
-            // Cancel previous pending request
-            this._activePageLoad.unsubscribe();
+    getItemId(item) {
+        return this.dataSource.getId(item);
+    }
+    getDebounceTime() {
+        if (isLocalDataSource(this.dataSource)) {
+            return 0;
         }
-        const subject = new Subject();
-        this.onLoading();
-        const page = this.pageSnapshot;
-        const pageRequest = new Pageable(page.index, page.size, this.sort.sortsSnapshot);
-        this._activePageLoad = this.dataSource
-            .findAllPaged(pageRequest, this.filter.filtersSnapshot)
-            .pipe(first())
-            .subscribe((success) => {
-            this.setTotal(success.totalElements);
-            this.setData(success.content);
-            subject.next(success);
-            this.onIdle();
-        }, (err) => {
-            this.clearData();
-            this.actlogger.error(this.id + ': Failed to query data', err);
-            subject.error(err);
-            this.onError(err);
-        }, () => {
-            this.onIdle();
-        });
-        return subject.pipe(first());
+        return DEFAULT_DEBOUNCE_TIME$1;
     }
     /***************************************************************************
      *                                                                         *
-     * Event handlers                                                          *
+     * Event handler                                                           *
      *                                                                         *
      **************************************************************************/
     /**
-     * Occurs when the sorts property has changed.
+     * Occurs when the sort has changed.
      */
     onSortsChanged(sorts) {
-        this.setActiveIndex(0);
-        super.onSortsChanged(sorts);
+        if (!this._localSort) {
+            this.reload('Sort Changed');
+        }
+        else {
+            this.setData(this.dataSnapshot, true);
+        }
     }
     /**
-     * Occurs when the filtersSnapshot property has changed.
+     * Occurs when the filter has changed.
      */
     onFiltersChanged(filters) {
-        this.setActiveIndex(0);
-        super.onFiltersChanged(filters);
+        this.reload('Filters Changed');
+    }
+    onError(err) {
+        this.onStatus(DataContextStatus.error(err));
+    }
+    onIdle() {
+        this.onStatus(DataContextStatus.idle());
+    }
+    onLoading() {
+        this.onStatus(DataContextStatus.loading());
+    }
+    onStatus(status) {
+        this._status.next(status);
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    clearIndex() {
+        this._customIndex.clear();
     }
 }
 
-class MatTableDataContextBindingBuilder {
+class DataContextSimple extends DataContextBase {
     /***************************************************************************
      *                                                                         *
-     * Static Builder                                                          *
+     * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    static start(dataContext$) {
-        return new MatTableDataContextBindingBuilder(dataContext$);
-    }
-    constructor(dataContext$) {
+    constructor(dataSource, indexFn, localApply, localSort) {
+        super(dataSource, indexFn, localApply, localSort);
         /***************************************************************************
          *                                                                         *
          * Fields                                                                  *
          *                                                                         *
          **************************************************************************/
-        this.logger = LoggerFactory.getLogger(this.constructor.name);
-        this._dataContext$ = dataContext$;
+        this.log = LoggerFactory.getLogger(this.constructor.name);
     }
     /***************************************************************************
      *                                                                         *
-     * Public API                                                              *
+     * Properties                                                              *
      *                                                                         *
      **************************************************************************/
-    withSorts(sorts$) {
-        this._sorts$ = sorts$;
-        return this;
-    }
-    withPaginator(paginator$) {
-        this._matPaginator$ = paginator$;
-        return this;
-    }
-    withContinuator(continuator$) {
-        this._continuator$ = continuator$;
-        return this;
+    get dataSource() {
+        return super.dataSource;
     }
-    bindUntil(destroy$) {
-        return new MatTableDataContextBinding(this._dataContext$, this._sorts$, this._matPaginator$, this._continuator$, destroy$);
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    reloadInternal() {
+        const subject = new Subject();
+        if (this.dataSource) {
+            this.onLoading();
+            this.dataSource
+                .findAllFiltered(this.filter.filtersSnapshot, this.sort.sortsSnapshot)
+                .pipe(first())
+                .subscribe((list) => {
+                this.onIdle();
+                this.setTotal(list.length);
+                this.setData(list);
+                this.log.debug(this.id + ': Got list data: ' + list.length);
+                subject.next();
+            }, (err) => {
+                this.onError(err);
+                this.clearAll();
+                this.log.error(this.id + ': Failed to query data', err);
+                subject.error(err);
+            });
+        }
+        else {
+            const errorMsg = this.id + ': Skipping data context load - no list fetcher present!';
+            this.log.warn(errorMsg);
+            subject.error(new Error(errorMsg));
+        }
+        return subject.pipe(first());
     }
 }
-class MatTableDataContextBinding {
+
+/**
+ * Extends a simple flat list data-context with infinite-scroll pagination support.
+ *
+ */
+class DataContextContinuableBase extends DataContextBase {
     /***************************************************************************
      *                                                                         *
-     * Constructor                                                             *
+     * Constructors                                                            *
      *                                                                         *
      **************************************************************************/
-    constructor(_dataContext$, _matSorts$, _matPaginator$, _continuator$, destroy$) {
-        this._dataContext$ = _dataContext$;
-        this._matSorts$ = _matSorts$;
-        this._matPaginator$ = _matPaginator$;
-        this._continuator$ = _continuator$;
+    constructor(dataSource, chunkSize, indexFn, localApply, localSort) {
+        super(dataSource, indexFn, localApply, localSort);
         /***************************************************************************
          *                                                                         *
          * Fields                                                                  *
          *                                                                         *
          **************************************************************************/
-        this.logger = LoggerFactory.getLogger(this.constructor.name);
-        this.subscribeUntil(destroy$);
+        this.cblogger = LoggerFactory.getLogger(this.constructor.name);
+        this._chunkSize$ = new BehaviorSubject(chunkSize);
     }
     /***************************************************************************
      *                                                                         *
-     * Private methods                                                         *
+     * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    subscribeUntil(destroy$) {
-        if (this._matSorts$) {
-            this.bindMatSortsToDataContextUntil(this._matSorts$, destroy$);
-            this.bindDataContextToMatSortsUntil(this._matSorts$, destroy$);
-        }
-        if (this._matPaginator$) {
-            this.bindPaginatorUntil(this._matPaginator$, destroy$);
-        }
-        if (this._continuator$) {
-            this.bindContinuatorUntil(this._continuator$, destroy$);
-        }
-    }
-    bindDataContextToMatSortsUntil(matSorts$, destroy$) {
-        const dcSorts$ = this._dataContext$.pipe(filter((dc) => !!dc), switchMap$1((dc) => dc.sort.sorts));
-        combineLatest([dcSorts$, matSorts$])
-            .pipe(takeUntil(destroy$))
-            .subscribe(([dcSorts, matSorts]) => {
-            if (dcSorts.length >= 1) {
-                // At least one sort active
-                const sort = dcSorts[0];
-                this.updateMatSorts(sort, matSorts);
-            }
-            else {
-                // No sort active
-                this.updateMatSorts(Sort.NONE, matSorts);
-            }
-        });
-    }
-    updateMatSorts(dcSort, matSorts) {
-        const active = dcSort.prop;
-        const direction = this.toMatDirection(dcSort.dir);
-        matSorts.forEach((matSort) => this.updateMatSort(active, direction, matSort));
-    }
-    updateMatSort(activeProp, direction, matSort) {
-        if (activeProp) {
-            if (!matSort.sortables.has(activeProp)) {
-                // The current sort property is not part of this MatSort.
-                activeProp = Sort.NONE.prop; // Force no sort in this mat context
-            }
-        }
-        if (matSort.active !== activeProp || matSort.direction !== direction) {
-            // We do only update matSort when there was a real change
-            matSort.active = activeProp;
-            matSort.direction = direction;
-            matSort._stateChanges.next();
-        }
-    }
-    bindMatSortsToDataContextUntil(sorts$, destroy$) {
-        const sortChanges$ = sorts$.pipe(mergeMap((sorts) => merge(...sorts.map((s) => s.sortChange))), map((matSort) => {
-            return new Sort(matSort.active, this.fromMatDirection(matSort.direction));
-        }));
-        combineLatest([this._dataContext$, sortChanges$])
-            .pipe(takeUntil(destroy$))
-            .subscribe(([dc, sortRequest]) => {
-            if (dc) {
-                dc.sort.updateSort(sortRequest);
-            }
-        });
-    }
-    bindPaginatorUntil(paginator$, destroy$) {
-        const pageRequest$ = paginator$.pipe(filter((paginator) => !!paginator), switchMap$1((paginator) => paginator.page), map((pageEvent) => new PageRequest(pageEvent.pageIndex, pageEvent.pageSize)));
-        combineLatest([this._dataContext$, pageRequest$])
-            .pipe(takeUntil(destroy$))
-            .subscribe(([dc, pageRequest]) => {
-            if (dc) {
-                if (isActivePagedDataContext(dc)) {
-                    const pagedDc = dc;
-                    pagedDc.setActivePage(pageRequest);
-                }
-                else {
-                    this.logger.warn('Can not bind the given paginator to the given data-context,' +
-                        ' as the datacontext does not support pagination!', dc);
-                }
-            }
+    loadAll(sorts, filters) {
+        this.cblogger.debug(this.id + ': Starting to load all data ...');
+        // load first page
+        this.start(sorts, filters).subscribe({
+            next: () => {
+                this.cblogger.debug(this.id + ': First page has been loaded. Loading remaining data ...');
+                // load rest in a recursive manner
+                this.loadAllRec();
+            },
+            error: (err) => {
+                this.onError(err);
+                this.cblogger.error(this.id + ': Failed to load first page of load all procedure!', err);
+            },
         });
     }
-    bindContinuatorUntil(continuator$, destroy$) {
-        const chunkSizeChange$ = continuator$.pipe(filter((continuator) => !!continuator), switchMap$1((continuator) => outputToObservable(continuator.chunkSizeChange)));
-        combineLatest([this._dataContext$, chunkSizeChange$])
-            .pipe(takeUntil(destroy$))
-            .subscribe(([dc, newChunkSize]) => {
-            if (dc) {
-                if (isContinuableDataContext(dc)) {
-                    const continuableDc = dc;
-                    continuableDc.chunkSize = newChunkSize;
-                }
-                else {
-                    this.logger.warn('Can not bind the given Continuator to the given data-context,' +
-                        ' as the DataContext does not support continuation!', dc);
-                }
-            }
-        });
+    get chunkSize$() {
+        return this._chunkSize$.asObservable();
     }
-    toMatDirection(direction) {
-        return direction;
+    get chunkSize() {
+        return this._chunkSize$.value;
     }
-    fromMatDirection(matSortDirection) {
-        return matSortDirection;
+    set chunkSize(size) {
+        this.updateChunkSize(size, true);
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Private Methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    updateChunkSize(newSize, reloadOnChange) {
+        if (this._chunkSize$.value !== newSize) {
+            this._chunkSize$.next(newSize);
+            if (reloadOnChange) {
+                this.reload('ChunkSizeChanged:' + newSize);
+            }
+        }
+    }
+    loadAllRec() {
+        this.loadMore().subscribe({
+            next: () => {
+                this.cblogger.debug(this.id + ': Loading data chunk finished, loading next...');
+                this.loadAllRec();
+            },
+            error: (err) => {
+                this.onError(err);
+                this.cblogger.error(this.id + ': Loading all failed!', err);
+            },
+            complete: () => {
+                this.cblogger.info(this.id + ': All data loaded completely.');
+            },
+        });
     }
 }
 
 /**
- * Allows making any kind of subscription which will be automatically unsubscribed
- * upon data context closing/cleanup.
+ * Extends a simple flat list data-context with infinite-scroll pagination support.
+ *
  */
-class DataContextLifeCycleBinding {
+class DataContextContinuablePaged extends DataContextContinuableBase {
     /***************************************************************************
      *                                                                         *
-     * Constructor                                                             *
+     * Constructors                                                            *
      *                                                                         *
      **************************************************************************/
-    constructor(_dataContext) {
-        this._dataContext = _dataContext;
-        // eslint-disable-next-line eqeqeq
-        if (_dataContext == null) {
-            throw new Error('dataContext must not be null!');
-        }
-        this._dataContext.data.subscribe({
-            complete: () => this.unsubscribe(),
-        });
+    constructor(dataSource, pageSize, indexFn, localApply, localSort) {
+        super(dataSource, pageSize, indexFn, localApply, localSort);
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.logger = LoggerFactory.getLogger(this.constructor.name);
+        this._pageCache = new Map();
+        this._latestPage = 0;
+        this._hasMoreData = combineLatest([this.total, this.data]).pipe(map(([total, data]) => this.checkHasMoreData(total, data)), takeUntil(this.destroy$));
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    get dataSource() {
+        return super.dataSource;
     }
     /***************************************************************************
      *                                                                         *
      * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    unsubscribe() {
-        if (this._subscription) {
-            this._subscription.unsubscribe();
-            this._subscription = null;
+    /**
+     * Load the next chunk of data.
+     * Useful for infinite scroll like data flows.
+     *
+     */
+    loadMore() {
+        if (this.hasMoreDataSnapshot) {
+            this.logger.info(this.id + ': Loading more...' + this._latestPage);
+            if (this.loadingSnapshot) {
+                return EMPTY;
+            }
+            const nextPage = this._latestPage + 1;
+            return this.fetchPage(nextPage, this.chunkSize);
+        }
+        else {
+            this.logger.debug(this.id + ': Cannot load more data, since no more data available.');
+            return EMPTY;
         }
     }
-}
-
-class RequiredFilterContextChangedEvent {
-    constructor(requiredFilters, currentFilters, isValid) {
-        this.requiredFilters = requiredFilters;
-        this.currentFilters = currentFilters;
-        this.isValid = isValid;
+    get hasMoreData() {
+        return this._hasMoreData;
+    }
+    get hasMoreDataSnapshot() {
+        return this.checkHasMoreData(this.totalSnapshot, this.dataSnapshot);
     }
-}
-class RequiredFilterEvaluator {
     /***************************************************************************
      *                                                                         *
-     * Fields                                                                  *
+     * Private Methods                                                         *
      *                                                                         *
      **************************************************************************/
-    constructor(filterContext, requiredFilters) {
-        this._requiredFilters = new BehaviorSubject([]);
-        // eslint-disable-next-line eqeqeq
-        if (filterContext == null) {
-            throw new Error('filterContext must not be null!');
+    checkHasMoreData(total, data) {
+        if (total) {
+            return total > data.length;
         }
-        this._filterContext = filterContext;
-        if (requiredFilters) {
-            this._requiredFilters.next(requiredFilters);
+        return false;
+    }
+    reloadInternal() {
+        // Since continuable data-contexts are appending data,
+        // we need to clear it for a reload.
+        this.clearAll(true);
+        return this.fetchPage(0, this.chunkSize, true);
+    }
+    clearAll(silent = false) {
+        super.clearAll(silent);
+        this._pageCache = new Map();
+        this._latestPage = 0;
+    }
+    fetchPage(pageIndex, pageSize, clear = false) {
+        const subject = new Subject();
+        const pageRequest = new Pageable(pageIndex, pageSize, this.sort.sortsSnapshot);
+        if (this._pageCache.has(pageIndex)) {
+            // Page already loaded - skipping request!
+            this.logger.debug(this.id + ': Skipping fetching page since its already in page observable cache.');
+            subject.next();
         }
-        this.context$ = combineLatest([this._requiredFilters, this._filterContext.filters]).pipe(map(([required, currentFilters]) => this.createEvent(requiredFilters, currentFilters)));
+        else {
+            this.onLoading();
+            this.logger.debug(this.id + `: Loading page ${pageIndex} using pageable:`, pageRequest);
+            const pageObs = this.dataSource.findAllPaged(pageRequest, this.filter.filtersSnapshot);
+            this._pageCache.set(pageIndex, pageObs);
+            pageObs.subscribe((page) => {
+                this.logger.debug(this.id + ': Got page data:', page);
+                this.populatePageData(page, clear);
+                if (this._latestPage < page.number) {
+                    this._latestPage = page.number; // TODO This might cause that pages are skipped
+                }
+                subject.next();
+                this.onIdle();
+            }, (err) => {
+                this.onError(err);
+                this.clearData();
+                this.setTotal(0);
+                this.logger.error(this.id + ': Failed to query data', err);
+                subject.error(err);
+            });
+        }
+        return subject.pipe(first());
+    }
+    /**
+     * Load the data from the given page into the current data context
+     */
+    populatePageData(page, clear) {
+        try {
+            this.setTotal(page.totalElements);
+            const start = page.number * page.size;
+            if (clear) {
+                this.setData(page.content);
+            }
+            else {
+                this.insertData(page.content, start);
+            }
+        }
+        catch (err) {
+            this.onError(err);
+            this.logger.error(this.id + ': Failed to populate data with page', page, err);
+        }
+    }
+}
+
+class DataContextContinuableToken extends DataContextContinuableBase {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(dataSource, chunkSize, indexFn, localApply, localSort) {
+        super(dataSource, chunkSize, indexFn, localApply, localSort);
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.logger = LoggerFactory.getLogger(this.constructor.name);
+        this._hasMoreData = new BehaviorSubject(false);
+        this._chunkCache = new Set();
     }
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
      *                                                                         *
      **************************************************************************/
-    get filterContext() {
-        return this._filterContext;
+    get dataSource() {
+        return super.dataSource;
     }
-    get requiredFilters$() {
-        return this._requiredFilters.asObservable();
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    get hasMoreDataSnapshot() {
+        return this._hasMoreData.getValue();
     }
-    get requiredFilters() {
-        return this._requiredFilters.getValue();
+    get hasMoreData() {
+        return this._hasMoreData.asObservable();
+    }
+    loadMore() {
+        if (this.loadingSnapshot) {
+            this.logger.debug(this.id + ': Skipping load-more since already loading a chunk!');
+            return EMPTY;
+        }
+        const token = this._expectedChunkToken;
+        if (token && token.length > 0) {
+            return this.fetchNextChunk(token);
+        }
+        else {
+            this.logger.debug(this.id + ': Cannot load more data, since no more data available.');
+            return EMPTY;
+        }
     }
     /***************************************************************************
      *                                                                         *
-     * Public API                                                              *
-     *                                                                         *
-     **************************************************************************/
-    /***************************************************************************
-     *                                                                         *
-     * Private methods                                                         *
+     * Protect API                                                             *
      *                                                                         *
      **************************************************************************/
-    createEvent(requiredFilters, currentFilters) {
-        return new RequiredFilterContextChangedEvent(requiredFilters, currentFilters, this.allRequiredFiltersPresent(requiredFilters, currentFilters));
-    }
-    allRequiredFiltersPresent(requiredFilters, currentFilters) {
-        if (requiredFilters) {
-            return requiredFilters.some((filterGroup) => this.hasAllFilters(filterGroup, currentFilters));
-        }
-        return true;
+    clearAll(silent = false) {
+        super.clearAll(silent);
+        this._chunkCache.clear();
+        this._hasMoreData.next(true);
+        this._expectedChunkToken = undefined;
     }
-    hasAllFilters(requiredFilters, currentFilters) {
-        const requiredFilterSet = new Set(requiredFilters);
-        const currentFilterKeySet = new Set(currentFilters.map((f) => f.key));
-        const areAllRequiredFiltersPresent = requiredFilters.every((required) => currentFilterKeySet.has(required));
-        const areAllRequiredFiltersHaveValue = currentFilters
-            .filter((f) => requiredFilterSet.has(f.key))
-            .every((currentFilter) => Filter.hasValue(currentFilter));
-        return areAllRequiredFiltersPresent && areAllRequiredFiltersHaveValue;
+    reloadInternal() {
+        // Since continuable data-contexts are appending data,
+        // we need to clear it for a reload.
+        this.clearAll(true);
+        return this.fetchNextChunk(undefined);
     }
-}
-
-class AutoStartSpec {
-    static asap(sort) {
-        return new AutoStartSpec(null, sort);
+    fetchNextChunk(nextToken) {
+        const subject = new Subject();
+        nextToken = nextToken ? nextToken : undefined;
+        if (this._chunkCache.has(nextToken)) {
+            this.logger.debug(this.id +
+                ': Skipping fetching chunk for token "' +
+                nextToken +
+                '" since its already in observable cache.');
+            subject.complete();
+        }
+        else {
+            this.onLoading();
+            this._chunkCache.add(nextToken);
+            this.dataSource
+                .findAllContinuable(new TokenChunkRequest(nextToken, this.filter.filtersSnapshot, this.sort.sortsSnapshot, this.chunkSize))
+                .pipe(first())
+                .subscribe({
+                next: (chunk) => {
+                    this.onChunkFetched(chunk);
+                    subject.next(chunk);
+                },
+                error: (err) => {
+                    this.onChunkFetchError(err);
+                    subject.error(err);
+                },
+            });
+        }
+        return subject.pipe(take(1));
     }
-    static requireFiltersAll(filters, sort) {
-        return AutoStartSpec.requireFilters([filters], sort);
+    onChunkFetched(chunk) {
+        this.logger.debug(this.id + ': Got next chunk data:', chunk);
+        this._hasMoreData.next(chunk.hasMore);
+        this.updateChunkSize(chunk.chunkSize ?? chunk.maxChunkSize, false);
+        this.populateChunkData(chunk);
+        this.onIdle();
     }
-    static requireFiltersAny(filters, sort) {
-        const separateFilterArrays = filters.map((singleFilter) => [singleFilter]);
-        return AutoStartSpec.requireFilters(separateFilterArrays, sort);
+    onChunkFetchError(err) {
+        this.onError(err);
+        this.logger.error(this.id + ': Failed to query data', err);
+        this.clearData();
+        this.setTotal(0);
     }
-    static requireFilters(filters, sort) {
-        return new AutoStartSpec(filters, sort);
+    /**
+     * Load the data from the given page into the current data context
+     */
+    populateChunkData(chunk) {
+        if (this.areTokenEqual(chunk.continuationToken, this._expectedChunkToken)) {
+            try {
+                this.setTotal(chunk.total);
+                if (chunk.continuationToken) {
+                    // We had previous chunks so append to current data.
+                    this.appendData(chunk.content);
+                }
+                else {
+                    this.setData(chunk.content);
+                }
+            }
+            catch (err) {
+                this.onError(err);
+                this.logger.error(this.id + ': Failed to populate data with chunk', chunk, err);
+            }
+            this._expectedChunkToken = chunk.nextContinuationToken;
+        }
+        else {
+            this.logger.warn(this.id +
+                ': Discarding continuable chunk (items: ' +
+                chunk.content.length +
+                ', token: ' +
+                chunk.continuationToken +
+                ' )' +
+                ' as it does not match the expected contiunation-token: ' +
+                this._expectedChunkToken);
+        }
     }
-    constructor(requiredFilters, initialSort) {
-        this.requiredFilters = requiredFilters;
-        this.initialSort = initialSort;
+    areTokenEqual(token1, token2) {
+        if (!token1 && !token2) {
+            return true;
+        }
+        return token1 === token2;
     }
 }
-class DataContextAutoStarter extends DataContextLifeCycleBinding {
+
+class DataContextActivePage extends DataContextBase {
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(dataContext, _autoStartSpec) {
-        super(dataContext);
-        this._autoStartSpec = _autoStartSpec;
+    constructor(dataSource, pageSize, indexFn, localApply, localSort) {
+        super(dataSource, indexFn, localApply, localSort);
         /***************************************************************************
          *                                                                         *
          * Fields                                                                  *
          *                                                                         *
          **************************************************************************/
-        this.logger = LoggerFactory.getLogger(this.constructor.name);
-        // eslint-disable-next-line eqeqeq
-        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();
+        this.actlogger = LoggerFactory.getLogger(this.constructor.name);
+        this._page = new BehaviorSubject(new PageRequest(0, pageSize));
     }
     /***************************************************************************
      *                                                                         *
-     * Public API                                                              *
+     * Properties                                                              *
      *                                                                         *
      **************************************************************************/
-    subscribe() {
-        const hasRequiredFilters = !!this._autoStartConditionFulfilled$;
-        if (hasRequiredFilters) {
-            const startedTrue$ = this._dataContext.isStarted$.pipe(filter((t) => t));
-            this._subscription = this._autoStartConditionFulfilled$
-                .pipe(takeUntil(startedTrue$), tap((fulfilled) => this.logger.debug(`Got fulfilled event: ${fulfilled}`)), filter((fulfilled) => !!fulfilled))
-                .subscribe(() => this.startDataContext());
-        }
+    get dataSource() {
+        return super.dataSource;
     }
-    /***************************************************************************
-     *                                                                         *
-     * Private methods                                                         *
-     *                                                                         *
-     **************************************************************************/
-    buildRequiredFilterConditionObservable() {
-        return new RequiredFilterEvaluator(this._dataContext.filter, this._autoStartSpec.requiredFilters).context$.pipe(map((event) => event.isValid));
+    get page() {
+        return this._page.asObservable();
     }
-    startDataContext() {
-        this.logger.debug(this._dataContext.id + ': Auto starting ...');
-        this._dataContext.start(this._autoStartSpec.initialSort);
+    get pageSnapshot() {
+        return this._page.getValue();
     }
-}
-
-class DeepPartialPatcher {
     /***************************************************************************
      *                                                                         *
      * Public API                                                              *
      *                                                                         *
      **************************************************************************/
     /**
-     * All modified parts are deep cloned so the original is never modified.
+     * Set the current page index and reload.
+     * @param pageIndex
      */
-    static patchDeepClone(original, patch) {
-        return this.mapReducePatch(original, patch);
+    setActiveIndex(pageIndex) {
+        this.setActivePage(new PageRequest(pageIndex, this.pageSnapshot.size));
     }
     /**
-     * Returns a shallow copy of the original, but may modify nested objects.
+     * Sets the current page index / size and reload.
      */
-    static patchShallowCopy(original, patch) {
-        const shallowCopy = { ...original };
-        return this.patchOriginal(shallowCopy, patch);
+    setActivePage(request) {
+        if (!request) {
+            throw new Error(this.id + ': Setting page PageRequest must not be null!');
+        }
+        let hasChange = false;
+        const page = this.pageSnapshot;
+        if (page.index !== request.index) {
+            hasChange = true;
+        }
+        else if (page.size !== request.size) {
+            hasChange = true;
+        }
+        if (hasChange) {
+            this._page.next(request);
+            this.reload('setActivePage');
+        }
     }
-    /**
-     * Modifies the original directly. Returns a reference to the original object.
-     */
-    static patchOriginal(original, patch) {
-        const result = original;
-        for (const key in patch) {
-            if (patch[key] && typeof patch[key] === 'object' && !Array.isArray(patch[key])) {
-                // Recursively apply patch for nested objects
-                result[key] = DeepPartialPatcher.patchOriginal(result[key] ?? new Object(patch[key]), patch[key]);
-            }
-            else {
-                // Apply patch for non-object fields
-                result[key] = patch[key];
-            }
+    close() {
+        super.close();
+        if (this._activePageChangedSub) {
+            this._activePageChangedSub.unsubscribe();
         }
-        return result;
     }
     /***************************************************************************
      *                                                                         *
-     * Private methods                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    clearAll() {
+        super.clearAll();
+        this.setActiveIndex(0);
+    }
+    reloadInternal() {
+        if (this._activePageLoad) {
+            // Cancel previous pending request
+            this._activePageLoad.unsubscribe();
+        }
+        const subject = new Subject();
+        this.onLoading();
+        const page = this.pageSnapshot;
+        const pageRequest = new Pageable(page.index, page.size, this.sort.sortsSnapshot);
+        this._activePageLoad = this.dataSource
+            .findAllPaged(pageRequest, this.filter.filtersSnapshot)
+            .pipe(first())
+            .subscribe((success) => {
+            this.setTotal(success.totalElements);
+            this.setData(success.content);
+            subject.next(success);
+            this.onIdle();
+        }, (err) => {
+            this.clearData();
+            this.actlogger.error(this.id + ': Failed to query data', err);
+            subject.error(err);
+            this.onError(err);
+        }, () => {
+            this.onIdle();
+        });
+        return subject.pipe(first());
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Event handlers                                                          *
      *                                                                         *
      **************************************************************************/
-    static mapReducePatch(obj, pobj) {
-        return Object.entries(obj).reduce((acc, [key, value]) => {
-            if (!(key in pobj)) {
-                return { ...acc, [key]: value }; // If key doesn't exist in pobj, copy the value from obj
-            }
-            if (typeof pobj[key] === 'object' && pobj[key] !== null && !Array.isArray(pobj[key])) {
-                // If it's an object (but not an array), recursively apply rmap
-                return { ...acc, [key]: this.mapReducePatch(obj[key], pobj[key]) };
-            }
-            else {
-                // Otherwise, copy the value from pobj
-                return { ...acc, [key]: pobj[key] };
-            }
-        }, {});
+    /**
+     * Occurs when the sorts property has changed.
+     */
+    onSortsChanged(sorts) {
+        this.setActiveIndex(0);
+        super.onSortsChanged(sorts);
+    }
+    /**
+     * Occurs when the filtersSnapshot property has changed.
+     */
+    onFiltersChanged(filters) {
+        this.setActiveIndex(0);
+        super.onFiltersChanged(filters);
     }
 }
 
-class DataContextSourceEventBinding extends DataContextLifeCycleBinding {
+class MatTableDataContextBindingBuilder {
     /***************************************************************************
      *                                                                         *
-     * Constructor                                                             *
+     * Static Builder                                                          *
      *                                                                         *
      **************************************************************************/
-    constructor(dataContext, dataApi, reloadOnChanges) {
-        super(dataContext);
-        this.dataApi = dataApi;
-        this.reloadOnChanges = reloadOnChanges;
-        this.subscribe();
+    static start(dataContext$) {
+        return new MatTableDataContextBindingBuilder(dataContext$);
+    }
+    constructor(dataContext$) {
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.logger = LoggerFactory.getLogger(this.constructor.name);
+        this._dataContext$ = dataContext$;
     }
     /***************************************************************************
      *                                                                         *
-     * Internal Impl                                                           *
+     * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    subscribe() {
-        this._subscription = this.dataApi.dataChanged.subscribe((event) => this.handleDataChangeEvent(event));
+    withSorts(sorts$) {
+        this._sorts$ = sorts$;
+        return this;
+    }
+    withPaginator(paginator$) {
+        this._matPaginator$ = paginator$;
+        return this;
+    }
+    withContinuator(continuator$) {
+        this._continuator$ = continuator$;
+        return this;
+    }
+    bindUntil(destroy$) {
+        return new MatTableDataContextBinding(this._dataContext$, this._sorts$, this._matPaginator$, this._continuator$, destroy$);
+    }
+}
+class MatTableDataContextBinding {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(_dataContext$, _matSorts$, _matPaginator$, _continuator$, destroy$) {
+        this._dataContext$ = _dataContext$;
+        this._matSorts$ = _matSorts$;
+        this._matPaginator$ = _matPaginator$;
+        this._continuator$ = _continuator$;
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.logger = LoggerFactory.getLogger(this.constructor.name);
+        this.subscribeUntil(destroy$);
     }
     /***************************************************************************
      *                                                                         *
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
-    handleDataChangeEvent(event) {
-        if (this.reloadOnChanges && this.isReloadDesirable(event)) {
-            this._dataContext.reload('DataSourceChangeEvent');
-            return;
-        }
-        // We might also be able to perform deletions locally, and avoid reload data
-        if (event.modified) {
-            this.updateExisting(event.modified);
+    subscribeUntil(destroy$) {
+        if (this._matSorts$) {
+            this.bindMatSortsToDataContextUntil(this._matSorts$, destroy$);
+            this.bindDataContextToMatSortsUntil(this._matSorts$, destroy$);
         }
-        if (event.patches) {
-            this.updateExisting(this.buildPatchUpdates(event.patches));
+        if (this._matPaginator$) {
+            this.bindPaginatorUntil(this._matPaginator$, destroy$);
         }
-    }
-    updateExisting(entities) {
-        if (entities.length > 0) {
-            this._dataContext.update(entities);
+        if (this._continuator$) {
+            this.bindContinuatorUntil(this._continuator$, destroy$);
         }
     }
-    // TODO: check logic and add correct return type (should it coerce to boolean?).
-    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-    isReloadDesirable(event) {
-        return event.unknownChanges || event.created || event.deletedIds;
-    }
-    buildPatchUpdates(patches) {
-        return patches
-            .map((patch) => {
-            const existing = this._dataContext.findById(patch.entityId);
-            if (existing) {
-                return DeepPartialPatcher.patchShallowCopy(existing, patch.patch);
+    bindDataContextToMatSortsUntil(matSorts$, destroy$) {
+        const dcSorts$ = this._dataContext$.pipe(filter((dc) => !!dc), switchMap$1((dc) => dc.sort.sorts));
+        combineLatest([dcSorts$, matSorts$])
+            .pipe(takeUntil(destroy$))
+            .subscribe(([dcSorts, matSorts]) => {
+            if (dcSorts.length >= 1) {
+                // At least one sort active
+                const sort = dcSorts[0];
+                this.updateMatSorts(sort, matSorts);
             }
             else {
-                return null;
+                // No sort active
+                this.updateMatSorts(Sort.NONE, matSorts);
             }
-        })
-            .filter((update) => !!update);
+        });
     }
-}
-
-class DataSourceEntityPatch {
-    constructor(entityId, patch) {
-        this.entityId = entityId;
-        this.patch = patch;
+    updateMatSorts(dcSort, matSorts) {
+        const active = dcSort.prop;
+        const direction = this.toMatDirection(dcSort.dir);
+        matSorts.forEach((matSort) => this.updateMatSort(active, direction, matSort));
     }
-}
-/**
- * Notifies about changes in a DataSource.
- */
-class DataSourceChangeEvent {
-    static unknownChanges() {
-        return new DataSourceChangeEvent(null, null, null, null);
+    updateMatSort(activeProp, direction, matSort) {
+        if (activeProp) {
+            if (!matSort.sortables.has(activeProp)) {
+                // The current sort property is not part of this MatSort.
+                activeProp = Sort.NONE.prop; // Force no sort in this mat context
+            }
+        }
+        if (matSort.active !== activeProp || matSort.direction !== direction) {
+            // We do only update matSort when there was a real change
+            matSort.active = activeProp;
+            matSort.direction = direction;
+            matSort._stateChanges.next();
+        }
     }
-    static deleted(ids) {
-        return new DataSourceChangeEvent(ids, null, null, null);
+    bindMatSortsToDataContextUntil(sorts$, destroy$) {
+        const sortChanges$ = sorts$.pipe(mergeMap((sorts) => merge(...sorts.map((s) => s.sortChange))), map((matSort) => {
+            return new Sort(matSort.active, this.fromMatDirection(matSort.direction));
+        }));
+        combineLatest([this._dataContext$, sortChanges$])
+            .pipe(takeUntil(destroy$))
+            .subscribe(([dc, sortRequest]) => {
+            if (dc) {
+                dc.sort.updateSort(sortRequest);
+            }
+        });
     }
-    static modified(modified) {
-        return new DataSourceChangeEvent(null, modified, null, null);
+    bindPaginatorUntil(paginator$, destroy$) {
+        const pageRequest$ = paginator$.pipe(filter((paginator) => !!paginator), switchMap$1((paginator) => paginator.page), map((pageEvent) => new PageRequest(pageEvent.pageIndex, pageEvent.pageSize)));
+        combineLatest([this._dataContext$, pageRequest$])
+            .pipe(takeUntil(destroy$))
+            .subscribe(([dc, pageRequest]) => {
+            if (dc) {
+                if (isActivePagedDataContext(dc)) {
+                    const pagedDc = dc;
+                    pagedDc.setActivePage(pageRequest);
+                }
+                else {
+                    this.logger.warn('Can not bind the given paginator to the given data-context,' +
+                        ' as the datacontext does not support pagination!', dc);
+                }
+            }
+        });
     }
-    static created(created) {
-        return new DataSourceChangeEvent(null, null, created, null);
+    bindContinuatorUntil(continuator$, destroy$) {
+        const chunkSizeChange$ = continuator$.pipe(filter((continuator) => !!continuator), switchMap$1((continuator) => outputToObservable(continuator.chunkSizeChange)));
+        combineLatest([this._dataContext$, chunkSizeChange$])
+            .pipe(takeUntil(destroy$))
+            .subscribe(([dc, newChunkSize]) => {
+            if (dc) {
+                if (isContinuableDataContext(dc)) {
+                    const continuableDc = dc;
+                    continuableDc.chunkSize = newChunkSize;
+                }
+                else {
+                    this.logger.warn('Can not bind the given Continuator to the given data-context,' +
+                        ' as the DataContext does not support continuation!', dc);
+                }
+            }
+        });
     }
-    static patched(patches) {
-        return new DataSourceChangeEvent(null, null, null, patches);
+    toMatDirection(direction) {
+        return direction;
     }
-    constructor(deletedIds, modified, created, patches) {
-        this.deletedIds = deletedIds;
-        this.modified = modified;
-        this.created = created;
-        this.patches = patches;
-        this.unknownChanges = !deletedIds && !modified && !created && !patches;
+    fromMatDirection(matSortDirection) {
+        return matSortDirection;
     }
 }
 
-class EntityIdUtil {
-    static getId(entity, idProperty) {
-        if (entity && idProperty) {
-            if (typeof entity === 'object') {
-                return entity?.[idProperty];
-            }
-        }
-        return entity;
-    }
-    static extractIdFnOrProperty(idPropertyOrExtractFn) {
-        if (typeof idPropertyOrExtractFn === 'string') {
-            return EntityIdUtil.extractIdFn(idPropertyOrExtractFn);
-        }
-        else if (typeof idPropertyOrExtractFn === 'function') {
-            return idPropertyOrExtractFn;
-        }
-        else if (idPropertyOrExtractFn === null || idPropertyOrExtractFn === undefined) {
-            return EntityIdUtil.extractIdFn(null);
-        }
-        else {
-            throw new Error('Invalid idPropertyOrExtractFn');
+/**
+ * Allows making any kind of subscription which will be automatically unsubscribed
+ * upon data context closing/cleanup.
+ */
+class DataContextLifeCycleBinding {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(_dataContext) {
+        this._dataContext = _dataContext;
+        // eslint-disable-next-line eqeqeq
+        if (_dataContext == null) {
+            throw new Error('dataContext must not be null!');
         }
+        this._dataContext.data.subscribe({
+            complete: () => this.unsubscribe(),
+        });
     }
-    static extractIdFn(idProperty) {
-        return (entity) => EntityIdUtil.getId(entity, idProperty);
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    unsubscribe() {
+        if (this._subscription) {
+            this._subscription.unsubscribe();
+            this._subscription = null;
+        }
     }
 }
 
-class DataSourceBase {
+class RequiredFilterContextChangedEvent {
+    constructor(requiredFilters, currentFilters, isValid) {
+        this.requiredFilters = requiredFilters;
+        this.currentFilters = currentFilters;
+        this.isValid = isValid;
+    }
+}
+class RequiredFilterEvaluator {
     /***************************************************************************
      *                                                                         *
-     * Constructor                                                             *
+     * Fields                                                                  *
      *                                                                         *
      **************************************************************************/
-    constructor(propertyOrIdExtractor) {
-        /***************************************************************************
-         *                                                                         *
-         * Fields                                                                  *
-         *                                                                         *
-         **************************************************************************/
-        this.dataChangeEvents$ = new Subject();
-        this.extractIdFn = EntityIdUtil.extractIdFnOrProperty(propertyOrIdExtractor);
+    constructor(filterContext, requiredFilters) {
+        this._requiredFilters = new BehaviorSubject([]);
+        // eslint-disable-next-line eqeqeq
+        if (filterContext == null) {
+            throw new Error('filterContext must not be null!');
+        }
+        this._filterContext = filterContext;
+        if (requiredFilters) {
+            this._requiredFilters.next(requiredFilters);
+        }
+        this.context$ = combineLatest([this._requiredFilters, this._filterContext.filters]).pipe(map(([required, currentFilters]) => this.createEvent(requiredFilters, currentFilters)));
     }
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
      *                                                                         *
      **************************************************************************/
-    get dataChanged() {
-        return this.dataChangeEvents$.asObservable();
+    get filterContext() {
+        return this._filterContext;
+    }
+    get requiredFilters$() {
+        return this._requiredFilters.asObservable();
+    }
+    get requiredFilters() {
+        return this._requiredFilters.getValue();
     }
     /***************************************************************************
      *                                                                         *
      * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    publishChangeEvent(e) {
-        this.dataChangeEvents$.next(e);
-    }
-    getId(entity) {
-        return this.extractIdFn(entity);
-    }
-}
-
-class SortUtil {
-    static toggleDir(dir) {
-        if (dir === 'asc') {
-            return 'desc';
-        }
-        else {
-            return 'asc';
-        }
-    }
-    static toggleSort(sort) {
-        return new Sort(sort.prop, SortUtil.toggleDir(sort.dir));
-    }
-    static sortData(data, sorts, prefix) {
-        if (sorts && sorts.length > 0) {
-            const copy = [...data];
-            const sortFields = sorts.map((s) => (s.dir === 'desc' ? '-' : '') + SortUtil.propertyPath(s, prefix));
-            return copy.sort(ComparatorBuilder.fieldSort(...sortFields));
-        }
-        else {
-            return data;
-        }
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    createEvent(requiredFilters, currentFilters) {
+        return new RequiredFilterContextChangedEvent(requiredFilters, currentFilters, this.allRequiredFiltersPresent(requiredFilters, currentFilters));
     }
-    /**
-     * Checks if the two arrays have all content references in the exact same order.
-     * @param data
-     * @param other
-     */
-    static equalsExactRefs(data, other) {
-        // eslint-disable-next-line eqeqeq
-        if (data.length == other.length) {
-            for (let i = 0; i < data.length; i++) {
-                // eslint-disable-next-line eqeqeq
-                if (data[i] != other[i]) {
-                    return false;
-                }
-            }
-            return true;
+    allRequiredFiltersPresent(requiredFilters, currentFilters) {
+        if (requiredFilters) {
+            return requiredFilters.some((filterGroup) => this.hasAllFilters(filterGroup, currentFilters));
         }
-        return false;
+        return true;
     }
-    static propertyPath(sort, prefix) {
-        if (prefix) {
-            return prefix + '.' + sort.prop;
-        }
-        else {
-            return sort.prop;
-        }
+    hasAllFilters(requiredFilters, currentFilters) {
+        const requiredFilterSet = new Set(requiredFilters);
+        const currentFilterKeySet = new Set(currentFilters.map((f) => f.key));
+        const areAllRequiredFiltersPresent = requiredFilters.every((required) => currentFilterKeySet.has(required));
+        const areAllRequiredFiltersHaveValue = currentFilters
+            .filter((f) => requiredFilterSet.has(f.key))
+            .every((currentFilter) => Filter.hasValue(currentFilter));
+        return areAllRequiredFiltersPresent && areAllRequiredFiltersHaveValue;
     }
 }
 
-class MapUtils {
-    static toDistinctMap(values, keyFn) {
-        return values.reduce((map, value) => {
-            map.set(keyFn(value), value);
-            return map;
-        }, new Map());
+class AutoStartSpec {
+    static asap(sort) {
+        return new AutoStartSpec(null, sort);
     }
-    static groupByKey(values, keyFn) {
-        const groups = new Map();
-        values.forEach((value) => {
-            const key = keyFn(value);
-            let group = groups.get(key);
-            if (!group) {
-                group = [];
-                groups.set(key, group);
-            }
-            group.push(value);
-        });
-        return groups;
+    static requireFiltersAll(filters, sort) {
+        return AutoStartSpec.requireFilters([filters], sort);
     }
-    static mapValue(map, valueMapFn) {
-        const newMap = new Map();
-        Array.from(map.entries()).forEach(([key, value]) => newMap.set(key, valueMapFn(value)));
-        return newMap;
+    static requireFiltersAny(filters, sort) {
+        const separateFilterArrays = filters.map((singleFilter) => [singleFilter]);
+        return AutoStartSpec.requireFilters(separateFilterArrays, sort);
     }
-}
-
-class LocalListDataSource extends DataSourceBase {
-    /***************************************************************************
-     *                                                                         *
-     * Static Builder                                                          *
-     *                                                                         *
-     **************************************************************************/
-    /**
-     * Creates an empty local list data-source.
-     * You can set / modify data by using the data property.
-     * @param idPropertyOrExtractor
-     * @param localSort
-     * @param localFilter
-     */
-    static empty(idPropertyOrExtractor, localSort, localFilter) {
-        return this.from([], idPropertyOrExtractor, localSort, localFilter);
+    static requireFilters(filters, sort) {
+        return new AutoStartSpec(filters, sort);
     }
-    static from(localData, idPropertyOrExtractor, localSort, localFilter) {
-        if (idPropertyOrExtractor === null) {
-            idPropertyOrExtractor = LocalListDataSource.guessIdProperty(localData);
-        }
-        return new LocalListDataSource(localData, localSort, localFilter, idPropertyOrExtractor);
+    constructor(requiredFilters, initialSort) {
+        this.requiredFilters = requiredFilters;
+        this.initialSort = initialSort;
     }
+}
+class DataContextAutoStarter extends DataContextLifeCycleBinding {
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(localData, localSort, localFilter, idPropertyOrExtractor) {
-        super(idPropertyOrExtractor);
+    constructor(dataContext, _autoStartSpec) {
+        super(dataContext);
+        this._autoStartSpec = _autoStartSpec;
         /***************************************************************************
          *                                                                         *
          * Fields                                                                  *
          *                                                                         *
          **************************************************************************/
         this.logger = LoggerFactory.getLogger(this.constructor.name);
-        this.data$ = new BehaviorSubject([]);
-        if (!localData) {
-            throw new Error('localData must not be null!');
+        // eslint-disable-next-line eqeqeq
+        if (_autoStartSpec == null) {
+            throw new Error('autoStartSpec must not be null!');
         }
-        this.localSort = localSort || SortUtil.sortData;
-        this.localFilter = localFilter || FilterUtil.filterData;
-        this.data = localData;
+        if (_autoStartSpec.requiredFilters) {
+            this._autoStartConditionFulfilled$ = this.buildRequiredFilterConditionObservable();
+        }
+        else {
+            // no condition defined, try to start immediately
+            this.startDataContext();
+        }
+        this.subscribe();
     }
     /***************************************************************************
      *                                                                         *
-     * Properties                                                              *
+     * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    get data() {
-        return this.data$.getValue();
-    }
-    set data(data) {
-        this.replaceAll(data);
+    subscribe() {
+        const hasRequiredFilters = !!this._autoStartConditionFulfilled$;
+        if (hasRequiredFilters) {
+            const startedTrue$ = this._dataContext.isStarted$.pipe(filter((t) => t));
+            this._subscription = this._autoStartConditionFulfilled$
+                .pipe(takeUntil(startedTrue$), tap((fulfilled) => this.logger.debug(`Got fulfilled event: ${fulfilled}`)), filter((fulfilled) => !!fulfilled))
+                .subscribe(() => this.startDataContext());
+        }
     }
     /***************************************************************************
      *                                                                         *
-     * IDataSource API                                                         *
+     * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
-    findById(id) {
-        if (id === undefined || id === null) {
-            throw new Error('findById: id argument required!');
-        }
-        const found = this.data.find((d) => this.getId(d) === id);
-        if (found) {
-            return of(found);
-        }
-        else {
-            return throwError(() => new Error("Could not find local entity by id: '" + id + "'"));
-        }
-    }
-    findByIds(ids) {
-        if (ids === undefined || ids === null) {
-            throw new Error('findByIds: ids array argument required!');
-        }
-        const desiredIds = new Set(ids);
-        return of(this.data.filter((d) => desiredIds.has(this.getId(d))));
+    buildRequiredFilterConditionObservable() {
+        return new RequiredFilterEvaluator(this._dataContext.filter, this._autoStartSpec.requiredFilters).context$.pipe(map((event) => event.isValid));
     }
-    findAllFiltered(filters, sorts) {
-        return of(this.data).pipe(map((data) => this.localFilter(data, filters)), map((data) => this.localSort(data, sorts)));
+    startDataContext() {
+        this.logger.debug(this._dataContext.id + ': Auto starting ...');
+        this._dataContext.start(this._autoStartSpec.initialSort);
     }
+}
+
+class DeepPartialPatcher {
     /***************************************************************************
      *                                                                         *
      * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    replaceAll(data) {
-        this.silentReplaceData(data);
-        this.publishChangeEvent(DataSourceChangeEvent.unknownChanges());
-    }
-    delete(entity) {
-        this.deleteAll([entity]);
-    }
-    deleteAll(toDelete) {
-        if (toDelete?.length > 0) {
-            return this.deleteAllById(toDelete.map((e) => this.getId(e)));
-        }
-    }
-    deleteAllById(idsToDelete) {
-        if (idsToDelete?.length > 0) {
-            const existing = this.data;
-            const idsToDeleteSet = new Set(idsToDelete);
-            this.silentReplaceData(existing.filter((e) => !idsToDeleteSet.has(this.getId(e))));
-            this.publishChangeEvent(DataSourceChangeEvent.deleted(idsToDelete));
-        }
-    }
-    saveAll(toSave) {
-        const idDataMap = this.buildIdDataMap(this.data);
-        const createdEntities = [];
-        const modifiedEntities = [];
-        toSave.forEach((entity) => {
-            const id = this.getId(entity);
-            if (!idDataMap.has(id)) {
-                createdEntities.push(entity);
-            }
-            else {
-                modifiedEntities.push(entity);
-            }
-            idDataMap.set(id, entity);
-        });
-        this.silentReplaceData(Array.from(idDataMap.values()));
-        this.publishChanges(createdEntities, modifiedEntities);
+    /**
+     * All modified parts are deep cloned so the original is never modified.
+     */
+    static patchDeepClone(original, patch) {
+        return this.mapReducePatch(original, patch);
     }
-    save(entity, index) {
-        this.saveAtIndex(entity, index);
+    /**
+     * Returns a shallow copy of the original, but may modify nested objects.
+     */
+    static patchShallowCopy(original, patch) {
+        const shallowCopy = { ...original };
+        return this.patchOriginal(shallowCopy, patch);
     }
-    saveAtIndex(entity, index) {
-        const id = this.getId(entity);
-        const newData = [...this.data];
-        const existingIndex = newData.findIndex((entity) => this.getId(entity) === id);
-        let created = false;
-        if (existingIndex === -1) {
-            if (index !== null) {
-                newData.splice(index, 0, entity);
+    /**
+     * Modifies the original directly. Returns a reference to the original object.
+     */
+    static patchOriginal(original, patch) {
+        const result = original;
+        for (const key in patch) {
+            if (patch[key] && typeof patch[key] === 'object' && !Array.isArray(patch[key])) {
+                // Recursively apply patch for nested objects
+                result[key] = DeepPartialPatcher.patchOriginal(result[key] ?? new Object(patch[key]), patch[key]);
             }
             else {
-                newData.push(entity);
+                // Apply patch for non-object fields
+                result[key] = patch[key];
             }
-            created = true;
-        }
-        else {
-            newData[existingIndex] = entity;
         }
-        this.silentReplaceData(newData);
-        this.publishChangeEvent(created ? DataSourceChangeEvent.created([entity]) : DataSourceChangeEvent.modified([entity]));
+        return result;
     }
     /***************************************************************************
      *                                                                         *
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
-    buildIdDataMap(data) {
-        return MapUtils.toDistinctMap(data, (value) => this.getId(value));
-    }
-    silentReplaceData(newData) {
-        this.data$.next(newData);
-    }
-    static guessIdProperty(localData) {
-        const log = LoggerFactory.getLogger('LocalListDataSource');
-        if (localData && localData.length > 0) {
-            const sample = localData[0];
-            if (typeof sample === 'object') {
-                if (Object.prototype.hasOwnProperty.call(sample, 'id')) {
-                    log.warn('DataSource without defined id-property => autodetected property id-property as "id"');
-                    return 'id'; // Use id
-                }
-                else {
-                    log.warn('Local DataSource created without defined id-property and objects. Using object equality!');
-                }
+    static mapReducePatch(obj, pobj) {
+        return Object.entries(obj).reduce((acc, [key, value]) => {
+            if (!(key in pobj)) {
+                return { ...acc, [key]: value }; // If key doesn't exist in pobj, copy the value from obj
             }
-        }
-        return null; // Use value as id if scalar
-    }
-    publishChanges(createdEntities, modifiedEntities) {
-        if (createdEntities.length > 0) {
-            this.publishChangeEvent(DataSourceChangeEvent.created(createdEntities));
-        }
-        if (modifiedEntities.length > 0) {
-            this.publishChangeEvent(DataSourceChangeEvent.modified(modifiedEntities));
-        }
+            if (typeof pobj[key] === 'object' && pobj[key] !== null && !Array.isArray(pobj[key])) {
+                // If it's an object (but not an array), recursively apply rmap
+                return { ...acc, [key]: this.mapReducePatch(obj[key], pobj[key]) };
+            }
+            else {
+                // Otherwise, copy the value from pobj
+                return { ...acc, [key]: pobj[key] };
+            }
+        }, {});
     }
 }
 
-class LocalPagedDataSource {
-    /***************************************************************************
-     *                                                                         *
-     * Static Builder                                                          *
-     *                                                                         *
-     **************************************************************************/
-    /**
-     * Creates an empty local list data-source.
-     * You can set / modify data by using the data property.
-     * @param idProperty
-     * @param localSort
-     * @param localFilter
-     */
-    static empty(idProperty, localSort, localFilter) {
-        return LocalPagedDataSource.of(LocalListDataSource.empty(idProperty, localSort, localFilter));
-    }
-    static of(listDataSource) {
-        return new LocalPagedDataSource(listDataSource);
-    }
+class DataContextSourceEventBinding extends DataContextLifeCycleBinding {
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(listDataSource) {
-        if (!listDataSource) {
-            throw new Error('listDataSource must not be null!');
-        }
-        this.localListFetcher = listDataSource;
+    constructor(dataContext, dataApi, reloadOnChanges) {
+        super(dataContext);
+        this.dataApi = dataApi;
+        this.reloadOnChanges = reloadOnChanges;
+        this.subscribe();
     }
     /***************************************************************************
      *                                                                         *
-     * Public API                                                              *
+     * Internal Impl                                                           *
      *                                                                         *
      **************************************************************************/
-    get dataChanged() {
-        return this.localListFetcher.dataChanged;
-    }
-    findById(id) {
-        return this.localListFetcher.findById(id);
-    }
-    findByIds(ids) {
-        return this.localListFetcher.findByIds(ids);
-    }
-    findAllPaged(pageable, filters) {
-        return this.localListFetcher
-            .findAllFiltered(filters, pageable.sorts)
-            .pipe(map((data) => this.pageSlice(pageable, data)));
-    }
-    getId(entity) {
-        return this.localListFetcher.getId(entity);
+    subscribe() {
+        this._subscription = this.dataApi.dataChanged.subscribe((event) => this.handleDataChangeEvent(event));
     }
     /***************************************************************************
      *                                                                         *
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
-    pageSlice(pageable, data) {
-        let page;
-        if (data) {
-            const start = pageable.page * pageable.size;
-            const end = start + pageable.size;
-            const slice = data.slice(start, end);
-            page = Page.fromPage(slice, data.length, pageable);
+    handleDataChangeEvent(event) {
+        if (this.reloadOnChanges && this.isReloadDesirable(event)) {
+            this._dataContext.reload('DataSourceChangeEvent');
+            return;
         }
-        else {
-            page = Page.empty();
+        // We might also be able to perform deletions locally, and avoid reload data
+        if (event.modified) {
+            this.updateExisting(event.modified);
         }
-        return page;
+        if (event.patches) {
+            this.updateExisting(this.buildPatchUpdates(event.patches));
+        }
+    }
+    updateExisting(entities) {
+        if (entities.length > 0) {
+            this._dataContext.update(entities);
+        }
+    }
+    // TODO: check logic and add correct return type (should it coerce to boolean?).
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    isReloadDesirable(event) {
+        return event.unknownChanges || event.created || event.deletedIds;
+    }
+    buildPatchUpdates(patches) {
+        return patches
+            .map((patch) => {
+            const existing = this._dataContext.findById(patch.entityId);
+            if (existing) {
+                return DeepPartialPatcher.patchShallowCopy(existing, patch.patch);
+            }
+            else {
+                return null;
+            }
+        })
+            .filter((update) => !!update);
     }
 }
 
@@ -23630,6 +23622,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 args: [ElderSelectOptionComponent]
             }] } });
 
+const DEFAULT_DEBOUNCE_TIME = 150;
 class ElderAutocompleteDirective {
     /***************************************************************************
      *                                                                         *
@@ -23644,11 +23637,10 @@ class ElderAutocompleteDirective {
          *                                                                         *
          **************************************************************************/
         this.logger = LoggerFactory.getLogger(this.constructor.name);
-        this.ignoreKeys = ['ArrowRight', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'Tab'];
-        this.inputKeyup$ = new Subject();
         this.queryFilter = 'query';
         this.filters = [];
         this.sorts = [];
+        this.userTextInputChanged$ = new Subject();
         this.destroyMatAutoBinding$ = new Subject();
         this.destroy$ = new Subject();
     }
@@ -23657,11 +23649,9 @@ class ElderAutocompleteDirective {
      * Host Listener                                                           *
      *                                                                         *
      **************************************************************************/
-    onKeyUp(event) {
-        if (this.ignoreKeys.some((k) => k === event.key)) {
-            return;
-        }
-        this.inputKeyup$.next(event);
+    onUserTextInput(event) {
+        const value = event?.target?.value ?? '';
+        this.userTextInputChanged$.next(value);
     }
     /***************************************************************************
      *                                                                         *
@@ -23669,7 +23659,7 @@ class ElderAutocompleteDirective {
      *                                                                         *
      **************************************************************************/
     ngOnInit() {
-        merge(this.inputKeyup$.pipe(skipWhile((e) => !this._elderAutocomplete.enabled), debounce(() => timer(this.getDebounceTime())), map((e) => e?.target?.value)), this.autocomplete.triggerReload$)
+        merge(this.userTextInputChanged$.pipe(filter(() => this._elderAutocomplete.enabled), debounce(() => timer(this.getDebounceTime())), distinctUntilChanged()), this.autocomplete.triggerReload$)
             .pipe(takeUntil(this.destroy$), filter((value) => !value || typeof value === 'string' || typeof value === 'number'))
             .subscribe((value) => this.updateSuggestions(value));
     }
@@ -23723,10 +23713,10 @@ class ElderAutocompleteDirective {
         if (isLocalDataSource(this.dataContext?.dataSource)) {
             return 0;
         }
-        return 150; // Default debounce time
+        return DEFAULT_DEBOUNCE_TIME;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderAutocompleteDirective, deps: [{ token: i1$8.MatAutocompleteTrigger }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: ElderAutocompleteDirective, isStandalone: true, selector: "[elderAutocomplete]", inputs: { queryFilter: "queryFilter", filters: "filters", sorts: "sorts", autocomplete: ["elderAutocomplete", "autocomplete"] }, host: { listeners: { "keyup": "onKeyUp($event)" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: ElderAutocompleteDirective, isStandalone: true, selector: "[elderAutocomplete]", inputs: { queryFilter: "queryFilter", filters: "filters", sorts: "sorts", autocomplete: ["elderAutocomplete", "autocomplete"] }, host: { listeners: { "input": "onUserTextInput($event)" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderAutocompleteDirective, decorators: [{
             type: Directive,
@@ -23739,9 +23729,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                 type: Input
             }], sorts: [{
                 type: Input
-            }], onKeyUp: [{
+            }], onUserTextInput: [{
                 type: HostListener,
-                args: ['keyup', ['$event']]
+                args: ['input', ['$event']]
             }], autocomplete: [{
                 type: Input,
                 args: ['elderAutocomplete']
@@ -23833,25 +23823,25 @@ class ElderSelectOnTabDirective {
     selectActiveOption() {
         // keyboard navigation has precedence over text input
         if (this.panelNavigatedWithArrowKeys) {
-            const activeOption = this.autoTrigger.activeOption;
-            if (activeOption) {
-                const entity = activeOption.value;
-                this.writeEntity(entity);
-            }
+            this.writeAutoCompleteActiveOption();
             return;
         }
-        // text input check
-        if (this.textTypedAndSettingRespected()) {
-            const matchedOption = this.findMatchingOptionByInputText();
-            if (matchedOption) {
-                this.writeEntity(matchedOption.value);
-                return;
-            }
-            const activeOption = this.autoTrigger.activeOption;
-            if (activeOption) {
-                const entity = activeOption.value;
-                this.writeEntity(entity);
-            }
+        // only select if text was typed and the setting is respected
+        if (!this.textTypedAndSettingRespected()) {
+            return;
+        }
+        const matchedOption = this.findMatchingOptionByInputText();
+        if (matchedOption) {
+            this.writeEntity(matchedOption.value);
+            return;
+        }
+        this.writeAutoCompleteActiveOption();
+    }
+    writeAutoCompleteActiveOption() {
+        const activeOption = this.autoTrigger.activeOption;
+        if (activeOption) {
+            const entity = activeOption.value;
+            this.writeEntity(entity);
         }
     }
     writeEntity(entity) {
@@ -23881,20 +23871,24 @@ class ElderSelectOnTabDirective {
     findMatchingOptionByInputText() {
         const inputText = this.elderSelect.inputRef?.nativeElement?.value;
         if (!inputText) {
-            return null;
+            return undefined;
         }
         const normalizedInput = inputText.trim().toLowerCase();
         if (!normalizedInput) {
-            return null;
+            return undefined;
         }
         const options = this.autoTrigger.autocomplete?.options?.toArray() ?? [];
-        return (options.find((option) => {
+        return this.findFirstOptionMatchingNormalizedInput(options, normalizedInput);
+    }
+    findFirstOptionMatchingNormalizedInput(options, normalizedInput) {
+        return options.find((option) => {
             if (option.disabled) {
                 return false;
             }
-            const optionText = (option.viewValue ?? '').trim().toLowerCase();
-            return optionText.startsWith(normalizedInput);
-        }) ?? null);
+            const optionText = option.viewValue ?? '';
+            const normalizedOptionText = optionText.trim().toLowerCase();
+            return normalizedOptionText.startsWith(normalizedInput);
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderSelectOnTabDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: ElderSelectOnTabDirective, isStandalone: true, selector: "[elderSelectOnTab]", host: { listeners: { "keydown.arrowup": "handleVerticalArrowKeyPress()", "keydown.arrowdown": "handleVerticalArrowKeyPress()", "input": "handleInputTyping()", "keydown.tab": "handleTabKeyPress()" } }, ngImport: i0 }); }
@@ -24073,19 +24067,13 @@ class ElderSuggestionPanelComponent {
         if (!activeEntity) {
             return false;
         }
-        // Prefer stable id comparison for object entities.
-        const activeId = this.safeId(activeEntity);
-        const optionId = this.safeId(option);
-        if (activeId !== undefined && optionId !== undefined) {
-            return activeId === optionId;
+        const areIdsEqual = this.areIdsEqual(activeEntity, option);
+        if (areIdsEqual !== undefined) {
+            return areIdsEqual;
+        }
+        else {
+            return this.areLabelsEqual(activeEntity, option);
         }
-        // Fallback for non-id data (e.g. translated display-only options).
-        const resolver = this.displayPropertyResolver$.getValue();
-        const activeLabel = resolver
-            ? resolver(activeEntity)
-            : this.propertyStringValue(activeEntity, null);
-        const optionLabel = resolver ? resolver(option) : this.propertyStringValue(option, null);
-        return activeLabel === optionLabel;
     }
     toOptionValue(option) {
         if (this.optionValueConverterFn) {
@@ -24121,6 +24109,10 @@ class ElderSuggestionPanelComponent {
     calculatePageSize() {
         return this.PAGE_SIZE + this.hiddenOptionsCount$.getValue();
     }
+    /**
+     * Try to extract the id from the value (to determine active entity)
+     * with graceful fallback to undefined.
+     */
     safeId(value) {
         if (value === null || value === undefined) {
             return undefined;
@@ -24129,11 +24121,27 @@ class ElderSuggestionPanelComponent {
             return this.getId(value);
         }
         catch {
+            this.logger.debug('Failed to extract id from value', value);
+            return undefined;
+        }
+    }
+    areIdsEqual(activeEntity, option) {
+        const activeId = this.safeId(activeEntity);
+        const optionId = this.safeId(option);
+        if ([activeId, optionId].includes(undefined)) {
             return undefined;
         }
+        return activeId === optionId;
+    }
+    areLabelsEqual(activeEntity, option) {
+        const resolverFn = this.displayPropertyResolver$.getValue();
+        if (resolverFn) {
+            return resolverFn(activeEntity) === resolverFn(option);
+        }
+        return this.propertyStringValue(activeEntity, null) === this.propertyStringValue(option, null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderSuggestionPanelComponent, deps: [{ token: i0.NgZone }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ElderSuggestionPanelComponent, isStandalone: true, selector: "elder-suggestion-panel", inputs: { isOptionDisabledFn: { classPropertyName: "isOptionDisabledFn", publicName: "isOptionDisabledFn", isSignal: false, isRequired: false, transformFunction: null }, isOptionHiddenFn: { classPropertyName: "isOptionHiddenFn", publicName: "isOptionHiddenFn", isSignal: false, isRequired: false, transformFunction: null }, optionValueConverterFn: { classPropertyName: "optionValueConverterFn", publicName: "optionValueConverterFn", isSignal: false, isRequired: false, transformFunction: null }, activeEntity: { classPropertyName: "activeEntity", publicName: "activeEntity", isSignal: true, isRequired: false, transformFunction: null }, enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: false, isRequired: false, transformFunction: null }, valueTemplate: { classPropertyName: "valueTemplate", publicName: "valueTemplate", isSignal: false, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: false, isRequired: false, transformFunction: null }, displayPropertyResolver: { classPropertyName: "displayPropertyResolver", publicName: "displayPropertyResolver", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected" }, queries: [{ propertyName: "valueTemplateQuery", first: true, predicate: ElderSelectValueDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }], exportAs: ["elderSuggestionPanel"], ngImport: i0, template: "<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  panelWidth=\"auto\"\n  [autoActiveFirstOption]=\"true\"\n  (opened)=\"onAutocompleteOpened($event)\"\n  (optionSelected)=\"onOptionSelected($event)\"\n  elderInfiniteScroll\n  elderElderInfiniteAutocomplete\n  (closeToEnd)=\"onAutoCompleteCloseToEnd()\"\n>\n  @if (dataContext$ | async; as dc) {\n    @if (dc.isClosed) {\n      <mat-option disabled>\n        <div class=\"layout-row place-start-center gap-sm\">\n          <mat-icon color=\"warn\">warning</mat-icon>\n          <span class=\"mat-caption\">DataContext Closed!</span>\n        </div>\n      </mat-option>\n    }\n\n    @if (availableSuggestions$ | async; as suggestions) {\n      @if (suggestions.length === 0) {\n        <mat-option disabled>No Data.</mat-option>\n      }\n\n      @for (suggestion of suggestions; track getIdAsString(suggestion)) {\n        @if (isOptionVisible(suggestion)) {\n          <mat-option\n            [value]=\"toOptionValue(suggestion)\"\n            [id]=\"getIdAsString(suggestion)\"\n            [disabled]=\"!isOptionAvailable(suggestion)\"\n            [class.active-option]=\"isOptionActive(suggestion)\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                valueTemplate || simpleValueTemplate;\n                context: { $implicit: suggestion }\n              \"\n            >\n            </ng-container>\n            <!--\n            <span class=\"mat-caption\">value: {{toOptionValue(suggestion)}}</span>\n            -->\n          </mat-option>\n        }\n      }\n    }\n  } @else {\n    <mat-option disabled>\n      <span class=\"mat-caption\">\n        No DataContext!\n        @if (dataSource$ | async; as ds) {\n          (DataSource: {{ ds ? 'available' : 'missing' }})\n          {{ enabled ? 'Autocomplete Enabled' : 'Autocomplete DISABLED' }}\n        }\n      </span>\n    </mat-option>\n  }\n\n  @if (dataState$ | async; as state) {\n    @if (!state.idle || state.loading) {\n      <div style=\"position: relative\">\n        <div style=\"position: absolute; right: 0; bottom: -8px; left: 0\">\n          <mat-progress-bar\n            [value]=\"100\"\n            [mode]=\"state.loading ? 'query' : 'determinate'\"\n            [color]=\"state.error ? 'warn' : 'primary'\"\n          ></mat-progress-bar>\n        </div>\n      </div>\n    }\n  }\n</mat-autocomplete>\n\n<ng-template #simpleValueTemplate let-value>\n  @if (displayPropertyResolver$ | async; as propertyResolver) {\n    <span class=\"noselect\">{{ propertyResolver(value) }}</span>\n  }\n</ng-template>\n", styles: [".active-option.active-option{font-weight:700}.active-option.active-option:before{font-family:Material Icons;content:\"check\";font-size:13px;position:absolute;top:50%;left:1px;transform:translateY(-50%)}\n"], dependencies: [{ kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: ElderInfiniteAutocompleteDirective, selector: "mat-autocomplete[elderElderInfiniteAutocomplete]" }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ElderSuggestionPanelComponent, isStandalone: true, selector: "elder-suggestion-panel", inputs: { isOptionDisabledFn: { classPropertyName: "isOptionDisabledFn", publicName: "isOptionDisabledFn", isSignal: false, isRequired: false, transformFunction: null }, isOptionHiddenFn: { classPropertyName: "isOptionHiddenFn", publicName: "isOptionHiddenFn", isSignal: false, isRequired: false, transformFunction: null }, optionValueConverterFn: { classPropertyName: "optionValueConverterFn", publicName: "optionValueConverterFn", isSignal: false, isRequired: false, transformFunction: null }, activeEntity: { classPropertyName: "activeEntity", publicName: "activeEntity", isSignal: true, isRequired: false, transformFunction: null }, enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: false, isRequired: false, transformFunction: null }, valueTemplate: { classPropertyName: "valueTemplate", publicName: "valueTemplate", isSignal: false, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: false, isRequired: false, transformFunction: null }, displayPropertyResolver: { classPropertyName: "displayPropertyResolver", publicName: "displayPropertyResolver", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected" }, queries: [{ propertyName: "valueTemplateQuery", first: true, predicate: ElderSelectValueDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "matAutocomplete", first: true, predicate: ["auto"], descendants: true }], exportAs: ["elderSuggestionPanel"], ngImport: i0, template: "<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  panelWidth=\"auto\"\n  [autoActiveFirstOption]=\"true\"\n  (opened)=\"onAutocompleteOpened($event)\"\n  (optionSelected)=\"onOptionSelected($event)\"\n  elderInfiniteScroll\n  elderElderInfiniteAutocomplete\n  (closeToEnd)=\"onAutoCompleteCloseToEnd()\"\n>\n  @if (dataContext$ | async; as dc) {\n    @if (dc.isClosed) {\n      <mat-option disabled>\n        <div class=\"layout-row place-start-center gap-sm\">\n          <mat-icon color=\"warn\">warning</mat-icon>\n          <span class=\"mat-caption\">DataContext Closed!</span>\n        </div>\n      </mat-option>\n    }\n\n    @if (availableSuggestions$ | async; as suggestions) {\n      @if (suggestions.length === 0) {\n        <mat-option disabled>No Data.</mat-option>\n      }\n\n      @for (suggestion of suggestions; track getIdAsString(suggestion)) {\n        @if (isOptionVisible(suggestion)) {\n          <mat-option\n            [value]=\"toOptionValue(suggestion)\"\n            [id]=\"getIdAsString(suggestion)\"\n            [disabled]=\"!isOptionAvailable(suggestion)\"\n            [class.active-option]=\"isOptionActive(suggestion)\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                valueTemplate || simpleValueTemplate;\n                context: { $implicit: suggestion }\n              \"\n            >\n            </ng-container>\n            <!--\n            <span class=\"mat-caption\">value: {{toOptionValue(suggestion)}}</span>\n            -->\n          </mat-option>\n        }\n      }\n    }\n  } @else {\n    <mat-option disabled>\n      <span class=\"mat-caption\">\n        No DataContext!\n        @if (dataSource$ | async; as ds) {\n          (DataSource: {{ ds ? 'available' : 'missing' }})\n          {{ enabled ? 'Autocomplete Enabled' : 'Autocomplete DISABLED' }}\n        }\n      </span>\n    </mat-option>\n  }\n\n  @if (dataState$ | async; as state) {\n    @if (!state.idle || state.loading) {\n      <div style=\"position: relative\">\n        <div style=\"position: absolute; right: 0; bottom: -8px; left: 0\">\n          <mat-progress-bar\n            [value]=\"100\"\n            [mode]=\"state.loading ? 'query' : 'determinate'\"\n            [color]=\"state.error ? 'warn' : 'primary'\"\n          ></mat-progress-bar>\n        </div>\n      </div>\n    }\n  }\n</mat-autocomplete>\n\n<ng-template #simpleValueTemplate let-value>\n  @if (displayPropertyResolver$ | async; as propertyResolver) {\n    <span class=\"noselect\">{{ propertyResolver(value) }}</span>\n  }\n</ng-template>\n", styles: [".active-option.active-option{font-weight:700}.active-option.active-option:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:4px;background-color:var(--md-sys-color-primary)}\n"], dependencies: [{ kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "directive", type: ElderInfiniteAutocompleteDirective, selector: "mat-autocomplete[elderElderInfiniteAutocomplete]" }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderSuggestionPanelComponent, decorators: [{
             type: Component,
@@ -24146,7 +24154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         NgTemplateOutlet,
                         MatProgressBar,
                         AsyncPipe,
-                    ], template: "<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  panelWidth=\"auto\"\n  [autoActiveFirstOption]=\"true\"\n  (opened)=\"onAutocompleteOpened($event)\"\n  (optionSelected)=\"onOptionSelected($event)\"\n  elderInfiniteScroll\n  elderElderInfiniteAutocomplete\n  (closeToEnd)=\"onAutoCompleteCloseToEnd()\"\n>\n  @if (dataContext$ | async; as dc) {\n    @if (dc.isClosed) {\n      <mat-option disabled>\n        <div class=\"layout-row place-start-center gap-sm\">\n          <mat-icon color=\"warn\">warning</mat-icon>\n          <span class=\"mat-caption\">DataContext Closed!</span>\n        </div>\n      </mat-option>\n    }\n\n    @if (availableSuggestions$ | async; as suggestions) {\n      @if (suggestions.length === 0) {\n        <mat-option disabled>No Data.</mat-option>\n      }\n\n      @for (suggestion of suggestions; track getIdAsString(suggestion)) {\n        @if (isOptionVisible(suggestion)) {\n          <mat-option\n            [value]=\"toOptionValue(suggestion)\"\n            [id]=\"getIdAsString(suggestion)\"\n            [disabled]=\"!isOptionAvailable(suggestion)\"\n            [class.active-option]=\"isOptionActive(suggestion)\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                valueTemplate || simpleValueTemplate;\n                context: { $implicit: suggestion }\n              \"\n            >\n            </ng-container>\n            <!--\n            <span class=\"mat-caption\">value: {{toOptionValue(suggestion)}}</span>\n            -->\n          </mat-option>\n        }\n      }\n    }\n  } @else {\n    <mat-option disabled>\n      <span class=\"mat-caption\">\n        No DataContext!\n        @if (dataSource$ | async; as ds) {\n          (DataSource: {{ ds ? 'available' : 'missing' }})\n          {{ enabled ? 'Autocomplete Enabled' : 'Autocomplete DISABLED' }}\n        }\n      </span>\n    </mat-option>\n  }\n\n  @if (dataState$ | async; as state) {\n    @if (!state.idle || state.loading) {\n      <div style=\"position: relative\">\n        <div style=\"position: absolute; right: 0; bottom: -8px; left: 0\">\n          <mat-progress-bar\n            [value]=\"100\"\n            [mode]=\"state.loading ? 'query' : 'determinate'\"\n            [color]=\"state.error ? 'warn' : 'primary'\"\n          ></mat-progress-bar>\n        </div>\n      </div>\n    }\n  }\n</mat-autocomplete>\n\n<ng-template #simpleValueTemplate let-value>\n  @if (displayPropertyResolver$ | async; as propertyResolver) {\n    <span class=\"noselect\">{{ propertyResolver(value) }}</span>\n  }\n</ng-template>\n", styles: [".active-option.active-option{font-weight:700}.active-option.active-option:before{font-family:Material Icons;content:\"check\";font-size:13px;position:absolute;top:50%;left:1px;transform:translateY(-50%)}\n"] }]
+                    ], template: "<mat-autocomplete\n  #auto=\"matAutocomplete\"\n  panelWidth=\"auto\"\n  [autoActiveFirstOption]=\"true\"\n  (opened)=\"onAutocompleteOpened($event)\"\n  (optionSelected)=\"onOptionSelected($event)\"\n  elderInfiniteScroll\n  elderElderInfiniteAutocomplete\n  (closeToEnd)=\"onAutoCompleteCloseToEnd()\"\n>\n  @if (dataContext$ | async; as dc) {\n    @if (dc.isClosed) {\n      <mat-option disabled>\n        <div class=\"layout-row place-start-center gap-sm\">\n          <mat-icon color=\"warn\">warning</mat-icon>\n          <span class=\"mat-caption\">DataContext Closed!</span>\n        </div>\n      </mat-option>\n    }\n\n    @if (availableSuggestions$ | async; as suggestions) {\n      @if (suggestions.length === 0) {\n        <mat-option disabled>No Data.</mat-option>\n      }\n\n      @for (suggestion of suggestions; track getIdAsString(suggestion)) {\n        @if (isOptionVisible(suggestion)) {\n          <mat-option\n            [value]=\"toOptionValue(suggestion)\"\n            [id]=\"getIdAsString(suggestion)\"\n            [disabled]=\"!isOptionAvailable(suggestion)\"\n            [class.active-option]=\"isOptionActive(suggestion)\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                valueTemplate || simpleValueTemplate;\n                context: { $implicit: suggestion }\n              \"\n            >\n            </ng-container>\n            <!--\n            <span class=\"mat-caption\">value: {{toOptionValue(suggestion)}}</span>\n            -->\n          </mat-option>\n        }\n      }\n    }\n  } @else {\n    <mat-option disabled>\n      <span class=\"mat-caption\">\n        No DataContext!\n        @if (dataSource$ | async; as ds) {\n          (DataSource: {{ ds ? 'available' : 'missing' }})\n          {{ enabled ? 'Autocomplete Enabled' : 'Autocomplete DISABLED' }}\n        }\n      </span>\n    </mat-option>\n  }\n\n  @if (dataState$ | async; as state) {\n    @if (!state.idle || state.loading) {\n      <div style=\"position: relative\">\n        <div style=\"position: absolute; right: 0; bottom: -8px; left: 0\">\n          <mat-progress-bar\n            [value]=\"100\"\n            [mode]=\"state.loading ? 'query' : 'determinate'\"\n            [color]=\"state.error ? 'warn' : 'primary'\"\n          ></mat-progress-bar>\n        </div>\n      </div>\n    }\n  }\n</mat-autocomplete>\n\n<ng-template #simpleValueTemplate let-value>\n  @if (displayPropertyResolver$ | async; as propertyResolver) {\n    <span class=\"noselect\">{{ propertyResolver(value) }}</span>\n  }\n</ng-template>\n", styles: [".active-option.active-option{font-weight:700}.active-option.active-option:before{content:\"\";position:absolute;left:0;top:0;bottom:0;width:4px;background-color:var(--md-sys-color-primary)}\n"] }]
         }], ctorParameters: () => [{ type: i0.NgZone }, { type: i0.DestroyRef }], propDecorators: { valueTemplateQuery: [{
                 type: ContentChild,
                 args: [ElderSelectValueDirective, { read: TemplateRef, static: true }]
@@ -24409,7 +24417,9 @@ class ElderSelectComponent extends ElderSelectBase {
             if (this.isOptionDisabledFn) {
                 return this.isOptionDisabledFn(option);
             }
-            return false;
+            else {
+                return false;
+            }
         };
     }
     get isOptionHiddenInternalFn() {
@@ -24460,9 +24470,11 @@ class ElderSelectComponent extends ElderSelectBase {
         }
         const selectedEntity = optionSelected.entity;
         if (this.isEntitySelected(selectedEntity)) {
-            // Force signal emission when re-selecting the same entity.
-            // Signals skip emission when the value hasn't changed (by reference),
-            // so we reset to null and then restore the value to trigger subscribers.
+            /*
+             * Force signal emission when re-selecting the same entity.
+             * Signals skip emission when the value hasn't changed (by reference),
+             * therefore we need to null and then restore the value to trigger subscribers.
+             */
             this.writeValueInternal(null);
             queueMicrotask(() => {
                 this.updateValueByEntity(selectedEntity);
@@ -26408,7 +26420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
         }], propDecorators: { stateColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "stateColor", required: false }] }], levelColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "levelColor", required: false }] }], namedColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "namedColor", required: false }] }], themeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], chipSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "chipSize", required: false }] }] } });
 
 class ChipModel {
-    constructor(id, value, displayText, colorSpec, removable, avatarSpec, trailingSpec) {
+    constructor(id, value, displayText, colorSpec, removable, avatarSpec, trailingSpec, indicatorSpec) {
         this.id = id;
         this.value = value;
         this.displayText = displayText;
@@ -26416,6 +26428,7 @@ class ChipModel {
         this.removable = removable;
         this.avatarSpec = avatarSpec;
         this.trailingSpec = trailingSpec;
+        this.indicatorSpec = indicatorSpec;
     }
 }
 class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
@@ -26590,7 +26603,7 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
                 removable = true;
             }
         }
-        return new ChipModel(this.getEntityId(e), e, dPR(e), chipSpec?.colorSpec, removable, chipSpec.avatarSpec, chipSpec.trailingSpec);
+        return new ChipModel(this.getEntityId(e), e, dPR(e), chipSpec?.colorSpec, removable, chipSpec.avatarSpec, chipSpec.trailingSpec, chipSpec.indicatorSpec);
     }
     reduceDisplayedChips(models, count) {
         const reducedChips = models.slice(0, count);
@@ -26611,7 +26624,7 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
                 provide: ELDER_SELECT_BASE,
                 useExisting: forwardRef(() => ElderMultiSelectChipsComponent),
             },
-        ], queries: [{ propertyName: "_customChipInput", first: true, predicate: MatFormFieldControl, descendants: true }, { propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef }, { propertyName: "customInputTemplateQuery", first: true, predicate: ElderSelectCustomInputDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_chipInput", first: true, predicate: ElderSelectComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"elder-flex-control\" [matTooltip]=\"state()?.error\">\n  <mat-chip-set\n    #chips\n    [class.mat-mdc-chip-set-stacked]=\"stacked\"\n    cdkDropList\n    [cdkDropListOrientation]=\"stacked ? 'vertical' : 'horizontal'\"\n    (cdkDropListDropped)=\"drop($event)\"\n    [cdkDropListDisabled]=\"!allowSorting\"\n  >\n    @if (icon) {\n      <div class=\"elder-input-prefix-icon-container flex-none\">\n        <mat-icon\n          disabled\n          class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n          [class.loading]=\"state()?.loading\"\n        >\n          {{ icon }}\n        </mat-icon>\n      </div>\n    }\n\n    @for (chipModel of selectChips(); track chipModel.id) {\n      <mat-chip-row\n        elderChipLabel\n        highlighted\n        class=\"noselect clickable-chip\"\n        [value]=\"resolveChipValue(chipModel.value)\"\n        [color]=\"chipModel.colorSpec?.themeColor\"\n        [levelColor]=\"chipModel.colorSpec?.levelColor\"\n        [stateColor]=\"chipModel.colorSpec?.stateColor\"\n        [namedColor]=\"chipModel.colorSpec?.namedColor\"\n        [removable]=\"chipModel.removable\"\n        (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n        (click)=\"onCurrentClicked(chipModel.value)\"\n        cdkDrag\n        [cdkDragData]=\"chipModel.value\"\n        [cdkDragDisabled]=\"!allowSorting\"\n      >\n        @if (templates()?.avatar && !chipModel.avatarSpec?.hide) {\n          <mat-chip-avatar [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\">\n            <ng-container *ngTemplateOutlet=\"templates().avatar; context: { $implicit: chipModel }\">\n            </ng-container>\n          </mat-chip-avatar>\n        }\n\n        <ng-container\n          *ngTemplateOutlet=\"\n            templates()?.chip || simpleChipTemplate;\n            context: { $implicit: chipModel }\n          \"\n        >\n        </ng-container>\n\n        @if (chipModel.trailingSpec?.icon; as trailingIcon) {\n          <mat-icon\n            matChipTrailingIcon\n            class=\"elder-trailing-icon\"\n            [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n            >{{ trailingIcon }}</mat-icon\n          >\n        }\n\n        @if (chipModel.removable) {\n          <mat-icon matChipRemove (click)=\"onClickRemoveChip($event, chipModel.value)\">\n            cancel\n          </mat-icon>\n        }\n      </mat-chip-row>\n    }\n\n    <div class=\"layout-row place-start-center elder-chip-input\">\n      <!-- [matChipInputFor]=\"chips\" -->\n      <ng-container *ngTemplateOutlet=\"templates()?.input || selectInput\"> </ng-container>\n\n      @if (selectionPopup) {\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"elder-control-icon-button elder-browse-icon\"\n          [disabled]=\"isLocked\"\n          (click)=\"openSelectionPopup($event)\"\n          aria-label=\"Search\"\n          elderStopEventPropagation\n          tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n        </button>\n      }\n    </div>\n  </mat-chip-set>\n</div>\n\n<ng-template #selectInput>\n  <!-- mat-mdc-chip-input -->\n  <elder-select\n    autocomplete\n    elderClearSelect\n    class=\"elder-chip-input-select flex\"\n    [data]=\"dataContextS()\"\n    [disabled]=\"!!disabledS()\"\n    [required]=\"!!requiredS()\"\n    [readonly]=\"!!readonlyS()\"\n    [placeholder]=\"!readonlyS() ? placeholderS() : undefined\"\n    (entityUpdated)=\"appendEntity($event)\"\n    [displayPropertyResolver]=\"displayPropertyResolverS()\"\n    [valueTemplate]=\"valueTemplate\"\n    [queryFilter]=\"queryFilter\"\n    [filters]=\"filters\"\n    [sorts]=\"sorts\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n  ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span\n    class=\"elder-chip-text\"\n    [matTooltip]=\"chipModel.displayText\"\n    [matTooltipDisabled]=\"chipModel.displayText?.length < 20\"\n    >{{ chipModel.displayText | elderTruncate: 20 }}\n  </span>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: ["stateColor", "levelColor", "namedColor", "color", "chipSize"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: ElderSelectComponent, selector: "elder-select", inputs: ["nullDisplay", "autocomplete", "allowNull", "entity", "entityId"], outputs: ["entityIdChange", "entityIdUpdated", "entityChange", "entityUpdated", "entity"] }, { kind: "directive", type: ElderClearSelectDirective, selector: "[elderClearSelect]" }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "_customChipInput", first: true, predicate: MatFormFieldControl, descendants: true }, { propertyName: "chipTemplateQuery", first: true, predicate: ElderSelectChipDirective, descendants: true, read: TemplateRef }, { propertyName: "chipAvatarTemplateQuery", first: true, predicate: ElderSelectChipAvatarDirective, descendants: true, read: TemplateRef }, { propertyName: "customInputTemplateQuery", first: true, predicate: ElderSelectCustomInputDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_chipInput", first: true, predicate: ElderSelectComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"elder-flex-control\" [matTooltip]=\"state()?.error\">\n  <mat-chip-set\n    #chips\n    [class.mat-mdc-chip-set-stacked]=\"stacked\"\n    cdkDropList\n    [cdkDropListOrientation]=\"stacked ? 'vertical' : 'horizontal'\"\n    (cdkDropListDropped)=\"drop($event)\"\n    [cdkDropListDisabled]=\"!allowSorting\"\n  >\n    @if (icon) {\n      <div class=\"elder-input-prefix-icon-container flex-none\">\n        <mat-icon\n          disabled\n          class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n          [class.loading]=\"state()?.loading\"\n        >\n          {{ icon }}\n        </mat-icon>\n      </div>\n    }\n\n    @for (chipModel of selectChips(); track chipModel.id) {\n      <mat-chip-row\n        elderChipLabel\n        highlighted\n        class=\"noselect clickable-chip\"\n        [value]=\"resolveChipValue(chipModel.value)\"\n        [color]=\"chipModel.colorSpec?.themeColor\"\n        [levelColor]=\"chipModel.colorSpec?.levelColor\"\n        [stateColor]=\"chipModel.colorSpec?.stateColor\"\n        [namedColor]=\"chipModel.colorSpec?.namedColor\"\n        [removable]=\"chipModel.removable\"\n        (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n        (click)=\"onCurrentClicked(chipModel.value)\"\n        cdkDrag\n        [cdkDragData]=\"chipModel.value\"\n        [cdkDragDisabled]=\"!allowSorting\"\n        [matBadge]=\"chipModel.indicatorSpec?.content\"\n        [matBadgeColor]=\"chipModel.indicatorSpec?.themeColor || 'warn'\"\n        [matBadgeSize]=\"chipModel.indicatorSpec?.size || 'small'\"\n        [matBadgePosition]=\"chipModel.indicatorSpec?.position || 'above after'\"\n        [matBadgeHidden]=\"!chipModel.indicatorSpec?.content\"\n      >\n        @if (templates()?.avatar && !chipModel.avatarSpec?.hide) {\n          <mat-chip-avatar [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\">\n            <ng-container *ngTemplateOutlet=\"templates().avatar; context: { $implicit: chipModel }\">\n            </ng-container>\n          </mat-chip-avatar>\n        }\n\n        <ng-container\n          *ngTemplateOutlet=\"\n            templates()?.chip || simpleChipTemplate;\n            context: { $implicit: chipModel }\n          \"\n        >\n        </ng-container>\n\n        @if (chipModel.trailingSpec?.icon; as trailingIcon) {\n          <mat-icon\n            matChipTrailingIcon\n            class=\"elder-trailing-icon\"\n            [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n            >{{ trailingIcon }}</mat-icon\n          >\n        }\n\n        @if (chipModel.removable) {\n          <mat-icon matChipRemove (click)=\"onClickRemoveChip($event, chipModel.value)\">\n            cancel\n          </mat-icon>\n        }\n      </mat-chip-row>\n    }\n\n    <div class=\"layout-row place-start-center elder-chip-input\">\n      <!-- [matChipInputFor]=\"chips\" -->\n      <ng-container *ngTemplateOutlet=\"templates()?.input || selectInput\"> </ng-container>\n\n      @if (selectionPopup) {\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"elder-control-icon-button elder-browse-icon\"\n          [disabled]=\"isLocked\"\n          (click)=\"openSelectionPopup($event)\"\n          aria-label=\"Search\"\n          elderStopEventPropagation\n          tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n        </button>\n      }\n    </div>\n  </mat-chip-set>\n</div>\n\n<ng-template #selectInput>\n  <!-- mat-mdc-chip-input -->\n  <elder-select\n    autocomplete\n    elderClearSelect\n    class=\"elder-chip-input-select flex\"\n    [data]=\"dataContextS()\"\n    [disabled]=\"!!disabledS()\"\n    [required]=\"!!requiredS()\"\n    [readonly]=\"!!readonlyS()\"\n    [placeholder]=\"!readonlyS() ? placeholderS() : undefined\"\n    (entityUpdated)=\"appendEntity($event)\"\n    [displayPropertyResolver]=\"displayPropertyResolverS()\"\n    [valueTemplate]=\"valueTemplate\"\n    [queryFilter]=\"queryFilter\"\n    [filters]=\"filters\"\n    [sorts]=\"sorts\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n  ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span\n    class=\"elder-chip-text\"\n    [matTooltip]=\"chipModel.displayText\"\n    [matTooltipDisabled]=\"chipModel.displayText?.length < 20\"\n    >{{ chipModel.displayText | elderTruncate: 20 }}\n  </span>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: ["stateColor", "levelColor", "namedColor", "color", "chipSize"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: MatChipTrailingIcon, selector: "mat-chip-trailing-icon, [matChipTrailingIcon]" }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: ElderSelectComponent, selector: "elder-select", inputs: ["nullDisplay", "autocomplete", "allowNull", "entity", "entityId"], outputs: ["entityIdChange", "entityIdUpdated", "entityChange", "entityUpdated", "entity"] }, { kind: "directive", type: ElderClearSelectDirective, selector: "[elderClearSelect]" }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ElderMultiSelectChipsComponent, decorators: [{
             type: Component,
@@ -26638,7 +26651,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         ElderSelectComponent,
                         ElderClearSelectDirective,
                         ElderTruncatePipe,
-                    ], template: "<div class=\"elder-flex-control\" [matTooltip]=\"state()?.error\">\n  <mat-chip-set\n    #chips\n    [class.mat-mdc-chip-set-stacked]=\"stacked\"\n    cdkDropList\n    [cdkDropListOrientation]=\"stacked ? 'vertical' : 'horizontal'\"\n    (cdkDropListDropped)=\"drop($event)\"\n    [cdkDropListDisabled]=\"!allowSorting\"\n  >\n    @if (icon) {\n      <div class=\"elder-input-prefix-icon-container flex-none\">\n        <mat-icon\n          disabled\n          class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n          [class.loading]=\"state()?.loading\"\n        >\n          {{ icon }}\n        </mat-icon>\n      </div>\n    }\n\n    @for (chipModel of selectChips(); track chipModel.id) {\n      <mat-chip-row\n        elderChipLabel\n        highlighted\n        class=\"noselect clickable-chip\"\n        [value]=\"resolveChipValue(chipModel.value)\"\n        [color]=\"chipModel.colorSpec?.themeColor\"\n        [levelColor]=\"chipModel.colorSpec?.levelColor\"\n        [stateColor]=\"chipModel.colorSpec?.stateColor\"\n        [namedColor]=\"chipModel.colorSpec?.namedColor\"\n        [removable]=\"chipModel.removable\"\n        (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n        (click)=\"onCurrentClicked(chipModel.value)\"\n        cdkDrag\n        [cdkDragData]=\"chipModel.value\"\n        [cdkDragDisabled]=\"!allowSorting\"\n      >\n        @if (templates()?.avatar && !chipModel.avatarSpec?.hide) {\n          <mat-chip-avatar [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\">\n            <ng-container *ngTemplateOutlet=\"templates().avatar; context: { $implicit: chipModel }\">\n            </ng-container>\n          </mat-chip-avatar>\n        }\n\n        <ng-container\n          *ngTemplateOutlet=\"\n            templates()?.chip || simpleChipTemplate;\n            context: { $implicit: chipModel }\n          \"\n        >\n        </ng-container>\n\n        @if (chipModel.trailingSpec?.icon; as trailingIcon) {\n          <mat-icon\n            matChipTrailingIcon\n            class=\"elder-trailing-icon\"\n            [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n            >{{ trailingIcon }}</mat-icon\n          >\n        }\n\n        @if (chipModel.removable) {\n          <mat-icon matChipRemove (click)=\"onClickRemoveChip($event, chipModel.value)\">\n            cancel\n          </mat-icon>\n        }\n      </mat-chip-row>\n    }\n\n    <div class=\"layout-row place-start-center elder-chip-input\">\n      <!-- [matChipInputFor]=\"chips\" -->\n      <ng-container *ngTemplateOutlet=\"templates()?.input || selectInput\"> </ng-container>\n\n      @if (selectionPopup) {\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"elder-control-icon-button elder-browse-icon\"\n          [disabled]=\"isLocked\"\n          (click)=\"openSelectionPopup($event)\"\n          aria-label=\"Search\"\n          elderStopEventPropagation\n          tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n        </button>\n      }\n    </div>\n  </mat-chip-set>\n</div>\n\n<ng-template #selectInput>\n  <!-- mat-mdc-chip-input -->\n  <elder-select\n    autocomplete\n    elderClearSelect\n    class=\"elder-chip-input-select flex\"\n    [data]=\"dataContextS()\"\n    [disabled]=\"!!disabledS()\"\n    [required]=\"!!requiredS()\"\n    [readonly]=\"!!readonlyS()\"\n    [placeholder]=\"!readonlyS() ? placeholderS() : undefined\"\n    (entityUpdated)=\"appendEntity($event)\"\n    [displayPropertyResolver]=\"displayPropertyResolverS()\"\n    [valueTemplate]=\"valueTemplate\"\n    [queryFilter]=\"queryFilter\"\n    [filters]=\"filters\"\n    [sorts]=\"sorts\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n  ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span\n    class=\"elder-chip-text\"\n    [matTooltip]=\"chipModel.displayText\"\n    [matTooltipDisabled]=\"chipModel.displayText?.length < 20\"\n    >{{ chipModel.displayText | elderTruncate: 20 }}\n  </span>\n</ng-template>\n" }]
+                        MatBadge,
+                    ], template: "<div class=\"elder-flex-control\" [matTooltip]=\"state()?.error\">\n  <mat-chip-set\n    #chips\n    [class.mat-mdc-chip-set-stacked]=\"stacked\"\n    cdkDropList\n    [cdkDropListOrientation]=\"stacked ? 'vertical' : 'horizontal'\"\n    (cdkDropListDropped)=\"drop($event)\"\n    [cdkDropListDisabled]=\"!allowSorting\"\n  >\n    @if (icon) {\n      <div class=\"elder-input-prefix-icon-container flex-none\">\n        <mat-icon\n          disabled\n          class=\"elder-prefix-icon elder-mdc-control-icon elder-icon-small noselect\"\n          [class.loading]=\"state()?.loading\"\n        >\n          {{ icon }}\n        </mat-icon>\n      </div>\n    }\n\n    @for (chipModel of selectChips(); track chipModel.id) {\n      <mat-chip-row\n        elderChipLabel\n        highlighted\n        class=\"noselect clickable-chip\"\n        [value]=\"resolveChipValue(chipModel.value)\"\n        [color]=\"chipModel.colorSpec?.themeColor\"\n        [levelColor]=\"chipModel.colorSpec?.levelColor\"\n        [stateColor]=\"chipModel.colorSpec?.stateColor\"\n        [namedColor]=\"chipModel.colorSpec?.namedColor\"\n        [removable]=\"chipModel.removable\"\n        (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n        (click)=\"onCurrentClicked(chipModel.value)\"\n        cdkDrag\n        [cdkDragData]=\"chipModel.value\"\n        [cdkDragDisabled]=\"!allowSorting\"\n        [matBadge]=\"chipModel.indicatorSpec?.content\"\n        [matBadgeColor]=\"chipModel.indicatorSpec?.themeColor || 'warn'\"\n        [matBadgeSize]=\"chipModel.indicatorSpec?.size || 'small'\"\n        [matBadgePosition]=\"chipModel.indicatorSpec?.position || 'above after'\"\n        [matBadgeHidden]=\"!chipModel.indicatorSpec?.content\"\n      >\n        @if (templates()?.avatar && !chipModel.avatarSpec?.hide) {\n          <mat-chip-avatar [class.chip-avatar-xl]=\"chipModel.avatarSpec?.large\">\n            <ng-container *ngTemplateOutlet=\"templates().avatar; context: { $implicit: chipModel }\">\n            </ng-container>\n          </mat-chip-avatar>\n        }\n\n        <ng-container\n          *ngTemplateOutlet=\"\n            templates()?.chip || simpleChipTemplate;\n            context: { $implicit: chipModel }\n          \"\n        >\n        </ng-container>\n\n        @if (chipModel.trailingSpec?.icon; as trailingIcon) {\n          <mat-icon\n            matChipTrailingIcon\n            class=\"elder-trailing-icon\"\n            [fontSet]=\"chipModel.trailingSpec?.iconFontSet\"\n            >{{ trailingIcon }}</mat-icon\n          >\n        }\n\n        @if (chipModel.removable) {\n          <mat-icon matChipRemove (click)=\"onClickRemoveChip($event, chipModel.value)\">\n            cancel\n          </mat-icon>\n        }\n      </mat-chip-row>\n    }\n\n    <div class=\"layout-row place-start-center elder-chip-input\">\n      <!-- [matChipInputFor]=\"chips\" -->\n      <ng-container *ngTemplateOutlet=\"templates()?.input || selectInput\"> </ng-container>\n\n      @if (selectionPopup) {\n        <button\n          mat-icon-button\n          type=\"button\"\n          class=\"elder-control-icon-button elder-browse-icon\"\n          [disabled]=\"isLocked\"\n          (click)=\"openSelectionPopup($event)\"\n          aria-label=\"Search\"\n          elderStopEventPropagation\n          tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n        </button>\n      }\n    </div>\n  </mat-chip-set>\n</div>\n\n<ng-template #selectInput>\n  <!-- mat-mdc-chip-input -->\n  <elder-select\n    autocomplete\n    elderClearSelect\n    class=\"elder-chip-input-select flex\"\n    [data]=\"dataContextS()\"\n    [disabled]=\"!!disabledS()\"\n    [required]=\"!!requiredS()\"\n    [readonly]=\"!!readonlyS()\"\n    [placeholder]=\"!readonlyS() ? placeholderS() : undefined\"\n    (entityUpdated)=\"appendEntity($event)\"\n    [displayPropertyResolver]=\"displayPropertyResolverS()\"\n    [valueTemplate]=\"valueTemplate\"\n    [queryFilter]=\"queryFilter\"\n    [filters]=\"filters\"\n    [sorts]=\"sorts\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n  ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span\n    class=\"elder-chip-text\"\n    [matTooltip]=\"chipModel.displayText\"\n    [matTooltipDisabled]=\"chipModel.displayText?.length < 20\"\n    >{{ chipModel.displayText | elderTruncate: 20 }}\n  </span>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { defaultChipSpec: [{
                 type: Input
             }], chipSpecFn: [{