@elderbyte/ngx-starter 15.10.4 → 15.11.0

package/fesm2015/elderbyte-ngx-starter.mjs

@@ -5,8 +5,8 @@ import { Pipe, Injectable, LOCALE_ID, Inject, NgModule, Optional, SkipSelf, Dire
 import * as i1 from '@angular/platform-browser';
 import { Duration, Period, TemporalQueries, LocalTime, Instant, LocalDate, nativeJs, ZoneId, ZonedDateTime, Temporal } from '@js-joda/core';
 import { LoggerFactory } from '@elderbyte/ts-logger';
-import { BehaviorSubject, Subject, EMPTY, combineLatest, merge, of, forkJoin, throwError, mergeWith, switchMap as switchMap$1, Observable, zip, mergeMap as mergeMap$1, fromEvent, ReplaySubject, NEVER } from 'rxjs';
-import { distinctUntilChanged, map, filter, takeUntil, debounceTime, catchError, first, take, switchMap, mergeMap, tap, takeWhile, expand, reduce, startWith, skip, delay, share, throttleTime, combineLatestWith, timeout, skipWhile } from 'rxjs/operators';
+import { timer, defer, ReplaySubject, concat, finalize, exhaustMap, BehaviorSubject, Subject, EMPTY, combineLatest, merge, of, forkJoin, throwError, mergeWith, switchMap as switchMap$1, Observable, zip, mergeMap as mergeMap$1, fromEvent, NEVER } from 'rxjs';
+import { tap, takeUntil, takeWhile, map, filter, distinctUntilChanged, debounceTime, catchError, first, take, switchMap, mergeMap, expand, reduce, startWith, skip, delay, share, combineLatestWith, timeout, skipWhile } from 'rxjs/operators';
 import * as i1$2 from '@angular/common/http';
 import { HttpParams, HttpEventType, HttpRequest, HttpClient, HttpErrorResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { DataSource } from '@angular/cdk/collections';
@@ -48,7 +48,7 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i1$6 from '@angular/material/snack-bar';
 import { MAT_SNACK_BAR_DATA, MatSnackBarModule } from '@angular/material/snack-bar';
 import * as i5$4 from '@angular/cdk/drag-drop';
-import { transferArrayItem, moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import { transferArrayItem, moveItemInArray, DragDropModule, CdkDropList, CdkDrag } from '@angular/cdk/drag-drop';
 import * as i4$3 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import * as i2$3 from '@angular/material/badge';
@@ -2034,6 +2034,169 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 }]
         }] });
 
+/**
+ * Provides common used object utils
+ */
+class Objects {
+    /**
+     * Checks if the given value is non null / nun undefined
+     */
+    static nonNull(value) {
+        return value !== null && value !== undefined;
+    }
+    /**
+     * Checks if the given value is null or undefined
+     */
+    static isNull(value) {
+        return value === null || value === undefined;
+    }
+    /**
+     * Creates a copy of the object data.
+     */
+    static cloneData(src) {
+        if (!src) {
+            return src;
+        }
+        try {
+            const json = JSON.stringify(src);
+            return JSON.parse(json);
+        }
+        catch (err) {
+            throw new Error('Failed to clone object! ' + err.message);
+        }
+    }
+    /**
+     * Checks if the two given objects have the same data
+     */
+    static dataEquals(a, b) {
+        return JSON.stringify(a) === JSON.stringify(b);
+    }
+}
+Objects.logger = LoggerFactory.getLogger('Objects');
+
+class Arrays {
+    /**
+     * Checks if the two given arrays have the same content in the exact same order.
+     * If order is not relevant, use Sets.equalContent.
+     *
+     * @param arrayA
+     * @param arrayB
+     * @param equalsFn Optional Equality Operator. If omitted, reference equality is used.
+     */
+    static equalContentAndOrder(arrayA, arrayB, equalsFn = (a, b) => a === b) {
+        if (!(arrayA === null || arrayA === void 0 ? void 0 : arrayA.length) && !(arrayB === null || arrayB === void 0 ? void 0 : arrayB.length)) {
+            return true;
+        }
+        if (!arrayA || !arrayB) {
+            return false;
+        }
+        if (arrayA.length !== arrayB.length) {
+            return false;
+        }
+        // Comparing each element of your array
+        for (var i = 0; i < arrayA.length; i++) {
+            if (!equalsFn(arrayA[i], arrayB[i])) {
+                return false;
+            }
+        }
+        return true;
+    }
+}
+
+class Sets {
+    /**
+     * Compares the content of two sets for equality in O(n).
+     * @param as
+     * @param bs
+     */
+    static equals(as, bs) {
+        if (as.size !== bs.size) {
+            return false;
+        }
+        if (as !== bs) { // Same reference?
+            return Sets.containsEvery(bs, Array.from(as.values()));
+        }
+        return true;
+    }
+    /**
+     * Checks if the two given arrays have the same content.
+     * They are handled as "Sets" and order of the items is not relevant for the check.
+     *
+     * @param idsA
+     * @param idsB
+     */
+    static equalContent(idsA, idsB) {
+        if (!(idsA === null || idsA === void 0 ? void 0 : idsA.length) && !(idsB === null || idsB === void 0 ? void 0 : idsB.length)) {
+            return true;
+        }
+        if (!idsA || !idsB) {
+            return false;
+        }
+        if (idsA.length !== idsB.length) {
+            return false;
+        }
+        // Both element lists have content and the same length
+        return Sets.containsEvery(new Set(idsA), idsB);
+    }
+    /**
+     * Checks if the given set contains every given element
+     */
+    static containsEvery(set, elements) {
+        const predicateFn = (e) => set.has(e); // aot does not like lambdas
+        return elements.every(predicateFn);
+    }
+}
+
+class JsonMapUtil {
+    static toJsonMap(esMap) {
+        const entries = Array.from(esMap.entries());
+        const jsonMap = {};
+        entries.reduce((o, [key, value]) => {
+            o[key] = value;
+            return o;
+        }, jsonMap);
+        return jsonMap;
+    }
+    static toMap(jsonMap, toIdFn = key => key) {
+        const map = new Map();
+        Object.keys(jsonMap)
+            .forEach(k => map.set(toIdFn(k), jsonMap[k]));
+        return map;
+    }
+}
+
+/**
+ * Similar to sampleTime, but emits the first event and optionally the last event as-well.
+ * @param intervalDuration
+ * @param includeFinal
+ */
+function lazySampleTime(intervalDuration, includeFinal = true) {
+    return lazySample(() => timer(0, intervalDuration), includeFinal);
+}
+/**
+ *
+ * @see https://medium.com/@jan.benscheid/rxjs-rate-limiting-and-the-quest-for-the-perfect-throttle-836612c88eb7
+ * @param notifierSelector
+ * @param includeFinal
+ */
+function lazySample(notifierSelector, includeFinal = true) {
+    return (source) => defer(() => {
+        const finalValue = new ReplaySubject();
+        let hasValue = false;
+        let lastValue = null;
+        return concat(source.pipe(tap((val) => {
+            lastValue = val;
+            hasValue = true;
+        }), finalize(() => {
+            finalValue.next(lastValue);
+            finalValue.complete();
+        }), exhaustMap((value) => notifierSelector(value).pipe(takeUntil(finalValue), takeWhile(() => hasValue), map(() => {
+            hasValue = false;
+            return lastValue;
+        })))), finalValue.pipe(filter(() => hasValue && includeFinal)));
+    });
+}
+
 class BytesPerSecondFormat {
     static formatBytesPerSecond(bytesPerSecond, precision = null) {
         const KBPerSecond = bytesPerSecond / 1000;
@@ -2168,46 +2331,6 @@ DateUtil.IsoDateDelimiter = '-';
 DateUtil.IsoTimeDelimiter = ':';
 DateUtil.DateTimeSeparator = 'T';
 
-/**
- * Provides common used object utils
- */
-class Objects {
-    /**
-     * Checks if the given value is non null / nun undefined
-     */
-    static nonNull(value) {
-        return value !== null && value !== undefined;
-    }
-    /**
-     * Checks if the given value is null or undefined
-     */
-    static isNull(value) {
-        return value === null || value === undefined;
-    }
-    /**
-     * Creates a copy of the object data.
-     */
-    static cloneData(src) {
-        if (!src) {
-            return src;
-        }
-        try {
-            const json = JSON.stringify(src);
-            return JSON.parse(json);
-        }
-        catch (err) {
-            throw new Error('Failed to clone object! ' + err.message);
-        }
-    }
-    /**
-     * Checks if the two given objects have the same data
-     */
-    static dataEquals(a, b) {
-        return JSON.stringify(a) === JSON.stringify(b);
-    }
-}
-Objects.logger = LoggerFactory.getLogger('Objects');
-
 // @dynamic
 class CollectionUtil {
     static flatten(groups) {
@@ -2630,24 +2753,6 @@ class Pageable {
     }
 }
 
-class JsonMapUtil {
-    static toJsonMap(esMap) {
-        const entries = Array.from(esMap.entries());
-        const jsonMap = {};
-        entries.reduce((o, [key, value]) => {
-            o[key] = value;
-            return o;
-        }, jsonMap);
-        return jsonMap;
-    }
-    static toMap(jsonMap, toIdFn = key => key) {
-        const map = new Map();
-        Object.keys(jsonMap)
-            .forEach(k => map.set(toIdFn(k), jsonMap[k]));
-        return map;
-    }
-}
-
 class EntitySetPatch {
     /***************************************************************************
      *                                                                         *
@@ -8489,50 +8594,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i1$3.Router }, { type: i1$4.Location }]; } });
 
-class Sets {
-    /**
-     * Compares the content of two sets for equality in O(n).
-     * @param as
-     * @param bs
-     */
-    static equals(as, bs) {
-        if (as.size !== bs.size) {
-            return false;
-        }
-        if (as !== bs) { // Same reference?
-            return Sets.containsEvery(bs, Array.from(as.values()));
-        }
-        return true;
-    }
-    /**
-     * Checks if the two given arrays have the same content.
-     * They are handled as "Sets" and order of the items is not relevant for the check.
-     *
-     * @param idsA
-     * @param idsB
-     */
-    static equalContent(idsA, idsB) {
-        if (!(idsA === null || idsA === void 0 ? void 0 : idsA.length) && !(idsB === null || idsB === void 0 ? void 0 : idsB.length)) {
-            return true;
-        }
-        if (!idsA || !idsB) {
-            return false;
-        }
-        if (idsA.length !== idsB.length) {
-            return false;
-        }
-        // Both element lists have content and the same length
-        return Sets.containsEvery(new Set(idsA), idsB);
-    }
-    /**
-     * Checks if the given set contains every given element
-     */
-    static containsEvery(set, elements) {
-        const predicateFn = (e) => set.has(e); // aot does not like lambdas
-        return elements.every(predicateFn);
-    }
-}
-
 class SuggestionProvider {
     constructor(provider) {
         this.provider = provider;
@@ -10757,10 +10818,10 @@ class ElderDropZoneComponent {
     }
 }
 ElderDropZoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ElderDropZoneComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ElderDropZoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ElderDropZoneComponent, selector: "elder-drop-zone", inputs: { icon: "icon", prompt: "prompt" }, outputs: { filesDropped: "filesDropped", dragOver: "dragOver", dragEnd: "dragEnd" }, ngImport: i0, template: "<div class=\"full p-lg\"\n>\n  <div class=\"layout-col full elder-drop-zone\"\n       elderFileDropZone\n       (dropFiles)=\"filesDropped.emit($event)\"\n       (dragOver)=\"dragOver.emit($event)\"\n       (dragEnd)=\"dragEnd.emit($event)\"\n  >\n    <div class=\"layout-col flex\">\n      <ng-content></ng-content>\n      <!-- Default content -->\n      <div class=\"layout-col flex place-center-center gap-sm elder-default-content\">\n        <mat-icon class=\"elder-drop-zone-icon\">{{icon}}</mat-icon>\n        <span class=\"elder-drop-zone-prompt\">{{prompt | translate}}</span>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n", styles: [""], dependencies: [{ kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ElderFileDropZoneDirective, selector: "[elderFileDropZone]", inputs: ["dragOverClass"], outputs: ["dragEnter", "dragOver", "dragEnd", "dragEnterFiles", "dropFiles", "elderFileDropZoneChange"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ElderDropZoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ElderDropZoneComponent, selector: "elder-drop-zone", inputs: { icon: "icon", prompt: "prompt" }, outputs: { filesDropped: "filesDropped", dragOver: "dragOver", dragEnd: "dragEnd" }, ngImport: i0, template: "<div class=\"layout-col full elder-drop-zone\"\n     elderFileDropZone\n     (dropFiles)=\"filesDropped.emit($event)\"\n     (dragOver)=\"dragOver.emit($event)\"\n     (dragEnd)=\"dragEnd.emit($event)\"\n>\n  <div class=\"layout-col flex\">\n    <ng-content></ng-content>\n    <!-- Default content -->\n    <div class=\"layout-col flex place-center-center gap-sm elder-default-content\">\n      <mat-icon class=\"elder-drop-zone-icon\">{{icon}}</mat-icon>\n      <span class=\"elder-drop-zone-prompt\">{{prompt | translate}}</span>\n    </div>\n  </div>\n</div>\n\n\n", styles: [""], dependencies: [{ kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ElderFileDropZoneDirective, selector: "[elderFileDropZone]", inputs: ["dragOverClass"], outputs: ["dragEnter", "dragOver", "dragEnd", "dragEnterFiles", "dropFiles", "elderFileDropZoneChange"] }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ElderDropZoneComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-drop-zone', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"full p-lg\"\n>\n  <div class=\"layout-col full elder-drop-zone\"\n       elderFileDropZone\n       (dropFiles)=\"filesDropped.emit($event)\"\n       (dragOver)=\"dragOver.emit($event)\"\n       (dragEnd)=\"dragEnd.emit($event)\"\n  >\n    <div class=\"layout-col flex\">\n      <ng-content></ng-content>\n      <!-- Default content -->\n      <div class=\"layout-col flex place-center-center gap-sm elder-default-content\">\n        <mat-icon class=\"elder-drop-zone-icon\">{{icon}}</mat-icon>\n        <span class=\"elder-drop-zone-prompt\">{{prompt | translate}}</span>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n" }]
+            args: [{ selector: 'elder-drop-zone', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-col full elder-drop-zone\"\n     elderFileDropZone\n     (dropFiles)=\"filesDropped.emit($event)\"\n     (dragOver)=\"dragOver.emit($event)\"\n     (dragEnd)=\"dragEnd.emit($event)\"\n>\n  <div class=\"layout-col flex\">\n    <ng-content></ng-content>\n    <!-- Default content -->\n    <div class=\"layout-col flex place-center-center gap-sm elder-default-content\">\n      <mat-icon class=\"elder-drop-zone-icon\">{{icon}}</mat-icon>\n      <span class=\"elder-drop-zone-prompt\">{{prompt | translate}}</span>\n    </div>\n  </div>\n</div>\n\n\n" }]
         }], ctorParameters: function () { return []; }, propDecorators: { filesDropped: [{
                 type: Output
             }], dragOver: [{
@@ -14044,7 +14105,7 @@ class ElderInfiniteScrollDirective {
         this._zonedoutScrollEvents = new Subject();
         this._closeToEndSubject = new ReplaySubject(1);
         this._scrollingSubject = new BehaviorSubject(false);
-        this.unsubscribe$ = new Subject();
+        this.destroy$ = new Subject();
         /**
          * Scroll event handler, invoked outside of angular zone.
          */
@@ -14055,8 +14116,8 @@ class ElderInfiniteScrollDirective {
             this._zonedoutScrollEvents.next(ev);
         };
         this.scrollEventListenerOptions = { capture: true, passive: true };
-        const scrollEvents$ = this._zonedoutScrollEvents.pipe(takeUntil(this.unsubscribe$), filter(ev => !!ev.target));
-        scrollEvents$.pipe(throttleTime(this.eventThrottle)).subscribe(event => {
+        const scrollEvents$ = this._zonedoutScrollEvents.pipe(takeUntil(this.destroy$), filter(ev => !!ev.target));
+        scrollEvents$.pipe(lazySampleTime(this.eventThrottle, true)).subscribe(event => {
             const eventTarget = event.target;
             if (this.isCloseToEnd(eventTarget)) {
                 // The zoned out events are not tracked by angular change detection for performance.
@@ -14085,8 +14146,8 @@ class ElderInfiniteScrollDirective {
         }
     }
     ngOnDestroy() {
-        this.unsubscribe$.next();
-        this.unsubscribe$.complete();
+        this.destroy$.next();
+        this.destroy$.complete();
         this.unregister(this._scrollContainer);
     }
     /***************************************************************************
@@ -14174,95 +14235,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 type: Input
             }] } });
 
-class ElderInfiniteAutocompleteDirective {
-    /***************************************************************************
-     *                                                                         *
-     * Constructor                                                             *
-     *                                                                         *
-     **************************************************************************/
-    constructor(autoComplete, infiniteScroll) {
-        this.autoComplete = autoComplete;
-        this.infiniteScroll = infiniteScroll;
-        /***************************************************************************
-         *                                                                         *
-         * Fields                                                                  *
-         *                                                                         *
-         **************************************************************************/
-        this.logger = LoggerFactory.getLogger(this.constructor.name);
-        this.unsubscribe$ = new Subject();
-        this.infiniteScroll.listenToHost = false; // We find the scroll container with our own logic
-        this.autoComplete.opened.pipe(takeUntil(this.unsubscribe$), tap(() => {
-            // Note: When autocomplete raises opened, panel is not yet created (by Overlay)
-            // Note: The panel will be available on next tick
-            // Note: The panel wil NOT open if there are no options to display
-            setTimeout(() => {
-                this.logger.debug('Assigning auto-complete panel to infinite-scroll handler:', this.autoComplete.panel.nativeElement);
-                this.infiniteScroll.scrollContainer = this.autoComplete.panel.nativeElement;
-            });
-        })).subscribe();
-        this.autoComplete.closed.pipe(takeUntil(this.unsubscribe$), tap(() => {
-            this.infiniteScroll.scrollContainer = null;
-        })).subscribe();
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Life-Cycle Hooks                                                        *
-     *                                                                         *
-     **************************************************************************/
-    ngOnInit() { }
-    ngOnDestroy() {
-        this.unsubscribe$.next();
-        this.unsubscribe$.complete();
-    }
-}
-ElderInfiniteAutocompleteDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ElderInfiniteAutocompleteDirective, deps: [{ token: i1$5.MatAutocomplete, host: true }, { token: ElderInfiniteScrollDirective, host: true }], target: i0.ɵɵFactoryTarget.Directive });
-ElderInfiniteAutocompleteDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: ElderInfiniteAutocompleteDirective, selector: "mat-autocomplete[elderElderInfiniteAutocomplete]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ElderInfiniteAutocompleteDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'mat-autocomplete[elderElderInfiniteAutocomplete]'
-                }]
-        }], ctorParameters: function () {
-        return [{ type: i1$5.MatAutocomplete, decorators: [{
-                        type: Host
-                    }] }, { type: ElderInfiniteScrollDirective, decorators: [{
-                        type: Host
-                    }] }];
-    } });
-
-/**
- * @deprecated Please switch to ElderInfiniteScrollDirective
- */
-class ElderInfiniteScrollLegacyDirective extends ElderInfiniteScrollDirective {
-}
-ElderInfiniteScrollLegacyDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ElderInfiniteScrollLegacyDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-ElderInfiniteScrollLegacyDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: ElderInfiniteScrollLegacyDirective, selector: "[infiniteScroll]", usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ElderInfiniteScrollLegacyDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[infiniteScroll]' }]
-        }] });
-class ElderInfiniteScrollModule {
-}
-ElderInfiniteScrollModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ElderInfiniteScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ElderInfiniteScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: ElderInfiniteScrollModule, declarations: [ElderInfiniteScrollDirective, ElderInfiniteScrollLegacyDirective, ElderInfiniteAutocompleteDirective], imports: [CommonModule], exports: [ElderInfiniteScrollDirective, ElderInfiniteScrollLegacyDirective, ElderInfiniteAutocompleteDirective] });
-ElderInfiniteScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ElderInfiniteScrollModule, imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ElderInfiniteScrollModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        ElderInfiniteScrollDirective,
-                        ElderInfiniteScrollLegacyDirective,
-                        ElderInfiniteAutocompleteDirective
-                    ],
-                    exports: [
-                        ElderInfiniteScrollDirective,
-                        ElderInfiniteScrollLegacyDirective,
-                        ElderInfiniteAutocompleteDirective
-                    ],
-                    imports: [CommonModule]
-                }]
-        }] });
-
 class ElderTableComponent extends ElderDataViewBaseComponent {
     /***************************************************************************
      *                                                                         *
@@ -14482,7 +14454,7 @@ ElderTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
             provide: ELDER_DATA_VIEW,
             useExisting: forwardRef(() => ElderTableComponent)
         }
-    ], queries: [{ propertyName: "columnDefs", predicate: MatColumnDef }, { propertyName: "elderColumns", predicate: ElderTableColumnDirective }, { propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "toolbarRowTemplateQuery", predicate: ElderTableToolbarDirective, read: TemplateRef }], viewQueries: [{ propertyName: "matTable", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "rowsQuery", predicate: ElderTableRowDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-card class=\"full\"\n          [class.embedded]=\"embedded\"\n          [appearance]=\"appearance\"\n          style=\"overflow: hidden\"\n>\n  <div class=\"layout-col elder-table full\">\n    <!-- Toolbar Rows -->\n    <ng-container *ngFor=\"let toolbarRowTemplate of toolbarRowTemplates$ | async\">\n      <ng-template *ngTemplateOutlet=\"toolbarRowTemplate; context: {$implicit: this}\">\n      </ng-template>\n    </ng-container>\n\n    <!-- Scrollable Table -->\n    <div class=\"layout-col scrollable elder-table-scroll\"\n         infiniteScroll\n         [eventThrottle]=\"150\"\n         [offsetFactor]=\"2\"\n         [ignoreScrollEvent]=\"!isContinuable || !(canLoadMore$ | async)\"\n         (closeToEnd)=\"requestMoreDataZoned($event)\"\n    >\n      <table\n        mat-table\n        class=\"elder-mat-inner-table\"\n        [trackBy]=\"trackByFn\"\n        [dataSource]=\"$any(dataContext$ | async)\"\n        [elderDataContextSelection]=\"dataContext$ | async\" #dataSelection=\"elderDataContextSelection\"\n        [elderDataContextSelectionModel]=\"selectionModel\"\n      >\n\n        <!-- selection Column -->\n        <ng-container matColumnDef=\"select\">\n          <th mat-header-cell *matHeaderCellDef>\n            <elder-selection-master-checkbox></elder-selection-master-checkbox>\n          </th>\n          <td mat-cell *matCellDef=\"let entity\">\n            <div class=\"layout-row place-start-center\">\n              <mat-checkbox (click)=\"$event.stopPropagation()\"\n                            (change)=\"$event ? selectionModel.toggle(entity) : null\"\n                            [checked]=\"selectionModel.observeSelection(entity) | async\"\n                            [disabled]=\"!selectionModel.isSelectable(entity)\"\n                            class=\"elder-table-checkbox\"\n                            [class.elder-table-checkbox-visible]=\"(dataSelection.selectionState$ | async).anySelected\"\n              >\n              </mat-checkbox>\n            </div>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container *ngIf=\"(tableModel.displayedColumnsInner$ | async) as displayedColumnsInner\">\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n          <tr mat-row class=\"elder-table-row\"\n              *matRowDef=\"let entity; columns: displayedColumnsInner;\"\n              [elderTableRow]=\"entity\"\n              [class.dense]=\"dense\"\n              [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n              [class.elder-row-removing]=\"removingField && entity[removingField]\"\n              [class.elder-table-row-selected]=\"interactionMode === 'selection' && selectionModel.observeSelection(entity) | async\"\n              (click)=\"onItemClick(entity)\"\n              (dblclick)=\"onItemDoubleClick(entity)\"\n          >\n          </tr>\n          <ng-container *ngIf=\"showFooter\">\n            <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n          </ng-container>\n        </ng-container>\n      </table>\n    </div>\n\n    <elder-data-context-state-indicator class=\"flex-none\" [dataContext]=\"dataContext\">\n    </elder-data-context-state-indicator>\n\n    <mat-progress-bar class=\"flex-none\"\n                      [mode]=\"(dataContext?.loading | async) ? 'indeterminate' : 'determinate'\"\n                      [color]=\"((dataContext?.status | async)?.hasError) ? 'warn' : 'primary'\">\n    </mat-progress-bar>\n\n    <!-- Optional Paginator Toolbar -->\n    <mat-paginator #matPaginator *ngIf=\"isActivePaged && (dataActivePaged.page | async) as page\"\n                   class=\"flex-none\"\n                   [length]=\"dataContext?.total | async\"\n                   [pageIndex]=\"page?.index\"\n                   [pageSize]=\"page?.size\"\n                   [pageSizeOptions]=\"pageSizeOptions\">\n    </mat-paginator>\n\n    <!-- Optional Continuation Footer -->\n    <div *ngIf=\"isContinuable\" class=\"layout-row flex-none place-end-center gap-md elder-table-footer\">\n\n      <span class=\"mat-caption noselect\" style=\"color: gray\">\n        {{(dataContext?.data | async)?.length}} / {{total$ | async}}\n      </span>\n\n      <button mat-icon-button type=\"button\" color=\"primary\"\n              [disabled]=\"!(canLoadMore$ | async)\"\n              (click)=\"dataContinuable.loadMore()\">\n        <mat-icon>keyboard_arrow_down</mat-icon>\n      </button>\n    </div>\n  </div>\n</mat-card>\n", styles: [".elder-table-scroll{height:100%}.elder-mat-inner-table{width:100%}.elder-table-row.dense{height:42px!important}.elder-mat-table-container{border-radius:4px;overflow:hidden}.mat-column-select{overflow:initial;min-width:72px;max-width:5%;width:72px}.elder-row-removing{text-decoration:line-through}.elder-row-hidden{display:none}.elder-table-row{cursor:pointer}:host{min-width:0;min-height:0}.elder-table-hint{color:gray}.elder-table-footer{height:44px}.elder-table-checkbox{opacity:.25;transition:opacity .5s ease-in-out}.elder-table-row:hover .elder-table-checkbox{opacity:.9}.elder-table-checkbox-visible{opacity:1}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$8.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i11.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i11.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i12.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "directive", type: ElderInfiniteScrollLegacyDirective, selector: "[infiniteScroll]" }, { kind: "component", type: i17.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: ElderTableRowDirective, selector: "tr[elderTableRow]", inputs: ["elderTableRow"], exportAs: ["elderTableRow"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "columnDefs", predicate: MatColumnDef }, { propertyName: "elderColumns", predicate: ElderTableColumnDirective }, { propertyName: "rowDefs", predicate: MatRowDef }, { propertyName: "toolbarRowTemplateQuery", predicate: ElderTableToolbarDirective, read: TemplateRef }], viewQueries: [{ propertyName: "matTable", first: true, predicate: MatTable, descendants: true, static: true }, { propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "rowsQuery", predicate: ElderTableRowDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-card class=\"full\"\n          [class.embedded]=\"embedded\"\n          [appearance]=\"appearance\"\n          style=\"overflow: hidden\"\n>\n  <div class=\"layout-col elder-table full\">\n    <!-- Toolbar Rows -->\n    <ng-container *ngFor=\"let toolbarRowTemplate of toolbarRowTemplates$ | async\">\n      <ng-template *ngTemplateOutlet=\"toolbarRowTemplate; context: {$implicit: this}\">\n      </ng-template>\n    </ng-container>\n\n    <!-- Scrollable Table -->\n    <div class=\"layout-col scrollable elder-table-scroll\"\n         elderInfiniteScroll\n         [eventThrottle]=\"150\"\n         [offsetFactor]=\"2\"\n         [ignoreScrollEvent]=\"!isContinuable || !(canLoadMore$ | async)\"\n         (closeToEnd)=\"requestMoreDataZoned($event)\"\n    >\n      <table\n        mat-table\n        class=\"elder-mat-inner-table\"\n        [trackBy]=\"trackByFn\"\n        [dataSource]=\"$any(dataContext$ | async)\"\n        [elderDataContextSelection]=\"dataContext$ | async\" #dataSelection=\"elderDataContextSelection\"\n        [elderDataContextSelectionModel]=\"selectionModel\"\n      >\n\n        <!-- selection Column -->\n        <ng-container matColumnDef=\"select\">\n          <th mat-header-cell *matHeaderCellDef>\n            <elder-selection-master-checkbox></elder-selection-master-checkbox>\n          </th>\n          <td mat-cell *matCellDef=\"let entity\">\n            <div class=\"layout-row place-start-center\">\n              <mat-checkbox (click)=\"$event.stopPropagation()\"\n                            (change)=\"$event ? selectionModel.toggle(entity) : null\"\n                            [checked]=\"selectionModel.observeSelection(entity) | async\"\n                            [disabled]=\"!selectionModel.isSelectable(entity)\"\n                            class=\"elder-table-checkbox\"\n                            [class.elder-table-checkbox-visible]=\"(dataSelection.selectionState$ | async).anySelected\"\n              >\n              </mat-checkbox>\n            </div>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container *ngIf=\"(tableModel.displayedColumnsInner$ | async) as displayedColumnsInner\">\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n          <tr mat-row class=\"elder-table-row\"\n              *matRowDef=\"let entity; columns: displayedColumnsInner;\"\n              [elderTableRow]=\"entity\"\n              [class.dense]=\"dense\"\n              [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n              [class.elder-row-removing]=\"removingField && entity[removingField]\"\n              [class.elder-table-row-selected]=\"interactionMode === 'selection' && selectionModel.observeSelection(entity) | async\"\n              (click)=\"onItemClick(entity)\"\n              (dblclick)=\"onItemDoubleClick(entity)\"\n          >\n          </tr>\n          <ng-container *ngIf=\"showFooter\">\n            <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n          </ng-container>\n        </ng-container>\n      </table>\n    </div>\n\n    <elder-data-context-state-indicator class=\"flex-none\" [dataContext]=\"dataContext\">\n    </elder-data-context-state-indicator>\n\n    <mat-progress-bar class=\"flex-none\"\n                      [mode]=\"(dataContext?.loading | async) ? 'indeterminate' : 'determinate'\"\n                      [color]=\"((dataContext?.status | async)?.hasError) ? 'warn' : 'primary'\">\n    </mat-progress-bar>\n\n    <!-- Optional Paginator Toolbar -->\n    <mat-paginator #matPaginator *ngIf=\"isActivePaged && (dataActivePaged.page | async) as page\"\n                   class=\"flex-none\"\n                   [length]=\"dataContext?.total | async\"\n                   [pageIndex]=\"page?.index\"\n                   [pageSize]=\"page?.size\"\n                   [pageSizeOptions]=\"pageSizeOptions\">\n    </mat-paginator>\n\n    <!-- Optional Continuation Footer -->\n    <div *ngIf=\"isContinuable\" class=\"layout-row flex-none place-end-center gap-md elder-table-footer\">\n\n      <span class=\"mat-caption noselect\" style=\"color: gray\">\n        {{(dataContext?.data | async)?.length}} / {{total$ | async}}\n      </span>\n\n      <button mat-icon-button type=\"button\" color=\"primary\"\n              [disabled]=\"!(canLoadMore$ | async)\"\n              (click)=\"dataContinuable.loadMore()\">\n        <mat-icon>keyboard_arrow_down</mat-icon>\n      </button>\n    </div>\n  </div>\n</mat-card>\n", styles: [".elder-table-scroll{height:100%}.elder-mat-inner-table{width:100%}.elder-table-row.dense{height:42px!important}.elder-mat-table-container{border-radius:4px;overflow:hidden}.mat-column-select{overflow:initial;min-width:72px;max-width:5%;width:72px}.elder-row-removing{text-decoration:line-through}.elder-row-hidden{display:none}.elder-table-row{cursor:pointer}:host{min-width:0;min-height:0}.elder-table-hint{color:gray}.elder-table-footer{height:44px}.elder-table-checkbox{opacity:.25;transition:opacity .5s ease-in-out}.elder-table-row:hover .elder-table-checkbox{opacity:.9}.elder-table-checkbox-visible{opacity:1}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i1$8.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex"], exportAs: ["matCheckbox"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i11.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i11.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i11.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i11.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { kind: "directive", type: i11.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i11.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i11.MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: i11.MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "directive", type: i11.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i11.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: i11.MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "component", type: i11.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i11.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: i11.MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: i12.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "component", type: i17.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: ElderTableRowDirective, selector: "tr[elderTableRow]", inputs: ["elderTableRow"], exportAs: ["elderTableRow"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ElderTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -14491,7 +14463,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                             provide: ELDER_DATA_VIEW,
                             useExisting: forwardRef(() => ElderTableComponent)
                         }
-                    ], template: "<mat-card class=\"full\"\n          [class.embedded]=\"embedded\"\n          [appearance]=\"appearance\"\n          style=\"overflow: hidden\"\n>\n  <div class=\"layout-col elder-table full\">\n    <!-- Toolbar Rows -->\n    <ng-container *ngFor=\"let toolbarRowTemplate of toolbarRowTemplates$ | async\">\n      <ng-template *ngTemplateOutlet=\"toolbarRowTemplate; context: {$implicit: this}\">\n      </ng-template>\n    </ng-container>\n\n    <!-- Scrollable Table -->\n    <div class=\"layout-col scrollable elder-table-scroll\"\n         infiniteScroll\n         [eventThrottle]=\"150\"\n         [offsetFactor]=\"2\"\n         [ignoreScrollEvent]=\"!isContinuable || !(canLoadMore$ | async)\"\n         (closeToEnd)=\"requestMoreDataZoned($event)\"\n    >\n      <table\n        mat-table\n        class=\"elder-mat-inner-table\"\n        [trackBy]=\"trackByFn\"\n        [dataSource]=\"$any(dataContext$ | async)\"\n        [elderDataContextSelection]=\"dataContext$ | async\" #dataSelection=\"elderDataContextSelection\"\n        [elderDataContextSelectionModel]=\"selectionModel\"\n      >\n\n        <!-- selection Column -->\n        <ng-container matColumnDef=\"select\">\n          <th mat-header-cell *matHeaderCellDef>\n            <elder-selection-master-checkbox></elder-selection-master-checkbox>\n          </th>\n          <td mat-cell *matCellDef=\"let entity\">\n            <div class=\"layout-row place-start-center\">\n              <mat-checkbox (click)=\"$event.stopPropagation()\"\n                            (change)=\"$event ? selectionModel.toggle(entity) : null\"\n                            [checked]=\"selectionModel.observeSelection(entity) | async\"\n                            [disabled]=\"!selectionModel.isSelectable(entity)\"\n                            class=\"elder-table-checkbox\"\n                            [class.elder-table-checkbox-visible]=\"(dataSelection.selectionState$ | async).anySelected\"\n              >\n              </mat-checkbox>\n            </div>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container *ngIf=\"(tableModel.displayedColumnsInner$ | async) as displayedColumnsInner\">\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n          <tr mat-row class=\"elder-table-row\"\n              *matRowDef=\"let entity; columns: displayedColumnsInner;\"\n              [elderTableRow]=\"entity\"\n              [class.dense]=\"dense\"\n              [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n              [class.elder-row-removing]=\"removingField && entity[removingField]\"\n              [class.elder-table-row-selected]=\"interactionMode === 'selection' && selectionModel.observeSelection(entity) | async\"\n              (click)=\"onItemClick(entity)\"\n              (dblclick)=\"onItemDoubleClick(entity)\"\n          >\n          </tr>\n          <ng-container *ngIf=\"showFooter\">\n            <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n          </ng-container>\n        </ng-container>\n      </table>\n    </div>\n\n    <elder-data-context-state-indicator class=\"flex-none\" [dataContext]=\"dataContext\">\n    </elder-data-context-state-indicator>\n\n    <mat-progress-bar class=\"flex-none\"\n                      [mode]=\"(dataContext?.loading | async) ? 'indeterminate' : 'determinate'\"\n                      [color]=\"((dataContext?.status | async)?.hasError) ? 'warn' : 'primary'\">\n    </mat-progress-bar>\n\n    <!-- Optional Paginator Toolbar -->\n    <mat-paginator #matPaginator *ngIf=\"isActivePaged && (dataActivePaged.page | async) as page\"\n                   class=\"flex-none\"\n                   [length]=\"dataContext?.total | async\"\n                   [pageIndex]=\"page?.index\"\n                   [pageSize]=\"page?.size\"\n                   [pageSizeOptions]=\"pageSizeOptions\">\n    </mat-paginator>\n\n    <!-- Optional Continuation Footer -->\n    <div *ngIf=\"isContinuable\" class=\"layout-row flex-none place-end-center gap-md elder-table-footer\">\n\n      <span class=\"mat-caption noselect\" style=\"color: gray\">\n        {{(dataContext?.data | async)?.length}} / {{total$ | async}}\n      </span>\n\n      <button mat-icon-button type=\"button\" color=\"primary\"\n              [disabled]=\"!(canLoadMore$ | async)\"\n              (click)=\"dataContinuable.loadMore()\">\n        <mat-icon>keyboard_arrow_down</mat-icon>\n      </button>\n    </div>\n  </div>\n</mat-card>\n", styles: [".elder-table-scroll{height:100%}.elder-mat-inner-table{width:100%}.elder-table-row.dense{height:42px!important}.elder-mat-table-container{border-radius:4px;overflow:hidden}.mat-column-select{overflow:initial;min-width:72px;max-width:5%;width:72px}.elder-row-removing{text-decoration:line-through}.elder-row-hidden{display:none}.elder-table-row{cursor:pointer}:host{min-width:0;min-height:0}.elder-table-hint{color:gray}.elder-table-footer{height:44px}.elder-table-checkbox{opacity:.25;transition:opacity .5s ease-in-out}.elder-table-row:hover .elder-table-checkbox{opacity:.9}.elder-table-checkbox-visible{opacity:1}\n"] }]
+                    ], template: "<mat-card class=\"full\"\n          [class.embedded]=\"embedded\"\n          [appearance]=\"appearance\"\n          style=\"overflow: hidden\"\n>\n  <div class=\"layout-col elder-table full\">\n    <!-- Toolbar Rows -->\n    <ng-container *ngFor=\"let toolbarRowTemplate of toolbarRowTemplates$ | async\">\n      <ng-template *ngTemplateOutlet=\"toolbarRowTemplate; context: {$implicit: this}\">\n      </ng-template>\n    </ng-container>\n\n    <!-- Scrollable Table -->\n    <div class=\"layout-col scrollable elder-table-scroll\"\n         elderInfiniteScroll\n         [eventThrottle]=\"150\"\n         [offsetFactor]=\"2\"\n         [ignoreScrollEvent]=\"!isContinuable || !(canLoadMore$ | async)\"\n         (closeToEnd)=\"requestMoreDataZoned($event)\"\n    >\n      <table\n        mat-table\n        class=\"elder-mat-inner-table\"\n        [trackBy]=\"trackByFn\"\n        [dataSource]=\"$any(dataContext$ | async)\"\n        [elderDataContextSelection]=\"dataContext$ | async\" #dataSelection=\"elderDataContextSelection\"\n        [elderDataContextSelectionModel]=\"selectionModel\"\n      >\n\n        <!-- selection Column -->\n        <ng-container matColumnDef=\"select\">\n          <th mat-header-cell *matHeaderCellDef>\n            <elder-selection-master-checkbox></elder-selection-master-checkbox>\n          </th>\n          <td mat-cell *matCellDef=\"let entity\">\n            <div class=\"layout-row place-start-center\">\n              <mat-checkbox (click)=\"$event.stopPropagation()\"\n                            (change)=\"$event ? selectionModel.toggle(entity) : null\"\n                            [checked]=\"selectionModel.observeSelection(entity) | async\"\n                            [disabled]=\"!selectionModel.isSelectable(entity)\"\n                            class=\"elder-table-checkbox\"\n                            [class.elder-table-checkbox-visible]=\"(dataSelection.selectionState$ | async).anySelected\"\n              >\n              </mat-checkbox>\n            </div>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <ng-container *ngIf=\"(tableModel.displayedColumnsInner$ | async) as displayedColumnsInner\">\n          <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n          <tr mat-row class=\"elder-table-row\"\n              *matRowDef=\"let entity; columns: displayedColumnsInner;\"\n              [elderTableRow]=\"entity\"\n              [class.dense]=\"dense\"\n              [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n              [class.elder-row-removing]=\"removingField && entity[removingField]\"\n              [class.elder-table-row-selected]=\"interactionMode === 'selection' && selectionModel.observeSelection(entity) | async\"\n              (click)=\"onItemClick(entity)\"\n              (dblclick)=\"onItemDoubleClick(entity)\"\n          >\n          </tr>\n          <ng-container *ngIf=\"showFooter\">\n            <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner; sticky: true\"></tr>\n          </ng-container>\n        </ng-container>\n      </table>\n    </div>\n\n    <elder-data-context-state-indicator class=\"flex-none\" [dataContext]=\"dataContext\">\n    </elder-data-context-state-indicator>\n\n    <mat-progress-bar class=\"flex-none\"\n                      [mode]=\"(dataContext?.loading | async) ? 'indeterminate' : 'determinate'\"\n                      [color]=\"((dataContext?.status | async)?.hasError) ? 'warn' : 'primary'\">\n    </mat-progress-bar>\n\n    <!-- Optional Paginator Toolbar -->\n    <mat-paginator #matPaginator *ngIf=\"isActivePaged && (dataActivePaged.page | async) as page\"\n                   class=\"flex-none\"\n                   [length]=\"dataContext?.total | async\"\n                   [pageIndex]=\"page?.index\"\n                   [pageSize]=\"page?.size\"\n                   [pageSizeOptions]=\"pageSizeOptions\">\n    </mat-paginator>\n\n    <!-- Optional Continuation Footer -->\n    <div *ngIf=\"isContinuable\" class=\"layout-row flex-none place-end-center gap-md elder-table-footer\">\n\n      <span class=\"mat-caption noselect\" style=\"color: gray\">\n        {{(dataContext?.data | async)?.length}} / {{total$ | async}}\n      </span>\n\n      <button mat-icon-button type=\"button\" color=\"primary\"\n              [disabled]=\"!(canLoadMore$ | async)\"\n              (click)=\"dataContinuable.loadMore()\">\n        <mat-icon>keyboard_arrow_down</mat-icon>\n      </button>\n    </div>\n  </div>\n</mat-card>\n", styles: [".elder-table-scroll{height:100%}.elder-mat-inner-table{width:100%}.elder-table-row.dense{height:42px!important}.elder-mat-table-container{border-radius:4px;overflow:hidden}.mat-column-select{overflow:initial;min-width:72px;max-width:5%;width:72px}.elder-row-removing{text-decoration:line-through}.elder-row-hidden{display:none}.elder-table-row{cursor:pointer}:host{min-width:0;min-height:0}.elder-table-hint{color:gray}.elder-table-footer{height:44px}.elder-table-checkbox{opacity:.25;transition:opacity .5s ease-in-out}.elder-table-row:hover .elder-table-checkbox{opacity:.9}.elder-table-checkbox-visible{opacity:1}\n"] }]
         }], ctorParameters: function () {
         return [{ type: ElderTableModel }, { type: SelectionModel, decorators: [{
                         type: Optional
@@ -14549,6 +14521,84 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 type: Input
             }] } });
 
+class ElderInfiniteAutocompleteDirective {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(autoComplete, infiniteScroll) {
+        this.autoComplete = autoComplete;
+        this.infiniteScroll = infiniteScroll;
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.logger = LoggerFactory.getLogger(this.constructor.name);
+        this.unsubscribe$ = new Subject();
+        this.infiniteScroll.listenToHost = false; // We find the scroll container with our own logic
+        this.autoComplete.opened.pipe(takeUntil(this.unsubscribe$), tap(() => {
+            // Note: When autocomplete raises opened, panel is not yet created (by Overlay)
+            // Note: The panel will be available on next tick
+            // Note: The panel wil NOT open if there are no options to display
+            setTimeout(() => {
+                this.logger.debug('Assigning auto-complete panel to infinite-scroll handler:', this.autoComplete.panel.nativeElement);
+                this.infiniteScroll.scrollContainer = this.autoComplete.panel.nativeElement;
+            });
+        })).subscribe();
+        this.autoComplete.closed.pipe(takeUntil(this.unsubscribe$), tap(() => {
+            this.infiniteScroll.scrollContainer = null;
+        })).subscribe();
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Life-Cycle Hooks                                                        *
+     *                                                                         *
+     **************************************************************************/
+    ngOnInit() { }
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+    }
+}
+ElderInfiniteAutocompleteDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ElderInfiniteAutocompleteDirective, deps: [{ token: i1$5.MatAutocomplete, host: true }, { token: ElderInfiniteScrollDirective, host: true }], target: i0.ɵɵFactoryTarget.Directive });
+ElderInfiniteAutocompleteDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: ElderInfiniteAutocompleteDirective, selector: "mat-autocomplete[elderElderInfiniteAutocomplete]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ElderInfiniteAutocompleteDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'mat-autocomplete[elderElderInfiniteAutocomplete]'
+                }]
+        }], ctorParameters: function () {
+        return [{ type: i1$5.MatAutocomplete, decorators: [{
+                        type: Host
+                    }] }, { type: ElderInfiniteScrollDirective, decorators: [{
+                        type: Host
+                    }] }];
+    } });
+
+class ElderInfiniteScrollModule {
+}
+ElderInfiniteScrollModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ElderInfiniteScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ElderInfiniteScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.7", ngImport: i0, type: ElderInfiniteScrollModule, declarations: [ElderInfiniteScrollDirective,
+        ElderInfiniteAutocompleteDirective], imports: [CommonModule], exports: [ElderInfiniteScrollDirective,
+        ElderInfiniteAutocompleteDirective] });
+ElderInfiniteScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ElderInfiniteScrollModule, imports: [CommonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ElderInfiniteScrollModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ElderInfiniteScrollDirective,
+                        ElderInfiniteAutocompleteDirective
+                    ],
+                    exports: [
+                        ElderInfiniteScrollDirective,
+                        ElderInfiniteAutocompleteDirective
+                    ],
+                    imports: [CommonModule]
+                }]
+        }] });
+
 class ElderPaginatorIntl extends MatPaginatorIntl {
     /***************************************************************************
      *                                                                         *
@@ -16874,7 +16924,7 @@ ElderGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
             provide: ELDER_DATA_VIEW,
             useExisting: forwardRef(() => ElderGridComponent)
         }
-    ], queries: [{ propertyName: "tileTemplateQuery", first: true, predicate: ElderGridTileDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "toolbarTemplateQuery", first: true, predicate: ElderGridToolbarDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "virtualScrollViewPort", first: true, predicate: ["virtualScrollViewPort"], descendants: true, static: true }, { propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-card class=\"full\"\n          [class.embedded]=\"embedded\"\n          [appearance]=\"appearance\"\n          style=\"overflow: hidden\"\n>\n  <!-- Grid Browser -->\n  <div class=\"layout-col full elder-grid-container\"\n       *ngIf=\"dataContext$ | async as data\"\n       [elderDataContextSelection]=\"data\" #dataSelection=\"elderDataContextSelection\"\n       [elderDataContextSelectionModel]=\"selectionModel\"\n  >\n    <!-- Toolbar Row -->\n    <div *ngIf=\"toolbarVisible\"\n         class=\"layout-row place-start-center flex-none elder-grid-toolbar\">\n\n      <div class=\"layout-col flex-none\" style=\"padding-left: 8px; padding-right: 8px\" *ngIf=\"selectionVisible\">\n        <elder-selection-master-checkbox class=\"flex-none\" style=\"padding-left: 12px\"></elder-selection-master-checkbox>\n      </div>\n\n      <!-- Toolbar -->\n      <ng-container *ngIf=\"toolbarTemplate\">\n        <ng-template *ngTemplateOutlet=\"toolbarTemplate; context: {$implicit: this}\"></ng-template>\n      </ng-container>\n\n      <elder-single-sort *ngIf=\"availableSorts && availableSorts.length > 0 && data.sort.sorts | async as sorts\"\n                         class=\"flex-none\"\n                         [availableSorts]=\"availableSorts\"\n                         [translationPrefix]=\"sortTranslationPrefix\"\n                         [sort]=\"sorts[0]\"\n                         (sortChange)=\"updateSort($event)\">\n      </elder-single-sort>\n    </div>\n\n    <mat-divider *ngIf=\"toolbarVisible\"></mat-divider>\n\n    <elder-data-context-state-indicator class=\"flex-none\" [dataContext]=\"data\">\n    </elder-data-context-state-indicator>\n\n    <!-- [cdkDropListSortingDisabled]=\"true\" -->\n    <!-- cdkDropList -->\n    <cdk-virtual-scroll-viewport\n      class=\"layout-col flex elder-grid-browser\"\n      id=\"documents-container\"\n      [itemSize]=\"itemHeight\"\n      [minBufferPx]=\"itemHeight * 2\"\n      [maxBufferPx]=\"itemHeight * 3\"\n      #virtualScrollViewPort\n      infiniteScroll\n      [eventThrottle]=\"200\"\n      [offsetFactor]=\"2\"\n      [ignoreScrollEvent]=\"data.loading | async\"\n      [containerId]=\"'documents-container'\" [listenToHost]=\"false\"\n      (closeToEnd)=\"requestMoreDataZoned($event)\">\n\n      <!-- (scrolling)=\"onScrolling($event)\" -->\n\n      <div\n        *cdkVirtualFor=\"let row of dataRows$; trackBy: trackByIndex; templateCacheSize: 50\"\n        class=\"elder-grid-tile-row\"\n        [style.height]=\"itemHeight + 'px'\">\n\n        <ng-container *ngFor=\"let tile of row; trackBy: trackByFn\">\n\n          <!-- Tile Cell -->\n          <mat-card appearance=\"outlined\" *ngIf=\"showTile(tile)\" class=\"elder-grid-tile\">\n            <div class=\"elder-grid-tile-content\"\n                 (click)=\"onItemClick(tile)\"\n                 (dblclick)=\"onItemDoubleClick(tile)\">\n              <ng-container\n                *ngTemplateOutlet=\"tileTemplate || simpleTileTemplate; context: {$implicit: tile}\">\n              </ng-container>\n\n              <!-- Overlay (Selection) -->\n              <ng-container *ngIf=\"selectionVisible\">\n                <div *ngIf=\"selectionModel.selection | async as selection\"\n                     class=\"elder-grid-tile-overlay elder-click-through\"\n                     [class.elder-grid-tile-overlay-hidden]=\"!inSelectionMode(selection)\"\n                     [class.elder-grid-tile-overlay-visible]=\"inSelectionMode(selection)\"\n                >\n                  <button mat-icon-button type=\"button\"\n                          (click)=\"selectionModel.toggle(tile)\" elderStopEventPropagation\n                          class=\"elder-grid-tile-check\">\n                    <mat-icon\n                      [class.elder-selected]=\"(selectionModel.observeSelection(tile) | async)\"\n                    >\n                      {{(selectionModel.observeSelection(tile) | async) ? 'check_circle' : 'radio_button_unchecked'}}\n                    </mat-icon>\n                  </button>\n                </div>\n              </ng-container>\n\n            </div>\n          </mat-card>\n\n          <div *ngIf=\"!showTile(tile)\" class=\"elder-grid-tile-hidden\"></div>\n        </ng-container>\n\n      </div>\n\n    </cdk-virtual-scroll-viewport>\n\n\n    <mat-progress-bar class=\"flex-none\"\n                      [mode]=\"(data?.loading | async) ? 'indeterminate' : 'determinate'\"\n                      [color]=\"(data && (data.status | async)?.hasError) ? 'warn' : 'primary'\">\n    </mat-progress-bar>\n\n    <!-- Footer -->\n    <div class=\"layout-row place-end-center gap-md flex-none elder-grid-footer\"\n         *ngIf=\"footerVisible\"\n         style=\"padding-right: 12px\">\n\n      <!-- Continuable -->\n      <ng-container *ngIf=\"isContinuable\">\n         <span class=\"mat-caption noselect\" style=\"color: gray\">\n            {{(dataSnapshot?.data | async)?.length}} / {{total$ | async}}\n          </span>\n\n        <button mat-icon-button type=\"button\"\n                color=\"primary\"\n                [disabled]=\"!(canLoadMore$ | async)\"\n                (click)=\"dataSnapshot.loadMore()\">\n          <mat-icon>keyboard_arrow_down</mat-icon>\n        </button>\n      </ng-container>\n\n      <!-- Paged -->\n      <mat-paginator #matPaginator *ngIf=\"isActivePaged && (dataActivePaged.page | async) as page\"\n                     class=\"flex-none\"\n                     [length]=\"dataContext?.total | async\"\n                     [pageIndex]=\"page?.index\"\n                     [pageSize]=\"page?.size\"\n                     [pageSizeOptions]=\"pageSizeOptions\">\n      </mat-paginator>\n\n      <!-- Local Source -->\n      <ng-container *ngIf=\"!isActivePaged && !isContinuable\">\n         <span class=\"mat-caption noselect\" style=\"color: gray\">\n            {{(dataSnapshot?.data | async)?.length}}\n          </span>\n      </ng-container>\n\n    </div>\n\n\n  </div>\n</mat-card>\n\n<ng-template #simpleTileTemplate let-tile>\n  <div *ngIf=\"tile\" class=\"layout-col place-center-center flex\" style=\"background-color: lightblue\">\n    <p class=\"noselect\">Tile: {{tile}}</p>\n  </div>\n</ng-template>\n", styles: [":host{min-width:0;min-height:0}.elder-grid-tile-row{display:flex;flex-direction:row;padding:8px}.elder-grid-tile-row:first-child{padding-top:16px}.elder-grid-tile-hidden{flex:0 1 100%;margin:8px;width:100%;height:100%}.elder-grid-tile-content{position:relative;width:100%;height:100%;overflow:hidden}.elder-grid-tile-overlay{position:absolute;inset:0;transition:background-color .1s ease-in,opacity .1s ease-in}.elder-click-through{pointer-events:none}.elder-grid-tile-overlay-visible{opacity:1}.elder-grid-tile-overlay-hidden{opacity:0}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i4$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i9.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i9.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: ElderSingleSortComponent, selector: "elder-single-sort", inputs: ["availableSorts", "translationPrefix", "sort"], outputs: ["sortChange"] }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "directive", type: ElderInfiniteScrollLegacyDirective, selector: "[infiniteScroll]" }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: i12.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i17.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    ], queries: [{ propertyName: "tileTemplateQuery", first: true, predicate: ElderGridTileDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "toolbarTemplateQuery", first: true, predicate: ElderGridToolbarDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "virtualScrollViewPort", first: true, predicate: ["virtualScrollViewPort"], descendants: true, static: true }, { propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-card class=\"full\"\n          [class.embedded]=\"embedded\"\n          [appearance]=\"appearance\"\n          style=\"overflow: hidden\"\n>\n  <!-- Grid Browser -->\n  <div class=\"layout-col full elder-grid-container\"\n       *ngIf=\"dataContext$ | async as data\"\n       [elderDataContextSelection]=\"data\" #dataSelection=\"elderDataContextSelection\"\n       [elderDataContextSelectionModel]=\"selectionModel\"\n  >\n    <!-- Toolbar Row -->\n    <div *ngIf=\"toolbarVisible\"\n         class=\"layout-row place-start-center flex-none elder-grid-toolbar\">\n\n      <div class=\"layout-col flex-none\" style=\"padding-left: 8px; padding-right: 8px\" *ngIf=\"selectionVisible\">\n        <elder-selection-master-checkbox class=\"flex-none\" style=\"padding-left: 12px\"></elder-selection-master-checkbox>\n      </div>\n\n      <!-- Toolbar -->\n      <ng-container *ngIf=\"toolbarTemplate\">\n        <ng-template *ngTemplateOutlet=\"toolbarTemplate; context: {$implicit: this}\"></ng-template>\n      </ng-container>\n\n      <elder-single-sort *ngIf=\"availableSorts && availableSorts.length > 0 && data.sort.sorts | async as sorts\"\n                         class=\"flex-none\"\n                         [availableSorts]=\"availableSorts\"\n                         [translationPrefix]=\"sortTranslationPrefix\"\n                         [sort]=\"sorts[0]\"\n                         (sortChange)=\"updateSort($event)\">\n      </elder-single-sort>\n    </div>\n\n    <mat-divider *ngIf=\"toolbarVisible\"></mat-divider>\n\n    <elder-data-context-state-indicator class=\"flex-none\" [dataContext]=\"data\">\n    </elder-data-context-state-indicator>\n\n    <!-- [cdkDropListSortingDisabled]=\"true\" -->\n    <!-- cdkDropList -->\n    <cdk-virtual-scroll-viewport\n      class=\"layout-col flex elder-grid-browser\"\n      id=\"documents-container\"\n      [itemSize]=\"itemHeight\"\n      [minBufferPx]=\"itemHeight * 2\"\n      [maxBufferPx]=\"itemHeight * 3\"\n      #virtualScrollViewPort\n      elderInfiniteScroll\n      [eventThrottle]=\"200\"\n      [offsetFactor]=\"2\"\n      [ignoreScrollEvent]=\"data.loading | async\"\n      [containerId]=\"'documents-container'\" [listenToHost]=\"false\"\n      (closeToEnd)=\"requestMoreDataZoned($event)\">\n\n      <!-- (scrolling)=\"onScrolling($event)\" -->\n\n      <div\n        *cdkVirtualFor=\"let row of dataRows$; trackBy: trackByIndex; templateCacheSize: 50\"\n        class=\"elder-grid-tile-row\"\n        [style.height]=\"itemHeight + 'px'\">\n\n        <ng-container *ngFor=\"let tile of row; trackBy: trackByFn\">\n\n          <!-- Tile Cell -->\n          <mat-card appearance=\"outlined\" *ngIf=\"showTile(tile)\" class=\"elder-grid-tile\">\n            <div class=\"elder-grid-tile-content\"\n                 (click)=\"onItemClick(tile)\"\n                 (dblclick)=\"onItemDoubleClick(tile)\">\n              <ng-container\n                *ngTemplateOutlet=\"tileTemplate || simpleTileTemplate; context: {$implicit: tile}\">\n              </ng-container>\n\n              <!-- Overlay (Selection) -->\n              <ng-container *ngIf=\"selectionVisible\">\n                <div *ngIf=\"selectionModel.selection | async as selection\"\n                     class=\"elder-grid-tile-overlay elder-click-through\"\n                     [class.elder-grid-tile-overlay-hidden]=\"!inSelectionMode(selection)\"\n                     [class.elder-grid-tile-overlay-visible]=\"inSelectionMode(selection)\"\n                >\n                  <button mat-icon-button type=\"button\"\n                          (click)=\"selectionModel.toggle(tile)\" elderStopEventPropagation\n                          class=\"elder-grid-tile-check\">\n                    <mat-icon\n                      [class.elder-selected]=\"(selectionModel.observeSelection(tile) | async)\"\n                    >\n                      {{(selectionModel.observeSelection(tile) | async) ? 'check_circle' : 'radio_button_unchecked'}}\n                    </mat-icon>\n                  </button>\n                </div>\n              </ng-container>\n\n            </div>\n          </mat-card>\n\n          <div *ngIf=\"!showTile(tile)\" class=\"elder-grid-tile-hidden\"></div>\n        </ng-container>\n\n      </div>\n\n    </cdk-virtual-scroll-viewport>\n\n\n    <mat-progress-bar class=\"flex-none\"\n                      [mode]=\"(data?.loading | async) ? 'indeterminate' : 'determinate'\"\n                      [color]=\"(data && (data.status | async)?.hasError) ? 'warn' : 'primary'\">\n    </mat-progress-bar>\n\n    <!-- Footer -->\n    <div class=\"layout-row place-end-center gap-md flex-none elder-grid-footer\"\n         *ngIf=\"footerVisible\"\n         style=\"padding-right: 12px\">\n\n      <!-- Continuable -->\n      <ng-container *ngIf=\"isContinuable\">\n         <span class=\"mat-caption noselect\" style=\"color: gray\">\n            {{(dataSnapshot?.data | async)?.length}} / {{total$ | async}}\n          </span>\n\n        <button mat-icon-button type=\"button\"\n                color=\"primary\"\n                [disabled]=\"!(canLoadMore$ | async)\"\n                (click)=\"dataSnapshot.loadMore()\">\n          <mat-icon>keyboard_arrow_down</mat-icon>\n        </button>\n      </ng-container>\n\n      <!-- Paged -->\n      <mat-paginator #matPaginator *ngIf=\"isActivePaged && (dataActivePaged.page | async) as page\"\n                     class=\"flex-none\"\n                     [length]=\"dataContext?.total | async\"\n                     [pageIndex]=\"page?.index\"\n                     [pageSize]=\"page?.size\"\n                     [pageSizeOptions]=\"pageSizeOptions\">\n      </mat-paginator>\n\n      <!-- Local Source -->\n      <ng-container *ngIf=\"!isActivePaged && !isContinuable\">\n         <span class=\"mat-caption noselect\" style=\"color: gray\">\n            {{(dataSnapshot?.data | async)?.length}}\n          </span>\n      </ng-container>\n\n    </div>\n\n\n  </div>\n</mat-card>\n\n<ng-template #simpleTileTemplate let-tile>\n  <div *ngIf=\"tile\" class=\"layout-col place-center-center flex\" style=\"background-color: lightblue\">\n    <p class=\"noselect\">Tile: {{tile}}</p>\n  </div>\n</ng-template>\n", styles: [":host{min-width:0;min-height:0}.elder-grid-tile-row{display:flex;flex-direction:row;padding:8px}.elder-grid-tile-row:first-child{padding-top:16px}.elder-grid-tile-hidden{flex:0 1 100%;margin:8px;width:100%;height:100%}.elder-grid-tile-content{position:relative;width:100%;height:100%;overflow:hidden}.elder-grid-tile-overlay{position:absolute;inset:0;transition:background-color .1s ease-in,opacity .1s ease-in}.elder-click-through{pointer-events:none}.elder-grid-tile-overlay-visible{opacity:1}.elder-grid-tile-overlay-hidden{opacity:0}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5$3.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: i4$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i9.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i9.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i9.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: ElderSingleSortComponent, selector: "elder-single-sort", inputs: ["availableSorts", "translationPrefix", "sort"], outputs: ["sortChange"] }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: i12.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }, { kind: "component", type: i17.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ElderGridComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-grid', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -16882,7 +16932,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                             provide: ELDER_DATA_VIEW,
                             useExisting: forwardRef(() => ElderGridComponent)
                         }
-                    ], template: "<mat-card class=\"full\"\n          [class.embedded]=\"embedded\"\n          [appearance]=\"appearance\"\n          style=\"overflow: hidden\"\n>\n  <!-- Grid Browser -->\n  <div class=\"layout-col full elder-grid-container\"\n       *ngIf=\"dataContext$ | async as data\"\n       [elderDataContextSelection]=\"data\" #dataSelection=\"elderDataContextSelection\"\n       [elderDataContextSelectionModel]=\"selectionModel\"\n  >\n    <!-- Toolbar Row -->\n    <div *ngIf=\"toolbarVisible\"\n         class=\"layout-row place-start-center flex-none elder-grid-toolbar\">\n\n      <div class=\"layout-col flex-none\" style=\"padding-left: 8px; padding-right: 8px\" *ngIf=\"selectionVisible\">\n        <elder-selection-master-checkbox class=\"flex-none\" style=\"padding-left: 12px\"></elder-selection-master-checkbox>\n      </div>\n\n      <!-- Toolbar -->\n      <ng-container *ngIf=\"toolbarTemplate\">\n        <ng-template *ngTemplateOutlet=\"toolbarTemplate; context: {$implicit: this}\"></ng-template>\n      </ng-container>\n\n      <elder-single-sort *ngIf=\"availableSorts && availableSorts.length > 0 && data.sort.sorts | async as sorts\"\n                         class=\"flex-none\"\n                         [availableSorts]=\"availableSorts\"\n                         [translationPrefix]=\"sortTranslationPrefix\"\n                         [sort]=\"sorts[0]\"\n                         (sortChange)=\"updateSort($event)\">\n      </elder-single-sort>\n    </div>\n\n    <mat-divider *ngIf=\"toolbarVisible\"></mat-divider>\n\n    <elder-data-context-state-indicator class=\"flex-none\" [dataContext]=\"data\">\n    </elder-data-context-state-indicator>\n\n    <!-- [cdkDropListSortingDisabled]=\"true\" -->\n    <!-- cdkDropList -->\n    <cdk-virtual-scroll-viewport\n      class=\"layout-col flex elder-grid-browser\"\n      id=\"documents-container\"\n      [itemSize]=\"itemHeight\"\n      [minBufferPx]=\"itemHeight * 2\"\n      [maxBufferPx]=\"itemHeight * 3\"\n      #virtualScrollViewPort\n      infiniteScroll\n      [eventThrottle]=\"200\"\n      [offsetFactor]=\"2\"\n      [ignoreScrollEvent]=\"data.loading | async\"\n      [containerId]=\"'documents-container'\" [listenToHost]=\"false\"\n      (closeToEnd)=\"requestMoreDataZoned($event)\">\n\n      <!-- (scrolling)=\"onScrolling($event)\" -->\n\n      <div\n        *cdkVirtualFor=\"let row of dataRows$; trackBy: trackByIndex; templateCacheSize: 50\"\n        class=\"elder-grid-tile-row\"\n        [style.height]=\"itemHeight + 'px'\">\n\n        <ng-container *ngFor=\"let tile of row; trackBy: trackByFn\">\n\n          <!-- Tile Cell -->\n          <mat-card appearance=\"outlined\" *ngIf=\"showTile(tile)\" class=\"elder-grid-tile\">\n            <div class=\"elder-grid-tile-content\"\n                 (click)=\"onItemClick(tile)\"\n                 (dblclick)=\"onItemDoubleClick(tile)\">\n              <ng-container\n                *ngTemplateOutlet=\"tileTemplate || simpleTileTemplate; context: {$implicit: tile}\">\n              </ng-container>\n\n              <!-- Overlay (Selection) -->\n              <ng-container *ngIf=\"selectionVisible\">\n                <div *ngIf=\"selectionModel.selection | async as selection\"\n                     class=\"elder-grid-tile-overlay elder-click-through\"\n                     [class.elder-grid-tile-overlay-hidden]=\"!inSelectionMode(selection)\"\n                     [class.elder-grid-tile-overlay-visible]=\"inSelectionMode(selection)\"\n                >\n                  <button mat-icon-button type=\"button\"\n                          (click)=\"selectionModel.toggle(tile)\" elderStopEventPropagation\n                          class=\"elder-grid-tile-check\">\n                    <mat-icon\n                      [class.elder-selected]=\"(selectionModel.observeSelection(tile) | async)\"\n                    >\n                      {{(selectionModel.observeSelection(tile) | async) ? 'check_circle' : 'radio_button_unchecked'}}\n                    </mat-icon>\n                  </button>\n                </div>\n              </ng-container>\n\n            </div>\n          </mat-card>\n\n          <div *ngIf=\"!showTile(tile)\" class=\"elder-grid-tile-hidden\"></div>\n        </ng-container>\n\n      </div>\n\n    </cdk-virtual-scroll-viewport>\n\n\n    <mat-progress-bar class=\"flex-none\"\n                      [mode]=\"(data?.loading | async) ? 'indeterminate' : 'determinate'\"\n                      [color]=\"(data && (data.status | async)?.hasError) ? 'warn' : 'primary'\">\n    </mat-progress-bar>\n\n    <!-- Footer -->\n    <div class=\"layout-row place-end-center gap-md flex-none elder-grid-footer\"\n         *ngIf=\"footerVisible\"\n         style=\"padding-right: 12px\">\n\n      <!-- Continuable -->\n      <ng-container *ngIf=\"isContinuable\">\n         <span class=\"mat-caption noselect\" style=\"color: gray\">\n            {{(dataSnapshot?.data | async)?.length}} / {{total$ | async}}\n          </span>\n\n        <button mat-icon-button type=\"button\"\n                color=\"primary\"\n                [disabled]=\"!(canLoadMore$ | async)\"\n                (click)=\"dataSnapshot.loadMore()\">\n          <mat-icon>keyboard_arrow_down</mat-icon>\n        </button>\n      </ng-container>\n\n      <!-- Paged -->\n      <mat-paginator #matPaginator *ngIf=\"isActivePaged && (dataActivePaged.page | async) as page\"\n                     class=\"flex-none\"\n                     [length]=\"dataContext?.total | async\"\n                     [pageIndex]=\"page?.index\"\n                     [pageSize]=\"page?.size\"\n                     [pageSizeOptions]=\"pageSizeOptions\">\n      </mat-paginator>\n\n      <!-- Local Source -->\n      <ng-container *ngIf=\"!isActivePaged && !isContinuable\">\n         <span class=\"mat-caption noselect\" style=\"color: gray\">\n            {{(dataSnapshot?.data | async)?.length}}\n          </span>\n      </ng-container>\n\n    </div>\n\n\n  </div>\n</mat-card>\n\n<ng-template #simpleTileTemplate let-tile>\n  <div *ngIf=\"tile\" class=\"layout-col place-center-center flex\" style=\"background-color: lightblue\">\n    <p class=\"noselect\">Tile: {{tile}}</p>\n  </div>\n</ng-template>\n", styles: [":host{min-width:0;min-height:0}.elder-grid-tile-row{display:flex;flex-direction:row;padding:8px}.elder-grid-tile-row:first-child{padding-top:16px}.elder-grid-tile-hidden{flex:0 1 100%;margin:8px;width:100%;height:100%}.elder-grid-tile-content{position:relative;width:100%;height:100%;overflow:hidden}.elder-grid-tile-overlay{position:absolute;inset:0;transition:background-color .1s ease-in,opacity .1s ease-in}.elder-click-through{pointer-events:none}.elder-grid-tile-overlay-visible{opacity:1}.elder-grid-tile-overlay-hidden{opacity:0}\n"] }]
+                    ], template: "<mat-card class=\"full\"\n          [class.embedded]=\"embedded\"\n          [appearance]=\"appearance\"\n          style=\"overflow: hidden\"\n>\n  <!-- Grid Browser -->\n  <div class=\"layout-col full elder-grid-container\"\n       *ngIf=\"dataContext$ | async as data\"\n       [elderDataContextSelection]=\"data\" #dataSelection=\"elderDataContextSelection\"\n       [elderDataContextSelectionModel]=\"selectionModel\"\n  >\n    <!-- Toolbar Row -->\n    <div *ngIf=\"toolbarVisible\"\n         class=\"layout-row place-start-center flex-none elder-grid-toolbar\">\n\n      <div class=\"layout-col flex-none\" style=\"padding-left: 8px; padding-right: 8px\" *ngIf=\"selectionVisible\">\n        <elder-selection-master-checkbox class=\"flex-none\" style=\"padding-left: 12px\"></elder-selection-master-checkbox>\n      </div>\n\n      <!-- Toolbar -->\n      <ng-container *ngIf=\"toolbarTemplate\">\n        <ng-template *ngTemplateOutlet=\"toolbarTemplate; context: {$implicit: this}\"></ng-template>\n      </ng-container>\n\n      <elder-single-sort *ngIf=\"availableSorts && availableSorts.length > 0 && data.sort.sorts | async as sorts\"\n                         class=\"flex-none\"\n                         [availableSorts]=\"availableSorts\"\n                         [translationPrefix]=\"sortTranslationPrefix\"\n                         [sort]=\"sorts[0]\"\n                         (sortChange)=\"updateSort($event)\">\n      </elder-single-sort>\n    </div>\n\n    <mat-divider *ngIf=\"toolbarVisible\"></mat-divider>\n\n    <elder-data-context-state-indicator class=\"flex-none\" [dataContext]=\"data\">\n    </elder-data-context-state-indicator>\n\n    <!-- [cdkDropListSortingDisabled]=\"true\" -->\n    <!-- cdkDropList -->\n    <cdk-virtual-scroll-viewport\n      class=\"layout-col flex elder-grid-browser\"\n      id=\"documents-container\"\n      [itemSize]=\"itemHeight\"\n      [minBufferPx]=\"itemHeight * 2\"\n      [maxBufferPx]=\"itemHeight * 3\"\n      #virtualScrollViewPort\n      elderInfiniteScroll\n      [eventThrottle]=\"200\"\n      [offsetFactor]=\"2\"\n      [ignoreScrollEvent]=\"data.loading | async\"\n      [containerId]=\"'documents-container'\" [listenToHost]=\"false\"\n      (closeToEnd)=\"requestMoreDataZoned($event)\">\n\n      <!-- (scrolling)=\"onScrolling($event)\" -->\n\n      <div\n        *cdkVirtualFor=\"let row of dataRows$; trackBy: trackByIndex; templateCacheSize: 50\"\n        class=\"elder-grid-tile-row\"\n        [style.height]=\"itemHeight + 'px'\">\n\n        <ng-container *ngFor=\"let tile of row; trackBy: trackByFn\">\n\n          <!-- Tile Cell -->\n          <mat-card appearance=\"outlined\" *ngIf=\"showTile(tile)\" class=\"elder-grid-tile\">\n            <div class=\"elder-grid-tile-content\"\n                 (click)=\"onItemClick(tile)\"\n                 (dblclick)=\"onItemDoubleClick(tile)\">\n              <ng-container\n                *ngTemplateOutlet=\"tileTemplate || simpleTileTemplate; context: {$implicit: tile}\">\n              </ng-container>\n\n              <!-- Overlay (Selection) -->\n              <ng-container *ngIf=\"selectionVisible\">\n                <div *ngIf=\"selectionModel.selection | async as selection\"\n                     class=\"elder-grid-tile-overlay elder-click-through\"\n                     [class.elder-grid-tile-overlay-hidden]=\"!inSelectionMode(selection)\"\n                     [class.elder-grid-tile-overlay-visible]=\"inSelectionMode(selection)\"\n                >\n                  <button mat-icon-button type=\"button\"\n                          (click)=\"selectionModel.toggle(tile)\" elderStopEventPropagation\n                          class=\"elder-grid-tile-check\">\n                    <mat-icon\n                      [class.elder-selected]=\"(selectionModel.observeSelection(tile) | async)\"\n                    >\n                      {{(selectionModel.observeSelection(tile) | async) ? 'check_circle' : 'radio_button_unchecked'}}\n                    </mat-icon>\n                  </button>\n                </div>\n              </ng-container>\n\n            </div>\n          </mat-card>\n\n          <div *ngIf=\"!showTile(tile)\" class=\"elder-grid-tile-hidden\"></div>\n        </ng-container>\n\n      </div>\n\n    </cdk-virtual-scroll-viewport>\n\n\n    <mat-progress-bar class=\"flex-none\"\n                      [mode]=\"(data?.loading | async) ? 'indeterminate' : 'determinate'\"\n                      [color]=\"(data && (data.status | async)?.hasError) ? 'warn' : 'primary'\">\n    </mat-progress-bar>\n\n    <!-- Footer -->\n    <div class=\"layout-row place-end-center gap-md flex-none elder-grid-footer\"\n         *ngIf=\"footerVisible\"\n         style=\"padding-right: 12px\">\n\n      <!-- Continuable -->\n      <ng-container *ngIf=\"isContinuable\">\n         <span class=\"mat-caption noselect\" style=\"color: gray\">\n            {{(dataSnapshot?.data | async)?.length}} / {{total$ | async}}\n          </span>\n\n        <button mat-icon-button type=\"button\"\n                color=\"primary\"\n                [disabled]=\"!(canLoadMore$ | async)\"\n                (click)=\"dataSnapshot.loadMore()\">\n          <mat-icon>keyboard_arrow_down</mat-icon>\n        </button>\n      </ng-container>\n\n      <!-- Paged -->\n      <mat-paginator #matPaginator *ngIf=\"isActivePaged && (dataActivePaged.page | async) as page\"\n                     class=\"flex-none\"\n                     [length]=\"dataContext?.total | async\"\n                     [pageIndex]=\"page?.index\"\n                     [pageSize]=\"page?.size\"\n                     [pageSizeOptions]=\"pageSizeOptions\">\n      </mat-paginator>\n\n      <!-- Local Source -->\n      <ng-container *ngIf=\"!isActivePaged && !isContinuable\">\n         <span class=\"mat-caption noselect\" style=\"color: gray\">\n            {{(dataSnapshot?.data | async)?.length}}\n          </span>\n      </ng-container>\n\n    </div>\n\n\n  </div>\n</mat-card>\n\n<ng-template #simpleTileTemplate let-tile>\n  <div *ngIf=\"tile\" class=\"layout-col place-center-center flex\" style=\"background-color: lightblue\">\n    <p class=\"noselect\">Tile: {{tile}}</p>\n  </div>\n</ng-template>\n", styles: [":host{min-width:0;min-height:0}.elder-grid-tile-row{display:flex;flex-direction:row;padding:8px}.elder-grid-tile-row:first-child{padding-top:16px}.elder-grid-tile-hidden{flex:0 1 100%;margin:8px;width:100%;height:100%}.elder-grid-tile-content{position:relative;width:100%;height:100%;overflow:hidden}.elder-grid-tile-overlay{position:absolute;inset:0;transition:background-color .1s ease-in,opacity .1s ease-in}.elder-click-through{pointer-events:none}.elder-grid-tile-overlay-visible{opacity:1}.elder-grid-tile-overlay-hidden{opacity:0}\n"] }]
         }], ctorParameters: function () {
         return [{ type: SelectionModel, decorators: [{
                         type: Optional
@@ -24218,7 +24268,7 @@ ElderSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", v
             provide: ELDER_SELECT_BASE,
             useExisting: forwardRef(() => ElderSelectComponent)
         }
-    ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  *ngIf=\"(entityWrapped$ | async) as entityWrapper\"\n  class=\"layout-row place-start-center elder-flex-control\"\n>\n  <ng-container *ngIf=\"(mergedState$ | async) as state\">\n    <div *ngIf=\"state?.error || icon\"\n         class=\"elder-input-prefix-icon-container flex-none\"\n    >\n      <mat-icon *ngIf=\"icon\" disabled\n                class=\"elder-mdc-control-icon elder-icon-small noselect clickable-icon\"\n                [class.loading]=\"state.loading\"\n                [color]=\"state?.error ? 'warn' : (focused ? 'primary' : undefined)\"\n                (click)=\"onCurrentClicked(entity)\"\n      >\n        {{icon}}\n      </mat-icon>\n      <mat-icon *ngIf=\"!icon && state?.error\"\n                class=\"elder-mdc-control-icon elder-icon-small noselect\"\n                color=\"warn\"\n                [matTooltip]=\"state?.error\"\n      >\n        warning\n      </mat-icon>\n    </div>\n  </ng-container>\n\n  <!-- A dynamic input -->\n  <input #input\n    matInput type=\"text\" class=\"flex-grow elder-select-input mdc-text-field__input\"\n    [disabled]=\"!!disabled\"\n    [required]=\"!!required\"\n    [readonly]=\"readonly || !autocomplete\"\n    [name]=\"ngControl?.name + '-inner-input'\"\n    [placeholder]=\"placeholder | translate\"\n    [matAutocomplete] #autoTrigger=\"matAutocompleteTrigger\"\n    [elderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n    elderSelectOnTab\n    [class.elder-select-dropdown-input]=\"!autocomplete\"\n    [ngModel]=\"inputText$ | async\" [ngModelOptions]=\"{standalone: true, updateOn: 'submit'}\"\n    (blur)=\"onInputBlur($event)\"\n    (focus)=\"onInputFocus(autoTrigger)\"\n    (click)=\"onInputClicked(autoTrigger)\"\n  >\n\n  <!-- This breaks stuff: [displayWith]=\"displayPropertyResolver$ | async\" -->\n\n  <elder-autocomplete\n    #elderAuto=\"elderAutocomplete\"\n    [dataContext]=\"dataContext$ | async\"\n    [valueTemplate]=\"valueTemplate\"\n    [enabled]=\"!!autocomplete\"\n    [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n    (optionSelected)=\"onOptionSelected($any($event))\"\n  ></elder-autocomplete>\n\n  <div class=\"layout-row place-start-center flex-none\">\n\n    <mat-icon\n      *ngIf=\"!selectionPopup && !autocomplete && !entityWrapper.displayRemove\"\n      class=\"elder-mdc-control-icon elder-select-arrow noselect\"\n      (click)=\"onInputClicked(autoTrigger)\">\n      arrow_drop_down\n    </mat-icon>\n\n    <button mat-icon-button type=\"button\" class=\"elder-control-icon-button\"\n            *ngIf=\"selectionPopup && !entityWrapper.displayRemove\"\n            [disabled]=\"isLocked\"\n            (click)=\"openSelectionPopup($event)\" aria-label=\"Search\"\n            elderStopEventPropagation\n            tabIndex=\"-1\"\n    >\n      <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n    </button>\n\n    <button mat-icon-button type=\"button\" class=\"elder-control-icon-button\"\n            *ngIf=\"entityWrapper.displayRemove\"\n            [disabled]=\"isLocked\"\n            (click)=\"clear($event)\" aria-label=\"Clear\"\n            elderStopEventPropagation\n            tabIndex=\"-1\"\n    >\n      <mat-icon class=\"elder-mdc-control-icon\">close</mat-icon>\n    </button>\n\n\n  </div>\n</div>\n\n\n\n", styles: ["@keyframes shrink{0%{transform:scale(1)}to{transform:scale(.75)}}.loading{animation:shrink .3s ease-in-out infinite alternate;-webkit-animation:shrink .3s ease-in-out infinite alternate}.clickable-icon{cursor:pointer}.full-width{width:100%}.elder-select-dropdown-input{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: ElderAutocompleteComponent, selector: "elder-autocomplete", inputs: ["isOptionDisabledFn", "isOptionHiddenFn", "optionValueConverterFn", "enabled", "valueTemplate", "dataContext", "displayPropertyResolver"], outputs: ["optionSelected"], exportAs: ["elderAutocomplete"] }, { kind: "directive", type: ElderAutocompleteDirective, selector: "[elderAutocomplete]", inputs: ["queryFilter", "filters", "sorts", "elderAutocomplete"] }, { kind: "directive", type: i4$5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: ElderSelectOnTabDirective, selector: "[elderSelectOnTab]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n  *ngIf=\"(entityWrapped$ | async) as entityWrapper\"\n  class=\"layout-row place-start-center elder-flex-control\"\n>\n  <ng-container *ngIf=\"(mergedState$ | async) as state\">\n    <div *ngIf=\"state?.error || icon\"\n         class=\"elder-input-prefix-icon-container flex-none\"\n    >\n      <mat-icon *ngIf=\"icon\" disabled\n                class=\"elder-mdc-control-icon elder-icon-small noselect clickable-icon\"\n                [class.loading]=\"state.loading\"\n                [color]=\"state?.error ? 'warn' : (focused ? 'primary' : undefined)\"\n                (click)=\"onCurrentClicked(entity)\"\n      >\n        {{icon}}\n      </mat-icon>\n      <mat-icon *ngIf=\"!icon && state?.error\"\n                class=\"elder-mdc-control-icon elder-icon-small noselect\"\n                color=\"warn\"\n                [matTooltip]=\"state?.error\"\n      >\n        warning\n      </mat-icon>\n    </div>\n  </ng-container>\n\n  <!-- A dynamic input -->\n  <input #input\n    matInput type=\"text\" class=\"flex-grow elder-select-input mdc-text-field__input\"\n    [disabled]=\"!!disabled\"\n    [required]=\"!!required\"\n    [readonly]=\"readonly || !autocomplete\"\n    [name]=\"ngControl?.name + '-inner-input'\"\n    [placeholder]=\"placeholder | translate\"\n    [matAutocomplete] #autoTrigger=\"matAutocompleteTrigger\"\n    [elderAutocomplete]=\"elderAuto\" [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n    elderSelectOnTab\n    [class.elder-select-dropdown-input]=\"!autocomplete\"\n    [ngModel]=\"inputText$ | async\" [ngModelOptions]=\"{standalone: true, updateOn: 'submit'}\"\n    (blur)=\"onInputBlur($event)\"\n    (focus)=\"onInputFocus(autoTrigger)\"\n    (click)=\"onInputClicked(autoTrigger)\"\n  >\n\n  <!-- This breaks stuff: [displayWith]=\"displayPropertyResolver$ | async\" -->\n\n  <elder-autocomplete\n    #elderAuto=\"elderAutocomplete\"\n    [dataContext]=\"dataContext$ | async\"\n    [valueTemplate]=\"valueTemplate\"\n    [enabled]=\"!!autocomplete\"\n    [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n    [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n    [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n    (optionSelected)=\"onOptionSelected($any($event))\"\n  ></elder-autocomplete>\n\n  <div class=\"layout-row place-start-center flex-none\">\n\n    <mat-icon\n      *ngIf=\"!selectionPopup && !autocomplete && !entityWrapper.displayRemove\"\n      class=\"elder-mdc-control-icon elder-select-arrow noselect\"\n      (click)=\"onInputClicked(autoTrigger)\">\n      arrow_drop_down\n    </mat-icon>\n\n    <button mat-icon-button type=\"button\" class=\"elder-control-icon-button\"\n            *ngIf=\"selectionPopup && !entityWrapper.displayRemove\"\n            [disabled]=\"isLocked\"\n            (click)=\"openSelectionPopup($event)\" aria-label=\"Search\"\n            elderStopEventPropagation\n            tabIndex=\"-1\"\n    >\n      <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n    </button>\n\n    <button mat-icon-button type=\"button\" class=\"elder-control-icon-button\"\n            *ngIf=\"entityWrapper.displayRemove\"\n            [disabled]=\"isLocked\"\n            (click)=\"clear($event)\" aria-label=\"Clear\"\n            elderStopEventPropagation\n            tabIndex=\"-1\"\n    >\n      <mat-icon class=\"elder-mdc-control-icon\">close</mat-icon>\n    </button>\n\n\n  </div>\n</div>\n\n\n\n", styles: ["@keyframes shrink{0%{transform:scale(1)}to{transform:scale(.75)}}.loading{animation:shrink .3s ease-in-out infinite alternate;-webkit-animation:shrink .3s ease-in-out infinite alternate}.clickable-icon{cursor:pointer}.full-width{width:100%}.elder-select-dropdown-input{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i4$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$5.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i4$5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "component", type: ElderAutocompleteComponent, selector: "elder-autocomplete", inputs: ["isOptionDisabledFn", "isOptionHiddenFn", "optionValueConverterFn", "enabled", "valueTemplate", "dataContext", "displayPropertyResolver"], outputs: ["optionSelected"], exportAs: ["elderAutocomplete"] }, { kind: "directive", type: ElderAutocompleteDirective, selector: "[elderAutocomplete]", inputs: ["queryFilter", "filters", "sorts", "elderAutocomplete"] }, { kind: "directive", type: ElderSelectOnTabDirective, selector: "[elderSelectOnTab]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ElderSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-select', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -24627,16 +24677,15 @@ class ElderMultiSelectBase extends ElderSelectBase {
         return this._entityIds$;
     }
     set entities(entities) {
-        if (!this.equalEntities(this.entities, entities)) {
-            entities = this.writeEntitiesSorted(entities);
-            this.writeValueInternal(this.entitiesToValues(entities));
+        if (!this.equalEntitiesExactOrder(this.entities, entities)) {
+            this.writeValueInternal(this.entitiesToValues(this.writeEntitiesSorted(entities)));
         }
     }
     get entities() {
         return this._entities$.getValue();
     }
     set entityIds(ids) {
-        if (!this.equalIds(this.entityIds, ids)) {
+        if (!this.equalIdsExactOrder(this.entityIds, ids)) {
             if (this.valueAsId) {
                 this.writeValueInternal(ids);
             }
@@ -24740,7 +24789,7 @@ class ElderMultiSelectBase extends ElderSelectBase {
      *                                                                         *
      **************************************************************************/
     valuesEquals(a, b) {
-        return this.equalIds(this.entityIdsFromValues(a), this.entityIdsFromValues(b));
+        return this.equalIdsExactOrder(this.entityIdsFromValues(a), this.entityIdsFromValues(b));
     }
     onDataContextChanged(data) {
         if (this.valueAsId) {
@@ -24815,9 +24864,15 @@ class ElderMultiSelectBase extends ElderSelectBase {
     equalIds(idsA, idsB) {
         return Sets.equalContent(idsA, idsB);
     }
+    equalIdsExactOrder(idsA, idsB) {
+        return Arrays.equalContentAndOrder(idsA, idsB);
+    }
     equalEntities(entitiesA, entitiesB) {
         return this.equalIds(this.getEntityIds(entitiesA), this.getEntityIds(entitiesB));
     }
+    equalEntitiesExactOrder(entitiesA, entitiesB) {
+        return this.equalIdsExactOrder(this.getEntityIds(entitiesA), this.getEntityIds(entitiesB));
+    }
     selectEntitiesByIds(ids) {
         const currentEntities = this.entities;
         this.logger.info('selectEntitiesByIds: ids: ' + ids + ', current entities:', currentEntities);
@@ -25032,6 +25087,8 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
         this.avatarSpecFn = e => this.defaultAvatarSpec;
         this.selectable = true;
         this.allowRemove = true;
+        this.allowSorting = false;
+        this.stacked = false;
         this.chipTemplate$ = new BehaviorSubject(null);
         this.chipAvatarTemplate$ = new BehaviorSubject(null);
         this.customInputTemplate$ = new BehaviorSubject(null);
@@ -25135,6 +25192,11 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
      * Public API                                                              *
      *                                                                         *
      **************************************************************************/
+    drop(event) {
+        const reordered = [...this.entities];
+        moveItemInArray(reordered, event.previousIndex, event.currentIndex);
+        this.entities = reordered;
+    }
     resolveChipValue(e1) {
         return this.getEntityId(e1);
     }
@@ -25188,13 +25250,13 @@ class ElderMultiSelectChipsComponent extends ElderMultiSelectBase {
     }
 }
 ElderMultiSelectChipsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ElderMultiSelectChipsComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i1$1.FocusMonitor }, { token: i2.TranslateService }, { token: ElderDialogService }, { token: i3.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Component });
-ElderMultiSelectChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ElderMultiSelectChipsComponent, selector: "elder-multi-select-chips", inputs: { defaultAvatarSpec: "defaultAvatarSpec", avatarSpecFn: "avatarSpecFn", allowRemove: "allowRemove", chipTemplate: "chipTemplate", chipAvatarTemplate: "chipAvatarTemplate", customInputTemplate: "customInputTemplate", chipColorEnabled: "chipColorEnabled", chipColorResolver: "chipColorResolver" }, host: { properties: { "class": "this.hostClass", "class.mat-select-disabled": "this.disabledClass", "class.mat-select-invalid": "this.errorStateClass", "class.mat-select-required": "this.requiredClass", "class.mat-select-empty": "this.emptyClass" } }, providers: [
+ElderMultiSelectChipsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.7", type: ElderMultiSelectChipsComponent, selector: "elder-multi-select-chips", inputs: { defaultAvatarSpec: "defaultAvatarSpec", avatarSpecFn: "avatarSpecFn", allowRemove: "allowRemove", allowSorting: "allowSorting", stacked: "stacked", chipTemplate: "chipTemplate", chipAvatarTemplate: "chipAvatarTemplate", customInputTemplate: "customInputTemplate", chipColorEnabled: "chipColorEnabled", chipColorResolver: "chipColorResolver" }, host: { properties: { "class": "this.hostClass", "class.mat-select-disabled": "this.disabledClass", "class.mat-select-invalid": "this.errorStateClass", "class.mat-select-required": "this.requiredClass", "class.mat-select-empty": "this.emptyClass" } }, providers: [
         { provide: MatFormFieldControl, useExisting: ElderMultiSelectChipsComponent },
         {
             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 *ngIf=\"(selectChips$ | async) as chipValues\"\n                class=\"elder-flex-control\"\n     [matTooltip]=\"(state$ | async)?.error\"\n>\n\n  <mat-chip-set #chips>\n\n    <ng-container *ngIf=\"(mergedState$ | async) as state\">\n      <div *ngIf=\"icon\"\n           class=\"elder-input-prefix-icon-container flex-none\"\n      >\n        <mat-icon *ngIf=\"icon\" 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    </ng-container>\n\n    <ng-container *ngIf=\"templates$ | async as templates\">\n      <mat-chip-row elderChipLabel *ngFor=\"let chipModel of chipValues\"\n                class=\"noselect clickable-chip\"\n                [value]=\"resolveChipValue(chipModel.value)\"\n                [color]=\"chipModel.color\"\n                [removable]=\"chipModel.removeable\"\n                (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n                (click)=\"onCurrentClicked(chipModel.value)\"\n      >\n        <mat-chip-avatar\n          *ngIf=\"templates.avatar && !chipModel.avatarSpec.hide\"\n          [class.chip-avatar-xl]=\"chipModel.avatarSpec.large\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"templates.avatar; context: {$implicit: chipModel}\">\n          </ng-container>\n        </mat-chip-avatar>\n\n        <ng-container\n          *ngTemplateOutlet=\"templates.chip || simpleChipTemplate; context: {$implicit: chipModel}\">\n        </ng-container>\n        <mat-icon matChipRemove\n                  *ngIf=\"chipModel.removeable\"\n                  (click)=\"onClickRemoveChip($event, chipModel.value)\">\n          cancel\n        </mat-icon>\n      </mat-chip-row>\n\n      <div class=\"layout-row place-start-center elder-chip-input\">\n\n        <!-- [matChipInputFor]=\"chips\" -->\n        <ng-container\n          *ngTemplateOutlet=\"templates.input || selectInput;\">\n        </ng-container>\n\n        <button mat-icon-button type=\"button\" class=\"elder-control-icon-button elder-browse-icon\"\n                *ngIf=\"selectionPopup\"\n                [disabled]=\"isLocked\"\n                (click)=\"openSelectionPopup($event)\" aria-label=\"Search\"\n                elderStopEventPropagation\n                tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n        </button>\n      </div>\n    </ng-container>\n  </mat-chip-set>\n</div>\n\n<ng-template #selectInput>\n  <!-- mat-mdc-chip-input -->\n  <elder-select autocomplete elderClearSelect\n                class=\"elder-chip-input-select flex\"\n                [data]=\"dataContext$ | async\"\n                [disabled]=\"!!disabled\"\n                [required]=\"!!required\"\n                [readonly]=\"!!readonly\"\n                [placeholder]=\"placeholder\"\n                (entityUpdated)=\"appendEntity($event)\"\n                [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n                [valueTemplate]=\"valueTemplate\"\n                [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n                [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n                [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n  ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{chipModel.displayText | elderTruncate:20}}</span>\n</ng-template>\n\n", styles: [".elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "directive", type: i6.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "component", type: i6.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role"] }, { kind: "directive", type: i4$5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: ["appearance", "color", "stateColor", "levelColor"] }, { kind: "component", type: ElderSelectComponent, selector: "elder-select", inputs: ["nullDisplay", "autocomplete", "allowNull", "entity", "entityId"], outputs: ["entityIdChange", "entityIdUpdated", "entityChange", "entityUpdated"] }, { kind: "directive", type: ElderClearSelectDirective, selector: "[elderClearSelect]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { 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 *ngIf=\"(selectChips$ | async) as chipValues\"\n                class=\"elder-flex-control\"\n     [matTooltip]=\"(state$ | async)?.error\"\n>\n  <mat-chip-set #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\n    <ng-container *ngIf=\"(mergedState$ | async) as state\">\n      <div *ngIf=\"icon\"\n           class=\"elder-input-prefix-icon-container flex-none\"\n      >\n        <mat-icon *ngIf=\"icon\" 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    </ng-container>\n\n    <ng-container *ngIf=\"templates$ | async as templates\">\n      <mat-chip-row elderChipLabel *ngFor=\"let chipModel of chipValues\"\n                class=\"noselect clickable-chip\"\n                [value]=\"resolveChipValue(chipModel.value)\"\n                [color]=\"chipModel.color\"\n                [removable]=\"chipModel.removeable\"\n                (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n                (click)=\"onCurrentClicked(chipModel.value)\"\n                cdkDrag [cdkDragData]=\"chipModel.value\" [cdkDragDisabled]=\"!allowSorting\"\n      >\n        <mat-chip-avatar\n          *ngIf=\"templates.avatar && !chipModel.avatarSpec.hide\"\n          [class.chip-avatar-xl]=\"chipModel.avatarSpec.large\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"templates.avatar; context: {$implicit: chipModel}\">\n          </ng-container>\n        </mat-chip-avatar>\n\n        <ng-container\n          *ngTemplateOutlet=\"templates.chip || simpleChipTemplate; context: {$implicit: chipModel}\">\n        </ng-container>\n        <mat-icon matChipRemove\n                  *ngIf=\"chipModel.removeable\"\n                  (click)=\"onClickRemoveChip($event, chipModel.value)\">\n          cancel\n        </mat-icon>\n      </mat-chip-row>\n\n      <div class=\"layout-row place-start-center elder-chip-input\">\n\n        <!-- [matChipInputFor]=\"chips\" -->\n        <ng-container\n          *ngTemplateOutlet=\"templates.input || selectInput;\">\n        </ng-container>\n\n        <button mat-icon-button type=\"button\" class=\"elder-control-icon-button elder-browse-icon\"\n                *ngIf=\"selectionPopup\"\n                [disabled]=\"isLocked\"\n                (click)=\"openSelectionPopup($event)\" aria-label=\"Search\"\n                elderStopEventPropagation\n                tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n        </button>\n      </div>\n    </ng-container>\n  </mat-chip-set>\n</div>\n\n<ng-template #selectInput>\n  <!-- mat-mdc-chip-input -->\n  <elder-select autocomplete elderClearSelect\n                class=\"elder-chip-input-select flex\"\n                [data]=\"dataContext$ | async\"\n                [disabled]=\"!!disabled\"\n                [required]=\"!!required\"\n                [readonly]=\"!!readonly\"\n                [placeholder]=\"placeholder\"\n                (entityUpdated)=\"appendEntity($event)\"\n                [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n                [valueTemplate]=\"valueTemplate\"\n                [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n                [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n                [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n  ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{chipModel.displayText | elderTruncate:20}}</span>\n</ng-template>\n\n", styles: [".elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cdk-drag-preview{box-sizing:border-box;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: i1$4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$2.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i6.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["color", "disabled", "disableRipple", "tabIndex", "editable"], outputs: ["edited"] }, { kind: "component", type: i6.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role"] }, { kind: "directive", type: i4$5.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i5$4.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i5$4.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: ElderStopEventPropagationDirective, selector: "[elderStopEventPropagation]" }, { kind: "directive", type: ElderChipLabelDirective, selector: "[elderChipLabel]", inputs: ["appearance", "color", "stateColor", "levelColor"] }, { kind: "component", type: ElderSelectComponent, selector: "elder-select", inputs: ["nullDisplay", "autocomplete", "allowNull", "entity", "entityId"], outputs: ["entityIdChange", "entityIdUpdated", "entityChange", "entityUpdated"] }, { kind: "directive", type: ElderClearSelectDirective, selector: "[elderClearSelect]" }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: ElderTruncatePipe, name: "elderTruncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ElderMultiSelectChipsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'elder-multi-select-chips', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
@@ -25203,7 +25265,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                             provide: ELDER_SELECT_BASE,
                             useExisting: forwardRef(() => ElderMultiSelectChipsComponent)
                         }
-                    ], template: "<div *ngIf=\"(selectChips$ | async) as chipValues\"\n                class=\"elder-flex-control\"\n     [matTooltip]=\"(state$ | async)?.error\"\n>\n\n  <mat-chip-set #chips>\n\n    <ng-container *ngIf=\"(mergedState$ | async) as state\">\n      <div *ngIf=\"icon\"\n           class=\"elder-input-prefix-icon-container flex-none\"\n      >\n        <mat-icon *ngIf=\"icon\" 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    </ng-container>\n\n    <ng-container *ngIf=\"templates$ | async as templates\">\n      <mat-chip-row elderChipLabel *ngFor=\"let chipModel of chipValues\"\n                class=\"noselect clickable-chip\"\n                [value]=\"resolveChipValue(chipModel.value)\"\n                [color]=\"chipModel.color\"\n                [removable]=\"chipModel.removeable\"\n                (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n                (click)=\"onCurrentClicked(chipModel.value)\"\n      >\n        <mat-chip-avatar\n          *ngIf=\"templates.avatar && !chipModel.avatarSpec.hide\"\n          [class.chip-avatar-xl]=\"chipModel.avatarSpec.large\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"templates.avatar; context: {$implicit: chipModel}\">\n          </ng-container>\n        </mat-chip-avatar>\n\n        <ng-container\n          *ngTemplateOutlet=\"templates.chip || simpleChipTemplate; context: {$implicit: chipModel}\">\n        </ng-container>\n        <mat-icon matChipRemove\n                  *ngIf=\"chipModel.removeable\"\n                  (click)=\"onClickRemoveChip($event, chipModel.value)\">\n          cancel\n        </mat-icon>\n      </mat-chip-row>\n\n      <div class=\"layout-row place-start-center elder-chip-input\">\n\n        <!-- [matChipInputFor]=\"chips\" -->\n        <ng-container\n          *ngTemplateOutlet=\"templates.input || selectInput;\">\n        </ng-container>\n\n        <button mat-icon-button type=\"button\" class=\"elder-control-icon-button elder-browse-icon\"\n                *ngIf=\"selectionPopup\"\n                [disabled]=\"isLocked\"\n                (click)=\"openSelectionPopup($event)\" aria-label=\"Search\"\n                elderStopEventPropagation\n                tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n        </button>\n      </div>\n    </ng-container>\n  </mat-chip-set>\n</div>\n\n<ng-template #selectInput>\n  <!-- mat-mdc-chip-input -->\n  <elder-select autocomplete elderClearSelect\n                class=\"elder-chip-input-select flex\"\n                [data]=\"dataContext$ | async\"\n                [disabled]=\"!!disabled\"\n                [required]=\"!!required\"\n                [readonly]=\"!!readonly\"\n                [placeholder]=\"placeholder\"\n                (entityUpdated)=\"appendEntity($event)\"\n                [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n                [valueTemplate]=\"valueTemplate\"\n                [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n                [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n                [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n  ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{chipModel.displayText | elderTruncate:20}}</span>\n</ng-template>\n\n", styles: [".elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n"] }]
+                    ], template: "<div *ngIf=\"(selectChips$ | async) as chipValues\"\n                class=\"elder-flex-control\"\n     [matTooltip]=\"(state$ | async)?.error\"\n>\n  <mat-chip-set #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\n    <ng-container *ngIf=\"(mergedState$ | async) as state\">\n      <div *ngIf=\"icon\"\n           class=\"elder-input-prefix-icon-container flex-none\"\n      >\n        <mat-icon *ngIf=\"icon\" 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    </ng-container>\n\n    <ng-container *ngIf=\"templates$ | async as templates\">\n      <mat-chip-row elderChipLabel *ngFor=\"let chipModel of chipValues\"\n                class=\"noselect clickable-chip\"\n                [value]=\"resolveChipValue(chipModel.value)\"\n                [color]=\"chipModel.color\"\n                [removable]=\"chipModel.removeable\"\n                (keydown)=\"onChipKeyDown($event, chipModel.value)\"\n                (click)=\"onCurrentClicked(chipModel.value)\"\n                cdkDrag [cdkDragData]=\"chipModel.value\" [cdkDragDisabled]=\"!allowSorting\"\n      >\n        <mat-chip-avatar\n          *ngIf=\"templates.avatar && !chipModel.avatarSpec.hide\"\n          [class.chip-avatar-xl]=\"chipModel.avatarSpec.large\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"templates.avatar; context: {$implicit: chipModel}\">\n          </ng-container>\n        </mat-chip-avatar>\n\n        <ng-container\n          *ngTemplateOutlet=\"templates.chip || simpleChipTemplate; context: {$implicit: chipModel}\">\n        </ng-container>\n        <mat-icon matChipRemove\n                  *ngIf=\"chipModel.removeable\"\n                  (click)=\"onClickRemoveChip($event, chipModel.value)\">\n          cancel\n        </mat-icon>\n      </mat-chip-row>\n\n      <div class=\"layout-row place-start-center elder-chip-input\">\n\n        <!-- [matChipInputFor]=\"chips\" -->\n        <ng-container\n          *ngTemplateOutlet=\"templates.input || selectInput;\">\n        </ng-container>\n\n        <button mat-icon-button type=\"button\" class=\"elder-control-icon-button elder-browse-icon\"\n                *ngIf=\"selectionPopup\"\n                [disabled]=\"isLocked\"\n                (click)=\"openSelectionPopup($event)\" aria-label=\"Search\"\n                elderStopEventPropagation\n                tabIndex=\"-1\"\n        >\n          <mat-icon class=\"elder-mdc-control-icon\">search</mat-icon>\n        </button>\n      </div>\n    </ng-container>\n  </mat-chip-set>\n</div>\n\n<ng-template #selectInput>\n  <!-- mat-mdc-chip-input -->\n  <elder-select autocomplete elderClearSelect\n                class=\"elder-chip-input-select flex\"\n                [data]=\"dataContext$ | async\"\n                [disabled]=\"!!disabled\"\n                [required]=\"!!required\"\n                [readonly]=\"!!readonly\"\n                [placeholder]=\"placeholder\"\n                (entityUpdated)=\"appendEntity($event)\"\n                [displayPropertyResolver]=\"displayPropertyResolver$ | async\"\n                [valueTemplate]=\"valueTemplate\"\n                [queryFilter]=\"queryFilter\" [filters]=\"filters\" [sorts]=\"sorts\"\n                [isOptionDisabledFn]=\"isOptionDisabledInternalFn\"\n                [isOptionHiddenFn]=\"isOptionHiddenInternalFn\"\n  ></elder-select>\n</ng-template>\n\n<ng-template #simpleChipTemplate let-chipModel>\n  <span class=\"elder-chip-text\">{{chipModel.displayText | elderTruncate:20}}</span>\n</ng-template>\n\n", styles: [".elder-chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cdk-drag-preview{box-sizing:border-box;box-shadow:0 5px 5px -3px #0003,0 8px 10px 1px #00000024,0 3px 14px 2px #0000001f}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i1$1.FocusMonitor }, { type: i2.TranslateService }, { type: ElderDialogService }, { type: i3.NgControl, decorators: [{
                         type: Optional
@@ -25216,6 +25278,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 type: Input
             }], allowRemove: [{
                 type: Input
+            }], allowSorting: [{
+                type: Input
+            }], stacked: [{
+                type: Input
             }], _customChipInput: [{
                 type: ContentChild,
                 args: [MatFormFieldControl]
@@ -25432,9 +25498,13 @@ ElderSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", versi
         MatDialogModule, MatButtonModule,
         MatInputModule, MatAutocompleteModule,
         MatToolbarModule, MatProgressBarModule,
-        MatProgressSpinnerModule,
+        MatProgressSpinnerModule, MatChipsModule,
+        MatTooltipModule,
+        CdkDropList, CdkDrag,
         TranslateModule,
-        ElderFormsDirectivesModule, ElderTableModule, ElderInfiniteScrollModule, ElderAutocompleteModule, MatChipsModule, ElderPipesModule, MatTooltipModule, ElderThemeModule, ElderChipsModule], exports: [ElderSelectComponent,
+        ElderFormsDirectivesModule, ElderTableModule, ElderInfiniteScrollModule,
+        ElderAutocompleteModule,
+        ElderPipesModule, ElderThemeModule, ElderChipsModule], exports: [ElderSelectComponent,
         ElderSelectValueDirective,
         TemplatedSelectionDialogComponent,
         SelectionModelPopupDirective,
@@ -25452,9 +25522,12 @@ ElderSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versi
         MatDialogModule, MatButtonModule,
         MatInputModule, MatAutocompleteModule,
         MatToolbarModule, MatProgressBarModule,
-        MatProgressSpinnerModule,
+        MatProgressSpinnerModule, MatChipsModule,
+        MatTooltipModule,
         TranslateModule,
-        ElderFormsDirectivesModule, ElderTableModule, ElderInfiniteScrollModule, ElderAutocompleteModule, MatChipsModule, ElderPipesModule, MatTooltipModule, ElderThemeModule, ElderChipsModule] });
+        ElderFormsDirectivesModule, ElderTableModule, ElderInfiniteScrollModule,
+        ElderAutocompleteModule,
+        ElderPipesModule, ElderThemeModule, ElderChipsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: ElderSelectModule, decorators: [{
             type: NgModule,
             args: [{
@@ -25466,9 +25539,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                         MatDialogModule, MatButtonModule,
                         MatInputModule, MatAutocompleteModule,
                         MatToolbarModule, MatProgressBarModule,
-                        MatProgressSpinnerModule,
+                        MatProgressSpinnerModule, MatChipsModule,
+                        MatTooltipModule,
+                        CdkDropList, CdkDrag,
                         TranslateModule,
-                        ElderFormsDirectivesModule, ElderTableModule, ElderInfiniteScrollModule, ElderAutocompleteModule, MatChipsModule, ElderPipesModule, MatTooltipModule, ElderThemeModule, ElderChipsModule
+                        ElderFormsDirectivesModule, ElderTableModule, ElderInfiniteScrollModule,
+                        ElderAutocompleteModule,
+                        ElderPipesModule, ElderThemeModule, ElderChipsModule
                     ],
                     declarations: [
                         ElderSelectComponent,
@@ -29525,5 +29602,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuditedEntity, AutoStartSpec, BlobUrl, BytesFormat, BytesPerSecondFormat, BytesPipe, CardDropEvent, CardOrganizerData, CardStack, CollectionUtil, ComparatorBuilder, ConfirmDialogConfig, ContinuableListing, CsvColumnSpec, CsvSerializer, CsvSpec, CsvStreamExporter, CsvStreamExporterBuilder, CsvStreamExporterBuilderService, Currency, CurrencyCode, CurrencyUnit, CurrencyUnitRegistry, CustomDateAdapter, DataContextActivePage, DataContextAutoStarter, DataContextBase, DataContextBuilder, DataContextContinuableBase, DataContextContinuablePaged, DataContextContinuableToken, DataContextLifeCycleBinding, DataContextSelectionDirective, DataContextSimple, DataContextSnapshot, DataContextSourceEventBinding, DataContextStateIndicatorComponent, DataContextStatus, DataSourceAdapter, DataSourceBase, DataSourceChangeEvent, DataSourceChangeType, DataSourceProcessor, DataTransferFactory, DataTransferProgress, DataTransferProgressAggregate, DataTransferState, DataTransferStatus, DataViewIframeAdapterDirective, DataViewIframeComponent, DataViewMessage, DataViewOptionsProviderBinding, DataViewSelection, DataViewSelectionInit, DateUtil, DelegateContinuableDataSource, DelegateDataSource, DelegateListDataSource, DelegatePagedDataSource, Dimensions, DrawerOutletBinding, DurationBucket, DurationFormat, ELDER_DATA_VIEW, ELDER_SELECT_BASE, ElderAccessDeniedComponent, ElderAccessDeniedModule, ElderAppHeaderComponent, ElderAuditModule, ElderAuditedEntityComponent, ElderAutoSelectFirstDirective, ElderAutocompleteComponent, ElderAutocompleteDirective, ElderAutocompleteManyDirective, ElderAutocompleteModule, ElderBadgeComponent, ElderBadgeDirective, ElderBadgeModule, ElderBlobViewerComponent, ElderBreadCrumbsComponent, ElderBreadCrumbsModule, ElderButtonGroupComponent, ElderButtonGroupModule, ElderCardComponent, ElderCardContentDirective, ElderCardHeaderActionsDirective, ElderCardHeaderComponent, ElderCardModule, ElderCardOrganizerComponent, ElderCardOrganizerModule, ElderCardPanelComponent, ElderCardStackComponent, ElderCardSubtitleDirective, ElderCardTitleDirective, ElderCheckboxState, ElderChipLabelDirective, ElderChipListSelectComponent, ElderChipListSelectModule, ElderChipsModule, ElderClearSelectDirective, ElderClipboardPutDirective, ElderClipboardService, ElderConfirmDialogComponent, ElderConnectivityModule, ElderConnectivityService, ElderContainersModule, ElderCsvExportBtnComponent, ElderCsvModule, ElderCurrencyModule, ElderCurrencyPipe, ElderDataCommonModule, ElderDataToolbarComponent, ElderDataTransferModule, ElderDataTransferService, ElderDataViewBaseComponent, ElderDataViewOptions, ElderDataViewOptionsProvider, ElderDateSwitcherComponent, ElderDateTimeInputComponent, ElderDelayedFocusDirective, ElderDialogConfig, ElderDialogModule, ElderDialogPanelComponent, ElderDialogService, ElderDimensionsInputComponent, ElderDropZoneComponent, ElderDurationInputComponent, ElderEntityValueAccessorUtil, ElderEnumTranslationService, ElderErrorModule, ElderEventSourceService, ElderExceptionDetailComponent, ElderExpandToggleButtonComponent, ElderExpandToggleButtonModule, ElderFileDropZoneDirective, ElderFileModule, ElderFileSelectComponent, ElderFileSelectDirective, ElderFileUploadComponent, ElderFormFieldControlBase, ElderFormFieldDenseDirective, ElderFormFieldLabelDirective, ElderFormFieldNoHintDirective, ElderFormFieldNoSpinnerDirective, ElderFormsDirectivesModule, ElderFormsModule, ElderFromFieldBase, ElderFromFieldEntityBase, ElderFromFieldMultiEntityBase, ElderGlobalSearchComponent, ElderGlobalSearchModule, ElderGlobalSearchService, ElderGridComponent, ElderGridModule, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderHttpClient, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollLegacyDirective, ElderInfiniteScrollModule, ElderInputPatternDirective, ElderIntervalInputComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageModule, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, ElderMaxValidator, ElderMeasuresModule, ElderMinValidator, ElderMultiEntityValueAccessorUtil, ElderMultiSelectBase, ElderMultiSelectChipsComponent, ElderMultiSelectFormField, ElderMultipleOfUtil, ElderMultipleOfValidator, ElderNavGroupComponent, ElderNavLinkComponent, ElderNavListComponent, ElderNavModule, ElderNextFocusableDirective, ElderNumberCellDirective, ElderOfflineIndicatorComponent, ElderOverlayComponent, ElderOverlayModule, ElderOverlayOriginDirective, ElderOverlayTriggerDirective, ElderPaddingDirective, ElderPanelComponent, ElderPanelModule, ElderPeriodInputComponent, ElderPipesModule, ElderPlugParentFormDirective, ElderProgressBarComponent, ElderProgressBarModule, ElderQuantityFormFieldComponent, ElderQuantityInputControlComponent, ElderQuantityModule, ElderQuantityPipe, ElderQuantityRangeValidator, ElderQuantityService, ElderQuantityTransformPipe, ElderQuestionDialogComponent, ElderRepeatPipe, ElderRepeatPipeLegacy, ElderRequiredDimensionsValidator, ElderRequiredIgnoreZeroValidator, ElderRequiredQuantityValidator, ElderRoundPipe, ElderRouteOutletDrawerService, ElderRouterOutletService, ElderRouterService, ElderSafeUrlPipe, ElderScrollContainerComponent, ElderScrollbarDirective, ElderScrollbarModule, ElderSearchBoxComponent, ElderSearchContextDirective, ElderSearchInputDirective, ElderSearchModule, ElderSearchPanelComponent, ElderSelectBase, ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectComponent, ElderSelectComponentState, ElderSelectCustomInputDirective, ElderSelectFormField, ElderSelectModule, ElderSelectOnTabDirective, ElderSelectValueDirective, ElderSelectionDialogComponent, ElderSelectionDialogDirective, ElderSelectionMasterCheckboxComponent, ElderSelectionPopupTriggerAdapterDirective, ElderShellCenterDirective, ElderShellComponent, ElderShellModule, ElderShellNavigationToggleComponent, ElderShellService, ElderShellSideLeftDirective, ElderShellSideRightDirective, ElderShellSlotDirective, ElderSimpleSelectionViewComponent, ElderSimpleSelectionViewModule, ElderSingleSortComponent, ElderStackCardDirective, ElderStopEventPropagationDirective, ElderSvgViewerComponent, ElderTabDirective, ElderTabFocusTrapDirective, ElderTabGroupRoutingDirective, ElderTabModule, ElderTableActivationDirective, ElderTableComponent, ElderTableExtensionDirective, ElderTableGroup, ElderTableModel, ElderTableModelCdkTableBinding, ElderTableModelQueryGroup, ElderTableModule, ElderTableProviders, ElderTableRootDirective, ElderTableSortDirective, ElderTableToolbarDirective, ElderThemeApplierDirective, ElderThemeDirective, ElderThemeModule, ElderThemePreferenceService, ElderThemeService, ElderThemeToggleComponent, ElderTimeModule, ElderToastModule, ElderToastService, ElderTogglePanelComponent, ElderTogglePanelPrimaryDirective, ElderTogglePanelSecondaryDirective, ElderTogglePanelTriggerDirective, ElderToolbarColumnDirective, ElderToolbarComponent, ElderToolbarContentDirective, ElderToolbarModule, ElderToolbarService, ElderToolbarTitleComponent, ElderToolbarTitleService, ElderTouchedDirective, ElderTrimPipe, ElderTripleStateCheckboxDirective, ElderTruncatePipe, ElderUnitSelectDirective, ElderUnitService, ElderUrlFragment, ElderUrlFragmentModule, ElderUrlFragmentParamsService, ElderUrlFragmentSwitcherComponent, ElderValidationErrorDirective, ElderViewersModule, EntitySetPatch, ErrorUtil, ExceptionDetailCtx, FileEntry, FileListingRx, FileUploadClient, Filter, FilterContext, FilterUtil, FormFieldBaseComponent, GlobalDragDropService, HttpClientBuilder, HttpClientPristine, HttpDataTransfer, HttpDataTransferAggregateComponent, HttpDataTransferComponent, HttpDataTransferIndicatorComponent, HttpDataTransferOverviewComponent, HttpParamsBuilder, I18nBase, I18nPickAsyncPipe, I18nPickPipe, I18nText, IFrameState, IframeCloseDirective, IframeDialogComponent, IframeHostComponent, IframeService, IframeSideContentComponent, IndexedEntities, InternalRestClientConfig, Interval, IsoDurationPipe, IsoIntervalParsePipe, IsoIntervalPipe, JsonMapUtil, KafentConfig, KafentEvent, KafentEventService, KafentEventStream, KafentEventStreamDisabled, KafentEventStreamSse, KafentEventTransport, KafentModule, KafentSseEventChannel, KafentTokenProvider, KafentTokenProviderSessionStorage, KafentTopicSse, KnownElderThemes, KnownLocaleType, LocalListDataSource, LocalPagedDataSource, LocalisationPickerService, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, MultiModelBaseComponent, NextNumberUtil, Objects, OnlineStatus, Page, PageRequest, Pageable, ParseUtil, Path, PathNode, PeriodBucket, PeriodDuration, PeriodFormat, ProcessIterationContext, ProcessState, PropertyPathUtil, Quantity, QueryListBinding, QuestionDialogConfig, ReactiveEventSource, ReactiveMap, RefreshingEntity, RestClient, RestClientConfig, RestClientContinuable, RestClientList, RestClientPaged, SearchQuery, SelectionModel, SelectionModelPopupDirective, Sets, SimpleLocalisationPicker, Sort, SortOption, SortUtil, StandardToastComponent, SubBar, SuggestionProvider, TemplateCompositeControl, TemplatedSelectionDialogComponent, ThemeSpec, TimeAgoPipe, TimeDurationPipe, TimeUtil, ToIsoDateStringPipe, ToastType, TokenChunkRequest, ToolbarHeader, TranslatedEnumValue, TypedEventMessage, Unit, UnitDimension, UnitDimensionInfo, UnitInfo, UnitRegistry, UrlBuilder, UrlQueryParams, UuidUtil, ValueAccessorBase, ValueWrapper, ViewProviders, WeightPipe, alphaNumStringComparator, buildFormIntegrationProviders, createDataOptionsProvider, createSelectionModel, existingOrNewElderTableModel, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isElderEntityValueAccessor, isElderMultiEntityValueAccessor, isListDataSource, isPagedDataSource, naturalValueComparator, newElderTableModel, proxyControlContainer, registerLocale, runInZone, themeInit };
+export { Arrays, AuditedEntity, AutoStartSpec, BlobUrl, BytesFormat, BytesPerSecondFormat, BytesPipe, CardDropEvent, CardOrganizerData, CardStack, CollectionUtil, ComparatorBuilder, ConfirmDialogConfig, ContinuableListing, CsvColumnSpec, CsvSerializer, CsvSpec, CsvStreamExporter, CsvStreamExporterBuilder, CsvStreamExporterBuilderService, Currency, CurrencyCode, CurrencyUnit, CurrencyUnitRegistry, CustomDateAdapter, DataContextActivePage, DataContextAutoStarter, DataContextBase, DataContextBuilder, DataContextContinuableBase, DataContextContinuablePaged, DataContextContinuableToken, DataContextLifeCycleBinding, DataContextSelectionDirective, DataContextSimple, DataContextSnapshot, DataContextSourceEventBinding, DataContextStateIndicatorComponent, DataContextStatus, DataSourceAdapter, DataSourceBase, DataSourceChangeEvent, DataSourceChangeType, DataSourceProcessor, DataTransferFactory, DataTransferProgress, DataTransferProgressAggregate, DataTransferState, DataTransferStatus, DataViewIframeAdapterDirective, DataViewIframeComponent, DataViewMessage, DataViewOptionsProviderBinding, DataViewSelection, DataViewSelectionInit, DateUtil, DelegateContinuableDataSource, DelegateDataSource, DelegateListDataSource, DelegatePagedDataSource, Dimensions, DrawerOutletBinding, DurationBucket, DurationFormat, ELDER_DATA_VIEW, ELDER_SELECT_BASE, ElderAccessDeniedComponent, ElderAccessDeniedModule, ElderAppHeaderComponent, ElderAuditModule, ElderAuditedEntityComponent, ElderAutoSelectFirstDirective, ElderAutocompleteComponent, ElderAutocompleteDirective, ElderAutocompleteManyDirective, ElderAutocompleteModule, ElderBadgeComponent, ElderBadgeDirective, ElderBadgeModule, ElderBlobViewerComponent, ElderBreadCrumbsComponent, ElderBreadCrumbsModule, ElderButtonGroupComponent, ElderButtonGroupModule, ElderCardComponent, ElderCardContentDirective, ElderCardHeaderActionsDirective, ElderCardHeaderComponent, ElderCardModule, ElderCardOrganizerComponent, ElderCardOrganizerModule, ElderCardPanelComponent, ElderCardStackComponent, ElderCardSubtitleDirective, ElderCardTitleDirective, ElderCheckboxState, ElderChipLabelDirective, ElderChipListSelectComponent, ElderChipListSelectModule, ElderChipsModule, ElderClearSelectDirective, ElderClipboardPutDirective, ElderClipboardService, ElderConfirmDialogComponent, ElderConnectivityModule, ElderConnectivityService, ElderContainersModule, ElderCsvExportBtnComponent, ElderCsvModule, ElderCurrencyModule, ElderCurrencyPipe, ElderDataCommonModule, ElderDataToolbarComponent, ElderDataTransferModule, ElderDataTransferService, ElderDataViewBaseComponent, ElderDataViewOptions, ElderDataViewOptionsProvider, ElderDateSwitcherComponent, ElderDateTimeInputComponent, ElderDelayedFocusDirective, ElderDialogConfig, ElderDialogModule, ElderDialogPanelComponent, ElderDialogService, ElderDimensionsInputComponent, ElderDropZoneComponent, ElderDurationInputComponent, ElderEntityValueAccessorUtil, ElderEnumTranslationService, ElderErrorModule, ElderEventSourceService, ElderExceptionDetailComponent, ElderExpandToggleButtonComponent, ElderExpandToggleButtonModule, ElderFileDropZoneDirective, ElderFileModule, ElderFileSelectComponent, ElderFileSelectDirective, ElderFileUploadComponent, ElderFormFieldControlBase, ElderFormFieldDenseDirective, ElderFormFieldLabelDirective, ElderFormFieldNoHintDirective, ElderFormFieldNoSpinnerDirective, ElderFormsDirectivesModule, ElderFormsModule, ElderFromFieldBase, ElderFromFieldEntityBase, ElderFromFieldMultiEntityBase, ElderGlobalSearchComponent, ElderGlobalSearchModule, ElderGlobalSearchService, ElderGridComponent, ElderGridModule, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderHttpClient, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollModule, ElderInputPatternDirective, ElderIntervalInputComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageModule, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, ElderMaxValidator, ElderMeasuresModule, ElderMinValidator, ElderMultiEntityValueAccessorUtil, ElderMultiSelectBase, ElderMultiSelectChipsComponent, ElderMultiSelectFormField, ElderMultipleOfUtil, ElderMultipleOfValidator, ElderNavGroupComponent, ElderNavLinkComponent, ElderNavListComponent, ElderNavModule, ElderNextFocusableDirective, ElderNumberCellDirective, ElderOfflineIndicatorComponent, ElderOverlayComponent, ElderOverlayModule, ElderOverlayOriginDirective, ElderOverlayTriggerDirective, ElderPaddingDirective, ElderPanelComponent, ElderPanelModule, ElderPeriodInputComponent, ElderPipesModule, ElderPlugParentFormDirective, ElderProgressBarComponent, ElderProgressBarModule, ElderQuantityFormFieldComponent, ElderQuantityInputControlComponent, ElderQuantityModule, ElderQuantityPipe, ElderQuantityRangeValidator, ElderQuantityService, ElderQuantityTransformPipe, ElderQuestionDialogComponent, ElderRepeatPipe, ElderRepeatPipeLegacy, ElderRequiredDimensionsValidator, ElderRequiredIgnoreZeroValidator, ElderRequiredQuantityValidator, ElderRoundPipe, ElderRouteOutletDrawerService, ElderRouterOutletService, ElderRouterService, ElderSafeUrlPipe, ElderScrollContainerComponent, ElderScrollbarDirective, ElderScrollbarModule, ElderSearchBoxComponent, ElderSearchContextDirective, ElderSearchInputDirective, ElderSearchModule, ElderSearchPanelComponent, ElderSelectBase, ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectComponent, ElderSelectComponentState, ElderSelectCustomInputDirective, ElderSelectFormField, ElderSelectModule, ElderSelectOnTabDirective, ElderSelectValueDirective, ElderSelectionDialogComponent, ElderSelectionDialogDirective, ElderSelectionMasterCheckboxComponent, ElderSelectionPopupTriggerAdapterDirective, ElderShellCenterDirective, ElderShellComponent, ElderShellModule, ElderShellNavigationToggleComponent, ElderShellService, ElderShellSideLeftDirective, ElderShellSideRightDirective, ElderShellSlotDirective, ElderSimpleSelectionViewComponent, ElderSimpleSelectionViewModule, ElderSingleSortComponent, ElderStackCardDirective, ElderStopEventPropagationDirective, ElderSvgViewerComponent, ElderTabDirective, ElderTabFocusTrapDirective, ElderTabGroupRoutingDirective, ElderTabModule, ElderTableActivationDirective, ElderTableComponent, ElderTableExtensionDirective, ElderTableGroup, ElderTableModel, ElderTableModelCdkTableBinding, ElderTableModelQueryGroup, ElderTableModule, ElderTableProviders, ElderTableRootDirective, ElderTableSortDirective, ElderTableToolbarDirective, ElderThemeApplierDirective, ElderThemeDirective, ElderThemeModule, ElderThemePreferenceService, ElderThemeService, ElderThemeToggleComponent, ElderTimeModule, ElderToastModule, ElderToastService, ElderTogglePanelComponent, ElderTogglePanelPrimaryDirective, ElderTogglePanelSecondaryDirective, ElderTogglePanelTriggerDirective, ElderToolbarColumnDirective, ElderToolbarComponent, ElderToolbarContentDirective, ElderToolbarModule, ElderToolbarService, ElderToolbarTitleComponent, ElderToolbarTitleService, ElderTouchedDirective, ElderTrimPipe, ElderTripleStateCheckboxDirective, ElderTruncatePipe, ElderUnitSelectDirective, ElderUnitService, ElderUrlFragment, ElderUrlFragmentModule, ElderUrlFragmentParamsService, ElderUrlFragmentSwitcherComponent, ElderValidationErrorDirective, ElderViewersModule, EntitySetPatch, ErrorUtil, ExceptionDetailCtx, FileEntry, FileListingRx, FileUploadClient, Filter, FilterContext, FilterUtil, FormFieldBaseComponent, GlobalDragDropService, HttpClientBuilder, HttpClientPristine, HttpDataTransfer, HttpDataTransferAggregateComponent, HttpDataTransferComponent, HttpDataTransferIndicatorComponent, HttpDataTransferOverviewComponent, HttpParamsBuilder, I18nBase, I18nPickAsyncPipe, I18nPickPipe, I18nText, IFrameState, IframeCloseDirective, IframeDialogComponent, IframeHostComponent, IframeService, IframeSideContentComponent, IndexedEntities, InternalRestClientConfig, Interval, IsoDurationPipe, IsoIntervalParsePipe, IsoIntervalPipe, JsonMapUtil, KafentConfig, KafentEvent, KafentEventService, KafentEventStream, KafentEventStreamDisabled, KafentEventStreamSse, KafentEventTransport, KafentModule, KafentSseEventChannel, KafentTokenProvider, KafentTokenProviderSessionStorage, KafentTopicSse, KnownElderThemes, KnownLocaleType, LocalListDataSource, LocalPagedDataSource, LocalisationPickerService, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, MultiModelBaseComponent, NextNumberUtil, Objects, OnlineStatus, Page, PageRequest, Pageable, ParseUtil, Path, PathNode, PeriodBucket, PeriodDuration, PeriodFormat, ProcessIterationContext, ProcessState, PropertyPathUtil, Quantity, QueryListBinding, QuestionDialogConfig, ReactiveEventSource, ReactiveMap, RefreshingEntity, RestClient, RestClientConfig, RestClientContinuable, RestClientList, RestClientPaged, SearchQuery, SelectionModel, SelectionModelPopupDirective, Sets, SimpleLocalisationPicker, Sort, SortOption, SortUtil, StandardToastComponent, SubBar, SuggestionProvider, TemplateCompositeControl, TemplatedSelectionDialogComponent, ThemeSpec, TimeAgoPipe, TimeDurationPipe, TimeUtil, ToIsoDateStringPipe, ToastType, TokenChunkRequest, ToolbarHeader, TranslatedEnumValue, TypedEventMessage, Unit, UnitDimension, UnitDimensionInfo, UnitInfo, UnitRegistry, UrlBuilder, UrlQueryParams, UuidUtil, ValueAccessorBase, ValueWrapper, ViewProviders, WeightPipe, alphaNumStringComparator, buildFormIntegrationProviders, createDataOptionsProvider, createSelectionModel, existingOrNewElderTableModel, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isElderEntityValueAccessor, isElderMultiEntityValueAccessor, isListDataSource, isPagedDataSource, lazySample, lazySampleTime, naturalValueComparator, newElderTableModel, proxyControlContainer, registerLocale, runInZone, themeInit };
 //# sourceMappingURL=elderbyte-ngx-starter.mjs.map