@elderbyte/ngx-starter 19.5.0 → 19.6.1

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -1,17 +1,17 @@
 import * as i2 from '@angular/common';
 import { formatDate, CommonModule, formatCurrency, getCurrencySymbol, NgIf, AsyncPipe, NgFor, NgClass, NgTemplateOutlet, NgStyle, formatNumber, DecimalPipe, DatePipe, registerLocaleData, CurrencyPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Pipe, LOCALE_ID, Inject, NgModule, Optional, SkipSelf, Input, Output, Directive, forwardRef, ViewChild, inject, ElementRef, DestroyRef, model, signal, computed, untracked, HostBinding, ViewChildren, ContentChild, Injectable, ChangeDetectionStrategy, Component, Host, APP_INITIALIZER, TemplateRef, HostListener, EventEmitter, input, ViewEncapsulation, InjectionToken, output, effect, ContentChildren, viewChild, viewChildren, booleanAttribute, contentChild, contentChildren } from '@angular/core';
+import { Pipe, LOCALE_ID, Inject, NgModule, Optional, SkipSelf, Input, Output, Directive, forwardRef, ViewChild, inject, ElementRef, DestroyRef, model, signal, computed, untracked, HostBinding, ViewChildren, ContentChild, Injectable, ChangeDetectionStrategy, Component, Host, APP_INITIALIZER, TemplateRef, HostListener, EventEmitter, input, ViewEncapsulation, InjectionToken, output, effect, ContentChildren, contentChildren, viewChild, viewChildren, booleanAttribute, contentChild } from '@angular/core';
 import * as i1 from '@angular/platform-browser';
 import { Duration, Period, TemporalQueries, LocalTime, Instant, LocalDate, nativeJs, ZoneId, DateTimeFormatter, convert, ZonedDateTime, Temporal as Temporal$1 } from '@js-joda/core';
 import { LoggerFactory } from '@elderbyte/ts-logger';
-import { timer, defer, ReplaySubject, concat, finalize, exhaustMap, BehaviorSubject, Subject, switchMap, of, combineLatest, EMPTY, merge, throwError, forkJoin, mergeWith, Observable, from, toArray, zip, mergeMap as mergeMap$1, fromEvent, skipUntil, map as map$1, combineLatestWith as combineLatestWith$1, NEVER } from 'rxjs';
+import { timer, defer, ReplaySubject, concat, finalize, exhaustMap, BehaviorSubject, Subject, switchMap, of, combineLatest, EMPTY, merge, throwError, forkJoin, mergeWith, Observable, from, toArray, zip, mergeMap as mergeMap$1, fromEvent, mergeAll, skipUntil, map as map$1, combineLatestWith as combineLatestWith$1, NEVER } from 'rxjs';
 import { tap, takeUntil, takeWhile, map, filter, distinctUntilChanged, debounceTime, catchError, first, take, switchMap as switchMap$1, mergeMap, expand, reduce, startWith, skip, delay, share, combineLatestWith, skipWhile, timeout } from 'rxjs/operators';
 import { Temporal } from '@js-temporal/polyfill';
 import * as i1$1 from '@angular/common/http';
 import { HttpParams, HttpEventType, HttpRequest, HttpClient, HttpErrorResponse, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { DataSource } from '@angular/cdk/collections';
-import { outputToObservable, takeUntilDestroyed, toSignal, toObservable } from '@angular/core/rxjs-interop';
+import { outputToObservable, takeUntilDestroyed, toSignal, toObservable, outputFromObservable } from '@angular/core/rxjs-interop';
 import * as i1$4 from '@angular/forms';
 import { ControlContainer, NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl, NgModel, FormsModule, UntypedFormControl, ReactiveFormsModule, NgForm, Validators } from '@angular/forms';
 import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
@@ -38,19 +38,20 @@ import * as i1$a from '@angular/material/autocomplete';
 import { MatAutocompleteTrigger, MatAutocomplete, MatAutocompleteModule } from '@angular/material/autocomplete';
 import * as i1$8 from '@angular/material/chips';
 import { MatChipGrid, MatChipRow, MatChipRemove, MatChipInput, MatChipsModule, MatChip, MatChipAvatar, MatChipSet, MatChipTrailingIcon, MatChipListbox, MatChipOption } from '@angular/material/chips';
-import * as i2$4 from '@angular/material/input';
+import * as i2$5 from '@angular/material/input';
 import { MatInput, MatInputModule } from '@angular/material/input';
 import { MatList, MatListSubheaderCssMatStyler, MatListItem, MatListModule } from '@angular/material/list';
 import { MatProgressBar, MatProgressBarModule } from '@angular/material/progress-bar';
 import * as i1$6 from '@angular/material/snack-bar';
 import { MAT_SNACK_BAR_DATA, MatSnackBarLabel, MatSnackBarActions, MatSnackBarAction, MatSnackBarModule } from '@angular/material/snack-bar';
-import { transferArrayItem, moveItemInArray, CdkDropList, CdkDrag, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i2$2 from '@angular/cdk/drag-drop';
+import { transferArrayItem, moveItemInArray, CdkDropList, CdkDrag, DragDropModule, CdkDropListGroup } from '@angular/cdk/drag-drop';
 import { MatDivider, MatDividerModule } from '@angular/material/divider';
 import * as i8 from '@angular/material/menu';
 import { MatMenuTrigger, MatMenu, MatMenuItem, MatMenuModule } from '@angular/material/menu';
 import * as i1$7 from '@angular/material/dialog';
 import { MatDialogClose, MAT_DIALOG_DATA, MatDialogConfig, MatDialogModule } from '@angular/material/dialog';
-import * as i2$2 from '@angular/material/badge';
+import * as i2$3 from '@angular/material/badge';
 import { MatBadge, MatBadgeModule } from '@angular/material/badge';
 import * as i1$c from '@angular/material/checkbox';
 import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
@@ -60,7 +61,7 @@ import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from '@angular/mat
 import { MatColumnDef, MatRowDef, MatTable, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatFooterCellDef, MatFooterCell, MatHeaderRowDef, MatHeaderRow, MatRow, MatFooterRowDef, MatFooterRow, MatTableModule } from '@angular/material/table';
 import * as i1$9 from '@angular/cdk/table';
 import { CdkTableModule } from '@angular/cdk/table';
-import * as i2$3 from '@angular/material/sort';
+import * as i2$4 from '@angular/material/sort';
 import { MatSortModule, MatSort, MatSortHeader } from '@angular/material/sort';
 import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf, ScrollingModule } from '@angular/cdk/scrolling';
 import * as i3 from '@angular/cdk/layout';
@@ -3762,6 +3763,9 @@ class SortContext {
     findSort(prop) {
         return this.sortsSnapshot.filter((f) => f.prop === prop).find((first) => true);
     }
+    isEmpty() {
+        return !this._sorts.getValue() || this._sorts.getValue().length === 0;
+    }
     /***************************************************************************
      *                                                                         *
      * Public API                                                              *
@@ -5359,13 +5363,18 @@ class LocalListDataSource extends DataSourceBase {
     saveAll(toSave) {
         toSave.forEach((entity) => this.save(entity));
     }
-    save(entity) {
+    save(entity, index) {
         const id = this.getId(entity);
         const newData = [...this.data];
         const existingIndex = newData.findIndex((entity) => this.getId(entity) === id);
         let created = false;
         if (existingIndex === -1) {
-            newData.push(entity);
+            if (index !== null) {
+                newData.splice(index, 0, entity);
+            }
+            else {
+                newData.push(entity);
+            }
             created = true;
         }
         else {
@@ -5488,6 +5497,12 @@ function isDataSource(object) {
 function isListDataSource(object) {
     return object.findAllFiltered !== undefined;
 }
+function isLocalListDataSource(object) {
+    return isListDataSource(object) &&
+        object.delete !== undefined &&
+        object.save !== undefined &&
+        object.replaceAll !== undefined;
+}
 function isPagedDataSource(object) {
     return object.findAllPaged !== undefined;
 }
@@ -14683,6 +14698,695 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                     args: [ELDER_DATA_VIEW]
                 }] }, { type: ActivationModel }] });
 
+class DataViewDragEnteredEvent {
+    constructor(
+    /** Data context into which the user has moved the item. */
+    context, 
+    /** Item that was moved into the container. */
+    item, 
+    /** Index at which the item has entered the container. */
+    currentIndex) {
+        this.context = context;
+        this.item = item;
+        this.currentIndex = currentIndex;
+    }
+}
+
+class DataViewDragExitedEvent {
+    constructor(
+    /** Data context from which the user has a removed an item. */
+    context, 
+    /** Item that was removed from the container. */
+    item) {
+        this.context = context;
+        this.item = item;
+    }
+}
+
+class DataViewItemDropEvent {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(
+    /**
+     * fromStack The stack where the card originated from
+     */
+    fromContext, 
+    /**
+     * toStack The stack where the card is dropped to
+     */
+    toContext, 
+    /**
+     * card The row-item domain model
+     */
+    item, 
+    /**
+     *  fromIndex Index of the item when it was picked up fromContext.
+     */
+    fromIndex, 
+    /**
+     * toIndex Current index of the item in toContext.
+     */
+    toIndex, 
+    /**
+     * isPointerOverContainer Whether the user's pointer was over the container when the item was dropped.
+     */
+    isPointerOverContainer) {
+        this.fromContext = fromContext;
+        this.toContext = toContext;
+        this.item = item;
+        this.fromIndex = fromIndex;
+        this.toIndex = toIndex;
+        this.isPointerOverContainer = isPointerOverContainer;
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    /**
+     * Returns true if the drop happened across drop contexts.
+     */
+    isCrossContextDrop() {
+        return this.fromContext !== this.toContext;
+    }
+    /**
+     * Returns true if the drop happened at the exact same position as the drag started
+     */
+    isSamePositionDrop() {
+        return this.fromContext === this.toContext && this.fromIndex === this.toIndex;
+    }
+    /**
+     * Returns message string stating the drag. Useful for logging.
+     */
+    getDragLogMessage() {
+        if (this.isSamePositionDrop()) {
+            return ('Item was dragged from context ' +
+                this.fromContext.id +
+                ' at index ' +
+                this.fromIndex +
+                ' but dropped at the same position.');
+        }
+        else if (this.isCrossContextDrop()) {
+            return ('Item was dragged from context ' +
+                this.fromContext.id +
+                ' at index ' +
+                this.fromIndex +
+                ' to context ' +
+                this.toContext.id +
+                ' at index ' +
+                this.toIndex);
+        }
+        else {
+            return ('Item was dragged within context ' +
+                this.fromContext.id +
+                ' from index ' +
+                this.fromIndex +
+                ' to index ' +
+                this.toIndex);
+        }
+    }
+}
+
+/**
+ * Controller service for a single data view with drag and drop support
+ * (ElderDataViewDndDirective).
+ */
+class DataViewDndControllerService {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor() {
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.log = LoggerFactory.getLogger(this.constructor.name);
+        this._dropList$ = new BehaviorSubject(null);
+        this._dataView$ = new BehaviorSubject(null);
+        this._canDragItemPredicate$ = new BehaviorSubject(null);
+        this._ignoreSamePositionDrops$ = new BehaviorSubject(false);
+        this.itemDropped$ = new Subject();
+        this.dropListEntered$ = new Subject();
+        this.dropListExited$ = new Subject();
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    get dropList$() {
+        return this._dropList$.pipe(filter((dropList) => !!dropList));
+    }
+    get canDragItemPredicate$() {
+        return this._canDragItemPredicate$.asObservable();
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    registerDataView(dataView) {
+        if (dataView === null) {
+            throw new Error('dataView must not be null!');
+        }
+        this._dataView$.next(dataView);
+    }
+    register(cdkDropList) {
+        if (cdkDropList === null) {
+            throw new Error('cdkDropList must not be null!');
+        }
+        this._dropList$.next(cdkDropList);
+    }
+    setCanDragItemPredicate(predicate) {
+        this._canDragItemPredicate$.next(predicate);
+    }
+    setIgnoreSamePositionDrops(ignoreSamePositionDrops) {
+        this._ignoreSamePositionDrops$.next(ignoreSamePositionDrops);
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Event Handling                                                          *
+     *                                                                         *
+     **************************************************************************/
+    onItemDropped(event) {
+        this.handleItemDropped(event);
+    }
+    onDropListEntered(event) {
+        this.handleDropListEntered(event);
+    }
+    onDropListExited(event) {
+        this.handleDropListExited(event);
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Private Methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    handleItemDropped(cdkEvent) {
+        const event = this.buildItemDropEvent(cdkEvent);
+        if (event.isSamePositionDrop() && this._ignoreSamePositionDrops$.getValue()) {
+            return;
+        }
+        this.itemDropped$.next(event);
+    }
+    buildItemDropEvent(cdkEvent) {
+        return new DataViewItemDropEvent(cdkEvent.previousContainer.data, cdkEvent.container.data, cdkEvent.item.data, cdkEvent.previousIndex, cdkEvent.currentIndex, cdkEvent.isPointerOverContainer);
+    }
+    handleDropListEntered(cdkEvent) {
+        this.dropListEntered$.next(this.buildDragEnteredEvent(cdkEvent));
+    }
+    buildDragEnteredEvent(cdkEvent) {
+        return new DataViewDragEnteredEvent(cdkEvent.container.data, cdkEvent.item.data, cdkEvent.currentIndex);
+    }
+    handleDropListExited(cdkEvent) {
+        this.dropListExited$.next(this.buildDragExitedEvent(cdkEvent));
+    }
+    buildDragExitedEvent(cdkEvent) {
+        return new DataViewDragExitedEvent(cdkEvent.container.data, cdkEvent.item.data);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DataViewDndControllerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DataViewDndControllerService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DataViewDndControllerService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+/**
+ * Directive adding drag and drop support on an Elder data view.
+ */
+class ElderDataViewDndDirective {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(dndController, _dataView) {
+        this.dndController = dndController;
+        this._dataView = _dataView;
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.log = LoggerFactory.getLogger(this.constructor.name);
+        /** Used to disconnect obsolete event bindings. */
+        this._unsubscribeEventBindings = new Subject();
+        /** Controls if drag and drop is generally enabled or not. */
+        this.canDrag = input(false, { transform: booleanTransformFn });
+        /** Allows connecting different drop views together. */
+        this.dropConnectedTo = input([]);
+        /** Predicate to determine if an item is draggable or not. */
+        this.canDragItemPredicate = input(() => true);
+        /** Predicate to determine if one can enter a drop view. */
+        this.canEnterPredicate = input(() => true);
+        /** If ture, will ignore drop events where the item was dropped at the same position from where it was dragged. */
+        this.ignoreSamePositionDrops = input(false, { transform: booleanTransformFn });
+        /** Fired when an item is dropped. */
+        this.itemDropped = outputFromObservable(this.dndController.itemDropped$);
+        /** Fired when a drop view is entered while dragging. */
+        this.dropListEntered = outputFromObservable(this.dndController.dropListEntered$);
+        /** Fired when a drop view is exited while dragging. */
+        this.dropListExited = outputFromObservable(this.dndController.dropListExited$);
+        this.dndController.registerDataView(_dataView);
+        this._dataContext = toSignal(this._dataView.dataContext$);
+        this._dropList = toSignal(this.dndController.dropList$);
+        effect(() => {
+            this.bindEvents(this._dropList());
+        });
+        effect(() => {
+            this.bindCanDrag(this._dropList(), this.canDrag());
+        });
+        effect(() => {
+            this.bindConnectedTo(this._dropList(), this.dropConnectedTo());
+        });
+        effect(() => {
+            this.bindCanEnterPredicate(this._dropList(), this.canEnterPredicate());
+        });
+        effect(() => {
+            this.bindData(this._dropList(), this._dataContext());
+        });
+        effect(() => {
+            this.controller.setCanDragItemPredicate(this.canDragItemPredicate());
+        });
+        effect(() => {
+            this.controller.setIgnoreSamePositionDrops(this.ignoreSamePositionDrops());
+        });
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    get controller() {
+        return this.dndController;
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Private Methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    bindEvents(dropList) {
+        this._unsubscribeEventBindings.next();
+        if (dropList) {
+            dropList.dropped
+                .pipe(takeUntil(this._unsubscribeEventBindings))
+                .subscribe((event) => this.dndController.onItemDropped(event));
+            dropList.entered
+                .pipe(takeUntil(this._unsubscribeEventBindings))
+                .subscribe((event) => this.dndController.onDropListEntered(event));
+            dropList.exited
+                .pipe(takeUntil(this._unsubscribeEventBindings))
+                .subscribe((event) => this.dndController.onDropListExited(event));
+        }
+    }
+    bindCanDrag(dropList, canDrag) {
+        if (dropList) {
+            dropList.disabled = !canDrag;
+        }
+    }
+    bindConnectedTo(dropList, connectedTo) {
+        if (dropList) {
+            dropList.connectedTo = connectedTo;
+        }
+    }
+    bindCanEnterPredicate(dropList, canEnterPredicate) {
+        if (dropList && canEnterPredicate) {
+            dropList.enterPredicate = this.dropEnterPredicate(canEnterPredicate);
+        }
+    }
+    dropEnterPredicate(predicate) {
+        return (drag, drop) => {
+            if (predicate) {
+                return predicate(drag.data, drop.data);
+            }
+            return true;
+        };
+    }
+    bindData(cdkDropList, dataContext) {
+        if (cdkDropList && dataContext) {
+            cdkDropList.data = dataContext;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderDataViewDndDirective, deps: [{ token: DataViewDndControllerService }, { token: ELDER_DATA_VIEW }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: ElderDataViewDndDirective, isStandalone: true, selector: "[elderDataViewDnd]", inputs: { canDrag: { classPropertyName: "canDrag", publicName: "canDrag", isSignal: true, isRequired: false, transformFunction: null }, dropConnectedTo: { classPropertyName: "dropConnectedTo", publicName: "dropConnectedTo", isSignal: true, isRequired: false, transformFunction: null }, canDragItemPredicate: { classPropertyName: "canDragItemPredicate", publicName: "canDragItemPredicate", isSignal: true, isRequired: false, transformFunction: null }, canEnterPredicate: { classPropertyName: "canEnterPredicate", publicName: "canEnterPredicate", isSignal: true, isRequired: false, transformFunction: null }, ignoreSamePositionDrops: { classPropertyName: "ignoreSamePositionDrops", publicName: "ignoreSamePositionDrops", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemDropped: "itemDropped", dropListEntered: "dropListEntered", dropListExited: "dropListExited" }, providers: [DataViewDndControllerService], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderDataViewDndDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[elderDataViewDnd]',
+                    providers: [DataViewDndControllerService],
+                }]
+        }], ctorParameters: () => [{ type: DataViewDndControllerService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [ELDER_DATA_VIEW]
+                }] }] });
+
+/**
+ * Controller service for a single DataViewDndGroup.
+ */
+class DataViewDndGroupControllerService {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor() {
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.log = LoggerFactory.getLogger(this.constructor.name);
+        this._dropViews$ = new BehaviorSubject([]);
+        /**
+         * Subject emitting each time an item is dropped on any drop view of this group.
+         */
+        this.itemDropped$ = new Subject();
+        this._dropViews$
+            .pipe(takeUntilDestroyed(), 
+        // merge all itemDropEvent streams from each child into one main itemDropEvent stream
+        mergeMap$1((views) => this.getItemDropObservables(views)), mergeAll())
+            .subscribe((event) => this.handleItemDrop(event));
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    setDropViews(dropViews) {
+        this._dropViews$.next(dropViews);
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Private Methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    getItemDropObservables(views) {
+        return views.map((v) => this.getItemDropObservable(v));
+    }
+    getItemDropObservable(dropView) {
+        return dropView.controller.itemDropped$.asObservable();
+    }
+    handleItemDrop(dropEvent) {
+        this.itemDropped$.next(dropEvent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DataViewDndGroupControllerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DataViewDndGroupControllerService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: DataViewDndGroupControllerService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [] });
+
+/**
+ * Directive to group multiple drop data view together.
+ * Placing this directive to any element will automatically connect
+ * all ElderDataViewDndDirective elements beneath it.
+ */
+class ElderDataViewDndGroupDirective {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(groupController) {
+        this.groupController = groupController;
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.log = LoggerFactory.getLogger(this.constructor.name);
+        this.dropViews = contentChildren((ElderDataViewDndDirective), { descendants: true });
+        this.itemDropped = outputFromObservable(this.groupController.itemDropped$);
+        effect(() => {
+            this.groupController.setDropViews(this.dropViews());
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderDataViewDndGroupDirective, deps: [{ token: DataViewDndGroupControllerService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.4", type: ElderDataViewDndGroupDirective, isStandalone: true, selector: "[elderDataViewDndGroup]", outputs: { itemDropped: "itemDropped" }, providers: [DataViewDndGroupControllerService], queries: [{ propertyName: "dropViews", predicate: (ElderDataViewDndDirective), descendants: true, isSignal: true }], hostDirectives: [{ directive: i2$2.CdkDropListGroup }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderDataViewDndGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[elderDataViewDndGroup]',
+                    hostDirectives: [CdkDropListGroup], // auto-connects all contained cdkDropLists
+                    providers: [DataViewDndGroupControllerService],
+                }]
+        }], ctorParameters: () => [{ type: DataViewDndGroupControllerService }] });
+
+/**
+ * Support util for updating data view models
+ * according to drop events.
+ */
+class DataViewDndModelUtil {
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    static { this.log = LoggerFactory.getLogger('DataViewDndModelUtil'); }
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    static updateModel(itemDropEvent) {
+        if (!this.supportsModelUpdate(itemDropEvent)) {
+            throw Error('Cannot handle item drop, since either source or target data source is not a local list');
+        }
+        const instructions = ViewDropModelUpdateInstruction.of(itemDropEvent);
+        if (itemDropEvent.isCrossContextDrop()) {
+            // Dragged from one context to another
+            this.moveItemAcrossContexts(instructions);
+        }
+        else {
+            // Dragged and dropped inside the same context
+            this.moveItemWithinContext(instructions);
+        }
+    }
+    static supportsModelUpdate(itemDropEvent) {
+        return (isLocalListDataSource(itemDropEvent.fromContext.dataSource) ||
+            isLocalListDataSource(itemDropEvent.toContext.dataSource));
+    }
+    static moveItemAcrossContexts(instructions) {
+        transferArrayItem(instructions.fromDataSource.data, instructions.toDataSource.data, instructions.fromIndex, instructions.toIndex);
+        instructions.fromContext.refresh();
+        instructions.toContext.refresh();
+    }
+    static moveItemWithinContext(instructions) {
+        moveItemInArray(instructions.fromDataSource.data, instructions.fromIndex, instructions.toIndex);
+        instructions.fromContext.refresh();
+    }
+}
+class ViewDropModelUpdateInstruction {
+    static of(dropEvent) {
+        return new ViewDropModelUpdateInstruction(dropEvent.item, dropEvent.fromContext, dropEvent.toContext, dropEvent.fromIndex, dropEvent.toIndex);
+    }
+    constructor(item, fromContext, toContext, fromIndex, toIndex) {
+        this.item = item;
+        this.fromContext = fromContext;
+        this.toContext = toContext;
+        this.fromIndex = fromIndex;
+        this.toIndex = toIndex;
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    get fromDataSource() {
+        return this.fromContext.dataSource;
+    }
+    get toDataSource() {
+        return this.toContext.dataSource;
+    }
+}
+
+/**
+ * Adds support for automatic model updates
+ * according to occurring drag and drop on data views.
+ */
+class ElderLocalDndSupportDirective {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(dropView, dropGroup, dropViewController, dropGroupController, _dataView) {
+        this.dropView = dropView;
+        this.dropGroup = dropGroup;
+        this.dropViewController = dropViewController;
+        this.dropGroupController = dropGroupController;
+        this._dataView = _dataView;
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.log = LoggerFactory.getLogger(this.constructor.name);
+        if (dropView) {
+            this.initSingleDropViewModelTracking();
+        }
+        else if (dropGroup) {
+            this.initDropGroupModelTracking();
+        }
+        else {
+            throw Error('Directive must be placed next to ElderDataViewDndDirective or DataViewDropGroupDirective');
+        }
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Single Drop View Mode                                                   *
+     *                                                                         *
+     **************************************************************************/
+    initSingleDropViewModelTracking() {
+        this._dataView.dataContext$.pipe(takeUntilDestroyed()).subscribe((dataContext) => {
+            this.dataContext = dataContext;
+            if (dataContext && !isLocalListDataSource(dataContext.dataSource)) {
+                throw new Error('Cannot initialize single drop view model tracking. Unsupported dataSource.');
+            }
+            this.dataSource = dataContext?.dataSource;
+        });
+        this.dropViewController.itemDropped$
+            .pipe(takeUntilDestroyed())
+            .subscribe((event) => this.handleItemDrop(event));
+    }
+    handleItemDrop(itemDropEvent) {
+        if (!this.dataContext || !this.dataSource) {
+            this.log.error('Cannot handle itemDropEvent since either dataContext or dataSource is null.');
+            return;
+        }
+        if (this.isSortDefined()) {
+            this.log.error('Cannot handle itemDropEvent since dataContext has an active sort definition:', this.dataContext.sort);
+            return;
+        }
+        this.updateModel(itemDropEvent);
+    }
+    isSortDefined() {
+        return !this.dataContext?.sort.isEmpty();
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Drop Group Mode                                                         *
+     *                                                                         *
+     **************************************************************************/
+    initDropGroupModelTracking() {
+        this.dropGroupController.itemDropped$
+            .pipe(takeUntilDestroyed())
+            .subscribe((event) => this.handleGroupDrop(event));
+    }
+    handleGroupDrop(itemDropEvent) {
+        this.updateModel(itemDropEvent);
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Private Methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    updateModel(itemDropEvent) {
+        DataViewDndModelUtil.updateModel(itemDropEvent);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderLocalDndSupportDirective, deps: [{ token: ElderDataViewDndDirective, optional: true }, { token: ElderDataViewDndGroupDirective, optional: true }, { token: DataViewDndControllerService, optional: true }, { token: DataViewDndGroupControllerService, optional: true }, { token: ELDER_DATA_VIEW, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: ElderLocalDndSupportDirective, isStandalone: true, selector: "[elderLocalDndSupport]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderLocalDndSupportDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[elderLocalDndSupport]',
+                }]
+        }], ctorParameters: () => [{ type: ElderDataViewDndDirective, decorators: [{
+                    type: Optional
+                }] }, { type: ElderDataViewDndGroupDirective, decorators: [{
+                    type: Optional
+                }] }, { type: DataViewDndControllerService, decorators: [{
+                    type: Optional
+                }] }, { type: DataViewDndGroupControllerService, decorators: [{
+                    type: Optional
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [ELDER_DATA_VIEW]
+                }] }] });
+
+/**
+ * Adds drag and drop support for items of elder data view.
+ */
+class ElderDataViewItemDragDirective {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(dndController, cdkDrag) {
+        this.dndController = dndController;
+        this.cdkDrag = cdkDrag;
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        /** The item that is being dragged. */
+        this.item = input.required({ alias: 'elderElderDataViewItemDrag' });
+        /** Controls if the item can be dragged or not.
+         * We explicitly initialize with null and don't use booleanTransformFn since we need to know if the
+         * user defined this or if we should fall back to a superior predicate fn.
+         * */
+        this.canDragItem = input(null); // this is on purpose
+        const canDragItemPredicate = this.dndController ?
+            toSignal(dndController.canDragItemPredicate$)
+            : signal(null);
+        effect(() => {
+            this.bindCanDragItem(this.cdkDrag, this.canDragItem(), canDragItemPredicate());
+        });
+        effect(() => {
+            this.bindData(this.cdkDrag, this.item());
+        });
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Private Methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    bindCanDragItem(cdkDrag, canDragItem, canDragItemPredicate) {
+        if (cdkDrag) {
+            let canDrag;
+            if (canDragItem !== null) {
+                canDrag = canDragItem;
+            }
+            else if (canDragItemPredicate !== null) {
+                canDrag = canDragItemPredicate(untracked(this.item)); // we only want to read the signal here
+            }
+            else {
+                canDrag = true; // positive fall back since drag prevention is opt-in
+            }
+            cdkDrag.disabled = !canDrag;
+        }
+    }
+    bindData(cdkDrag, item) {
+        if (cdkDrag) {
+            cdkDrag.data = item;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderDataViewItemDragDirective, deps: [{ token: DataViewDndControllerService, optional: true }, { token: i2$2.CdkDrag }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: ElderDataViewItemDragDirective, isStandalone: true, selector: "[elderElderDataViewItemDrag]", inputs: { item: { classPropertyName: "item", publicName: "elderElderDataViewItemDrag", isSignal: true, isRequired: true, transformFunction: null }, canDragItem: { classPropertyName: "canDragItem", publicName: "canDragItem", isSignal: true, isRequired: false, transformFunction: null } }, hostDirectives: [{ directive: i2$2.CdkDrag }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderDataViewItemDragDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[elderElderDataViewItemDrag]',
+                    hostDirectives: [CdkDrag] // adds cdkDrag to host
+                }]
+        }], ctorParameters: () => [{ type: DataViewDndControllerService, decorators: [{
+                    type: Optional
+                }] }, { type: i2$2.CdkDrag }] });
+
 class ElderChipLabelDirective {
     /***************************************************************************
      *                                                                         *
@@ -15090,7 +15794,7 @@ class ElderBadgeDirective {
     createElderBadgeComponent() {
         return this.viewContainerRef.createComponent(ElderBadgeComponent);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderBadgeDirective, deps: [{ token: i1.DomSanitizer }, { token: i0.ViewContainerRef }, { token: i2$2.MatBadge }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderBadgeDirective, deps: [{ token: i1.DomSanitizer }, { token: i0.ViewContainerRef }, { token: i2$3.MatBadge }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: ElderBadgeDirective, isStandalone: true, selector: "[elderBadge]", inputs: { badgeColor: "badgeColor", badgeIcon: "badgeIcon", elderBadge: "elderBadge", colorSpec: "colorSpec", avatarSpec: "avatarSpec" }, host: { properties: { "style": "this.style" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderBadgeDirective, decorators: [{
@@ -15099,7 +15803,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                     selector: '[elderBadge]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i0.ViewContainerRef }, { type: i2$2.MatBadge }, { type: i0.DestroyRef }], propDecorators: { style: [{
+        }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i0.ViewContainerRef }, { type: i2$3.MatBadge }, { type: i0.DestroyRef }], propDecorators: { style: [{
                 type: HostBinding,
                 args: ['style']
             }], badgeColor: [{
@@ -15214,6 +15918,7 @@ class ElderDataCommonModule {
             MatTooltipModule,
             // translations
             TranslateModule,
+            DragDropModule,
             ElderBadgeModule,
             ElderDataToolbarComponent,
             ElderToolbarContentDirective,
@@ -15222,14 +15927,22 @@ class ElderDataCommonModule {
             ElderCompositeSortDcDirective,
             ElderSelectionMasterCheckboxComponent,
             DataContextSelectionDirective,
-            DataContextStateIndicatorComponent], exports: [ElderDataToolbarComponent,
+            DataContextStateIndicatorComponent,
+            ElderDataViewDndDirective,
+            ElderDataViewItemDragDirective,
+            ElderLocalDndSupportDirective,
+            ElderDataViewDndGroupDirective], exports: [ElderDataToolbarComponent,
             ElderToolbarContentDirective,
             ElderSingleSortComponent,
             ElderCompositeSortComponent,
             ElderCompositeSortDcDirective,
             ElderSelectionMasterCheckboxComponent,
             DataContextSelectionDirective,
-            DataContextStateIndicatorComponent] }); }
+            DataContextStateIndicatorComponent,
+            ElderDataViewDndDirective,
+            ElderDataViewItemDragDirective,
+            ElderLocalDndSupportDirective,
+            ElderDataViewDndGroupDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderDataCommonModule, imports: [CommonModule,
             RouterModule,
             // Material
@@ -15244,6 +15957,7 @@ class ElderDataCommonModule {
             MatTooltipModule,
             // translations
             TranslateModule,
+            DragDropModule,
             ElderBadgeModule,
             ElderDataToolbarComponent,
             ElderSingleSortComponent,
@@ -15269,6 +15983,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         MatTooltipModule,
                         // translations
                         TranslateModule,
+                        DragDropModule,
                         ElderBadgeModule,
                         ElderDataToolbarComponent,
                         ElderToolbarContentDirective,
@@ -15278,6 +15993,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         ElderSelectionMasterCheckboxComponent,
                         DataContextSelectionDirective,
                         DataContextStateIndicatorComponent,
+                        ElderDataViewDndDirective,
+                        ElderDataViewItemDragDirective,
+                        ElderLocalDndSupportDirective,
+                        ElderDataViewDndGroupDirective,
                     ],
                     exports: [
                         ElderDataToolbarComponent,
@@ -15288,6 +16007,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         ElderSelectionMasterCheckboxComponent,
                         DataContextSelectionDirective,
                         DataContextStateIndicatorComponent,
+                        ElderDataViewDndDirective,
+                        ElderDataViewItemDragDirective,
+                        ElderLocalDndSupportDirective,
+                        ElderDataViewDndGroupDirective,
                     ],
                 }]
         }] });
@@ -15307,7 +16030,7 @@ class ElderContinuatorComponent {
         this.chunkSizeChange = output();
     }
     onChunkSizeChange(newSize) {
-        if (newSize !== untracked(this.chunkSize)) {
+        if (newSize && newSize !== untracked(this.chunkSize)) {
             this.chunkSizeChange.emit(newSize);
         }
     }
@@ -16178,6 +16901,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                 type: Input
             }] } });
 
+/**
+ * Directive which defines its host table as a CdkDropList and connects
+ * it with the drag and drop controller service of the parent data view.
+ *
+ * This is needed since our elder-table wraps the mat-table.
+ * If we someday switch to a more composition-based approach we might not need this anymore.
+ */
+class ElderTableDropListConnectorDirective {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(dndController, elderTable, cdkDropList) {
+        this.dndController = dndController;
+        this.elderTable = elderTable;
+        this.cdkDropList = cdkDropList;
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.log = LoggerFactory.getLogger(this.constructor.name);
+        // we want drag and drop to be opt-in, so disable by default.
+        this.disableDrag(cdkDropList);
+        cdkDropList.id = elderTable.id();
+        if (this.dndController) {
+            this.dndController.register(cdkDropList);
+        }
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Private Methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    disableDrag(cdkDropList) {
+        cdkDropList.disabled = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderTableDropListConnectorDirective, deps: [{ token: DataViewDndControllerService, optional: true }, { token: ElderTableComponent }, { token: i2$2.CdkDropList }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: ElderTableDropListConnectorDirective, isStandalone: true, selector: "[elderTableDropListConnector]", hostDirectives: [{ directive: i2$2.CdkDropList }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderTableDropListConnectorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[elderTableDropListConnector]',
+                    hostDirectives: [CdkDropList], // adds ckdDropList to host
+                }]
+        }], ctorParameters: () => [{ type: DataViewDndControllerService, decorators: [{
+                    type: Optional
+                }] }, { type: ElderTableComponent }, { type: i2$2.CdkDropList }] });
+
 class ElderTableSelectionCellComponent {
     /***************************************************************************
      *                                                                         *
@@ -16268,7 +17042,7 @@ class ElderTableExtensionDirective {
     get extensionGroupIndex() {
         return this._extensionGroupIndex;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderTableExtensionDirective, deps: [{ token: ElderTableModel }, { token: i2$3.MatSort, optional: true }, { token: ElderTableExtensionDirective, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderTableExtensionDirective, deps: [{ token: ElderTableModel }, { token: i2$4.MatSort, optional: true }, { token: ElderTableExtensionDirective, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: ElderTableExtensionDirective, isStandalone: true, selector: "[elderTableExtension]", inputs: { columnsPosition: "columnsPosition" }, providers: [ElderTableProviders.ExistingOrNewTableModel], queries: [{ propertyName: "columnDefsQuery", predicate: MatColumnDef }, { propertyName: "elderColumnsQuery", predicate: ElderTableColumnDirective }, { propertyName: "rowDefsQuery", predicate: MatRowDef }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderTableExtensionDirective, decorators: [{
@@ -16278,7 +17052,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                     providers: [ElderTableProviders.ExistingOrNewTableModel],
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: ElderTableModel }, { type: i2$3.MatSort, decorators: [{
+        }], ctorParameters: () => [{ type: ElderTableModel }, { type: i2$4.MatSort, decorators: [{
                     type: Optional
                 }] }, { type: ElderTableExtensionDirective, decorators: [{
                     type: Optional
@@ -16320,6 +17094,10 @@ class ElderTableComponent extends ElderDataViewBaseComponent {
          */
         this.loadNextQueued = false;
         this.pageSizeOptions = input([30, 50, 100, 150, 250]);
+        /**
+         * ID of table component.
+         */
+        this.id = input();
         /**
          * When this field is present and true,
          * the coresponding row is marked to be in the processed of being removed.
@@ -16500,18 +17278,18 @@ class ElderTableComponent extends ElderDataViewBaseComponent {
         const rows = this.rows$.getValue();
         return rows.find((r) => this.getId(untracked(r.entity)) === this.getId(item));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderTableComponent, deps: [{ token: ElderTableModel }, { token: SelectionModel, optional: true }, { token: ElderDataViewOptionsProvider, optional: true, skipSelf: true }, { token: i2$3.MatSort, optional: true }, { token: ElderTableExtensionDirective, optional: true, skipSelf: true }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: ElderTableComponent, isStandalone: true, selector: "elder-table", inputs: { pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: false, isRequired: false, transformFunction: null }, removingField: { classPropertyName: "removingField", publicName: "removingField", isSignal: false, isRequired: false, transformFunction: null }, hiddenField: { classPropertyName: "hiddenField", publicName: "hiddenField", isSignal: false, isRequired: false, transformFunction: null }, keepSelection: { classPropertyName: "keepSelection", publicName: "keepSelection", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, denseHorizontal: { classPropertyName: "denseHorizontal", publicName: "denseHorizontal", isSignal: true, isRequired: false, transformFunction: null }, toolbarTemplate: { classPropertyName: "toolbarTemplate", publicName: "toolbarTemplate", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: false, isRequired: false, transformFunction: null }, selectionVisible: { classPropertyName: "selectionVisible", publicName: "selectionVisible", isSignal: false, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderTableComponent, deps: [{ token: ElderTableModel }, { token: SelectionModel, optional: true }, { token: ElderDataViewOptionsProvider, optional: true, skipSelf: true }, { token: i2$4.MatSort, optional: true }, { token: ElderTableExtensionDirective, optional: true, skipSelf: true }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: ElderTableComponent, isStandalone: true, selector: "elder-table", inputs: { pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, idField: { classPropertyName: "idField", publicName: "idField", isSignal: false, isRequired: false, transformFunction: null }, removingField: { classPropertyName: "removingField", publicName: "removingField", isSignal: false, isRequired: false, transformFunction: null }, hiddenField: { classPropertyName: "hiddenField", publicName: "hiddenField", isSignal: false, isRequired: false, transformFunction: null }, keepSelection: { classPropertyName: "keepSelection", publicName: "keepSelection", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, denseHorizontal: { classPropertyName: "denseHorizontal", publicName: "denseHorizontal", isSignal: true, isRequired: false, transformFunction: null }, toolbarTemplate: { classPropertyName: "toolbarTemplate", publicName: "toolbarTemplate", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, displayedColumns: { classPropertyName: "displayedColumns", publicName: "displayedColumns", isSignal: false, isRequired: false, transformFunction: null }, selectionVisible: { classPropertyName: "selectionVisible", publicName: "selectionVisible", isSignal: false, isRequired: false, transformFunction: null } }, providers: [
             ElderTableProviders.ExistingOrNewTableModel,
             {
                 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: "elderContinuator", first: true, predicate: ElderContinuatorComponent, descendants: true }, { propertyName: "rowsQuery", predicate: ElderTableRowDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"full\" style=\"overflow: hidden\">\n  <div class=\"layout-col elder-table full\" [class.elder-table-dense-horizontal]=\"denseHorizontal()\">\n    <!-- Toolbar Rows -->\n    @for (toolbarRowTemplate of toolbarRowTemplates(); track toolbarRowTemplate) {\n      <ng-template\n        *ngTemplateOutlet=\"toolbarRowTemplate; context: { $implicit: this }\"\n      ></ng-template>\n    }\n\n    <!-- Scrollable Table -->\n    <div\n      class=\"elder-table-inner layout-col {{\n        isDataValid(viewData()) ? 'flex' : ''\n      }} scrollable elder-table-scroll\"\n      elderInfiniteScroll\n      [eventThrottle]=\"150\"\n      [offsetFactor]=\"2\"\n      [ignoreScrollEvent]=\"!isContinuable || !canLoadMore()\"\n      (closeToEnd)=\"requestMoreDataZoned($event)\"\n    >\n      <table\n        mat-table\n        class=\"elder-mat-inner-table\"\n        [trackBy]=\"trackByFn\"\n        [dataSource]=\"$any(dc())\"\n        [elderDataContextSelection]=\"dc()\"\n        #dataSelection=\"elderDataContextSelection\"\n        [elderDataContextSelectionModel]=\"selectionModel\"\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            <elder-table-selection-cell\n              [entity]=\"entity\"\n              class=\"elder-table-checkbox\"\n              [class.elder-table-checkbox-visible]=\"dataSelection.selectionState().anySelected\"\n            ></elder-table-selection-cell>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n        <tr\n          mat-row\n          class=\"elder-table-row\"\n          *matRowDef=\"let entity; columns: displayedColumnsInner()\"\n          [elderTableRow]=\"entity\"\n          [highlightSelection]=\"interactionMode === 'selection'\"\n          [class.dense]=\"dense()\"\n          [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n          [class.elder-row-removing]=\"removingField && entity[removingField]\"\n          (click)=\"onItemClick(entity)\"\n          (dblclick)=\"onItemDoubleClick(entity)\"\n        ></tr>\n        @if (showFooter()) {\n          <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n        }\n      </table>\n    </div>\n\n    @if (!isDataValid(viewData())) {\n      <elder-data-context-state-indicator class=\"flex\" [dataContext]=\"dataContext\">\n      </elder-data-context-state-indicator>\n    }\n\n    <mat-progress-bar\n      class=\"flex-none mt-auto\"\n      [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n      [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n    >\n    </mat-progress-bar>\n\n    <div class=\"layout-row flex-none place-end-center gap-md elder-table-footer\">\n      @if (isContinuable) {\n        <elder-continuator\n          [loadedCount]=\"viewData()?.length\"\n          [total]=\"total()\"\n          [canLoadMore]=\"canLoadMore()\"\n          [chunkSizeOptions]=\"pageSizeOptions()\"\n          [chunkSize]=\"currentChunkSize()\"\n          (loadMoreRequested)=\"dataContinuable.loadMore()\"\n        ></elder-continuator>\n      } @else if (isActivePaged) {\n        @if (currentPage(); as page) {\n          <mat-paginator\n            class=\"flex-none\"\n            [length]=\"total()\"\n            [pageIndex]=\"page?.index\"\n            [pageSize]=\"page?.size\"\n            [pageSizeOptions]=\"pageSizeOptions()\"\n          >\n          </mat-paginator>\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{min-width:0;min-height:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: ElderTableRowDirective, selector: "tr[elderTableRow]", inputs: ["elderTableRow", "highlightSelection"], exportAs: ["elderTableRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: ElderContinuatorComponent, selector: "elder-continuator", inputs: ["loadedCount", "total", "canLoadMore", "chunkSizeOptions", "chunkSize"], outputs: ["loadMoreRequested", "chunkSizeChange"] }, { kind: "component", type: ElderTableSelectionCellComponent, selector: "elder-table-selection-cell", inputs: ["entity"] }], 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: "elderContinuator", first: true, predicate: ElderContinuatorComponent, descendants: true }, { propertyName: "rowsQuery", predicate: ElderTableRowDirective, descendants: true }], exportAs: ["elderTable"], usesInheritance: true, ngImport: i0, template: "<div class=\"full\" style=\"overflow: hidden\">\n  <div class=\"layout-col elder-table full\" [class.elder-table-dense-horizontal]=\"denseHorizontal()\">\n    <!-- Toolbar Rows -->\n    @for (toolbarRowTemplate of toolbarRowTemplates(); track toolbarRowTemplate) {\n      <ng-template\n        *ngTemplateOutlet=\"toolbarRowTemplate; context: { $implicit: this }\"\n      ></ng-template>\n    }\n\n    <!-- Scrollable Table -->\n    <div\n      class=\"elder-table-inner layout-col {{\n        isDataValid(viewData()) ? 'flex' : ''\n      }} scrollable elder-table-scroll\"\n      elderInfiniteScroll\n      [eventThrottle]=\"150\"\n      [offsetFactor]=\"2\"\n      [ignoreScrollEvent]=\"!isContinuable || !canLoadMore()\"\n      (closeToEnd)=\"requestMoreDataZoned($event)\"\n    >\n      <table\n        mat-table\n        [id]=\"id()\"\n        class=\"elder-mat-inner-table\"\n        [trackBy]=\"trackByFn\"\n        [dataSource]=\"$any(dc())\"\n        [elderDataContextSelection]=\"dc()\"\n        #dataSelection=\"elderDataContextSelection\"\n        [elderDataContextSelectionModel]=\"selectionModel\"\n        elderTableDropListConnector\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            <elder-table-selection-cell\n              [entity]=\"entity\"\n              class=\"elder-table-checkbox\"\n              [class.elder-table-checkbox-visible]=\"dataSelection.selectionState().anySelected\"\n            ></elder-table-selection-cell>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n        <tr\n          mat-row\n          class=\"elder-table-row\"\n          *matRowDef=\"let entity; columns: displayedColumnsInner()\"\n          [elderElderDataViewItemDrag]=\"entity\"\n          [elderTableRow]=\"entity\"\n          [highlightSelection]=\"interactionMode === 'selection'\"\n          [class.dense]=\"dense()\"\n          [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n          [class.elder-row-removing]=\"removingField && entity[removingField]\"\n          (click)=\"onItemClick(entity)\"\n          (dblclick)=\"onItemDoubleClick(entity)\"\n        ></tr>\n        @if (showFooter()) {\n          <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n        }\n      </table>\n    </div>\n\n    @if (!isDataValid(viewData())) {\n      <elder-data-context-state-indicator class=\"flex\" [dataContext]=\"dataContext\">\n      </elder-data-context-state-indicator>\n    }\n\n    <mat-progress-bar\n      class=\"flex-none mt-auto\"\n      [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n      [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n    >\n    </mat-progress-bar>\n\n    <div class=\"layout-row flex-none place-end-center gap-md elder-table-footer\">\n      @if (isContinuable) {\n        <elder-continuator\n          [loadedCount]=\"viewData()?.length\"\n          [total]=\"total()\"\n          [canLoadMore]=\"canLoadMore()\"\n          [chunkSizeOptions]=\"pageSizeOptions()\"\n          [chunkSize]=\"currentChunkSize()\"\n          (loadMoreRequested)=\"dataContinuable.loadMore()\"\n        ></elder-continuator>\n      } @else if (isActivePaged) {\n        @if (currentPage(); as page) {\n          <mat-paginator\n            class=\"flex-none\"\n            [length]=\"total()\"\n            [pageIndex]=\"page?.index\"\n            [pageSize]=\"page?.size\"\n            [pageSizeOptions]=\"pageSizeOptions()\"\n          >\n          </mat-paginator>\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{min-width:0;min-height:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: MatFooterCellDef, selector: "[matFooterCellDef]" }, { kind: "directive", type: MatFooterCell, selector: "mat-footer-cell, td[mat-footer-cell]" }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: ElderTableRowDirective, selector: "tr[elderTableRow]", inputs: ["elderTableRow", "highlightSelection"], exportAs: ["elderTableRow"] }, { kind: "directive", type: MatFooterRowDef, selector: "[matFooterRowDef]", inputs: ["matFooterRowDef", "matFooterRowDefSticky"] }, { kind: "component", type: MatFooterRow, selector: "mat-footer-row, tr[mat-footer-row]", exportAs: ["matFooterRow"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "directive", type: ElderDataViewItemDragDirective, selector: "[elderElderDataViewItemDrag]", inputs: ["elderElderDataViewItemDrag", "canDragItem"] }, { kind: "directive", type: ElderTableDropListConnectorDirective, selector: "[elderTableDropListConnector]" }, { kind: "component", type: ElderContinuatorComponent, selector: "elder-continuator", inputs: ["loadedCount", "total", "canLoadMore", "chunkSizeOptions", "chunkSize"], outputs: ["loadMoreRequested", "chunkSizeChange"] }, { kind: "component", type: ElderTableSelectionCellComponent, selector: "elder-table-selection-cell", inputs: ["entity"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'elder-table', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+            args: [{ selector: 'elder-table', exportAs: 'elderTable', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         ElderTableProviders.ExistingOrNewTableModel,
                         {
                             provide: ELDER_DATA_VIEW,
@@ -16540,16 +17318,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         DataContextStateIndicatorComponent,
                         MatProgressBar,
                         MatPaginator,
+                        ElderDataViewItemDragDirective,
+                        ElderTableDropListConnectorDirective,
                         ElderContinuatorComponent,
                         ElderTableSelectionCellComponent,
-                    ], template: "<div class=\"full\" style=\"overflow: hidden\">\n  <div class=\"layout-col elder-table full\" [class.elder-table-dense-horizontal]=\"denseHorizontal()\">\n    <!-- Toolbar Rows -->\n    @for (toolbarRowTemplate of toolbarRowTemplates(); track toolbarRowTemplate) {\n      <ng-template\n        *ngTemplateOutlet=\"toolbarRowTemplate; context: { $implicit: this }\"\n      ></ng-template>\n    }\n\n    <!-- Scrollable Table -->\n    <div\n      class=\"elder-table-inner layout-col {{\n        isDataValid(viewData()) ? 'flex' : ''\n      }} scrollable elder-table-scroll\"\n      elderInfiniteScroll\n      [eventThrottle]=\"150\"\n      [offsetFactor]=\"2\"\n      [ignoreScrollEvent]=\"!isContinuable || !canLoadMore()\"\n      (closeToEnd)=\"requestMoreDataZoned($event)\"\n    >\n      <table\n        mat-table\n        class=\"elder-mat-inner-table\"\n        [trackBy]=\"trackByFn\"\n        [dataSource]=\"$any(dc())\"\n        [elderDataContextSelection]=\"dc()\"\n        #dataSelection=\"elderDataContextSelection\"\n        [elderDataContextSelectionModel]=\"selectionModel\"\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            <elder-table-selection-cell\n              [entity]=\"entity\"\n              class=\"elder-table-checkbox\"\n              [class.elder-table-checkbox-visible]=\"dataSelection.selectionState().anySelected\"\n            ></elder-table-selection-cell>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n        <tr\n          mat-row\n          class=\"elder-table-row\"\n          *matRowDef=\"let entity; columns: displayedColumnsInner()\"\n          [elderTableRow]=\"entity\"\n          [highlightSelection]=\"interactionMode === 'selection'\"\n          [class.dense]=\"dense()\"\n          [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n          [class.elder-row-removing]=\"removingField && entity[removingField]\"\n          (click)=\"onItemClick(entity)\"\n          (dblclick)=\"onItemDoubleClick(entity)\"\n        ></tr>\n        @if (showFooter()) {\n          <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n        }\n      </table>\n    </div>\n\n    @if (!isDataValid(viewData())) {\n      <elder-data-context-state-indicator class=\"flex\" [dataContext]=\"dataContext\">\n      </elder-data-context-state-indicator>\n    }\n\n    <mat-progress-bar\n      class=\"flex-none mt-auto\"\n      [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n      [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n    >\n    </mat-progress-bar>\n\n    <div class=\"layout-row flex-none place-end-center gap-md elder-table-footer\">\n      @if (isContinuable) {\n        <elder-continuator\n          [loadedCount]=\"viewData()?.length\"\n          [total]=\"total()\"\n          [canLoadMore]=\"canLoadMore()\"\n          [chunkSizeOptions]=\"pageSizeOptions()\"\n          [chunkSize]=\"currentChunkSize()\"\n          (loadMoreRequested)=\"dataContinuable.loadMore()\"\n        ></elder-continuator>\n      } @else if (isActivePaged) {\n        @if (currentPage(); as page) {\n          <mat-paginator\n            class=\"flex-none\"\n            [length]=\"total()\"\n            [pageIndex]=\"page?.index\"\n            [pageSize]=\"page?.size\"\n            [pageSizeOptions]=\"pageSizeOptions()\"\n          >\n          </mat-paginator>\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{min-width:0;min-height:0}\n"] }]
+                    ], template: "<div class=\"full\" style=\"overflow: hidden\">\n  <div class=\"layout-col elder-table full\" [class.elder-table-dense-horizontal]=\"denseHorizontal()\">\n    <!-- Toolbar Rows -->\n    @for (toolbarRowTemplate of toolbarRowTemplates(); track toolbarRowTemplate) {\n      <ng-template\n        *ngTemplateOutlet=\"toolbarRowTemplate; context: { $implicit: this }\"\n      ></ng-template>\n    }\n\n    <!-- Scrollable Table -->\n    <div\n      class=\"elder-table-inner layout-col {{\n        isDataValid(viewData()) ? 'flex' : ''\n      }} scrollable elder-table-scroll\"\n      elderInfiniteScroll\n      [eventThrottle]=\"150\"\n      [offsetFactor]=\"2\"\n      [ignoreScrollEvent]=\"!isContinuable || !canLoadMore()\"\n      (closeToEnd)=\"requestMoreDataZoned($event)\"\n    >\n      <table\n        mat-table\n        [id]=\"id()\"\n        class=\"elder-mat-inner-table\"\n        [trackBy]=\"trackByFn\"\n        [dataSource]=\"$any(dc())\"\n        [elderDataContextSelection]=\"dc()\"\n        #dataSelection=\"elderDataContextSelection\"\n        [elderDataContextSelectionModel]=\"selectionModel\"\n        elderTableDropListConnector\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            <elder-table-selection-cell\n              [entity]=\"entity\"\n              class=\"elder-table-checkbox\"\n              [class.elder-table-checkbox-visible]=\"dataSelection.selectionState().anySelected\"\n            ></elder-table-selection-cell>\n          </td>\n          <td mat-footer-cell *matFooterCellDef></td>\n        </ng-container>\n\n        <tr mat-header-row *matHeaderRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n        <tr\n          mat-row\n          class=\"elder-table-row\"\n          *matRowDef=\"let entity; columns: displayedColumnsInner()\"\n          [elderElderDataViewItemDrag]=\"entity\"\n          [elderTableRow]=\"entity\"\n          [highlightSelection]=\"interactionMode === 'selection'\"\n          [class.dense]=\"dense()\"\n          [class.elder-row-hidden]=\"hiddenField && entity[hiddenField]\"\n          [class.elder-row-removing]=\"removingField && entity[removingField]\"\n          (click)=\"onItemClick(entity)\"\n          (dblclick)=\"onItemDoubleClick(entity)\"\n        ></tr>\n        @if (showFooter()) {\n          <tr mat-footer-row *matFooterRowDef=\"displayedColumnsInner(); sticky: true\"></tr>\n        }\n      </table>\n    </div>\n\n    @if (!isDataValid(viewData())) {\n      <elder-data-context-state-indicator class=\"flex\" [dataContext]=\"dataContext\">\n      </elder-data-context-state-indicator>\n    }\n\n    <mat-progress-bar\n      class=\"flex-none mt-auto\"\n      [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n      [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n    >\n    </mat-progress-bar>\n\n    <div class=\"layout-row flex-none place-end-center gap-md elder-table-footer\">\n      @if (isContinuable) {\n        <elder-continuator\n          [loadedCount]=\"viewData()?.length\"\n          [total]=\"total()\"\n          [canLoadMore]=\"canLoadMore()\"\n          [chunkSizeOptions]=\"pageSizeOptions()\"\n          [chunkSize]=\"currentChunkSize()\"\n          (loadMoreRequested)=\"dataContinuable.loadMore()\"\n        ></elder-continuator>\n      } @else if (isActivePaged) {\n        @if (currentPage(); as page) {\n          <mat-paginator\n            class=\"flex-none\"\n            [length]=\"total()\"\n            [pageIndex]=\"page?.index\"\n            [pageSize]=\"page?.size\"\n            [pageSizeOptions]=\"pageSizeOptions()\"\n          >\n          </mat-paginator>\n        }\n      }\n    </div>\n  </div>\n</div>\n", styles: [":host{min-width:0;min-height:0}\n"] }]
         }], ctorParameters: () => [{ type: ElderTableModel }, { type: SelectionModel, decorators: [{
                     type: Optional
                 }] }, { type: ElderDataViewOptionsProvider, decorators: [{
                     type: Optional
                 }, {
                     type: SkipSelf
-                }] }, { type: i2$3.MatSort, decorators: [{
+                }] }, { type: i2$4.MatSort, decorators: [{
                     type: Optional
                 }] }, { type: ElderTableExtensionDirective, decorators: [{
                     type: Optional
@@ -18512,7 +19292,7 @@ class ElderNumberCellDirective {
             matSortHeader.arrowPosition = 'before';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderNumberCellDirective, deps: [{ token: i2$3.MatSortHeader, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderNumberCellDirective, deps: [{ token: i2$4.MatSortHeader, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: ElderNumberCellDirective, isStandalone: true, selector: "[elderNumberCell]", host: { properties: { "class.elder-number-cell": "true" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderNumberCellDirective, decorators: [{
@@ -18524,7 +19304,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                     },
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i2$3.MatSortHeader, decorators: [{
+        }], ctorParameters: () => [{ type: i2$4.MatSortHeader, decorators: [{
                     type: Optional
                 }] }] });
 
@@ -18789,6 +19569,7 @@ class ElderTableModule {
             MatBadgeModule,
             MatProgressBarModule,
             CdkTableModule,
+            DragDropModule,
             MatTableModule,
             MatPaginatorModule,
             MatSortModule,
@@ -18811,7 +19592,8 @@ class ElderTableModule {
             ElderTableExtensionDirective,
             ElderTableColumnDirective,
             ElderTableRootDirective,
-            ElderDeleteActiveDirective], exports: [ElderTableComponent,
+            ElderDeleteActiveDirective,
+            ElderTableDropListConnectorDirective], exports: [ElderTableComponent,
             ElderTableToolbarDirective,
             ElderDataCommonModule,
             ElderTableSortDirective,
@@ -18820,7 +19602,8 @@ class ElderTableModule {
             ElderTableActivationDirective,
             ElderTableExtensionDirective,
             ElderTableRootDirective,
-            ElderDeleteActiveDirective] }); }
+            ElderDeleteActiveDirective,
+            ElderTableDropListConnectorDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderTableModule, providers: [
             {
                 provide: MatPaginatorIntl,
@@ -18838,6 +19621,7 @@ class ElderTableModule {
             MatBadgeModule,
             MatProgressBarModule,
             CdkTableModule,
+            DragDropModule,
             MatTableModule,
             MatPaginatorModule,
             MatSortModule,
@@ -18867,6 +19651,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         MatBadgeModule,
                         MatProgressBarModule,
                         CdkTableModule,
+                        DragDropModule,
                         MatTableModule,
                         MatPaginatorModule,
                         MatSortModule,
@@ -18890,6 +19675,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         ElderTableColumnDirective,
                         ElderTableRootDirective,
                         ElderDeleteActiveDirective,
+                        ElderTableDropListConnectorDirective,
                     ],
                     exports: [
                         ElderTableComponent,
@@ -18902,6 +19688,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
                         ElderTableExtensionDirective,
                         ElderTableRootDirective,
                         ElderDeleteActiveDirective,
+                        ElderTableDropListConnectorDirective,
                     ],
                     providers: [
                         {
@@ -30426,7 +31213,7 @@ class ElderIntervalPickerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderIntervalPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: ElderIntervalPickerComponent, isStandalone: true, selector: "elder-interval-picker", inputs: { emitType: { classPropertyName: "emitType", publicName: "emitType", isSignal: true, isRequired: false, transformFunction: null }, autoEmitMode: { classPropertyName: "autoEmitMode", publicName: "autoEmitMode", isSignal: true, isRequired: false, transformFunction: null }, intervalInputMode: { classPropertyName: "intervalInputMode", publicName: "intervalInputMode", isSignal: true, isRequired: false, transformFunction: null }, showAnchor: { classPropertyName: "showAnchor", publicName: "showAnchor", isSignal: true, isRequired: false, transformFunction: null }, anchorReadOnly: { classPropertyName: "anchorReadOnly", publicName: "anchorReadOnly", isSignal: true, isRequired: false, transformFunction: null }, externalAnchorDateTime: { classPropertyName: "externalAnchorDateTime", publicName: "externalAnchorDateTime", isSignal: true, isRequired: false, transformFunction: null }, externalInterval: { classPropertyName: "externalInterval", publicName: "externalInterval", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { intervalChange: "intervalChange" }, providers: [{ provide: DateAdapter, useClass: CustomDateAdapter }], viewQueries: [{ propertyName: "calendarStart", first: true, predicate: ["rangeCalendarStart"], descendants: true }, { propertyName: "calendarEnd", first: true, predicate: ["rangeCalendarEnd"], descendants: true }, { propertyName: "calendarStartElRef", first: true, predicate: ["rangeCalendarStart"], descendants: true, read: ElementRef }, { propertyName: "calendarEndElRef", first: true, predicate: ["rangeCalendarEnd"], descendants: true, read: ElementRef }, { propertyName: "startDateInput", first: true, predicate: ["startDateInput"], descendants: true }, { propertyName: "endDateInput", first: true, predicate: ["endDateInput"], descendants: true }], ngImport: i0, template: "<div class=\"interval-picker-component p-md layout-col gap-xxl\">\n  <div class=\"layout-row gap-xxl place-between-start\" style=\"gap: 5%\">\n    <div class=\"layout-col gap-md pt-xs\">\n      <div class=\"layout-col\">\n        <div class=\"layout-row select-buttons-container gap-sm\">\n          <div class=\"layout-col gap-xs place-start-stretch\">\n            <button mat-button type=\"button\" (click)=\"controller.select.selectCurrentDay()\">\n              @if (presenter.isFixedAnchorDateSet()) {\n                {{ 'intervalPicker.anchorDay' | translate }}\n              } @else {\n                {{ 'intervalPicker.today' | translate }}\n              }\n            </button>\n            <button mat-button type=\"button\" (click)=\"controller.select.selectYesterday()\">\n              @if (presenter.isFixedAnchorDateSet()) {\n                {{ 'intervalPicker.last' | translate }} 1 {{ 'intervalPicker.day' | translate }}\n              } @else {\n                {{ 'intervalPicker.yesterday' | translate }}\n              }\n            </button>\n            <button\n              mat-button\n              type=\"button\"\n              (click)=\"controller.select.selectLastSevenDaysIncludingToday()\"\n            >\n              {{ 'intervalPicker.last' | translate }} 7\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            <button\n              mat-button\n              type=\"button\"\n              (click)=\"controller.select.selectLastThirtyDaysIncludingToday()\"\n            >\n              {{ 'intervalPicker.last' | translate }} 30\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            <button\n              mat-button\n              type=\"button\"\n              (click)=\"controller.select.selectLast365daysIncludingToday()\"\n            >\n              {{ 'intervalPicker.last' | translate }} 365\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            @if (intervalInputMode() === 'date-time-range') {\n              <div class=\"pt-sm\"></div>\n              <button mat-button type=\"button\" (click)=\"controller.select.selectLastFiveMinutes()\">\n                {{ 'intervalPicker.last' | translate }} 5\n                {{ 'intervalPicker.minutes' | translate }}\n              </button>\n              <button mat-button type=\"button\" (click)=\"controller.select.selectLastHour()\">\n                {{ 'intervalPicker.last' | translate }} {{ 'intervalPicker.hour' | translate }}\n              </button>\n              <button mat-button type=\"button\" (click)=\"controller.select.selectLast24Hours()\">\n                {{ 'intervalPicker.last' | translate }} 24\n                {{ 'intervalPicker.hours' | translate }}\n              </button>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"layout-col\">\n      <!-- smart shift -->\n      <div class=\"layout-row place-around-center\">\n        <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"controller.shift.smartShift(-1)\"\n          [disabled]=\"!presenter.isValidIntervalSet()\"\n        >\n          <mat-icon>keyboard_double_arrow_left</mat-icon>\n        </button>\n        <span>{{ presenter.smartShiftMessage() }}</span>\n        <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"controller.shift.smartShift(1)\"\n          [disabled]=\"!presenter.isValidIntervalSet()\"\n        >\n          <mat-icon>keyboard_double_arrow_right</mat-icon>\n        </button>\n      </div>\n      <!-- calendars and input controls -->\n      <div\n        class=\"layout-row place-around-center\"\n        style=\"align-items: flex-start; min-height: 280px\"\n      >\n        <mat-calendar\n          #rangeCalendarStart\n          style=\"width: 210px; max-width: 100%\"\n          [selected]=\"presenter.dateRangeForCalendar()\"\n          (selectedChange)=\"controller.calendar.setStartDateFromJSDate($event)\"\n          [maxDate]=\"presenter.endDateTimeAsJSDate()\"\n          [dateClass]=\"presenter.calendarAnchorDateCssClassFn\"\n        >\n        </mat-calendar>\n        <mat-calendar\n          #rangeCalendarEnd\n          style=\"width: 210px; max-width: 100%\"\n          [selected]=\"presenter.dateRangeForCalendar()\"\n          (selectedChange)=\"controller.calendar.setEndDateFromJSDate($event)\"\n          [minDate]=\"presenter.startDateTimeAsJSDate()\"\n          [dateClass]=\"presenter.calendarAnchorDateCssClassFn\"\n        >\n        </mat-calendar>\n      </div>\n      <div class=\"layout-row place-around-center gap-xl pt-sm\">\n        <div class=\"layout-row place-around-center\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.startDate' | translate }}</mat-label>\n            <input\n              #startDateInput\n              name=\"startDateInput\"\n              matInput\n              type=\"date\"\n              [ngModel]=\"presenter.startDateHtmlString()\"\n              (ngModelChange)=\"controller.form.setStartDateFromString($event)\"\n            />\n          </mat-form-field>\n        </div>\n        <div class=\"layout-row place-around-center\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.endDate' | translate }}</mat-label>\n            <input\n              #endDateInput\n              name=\"endDateInput\"\n              matInput\n              type=\"date\"\n              [ngModel]=\"presenter.endDateHtmlString()\"\n              (ngModelChange)=\"controller.form.setEndDateFromString($event)\"\n            />\n          </mat-form-field>\n        </div>\n      </div>\n      @if (intervalInputMode() === 'date-time-range') {\n        <div class=\"layout-row place-around-center gap-xl pt-sm\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.startTime' | translate }}</mat-label>\n            <input\n              name=\"startTimeInput\"\n              matInput\n              type=\"time\"\n              #startTimeControl=\"ngModel\"\n              step=\"1\"\n              [ngModel]=\"presenter.startTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setStartTimeFromString($event)\"\n            />\n            <button\n              type=\"button\"\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.clearStartTime()\"\n              [disabled]=\"!presenter.isStartTimeSetAndNotMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.endTime' | translate }}</mat-label>\n            <input\n              name=\"endTimeInput\"\n              matInput\n              type=\"time\"\n              #endTimeControl=\"ngModel\"\n              step=\"1\"\n              [ngModel]=\"presenter.endTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setEndTimeFromString($event)\"\n            />\n            <button\n              type=\"button\"\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.clearEndTime()\"\n              [disabled]=\"!presenter.isEndTimeSetAndNotMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n        </div>\n      }\n      <br />\n    </div>\n    <div class=\"pt-xs\" style=\"width: 25%\">\n      <div class=\"layout-col gap-lg\">\n        <div class=\"layout-col gap-xs place-start-start\">\n          <!-- select current -->\n          <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentWeek()\">\n            {{ 'intervalPicker.currentPeriod.week' | translate }}\n          </button>\n          <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentMonth()\">\n            {{ 'intervalPicker.currentPeriod.month' | translate }}\n          </button>\n          <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentQuarter()\">\n            {{ 'intervalPicker.currentPeriod.quarter' | translate }}\n          </button>\n          <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentYear()\">\n            {{ 'intervalPicker.currentPeriod.year' | translate }}\n          </button>\n        </div>\n        <div class=\"fixed-shifts-container\">\n          <div class=\"layout-col place-start-stretch\">\n            <div class=\"layout-row place-between-center\">\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftDay(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.day' | translate }}</span>\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftDay(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n            <div class=\"layout-row place-between-center\">\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftMonth(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.month' | translate }}</span>\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftMonth(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n            <div class=\"layout-row place-between-center\">\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftYear(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.year' | translate }}</span>\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftYear(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n\n            @if (true) {\n              <!-- shift minute -->\n              <div class=\"layout-row place-between-center\">\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftMinute(-1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_left</mat-icon>\n                </button>\n                <span>{{ 'intervalPicker.minute' | translate }}</span>\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftMinute(1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_right</mat-icon>\n                </button>\n              </div>\n              <!-- shift hour -->\n              <div class=\"layout-row place-between-center\">\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftHour(-1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_left</mat-icon>\n                </button>\n                <span>{{ 'intervalPicker.hour' | translate }}</span>\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftHour(1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_right</mat-icon>\n                </button>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"layout-row place-between-center gap-xxl pt-sm\">\n  <div>\n    @if (showAnchor()) {\n      <div class=\"layout-row flex-none gap-md\">\n        <mat-menu #anchorMenu=\"matMenu\">\n          @if (presenter.startDateHtmlString()) {\n            <button\n              type=\"button\"\n              mat-menu-item\n              (click)=\"controller.anchor.setFixedAnchorPointToEndDateTime()\"\n              [disabled]=\"!presenter.startDateHtmlString()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">login</mat-icon>\n              <span>{{ 'intervalPicker.endDate' | translate }}</span>\n            </button>\n          }\n          @if (presenter.endDateHtmlString()) {\n            <button\n              type=\"button\"\n              mat-menu-item\n              (click)=\"controller.anchor.setFixedAnchorPointToStartDateTime()\"\n              [disabled]=\"!presenter.endDateHtmlString()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">logout</mat-icon>\n              <span>{{ 'intervalPicker.startDate' | translate }}</span>\n            </button>\n          }\n          @if (presenter.isFixedAnchorDateSet()) {\n            <button\n              type=\"button\"\n              mat-menu-item\n              (click)=\"controller.anchor.resetAnchor()\"\n              [disabled]=\"!presenter.isFixedAnchorDateSet() || anchorReadOnly()\"\n            >\n              <mat-icon>close</mat-icon>\n              <span>{{ 'intervalPicker.clear' | translate }}</span>\n            </button>\n          }\n        </mat-menu>\n\n        <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n          <mat-label>{{ 'intervalPicker.anchorDate' | translate }}</mat-label>\n          <input\n            #startDateInput\n            name=\"anchorDateInput\"\n            matInput\n            type=\"date\"\n            [ngModel]=\"presenter.anchorDateHtmlString()\"\n            (ngModelChange)=\"controller.form.setAnchorDateFromString($event)\"\n            [readonly]=\"anchorReadOnly()\"\n          />\n          @if (!anchorReadOnly()) {\n            <button\n              type=\"button\"\n              mat-icon-button\n              matSuffix\n              [matMenuTriggerFor]=\"anchorMenu\"\n              [disabled]=\"presenter.isAnchorMenuDisabled()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">more_horiz</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n        @if (intervalInputMode() === 'date-time-range') {\n          <mat-form-field class=\"input-control-container-short\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.anchorTime' | translate }}</mat-label>\n            <input\n              matInput\n              name=\"anchorTimeInput\"\n              type=\"time\"\n              #anchorTimeControl=\"ngModel\"\n              step=\"1\"\n              [readonly]=\"anchorReadOnly()\"\n              [ngModel]=\"presenter.anchorTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setAnchorTimeFromString($event)\"\n            />\n            <button\n              type=\"button\"\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.anchor.resetAnchorTime()\"\n              [disabled]=\"anchorReadOnly() || presenter.isAnchorTimeMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n        }\n      </div>\n    }\n  </div>\n  <!-- result interval -->\n  <div class=\"layout-col place-center-center\">\n    <div class=\"date-interval mat-caption pt-xs\">\n      @if (presenter.startDateTimeAsJSDate()) {\n        {{ presenter.startDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n      } @else {\n        {{ 'intervalPicker.startDateNotSet' | translate }}\n      }\n      <span> - </span>\n      @if (presenter.endDateTimeAsJSDate()) {\n        {{ presenter.endDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n      } @else {\n        {{ 'intervalPicker.endDateNotSet' | translate }}\n      }\n    </div>\n    <div>\n      <span class=\"mat-caption\">{{ presenter.deltaHumanReadable() || '&nbsp;' }}</span>\n    </div>\n  </div>\n  <div class=\"layout-row gap-lg\">\n    <button\n      type=\"button\"\n      mat-flat-button\n      color=\"primary\"\n      (click)=\"controller.clearInterval()\"\n      [disabled]=\"!presenter.isValidIntervalSet()\"\n    >\n      {{ 'intervalPicker.clear' | translate }}\n    </button>\n\n    @if (!this.autoEmitMode()) {\n      <button type=\"button\" color=\"primary\" mat-flat-button (click)=\"controller.manualEmit()\">\n        {{ 'actions.ok' | translate }}\n      </button>\n    }\n  </div>\n</div>\n", styles: [".interval-picker-component{min-width:840px;max-width:100%}.fixed-shifts-container{max-width:160px}.input-control-container{width:192px;max-width:100%}.input-control-container-short{width:140px;max-width:100%}.select-buttons-container button{white-space:nowrap;text-align:left;justify-content:flex-start}::ng-deep .interval-picker-component .mat-calendar-body-cell.elder-custom-anchor-date .mat-calendar-body-cell-content{border-radius:50%;background-color:#def;background-color:#b4d2ebbf}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$e.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$4.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.4", type: ElderIntervalPickerComponent, isStandalone: true, selector: "elder-interval-picker", inputs: { emitType: { classPropertyName: "emitType", publicName: "emitType", isSignal: true, isRequired: false, transformFunction: null }, autoEmitMode: { classPropertyName: "autoEmitMode", publicName: "autoEmitMode", isSignal: true, isRequired: false, transformFunction: null }, intervalInputMode: { classPropertyName: "intervalInputMode", publicName: "intervalInputMode", isSignal: true, isRequired: false, transformFunction: null }, showAnchor: { classPropertyName: "showAnchor", publicName: "showAnchor", isSignal: true, isRequired: false, transformFunction: null }, anchorReadOnly: { classPropertyName: "anchorReadOnly", publicName: "anchorReadOnly", isSignal: true, isRequired: false, transformFunction: null }, externalAnchorDateTime: { classPropertyName: "externalAnchorDateTime", publicName: "externalAnchorDateTime", isSignal: true, isRequired: false, transformFunction: null }, externalInterval: { classPropertyName: "externalInterval", publicName: "externalInterval", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { intervalChange: "intervalChange" }, providers: [{ provide: DateAdapter, useClass: CustomDateAdapter }], viewQueries: [{ propertyName: "calendarStart", first: true, predicate: ["rangeCalendarStart"], descendants: true }, { propertyName: "calendarEnd", first: true, predicate: ["rangeCalendarEnd"], descendants: true }, { propertyName: "calendarStartElRef", first: true, predicate: ["rangeCalendarStart"], descendants: true, read: ElementRef }, { propertyName: "calendarEndElRef", first: true, predicate: ["rangeCalendarEnd"], descendants: true, read: ElementRef }, { propertyName: "startDateInput", first: true, predicate: ["startDateInput"], descendants: true }, { propertyName: "endDateInput", first: true, predicate: ["endDateInput"], descendants: true }], ngImport: i0, template: "<div class=\"interval-picker-component p-md layout-col gap-xxl\">\n  <div class=\"layout-row gap-xxl place-between-start\" style=\"gap: 5%\">\n    <div class=\"layout-col gap-md pt-xs\">\n      <div class=\"layout-col\">\n        <div class=\"layout-row select-buttons-container gap-sm\">\n          <div class=\"layout-col gap-xs place-start-stretch\">\n            <button mat-button type=\"button\" (click)=\"controller.select.selectCurrentDay()\">\n              @if (presenter.isFixedAnchorDateSet()) {\n                {{ 'intervalPicker.anchorDay' | translate }}\n              } @else {\n                {{ 'intervalPicker.today' | translate }}\n              }\n            </button>\n            <button mat-button type=\"button\" (click)=\"controller.select.selectYesterday()\">\n              @if (presenter.isFixedAnchorDateSet()) {\n                {{ 'intervalPicker.last' | translate }} 1 {{ 'intervalPicker.day' | translate }}\n              } @else {\n                {{ 'intervalPicker.yesterday' | translate }}\n              }\n            </button>\n            <button\n              mat-button\n              type=\"button\"\n              (click)=\"controller.select.selectLastSevenDaysIncludingToday()\"\n            >\n              {{ 'intervalPicker.last' | translate }} 7\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            <button\n              mat-button\n              type=\"button\"\n              (click)=\"controller.select.selectLastThirtyDaysIncludingToday()\"\n            >\n              {{ 'intervalPicker.last' | translate }} 30\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            <button\n              mat-button\n              type=\"button\"\n              (click)=\"controller.select.selectLast365daysIncludingToday()\"\n            >\n              {{ 'intervalPicker.last' | translate }} 365\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            @if (intervalInputMode() === 'date-time-range') {\n              <div class=\"pt-sm\"></div>\n              <button mat-button type=\"button\" (click)=\"controller.select.selectLastFiveMinutes()\">\n                {{ 'intervalPicker.last' | translate }} 5\n                {{ 'intervalPicker.minutes' | translate }}\n              </button>\n              <button mat-button type=\"button\" (click)=\"controller.select.selectLastHour()\">\n                {{ 'intervalPicker.last' | translate }} {{ 'intervalPicker.hour' | translate }}\n              </button>\n              <button mat-button type=\"button\" (click)=\"controller.select.selectLast24Hours()\">\n                {{ 'intervalPicker.last' | translate }} 24\n                {{ 'intervalPicker.hours' | translate }}\n              </button>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"layout-col\">\n      <!-- smart shift -->\n      <div class=\"layout-row place-around-center\">\n        <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"controller.shift.smartShift(-1)\"\n          [disabled]=\"!presenter.isValidIntervalSet()\"\n        >\n          <mat-icon>keyboard_double_arrow_left</mat-icon>\n        </button>\n        <span>{{ presenter.smartShiftMessage() }}</span>\n        <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"controller.shift.smartShift(1)\"\n          [disabled]=\"!presenter.isValidIntervalSet()\"\n        >\n          <mat-icon>keyboard_double_arrow_right</mat-icon>\n        </button>\n      </div>\n      <!-- calendars and input controls -->\n      <div\n        class=\"layout-row place-around-center\"\n        style=\"align-items: flex-start; min-height: 280px\"\n      >\n        <mat-calendar\n          #rangeCalendarStart\n          style=\"width: 210px; max-width: 100%\"\n          [selected]=\"presenter.dateRangeForCalendar()\"\n          (selectedChange)=\"controller.calendar.setStartDateFromJSDate($event)\"\n          [maxDate]=\"presenter.endDateTimeAsJSDate()\"\n          [dateClass]=\"presenter.calendarAnchorDateCssClassFn\"\n        >\n        </mat-calendar>\n        <mat-calendar\n          #rangeCalendarEnd\n          style=\"width: 210px; max-width: 100%\"\n          [selected]=\"presenter.dateRangeForCalendar()\"\n          (selectedChange)=\"controller.calendar.setEndDateFromJSDate($event)\"\n          [minDate]=\"presenter.startDateTimeAsJSDate()\"\n          [dateClass]=\"presenter.calendarAnchorDateCssClassFn\"\n        >\n        </mat-calendar>\n      </div>\n      <div class=\"layout-row place-around-center gap-xl pt-sm\">\n        <div class=\"layout-row place-around-center\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.startDate' | translate }}</mat-label>\n            <input\n              #startDateInput\n              name=\"startDateInput\"\n              matInput\n              type=\"date\"\n              [ngModel]=\"presenter.startDateHtmlString()\"\n              (ngModelChange)=\"controller.form.setStartDateFromString($event)\"\n            />\n          </mat-form-field>\n        </div>\n        <div class=\"layout-row place-around-center\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.endDate' | translate }}</mat-label>\n            <input\n              #endDateInput\n              name=\"endDateInput\"\n              matInput\n              type=\"date\"\n              [ngModel]=\"presenter.endDateHtmlString()\"\n              (ngModelChange)=\"controller.form.setEndDateFromString($event)\"\n            />\n          </mat-form-field>\n        </div>\n      </div>\n      @if (intervalInputMode() === 'date-time-range') {\n        <div class=\"layout-row place-around-center gap-xl pt-sm\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.startTime' | translate }}</mat-label>\n            <input\n              name=\"startTimeInput\"\n              matInput\n              type=\"time\"\n              #startTimeControl=\"ngModel\"\n              step=\"1\"\n              [ngModel]=\"presenter.startTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setStartTimeFromString($event)\"\n            />\n            <button\n              type=\"button\"\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.clearStartTime()\"\n              [disabled]=\"!presenter.isStartTimeSetAndNotMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.endTime' | translate }}</mat-label>\n            <input\n              name=\"endTimeInput\"\n              matInput\n              type=\"time\"\n              #endTimeControl=\"ngModel\"\n              step=\"1\"\n              [ngModel]=\"presenter.endTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setEndTimeFromString($event)\"\n            />\n            <button\n              type=\"button\"\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.clearEndTime()\"\n              [disabled]=\"!presenter.isEndTimeSetAndNotMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n        </div>\n      }\n      <br />\n    </div>\n    <div class=\"pt-xs\" style=\"width: 25%\">\n      <div class=\"layout-col gap-lg\">\n        <div class=\"layout-col gap-xs place-start-start\">\n          <!-- select current -->\n          <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentWeek()\">\n            {{ 'intervalPicker.currentPeriod.week' | translate }}\n          </button>\n          <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentMonth()\">\n            {{ 'intervalPicker.currentPeriod.month' | translate }}\n          </button>\n          <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentQuarter()\">\n            {{ 'intervalPicker.currentPeriod.quarter' | translate }}\n          </button>\n          <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentYear()\">\n            {{ 'intervalPicker.currentPeriod.year' | translate }}\n          </button>\n        </div>\n        <div class=\"fixed-shifts-container\">\n          <div class=\"layout-col place-start-stretch\">\n            <div class=\"layout-row place-between-center\">\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftDay(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.day' | translate }}</span>\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftDay(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n            <div class=\"layout-row place-between-center\">\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftMonth(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.month' | translate }}</span>\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftMonth(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n            <div class=\"layout-row place-between-center\">\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftYear(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.year' | translate }}</span>\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftYear(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n\n            @if (true) {\n              <!-- shift minute -->\n              <div class=\"layout-row place-between-center\">\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftMinute(-1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_left</mat-icon>\n                </button>\n                <span>{{ 'intervalPicker.minute' | translate }}</span>\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftMinute(1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_right</mat-icon>\n                </button>\n              </div>\n              <!-- shift hour -->\n              <div class=\"layout-row place-between-center\">\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftHour(-1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_left</mat-icon>\n                </button>\n                <span>{{ 'intervalPicker.hour' | translate }}</span>\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftHour(1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_right</mat-icon>\n                </button>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"layout-row place-between-center gap-xxl pt-sm\">\n  <div>\n    @if (showAnchor()) {\n      <div class=\"layout-row flex-none gap-md\">\n        <mat-menu #anchorMenu=\"matMenu\">\n          @if (presenter.startDateHtmlString()) {\n            <button\n              type=\"button\"\n              mat-menu-item\n              (click)=\"controller.anchor.setFixedAnchorPointToEndDateTime()\"\n              [disabled]=\"!presenter.startDateHtmlString()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">login</mat-icon>\n              <span>{{ 'intervalPicker.endDate' | translate }}</span>\n            </button>\n          }\n          @if (presenter.endDateHtmlString()) {\n            <button\n              type=\"button\"\n              mat-menu-item\n              (click)=\"controller.anchor.setFixedAnchorPointToStartDateTime()\"\n              [disabled]=\"!presenter.endDateHtmlString()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">logout</mat-icon>\n              <span>{{ 'intervalPicker.startDate' | translate }}</span>\n            </button>\n          }\n          @if (presenter.isFixedAnchorDateSet()) {\n            <button\n              type=\"button\"\n              mat-menu-item\n              (click)=\"controller.anchor.resetAnchor()\"\n              [disabled]=\"!presenter.isFixedAnchorDateSet() || anchorReadOnly()\"\n            >\n              <mat-icon>close</mat-icon>\n              <span>{{ 'intervalPicker.clear' | translate }}</span>\n            </button>\n          }\n        </mat-menu>\n\n        <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n          <mat-label>{{ 'intervalPicker.anchorDate' | translate }}</mat-label>\n          <input\n            #startDateInput\n            name=\"anchorDateInput\"\n            matInput\n            type=\"date\"\n            [ngModel]=\"presenter.anchorDateHtmlString()\"\n            (ngModelChange)=\"controller.form.setAnchorDateFromString($event)\"\n            [readonly]=\"anchorReadOnly()\"\n          />\n          @if (!anchorReadOnly()) {\n            <button\n              type=\"button\"\n              mat-icon-button\n              matSuffix\n              [matMenuTriggerFor]=\"anchorMenu\"\n              [disabled]=\"presenter.isAnchorMenuDisabled()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">more_horiz</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n        @if (intervalInputMode() === 'date-time-range') {\n          <mat-form-field class=\"input-control-container-short\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.anchorTime' | translate }}</mat-label>\n            <input\n              matInput\n              name=\"anchorTimeInput\"\n              type=\"time\"\n              #anchorTimeControl=\"ngModel\"\n              step=\"1\"\n              [readonly]=\"anchorReadOnly()\"\n              [ngModel]=\"presenter.anchorTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setAnchorTimeFromString($event)\"\n            />\n            <button\n              type=\"button\"\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.anchor.resetAnchorTime()\"\n              [disabled]=\"anchorReadOnly() || presenter.isAnchorTimeMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n        }\n      </div>\n    }\n  </div>\n  <!-- result interval -->\n  <div class=\"layout-col place-center-center\">\n    <div class=\"date-interval mat-caption pt-xs\">\n      @if (presenter.startDateTimeAsJSDate()) {\n        {{ presenter.startDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n      } @else {\n        {{ 'intervalPicker.startDateNotSet' | translate }}\n      }\n      <span> - </span>\n      @if (presenter.endDateTimeAsJSDate()) {\n        {{ presenter.endDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n      } @else {\n        {{ 'intervalPicker.endDateNotSet' | translate }}\n      }\n    </div>\n    <div>\n      <span class=\"mat-caption\">{{ presenter.deltaHumanReadable() || '&nbsp;' }}</span>\n    </div>\n  </div>\n  <div class=\"layout-row gap-lg\">\n    <button\n      type=\"button\"\n      mat-flat-button\n      color=\"primary\"\n      (click)=\"controller.clearInterval()\"\n      [disabled]=\"!presenter.isValidIntervalSet()\"\n    >\n      {{ 'intervalPicker.clear' | translate }}\n    </button>\n\n    @if (!this.autoEmitMode()) {\n      <button type=\"button\" color=\"primary\" mat-flat-button (click)=\"controller.manualEmit()\">\n        {{ 'actions.ok' | translate }}\n      </button>\n    }\n  </div>\n</div>\n", styles: [".interval-picker-component{min-width:840px;max-width:100%}.fixed-shifts-container{max-width:160px}.input-control-container{width:192px;max-width:100%}.input-control-container-short{width:140px;max-width:100%}.select-buttons-container button{white-space:nowrap;text-align:left;justify-content:flex-start}::ng-deep .interval-picker-component .mat-calendar-body-cell.elder-custom-anchor-date .mat-calendar-body-cell-content{border-radius:50%;background-color:#def;background-color:#b4d2ebbf}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$e.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderIntervalPickerComponent, decorators: [{
             type: Component,
@@ -31310,7 +32097,7 @@ class ElderLocalizedInputTableComponent extends FormFieldBaseComponent {
         return localizables;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderLocalizedInputTableComponent, deps: [{ token: ElderToastService }, { token: ElderLanguageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ElderLocalizedInputTableComponent, isStandalone: true, selector: "elder-localized-input-table", inputs: { dense: "dense", float: "float", embedded: "embedded", textColumns: "textColumns", defaultLanguageTags: "defaultLanguageTags" }, providers: buildFormIntegrationProviders(ElderLocalizedInputTableComponent), queries: [{ propertyName: "textColumnsQuery", predicate: ElderLocalizedTextColumnDirective }], usesInheritance: true, ngImport: i0, template: "<div class=\"layout-col full\">\n  <elder-table\n    matSort\n    class=\"flex\"\n    [data]=\"data\"\n    [selectionVisible]=\"true\"\n    [selectionMultiEnabled]=\"true\"\n    [dense]=\"dense\"\n  >\n    <elder-data-toolbar\n      *elderTableToolbar\n      [canAdd]=\"!isLocked\"\n      [canRemove]=\"!isLocked\"\n      [canMore]=\"false\"\n      (requestNew)=\"onNewRequested()\"\n      (requestRemove)=\"onRemoveRequested($event)\"\n    >\n      <ng-template elderToolbarContent=\"left.actions\">\n        <div class=\"layout-col place-start-center\">\n          <h4 elderCardSubtitle style=\"margin: 0\">{{ label ?? placeholder }}</h4>\n        </div>\n      </ng-template>\n    </elder-data-toolbar>\n\n    <ng-container matColumnDef=\"locale\">\n      <th mat-header-cell *matHeaderCellDef style=\"width: 100px\" mat-sort-header>Locale</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <mat-chip-set\n          ><mat-chip highlighted>{{ localized.locale }}</mat-chip></mat-chip-set\n        >\n      </td>\n    </ng-container>\n\n    <ng-container\n      *ngFor=\"let textColumn of textColumns$ | async\"\n      matColumnDef=\"{{ textColumn.name }}\"\n    >\n      <th mat-header-cell *matHeaderCellDef>{{ textColumn.title | translate }}</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <div class=\"layout-row place-center-center\">\n          <mat-form-field class=\"full-width\" appearance=\"fill\" elderDense>\n            <!--\n            <mat-label>{{textColumn.title | translate}} ({{localized.locale}})</mat-label>\n            -->\n            <!--\n            <span matTextPrefix>{{textColumn.title | translate}}</span>\n            -->\n            <input\n              matInput\n              type=\"text\"\n              name=\"i18n-{{ localized.locale }}-{{ textColumn.name }}\"\n              [ngModel]=\"localized[textColumn.name]\"\n              [ngModelOptions]=\"{ updateOn: 'blur' }\"\n              (ngModelChange)=\"onColumnTextUpdated(localized, textColumn, $event)\"\n              [required]=\"required && textColumn.required\"\n              [readonly]=\"readonly\"\n              [disabled]=\"disabled\"\n            />\n          </mat-form-field>\n        </div>\n      </td>\n    </ng-container>\n  </elder-table>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ElderTableComponent, selector: "elder-table", inputs: ["pageSizeOptions", "idField", "removingField", "hiddenField", "keepSelection", "showFooter", "denseHorizontal", "toolbarTemplate", "data", "displayedColumns", "selectionVisible"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: ElderTableToolbarDirective, selector: "[elderTableToolbar]" }, { kind: "component", type: ElderDataToolbarComponent, selector: "elder-data-toolbar", inputs: ["canAdd", "canRemove", "canMore", "confirmRemoval", "keepSelectionAfterRemoval", "selectionModel"], outputs: ["requestNew", "requestRemove"] }, { kind: "directive", type: ElderToolbarContentDirective, selector: "[elderToolbarContent]", inputs: ["elderToolbarContent"] }, { kind: "directive", type: ElderCardSubtitleDirective, selector: "elder-card-subtitle, [elder-card-subtitle], [elderCardSubtitle]" }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense", "subscriptSizing", "floatLabel"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.4", type: ElderLocalizedInputTableComponent, isStandalone: true, selector: "elder-localized-input-table", inputs: { dense: "dense", float: "float", embedded: "embedded", textColumns: "textColumns", defaultLanguageTags: "defaultLanguageTags" }, providers: buildFormIntegrationProviders(ElderLocalizedInputTableComponent), queries: [{ propertyName: "textColumnsQuery", predicate: ElderLocalizedTextColumnDirective }], usesInheritance: true, ngImport: i0, template: "<div class=\"layout-col full\">\n  <elder-table\n    matSort\n    class=\"flex\"\n    [data]=\"data\"\n    [selectionVisible]=\"true\"\n    [selectionMultiEnabled]=\"true\"\n    [dense]=\"dense\"\n  >\n    <elder-data-toolbar\n      *elderTableToolbar\n      [canAdd]=\"!isLocked\"\n      [canRemove]=\"!isLocked\"\n      [canMore]=\"false\"\n      (requestNew)=\"onNewRequested()\"\n      (requestRemove)=\"onRemoveRequested($event)\"\n    >\n      <ng-template elderToolbarContent=\"left.actions\">\n        <div class=\"layout-col place-start-center\">\n          <h4 elderCardSubtitle style=\"margin: 0\">{{ label ?? placeholder }}</h4>\n        </div>\n      </ng-template>\n    </elder-data-toolbar>\n\n    <ng-container matColumnDef=\"locale\">\n      <th mat-header-cell *matHeaderCellDef style=\"width: 100px\" mat-sort-header>Locale</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <mat-chip-set\n          ><mat-chip highlighted>{{ localized.locale }}</mat-chip></mat-chip-set\n        >\n      </td>\n    </ng-container>\n\n    <ng-container\n      *ngFor=\"let textColumn of textColumns$ | async\"\n      matColumnDef=\"{{ textColumn.name }}\"\n    >\n      <th mat-header-cell *matHeaderCellDef>{{ textColumn.title | translate }}</th>\n      <td mat-cell *matCellDef=\"let localized\">\n        <div class=\"layout-row place-center-center\">\n          <mat-form-field class=\"full-width\" appearance=\"fill\" elderDense>\n            <!--\n            <mat-label>{{textColumn.title | translate}} ({{localized.locale}})</mat-label>\n            -->\n            <!--\n            <span matTextPrefix>{{textColumn.title | translate}}</span>\n            -->\n            <input\n              matInput\n              type=\"text\"\n              name=\"i18n-{{ localized.locale }}-{{ textColumn.name }}\"\n              [ngModel]=\"localized[textColumn.name]\"\n              [ngModelOptions]=\"{ updateOn: 'blur' }\"\n              (ngModelChange)=\"onColumnTextUpdated(localized, textColumn, $event)\"\n              [required]=\"required && textColumn.required\"\n              [readonly]=\"readonly\"\n              [disabled]=\"disabled\"\n            />\n          </mat-form-field>\n        </div>\n      </td>\n    </ng-container>\n  </elder-table>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: ElderTableComponent, selector: "elder-table", inputs: ["pageSizeOptions", "id", "idField", "removingField", "hiddenField", "keepSelection", "showFooter", "denseHorizontal", "toolbarTemplate", "data", "displayedColumns", "selectionVisible"], exportAs: ["elderTable"] }, { kind: "directive", type: MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "directive", type: ElderTableToolbarDirective, selector: "[elderTableToolbar]" }, { kind: "component", type: ElderDataToolbarComponent, selector: "elder-data-toolbar", inputs: ["canAdd", "canRemove", "canMore", "confirmRemoval", "keepSelectionAfterRemoval", "selectionModel"], outputs: ["requestNew", "requestRemove"] }, { kind: "directive", type: ElderToolbarContentDirective, selector: "[elderToolbarContent]", inputs: ["elderToolbarContent"] }, { kind: "directive", type: ElderCardSubtitleDirective, selector: "elder-card-subtitle, [elder-card-subtitle], [elderCardSubtitle]" }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "component", type: MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: ElderFormFieldDenseDirective, selector: "mat-form-field[elderDense]", inputs: ["elderDense", "subscriptSizing", "floatLabel"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.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: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: ElderLocalizedInputTableComponent, decorators: [{
             type: Component,
@@ -37266,5 +38053,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActivationEventSource, ActivationModel, Arrays, AuditedEntity, AutoStartSpec, Batcher, BlobUrl, BytesFormat, BytesPerSecondFormat, BytesPipe, CardDropEvent, CardOrganizerData, CardStack, CollectionUtil, ComparatorBuilder, CompositeSort, ConfirmDialogConfig, ContinuableListing, CsvColumnSpec, CsvSerializer, CsvSpec, CsvStreamExporter, CsvStreamExporterBuilder, CsvStreamExporterBuilderService, Currency, CurrencyCode, CurrencyFormatUtil, CurrencyUnit, CurrencyUnitRegistry, CustomDateAdapter, CustomMatcherSpec, DataContextActivePage, DataContextAutoStarter, DataContextBase, DataContextBuilder, DataContextContinuableBase, DataContextContinuablePaged, DataContextContinuableToken, DataContextLifeCycleBinding, DataContextSelectionDirective, DataContextSimple, DataContextSnapshot, DataContextSourceEventBinding, DataContextStateIndicatorComponent, DataContextStatus, DataSourceAdapter, DataSourceBase, DataSourceChangeEvent, DataSourceEntityPatch, DataSourceProcessor, DataTransferFactory, DataTransferProgress, DataTransferProgressAggregate, DataTransferState, DataTransferStatus, DataViewActivationController, DataViewIframeAdapterDirective, DataViewIframeComponent, DataViewMessage, DataViewMessageTypeValues, DataViewOptionsProviderBinding, DataViewSelection, DataViewSelectionInit, DateUtil, DelegateContinuableDataSource, DelegateDataSource, DelegateListDataSource, DelegatePagedDataSource, Dimensions, DrawerOutletBinding, DurationBucket, DurationFormat, DurationFormatUtil, ELDER_DATA_VIEW, ELDER_SELECT_BASE, ElderAccessDeniedComponent, ElderAccessDeniedModule, ElderAppHeaderComponent, ElderAuditModule, ElderAuditedEntityComponent, ElderAutoSelectFirstDirective, ElderAutoSelectSuggestFirstDirective, ElderAutocompleteDirective, ElderAutocompleteManyDirective, ElderAutocompleteModule, ElderBadgeChipAvatarDirective, ElderBadgeChipDirective, ElderBadgeComponent, ElderBadgeDirective, ElderBadgeModule, ElderBasicPaneLayoutComponent, ElderBlobViewerComponent, ElderBreadCrumbsComponent, ElderBreadCrumbsModule, ElderButtonGroupComponent, ElderButtonGroupModule, ElderCardComponent, ElderCardContentDirective, ElderCardHeaderActionsDirective, ElderCardHeaderComponent, ElderCardModule, ElderCardOrganizerComponent, ElderCardOrganizerModule, ElderCardPanelComponent, ElderCardStackComponent, ElderCardSubtitleDirective, ElderCardTitleDirective, ElderCenterCellDirective, ElderChipLabelDirective, ElderChipListSelectComponent, ElderChipListSelectModule, ElderChipsIncludeExcludeDirective, ElderChipsModule, ElderClearSelectDirective, ElderClipboardPutDirective, ElderClipboardService, ElderCompositeSortComponent, ElderCompositeSortDcDirective, ElderConfirmDialogComponent, ElderConnectivityModule, ElderConnectivityService, ElderContainersModule, ElderContinuatorComponent, ElderCsvExportBtnComponent, ElderCsvModule, ElderCurrencyModule, ElderCurrencyPipe, ElderDataCommonModule, ElderDataToolbarComponent, ElderDataTransferModule, ElderDataTransferService, ElderDataViewBaseComponent, ElderDataViewOptions, ElderDataViewOptionsProvider, ElderDateSwitcherComponent, ElderDateTimeInputComponent, ElderDelayedFocusDirective, ElderDeleteActiveDirective, ElderDetailDialogComponent, ElderDetailDirective, ElderDialogConfig, ElderDialogModule, ElderDialogPanelComponent, ElderDialogService, ElderDimensionsInputComponent, ElderDropZoneComponent, ElderDurationInputComponent, ElderEntityValueAccessorUtil, ElderEnumTranslationService, ElderErrorModule, ElderEventSourceService, ElderExceptionDetailComponent, ElderExpandToggleButtonComponent, ElderExpandToggleButtonModule, ElderFileDropZoneDirective, ElderFileModule, ElderFileSelectComponent, ElderFileSelectDirective, ElderFileUploadComponent, ElderFilterChipTemplateComponent, ElderFormFieldControlBase, ElderFormFieldDenseDirective, ElderFormFieldLabelDirective, ElderFormFieldNoHintDirective, ElderFormFieldNoSpinnerDirective, ElderFormsDirectivesModule, ElderFormsModule, ElderFromFieldBase, ElderFromFieldEntityBase, ElderFromFieldMultiEntityBase, ElderGlobalSearchComponent, ElderGlobalSearchModule, ElderGlobalSearchService, ElderGridActivationDirective, ElderGridComponent, ElderGridModule, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderHttpClient, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollModule, ElderInputPatternDirective, ElderIntervalInputComponent, ElderIntervalPickerBindingDirective, ElderIntervalPickerComponent, ElderIntervalPickerToggleComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageModule, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, ElderMasterActivationDirective, ElderMasterDetailComponent, ElderMasterDetailModule, ElderMasterDetailService, ElderMasterDirective, ElderMaxValidator, ElderMeasuresModule, ElderMinValidator, ElderMultiEntityValueAccessorUtil, ElderMultiSelectAllInitialDirective, ElderMultiSelectBase, ElderMultiSelectChipOptionsComponent, ElderMultiSelectChipsComponent, ElderMultiSelectFormField, ElderMultiTranslateHttpLoader, ElderMultipleOfUtil, ElderMultipleOfValidator, ElderNavGroupComponent, ElderNavLinkComponent, ElderNavListComponent, ElderNavModule, ElderNextFocusableDirective, ElderNumberCellDirective, ElderOfflineIndicatorComponent, ElderOverlayComponent, ElderOverlayModule, ElderOverlayOriginDirective, ElderOverlayRef, ElderOverlayTriggerDirective, ElderPaddingDirective, ElderPageExitLockIndicatorComponent, ElderPaneActionsComponent, ElderPaneComponent, ElderPaneContentComponent, ElderPaneHeaderComponent, ElderPaneSubtitleComponent, ElderPaneTitleComponent, 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, ElderSearchIncludeExcludeDirective, ElderSearchInputDirective, ElderSearchModule, ElderSearchPanelComponent, ElderSearchUrlDirective, ElderSelectBase, ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectComponent, ElderSelectComponentState, ElderSelectCustomInputDirective, ElderSelectFormField, ElderSelectModule, ElderSelectOnTabDirective, ElderSelectOptionComponent, ElderSelectValueDirective, ElderSelectionDialogComponent, ElderSelectionDialogDirective, ElderSelectionMasterCheckboxComponent, ElderSelectionPopupTriggerAdapterDirective, ElderShellCenterDirective, ElderShellComponent, ElderShellModule, ElderShellNavigationToggleComponent, ElderShellService, ElderShellSideLeftDirective, ElderShellSideRightDirective, ElderShellSlotDirective, ElderSimpleSelectionViewComponent, ElderSimpleSelectionViewModule, ElderSinglePaneWrapperComponent, ElderSingleSortComponent, ElderSingleStateCheckboxDirective, ElderStackCardDirective, ElderStopEventPropagationDirective, ElderSuggestionPanelComponent, ElderSvgViewerComponent, ElderTabDirective, ElderTabFocusTrapDirective, ElderTabGroupRoutingDirective, ElderTabModule, ElderTableActivationDirective, ElderTableComponent, ElderTableExtensionDirective, ElderTableGroup, ElderTableModel, ElderTableModelCdkTableBinding, ElderTableModelQueryGroup, ElderTableModule, ElderTableProviders, ElderTableRootDirective, ElderTableSelectionCellComponent, ElderTableSortDirective, ElderTableToolbarDirective, ElderThemeApplierDirective, ElderThemeDirective, ElderThemeModule, ElderThemePreferenceService, ElderThemeService, ElderThemeToggleComponent, ElderTileComponent, 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, FocusUtil, FormFieldBaseComponent, GlobalDragDropService, HttpClientBuilder, HttpClientPristine, HttpDataTransfer, HttpDataTransferAggregateComponent, HttpDataTransferComponent, HttpDataTransferIndicatorComponent, HttpDataTransferOverviewComponent, HttpParamsBuilder, I18nBase, I18nPickAsyncPipe, I18nPickPipe, I18nText, IFrameState, IframeCloseDirective, IframeDialogComponent, IframeHostComponent, IframeService, IframeSideContentComponent, IncludeExcludeSelectionModel, IncludeExcludeState, IncludeExcludeValue, IndexedEntities, InternalRestClientConfig, Interval, IsoDurationPipe, IsoIntervalFormatUtil, IsoIntervalParsePipe, IsoIntervalPipe, ItemActivationEvent, ItemActivationOptions, JsonMapUtil, KafentConfig, KafentEvent, KafentEventService, KafentEventStream, KafentEventStreamDisabled, KafentEventStreamSse, KafentEventTransport, KafentModule, KafentSseEventChannel, KafentTokenProvider, KafentTokenProviderSessionStorage, KafentTopicSse, KnownElderThemes, KnownLocaleTags, LocalDataFilter, LocalListDataSource, LocalPagedDataSource, LocalisationPickerService, MasterDetailActivationEvent, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, MultiModelBaseComponent, NextNumberUtil, Objects, OnlineStatus, Page, PageExitGuardModule, PageExitGuardService, PageExitLock, PageRequest, Pageable, ParseUtil, Path, PathNode, PeriodBucket, PeriodDuration, PeriodFormat, ProcessIterationContext, ProcessState, PropertyPathUtil, Quantity, QueryListBinding, QuestionDialogConfig, ReactiveEventSource, ReactiveEventSourceState, ReactiveFetchEventSource, ReactiveFetchEventSourceService, ReactiveMap, ReactiveSSeMessage, RefreshingEntity, RestClient, RestClientConfig, RestClientContinuable, RestClientList, RestClientPaged, RoutedTabActivationFailed, SearchInputState, SearchQuery, SelectChipSpecUtil, SelectOptionChipSpecUtil, SelectionModel, SelectionModelPopupDirective, Sets, SimpleLocalisationPicker, SimpleSearchInput, Sort, SortOption, SortUtil, StandardToastComponent, SubBar, SuggestionProvider, TemplateCompositeControl, TemplatedSelectionDialogComponent, TemporalPlainDateInterval, TemporalUtil, ThemeSpec, TimeAgoPipe, TimeDurationPipe, TimeUtil, ToIsoDateStringPipe, ToastType, TokenChunkRequest, ToolbarHeader, Translated, TranslatedConverter, TranslatedEnumValue, TranslatedText, TypedEventMessage, Unit, UnitDimension, UnitDimensionInfo, UnitInfo, UnitRegistry, UnreachableCaseError, UrlBuilder, UrlQueryParams, UuidUtil, ValueAccessorBase, ValueWrapper, ViewProviders, WeightPipe, alphaNumStringComparator, booleanTransformFn, buildFormIntegrationProviders, coerceInterval, coerceIntervalIsoStr, createDataOptionsProvider, createSelectionModel, existingOrNewElderTableModel, initSearchUrlService, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isDataViewMessageType, isElderEntityValueAccessor, isElderMultiEntityValueAccessor, isListDataSource, isPagedDataSource, lazySample, lazySampleTime, naturalValueComparator, newElderTableModel, proxyControlContainer, registerLocale, runInZone, themeInit };
+export { ActivationEventSource, ActivationModel, Arrays, AuditedEntity, AutoStartSpec, Batcher, BlobUrl, BytesFormat, BytesPerSecondFormat, BytesPipe, CardDropEvent, CardOrganizerData, CardStack, CollectionUtil, ComparatorBuilder, CompositeSort, ConfirmDialogConfig, ContinuableListing, CsvColumnSpec, CsvSerializer, CsvSpec, CsvStreamExporter, CsvStreamExporterBuilder, CsvStreamExporterBuilderService, Currency, CurrencyCode, CurrencyFormatUtil, CurrencyUnit, CurrencyUnitRegistry, CustomDateAdapter, CustomMatcherSpec, DataContextActivePage, DataContextAutoStarter, DataContextBase, DataContextBuilder, DataContextContinuableBase, DataContextContinuablePaged, DataContextContinuableToken, DataContextLifeCycleBinding, DataContextSelectionDirective, DataContextSimple, DataContextSnapshot, DataContextSourceEventBinding, DataContextStateIndicatorComponent, DataContextStatus, DataSourceAdapter, DataSourceBase, DataSourceChangeEvent, DataSourceEntityPatch, DataSourceProcessor, DataTransferFactory, DataTransferProgress, DataTransferProgressAggregate, DataTransferState, DataTransferStatus, DataViewActivationController, DataViewDndControllerService, DataViewDndGroupControllerService, DataViewDndModelUtil, DataViewDragEnteredEvent, DataViewDragExitedEvent, DataViewIframeAdapterDirective, DataViewIframeComponent, DataViewItemDropEvent, DataViewMessage, DataViewMessageTypeValues, DataViewOptionsProviderBinding, DataViewSelection, DataViewSelectionInit, DateUtil, DelegateContinuableDataSource, DelegateDataSource, DelegateListDataSource, DelegatePagedDataSource, Dimensions, DrawerOutletBinding, DurationBucket, DurationFormat, DurationFormatUtil, ELDER_DATA_VIEW, ELDER_SELECT_BASE, ElderAccessDeniedComponent, ElderAccessDeniedModule, ElderAppHeaderComponent, ElderAuditModule, ElderAuditedEntityComponent, ElderAutoSelectFirstDirective, ElderAutoSelectSuggestFirstDirective, ElderAutocompleteDirective, ElderAutocompleteManyDirective, ElderAutocompleteModule, ElderBadgeChipAvatarDirective, ElderBadgeChipDirective, ElderBadgeComponent, ElderBadgeDirective, ElderBadgeModule, ElderBasicPaneLayoutComponent, ElderBlobViewerComponent, ElderBreadCrumbsComponent, ElderBreadCrumbsModule, ElderButtonGroupComponent, ElderButtonGroupModule, ElderCardComponent, ElderCardContentDirective, ElderCardHeaderActionsDirective, ElderCardHeaderComponent, ElderCardModule, ElderCardOrganizerComponent, ElderCardOrganizerModule, ElderCardPanelComponent, ElderCardStackComponent, ElderCardSubtitleDirective, ElderCardTitleDirective, ElderCenterCellDirective, ElderChipLabelDirective, ElderChipListSelectComponent, ElderChipListSelectModule, ElderChipsIncludeExcludeDirective, ElderChipsModule, ElderClearSelectDirective, ElderClipboardPutDirective, ElderClipboardService, ElderCompositeSortComponent, ElderCompositeSortDcDirective, ElderConfirmDialogComponent, ElderConnectivityModule, ElderConnectivityService, ElderContainersModule, ElderContinuatorComponent, ElderCsvExportBtnComponent, ElderCsvModule, ElderCurrencyModule, ElderCurrencyPipe, ElderDataCommonModule, ElderDataToolbarComponent, ElderDataTransferModule, ElderDataTransferService, ElderDataViewBaseComponent, ElderDataViewDndDirective, ElderDataViewDndGroupDirective, ElderDataViewItemDragDirective, ElderDataViewOptions, ElderDataViewOptionsProvider, ElderDateSwitcherComponent, ElderDateTimeInputComponent, ElderDelayedFocusDirective, ElderDeleteActiveDirective, ElderDetailDialogComponent, ElderDetailDirective, ElderDialogConfig, ElderDialogModule, ElderDialogPanelComponent, ElderDialogService, ElderDimensionsInputComponent, ElderDropZoneComponent, ElderDurationInputComponent, ElderEntityValueAccessorUtil, ElderEnumTranslationService, ElderErrorModule, ElderEventSourceService, ElderExceptionDetailComponent, ElderExpandToggleButtonComponent, ElderExpandToggleButtonModule, ElderFileDropZoneDirective, ElderFileModule, ElderFileSelectComponent, ElderFileSelectDirective, ElderFileUploadComponent, ElderFilterChipTemplateComponent, ElderFormFieldControlBase, ElderFormFieldDenseDirective, ElderFormFieldLabelDirective, ElderFormFieldNoHintDirective, ElderFormFieldNoSpinnerDirective, ElderFormsDirectivesModule, ElderFormsModule, ElderFromFieldBase, ElderFromFieldEntityBase, ElderFromFieldMultiEntityBase, ElderGlobalSearchComponent, ElderGlobalSearchModule, ElderGlobalSearchService, ElderGridActivationDirective, ElderGridComponent, ElderGridModule, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderHttpClient, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollModule, ElderInputPatternDirective, ElderIntervalInputComponent, ElderIntervalPickerBindingDirective, ElderIntervalPickerComponent, ElderIntervalPickerToggleComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageModule, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalDndSupportDirective, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, ElderMasterActivationDirective, ElderMasterDetailComponent, ElderMasterDetailModule, ElderMasterDetailService, ElderMasterDirective, ElderMaxValidator, ElderMeasuresModule, ElderMinValidator, ElderMultiEntityValueAccessorUtil, ElderMultiSelectAllInitialDirective, ElderMultiSelectBase, ElderMultiSelectChipOptionsComponent, ElderMultiSelectChipsComponent, ElderMultiSelectFormField, ElderMultiTranslateHttpLoader, ElderMultipleOfUtil, ElderMultipleOfValidator, ElderNavGroupComponent, ElderNavLinkComponent, ElderNavListComponent, ElderNavModule, ElderNextFocusableDirective, ElderNumberCellDirective, ElderOfflineIndicatorComponent, ElderOverlayComponent, ElderOverlayModule, ElderOverlayOriginDirective, ElderOverlayRef, ElderOverlayTriggerDirective, ElderPaddingDirective, ElderPageExitLockIndicatorComponent, ElderPaneActionsComponent, ElderPaneComponent, ElderPaneContentComponent, ElderPaneHeaderComponent, ElderPaneSubtitleComponent, ElderPaneTitleComponent, 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, ElderSearchIncludeExcludeDirective, ElderSearchInputDirective, ElderSearchModule, ElderSearchPanelComponent, ElderSearchUrlDirective, ElderSelectBase, ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectComponent, ElderSelectComponentState, ElderSelectCustomInputDirective, ElderSelectFormField, ElderSelectModule, ElderSelectOnTabDirective, ElderSelectOptionComponent, ElderSelectValueDirective, ElderSelectionDialogComponent, ElderSelectionDialogDirective, ElderSelectionMasterCheckboxComponent, ElderSelectionPopupTriggerAdapterDirective, ElderShellCenterDirective, ElderShellComponent, ElderShellModule, ElderShellNavigationToggleComponent, ElderShellService, ElderShellSideLeftDirective, ElderShellSideRightDirective, ElderShellSlotDirective, ElderSimpleSelectionViewComponent, ElderSimpleSelectionViewModule, ElderSinglePaneWrapperComponent, ElderSingleSortComponent, ElderSingleStateCheckboxDirective, ElderStackCardDirective, ElderStopEventPropagationDirective, ElderSuggestionPanelComponent, ElderSvgViewerComponent, ElderTabDirective, ElderTabFocusTrapDirective, ElderTabGroupRoutingDirective, ElderTabModule, ElderTableActivationDirective, ElderTableComponent, ElderTableDropListConnectorDirective, ElderTableExtensionDirective, ElderTableGroup, ElderTableModel, ElderTableModelCdkTableBinding, ElderTableModelQueryGroup, ElderTableModule, ElderTableProviders, ElderTableRootDirective, ElderTableSelectionCellComponent, ElderTableSortDirective, ElderTableToolbarDirective, ElderThemeApplierDirective, ElderThemeDirective, ElderThemeModule, ElderThemePreferenceService, ElderThemeService, ElderThemeToggleComponent, ElderTileComponent, 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, FocusUtil, FormFieldBaseComponent, GlobalDragDropService, HttpClientBuilder, HttpClientPristine, HttpDataTransfer, HttpDataTransferAggregateComponent, HttpDataTransferComponent, HttpDataTransferIndicatorComponent, HttpDataTransferOverviewComponent, HttpParamsBuilder, I18nBase, I18nPickAsyncPipe, I18nPickPipe, I18nText, IFrameState, IframeCloseDirective, IframeDialogComponent, IframeHostComponent, IframeService, IframeSideContentComponent, IncludeExcludeSelectionModel, IncludeExcludeState, IncludeExcludeValue, IndexedEntities, InternalRestClientConfig, Interval, IsoDurationPipe, IsoIntervalFormatUtil, IsoIntervalParsePipe, IsoIntervalPipe, ItemActivationEvent, ItemActivationOptions, JsonMapUtil, KafentConfig, KafentEvent, KafentEventService, KafentEventStream, KafentEventStreamDisabled, KafentEventStreamSse, KafentEventTransport, KafentModule, KafentSseEventChannel, KafentTokenProvider, KafentTokenProviderSessionStorage, KafentTopicSse, KnownElderThemes, KnownLocaleTags, LocalDataFilter, LocalListDataSource, LocalPagedDataSource, LocalisationPickerService, MasterDetailActivationEvent, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, MultiModelBaseComponent, NextNumberUtil, Objects, OnlineStatus, Page, PageExitGuardModule, PageExitGuardService, PageExitLock, PageRequest, Pageable, ParseUtil, Path, PathNode, PeriodBucket, PeriodDuration, PeriodFormat, ProcessIterationContext, ProcessState, PropertyPathUtil, Quantity, QueryListBinding, QuestionDialogConfig, ReactiveEventSource, ReactiveEventSourceState, ReactiveFetchEventSource, ReactiveFetchEventSourceService, ReactiveMap, ReactiveSSeMessage, RefreshingEntity, RestClient, RestClientConfig, RestClientContinuable, RestClientList, RestClientPaged, RoutedTabActivationFailed, SearchInputState, SearchQuery, SelectChipSpecUtil, SelectOptionChipSpecUtil, SelectionModel, SelectionModelPopupDirective, Sets, SimpleLocalisationPicker, SimpleSearchInput, Sort, SortOption, SortUtil, StandardToastComponent, SubBar, SuggestionProvider, TemplateCompositeControl, TemplatedSelectionDialogComponent, TemporalPlainDateInterval, TemporalUtil, ThemeSpec, TimeAgoPipe, TimeDurationPipe, TimeUtil, ToIsoDateStringPipe, ToastType, TokenChunkRequest, ToolbarHeader, Translated, TranslatedConverter, TranslatedEnumValue, TranslatedText, TypedEventMessage, Unit, UnitDimension, UnitDimensionInfo, UnitInfo, UnitRegistry, UnreachableCaseError, UrlBuilder, UrlQueryParams, UuidUtil, ValueAccessorBase, ValueWrapper, ViewDropModelUpdateInstruction, ViewProviders, WeightPipe, alphaNumStringComparator, booleanTransformFn, buildFormIntegrationProviders, coerceInterval, coerceIntervalIsoStr, createDataOptionsProvider, createSelectionModel, existingOrNewElderTableModel, initSearchUrlService, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isDataViewMessageType, isElderEntityValueAccessor, isElderMultiEntityValueAccessor, isListDataSource, isLocalListDataSource, isPagedDataSource, lazySample, lazySampleTime, naturalValueComparator, newElderTableModel, proxyControlContainer, registerLocale, runInZone, themeInit };
 //# sourceMappingURL=elderbyte-ngx-starter.mjs.map