@elderbyte/ngx-starter 21.14.0-beta.1 → 21.14.0

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -35,7 +35,7 @@ import { MatButtonModule, MatIconButton, MatButton, MatIconAnchor, MatAnchor } f
 import * as i1$8 from '@angular/material/autocomplete';
 import { MatAutocompleteTrigger, MatAutocomplete, MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatChipGrid, MatChipRow, MatChipRemove, MatChipInput, MatChipsModule, MatChipSet, MatChipAvatar, MatChipTrailingIcon, MatChipListbox, MatChipOption, MatChip } from '@angular/material/chips';
-import * as i2$3 from '@angular/material/input';
+import * as i2$2 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';
@@ -53,14 +53,15 @@ import * as i1$a from '@angular/material/checkbox';
 import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
 import { MatTooltipModule, MatTooltip } from '@angular/material/tooltip';
 import { MatSelect, MatOption as MatOption$1, MatSelectModule } from '@angular/material/select';
-import { MatColumnDef, MatRowDef, MatTable, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatFooterCellDef, MatFooterCell, MatHeaderRowDef, MatHeaderRow, MatRow, MatFooterRowDef, MatFooterRow, MatTableModule } from '@angular/material/table';
+import { MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, MatCellDef, MatCell, MatFooterCellDef, MatFooterCell, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, MatFooterRowDef, MatFooterRow, MatTableModule } from '@angular/material/table';
 import * as i1$7 from '@angular/cdk/table';
 import { CdkTableModule } from '@angular/cdk/table';
 import { MatPaginator, MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';
-import * as i2$2 from '@angular/material/sort';
+import * as i4 from '@angular/material/sort';
 import { MatSortModule, MatSort, MatSortHeader } from '@angular/material/sort';
 import { __decorate, __param } from 'tslib';
 import { CdkVirtualScrollViewport, CdkFixedSizeVirtualScroll, CdkVirtualForOf, ScrollingModule } from '@angular/cdk/scrolling';
+import { Subject as Subject$1 } from 'rxjs/internal/Subject';
 import { MatProgressSpinnerModule, MatProgressSpinner } from '@angular/material/progress-spinner';
 import { MatExpansionPanel, MatAccordion, MatExpansionPanelHeader, MatExpansionPanelTitle, MatExpansionPanelDescription, MatExpansionModule } from '@angular/material/expansion';
 import * as i1$b from '@angular/cdk/overlay';
@@ -17156,6 +17157,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 args: ['click', ['$event']]
             }] } });
 
+/**
+ * Determines merge order for table column contributor groups (ascending): lower values are merged first.
+ * BASE groups are laid out first, PROJECTED groups are merged afterwards.
+ */
+var ElderTableGroupLayer;
+(function (ElderTableGroupLayer) {
+    ElderTableGroupLayer[ElderTableGroupLayer["BASE"] = 0] = "BASE";
+    ElderTableGroupLayer[ElderTableGroupLayer["PROJECTED"] = 1] = "PROJECTED";
+})(ElderTableGroupLayer || (ElderTableGroupLayer = {}));
 class ColumnPositionSpec {
     static relativeToColumn(col, position) {
         return new ColumnPositionSpec(position, col);
@@ -17169,8 +17179,8 @@ class ColumnPositionSpec {
     }
 }
 class ElderColumnGroup {
-    constructor(groupIndex, columnsPosition, columns) {
-        this.groupIndex = groupIndex;
+    constructor(groupLayer, columnsPosition, columns) {
+        this.groupLayer = groupLayer;
         this.columnsPosition = columnsPosition;
         this.columns = columns;
     }
@@ -17201,7 +17211,7 @@ class ElderColumnLayout {
      *                                                                         *
      **************************************************************************/
     renderColumns(colGroups) {
-        const groupHierarchy = this.sortGroupsByIndex(colGroups);
+        const groupHierarchy = this.sortGroupsByTableGroupLayer(colGroups);
         const sorted = [];
         // Now we can insert groups in defined order
         let previousIndex = {
@@ -17255,25 +17265,21 @@ class ElderColumnLayout {
                 return previousGroup.startIndex;
         }
     }
-    sortGroupsByIndex(colGroups) {
-        return colGroups
-            .sort((a, b) => {
-            return naturalValueComparator(a.groupIndex, b.groupIndex);
-        })
-            .reverse();
+    sortGroupsByTableGroupLayer(colGroups) {
+        return colGroups.sort((a, b) => naturalValueComparator(a.groupLayer, b.groupLayer));
     }
 }
 
 class ElderTableGroup {
-    static create(groupIndex) {
-        return ElderTableGroup.of(UuidUtil.weakUuid4(), groupIndex);
+    static create(groupLayer) {
+        return ElderTableGroup.of(UuidUtil.weakUuid4(), groupLayer);
     }
-    static of(id, groupIndex) {
-        return new ElderTableGroup(id, groupIndex);
+    static of(id, groupLayer) {
+        return new ElderTableGroup(id, groupLayer);
     }
-    constructor(id, index) {
+    constructor(id, groupLayer) {
         this.id = id;
-        this.index = index;
+        this.groupLayer = groupLayer;
     }
 }
 class ElderTableModel {
@@ -17304,8 +17310,12 @@ class ElderTableModel {
          * end([])
          * @private
          */
-        this.displayedColumns$ = new BehaviorSubject(undefined);
-        this.displayedColumnsInner$ = this.renderDisplayedColumns(this.displayedColumns$, this.columnDefs$, this.selectionVisible$);
+        this.manualColumns$ = new BehaviorSubject(undefined);
+        this.displayedColumnsInner$ = combineLatest([
+            this.manualColumns$,
+            this.columnDefs$,
+            this.selectionVisible$,
+        ]).pipe(map(([manualColumns, columnDefs, selectionVisible]) => this.buildDisplayedColumns(manualColumns, columnDefs, selectionVisible)));
     }
     /***************************************************************************
      *                                                                         *
@@ -17319,10 +17329,10 @@ class ElderTableModel {
         return this.selectionVisible$.getValue();
     }
     set displayedColumns(columns) {
-        this.displayedColumns$.next(columns);
+        this.manualColumns$.next(columns);
     }
     get displayedColumns() {
-        return this.displayedColumns$.getValue();
+        return this.manualColumns$.getValue();
     }
     /***************************************************************************
      *                                                                         *
@@ -17339,17 +17349,17 @@ class ElderTableModel {
         return this._sortGroups.values$;
     }
     // ---
-    valuesSortedByGroupIndex(myMap, groups) {
+    valuesSortedByTableGroupLayer(myMap, groups) {
         return Array.from(myMap.entries())
             .sort(([a_key], [b_key]) => {
-            const grpAIndex = groups.get(a_key)?.index ?? 0;
-            const grpBIndex = groups.get(b_key)?.index ?? 0;
-            return naturalValueComparator(grpAIndex, grpBIndex);
+            const grpAGroupLayer = groups.get(a_key)?.groupLayer ?? ElderTableGroupLayer.PROJECTED;
+            const grpBGroupLayer = groups.get(b_key)?.groupLayer ?? ElderTableGroupLayer.PROJECTED;
+            return naturalValueComparator(grpAGroupLayer, grpBGroupLayer);
         })
             .map(([a_key, a_value]) => a_value);
     }
     sortAndFlatten(reactMap) {
-        return reactMap.map$.pipe(map((myMap) => this.valuesSortedByGroupIndex(myMap, this._groups)), map((columns) => CollectionUtil.flatten(columns)));
+        return reactMap.map$.pipe(map((myMap) => this.valuesSortedByTableGroupLayer(myMap, this._groups)), map((columns) => CollectionUtil.flatten(columns)));
     }
     /*
     public get sortHeaders$(): Observable<MatSortHeader[]> {
@@ -17395,24 +17405,22 @@ class ElderTableModel {
      * Private methods                                                         *
      *                                                                         *
      **************************************************************************/
-    renderDisplayedColumns(userDefinedColumns$, columnDefs$, selectionVisible$) {
-        return combineLatest([userDefinedColumns$, columnDefs$, selectionVisible$]).pipe(map(([displayedColumns, columnDefs, selectionVisible]) => {
-            let columns = displayedColumns;
-            if (!columns) {
-                columns = [];
-                // If the user did not define columns to display
-                // Assume he wants all his own columns in given order
-                if (columnDefs) {
-                    columnDefs.forEach((col) => {
-                        columns.push(col.name);
-                    });
-                }
-            }
-            if (this.selectionVisible) {
-                columns = ['select', ...columns];
+    buildDisplayedColumns(manualColumns, columnDefs, selectionVisible) {
+        let columns = manualColumns;
+        if (!columns) {
+            columns = [];
+            // If the user did not define manual columns to display
+            // Assume he wants all his own columns in given order
+            if (columnDefs) {
+                columnDefs.forEach((col) => {
+                    columns.push(col.name);
+                });
             }
-            return columns;
-        }));
+        }
+        if (selectionVisible) {
+            columns = ['select', ...columns];
+        }
+        return columns;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ElderTableModel, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ElderTableModel }); }
@@ -17562,8 +17570,8 @@ class ElderTableModelQueryGroup {
      * Static Builder                                                          *
      *                                                                         *
      **************************************************************************/
-    static start(tableModel, groupIndex) {
-        return new ElderTableModelQueryGroup(tableModel, ElderTableGroup.create(groupIndex));
+    static start(tableModel, groupLayer) {
+        return new ElderTableModelQueryGroup(tableModel, ElderTableGroup.create(groupLayer));
     }
     /***************************************************************************
      *                                                                         *
@@ -17632,7 +17640,7 @@ class ElderTableModelQueryGroup {
         return columns.map((c) => new ElderTableColumnDirective(c));
     }
     updateColumnDefs(columns) {
-        this.tableModel.updateColumnGroup(this.group, new ElderColumnGroup(this.group.index, this.columnsPosition, columns));
+        this.tableModel.updateColumnGroup(this.group, new ElderColumnGroup(this.group.groupLayer, this.columnsPosition, columns));
     }
     updateRowDefs(rows) {
         this.tableModel.updateRowDefs(this.group, rows);
@@ -17988,86 +17996,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             args: [{ selector: 'elder-data-navigation', imports: [ElderContinuatorComponent, MatPaginator], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"elder-data-navigation-bar layout-row flex-none place-end-center gap-md\">\n  @if (isContinuable) {\n    <elder-continuator\n      [loadedCount]=\"viewData()?.length\"\n      [total]=\"total()\"\n      [canLoadMore]=\"canLoadMore()\"\n      [chunkSizeOptions]=\"pageSizeOptions()\"\n      [chunkSize]=\"currentChunkSize()\"\n      (loadMoreRequested)=\"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  } @else {\n    <span class=\"mat-caption noselect pr-md\" style=\"color: var(--md-sys-color-outline)\">\n      {{ viewData()?.length }}\n    </span>\n  }\n</div>\n", styles: [".elder-data-navigation-bar{height:var(--elder-data-element-footer-height);overflow:hidden}\n"] }]
         }], ctorParameters: () => [], propDecorators: { matPaginator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatPaginator), { isSignal: true }] }], elderContinuator: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ElderContinuatorComponent), { isSignal: true }] }] } });
 
-/**
- * Allows to extend an ElderTable from a parent component.
- *
- */
-class ElderTableExtensionDirective {
-    /***************************************************************************
-     *                                                                         *
-     * Constructor                                                             *
-     *                                                                         *
-     **************************************************************************/
-    constructor(tableModel, _matSort, parentExtension) {
-        this.tableModel = tableModel;
-        this._matSort = _matSort;
-        this.parentExtension = parentExtension;
-        /***************************************************************************
-         *                                                                         *
-         * Fields                                                                  *
-         *                                                                         *
-         **************************************************************************/
-        this.logger = LoggerFactory.getLogger(this.constructor.name);
-        this.columnsPosition = ColumnPositionSpec.relativeToPrevGroup('start');
-        this.destroy$ = new Subject();
-        this._extensionGroupIndex = (parentExtension?.extensionGroupIndex ?? 0) + 1;
-        if (this._matSort) {
-            this._matSort.disableClear = true;
-        }
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Life Cycle                                                              *
-     *                                                                         *
-     **************************************************************************/
-    ngAfterContentInit() {
-        ElderTableModelQueryGroup.start(this.tableModel, this.extensionGroupIndex)
-            .withColumnsPosition(this.columnsPosition)
-            .withColumnDefs(this.columnDefsQuery, this.elderColumnsQuery)
-            .withRowDefs(this.rowDefsQuery)
-            .withSort(this._matSort)
-            .bindUntil(this.destroy$);
-    }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Properties                                                              *
-     *                                                                         *
-     **************************************************************************/
-    get extensionGroupIndex() {
-        return this._extensionGroupIndex;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ElderTableExtensionDirective, deps: [{ token: ElderTableModel }, { token: i2$2.MatSort, optional: true }, { token: ElderTableExtensionDirective, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", 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: "21.2.15", ngImport: i0, type: ElderTableExtensionDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[elderTableExtension]',
-                    providers: [ElderTableProviders.ExistingOrNewTableModel],
-                }]
-        }], ctorParameters: () => [{ type: ElderTableModel }, { type: i2$2.MatSort, decorators: [{
-                    type: Optional
-                }] }, { type: ElderTableExtensionDirective, decorators: [{
-                    type: Optional
-                }, {
-                    type: SkipSelf
-                }] }], propDecorators: { columnDefsQuery: [{
-                type: ContentChildren,
-                args: [MatColumnDef]
-            }], elderColumnsQuery: [{
-                type: ContentChildren,
-                args: [ElderTableColumnDirective]
-            }], rowDefsQuery: [{
-                type: ContentChildren,
-                args: [MatRowDef]
-            }], columnsPosition: [{
-                type: Input
-            }] } });
-
 /**
  * The table navigation bar, typically located below the table,
  * containing the pagination control and other table controls.
@@ -18093,10 +18021,9 @@ class ElderTableComponent extends ElderDataViewBaseComponent {
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(tableModel, selectionModel, dataViewOptionsProvider, matSort, parentExtension, zone, interactionController) {
+    constructor(tableModel, selectionModel, dataViewOptionsProvider, matSort, zone, interactionController) {
         super(selectionModel, dataViewOptionsProvider, interactionController);
         this.tableModel = tableModel;
-        this.parentExtension = parentExtension;
         this.zone = zone;
         /***************************************************************************
          *                                                                         *
@@ -18138,7 +18065,6 @@ class ElderTableComponent extends ElderDataViewBaseComponent {
          */
         this.rows$ = new BehaviorSubject([]);
         this._matSort = matSort;
-        this._extensionGroupIndex = (parentExtension?.extensionGroupIndex ?? 0) + 1;
         if (this._matSort) {
             this._matSort.disableClear = true;
         }
@@ -18154,7 +18080,7 @@ class ElderTableComponent extends ElderDataViewBaseComponent {
         ElderTableModelCdkTableBinding.of(this.tableModel).table(this.matTable).bindUntil(this.destroy$);
     }
     ngAfterContentInit() {
-        ElderTableModelQueryGroup.start(this.tableModel, this._extensionGroupIndex)
+        ElderTableModelQueryGroup.start(this.tableModel, ElderTableGroupLayer.BASE)
             .withColumnsPosition(ColumnPositionSpec.relativeToPrevGroup('start'))
             .withColumnDefs(this.columnDefs, this.elderColumns)
             .withRowDefs(this.rowDefs)
@@ -18287,7 +18213,7 @@ 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: "21.2.15", ngImport: i0, type: ElderTableComponent, deps: [{ token: ElderTableModel }, { token: SelectionModel, optional: true }, { token: ElderDataViewOptionsProvider, optional: true, skipSelf: true }, { token: i2$2.MatSort, optional: true }, { token: ElderTableExtensionDirective, optional: true, skipSelf: true }, { token: i0.NgZone }, { token: DataViewInteractionControllerDirective }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ElderTableComponent, deps: [{ token: ElderTableModel }, { token: SelectionModel, optional: true }, { token: ElderDataViewOptionsProvider, optional: true, skipSelf: true }, { token: i4.MatSort, optional: true }, { token: i0.NgZone }, { token: DataViewInteractionControllerDirective }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ElderTableComponent, isStandalone: true, selector: "elder-table", inputs: { 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 }, showFooterRow: { classPropertyName: "showFooterRow", publicName: "showFooterRow", isSignal: true, isRequired: false, transformFunction: null }, denseHorizontal: { classPropertyName: "denseHorizontal", publicName: "denseHorizontal", isSignal: true, isRequired: false, transformFunction: null }, hideHeaderRow: { classPropertyName: "hideHeaderRow", publicName: "hideHeaderRow", isSignal: true, 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,
             {
@@ -18337,12 +18263,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     type: Optional
                 }, {
                     type: SkipSelf
-                }] }, { type: i2$2.MatSort, decorators: [{
-                    type: Optional
-                }] }, { type: ElderTableExtensionDirective, decorators: [{
+                }] }, { type: i4.MatSort, decorators: [{
                     type: Optional
-                }, {
-                    type: SkipSelf
                 }] }, { type: i0.NgZone }, { type: DataViewInteractionControllerDirective }], propDecorators: { matTable: [{
                 type: ViewChild,
                 args: [MatTable, { static: true }]
@@ -20304,7 +20226,7 @@ class ElderNumberCellDirective {
             matSortHeader.arrowPosition = 'before';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ElderNumberCellDirective, deps: [{ token: i2$2.MatSortHeader, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ElderNumberCellDirective, deps: [{ token: i4.MatSortHeader, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: ElderNumberCellDirective, isStandalone: true, selector: "[elderNumberCell]", host: { properties: { "class.elder-number-cell": "true" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ElderNumberCellDirective, decorators: [{
@@ -20315,7 +20237,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         '[class.elder-number-cell]': 'true',
                     },
                 }]
-        }], ctorParameters: () => [{ type: i2$2.MatSortHeader, decorators: [{
+        }], ctorParameters: () => [{ type: i4.MatSortHeader, decorators: [{
                     type: Optional
                 }] }] });
 
@@ -20372,6 +20294,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Adds additonal columns into an ElderTable.
+ */
+class ElderProjectedColumnsDirective {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(tableModel, _matSort) {
+        this.tableModel = tableModel;
+        this._matSort = _matSort;
+        /***************************************************************************
+         *                                                                         *
+         * Fields                                                                  *
+         *                                                                         *
+         **************************************************************************/
+        this.logger = LoggerFactory.getLogger(this.constructor.name);
+        this.columnsPosition = ColumnPositionSpec.relativeToPrevGroup('start');
+        this.destroy$ = new Subject();
+        if (this._matSort) {
+            this._matSort.disableClear = true;
+        }
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Life Cycle                                                              *
+     *                                                                         *
+     **************************************************************************/
+    ngAfterContentInit() {
+        ElderTableModelQueryGroup.start(this.tableModel, ElderTableGroupLayer.PROJECTED)
+            .withColumnsPosition(this.columnsPosition)
+            .withColumnDefs(this.columnDefsQuery, this.elderColumnsQuery)
+            .withRowDefs(this.rowDefsQuery)
+            .withSort(this._matSort)
+            .bindUntil(this.destroy$);
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ElderProjectedColumnsDirective, deps: [{ token: ElderTableModel }, { token: i4.MatSort, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: ElderProjectedColumnsDirective, isStandalone: true, selector: "[elderProjectedColumns]", 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: "21.2.15", ngImport: i0, type: ElderProjectedColumnsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[elderProjectedColumns]',
+                    providers: [ElderTableProviders.ExistingOrNewTableModel],
+                }]
+        }], ctorParameters: () => [{ type: ElderTableModel }, { type: i4.MatSort, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { columnDefsQuery: [{
+                type: ContentChildren,
+                args: [MatColumnDef]
+            }], elderColumnsQuery: [{
+                type: ContentChildren,
+                args: [ElderTableColumnDirective]
+            }], rowDefsQuery: [{
+                type: ContentChildren,
+                args: [MatRowDef]
+            }], columnsPosition: [{
+                type: Input
+            }] } });
+
 /**
  * Forces a new Elder Table Model, thus breaking this component and its children from a potential parent elder-table.
  * With this, nested elder-tables are possible.
@@ -20547,7 +20534,7 @@ class ElderTableModule {
             ElderNumberCellDirective,
             ElderTableActivationDirective,
             ElderTableRowDirective,
-            ElderTableExtensionDirective,
+            ElderProjectedColumnsDirective,
             ElderTableColumnDirective,
             ElderTableRootDirective,
             ElderDeleteActiveDirective,
@@ -20558,7 +20545,7 @@ class ElderTableModule {
             ElderCenterCellDirective,
             ElderNumberCellDirective,
             ElderTableActivationDirective,
-            ElderTableExtensionDirective,
+            ElderProjectedColumnsDirective,
             ElderTableRootDirective,
             ElderDeleteActiveDirective,
             ElderTableDropListConnectorDirective] }); }
@@ -20627,7 +20614,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         ElderNumberCellDirective,
                         ElderTableActivationDirective,
                         ElderTableRowDirective,
-                        ElderTableExtensionDirective,
+                        ElderProjectedColumnsDirective,
                         ElderTableColumnDirective,
                         ElderTableRootDirective,
                         ElderDeleteActiveDirective,
@@ -20641,7 +20628,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         ElderCenterCellDirective,
                         ElderNumberCellDirective,
                         ElderTableActivationDirective,
-                        ElderTableExtensionDirective,
+                        ElderProjectedColumnsDirective,
                         ElderTableRootDirective,
                         ElderDeleteActiveDirective,
                         ElderTableDropListConnectorDirective,
@@ -23716,20 +23703,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 args: ['elderAutocomplete']
             }] } });
 
-class ElderSelectSelectionKeysDirective {
-    constructor() {
-        this.selectionKeys = input([], { ...(ngDevMode ? { debugName: "selectionKeys" } : /* istanbul ignore next */ {}), alias: 'elderSelectSelectionKeys' });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ElderSelectSelectionKeysDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.15", type: ElderSelectSelectionKeysDirective, isStandalone: true, selector: "[elderSelectSelectionKeys]", inputs: { selectionKeys: { classPropertyName: "selectionKeys", publicName: "elderSelectSelectionKeys", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ElderSelectSelectionKeysDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[elderSelectSelectionKeys]',
-                }]
-        }], propDecorators: { selectionKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "elderSelectSelectionKeys", required: false }] }] } });
-
 class ElderSelectOnTabDirective {
     constructor() {
         /***************************************************************************
@@ -23742,15 +23715,11 @@ class ElderSelectOnTabDirective {
         this.elderSelect = inject(ElderSelectComponent, {
             skipSelf: true,
         });
-        this.destroyRef = inject(DestroyRef);
+        this.destroy$ = new Subject$1();
         this.controlValueAccessor = this.elderSelect;
         this.panelOpen = false;
         this.autocompleteTextTyped = false;
         this.panelNavigatedWithArrowKeys = false;
-        this.selectionKeysDirective = inject(ElderSelectSelectionKeysDirective, {
-            optional: true,
-        });
-        this.selectionKeys = computed(() => this.selectionKeysDirective?.selectionKeys() ?? [], ...(ngDevMode ? [{ debugName: "selectionKeys" }] : /* istanbul ignore next */ []));
     }
     /***************************************************************************
      *                                                                         *
@@ -23771,18 +23740,6 @@ class ElderSelectOnTabDirective {
             this.selectActiveOption();
         }
     }
-    handleKeydown(event) {
-        if (!this.selectionKeys().includes(event.key)) {
-            return;
-        }
-        if (!this.panelOpen) {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        this.selectActiveOption();
-        this.autoTrigger.closePanel();
-    }
     /***************************************************************************
      *                                                                         *
      * Life Cycle                                                              *
@@ -23792,6 +23749,10 @@ class ElderSelectOnTabDirective {
         this.observePanelOpen();
         this.observeAutocompleteSelection();
     }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
     /***************************************************************************
      *                                                                         *
      * Private methods                                                         *
@@ -23807,7 +23768,7 @@ class ElderSelectOnTabDirective {
     observePanelOpen() {
         const autocomplete = this.autoTrigger.autocomplete;
         merge(autocomplete.opened.pipe(map(() => true)), autocomplete.closed.pipe(map(() => false)))
-            .pipe(takeUntilDestroyed(this.destroyRef), delay(0))
+            .pipe(takeUntil(this.destroy$), delay(0))
             .subscribe((isOpen) => {
             this.panelOpen = isOpen;
             if (isOpen) {
@@ -23822,7 +23783,7 @@ class ElderSelectOnTabDirective {
         this.autoTrigger.optionSelections
             .pipe(
         // TODO https://github.com/angular/components/pull/14813
-        takeUntilDestroyed(this.destroyRef), tap((opt) => this.logger.debug('[optionSelections] CHANGED ', opt)), map((opt) => opt.isUserInput))
+        takeUntil(this.destroy$), tap((opt) => this.logger.debug('[optionSelections] CHANGED ', opt)), map((opt) => opt.isUserInput))
             .subscribe((isUserInput) => (this.autocompleteTextTyped = isUserInput));
     }
     selectActiveOption() {
@@ -23893,7 +23854,7 @@ class ElderSelectOnTabDirective {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ElderSelectOnTabDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: ElderSelectOnTabDirective, isStandalone: true, selector: "[elderSelectOnTab]", host: { listeners: { "keydown.arrowup": "handleVerticalArrowKeyPress()", "keydown.arrowdown": "handleVerticalArrowKeyPress()", "input": "handleInputTyping()", "keydown.tab": "handleTabKeyPress()", "keydown": "handleKeydown($event)" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: ElderSelectOnTabDirective, isStandalone: true, selector: "[elderSelectOnTab]", host: { listeners: { "keydown.arrowup": "handleVerticalArrowKeyPress()", "keydown.arrowdown": "handleVerticalArrowKeyPress()", "input": "handleInputTyping()", "keydown.tab": "handleTabKeyPress()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ElderSelectOnTabDirective, decorators: [{
             type: Directive,
@@ -23912,9 +23873,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
             }], handleTabKeyPress: [{
                 type: HostListener,
                 args: ['keydown.tab']
-            }], handleKeydown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
             }] } });
 
 class ElderAutocompleteOptionSelected {
@@ -29356,6 +29314,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                 }]
         }] });
 
+class ElderScrollbarScopeDirective {
+    constructor() {
+        /***************************************************************************
+         *                                                                         *
+         * State                                                                   *
+         *                                                                         *
+         **************************************************************************/
+        this._wideScrollbarMode = signal(false, ...(ngDevMode ? [{ debugName: "_wideScrollbarMode" }] : /* istanbul ignore next */ []));
+        /***************************************************************************
+         *                                                                         *
+         * Template bindings                                                       *
+         *                                                                         *
+         **************************************************************************/
+        this.wideScrollbarMode = this._wideScrollbarMode.asReadonly();
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    activateWideScrollbarMode() {
+        this._wideScrollbarMode.set(true);
+    }
+    deactivateWideScrollbarMode() {
+        this._wideScrollbarMode.set(false);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ElderScrollbarScopeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: ElderScrollbarScopeDirective, isStandalone: true, selector: "[elderScrollbarScope]", host: { properties: { "class.elder-scrollbar-lg": "wideScrollbarMode()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ElderScrollbarScopeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[elderScrollbarScope]',
+                    host: {
+                        '[class.elder-scrollbar-lg]': 'wideScrollbarMode()',
+                    },
+                }]
+        }] });
+
 /**
  * Bootstrap service that initializes services on startup.
  */
@@ -29982,7 +29979,7 @@ class ElderShellComponent {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ElderShellComponent, deps: [{ token: ElderServicesBootstrap }, { token: ElderShellService }, { token: ElderRouteOutletDrawerService }, { token: i0.ChangeDetectorRef }, { token: GlobalDragDropService }, { token: i0.Renderer2 }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ElderShellComponent, isStandalone: true, selector: "elder-shell", inputs: { sideNavToggleEnabled: { classPropertyName: "sideNavToggleEnabled", publicName: "sideNavToggleEnabled", isSignal: true, isRequired: false, transformFunction: null }, leftSideAutoFocus: { classPropertyName: "leftSideAutoFocus", publicName: "leftSideAutoFocus", isSignal: true, isRequired: false, transformFunction: null }, rightSideAutoFocus: { classPropertyName: "rightSideAutoFocus", publicName: "rightSideAutoFocus", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, navMenuSvgIcon: { classPropertyName: "navMenuSvgIcon", publicName: "navMenuSvgIcon", isSignal: true, isRequired: false, transformFunction: null }, menuColor: { classPropertyName: "menuColor", publicName: "menuColor", isSignal: true, isRequired: false, transformFunction: null }, menuIconColor: { classPropertyName: "menuIconColor", publicName: "menuIconColor", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "sideContentLeft", first: true, predicate: ElderShellSideLeftDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "sideContentRight", first: true, predicate: ElderShellSideRightDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "centerContent", first: true, predicate: ElderShellCenterDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "staticNavContent", first: true, predicate: ElderShellStaticNavSlotDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "rightSideDrawer", first: true, predicate: ["rightSideDetail"], descendants: true, static: true }], ngImport: i0, template: "<mat-sidenav-container\n  elderThemeApplier\n  class=\"full-width\"\n  (backdropClick)=\"onBackdropClick($event)\"\n>\n  <!-- Left Side Nav -->\n  <mat-sidenav\n    position=\"start\"\n    mode=\"over\"\n    [fixedInViewport]=\"true\"\n    [autoFocus]=\"leftSideAutoFocus()\"\n    [opened]=\"leftSideContentOpen()\"\n    (closedStart)=\"blurNavIconFocus()\"\n    (closed)=\"closeLeftSideContent()\"\n    restoreFocus=\"false\"\n  >\n    <div class=\"layout-col full elder-side-nav\">\n      <ng-container *ngTemplateOutlet=\"sideContentLeft || fallbackSideContentLeft\"></ng-container>\n    </div>\n  </mat-sidenav>\n\n  <!-- Main Content -->\n  <mat-sidenav-content>\n    <div class=\"layout-col full\">\n      <ng-container *ngTemplateOutlet=\"centerContent || fallbackCenterContent\"></ng-container>\n    </div>\n  </mat-sidenav-content>\n\n  <!-- Right Side Detail -->\n  <mat-sidenav\n    mode=\"over\"\n    #rightSideDetail\n    id=\"elder-right-side-detail\"\n    position=\"end\"\n    [fixedInViewport]=\"true\"\n    [autoFocus]=\"rightSideAutoFocus()\"\n    [disableClose]=\"true\"\n    (keydown.escape)=\"onEscapeRightSide($event)\"\n  >\n    <div class=\"layout-col full\">\n      <ng-container *ngTemplateOutlet=\"sideContentRight || fallbackSideContentRight\"></ng-container>\n    </div>\n  </mat-sidenav>\n</mat-sidenav-container>\n\n<ng-template #fallbackSideContentLeft>\n  <div class=\"layout-col flex\">\n    <p class=\"noselect\">No Left Side Content Defined!</p>\n  </div>\n</ng-template>\n\n<ng-template #fallbackSideContentRight>\n  <router-outlet name=\"side\" class=\"router-flex\"></router-outlet>\n</ng-template>\n\n<ng-template #fallbackCenterContent>\n  <div class=\"layout-col full\">\n    <!-- Header -->\n    <ng-container *ngTemplateOutlet=\"headerTemplate() || defaultHeaderTemplate\"></ng-container>\n\n    <!-- Center -->\n    <div class=\"layout-row flex\">\n      <!-- Static Nav -->\n      <ng-container\n        *ngTemplateOutlet=\"staticNavTemplate() || defaultStaticNavTemplate\"\n      ></ng-container>\n      <div class=\"layout-col flex\">\n        <!-- Main Content -->\n        <ng-container *ngTemplateOutlet=\"centerTemplate() || defaultCenterTemplate\"></ng-container>\n      </div>\n    </div>\n\n    <!-- Footer -->\n    <ng-container *ngTemplateOutlet=\"footerTemplate() || defaultFooterTemplate\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #defaultHeaderTemplate>\n  <elder-toolbar\n    [color]=\"color()\"\n    class=\"elder-main-toolbar flex-none\"\n    style=\"max-width: 100%; min-width: 100%\"\n  >\n    <!-- Toolbar Prefix: Sidenav Toggle -->\n    @if (sideNavToggleEnabled()) {\n      <mat-toolbar\n        [color]=\"menuColor()\"\n        class=\"flex-none elder-toolbar-main-nav-button-container pl-lg\"\n        style=\"width: auto\"\n      >\n        <button\n          class=\"elder-logo-btn elder-toolbar-main-nav-button\"\n          mat-icon-button\n          [color]=\"menuIconColor()\"\n          type=\"button\"\n          (click)=\"toggleSideNav()\"\n          [class.elder-logo-btn]=\"!!navMenuSvgIcon\"\n        >\n          @if (navMenuSvgIcon()) {\n            <mat-icon [svgIcon]=\"navMenuSvgIcon()\"></mat-icon>\n          } @else {\n            <mat-icon>menu</mat-icon>\n          }\n        </button>\n      </mat-toolbar>\n    }\n  </elder-toolbar>\n</ng-template>\n\n<ng-template #defaultStaticNavTemplate>\n  @if (staticNavOpen()) {\n    <div class=\"layout-col elder-static-nav-container\">\n      <ng-container *ngTemplateOutlet=\"staticNavContent\"></ng-container>\n    </div>\n  }\n</ng-template>\n\n<ng-template #defaultCenterTemplate>\n  <div class=\"flex layout-row\">\n    <!-- Primary Router Outlet -->\n    <router-outlet class=\"router-flex\"></router-outlet>\n  </div>\n</ng-template>\n\n<ng-template #defaultFooterTemplate>\n  <!-- Default Footer is empty -->\n</ng-template>\n", styles: ["mat-sidenav{margin:0;height:100%;overflow:hidden}mat-sidenav .elder-side-nav{min-width:350px}mat-sidenav-container{margin:0;width:100%;height:100%;overflow:hidden}.elder-logo-btn{display:flex;justify-content:center;align-items:center;padding:0!important}.elder-logo-btn .mat-icon{--mat-icon-button-icon-size: 48px !important;height:var(--mat-icon-button-icon-size);width:var(--mat-icon-button-icon-size)}\n"], dependencies: [{ kind: "component", type: MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "directive", type: ElderThemeApplierDirective, selector: "[elderThemeApplier]" }, { kind: "component", type: MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ElderToolbarComponent, selector: "elder-toolbar", inputs: ["color"] }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", type: ElderShellComponent, isStandalone: true, selector: "elder-shell", inputs: { sideNavToggleEnabled: { classPropertyName: "sideNavToggleEnabled", publicName: "sideNavToggleEnabled", isSignal: true, isRequired: false, transformFunction: null }, leftSideAutoFocus: { classPropertyName: "leftSideAutoFocus", publicName: "leftSideAutoFocus", isSignal: true, isRequired: false, transformFunction: null }, rightSideAutoFocus: { classPropertyName: "rightSideAutoFocus", publicName: "rightSideAutoFocus", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, navMenuSvgIcon: { classPropertyName: "navMenuSvgIcon", publicName: "navMenuSvgIcon", isSignal: true, isRequired: false, transformFunction: null }, menuColor: { classPropertyName: "menuColor", publicName: "menuColor", isSignal: true, isRequired: false, transformFunction: null }, menuIconColor: { classPropertyName: "menuIconColor", publicName: "menuIconColor", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "sideContentLeft", first: true, predicate: ElderShellSideLeftDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "sideContentRight", first: true, predicate: ElderShellSideRightDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "centerContent", first: true, predicate: ElderShellCenterDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "staticNavContent", first: true, predicate: ElderShellStaticNavSlotDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "rightSideDrawer", first: true, predicate: ["rightSideDetail"], descendants: true, static: true }], hostDirectives: [{ directive: ElderScrollbarScopeDirective }], ngImport: i0, template: "<mat-sidenav-container\n  elderThemeApplier\n  class=\"full-width\"\n  (backdropClick)=\"onBackdropClick($event)\"\n>\n  <!-- Left Side Nav -->\n  <mat-sidenav\n    position=\"start\"\n    mode=\"over\"\n    [fixedInViewport]=\"true\"\n    [autoFocus]=\"leftSideAutoFocus()\"\n    [opened]=\"leftSideContentOpen()\"\n    (closedStart)=\"blurNavIconFocus()\"\n    (closed)=\"closeLeftSideContent()\"\n    restoreFocus=\"false\"\n  >\n    <div class=\"layout-col full elder-side-nav\">\n      <ng-container *ngTemplateOutlet=\"sideContentLeft || fallbackSideContentLeft\"></ng-container>\n    </div>\n  </mat-sidenav>\n\n  <!-- Main Content -->\n  <mat-sidenav-content>\n    <div class=\"layout-col full\">\n      <ng-container *ngTemplateOutlet=\"centerContent || fallbackCenterContent\"></ng-container>\n    </div>\n  </mat-sidenav-content>\n\n  <!-- Right Side Detail -->\n  <mat-sidenav\n    mode=\"over\"\n    #rightSideDetail\n    id=\"elder-right-side-detail\"\n    position=\"end\"\n    [fixedInViewport]=\"true\"\n    [autoFocus]=\"rightSideAutoFocus()\"\n    [disableClose]=\"true\"\n    (keydown.escape)=\"onEscapeRightSide($event)\"\n  >\n    <div class=\"layout-col full\">\n      <ng-container *ngTemplateOutlet=\"sideContentRight || fallbackSideContentRight\"></ng-container>\n    </div>\n  </mat-sidenav>\n</mat-sidenav-container>\n\n<ng-template #fallbackSideContentLeft>\n  <div class=\"layout-col flex\">\n    <p class=\"noselect\">No Left Side Content Defined!</p>\n  </div>\n</ng-template>\n\n<ng-template #fallbackSideContentRight>\n  <router-outlet name=\"side\" class=\"router-flex\"></router-outlet>\n</ng-template>\n\n<ng-template #fallbackCenterContent>\n  <div class=\"layout-col full\">\n    <!-- Header -->\n    <ng-container *ngTemplateOutlet=\"headerTemplate() || defaultHeaderTemplate\"></ng-container>\n\n    <!-- Center -->\n    <div class=\"layout-row flex\">\n      <!-- Static Nav -->\n      <ng-container\n        *ngTemplateOutlet=\"staticNavTemplate() || defaultStaticNavTemplate\"\n      ></ng-container>\n      <div class=\"layout-col flex\">\n        <!-- Main Content -->\n        <ng-container *ngTemplateOutlet=\"centerTemplate() || defaultCenterTemplate\"></ng-container>\n      </div>\n    </div>\n\n    <!-- Footer -->\n    <ng-container *ngTemplateOutlet=\"footerTemplate() || defaultFooterTemplate\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #defaultHeaderTemplate>\n  <elder-toolbar\n    [color]=\"color()\"\n    class=\"elder-main-toolbar flex-none\"\n    style=\"max-width: 100%; min-width: 100%\"\n  >\n    <!-- Toolbar Prefix: Sidenav Toggle -->\n    @if (sideNavToggleEnabled()) {\n      <mat-toolbar\n        [color]=\"menuColor()\"\n        class=\"flex-none elder-toolbar-main-nav-button-container pl-lg\"\n        style=\"width: auto\"\n      >\n        <button\n          class=\"elder-logo-btn elder-toolbar-main-nav-button\"\n          mat-icon-button\n          [color]=\"menuIconColor()\"\n          type=\"button\"\n          (click)=\"toggleSideNav()\"\n          [class.elder-logo-btn]=\"!!navMenuSvgIcon\"\n        >\n          @if (navMenuSvgIcon()) {\n            <mat-icon [svgIcon]=\"navMenuSvgIcon()\"></mat-icon>\n          } @else {\n            <mat-icon>menu</mat-icon>\n          }\n        </button>\n      </mat-toolbar>\n    }\n  </elder-toolbar>\n</ng-template>\n\n<ng-template #defaultStaticNavTemplate>\n  @if (staticNavOpen()) {\n    <div class=\"layout-col elder-static-nav-container\">\n      <ng-container *ngTemplateOutlet=\"staticNavContent\"></ng-container>\n    </div>\n  }\n</ng-template>\n\n<ng-template #defaultCenterTemplate>\n  <div class=\"flex layout-row\">\n    <!-- Primary Router Outlet -->\n    <router-outlet class=\"router-flex\"></router-outlet>\n  </div>\n</ng-template>\n\n<ng-template #defaultFooterTemplate>\n  <!-- Default Footer is empty -->\n</ng-template>\n", styles: ["mat-sidenav{margin:0;height:100%;overflow:hidden}mat-sidenav .elder-side-nav{min-width:350px}mat-sidenav-container{margin:0;width:100%;height:100%;overflow:hidden}.elder-logo-btn{display:flex;justify-content:center;align-items:center;padding:0!important}.elder-logo-btn .mat-icon{--mat-icon-button-icon-size: 48px !important;height:var(--mat-icon-button-icon-size);width:var(--mat-icon-button-icon-size)}\n"], dependencies: [{ kind: "component", type: MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "directive", type: ElderThemeApplierDirective, selector: "[elderThemeApplier]" }, { kind: "component", type: MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ElderToolbarComponent, selector: "elder-toolbar", inputs: ["color"] }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ElderShellComponent, decorators: [{
             type: Component,
@@ -29997,7 +29994,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                         MatToolbar,
                         MatIconButton,
                         MatIcon,
-                    ], template: "<mat-sidenav-container\n  elderThemeApplier\n  class=\"full-width\"\n  (backdropClick)=\"onBackdropClick($event)\"\n>\n  <!-- Left Side Nav -->\n  <mat-sidenav\n    position=\"start\"\n    mode=\"over\"\n    [fixedInViewport]=\"true\"\n    [autoFocus]=\"leftSideAutoFocus()\"\n    [opened]=\"leftSideContentOpen()\"\n    (closedStart)=\"blurNavIconFocus()\"\n    (closed)=\"closeLeftSideContent()\"\n    restoreFocus=\"false\"\n  >\n    <div class=\"layout-col full elder-side-nav\">\n      <ng-container *ngTemplateOutlet=\"sideContentLeft || fallbackSideContentLeft\"></ng-container>\n    </div>\n  </mat-sidenav>\n\n  <!-- Main Content -->\n  <mat-sidenav-content>\n    <div class=\"layout-col full\">\n      <ng-container *ngTemplateOutlet=\"centerContent || fallbackCenterContent\"></ng-container>\n    </div>\n  </mat-sidenav-content>\n\n  <!-- Right Side Detail -->\n  <mat-sidenav\n    mode=\"over\"\n    #rightSideDetail\n    id=\"elder-right-side-detail\"\n    position=\"end\"\n    [fixedInViewport]=\"true\"\n    [autoFocus]=\"rightSideAutoFocus()\"\n    [disableClose]=\"true\"\n    (keydown.escape)=\"onEscapeRightSide($event)\"\n  >\n    <div class=\"layout-col full\">\n      <ng-container *ngTemplateOutlet=\"sideContentRight || fallbackSideContentRight\"></ng-container>\n    </div>\n  </mat-sidenav>\n</mat-sidenav-container>\n\n<ng-template #fallbackSideContentLeft>\n  <div class=\"layout-col flex\">\n    <p class=\"noselect\">No Left Side Content Defined!</p>\n  </div>\n</ng-template>\n\n<ng-template #fallbackSideContentRight>\n  <router-outlet name=\"side\" class=\"router-flex\"></router-outlet>\n</ng-template>\n\n<ng-template #fallbackCenterContent>\n  <div class=\"layout-col full\">\n    <!-- Header -->\n    <ng-container *ngTemplateOutlet=\"headerTemplate() || defaultHeaderTemplate\"></ng-container>\n\n    <!-- Center -->\n    <div class=\"layout-row flex\">\n      <!-- Static Nav -->\n      <ng-container\n        *ngTemplateOutlet=\"staticNavTemplate() || defaultStaticNavTemplate\"\n      ></ng-container>\n      <div class=\"layout-col flex\">\n        <!-- Main Content -->\n        <ng-container *ngTemplateOutlet=\"centerTemplate() || defaultCenterTemplate\"></ng-container>\n      </div>\n    </div>\n\n    <!-- Footer -->\n    <ng-container *ngTemplateOutlet=\"footerTemplate() || defaultFooterTemplate\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #defaultHeaderTemplate>\n  <elder-toolbar\n    [color]=\"color()\"\n    class=\"elder-main-toolbar flex-none\"\n    style=\"max-width: 100%; min-width: 100%\"\n  >\n    <!-- Toolbar Prefix: Sidenav Toggle -->\n    @if (sideNavToggleEnabled()) {\n      <mat-toolbar\n        [color]=\"menuColor()\"\n        class=\"flex-none elder-toolbar-main-nav-button-container pl-lg\"\n        style=\"width: auto\"\n      >\n        <button\n          class=\"elder-logo-btn elder-toolbar-main-nav-button\"\n          mat-icon-button\n          [color]=\"menuIconColor()\"\n          type=\"button\"\n          (click)=\"toggleSideNav()\"\n          [class.elder-logo-btn]=\"!!navMenuSvgIcon\"\n        >\n          @if (navMenuSvgIcon()) {\n            <mat-icon [svgIcon]=\"navMenuSvgIcon()\"></mat-icon>\n          } @else {\n            <mat-icon>menu</mat-icon>\n          }\n        </button>\n      </mat-toolbar>\n    }\n  </elder-toolbar>\n</ng-template>\n\n<ng-template #defaultStaticNavTemplate>\n  @if (staticNavOpen()) {\n    <div class=\"layout-col elder-static-nav-container\">\n      <ng-container *ngTemplateOutlet=\"staticNavContent\"></ng-container>\n    </div>\n  }\n</ng-template>\n\n<ng-template #defaultCenterTemplate>\n  <div class=\"flex layout-row\">\n    <!-- Primary Router Outlet -->\n    <router-outlet class=\"router-flex\"></router-outlet>\n  </div>\n</ng-template>\n\n<ng-template #defaultFooterTemplate>\n  <!-- Default Footer is empty -->\n</ng-template>\n", styles: ["mat-sidenav{margin:0;height:100%;overflow:hidden}mat-sidenav .elder-side-nav{min-width:350px}mat-sidenav-container{margin:0;width:100%;height:100%;overflow:hidden}.elder-logo-btn{display:flex;justify-content:center;align-items:center;padding:0!important}.elder-logo-btn .mat-icon{--mat-icon-button-icon-size: 48px !important;height:var(--mat-icon-button-icon-size);width:var(--mat-icon-button-icon-size)}\n"] }]
+                    ], hostDirectives: [ElderScrollbarScopeDirective], template: "<mat-sidenav-container\n  elderThemeApplier\n  class=\"full-width\"\n  (backdropClick)=\"onBackdropClick($event)\"\n>\n  <!-- Left Side Nav -->\n  <mat-sidenav\n    position=\"start\"\n    mode=\"over\"\n    [fixedInViewport]=\"true\"\n    [autoFocus]=\"leftSideAutoFocus()\"\n    [opened]=\"leftSideContentOpen()\"\n    (closedStart)=\"blurNavIconFocus()\"\n    (closed)=\"closeLeftSideContent()\"\n    restoreFocus=\"false\"\n  >\n    <div class=\"layout-col full elder-side-nav\">\n      <ng-container *ngTemplateOutlet=\"sideContentLeft || fallbackSideContentLeft\"></ng-container>\n    </div>\n  </mat-sidenav>\n\n  <!-- Main Content -->\n  <mat-sidenav-content>\n    <div class=\"layout-col full\">\n      <ng-container *ngTemplateOutlet=\"centerContent || fallbackCenterContent\"></ng-container>\n    </div>\n  </mat-sidenav-content>\n\n  <!-- Right Side Detail -->\n  <mat-sidenav\n    mode=\"over\"\n    #rightSideDetail\n    id=\"elder-right-side-detail\"\n    position=\"end\"\n    [fixedInViewport]=\"true\"\n    [autoFocus]=\"rightSideAutoFocus()\"\n    [disableClose]=\"true\"\n    (keydown.escape)=\"onEscapeRightSide($event)\"\n  >\n    <div class=\"layout-col full\">\n      <ng-container *ngTemplateOutlet=\"sideContentRight || fallbackSideContentRight\"></ng-container>\n    </div>\n  </mat-sidenav>\n</mat-sidenav-container>\n\n<ng-template #fallbackSideContentLeft>\n  <div class=\"layout-col flex\">\n    <p class=\"noselect\">No Left Side Content Defined!</p>\n  </div>\n</ng-template>\n\n<ng-template #fallbackSideContentRight>\n  <router-outlet name=\"side\" class=\"router-flex\"></router-outlet>\n</ng-template>\n\n<ng-template #fallbackCenterContent>\n  <div class=\"layout-col full\">\n    <!-- Header -->\n    <ng-container *ngTemplateOutlet=\"headerTemplate() || defaultHeaderTemplate\"></ng-container>\n\n    <!-- Center -->\n    <div class=\"layout-row flex\">\n      <!-- Static Nav -->\n      <ng-container\n        *ngTemplateOutlet=\"staticNavTemplate() || defaultStaticNavTemplate\"\n      ></ng-container>\n      <div class=\"layout-col flex\">\n        <!-- Main Content -->\n        <ng-container *ngTemplateOutlet=\"centerTemplate() || defaultCenterTemplate\"></ng-container>\n      </div>\n    </div>\n\n    <!-- Footer -->\n    <ng-container *ngTemplateOutlet=\"footerTemplate() || defaultFooterTemplate\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #defaultHeaderTemplate>\n  <elder-toolbar\n    [color]=\"color()\"\n    class=\"elder-main-toolbar flex-none\"\n    style=\"max-width: 100%; min-width: 100%\"\n  >\n    <!-- Toolbar Prefix: Sidenav Toggle -->\n    @if (sideNavToggleEnabled()) {\n      <mat-toolbar\n        [color]=\"menuColor()\"\n        class=\"flex-none elder-toolbar-main-nav-button-container pl-lg\"\n        style=\"width: auto\"\n      >\n        <button\n          class=\"elder-logo-btn elder-toolbar-main-nav-button\"\n          mat-icon-button\n          [color]=\"menuIconColor()\"\n          type=\"button\"\n          (click)=\"toggleSideNav()\"\n          [class.elder-logo-btn]=\"!!navMenuSvgIcon\"\n        >\n          @if (navMenuSvgIcon()) {\n            <mat-icon [svgIcon]=\"navMenuSvgIcon()\"></mat-icon>\n          } @else {\n            <mat-icon>menu</mat-icon>\n          }\n        </button>\n      </mat-toolbar>\n    }\n  </elder-toolbar>\n</ng-template>\n\n<ng-template #defaultStaticNavTemplate>\n  @if (staticNavOpen()) {\n    <div class=\"layout-col elder-static-nav-container\">\n      <ng-container *ngTemplateOutlet=\"staticNavContent\"></ng-container>\n    </div>\n  }\n</ng-template>\n\n<ng-template #defaultCenterTemplate>\n  <div class=\"flex layout-row\">\n    <!-- Primary Router Outlet -->\n    <router-outlet class=\"router-flex\"></router-outlet>\n  </div>\n</ng-template>\n\n<ng-template #defaultFooterTemplate>\n  <!-- Default Footer is empty -->\n</ng-template>\n", styles: ["mat-sidenav{margin:0;height:100%;overflow:hidden}mat-sidenav .elder-side-nav{min-width:350px}mat-sidenav-container{margin:0;width:100%;height:100%;overflow:hidden}.elder-logo-btn{display:flex;justify-content:center;align-items:center;padding:0!important}.elder-logo-btn .mat-icon{--mat-icon-button-icon-size: 48px !important;height:var(--mat-icon-button-icon-size);width:var(--mat-icon-button-icon-size)}\n"] }]
         }], ctorParameters: () => [{ type: ElderServicesBootstrap }, { type: ElderShellService }, { type: ElderRouteOutletDrawerService }, { type: i0.ChangeDetectorRef }, { type: GlobalDragDropService }, { type: i0.Renderer2 }, { type: i0.DestroyRef }], propDecorators: { sideNavToggleEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "sideNavToggleEnabled", required: false }] }], leftSideAutoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftSideAutoFocus", required: false }] }], rightSideAutoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightSideAutoFocus", required: false }] }], sideContentLeft: [{
                 type: ContentChild,
                 args: [ElderShellSideLeftDirective, { read: TemplateRef, static: true }]
@@ -32435,7 +32432,7 @@ class ElderIntervalPickerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ElderIntervalPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", 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          data-testid=\"interval-picker-smart-shift-left\"\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          data-testid=\"interval-picker-smart-shift-right\"\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                data-testid=\"interval-picker-shift-day-left\"\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                data-testid=\"interval-picker-shift-day-right\"\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                data-testid=\"interval-picker-shift-month-left\"\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                data-testid=\"interval-picker-shift-month-right\"\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                data-testid=\"interval-picker-shift-year-left\"\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                data-testid=\"interval-picker-shift-year-right\"\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                  data-testid=\"interval-picker-shift-minute-left\"\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                  data-testid=\"interval-picker-shift-minute-right\"\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                  data-testid=\"interval-picker-shift-hour-left\"\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                  data-testid=\"interval-picker-shift-hour-right\"\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$d.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$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$3.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: MatIconModule }, { kind: "component", type: i1$e.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.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: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: ElderTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.15", 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          data-testid=\"interval-picker-smart-shift-left\"\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          data-testid=\"interval-picker-smart-shift-right\"\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                data-testid=\"interval-picker-shift-day-left\"\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                data-testid=\"interval-picker-shift-day-right\"\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                data-testid=\"interval-picker-shift-month-left\"\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                data-testid=\"interval-picker-shift-month-right\"\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                data-testid=\"interval-picker-shift-year-left\"\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                data-testid=\"interval-picker-shift-year-right\"\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                  data-testid=\"interval-picker-shift-minute-left\"\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                  data-testid=\"interval-picker-shift-minute-right\"\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                  data-testid=\"interval-picker-shift-hour-left\"\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                  data-testid=\"interval-picker-shift-hour-right\"\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$d.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$2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$e.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.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$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i6.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: i6.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i6.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: ElderTranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ElderIntervalPickerComponent, decorators: [{
             type: Component,
@@ -33868,6 +33865,7 @@ class ElderSearchPanelComponent {
         this.overlay = signal(undefined, ...(ngDevMode ? [{ debugName: "overlay" }] : /* istanbul ignore next */ []));
         const overlay$ = toObservable(this.overlay).pipe(filter((overlay) => !!overlay));
         this.open$ = overlay$.pipe(switchMap((overlay) => overlay.attachedChange.pipe(startWith(overlay.attached))));
+        this.isOpen = toSignal(this.open$);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ElderSearchPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.15", type: ElderSearchPanelComponent, isStandalone: true, selector: "elder-search-panel", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -35558,74 +35556,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         }] });
 
 /**
- * Set scrollbar width. Will only work in webkit-based browsers.
+ * Directive that activates wide scrollbar mode.
+ * Typically the ScrollbarScope is the global scope on the elder-shell,
+ * but alternatively an ElderWideScrollbarDirective can be used to activate
+ * targeted wide scrollbar.
  */
-class ElderScrollbarDirective extends ElderClassHostBindingBase {
-    static { this.DEFAULT_WIDTH = 'lg'; }
-    /***************************************************************************
-     *                                                                         *
-     * Constructor                                                             *
-     *                                                                         *
-     **************************************************************************/
+class ElderWideScrollbarDirective {
     constructor() {
-        super(ElderScrollbarDirective.buildClass(ElderScrollbarDirective.DEFAULT_WIDTH));
-        /***************************************************************************
-         *                                                                         *
-         * Fields                                                                  *
-         *                                                                         *
-         **************************************************************************/
-        this._size = ElderScrollbarDirective.DEFAULT_WIDTH;
-        this.enabled = true; // no size input is needed, we have a default
+        this.scrollbarScope = inject(ElderScrollbarScopeDirective);
     }
     /***************************************************************************
      *                                                                         *
-     * Properties                                                              *
-     *                                                                         *
-     **************************************************************************/
-    /**
-     * Optional input to select a specific {@link ElderSize}
-     * @return size with default value lg
-     */
-    get size() {
-        return this._size;
-    }
-    set size(value) {
-        this._size = value;
-        this.elementClass = this.buildClass(value);
-    }
-    /***************************************************************************
-     *                                                                         *
-     * Private Methods                                                         *
+     * Lifecycle methods                                                       *
      *                                                                         *
      **************************************************************************/
-    buildClass(size) {
-        return ElderScrollbarDirective.buildClass(size);
+    ngOnInit() {
+        this.scrollbarScope.activateWideScrollbarMode();
     }
-    static buildClass(size) {
-        return `scrollbar-${size}`;
+    ngOnDestroy() {
+        this.scrollbarScope.deactivateWideScrollbarMode();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ElderScrollbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: ElderScrollbarDirective, isStandalone: true, selector: "[elderScrollbar]", inputs: { size: "size" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ElderWideScrollbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.15", type: ElderWideScrollbarDirective, isStandalone: true, selector: "[elderWideScrollbar]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ElderScrollbarDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ElderWideScrollbarDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[elderScrollbar]',
-                }]
-        }], ctorParameters: () => [], propDecorators: { size: [{
-                type: Input
-            }] } });
-
-class ElderScrollbarModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ElderScrollbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.15", ngImport: i0, type: ElderScrollbarModule, imports: [ElderScrollbarDirective], exports: [ElderScrollbarDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ElderScrollbarModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImport: i0, type: ElderScrollbarModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [ElderScrollbarDirective],
-                    exports: [ElderScrollbarDirective],
+                    selector: '[elderWideScrollbar]',
                 }]
         }] });
 
@@ -39653,5 +39610,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ActivationEventSource, ActivationModel, Arrays, AuditedEntity, AutoStartSpec, Batcher, BlobUrl, BytesFormat, BytesPerSecondFormat, BytesPipe, CardDropEvent, CardOrganizerData, CardStack, CollectionUtil, CommonValidationMessageStrategy, ComparatorBuilder, CompositeSort, ConfirmDialogConfig, ContinuableListing, CountryPhoneFormatService, CsvColumnSpec, CsvSerializer, CsvSpec, CsvStreamExporter, CsvStreamExporterBuilder, CsvStreamExporterBuilderService, CuratedDataSource, CuratedListDataSource, CuratedPagedDataSource, Currency, CurrencyCode, CurrencyFormatUtil, CurrencyUnit, CurrencyUnitRegistry, CustomDateAdapter, CustomMatcherSpec, DataContextActivePage, DataContextAutoStarter, DataContextBase, DataContextBuilder, DataContextContinuableBase, DataContextContinuablePaged, DataContextContinuableToken, DataContextLifeCycleBinding, DataContextRange, DataContextSelectionDirective, DataContextSimple, DataContextSnapshot, DataContextSourceEventBinding, DataContextStateIndicatorComponent, DataContextStatus, DataSelectionController, DataSourceAdapter, DataSourceBase, DataSourceChangeEvent, DataSourceEntityPatch, DataSourceProcessor, DataTransferFactory, DataTransferProgress, DataTransferProgressAggregate, DataTransferState, DataTransferStatus, DataViewActivationController, DataViewDndControllerService, DataViewDndGroupControllerService, DataViewDndModelUtil, DataViewDragEnteredEvent, DataViewDragExitedEvent, DataViewIframeAdapterDirective, DataViewIframeComponent, DataViewInteractionControllerDirective, DataViewItemDropEvent, DataViewMessage, DataViewMessageTypeValues, DataViewOptionsProviderBinding, DataViewSelection, DataViewSelectionInit, DateUtil, DelegateContinuableDataSource, DelegateDataSource, DelegateListDataSource, DelegatePagedDataSource, Dimensions, DomUtil, DrawerOutletBinding, DurationBucket, DurationFormat, DurationFormatUtil, DynamicValidationMessageStrategy, ELDER_DATA_VIEW, ELDER_SELECT_BASE, ElderAccessDeniedComponent, ElderAccessDeniedModule, ElderAppHeaderComponent, ElderAppearanceSettingsComponent, ElderAuditModule, ElderAuditedEntityComponent, ElderAutoSelectFirstDirective, ElderAutoSelectSuggestFirstDirective, ElderAutocompleteDirective, ElderAutocompleteModule, ElderBadgeDirective, 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, ElderDataActivationDirective, 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, ElderGenericResizableLayoutComponent, ElderGridActivationDirective, ElderGridComponent, ElderGridModule, ElderGridNavigationBarDirective, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollModule, ElderInputPatternDirective, ElderIntervalInputComponent, ElderIntervalPickerBindingDirective, ElderIntervalPickerComponent, ElderIntervalPickerToggleComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalDndSupportDirective, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, ElderLock, ElderLockContext, ElderLockContextDirective, ElderLockManagerService, ElderLockWarningService, ElderMasterActivationDirective, ElderMasterDetailComponent, ElderMasterDetailModule, ElderMasterDetailService, ElderMasterDirective, ElderMaxValidator, ElderMeasuresModule, ElderMinValidator, ElderMultiEntityValueAccessorUtil, ElderMultiSelectAllInitialDirective, ElderMultiSelectBase, ElderMultiSelectChipOptionsComponent, ElderMultiSelectChipsComponent, ElderMultiSelectChipsOptionsDirective, ElderMultiSelectFormField, ElderMultiTranslateHttpLoader, ElderMultipleOfUtil, ElderMultipleOfValidator, ElderNavGroupComponent, ElderNavLinkComponent, ElderNavListComponent, ElderNavModule, ElderNextFocusableDirective, ElderNumberCellDirective, ElderOfflineIndicatorComponent, ElderOverlayComponent, ElderOverlayModule, ElderOverlayOriginDirective, ElderOverlayRef, ElderOverlayTriggerDirective, ElderPaddingDirective, ElderPaneActionsComponent, ElderPaneComponent, ElderPaneContentComponent, ElderPaneHeaderComponent, ElderPaneSubtitleComponent, ElderPaneTitleComponent, ElderPanelModule, ElderPeriodInputComponent, ElderPipesModule, ElderPlugParentFormDirective, ElderPopoverComponent, ElderPopoverContentDirective, ElderPopoverTriggerDirective, ElderProgressBarComponent, ElderProgressBarModule, ElderQuantityFormFieldComponent, ElderQuantityInputControlComponent, ElderQuantityPipe, ElderQuantityRangeValidator, ElderQuantityService, ElderQuantityTransformPipe, ElderQuestionDialogComponent, ElderRailNavDirective, ElderRepeatPipe, ElderRequiredDimensionsValidator, ElderRequiredIgnoreZeroValidator, ElderRequiredQuantityValidator, ElderResizableDirective, ElderResizablePaneLayoutComponent, ElderResizeBehaviorDirective, ElderResizeContainerComponent, 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, ElderSelectSelectionKeysDirective, ElderSelectValueDirective, ElderSelectionDialogComponent, ElderSelectionDialogDirective, ElderSelectionMasterCheckboxComponent, ElderSelectionPopupTriggerAdapterDirective, ElderShellCenterDirective, ElderShellComponent, ElderShellModule, ElderShellNavigationToggleComponent, ElderShellService, ElderShellSideLeftDirective, ElderShellSideRightDirective, ElderShellSlotDirective, ElderShellStaticNavSlotDirective, ElderSinglePaneWrapperComponent, ElderSingleStateCheckboxDirective, ElderStackCardDirective, ElderStaticNavToggleComponent, ElderStopEventPropagationDirective, ElderSuggestionPanelComponent, ElderTabDirective, ElderTabFocusTrapDirective, ElderTabGroupRoutingDirective, ElderTabModule, ElderTableActivationDirective, ElderTableComponent, ElderTableDropListConnectorDirective, ElderTableExtensionDirective, ElderTableGroup, ElderTableModel, ElderTableModelCdkTableBinding, ElderTableModelQueryGroup, ElderTableModule, ElderTableNavigationBarDirective, ElderTableProviders, ElderTableRootDirective, ElderTableSelectionCellComponent, ElderTableSortDirective, ElderTableToolbarDirective, ElderThemeApplierDirective, ElderThemeDirective, ElderThemeModule, ElderThemePreferenceService, ElderThemeService, ElderThemeToggleComponent, ElderTileComponent, ElderTimeModule, ElderToastModule, ElderToastService, ElderTogglePanelComponent, ElderTogglePanelPrimaryDirective, ElderTogglePanelSecondaryDirective, ElderTogglePanelTriggerDirective, ElderToggleTextInputDirective, ElderToolbarColumnDirective, ElderToolbarComponent, ElderToolbarContentDirective, ElderToolbarModule, ElderToolbarService, ElderToolbarTitleComponent, ElderToolbarTitleService, ElderTouchedDirective, ElderTranslatePipe, ElderTranslateService, ElderTripleStateCheckboxDirective, ElderTruncatePipe, ElderUnitSelectDirective, ElderUnitService, ElderUrlFragment, ElderUrlFragmentModule, ElderUrlFragmentParamsService, ElderUrlFragmentSwitcherComponent, ElderValidationErrorDirective, ElderWordAutocompleteDirective, EntitiesChangeEvent, EntityDelta, EntityIdUtil, EntitySetPatch, ErrorUtil, ExceptionDetailCtx, FallbackValidationMessageStrategy, FileEntry, FileListingRx, FileUploadClient, Filter, FilterContext, FilterUtil, FocusUtil, FormFieldBaseComponent, GlobalDragDropService, 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, ItemModel, JsonMapUtil, KafentConfig, KafentEvent, KafentEventService, KafentEventStream, KafentEventStreamDisabled, KafentEventStreamSse, KafentEventTransport, KafentModule, KafentSseEventChannel, KafentTokenProvider, KafentTokenProviderSessionStorage, KafentTopicSse, KnownElderThemes, KnownLocaleTags, LocalDataFilter, LocalListDataSource, LocalPagedDataSource, Locale, LocalisationPickerService, MasterDetailActivationEvent, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, ModifierKeyService, ModifierKeyState, MultiModelBaseComponent, NamedColorDirective, NamedColorSelectDirective, NamedColorSelectValueComponent, NextNumberUtil, ObjectFieldMatcher, ObjectPathResolver, Objects, OnlineStatus, Page, PageRequest, Pageable, ParseUtil, Path, PathNode, PeriodBucket, PeriodDuration, PeriodFormat, PhoneFormatService, PhonePipe, ProcessIterationContext, ProcessState, PropertyPathUtil, Quantity, QueryListBinding, QuestionDialogConfig, ReactiveEventSource, ReactiveEventSourceState, ReactiveFetchEventSource, ReactiveFetchEventSourceService, ReactiveMap, ReactiveSSeMessage, RefreshingEntity, ResizeObserverDirective, RestClient, RestClientConfig, RestClientContinuable, RestClientList, RestClientPaged, RoutedTabActivationFailed, SearchInputState, SelectChipSpecUtil, SelectOptionChipSpecUtil, SelectionChangedEvent, SelectionEventSource, SelectionModel, SelectionModelPopupDirective, Sets, SimpleLocalisationPicker, SimpleSearchInput, Sort, SortUtil, StandardToastComponent, SubBar, SuggestionProvider, TargetValue, 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, ValueChangeEvent, ValueWrapper, ViewDropModelUpdateInstruction, ViewProviders, WebLocalStorage, WebSessionStorage, WebappDomainFragmentSpec, WebappDomainSpec, WebappDomainSpecService, WebappDomainSwitcherDirective, WebappUrlFragmentSwitcherConfig, WeightPipe, alphaNumStringComparator, booleanTransformFn, buildFormIntegrationProviders, coerceInterval, coerceIntervalIsoStr, createDataOptionsProvider, createElderDefaultTranslateLoader, createSelectionModel, elderChipColorLevels, elderChipColorStates, elderNamedColorRoles, elderNamedColorToken, elderNamedColors, existingOrNewElderTableModel, initSearchUrlService, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isDataViewMessageType, isElderEntityValueAccessor, isElderMultiEntityValueAccessor, isListDataSource, isLocalDataSource, isLocalListDataSource, isLocalPagedDataSource, isPagedDataSource, lazySample, lazySampleTime, naturalValueComparator, newElderTableModel, provideElderBrandAssets, provideElderDefaults, provideElderLanguage, provideElderTranslate, proxyControlContainer, registerLocale, runInZone, someSignal, themeInit };
+export { ActivationEventSource, ActivationModel, Arrays, AuditedEntity, AutoStartSpec, Batcher, BlobUrl, BytesFormat, BytesPerSecondFormat, BytesPipe, CardDropEvent, CardOrganizerData, CardStack, CollectionUtil, CommonValidationMessageStrategy, ComparatorBuilder, CompositeSort, ConfirmDialogConfig, ContinuableListing, CountryPhoneFormatService, CsvColumnSpec, CsvSerializer, CsvSpec, CsvStreamExporter, CsvStreamExporterBuilder, CsvStreamExporterBuilderService, CuratedDataSource, CuratedListDataSource, CuratedPagedDataSource, Currency, CurrencyCode, CurrencyFormatUtil, CurrencyUnit, CurrencyUnitRegistry, CustomDateAdapter, CustomMatcherSpec, DataContextActivePage, DataContextAutoStarter, DataContextBase, DataContextBuilder, DataContextContinuableBase, DataContextContinuablePaged, DataContextContinuableToken, DataContextLifeCycleBinding, DataContextRange, DataContextSelectionDirective, DataContextSimple, DataContextSnapshot, DataContextSourceEventBinding, DataContextStateIndicatorComponent, DataContextStatus, DataSelectionController, DataSourceAdapter, DataSourceBase, DataSourceChangeEvent, DataSourceEntityPatch, DataSourceProcessor, DataTransferFactory, DataTransferProgress, DataTransferProgressAggregate, DataTransferState, DataTransferStatus, DataViewActivationController, DataViewDndControllerService, DataViewDndGroupControllerService, DataViewDndModelUtil, DataViewDragEnteredEvent, DataViewDragExitedEvent, DataViewIframeAdapterDirective, DataViewIframeComponent, DataViewInteractionControllerDirective, DataViewItemDropEvent, DataViewMessage, DataViewMessageTypeValues, DataViewOptionsProviderBinding, DataViewSelection, DataViewSelectionInit, DateUtil, DelegateContinuableDataSource, DelegateDataSource, DelegateListDataSource, DelegatePagedDataSource, Dimensions, DomUtil, DrawerOutletBinding, DurationBucket, DurationFormat, DurationFormatUtil, DynamicValidationMessageStrategy, ELDER_DATA_VIEW, ELDER_SELECT_BASE, ElderAccessDeniedComponent, ElderAccessDeniedModule, ElderAppHeaderComponent, ElderAppearanceSettingsComponent, ElderAuditModule, ElderAuditedEntityComponent, ElderAutoSelectFirstDirective, ElderAutoSelectSuggestFirstDirective, ElderAutocompleteDirective, ElderAutocompleteModule, ElderBadgeDirective, 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, ElderDataActivationDirective, 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, ElderGenericResizableLayoutComponent, ElderGridActivationDirective, ElderGridComponent, ElderGridModule, ElderGridNavigationBarDirective, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollModule, ElderInputPatternDirective, ElderIntervalInputComponent, ElderIntervalPickerBindingDirective, ElderIntervalPickerComponent, ElderIntervalPickerToggleComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalDndSupportDirective, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, ElderLock, ElderLockContext, ElderLockContextDirective, ElderLockManagerService, ElderLockWarningService, ElderMasterActivationDirective, ElderMasterDetailComponent, ElderMasterDetailModule, ElderMasterDetailService, ElderMasterDirective, ElderMaxValidator, ElderMeasuresModule, ElderMinValidator, ElderMultiEntityValueAccessorUtil, ElderMultiSelectAllInitialDirective, ElderMultiSelectBase, ElderMultiSelectChipOptionsComponent, ElderMultiSelectChipsComponent, ElderMultiSelectChipsOptionsDirective, ElderMultiSelectFormField, ElderMultiTranslateHttpLoader, ElderMultipleOfUtil, ElderMultipleOfValidator, ElderNavGroupComponent, ElderNavLinkComponent, ElderNavListComponent, ElderNavModule, ElderNextFocusableDirective, ElderNumberCellDirective, ElderOfflineIndicatorComponent, ElderOverlayComponent, ElderOverlayModule, ElderOverlayOriginDirective, ElderOverlayRef, ElderOverlayTriggerDirective, ElderPaddingDirective, ElderPaneActionsComponent, ElderPaneComponent, ElderPaneContentComponent, ElderPaneHeaderComponent, ElderPaneSubtitleComponent, ElderPaneTitleComponent, ElderPanelModule, ElderPeriodInputComponent, ElderPipesModule, ElderPlugParentFormDirective, ElderPopoverComponent, ElderPopoverContentDirective, ElderPopoverTriggerDirective, ElderProgressBarComponent, ElderProgressBarModule, ElderProjectedColumnsDirective, ElderQuantityFormFieldComponent, ElderQuantityInputControlComponent, ElderQuantityPipe, ElderQuantityRangeValidator, ElderQuantityService, ElderQuantityTransformPipe, ElderQuestionDialogComponent, ElderRailNavDirective, ElderRepeatPipe, ElderRequiredDimensionsValidator, ElderRequiredIgnoreZeroValidator, ElderRequiredQuantityValidator, ElderResizableDirective, ElderResizablePaneLayoutComponent, ElderResizeBehaviorDirective, ElderResizeContainerComponent, ElderRoundPipe, ElderRouteOutletDrawerService, ElderRouterOutletService, ElderRouterService, ElderSafeUrlPipe, ElderScrollContainerComponent, ElderScrollbarScopeDirective, 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, ElderShellStaticNavSlotDirective, ElderSinglePaneWrapperComponent, ElderSingleStateCheckboxDirective, ElderStackCardDirective, ElderStaticNavToggleComponent, ElderStopEventPropagationDirective, ElderSuggestionPanelComponent, ElderTabDirective, ElderTabFocusTrapDirective, ElderTabGroupRoutingDirective, ElderTabModule, ElderTableActivationDirective, ElderTableComponent, ElderTableDropListConnectorDirective, ElderTableGroup, ElderTableModel, ElderTableModelCdkTableBinding, ElderTableModelQueryGroup, ElderTableModule, ElderTableNavigationBarDirective, ElderTableProviders, ElderTableRootDirective, ElderTableSelectionCellComponent, ElderTableSortDirective, ElderTableToolbarDirective, ElderThemeApplierDirective, ElderThemeDirective, ElderThemeModule, ElderThemePreferenceService, ElderThemeService, ElderThemeToggleComponent, ElderTileComponent, ElderTimeModule, ElderToastModule, ElderToastService, ElderTogglePanelComponent, ElderTogglePanelPrimaryDirective, ElderTogglePanelSecondaryDirective, ElderTogglePanelTriggerDirective, ElderToggleTextInputDirective, ElderToolbarColumnDirective, ElderToolbarComponent, ElderToolbarContentDirective, ElderToolbarModule, ElderToolbarService, ElderToolbarTitleComponent, ElderToolbarTitleService, ElderTouchedDirective, ElderTranslatePipe, ElderTranslateService, ElderTripleStateCheckboxDirective, ElderTruncatePipe, ElderUnitSelectDirective, ElderUnitService, ElderUrlFragment, ElderUrlFragmentModule, ElderUrlFragmentParamsService, ElderUrlFragmentSwitcherComponent, ElderValidationErrorDirective, ElderWideScrollbarDirective, ElderWordAutocompleteDirective, EntitiesChangeEvent, EntityDelta, EntityIdUtil, EntitySetPatch, ErrorUtil, ExceptionDetailCtx, FallbackValidationMessageStrategy, FileEntry, FileListingRx, FileUploadClient, Filter, FilterContext, FilterUtil, FocusUtil, FormFieldBaseComponent, GlobalDragDropService, 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, ItemModel, JsonMapUtil, KafentConfig, KafentEvent, KafentEventService, KafentEventStream, KafentEventStreamDisabled, KafentEventStreamSse, KafentEventTransport, KafentModule, KafentSseEventChannel, KafentTokenProvider, KafentTokenProviderSessionStorage, KafentTopicSse, KnownElderThemes, KnownLocaleTags, LocalDataFilter, LocalListDataSource, LocalPagedDataSource, Locale, LocalisationPickerService, MasterDetailActivationEvent, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, ModifierKeyService, ModifierKeyState, MultiModelBaseComponent, NamedColorDirective, NamedColorSelectDirective, NamedColorSelectValueComponent, NextNumberUtil, ObjectFieldMatcher, ObjectPathResolver, Objects, OnlineStatus, Page, PageRequest, Pageable, ParseUtil, Path, PathNode, PeriodBucket, PeriodDuration, PeriodFormat, PhoneFormatService, PhonePipe, ProcessIterationContext, ProcessState, PropertyPathUtil, Quantity, QueryListBinding, QuestionDialogConfig, ReactiveEventSource, ReactiveEventSourceState, ReactiveFetchEventSource, ReactiveFetchEventSourceService, ReactiveMap, ReactiveSSeMessage, RefreshingEntity, ResizeObserverDirective, RestClient, RestClientConfig, RestClientContinuable, RestClientList, RestClientPaged, RoutedTabActivationFailed, SearchInputState, SelectChipSpecUtil, SelectOptionChipSpecUtil, SelectionChangedEvent, SelectionEventSource, SelectionModel, SelectionModelPopupDirective, Sets, SimpleLocalisationPicker, SimpleSearchInput, Sort, SortUtil, StandardToastComponent, SubBar, SuggestionProvider, TargetValue, 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, ValueChangeEvent, ValueWrapper, ViewDropModelUpdateInstruction, ViewProviders, WebLocalStorage, WebSessionStorage, WebappDomainFragmentSpec, WebappDomainSpec, WebappDomainSpecService, WebappDomainSwitcherDirective, WebappUrlFragmentSwitcherConfig, WeightPipe, alphaNumStringComparator, booleanTransformFn, buildFormIntegrationProviders, coerceInterval, coerceIntervalIsoStr, createDataOptionsProvider, createElderDefaultTranslateLoader, createSelectionModel, elderChipColorLevels, elderChipColorStates, elderNamedColorRoles, elderNamedColorToken, elderNamedColors, existingOrNewElderTableModel, initSearchUrlService, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isDataViewMessageType, isElderEntityValueAccessor, isElderMultiEntityValueAccessor, isListDataSource, isLocalDataSource, isLocalListDataSource, isLocalPagedDataSource, isPagedDataSource, lazySample, lazySampleTime, naturalValueComparator, newElderTableModel, provideElderBrandAssets, provideElderDefaults, provideElderLanguage, provideElderTranslate, proxyControlContainer, registerLocale, runInZone, someSignal, themeInit };
 //# sourceMappingURL=elderbyte-ngx-starter.mjs.map