@elderbyte/ngx-starter 19.7.0 → 19.9.0

package/fesm2022/elderbyte-ngx-starter.mjs

@@ -22,7 +22,7 @@ import * as i1$2 from '@ngx-translate/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import * as i1$3 from '@angular/router';
 import { RouterModule, NavigationEnd, RouterLinkActive, RouterLink, RouterOutlet, convertToParamMap, EventType } from '@angular/router';
-import * as i4 from '@angular/material/icon';
+import * as i1$e from '@angular/material/icon';
 import { MatIcon, MatIconModule } from '@angular/material/icon';
 import { MatSlideToggle, MatSlideToggleModule } from '@angular/material/slide-toggle';
 import * as i2$1 from '@elderbyte/ngx-simple-webstorage';
@@ -64,8 +64,6 @@ import * as i2$4 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 * as i3 from '@angular/cdk/layout';
-import { Breakpoints } from '@angular/cdk/layout';
 import { Subject as Subject$1 } from 'rxjs/internal/Subject';
 import { MatProgressSpinnerModule, MatProgressSpinner } from '@angular/material/progress-spinner';
 import { trigger, state, transition, style, animate } from '@angular/animations';
@@ -73,12 +71,12 @@ import { MatSidenavContainer, MatSidenav, MatSidenavContent, MatSidenavModule }
 import * as i1$d from '@angular/material/datepicker';
 import { MatDatepickerInput, MatDatepickerToggle, MatDatepickerToggleIcon, MatDatepicker, MatDateRangeInput, MatStartDate, MatEndDate, MatDateRangePicker, DateRange, MatDatepickerModule, MatCalendar } from '@angular/material/datepicker';
 import { TemplatePortal } from '@angular/cdk/portal';
-import * as i1$e from '@angular/cdk/overlay';
+import * as i1$f from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import localeDECH from '@angular/common/locales/de-CH';
 import * as StreamSaver from 'streamsaver';
 import { MatAccordion, MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle, MatExpansionPanelDescription, MatExpansionModule } from '@angular/material/expansion';
-import * as i1$f from '@angular/material/tabs';
+import * as i1$g from '@angular/material/tabs';
 import { MatTab } from '@angular/material/tabs';
 import { fetchEventSource, EventStreamContentType } from '@microsoft/fetch-event-source';
 
@@ -8908,6 +8906,27 @@ class ElderEnumTranslationService {
                 : data;
         }));
     }
+    /**
+     * Translates the given Enum class. Loads translations of given translationPrefix
+     * and creates for each enum value a TranslatedEnumValue.
+     *
+     * @param values The strings to translate.
+     * @param translationPrefix prefix to load translations
+     * @param sort if true, data will be sorted by translations
+     * @param asc if true, data will be sorted in ascending order
+     */
+    translateStrings(values, translationPrefix, sort = true, asc = true) {
+        return this.translateService.stream(translationPrefix).pipe(map((translation) => {
+            return values.map((value) => {
+                const translated = translation[value] ?? value;
+                return new TranslatedEnumValue(value, translated);
+            });
+        }), map((data) => {
+            return sort
+                ? data.sort(ComparatorBuilder.fieldSort(asc ? 'displayValue' : '-displayValue'))
+                : data;
+        }));
+    }
     /**
      * Translates the given element. Loads the translation
      * and creates a TranslatedEnumValue.
@@ -8934,6 +8953,17 @@ class ElderEnumTranslationService {
     enumDateSource(enumClass, translationPrefix, sort = true, asc = true) {
         return DelegateListDataSource.listFetcher(() => this.translate(enumClass, translationPrefix, sort, asc), 'value', (id) => this.translateOne(translationPrefix, id));
     }
+    /**
+     * Creates a data source of translations of the given enum class.
+     *
+     * @param values Values
+     * @param translationPrefix prefix to load translations
+     * @param sort if true, data will be sorted by translations
+     * @param asc if true, data will be sorted in ascending order
+     */
+    stringArrayDateSource(values, translationPrefix, sort = true, asc = true) {
+        return DelegateListDataSource.listFetcher(() => this.translateStrings(values, translationPrefix, sort, asc), 'value', (id) => this.translateOne(translationPrefix, id));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ElderEnumTranslationService, deps: [{ token: i1$2.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ElderEnumTranslationService, providedIn: 'root' }); }
 }
@@ -15387,18 +15417,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                     type: Optional
                 }] }, { type: i2$2.CdkDrag }] });
 
-const elderChipColorNames = [
-    'white',
-    'grey',
-    'blue',
-    'turquoise',
-    'green',
-    'orange',
-    'yellow',
-    'red',
-    'purple',
-    'pink',
-];
 const elderChipColorStates = [
     'open',
     'inProgress',
@@ -19934,6 +19952,139 @@ class GridRow {
         this.cells = cells;
     }
 }
+
+class GridRowLayoutBuilder {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(dataView) {
+        this.dataView = dataView;
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    buildGridRows(items, columnCount) {
+        const rows = [];
+        const rowCount = items.length / columnCount;
+        for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
+            const rowStartIndex = rowIndex * columnCount;
+            const rowCells = items.slice(rowStartIndex, rowStartIndex + columnCount);
+            while (rowCells.length < columnCount) {
+                rowCells.push(null); // Fill up remaining
+            }
+            rows.push(new GridRow(this.rowId(rowCells), rowCells));
+        }
+        return rows;
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    rowId(cells) {
+        if (cells.length === 0) {
+            return 'empty-row';
+        }
+        else if (cells.length === 1) {
+            return this.getId(cells[0]);
+        }
+        else {
+            return cells
+                .map((cell) => {
+                if (cell) {
+                    return this.getId(cell);
+                }
+                else {
+                    return '_';
+                }
+            })
+                .join('-');
+        }
+    }
+    getId(item) {
+        return this.dataView.getId(item);
+    }
+}
+
+class ResizeObserverDirective {
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(host, destroyRef) {
+        this.host = host;
+        this.destroyRef = destroyRef;
+        this._currentDimension$ = new BehaviorSubject(undefined);
+        this._currentDimensionChange = new Subject();
+        this.observing = false;
+        this.enabled = input(true, { transform: booleanTransformFn });
+        this.dimensionChange = this._currentDimensionChange.asObservable();
+        this.currentDimension$ = this._currentDimension$.pipe(filter((e) => !!e));
+        this.resizeObserver = new ResizeObserver((entries) => {
+            this.onElementResize(entries[0]);
+        });
+        destroyRef.onDestroy(() => {
+            this.unobserve();
+        });
+        this.currentDimension = toSignal(this._currentDimension$);
+        effect(() => {
+            if (this.enabled()) {
+                this.observe();
+            }
+            else {
+                this.unobserve();
+            }
+        });
+    }
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    observe() {
+        if (!this.observing) {
+            this.resizeObserver.observe(this.host.nativeElement, {
+                box: 'content-box',
+            });
+            this.observing = true;
+        }
+    }
+    unobserve() {
+        if (this.observing) {
+            this.resizeObserver.unobserve(this.host.nativeElement);
+        }
+    }
+    onElementResize(entry) {
+        const dimensions = this.toElementDimension(entry);
+        this._currentDimension$.next(dimensions);
+        this._currentDimensionChange.next(dimensions);
+    }
+    toElementDimension(entry) {
+        return {
+            width: entry.contentRect.width,
+            height: entry.contentRect.height,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ResizeObserverDirective, deps: [{ token: i0.ElementRef }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.7", type: ResizeObserverDirective, isStandalone: true, selector: "[elderResizeObserver]", inputs: { enabled: { classPropertyName: "enabled", publicName: "enabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dimensionChange: "dimensionChange", currentDimension$: "elderResizeObserver" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ResizeObserverDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[elderResizeObserver]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.DestroyRef }], propDecorators: { dimensionChange: [{
+                type: Output
+            }], currentDimension$: [{
+                type: Output,
+                args: ['elderResizeObserver']
+            }] } });
+
 class ElderGridTileDirective {
     constructor(templateRef, viewContainer) {
         this.templateRef = templateRef;
@@ -19976,9 +20127,8 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(selectionModel, dataViewOptionsProvider, breakpointObserver) {
+    constructor(selectionModel, dataViewOptionsProvider) {
         super(selectionModel, dataViewOptionsProvider);
-        this.breakpointObserver = breakpointObserver;
         /***************************************************************************
          *                                                                         *
          * Fields                                                                  *
@@ -19986,13 +20136,6 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
          **************************************************************************/
         this.log = LoggerFactory.getLogger(this.constructor.name);
         this._staticColumnCount$ = new BehaviorSubject(4);
-        this.sizeToColumns = new Map([
-            [Breakpoints.XSmall, 1],
-            [Breakpoints.Small, 2],
-            [Breakpoints.Medium, 3],
-            [Breakpoints.Large, 4],
-            [Breakpoints.XLarge, 5],
-        ]);
         /**
          * Load next chunk after current is done
          */
@@ -20001,7 +20144,10 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
         this.TrackGridRowByIdFn = (index, row) => row.id;
         this.toolbarVisible = input(true, { transform: booleanTransformFn });
         this.footerVisible = input(true, { transform: booleanTransformFn });
+        this.containerDimensions$ = new BehaviorSubject(null);
         this.itemHeight = input(250);
+        this.itemWidth = input(300);
+        this.itemWidth$ = toObservable(this.itemWidth);
         this.tileOutlined = input(false, { transform: booleanTransformFn });
         this.responsiveColumnCount = input(true, { transform: booleanTransformFn });
         this.tiles = viewChildren(ElderTileComponent);
@@ -20010,9 +20156,7 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
         this.hiddenField = null;
         this.selectionVisible = true;
         this.pageSizeOptions = input([30, 50, 100, 150, 250]);
-        this.rowClass = computed(() => {
-            return 'cols-' + this.activeColumnCount();
-        });
+        this.rowLayoutBuilder = new GridRowLayoutBuilder(this);
         const responsiveColumn$ = this.responsiveColumn().pipe(share());
         this.activeColumnCount$ = toObservable(this.responsiveColumnCount).pipe(switchMap$1((responsive) => {
             if (responsive) {
@@ -20033,8 +20177,10 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
         super.ngOnInit();
         this.dataRows$ = combineLatest([
             this.dataContext$.pipe(filter((dc) => !!dc), switchMap$1((dc) => dc.data)),
-            this.activeColumnCount$,
-        ]).pipe(debounceTime(50), map(([data, activeColumnCount]) => this.buildGridRow(data, activeColumnCount)));
+            this.activeColumnCount$.pipe(distinctUntilChanged()),
+        ]).pipe(
+        // debounceTime(50),
+        map(([data, activeColumnCount]) => this.rowLayoutBuilder.buildGridRows(data, activeColumnCount)));
     }
     ngAfterViewInit() {
         MatTableDataContextBindingBuilder.start(this.dataContext$)
@@ -20101,6 +20247,9 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
         const tile = this.getTileForItem(item);
         return tile?.hasFocus;
     }
+    trackCellId(index, item) {
+        return item ? this.getId(item) : 'null-' + index;
+    }
     /***************************************************************************
      *                                                                         *
      * Private Methods                                                         *
@@ -20109,64 +20258,23 @@ class ElderGridComponent extends ElderDataViewBaseComponent {
     scrollTop() {
         this.virtualScrollViewPort.scrollToIndex(0, 'smooth');
     }
-    buildGridRow(nodes, columnCount) {
-        const rows = [];
-        const rowCount = nodes.length / columnCount;
-        for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
-            const rowStartIndex = rowIndex * columnCount;
-            const rowCells = nodes.slice(rowStartIndex, rowStartIndex + columnCount);
-            while (rowCells.length < columnCount) {
-                rowCells.push(null); // Fill up remaining
-            }
-            rows.push(new GridRow(this.rowId(rowCells), rowCells));
-        }
-        return rows;
-    }
-    rowId(cells) {
-        return cells
-            .map((cell) => {
-            if (cell) {
-                return this.getId(cell);
-            }
-            else {
-                return '_';
-            }
-        })
-            .join('-');
-    }
     responsiveColumn() {
-        const breakpoints = Array.from(this.sizeToColumns.keys());
-        return this.breakpointObserver.observe(breakpoints).pipe(takeUntil(this.destroy$), map((result) => {
-            let activeSize = Breakpoints.Medium;
-            for (const query of Object.keys(result.breakpoints)) {
-                if (result.breakpoints[query]) {
-                    activeSize = query;
-                    break;
-                }
-            }
-            return this.sizeToColumns.get(activeSize);
-        }), debounceTime(100), startWith(this.initialColumnCount()));
+        return this.containerDimensions$.pipe(filter((d) => !!d), combineLatestWith(this.itemWidth$.pipe(debounceTime(10))), map(([dimensions, itemWidth]) => this.calcColumnCount(dimensions, itemWidth)));
     }
-    initialColumnCount() {
-        let columnCount = 1;
-        this.sizeToColumns.forEach((cols, mqAlias) => {
-            if (this.breakpointObserver.isMatched(mqAlias)) {
-                columnCount = cols;
-            }
-        });
-        return columnCount;
+    calcColumnCount(containerDimensions, itemWidth) {
+        return Math.floor(containerDimensions.width / itemWidth);
     }
     getTileForItem(item) {
         const tiles = untracked(this.tiles);
         return tiles.find((tile) => this.getId(untracked(tile.value)) === this.getId(item));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ElderGridComponent, deps: [{ token: SelectionModel, optional: true }, { token: ElderDataViewOptionsProvider, optional: true, skipSelf: true }, { token: i3.BreakpointObserver }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ElderGridComponent, isStandalone: true, selector: "elder-grid", inputs: { toolbarVisible: { classPropertyName: "toolbarVisible", publicName: "toolbarVisible", isSignal: true, isRequired: false, transformFunction: null }, footerVisible: { classPropertyName: "footerVisible", publicName: "footerVisible", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, tileOutlined: { classPropertyName: "tileOutlined", publicName: "tileOutlined", isSignal: true, isRequired: false, transformFunction: null }, responsiveColumnCount: { classPropertyName: "responsiveColumnCount", publicName: "responsiveColumnCount", isSignal: true, isRequired: false, transformFunction: null }, availableSorts: { classPropertyName: "availableSorts", publicName: "availableSorts", isSignal: false, isRequired: false, transformFunction: null }, sortTranslationPrefix: { classPropertyName: "sortTranslationPrefix", publicName: "sortTranslationPrefix", isSignal: false, isRequired: false, transformFunction: null }, hiddenField: { classPropertyName: "hiddenField", publicName: "hiddenField", isSignal: false, isRequired: false, transformFunction: null }, selectionVisible: { classPropertyName: "selectionVisible", publicName: "selectionVisible", isSignal: false, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, tileTemplate: { classPropertyName: "tileTemplate", publicName: "tileTemplate", isSignal: false, isRequired: false, transformFunction: null }, toolbarTemplate: { classPropertyName: "toolbarTemplate", publicName: "toolbarTemplate", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, columnCount: { classPropertyName: "columnCount", publicName: "columnCount", isSignal: false, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ElderGridComponent, deps: [{ token: SelectionModel, optional: true }, { token: ElderDataViewOptionsProvider, optional: true, skipSelf: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ElderGridComponent, isStandalone: true, selector: "elder-grid", inputs: { toolbarVisible: { classPropertyName: "toolbarVisible", publicName: "toolbarVisible", isSignal: true, isRequired: false, transformFunction: null }, footerVisible: { classPropertyName: "footerVisible", publicName: "footerVisible", isSignal: true, isRequired: false, transformFunction: null }, itemHeight: { classPropertyName: "itemHeight", publicName: "itemHeight", isSignal: true, isRequired: false, transformFunction: null }, itemWidth: { classPropertyName: "itemWidth", publicName: "itemWidth", isSignal: true, isRequired: false, transformFunction: null }, tileOutlined: { classPropertyName: "tileOutlined", publicName: "tileOutlined", isSignal: true, isRequired: false, transformFunction: null }, responsiveColumnCount: { classPropertyName: "responsiveColumnCount", publicName: "responsiveColumnCount", isSignal: true, isRequired: false, transformFunction: null }, availableSorts: { classPropertyName: "availableSorts", publicName: "availableSorts", isSignal: false, isRequired: false, transformFunction: null }, sortTranslationPrefix: { classPropertyName: "sortTranslationPrefix", publicName: "sortTranslationPrefix", isSignal: false, isRequired: false, transformFunction: null }, hiddenField: { classPropertyName: "hiddenField", publicName: "hiddenField", isSignal: false, isRequired: false, transformFunction: null }, selectionVisible: { classPropertyName: "selectionVisible", publicName: "selectionVisible", isSignal: false, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, tileTemplate: { classPropertyName: "tileTemplate", publicName: "tileTemplate", isSignal: false, isRequired: false, transformFunction: null }, toolbarTemplate: { classPropertyName: "toolbarTemplate", publicName: "toolbarTemplate", isSignal: false, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: false, isRequired: false, transformFunction: null }, columnCount: { classPropertyName: "columnCount", publicName: "columnCount", isSignal: false, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: ELDER_DATA_VIEW,
                 useExisting: forwardRef(() => ElderGridComponent),
             },
-        ], queries: [{ propertyName: "tileTemplateQuery", first: true, predicate: ElderGridTileDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "toolbarTemplateQuery", first: true, predicate: ElderGridToolbarDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "tiles", predicate: ElderTileComponent, descendants: true, isSignal: true }, { propertyName: "virtualScrollViewPort", first: true, predicate: ["virtualScrollViewPort"], descendants: true, static: true }, { propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "elderContinuator", first: true, predicate: ElderContinuatorComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<div class=\"full elder-grid-component\">\n  @if (dc(); as dc) {\n    <!-- Grid Browser -->\n    <div\n      class=\"layout-col full elder-grid-container\"\n      [elderDataContextSelection]=\"dc\"\n      #dataSelection=\"elderDataContextSelection\"\n      [elderDataContextSelectionModel]=\"selectionModel\"\n    >\n      <!-- Toolbar Row -->\n      @if (toolbarVisible()) {\n        <div class=\"layout-row place-start-center flex-none elder-grid-toolbar\">\n          @if (selectionVisible) {\n            <div class=\"layout-col flex-none px-sm\">\n              <elder-selection-master-checkbox class=\"flex-none\"></elder-selection-master-checkbox>\n            </div>\n          }\n\n          <!-- Toolbar -->\n          @if (toolbarTemplate) {\n            <ng-template\n              *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: this }\"\n            ></ng-template>\n          }\n\n          @if (availableCompositeSorts && availableCompositeSorts.length > 0) {\n            <elder-composite-sort\n              class=\"flex-none\"\n              [availableSorts]=\"availableCompositeSorts\"\n              [translationPrefix]=\"sortTranslationPrefix\"\n              [elderCompositeSortDc]=\"dc\"\n            >\n            </elder-composite-sort>\n          }\n        </div>\n\n        <mat-divider></mat-divider>\n      }\n\n      <elder-data-context-state-indicator class=\"flex-none\" [dataContext]=\"dc\">\n      </elder-data-context-state-indicator>\n\n      <!-- [cdkDropListSortingDisabled]=\"true\" -->\n      <!-- cdkDropList -->\n      <cdk-virtual-scroll-viewport\n        class=\"layout-col flex elder-grid-browser\"\n        id=\"{{ scrollContainerId }}\"\n        [itemSize]=\"itemHeight()\"\n        [minBufferPx]=\"itemHeight() * 2\"\n        [maxBufferPx]=\"itemHeight() * 3\"\n        #virtualScrollViewPort\n        elderInfiniteScroll\n        [eventThrottle]=\"200\"\n        [offsetFactor]=\"2\"\n        [ignoreScrollEvent]=\"dcStatus()?.loading\"\n        [containerId]=\"scrollContainerId\"\n        [listenToHost]=\"false\"\n        (closeToEnd)=\"requestMoreDataZoned($event)\"\n      >\n        <!-- (scrolling)=\"onScrolling($event)\" -->\n\n        <div\n          *cdkVirtualFor=\"\n            let gridRow of dataRows$;\n            trackBy: TrackGridRowByIdFn;\n            templateCacheSize: 50\n          \"\n          class=\"elder-grid-tile-row\"\n          [style.height]=\"itemHeight() + 'px'\"\n          [ngClass]=\"rowClass()\"\n        >\n          @for (tile of gridRow.cells; track getId(tile)) {\n            <!-- Tile Cell -->\n            @if (isTileVisible(tile)) {\n              <elder-tile\n                class=\"elder-grid-tile\"\n                [value]=\"tile\"\n                [selectionEnabled]=\"selectionVisible\"\n                [selectionModel]=\"selectionModel\"\n                [outlined]=\"tileOutlined()\"\n                (click)=\"onItemClick(tile)\"\n                (dblclick)=\"onItemDoubleClick(tile)\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    tileTemplate || simpleTileTemplate;\n                    context: { $implicit: tile }\n                  \"\n                ></ng-container>\n              </elder-tile>\n            } @else {\n              <div class=\"elder-grid-tile-hidden\"></div>\n            }\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n\n      <mat-progress-bar\n        class=\"flex-none\"\n        [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n        [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n      >\n      </mat-progress-bar>\n\n      <!-- Footer -->\n      @if (footerVisible()) {\n        <div class=\"layout-row place-end-center gap-md flex-none elder-grid-footer\">\n          <!-- Continuable -->\n          @if (isContinuable) {\n            <elder-continuator\n              [loadedCount]=\"viewData()?.length\"\n              [total]=\"total()\"\n              [canLoadMore]=\"canLoadMore()\"\n              [chunkSizeOptions]=\"pageSizeOptions()\"\n              [chunkSize]=\"currentChunkSize()\"\n              (loadMoreRequested)=\"dataSnapshot.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      }\n    </div>\n  }\n</div>\n\n<ng-template #simpleTileTemplate let-tile>\n  @if (tile) {\n    <div class=\"layout-col place-center-center flex\" style=\"background-color: lightblue\">\n      <p class=\"noselect\">Tile: {{ tile }}</p>\n    </div>\n  }\n</ng-template>\n", styles: [".elder-grid-tile{width:100%;height:100%;cursor:pointer;overflow:hidden}.elder-grid-tile-row{display:grid;align-items:start;justify-items:start;overflow:hidden;padding:8px 16px;column-gap:16px}.elder-grid-tile-row:first-child{padding-top:16px}.elder-grid-tile-row.cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.elder-grid-tile-row.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.elder-grid-tile-row.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.elder-grid-tile-row.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.elder-grid-tile-row.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.elder-grid-tile-row.cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.elder-grid-tile-row.cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.elder-grid-tile-hidden{flex:0 1 100%;margin:8px;width:100%;height:100%}.elder-grid-container{background-color:var(--elder-grid-background-color)}.elder-grid-flat{border:var(--elder-border-light)}.elder-grid-toolbar{min-height:44px}.elder-grid-footer{min-height:var(--elder-data-element-footer-height)}\n"], dependencies: [{ kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: ElderCompositeSortComponent, selector: "elder-composite-sort", inputs: ["availableSorts", "sorts", "translationPrefix"], outputs: ["sortsChange"] }, { kind: "directive", type: ElderCompositeSortDcDirective, selector: "[elderCompositeSortDc]", inputs: ["elderCompositeSortDc"] }, { kind: "component", type: ElderTileComponent, selector: "elder-tile", inputs: ["value", "selectionEnabled", "selectionModel", "interactionMode", "outlined"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ElderContinuatorComponent, selector: "elder-continuator", inputs: ["loadedCount", "total", "canLoadMore", "chunkSizeOptions", "chunkSize"], outputs: ["loadMoreRequested", "chunkSizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], queries: [{ propertyName: "tileTemplateQuery", first: true, predicate: ElderGridTileDirective, descendants: true, read: TemplateRef, static: true }, { propertyName: "toolbarTemplateQuery", first: true, predicate: ElderGridToolbarDirective, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "tiles", predicate: ElderTileComponent, descendants: true, isSignal: true }, { propertyName: "virtualScrollViewPort", first: true, predicate: ["virtualScrollViewPort"], descendants: true, static: true }, { propertyName: "matPaginator", first: true, predicate: MatPaginator, descendants: true }, { propertyName: "elderContinuator", first: true, predicate: ElderContinuatorComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<div class=\"full elder-grid-component\">\n  @if (dc(); as dc) {\n    <!-- Grid Browser -->\n    <div\n      class=\"layout-col full elder-grid-container\"\n      [elderDataContextSelection]=\"dc\"\n      #dataSelection=\"elderDataContextSelection\"\n      [elderDataContextSelectionModel]=\"selectionModel\"\n    >\n      <!-- Toolbar Row -->\n      @if (toolbarVisible()) {\n        <div class=\"layout-row place-start-center flex-none elder-grid-toolbar\">\n          @if (selectionVisible) {\n            <div class=\"layout-col flex-none px-sm\">\n              <elder-selection-master-checkbox class=\"flex-none\"></elder-selection-master-checkbox>\n            </div>\n          }\n\n          <!-- Toolbar -->\n          @if (toolbarTemplate) {\n            <ng-template\n              *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: this }\"\n            ></ng-template>\n          }\n\n          @if (availableCompositeSorts && availableCompositeSorts.length > 0) {\n            <elder-composite-sort\n              class=\"flex-none\"\n              [availableSorts]=\"availableCompositeSorts\"\n              [translationPrefix]=\"sortTranslationPrefix\"\n              [elderCompositeSortDc]=\"dc\"\n            >\n            </elder-composite-sort>\n          }\n        </div>\n\n        <mat-divider></mat-divider>\n      }\n\n      <elder-data-context-state-indicator class=\"flex-none\" [dataContext]=\"dc\">\n      </elder-data-context-state-indicator>\n\n      <!-- [cdkDropListSortingDisabled]=\"true\" -->\n      <!-- cdkDropList -->\n      <cdk-virtual-scroll-viewport\n        class=\"layout-col flex elder-grid-browser\"\n        id=\"{{ scrollContainerId }}\"\n        [itemSize]=\"itemHeight()\"\n        [minBufferPx]=\"itemHeight() * 2\"\n        [maxBufferPx]=\"itemHeight() * 3\"\n        #virtualScrollViewPort\n        elderInfiniteScroll\n        [eventThrottle]=\"200\"\n        [offsetFactor]=\"2\"\n        [ignoreScrollEvent]=\"dcStatus()?.loading\"\n        [containerId]=\"scrollContainerId\"\n        [listenToHost]=\"false\"\n        (closeToEnd)=\"requestMoreDataZoned($event)\"\n        (elderResizeObserver)=\"containerDimensions$.next($event)\"\n      >\n        <!-- (scrolling)=\"onScrolling($event)\" -->\n\n        <div\n          *cdkVirtualFor=\"\n            let gridRow of dataRows$;\n            trackBy: TrackGridRowByIdFn;\n            templateCacheSize: 50\n          \"\n          class=\"elder-grid-tile-row\"\n          [style.height]=\"itemHeight() + 'px'\"\n          [style.--elder-grid-column-count]=\"activeColumnCount()\"\n        >\n          @for (tile of gridRow.cells; track trackCellId($index, tile)) {\n            <!-- Tile Cell -->\n            @if (isTileVisible(tile)) {\n              <elder-tile\n                class=\"elder-grid-tile\"\n                [value]=\"tile\"\n                [selectionEnabled]=\"selectionVisible\"\n                [selectionModel]=\"selectionModel\"\n                [outlined]=\"tileOutlined()\"\n                (click)=\"onItemClick(tile)\"\n                (dblclick)=\"onItemDoubleClick(tile)\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    tileTemplate || simpleTileTemplate;\n                    context: { $implicit: tile }\n                  \"\n                ></ng-container>\n              </elder-tile>\n            } @else {\n              <div class=\"elder-grid-tile-hidden\"></div>\n            }\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n\n      <mat-progress-bar\n        class=\"flex-none\"\n        [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n        [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n      >\n      </mat-progress-bar>\n\n      <!-- Footer -->\n      @if (footerVisible()) {\n        <div class=\"layout-row place-end-center gap-md flex-none elder-grid-footer\">\n          <!-- Continuable -->\n          @if (isContinuable) {\n            <elder-continuator\n              [loadedCount]=\"viewData()?.length\"\n              [total]=\"total()\"\n              [canLoadMore]=\"canLoadMore()\"\n              [chunkSizeOptions]=\"pageSizeOptions()\"\n              [chunkSize]=\"currentChunkSize()\"\n              (loadMoreRequested)=\"dataSnapshot.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      }\n    </div>\n  }\n</div>\n\n<ng-template #simpleTileTemplate let-tile>\n  @if (tile) {\n    <div class=\"layout-col place-center-center flex\" style=\"background-color: lightblue\">\n      <p class=\"noselect\">Tile: {{ tile }}</p>\n    </div>\n  }\n</ng-template>\n", styles: [".elder-grid-tile{width:100%;height:100%;cursor:pointer;overflow:hidden}.elder-grid-tile-row{display:grid;align-items:start;justify-items:start;overflow:hidden;--elder-grid-column-count: 1;padding:8px 16px;grid-template-columns:repeat(var(--elder-grid-column-count),minmax(0,1fr));column-gap:16px}.elder-grid-tile-row:first-child{padding-top:16px}.elder-grid-tile-hidden{flex:0 1 100%;margin:8px;width:100%;height:100%}.elder-grid-container{background-color:var(--elder-grid-background-color)}.elder-grid-flat{border:var(--elder-border-light)}.elder-grid-toolbar{min-height:44px}.elder-grid-footer{min-height:var(--elder-data-element-footer-height)}\n"], dependencies: [{ kind: "directive", type: DataContextSelectionDirective, selector: "[elderDataContextSelection]", inputs: ["elderDataContextSelectionModel", "elderDataContextSelection"], exportAs: ["elderDataContextSelection"] }, { kind: "component", type: ElderSelectionMasterCheckboxComponent, selector: "elder-selection-master-checkbox" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "component", type: DataContextStateIndicatorComponent, selector: "elder-data-context-state-indicator", inputs: ["dataContext"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: ElderInfiniteScrollDirective, selector: "[elderInfiniteScroll]", inputs: ["listenToHost", "eventThrottle", "offsetFactor", "ignoreScrollEvent", "containerId", "scrollContainer"], outputs: ["closeToEnd", "scrolling"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: ElderCompositeSortComponent, selector: "elder-composite-sort", inputs: ["availableSorts", "sorts", "translationPrefix"], outputs: ["sortsChange"] }, { kind: "directive", type: ElderCompositeSortDcDirective, selector: "[elderCompositeSortDc]", inputs: ["elderCompositeSortDc"] }, { kind: "component", type: ElderTileComponent, selector: "elder-tile", inputs: ["value", "selectionEnabled", "selectionModel", "interactionMode", "outlined"] }, { kind: "component", type: ElderContinuatorComponent, selector: "elder-continuator", inputs: ["loadedCount", "total", "canLoadMore", "chunkSizeOptions", "chunkSize"], outputs: ["loadMoreRequested", "chunkSizeChange"] }, { kind: "directive", type: ResizeObserverDirective, selector: "[elderResizeObserver]", inputs: ["enabled"], outputs: ["dimensionChange", "elderResizeObserver"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ElderGridComponent, decorators: [{
             type: Component,
@@ -20192,14 +20300,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         ElderTileComponent,
                         NgClass,
                         ElderContinuatorComponent,
-                    ], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<div class=\"full elder-grid-component\">\n  @if (dc(); as dc) {\n    <!-- Grid Browser -->\n    <div\n      class=\"layout-col full elder-grid-container\"\n      [elderDataContextSelection]=\"dc\"\n      #dataSelection=\"elderDataContextSelection\"\n      [elderDataContextSelectionModel]=\"selectionModel\"\n    >\n      <!-- Toolbar Row -->\n      @if (toolbarVisible()) {\n        <div class=\"layout-row place-start-center flex-none elder-grid-toolbar\">\n          @if (selectionVisible) {\n            <div class=\"layout-col flex-none px-sm\">\n              <elder-selection-master-checkbox class=\"flex-none\"></elder-selection-master-checkbox>\n            </div>\n          }\n\n          <!-- Toolbar -->\n          @if (toolbarTemplate) {\n            <ng-template\n              *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: this }\"\n            ></ng-template>\n          }\n\n          @if (availableCompositeSorts && availableCompositeSorts.length > 0) {\n            <elder-composite-sort\n              class=\"flex-none\"\n              [availableSorts]=\"availableCompositeSorts\"\n              [translationPrefix]=\"sortTranslationPrefix\"\n              [elderCompositeSortDc]=\"dc\"\n            >\n            </elder-composite-sort>\n          }\n        </div>\n\n        <mat-divider></mat-divider>\n      }\n\n      <elder-data-context-state-indicator class=\"flex-none\" [dataContext]=\"dc\">\n      </elder-data-context-state-indicator>\n\n      <!-- [cdkDropListSortingDisabled]=\"true\" -->\n      <!-- cdkDropList -->\n      <cdk-virtual-scroll-viewport\n        class=\"layout-col flex elder-grid-browser\"\n        id=\"{{ scrollContainerId }}\"\n        [itemSize]=\"itemHeight()\"\n        [minBufferPx]=\"itemHeight() * 2\"\n        [maxBufferPx]=\"itemHeight() * 3\"\n        #virtualScrollViewPort\n        elderInfiniteScroll\n        [eventThrottle]=\"200\"\n        [offsetFactor]=\"2\"\n        [ignoreScrollEvent]=\"dcStatus()?.loading\"\n        [containerId]=\"scrollContainerId\"\n        [listenToHost]=\"false\"\n        (closeToEnd)=\"requestMoreDataZoned($event)\"\n      >\n        <!-- (scrolling)=\"onScrolling($event)\" -->\n\n        <div\n          *cdkVirtualFor=\"\n            let gridRow of dataRows$;\n            trackBy: TrackGridRowByIdFn;\n            templateCacheSize: 50\n          \"\n          class=\"elder-grid-tile-row\"\n          [style.height]=\"itemHeight() + 'px'\"\n          [ngClass]=\"rowClass()\"\n        >\n          @for (tile of gridRow.cells; track getId(tile)) {\n            <!-- Tile Cell -->\n            @if (isTileVisible(tile)) {\n              <elder-tile\n                class=\"elder-grid-tile\"\n                [value]=\"tile\"\n                [selectionEnabled]=\"selectionVisible\"\n                [selectionModel]=\"selectionModel\"\n                [outlined]=\"tileOutlined()\"\n                (click)=\"onItemClick(tile)\"\n                (dblclick)=\"onItemDoubleClick(tile)\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    tileTemplate || simpleTileTemplate;\n                    context: { $implicit: tile }\n                  \"\n                ></ng-container>\n              </elder-tile>\n            } @else {\n              <div class=\"elder-grid-tile-hidden\"></div>\n            }\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n\n      <mat-progress-bar\n        class=\"flex-none\"\n        [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n        [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n      >\n      </mat-progress-bar>\n\n      <!-- Footer -->\n      @if (footerVisible()) {\n        <div class=\"layout-row place-end-center gap-md flex-none elder-grid-footer\">\n          <!-- Continuable -->\n          @if (isContinuable) {\n            <elder-continuator\n              [loadedCount]=\"viewData()?.length\"\n              [total]=\"total()\"\n              [canLoadMore]=\"canLoadMore()\"\n              [chunkSizeOptions]=\"pageSizeOptions()\"\n              [chunkSize]=\"currentChunkSize()\"\n              (loadMoreRequested)=\"dataSnapshot.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      }\n    </div>\n  }\n</div>\n\n<ng-template #simpleTileTemplate let-tile>\n  @if (tile) {\n    <div class=\"layout-col place-center-center flex\" style=\"background-color: lightblue\">\n      <p class=\"noselect\">Tile: {{ tile }}</p>\n    </div>\n  }\n</ng-template>\n", styles: [".elder-grid-tile{width:100%;height:100%;cursor:pointer;overflow:hidden}.elder-grid-tile-row{display:grid;align-items:start;justify-items:start;overflow:hidden;padding:8px 16px;column-gap:16px}.elder-grid-tile-row:first-child{padding-top:16px}.elder-grid-tile-row.cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.elder-grid-tile-row.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.elder-grid-tile-row.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.elder-grid-tile-row.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.elder-grid-tile-row.cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.elder-grid-tile-row.cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.elder-grid-tile-row.cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.elder-grid-tile-hidden{flex:0 1 100%;margin:8px;width:100%;height:100%}.elder-grid-container{background-color:var(--elder-grid-background-color)}.elder-grid-flat{border:var(--elder-border-light)}.elder-grid-toolbar{min-height:44px}.elder-grid-footer{min-height:var(--elder-data-element-footer-height)}\n"] }]
+                        ResizeObserverDirective,
+                    ], template: "<!-- eslint-disable @angular-eslint/template/interactive-supports-focus -->\n<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\n<div class=\"full elder-grid-component\">\n  @if (dc(); as dc) {\n    <!-- Grid Browser -->\n    <div\n      class=\"layout-col full elder-grid-container\"\n      [elderDataContextSelection]=\"dc\"\n      #dataSelection=\"elderDataContextSelection\"\n      [elderDataContextSelectionModel]=\"selectionModel\"\n    >\n      <!-- Toolbar Row -->\n      @if (toolbarVisible()) {\n        <div class=\"layout-row place-start-center flex-none elder-grid-toolbar\">\n          @if (selectionVisible) {\n            <div class=\"layout-col flex-none px-sm\">\n              <elder-selection-master-checkbox class=\"flex-none\"></elder-selection-master-checkbox>\n            </div>\n          }\n\n          <!-- Toolbar -->\n          @if (toolbarTemplate) {\n            <ng-template\n              *ngTemplateOutlet=\"toolbarTemplate; context: { $implicit: this }\"\n            ></ng-template>\n          }\n\n          @if (availableCompositeSorts && availableCompositeSorts.length > 0) {\n            <elder-composite-sort\n              class=\"flex-none\"\n              [availableSorts]=\"availableCompositeSorts\"\n              [translationPrefix]=\"sortTranslationPrefix\"\n              [elderCompositeSortDc]=\"dc\"\n            >\n            </elder-composite-sort>\n          }\n        </div>\n\n        <mat-divider></mat-divider>\n      }\n\n      <elder-data-context-state-indicator class=\"flex-none\" [dataContext]=\"dc\">\n      </elder-data-context-state-indicator>\n\n      <!-- [cdkDropListSortingDisabled]=\"true\" -->\n      <!-- cdkDropList -->\n      <cdk-virtual-scroll-viewport\n        class=\"layout-col flex elder-grid-browser\"\n        id=\"{{ scrollContainerId }}\"\n        [itemSize]=\"itemHeight()\"\n        [minBufferPx]=\"itemHeight() * 2\"\n        [maxBufferPx]=\"itemHeight() * 3\"\n        #virtualScrollViewPort\n        elderInfiniteScroll\n        [eventThrottle]=\"200\"\n        [offsetFactor]=\"2\"\n        [ignoreScrollEvent]=\"dcStatus()?.loading\"\n        [containerId]=\"scrollContainerId\"\n        [listenToHost]=\"false\"\n        (closeToEnd)=\"requestMoreDataZoned($event)\"\n        (elderResizeObserver)=\"containerDimensions$.next($event)\"\n      >\n        <!-- (scrolling)=\"onScrolling($event)\" -->\n\n        <div\n          *cdkVirtualFor=\"\n            let gridRow of dataRows$;\n            trackBy: TrackGridRowByIdFn;\n            templateCacheSize: 50\n          \"\n          class=\"elder-grid-tile-row\"\n          [style.height]=\"itemHeight() + 'px'\"\n          [style.--elder-grid-column-count]=\"activeColumnCount()\"\n        >\n          @for (tile of gridRow.cells; track trackCellId($index, tile)) {\n            <!-- Tile Cell -->\n            @if (isTileVisible(tile)) {\n              <elder-tile\n                class=\"elder-grid-tile\"\n                [value]=\"tile\"\n                [selectionEnabled]=\"selectionVisible\"\n                [selectionModel]=\"selectionModel\"\n                [outlined]=\"tileOutlined()\"\n                (click)=\"onItemClick(tile)\"\n                (dblclick)=\"onItemDoubleClick(tile)\"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    tileTemplate || simpleTileTemplate;\n                    context: { $implicit: tile }\n                  \"\n                ></ng-container>\n              </elder-tile>\n            } @else {\n              <div class=\"elder-grid-tile-hidden\"></div>\n            }\n          }\n        </div>\n      </cdk-virtual-scroll-viewport>\n\n      <mat-progress-bar\n        class=\"flex-none\"\n        [mode]=\"dcStatus()?.loading ? 'indeterminate' : 'determinate'\"\n        [color]=\"dcStatus()?.hasError ? 'warn' : 'primary'\"\n      >\n      </mat-progress-bar>\n\n      <!-- Footer -->\n      @if (footerVisible()) {\n        <div class=\"layout-row place-end-center gap-md flex-none elder-grid-footer\">\n          <!-- Continuable -->\n          @if (isContinuable) {\n            <elder-continuator\n              [loadedCount]=\"viewData()?.length\"\n              [total]=\"total()\"\n              [canLoadMore]=\"canLoadMore()\"\n              [chunkSizeOptions]=\"pageSizeOptions()\"\n              [chunkSize]=\"currentChunkSize()\"\n              (loadMoreRequested)=\"dataSnapshot.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      }\n    </div>\n  }\n</div>\n\n<ng-template #simpleTileTemplate let-tile>\n  @if (tile) {\n    <div class=\"layout-col place-center-center flex\" style=\"background-color: lightblue\">\n      <p class=\"noselect\">Tile: {{ tile }}</p>\n    </div>\n  }\n</ng-template>\n", styles: [".elder-grid-tile{width:100%;height:100%;cursor:pointer;overflow:hidden}.elder-grid-tile-row{display:grid;align-items:start;justify-items:start;overflow:hidden;--elder-grid-column-count: 1;padding:8px 16px;grid-template-columns:repeat(var(--elder-grid-column-count),minmax(0,1fr));column-gap:16px}.elder-grid-tile-row:first-child{padding-top:16px}.elder-grid-tile-hidden{flex:0 1 100%;margin:8px;width:100%;height:100%}.elder-grid-container{background-color:var(--elder-grid-background-color)}.elder-grid-flat{border:var(--elder-border-light)}.elder-grid-toolbar{min-height:44px}.elder-grid-footer{min-height:var(--elder-data-element-footer-height)}\n"] }]
         }], ctorParameters: () => [{ type: SelectionModel, decorators: [{
                     type: Optional
                 }] }, { type: ElderDataViewOptionsProvider, decorators: [{
                     type: Optional
                 }, {
                     type: SkipSelf
-                }] }, { type: i3.BreakpointObserver }], propDecorators: { tileTemplateQuery: [{
+                }] }], propDecorators: { tileTemplateQuery: [{
                 type: ContentChild,
                 args: [ElderGridTileDirective, { read: TemplateRef, static: true }]
             }], virtualScrollViewPort: [{
@@ -31199,7 +31308,7 @@ class ElderIntervalPickerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ElderIntervalPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ElderIntervalPickerComponent, isStandalone: true, selector: "elder-interval-picker", inputs: { emitType: { classPropertyName: "emitType", publicName: "emitType", isSignal: true, isRequired: false, transformFunction: null }, autoEmitMode: { classPropertyName: "autoEmitMode", publicName: "autoEmitMode", isSignal: true, isRequired: false, transformFunction: null }, intervalInputMode: { classPropertyName: "intervalInputMode", publicName: "intervalInputMode", isSignal: true, isRequired: false, transformFunction: null }, showAnchor: { classPropertyName: "showAnchor", publicName: "showAnchor", isSignal: true, isRequired: false, transformFunction: null }, anchorReadOnly: { classPropertyName: "anchorReadOnly", publicName: "anchorReadOnly", isSignal: true, isRequired: false, transformFunction: null }, externalAnchorDateTime: { classPropertyName: "externalAnchorDateTime", publicName: "externalAnchorDateTime", isSignal: true, isRequired: false, transformFunction: null }, externalInterval: { classPropertyName: "externalInterval", publicName: "externalInterval", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { intervalChange: "intervalChange" }, providers: [{ provide: DateAdapter, useClass: CustomDateAdapter }], viewQueries: [{ propertyName: "calendarStart", first: true, predicate: ["rangeCalendarStart"], descendants: true }, { propertyName: "calendarEnd", first: true, predicate: ["rangeCalendarEnd"], descendants: true }, { propertyName: "calendarStartElRef", first: true, predicate: ["rangeCalendarStart"], descendants: true, read: ElementRef }, { propertyName: "calendarEndElRef", first: true, predicate: ["rangeCalendarEnd"], descendants: true, read: ElementRef }, { propertyName: "startDateInput", first: true, predicate: ["startDateInput"], descendants: true }, { propertyName: "endDateInput", first: true, predicate: ["endDateInput"], descendants: true }], ngImport: i0, template: "<div class=\"interval-picker-component p-md layout-col gap-xxl\">\n  <div class=\"layout-row gap-xxl place-between-start\" style=\"gap: 5%\">\n    <div class=\"layout-col gap-md pt-xs\">\n      <div class=\"layout-col\">\n        <div class=\"layout-row select-buttons-container gap-sm\">\n          <div class=\"layout-col gap-xs place-start-stretch\">\n            <button mat-button type=\"button\" (click)=\"controller.select.selectCurrentDay()\">\n              @if (presenter.isFixedAnchorDateSet()) {\n                {{ 'intervalPicker.anchorDay' | translate }}\n              } @else {\n                {{ 'intervalPicker.today' | translate }}\n              }\n            </button>\n            <button mat-button type=\"button\" (click)=\"controller.select.selectYesterday()\">\n              @if (presenter.isFixedAnchorDateSet()) {\n                {{ 'intervalPicker.last' | translate }} 1 {{ 'intervalPicker.day' | translate }}\n              } @else {\n                {{ 'intervalPicker.yesterday' | translate }}\n              }\n            </button>\n            <button\n              mat-button\n              type=\"button\"\n              (click)=\"controller.select.selectLastSevenDaysIncludingToday()\"\n            >\n              {{ 'intervalPicker.last' | translate }} 7\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            <button\n              mat-button\n              type=\"button\"\n              (click)=\"controller.select.selectLastThirtyDaysIncludingToday()\"\n            >\n              {{ 'intervalPicker.last' | translate }} 30\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            <button\n              mat-button\n              type=\"button\"\n              (click)=\"controller.select.selectLast365daysIncludingToday()\"\n            >\n              {{ 'intervalPicker.last' | translate }} 365\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            @if (intervalInputMode() === 'date-time-range') {\n              <div class=\"pt-sm\"></div>\n              <button mat-button type=\"button\" (click)=\"controller.select.selectLastFiveMinutes()\">\n                {{ 'intervalPicker.last' | translate }} 5\n                {{ 'intervalPicker.minutes' | translate }}\n              </button>\n              <button mat-button type=\"button\" (click)=\"controller.select.selectLastHour()\">\n                {{ 'intervalPicker.last' | translate }} {{ 'intervalPicker.hour' | translate }}\n              </button>\n              <button mat-button type=\"button\" (click)=\"controller.select.selectLast24Hours()\">\n                {{ 'intervalPicker.last' | translate }} 24\n                {{ 'intervalPicker.hours' | translate }}\n              </button>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"layout-col\">\n      <!-- smart shift -->\n      <div class=\"layout-row place-around-center\">\n        <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"controller.shift.smartShift(-1)\"\n          [disabled]=\"!presenter.isValidIntervalSet()\"\n        >\n          <mat-icon>keyboard_double_arrow_left</mat-icon>\n        </button>\n        <span>{{ presenter.smartShiftMessage() }}</span>\n        <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"controller.shift.smartShift(1)\"\n          [disabled]=\"!presenter.isValidIntervalSet()\"\n        >\n          <mat-icon>keyboard_double_arrow_right</mat-icon>\n        </button>\n      </div>\n      <!-- calendars and input controls -->\n      <div\n        class=\"layout-row place-around-center\"\n        style=\"align-items: flex-start; min-height: 280px\"\n      >\n        <mat-calendar\n          #rangeCalendarStart\n          style=\"width: 210px; max-width: 100%\"\n          [selected]=\"presenter.dateRangeForCalendar()\"\n          (selectedChange)=\"controller.calendar.setStartDateFromJSDate($event)\"\n          [maxDate]=\"presenter.endDateTimeAsJSDate()\"\n          [dateClass]=\"presenter.calendarAnchorDateCssClassFn\"\n        >\n        </mat-calendar>\n        <mat-calendar\n          #rangeCalendarEnd\n          style=\"width: 210px; max-width: 100%\"\n          [selected]=\"presenter.dateRangeForCalendar()\"\n          (selectedChange)=\"controller.calendar.setEndDateFromJSDate($event)\"\n          [minDate]=\"presenter.startDateTimeAsJSDate()\"\n          [dateClass]=\"presenter.calendarAnchorDateCssClassFn\"\n        >\n        </mat-calendar>\n      </div>\n      <div class=\"layout-row place-around-center gap-xl pt-sm\">\n        <div class=\"layout-row place-around-center\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.startDate' | translate }}</mat-label>\n            <input\n              #startDateInput\n              name=\"startDateInput\"\n              matInput\n              type=\"date\"\n              [ngModel]=\"presenter.startDateHtmlString()\"\n              (ngModelChange)=\"controller.form.setStartDateFromString($event)\"\n            />\n          </mat-form-field>\n        </div>\n        <div class=\"layout-row place-around-center\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.endDate' | translate }}</mat-label>\n            <input\n              #endDateInput\n              name=\"endDateInput\"\n              matInput\n              type=\"date\"\n              [ngModel]=\"presenter.endDateHtmlString()\"\n              (ngModelChange)=\"controller.form.setEndDateFromString($event)\"\n            />\n          </mat-form-field>\n        </div>\n      </div>\n      @if (intervalInputMode() === 'date-time-range') {\n        <div class=\"layout-row place-around-center gap-xl pt-sm\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.startTime' | translate }}</mat-label>\n            <input\n              name=\"startTimeInput\"\n              matInput\n              type=\"time\"\n              #startTimeControl=\"ngModel\"\n              step=\"1\"\n              [ngModel]=\"presenter.startTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setStartTimeFromString($event)\"\n            />\n            <button\n              type=\"button\"\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.clearStartTime()\"\n              [disabled]=\"!presenter.isStartTimeSetAndNotMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.endTime' | translate }}</mat-label>\n            <input\n              name=\"endTimeInput\"\n              matInput\n              type=\"time\"\n              #endTimeControl=\"ngModel\"\n              step=\"1\"\n              [ngModel]=\"presenter.endTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setEndTimeFromString($event)\"\n            />\n            <button\n              type=\"button\"\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.clearEndTime()\"\n              [disabled]=\"!presenter.isEndTimeSetAndNotMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n        </div>\n      }\n      <br />\n    </div>\n    <div class=\"pt-xs\" style=\"width: 25%\">\n      <div class=\"layout-col gap-lg\">\n        <div class=\"layout-col gap-xs place-start-start\">\n          <!-- select current -->\n          <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentWeek()\">\n            {{ 'intervalPicker.currentPeriod.week' | translate }}\n          </button>\n          <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentMonth()\">\n            {{ 'intervalPicker.currentPeriod.month' | translate }}\n          </button>\n          <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentQuarter()\">\n            {{ 'intervalPicker.currentPeriod.quarter' | translate }}\n          </button>\n          <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentYear()\">\n            {{ 'intervalPicker.currentPeriod.year' | translate }}\n          </button>\n        </div>\n        <div class=\"fixed-shifts-container\">\n          <div class=\"layout-col place-start-stretch\">\n            <div class=\"layout-row place-between-center\">\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftDay(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.day' | translate }}</span>\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftDay(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n            <div class=\"layout-row place-between-center\">\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftMonth(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.month' | translate }}</span>\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftMonth(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n            <div class=\"layout-row place-between-center\">\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftYear(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.year' | translate }}</span>\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftYear(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n\n            @if (true) {\n              <!-- shift minute -->\n              <div class=\"layout-row place-between-center\">\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftMinute(-1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_left</mat-icon>\n                </button>\n                <span>{{ 'intervalPicker.minute' | translate }}</span>\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftMinute(1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_right</mat-icon>\n                </button>\n              </div>\n              <!-- shift hour -->\n              <div class=\"layout-row place-between-center\">\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftHour(-1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_left</mat-icon>\n                </button>\n                <span>{{ 'intervalPicker.hour' | translate }}</span>\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftHour(1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_right</mat-icon>\n                </button>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"layout-row place-between-center gap-xxl pt-sm\">\n  <div>\n    @if (showAnchor()) {\n      <div class=\"layout-row flex-none gap-md\">\n        <mat-menu #anchorMenu=\"matMenu\">\n          @if (presenter.startDateHtmlString()) {\n            <button\n              type=\"button\"\n              mat-menu-item\n              (click)=\"controller.anchor.setFixedAnchorPointToEndDateTime()\"\n              [disabled]=\"!presenter.startDateHtmlString()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">login</mat-icon>\n              <span>{{ 'intervalPicker.endDate' | translate }}</span>\n            </button>\n          }\n          @if (presenter.endDateHtmlString()) {\n            <button\n              type=\"button\"\n              mat-menu-item\n              (click)=\"controller.anchor.setFixedAnchorPointToStartDateTime()\"\n              [disabled]=\"!presenter.endDateHtmlString()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">logout</mat-icon>\n              <span>{{ 'intervalPicker.startDate' | translate }}</span>\n            </button>\n          }\n          @if (presenter.isFixedAnchorDateSet()) {\n            <button\n              type=\"button\"\n              mat-menu-item\n              (click)=\"controller.anchor.resetAnchor()\"\n              [disabled]=\"!presenter.isFixedAnchorDateSet() || anchorReadOnly()\"\n            >\n              <mat-icon>close</mat-icon>\n              <span>{{ 'intervalPicker.clear' | translate }}</span>\n            </button>\n          }\n        </mat-menu>\n\n        <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n          <mat-label>{{ 'intervalPicker.anchorDate' | translate }}</mat-label>\n          <input\n            #startDateInput\n            name=\"anchorDateInput\"\n            matInput\n            type=\"date\"\n            [ngModel]=\"presenter.anchorDateHtmlString()\"\n            (ngModelChange)=\"controller.form.setAnchorDateFromString($event)\"\n            [readonly]=\"anchorReadOnly()\"\n          />\n          @if (!anchorReadOnly()) {\n            <button\n              type=\"button\"\n              mat-icon-button\n              matSuffix\n              [matMenuTriggerFor]=\"anchorMenu\"\n              [disabled]=\"presenter.isAnchorMenuDisabled()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">more_horiz</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n        @if (intervalInputMode() === 'date-time-range') {\n          <mat-form-field class=\"input-control-container-short\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.anchorTime' | translate }}</mat-label>\n            <input\n              matInput\n              name=\"anchorTimeInput\"\n              type=\"time\"\n              #anchorTimeControl=\"ngModel\"\n              step=\"1\"\n              [readonly]=\"anchorReadOnly()\"\n              [ngModel]=\"presenter.anchorTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setAnchorTimeFromString($event)\"\n            />\n            <button\n              type=\"button\"\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.anchor.resetAnchorTime()\"\n              [disabled]=\"anchorReadOnly() || presenter.isAnchorTimeMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n        }\n      </div>\n    }\n  </div>\n  <!-- result interval -->\n  <div class=\"layout-col place-center-center\">\n    <div class=\"date-interval mat-caption pt-xs\">\n      @if (presenter.startDateTimeAsJSDate()) {\n        {{ presenter.startDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n      } @else {\n        {{ 'intervalPicker.startDateNotSet' | translate }}\n      }\n      <span> - </span>\n      @if (presenter.endDateTimeAsJSDate()) {\n        {{ presenter.endDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n      } @else {\n        {{ 'intervalPicker.endDateNotSet' | translate }}\n      }\n    </div>\n    <div>\n      <span class=\"mat-caption\">{{ presenter.deltaHumanReadable() || '&nbsp;' }}</span>\n    </div>\n  </div>\n  <div class=\"layout-row gap-lg\">\n    <button\n      type=\"button\"\n      mat-flat-button\n      color=\"primary\"\n      (click)=\"controller.clearInterval()\"\n      [disabled]=\"!presenter.isValidIntervalSet()\"\n    >\n      {{ 'intervalPicker.clear' | translate }}\n    </button>\n\n    @if (!this.autoEmitMode()) {\n      <button type=\"button\" color=\"primary\" mat-flat-button (click)=\"controller.manualEmit()\">\n        {{ 'actions.ok' | translate }}\n      </button>\n    }\n  </div>\n</div>\n", styles: [".interval-picker-component{min-width:840px;max-width:100%}.fixed-shifts-container{max-width:160px}.input-control-container{width:192px;max-width:100%}.input-control-container-short{width:140px;max-width:100%}.select-buttons-container button{white-space:nowrap;text-align:left;justify-content:flex-start}::ng-deep .interval-picker-component .mat-calendar-body-cell.elder-custom-anchor-date .mat-calendar-body-cell-content{border-radius:50%;background-color:#def;background-color:#b4d2ebbf}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$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$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ElderIntervalPickerComponent, isStandalone: true, selector: "elder-interval-picker", inputs: { emitType: { classPropertyName: "emitType", publicName: "emitType", isSignal: true, isRequired: false, transformFunction: null }, autoEmitMode: { classPropertyName: "autoEmitMode", publicName: "autoEmitMode", isSignal: true, isRequired: false, transformFunction: null }, intervalInputMode: { classPropertyName: "intervalInputMode", publicName: "intervalInputMode", isSignal: true, isRequired: false, transformFunction: null }, showAnchor: { classPropertyName: "showAnchor", publicName: "showAnchor", isSignal: true, isRequired: false, transformFunction: null }, anchorReadOnly: { classPropertyName: "anchorReadOnly", publicName: "anchorReadOnly", isSignal: true, isRequired: false, transformFunction: null }, externalAnchorDateTime: { classPropertyName: "externalAnchorDateTime", publicName: "externalAnchorDateTime", isSignal: true, isRequired: false, transformFunction: null }, externalInterval: { classPropertyName: "externalInterval", publicName: "externalInterval", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { intervalChange: "intervalChange" }, providers: [{ provide: DateAdapter, useClass: CustomDateAdapter }], viewQueries: [{ propertyName: "calendarStart", first: true, predicate: ["rangeCalendarStart"], descendants: true }, { propertyName: "calendarEnd", first: true, predicate: ["rangeCalendarEnd"], descendants: true }, { propertyName: "calendarStartElRef", first: true, predicate: ["rangeCalendarStart"], descendants: true, read: ElementRef }, { propertyName: "calendarEndElRef", first: true, predicate: ["rangeCalendarEnd"], descendants: true, read: ElementRef }, { propertyName: "startDateInput", first: true, predicate: ["startDateInput"], descendants: true }, { propertyName: "endDateInput", first: true, predicate: ["endDateInput"], descendants: true }], ngImport: i0, template: "<div class=\"interval-picker-component p-md layout-col gap-xxl\">\n  <div class=\"layout-row gap-xxl place-between-start\" style=\"gap: 5%\">\n    <div class=\"layout-col gap-md pt-xs\">\n      <div class=\"layout-col\">\n        <div class=\"layout-row select-buttons-container gap-sm\">\n          <div class=\"layout-col gap-xs place-start-stretch\">\n            <button mat-button type=\"button\" (click)=\"controller.select.selectCurrentDay()\">\n              @if (presenter.isFixedAnchorDateSet()) {\n                {{ 'intervalPicker.anchorDay' | translate }}\n              } @else {\n                {{ 'intervalPicker.today' | translate }}\n              }\n            </button>\n            <button mat-button type=\"button\" (click)=\"controller.select.selectYesterday()\">\n              @if (presenter.isFixedAnchorDateSet()) {\n                {{ 'intervalPicker.last' | translate }} 1 {{ 'intervalPicker.day' | translate }}\n              } @else {\n                {{ 'intervalPicker.yesterday' | translate }}\n              }\n            </button>\n            <button\n              mat-button\n              type=\"button\"\n              (click)=\"controller.select.selectLastSevenDaysIncludingToday()\"\n            >\n              {{ 'intervalPicker.last' | translate }} 7\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            <button\n              mat-button\n              type=\"button\"\n              (click)=\"controller.select.selectLastThirtyDaysIncludingToday()\"\n            >\n              {{ 'intervalPicker.last' | translate }} 30\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            <button\n              mat-button\n              type=\"button\"\n              (click)=\"controller.select.selectLast365daysIncludingToday()\"\n            >\n              {{ 'intervalPicker.last' | translate }} 365\n              {{ 'intervalPicker.days' | translate }}\n            </button>\n            @if (intervalInputMode() === 'date-time-range') {\n              <div class=\"pt-sm\"></div>\n              <button mat-button type=\"button\" (click)=\"controller.select.selectLastFiveMinutes()\">\n                {{ 'intervalPicker.last' | translate }} 5\n                {{ 'intervalPicker.minutes' | translate }}\n              </button>\n              <button mat-button type=\"button\" (click)=\"controller.select.selectLastHour()\">\n                {{ 'intervalPicker.last' | translate }} {{ 'intervalPicker.hour' | translate }}\n              </button>\n              <button mat-button type=\"button\" (click)=\"controller.select.selectLast24Hours()\">\n                {{ 'intervalPicker.last' | translate }} 24\n                {{ 'intervalPicker.hours' | translate }}\n              </button>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n    <div class=\"layout-col\">\n      <!-- smart shift -->\n      <div class=\"layout-row place-around-center\">\n        <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"controller.shift.smartShift(-1)\"\n          [disabled]=\"!presenter.isValidIntervalSet()\"\n        >\n          <mat-icon>keyboard_double_arrow_left</mat-icon>\n        </button>\n        <span>{{ presenter.smartShiftMessage() }}</span>\n        <button\n          type=\"button\"\n          mat-icon-button\n          (click)=\"controller.shift.smartShift(1)\"\n          [disabled]=\"!presenter.isValidIntervalSet()\"\n        >\n          <mat-icon>keyboard_double_arrow_right</mat-icon>\n        </button>\n      </div>\n      <!-- calendars and input controls -->\n      <div\n        class=\"layout-row place-around-center\"\n        style=\"align-items: flex-start; min-height: 280px\"\n      >\n        <mat-calendar\n          #rangeCalendarStart\n          style=\"width: 210px; max-width: 100%\"\n          [selected]=\"presenter.dateRangeForCalendar()\"\n          (selectedChange)=\"controller.calendar.setStartDateFromJSDate($event)\"\n          [maxDate]=\"presenter.endDateTimeAsJSDate()\"\n          [dateClass]=\"presenter.calendarAnchorDateCssClassFn\"\n        >\n        </mat-calendar>\n        <mat-calendar\n          #rangeCalendarEnd\n          style=\"width: 210px; max-width: 100%\"\n          [selected]=\"presenter.dateRangeForCalendar()\"\n          (selectedChange)=\"controller.calendar.setEndDateFromJSDate($event)\"\n          [minDate]=\"presenter.startDateTimeAsJSDate()\"\n          [dateClass]=\"presenter.calendarAnchorDateCssClassFn\"\n        >\n        </mat-calendar>\n      </div>\n      <div class=\"layout-row place-around-center gap-xl pt-sm\">\n        <div class=\"layout-row place-around-center\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.startDate' | translate }}</mat-label>\n            <input\n              #startDateInput\n              name=\"startDateInput\"\n              matInput\n              type=\"date\"\n              [ngModel]=\"presenter.startDateHtmlString()\"\n              (ngModelChange)=\"controller.form.setStartDateFromString($event)\"\n            />\n          </mat-form-field>\n        </div>\n        <div class=\"layout-row place-around-center\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.endDate' | translate }}</mat-label>\n            <input\n              #endDateInput\n              name=\"endDateInput\"\n              matInput\n              type=\"date\"\n              [ngModel]=\"presenter.endDateHtmlString()\"\n              (ngModelChange)=\"controller.form.setEndDateFromString($event)\"\n            />\n          </mat-form-field>\n        </div>\n      </div>\n      @if (intervalInputMode() === 'date-time-range') {\n        <div class=\"layout-row place-around-center gap-xl pt-sm\">\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.startTime' | translate }}</mat-label>\n            <input\n              name=\"startTimeInput\"\n              matInput\n              type=\"time\"\n              #startTimeControl=\"ngModel\"\n              step=\"1\"\n              [ngModel]=\"presenter.startTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setStartTimeFromString($event)\"\n            />\n            <button\n              type=\"button\"\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.clearStartTime()\"\n              [disabled]=\"!presenter.isStartTimeSetAndNotMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n          <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.endTime' | translate }}</mat-label>\n            <input\n              name=\"endTimeInput\"\n              matInput\n              type=\"time\"\n              #endTimeControl=\"ngModel\"\n              step=\"1\"\n              [ngModel]=\"presenter.endTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setEndTimeFromString($event)\"\n            />\n            <button\n              type=\"button\"\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.clearEndTime()\"\n              [disabled]=\"!presenter.isEndTimeSetAndNotMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n        </div>\n      }\n      <br />\n    </div>\n    <div class=\"pt-xs\" style=\"width: 25%\">\n      <div class=\"layout-col gap-lg\">\n        <div class=\"layout-col gap-xs place-start-start\">\n          <!-- select current -->\n          <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentWeek()\">\n            {{ 'intervalPicker.currentPeriod.week' | translate }}\n          </button>\n          <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentMonth()\">\n            {{ 'intervalPicker.currentPeriod.month' | translate }}\n          </button>\n          <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentQuarter()\">\n            {{ 'intervalPicker.currentPeriod.quarter' | translate }}\n          </button>\n          <button type=\"button\" mat-button (click)=\"controller.select.selectCurrentYear()\">\n            {{ 'intervalPicker.currentPeriod.year' | translate }}\n          </button>\n        </div>\n        <div class=\"fixed-shifts-container\">\n          <div class=\"layout-col place-start-stretch\">\n            <div class=\"layout-row place-between-center\">\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftDay(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.day' | translate }}</span>\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftDay(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n            <div class=\"layout-row place-between-center\">\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftMonth(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.month' | translate }}</span>\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftMonth(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n            <div class=\"layout-row place-between-center\">\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftYear(-1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_left</mat-icon>\n              </button>\n              <span>{{ 'intervalPicker.year' | translate }}</span>\n              <button\n                type=\"button\"\n                mat-icon-button\n                (click)=\"controller.shift.shiftYear(1)\"\n                [disabled]=\"!presenter.isValidIntervalSet()\"\n              >\n                <mat-icon>keyboard_double_arrow_right</mat-icon>\n              </button>\n            </div>\n\n            @if (true) {\n              <!-- shift minute -->\n              <div class=\"layout-row place-between-center\">\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftMinute(-1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_left</mat-icon>\n                </button>\n                <span>{{ 'intervalPicker.minute' | translate }}</span>\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftMinute(1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_right</mat-icon>\n                </button>\n              </div>\n              <!-- shift hour -->\n              <div class=\"layout-row place-between-center\">\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftHour(-1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_left</mat-icon>\n                </button>\n                <span>{{ 'intervalPicker.hour' | translate }}</span>\n                <button\n                  type=\"button\"\n                  mat-icon-button\n                  (click)=\"controller.shift.shiftHour(1)\"\n                  [disabled]=\"!presenter.isValidIntervalSet()\"\n                >\n                  <mat-icon>keyboard_double_arrow_right</mat-icon>\n                </button>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"layout-row place-between-center gap-xxl pt-sm\">\n  <div>\n    @if (showAnchor()) {\n      <div class=\"layout-row flex-none gap-md\">\n        <mat-menu #anchorMenu=\"matMenu\">\n          @if (presenter.startDateHtmlString()) {\n            <button\n              type=\"button\"\n              mat-menu-item\n              (click)=\"controller.anchor.setFixedAnchorPointToEndDateTime()\"\n              [disabled]=\"!presenter.startDateHtmlString()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">login</mat-icon>\n              <span>{{ 'intervalPicker.endDate' | translate }}</span>\n            </button>\n          }\n          @if (presenter.endDateHtmlString()) {\n            <button\n              type=\"button\"\n              mat-menu-item\n              (click)=\"controller.anchor.setFixedAnchorPointToStartDateTime()\"\n              [disabled]=\"!presenter.endDateHtmlString()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">logout</mat-icon>\n              <span>{{ 'intervalPicker.startDate' | translate }}</span>\n            </button>\n          }\n          @if (presenter.isFixedAnchorDateSet()) {\n            <button\n              type=\"button\"\n              mat-menu-item\n              (click)=\"controller.anchor.resetAnchor()\"\n              [disabled]=\"!presenter.isFixedAnchorDateSet() || anchorReadOnly()\"\n            >\n              <mat-icon>close</mat-icon>\n              <span>{{ 'intervalPicker.clear' | translate }}</span>\n            </button>\n          }\n        </mat-menu>\n\n        <mat-form-field class=\"input-control-container\" [subscriptSizing]=\"'dynamic'\">\n          <mat-label>{{ 'intervalPicker.anchorDate' | translate }}</mat-label>\n          <input\n            #startDateInput\n            name=\"anchorDateInput\"\n            matInput\n            type=\"date\"\n            [ngModel]=\"presenter.anchorDateHtmlString()\"\n            (ngModelChange)=\"controller.form.setAnchorDateFromString($event)\"\n            [readonly]=\"anchorReadOnly()\"\n          />\n          @if (!anchorReadOnly()) {\n            <button\n              type=\"button\"\n              mat-icon-button\n              matSuffix\n              [matMenuTriggerFor]=\"anchorMenu\"\n              [disabled]=\"presenter.isAnchorMenuDisabled()\"\n            >\n              <mat-icon class=\"material-symbols-outlined\">more_horiz</mat-icon>\n            </button>\n          }\n        </mat-form-field>\n        @if (intervalInputMode() === 'date-time-range') {\n          <mat-form-field class=\"input-control-container-short\" [subscriptSizing]=\"'dynamic'\">\n            <mat-label>{{ 'intervalPicker.anchorTime' | translate }}</mat-label>\n            <input\n              matInput\n              name=\"anchorTimeInput\"\n              type=\"time\"\n              #anchorTimeControl=\"ngModel\"\n              step=\"1\"\n              [readonly]=\"anchorReadOnly()\"\n              [ngModel]=\"presenter.anchorTimeHtmlString()\"\n              (ngModelChange)=\"controller.form.setAnchorTimeFromString($event)\"\n            />\n            <button\n              type=\"button\"\n              mat-icon-button\n              matSuffix\n              (click)=\"controller.anchor.resetAnchorTime()\"\n              [disabled]=\"anchorReadOnly() || presenter.isAnchorTimeMidnight()\"\n            >\n              <mat-icon>close</mat-icon>\n            </button>\n          </mat-form-field>\n        }\n      </div>\n    }\n  </div>\n  <!-- result interval -->\n  <div class=\"layout-col place-center-center\">\n    <div class=\"date-interval mat-caption pt-xs\">\n      @if (presenter.startDateTimeAsJSDate()) {\n        {{ presenter.startDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n      } @else {\n        {{ 'intervalPicker.startDateNotSet' | translate }}\n      }\n      <span> - </span>\n      @if (presenter.endDateTimeAsJSDate()) {\n        {{ presenter.endDateTimeAsJSDate() | date: 'dd.MM. y, HH:mm:ss' }}\n      } @else {\n        {{ 'intervalPicker.endDateNotSet' | translate }}\n      }\n    </div>\n    <div>\n      <span class=\"mat-caption\">{{ presenter.deltaHumanReadable() || '&nbsp;' }}</span>\n    </div>\n  </div>\n  <div class=\"layout-row gap-lg\">\n    <button\n      type=\"button\"\n      mat-flat-button\n      color=\"primary\"\n      (click)=\"controller.clearInterval()\"\n      [disabled]=\"!presenter.isValidIntervalSet()\"\n    >\n      {{ 'intervalPicker.clear' | translate }}\n    </button>\n\n    @if (!this.autoEmitMode()) {\n      <button type=\"button\" color=\"primary\" mat-flat-button (click)=\"controller.manualEmit()\">\n        {{ 'actions.ok' | translate }}\n      </button>\n    }\n  </div>\n</div>\n", styles: [".interval-picker-component{min-width:840px;max-width:100%}.fixed-shifts-container{max-width:160px}.input-control-container{width:192px;max-width:100%}.input-control-container-short{width:140px;max-width:100%}.select-buttons-container button{white-space:nowrap;text-align:left;justify-content:flex-start}::ng-deep .interval-picker-component .mat-calendar-body-cell.elder-custom-anchor-date .mat-calendar-body-cell-content{border-radius:50%;background-color:#def;background-color:#b4d2ebbf}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$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$5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i2.DatePipe, name: "date" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$e.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i8.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i8.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i8.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ElderIntervalPickerComponent, decorators: [{
             type: Component,
@@ -31543,7 +31652,7 @@ class ElderOverlayComponent {
         const searchPanelPortal = new TemplatePortal(this.templateRef, this.viewContainer);
         return this._overlayRef.attach(searchPanelPortal);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ElderOverlayComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$e.Overlay }, { token: i1$e.OverlayPositionBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ElderOverlayComponent, deps: [{ token: i0.ViewContainerRef }, { token: i1$f.Overlay }, { token: i1$f.OverlayPositionBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ElderOverlayComponent, isStandalone: true, selector: "elder-overlay", inputs: { originX: "originX", originY: "originY", overlayX: "overlayX", overlayY: "overlayY", offsetY: "offsetY", offsetX: "offsetX", backdrop: "backdrop", backdropVisible: "backdropVisible", origin: "origin", positionStrategy: "positionStrategy", overlaySize: "overlaySize" }, outputs: { keydownEvents: "keydownEvents", attachedChange: "attachedChange" }, providers: [
             {
                 provide: ElderOverlayRef,
@@ -31580,7 +31689,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         },
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$e.Overlay }, { type: i1$e.OverlayPositionBuilder }], propDecorators: { templateRef: [{
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i1$f.Overlay }, { type: i1$f.OverlayPositionBuilder }], propDecorators: { templateRef: [{
                 type: ViewChild,
                 args: [TemplateRef, { static: true }]
             }], originX: [{
@@ -36400,7 +36509,7 @@ class ElderTabDirective {
     constructor(tab) {
         this.tab = tab;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ElderTabDirective, deps: [{ token: i1$f.MatTab }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ElderTabDirective, deps: [{ token: i1$g.MatTab }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: ElderTabDirective, isStandalone: true, selector: "[elderTab]", inputs: { id: ["elderTab", "id"] }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ElderTabDirective, decorators: [{
@@ -36409,7 +36518,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                     selector: '[elderTab]',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: i1$f.MatTab }], propDecorators: { id: [{
+        }], ctorParameters: () => [{ type: i1$g.MatTab }], propDecorators: { id: [{
                 type: Input,
                 args: ['elderTab']
             }] } });
@@ -36679,7 +36788,7 @@ class ElderTabGroupRoutingDirective {
     serializeIndexMarker(index) {
         return ElderTabGroupRoutingDirective.TAB_INDEX_PREFIX + String(index);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ElderTabGroupRoutingDirective, deps: [{ token: ElderUrlFragmentParamsService }, { token: i1$f.MatTabGroup }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ElderTabGroupRoutingDirective, deps: [{ token: ElderUrlFragmentParamsService }, { token: i1$g.MatTabGroup }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.7", type: ElderTabGroupRoutingDirective, isStandalone: true, selector: "[elderTabGroupRouting]", inputs: { tabGroupQueryParamKey: { classPropertyName: "tabGroupQueryParamKey", publicName: "elderTabGroupRouting", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabActivationFailed: "tabActivationFailed" }, queries: [{ propertyName: "tabs", predicate: MatTab, isSignal: true }, { propertyName: "elderTabs", predicate: ElderTabDirective, isSignal: true }], exportAs: ["elderTabGroupRouting"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ElderTabGroupRoutingDirective, decorators: [{
@@ -36689,7 +36798,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                     exportAs: 'elderTabGroupRouting',
                     standalone: true,
                 }]
-        }], ctorParameters: () => [{ type: ElderUrlFragmentParamsService }, { type: i1$f.MatTabGroup }] });
+        }], ctorParameters: () => [{ type: ElderUrlFragmentParamsService }, { type: i1$g.MatTabGroup }] });
 
 class ElderTabModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ElderTabModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
@@ -37086,6 +37195,93 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                 args: ['class']
             }] } });
 
+const elderNamedColors = [
+    'white',
+    'grey',
+    'blue',
+    'turquoise',
+    'green',
+    'orange',
+    'yellow',
+    'red',
+    'purple',
+    'pink',
+];
+const elderNamedColorRoles = ['primary', 'darker', 'on'];
+function elderNamedColorToken(color, role = 'primary') {
+    return '--elder-named-color-' + renderRoleName(role) + color;
+}
+function renderRoleName(role) {
+    return role === 'primary' ? '' : role + '-';
+}
+
+class NamedColorSelectDirective {
+    constructor(select, enumTranslationService) {
+        this.select = select;
+        this.select.displayProperty = 'displayValue';
+        this.select.dataSource = enumTranslationService.stringArrayDateSource(elderNamedColors, 'elder.colors.named', true);
+        this.select.sorts = [new Sort('value', 'asc')];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: NamedColorSelectDirective, deps: [{ token: ElderSelectComponent }, { token: ElderEnumTranslationService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: NamedColorSelectDirective, isStandalone: true, selector: "[elderNamedColorSelect]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: NamedColorSelectDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[elderNamedColorSelect]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: ElderSelectComponent }, { type: ElderEnumTranslationService }] });
+
+class NamedColorDirective {
+    constructor(icon) {
+        this.namedColor = input.required({ alias: 'elderNamedColor' });
+        this.backgroundRole = model('primary');
+        this.frontRole = model('on');
+        this.hostColor = computed(() => this.namedColorCssVariable(this.namedColor(), this.frontRole()));
+        this.hostBackgroundColor = computed(() => this.namedColorCssVariable(this.namedColor(), this.backgroundRole()));
+        if (icon) {
+            this.backgroundRole.set(undefined);
+            this.frontRole.set('darker');
+        }
+    }
+    namedColorCssVariable(name, role) {
+        if (role) {
+            return 'var(' + elderNamedColorToken(name, role) + ')';
+        }
+        else {
+            return undefined;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: NamedColorDirective, deps: [{ token: i1$e.MatIcon, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.7", type: NamedColorDirective, isStandalone: true, selector: "[elderNamedColor]", inputs: { namedColor: { classPropertyName: "namedColor", publicName: "elderNamedColor", isSignal: true, isRequired: true, transformFunction: null }, backgroundRole: { classPropertyName: "backgroundRole", publicName: "backgroundRole", isSignal: true, isRequired: false, transformFunction: null }, frontRole: { classPropertyName: "frontRole", publicName: "frontRole", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { backgroundRole: "backgroundRoleChange", frontRole: "frontRoleChange" }, host: { properties: { "style.color": "hostColor()", "style.background-color": "hostBackgroundColor()" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: NamedColorDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[elderNamedColor]',
+                    host: {
+                        '[style.color]': 'hostColor()',
+                        '[style.background-color]': 'hostBackgroundColor()',
+                    },
+                }]
+        }], ctorParameters: () => [{ type: i1$e.MatIcon, decorators: [{
+                    type: Optional
+                }] }] });
+
+class NamedColorSelectValueComponent {
+    constructor() {
+        this.value = input.required();
+        this.namedColor = computed(() => this.value()?.value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: NamedColorSelectValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.7", type: NamedColorSelectValueComponent, isStandalone: true, selector: "elder-named-color-select-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"layout-row place-start-center\">\n  <mat-icon [elderNamedColor]=\"namedColor()\">color_lens</mat-icon>\n  <span>{{ value()?.displayValue }}</span>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NamedColorDirective, selector: "[elderNamedColor]", inputs: ["elderNamedColor", "backgroundRole", "frontRole"], outputs: ["backgroundRoleChange", "frontRoleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: NamedColorSelectValueComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'elder-named-color-select-value', imports: [MatIcon, NamedColorDirective], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<div class=\"layout-row place-start-center\">\n  <mat-icon [elderNamedColor]=\"namedColor()\">color_lens</mat-icon>\n  <span>{{ value()?.displayValue }}</span>\n</div>\n" }]
+        }] });
+
 /**
  * This class provides a reactive wrapper around an event source.
  *
@@ -38032,5 +38228,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActivationEventSource, ActivationModel, Arrays, AuditedEntity, AutoStartSpec, Batcher, BlobUrl, BytesFormat, BytesPerSecondFormat, BytesPipe, CardDropEvent, CardOrganizerData, CardStack, CollectionUtil, ComparatorBuilder, CompositeSort, ConfirmDialogConfig, ContinuableListing, CsvColumnSpec, CsvSerializer, CsvSpec, CsvStreamExporter, CsvStreamExporterBuilder, CsvStreamExporterBuilderService, Currency, CurrencyCode, CurrencyFormatUtil, CurrencyUnit, CurrencyUnitRegistry, CustomDateAdapter, CustomMatcherSpec, DataContextActivePage, DataContextAutoStarter, DataContextBase, DataContextBuilder, DataContextContinuableBase, DataContextContinuablePaged, DataContextContinuableToken, DataContextLifeCycleBinding, DataContextSelectionDirective, DataContextSimple, DataContextSnapshot, DataContextSourceEventBinding, DataContextStateIndicatorComponent, DataContextStatus, DataSourceAdapter, DataSourceBase, DataSourceChangeEvent, DataSourceEntityPatch, DataSourceProcessor, DataTransferFactory, DataTransferProgress, DataTransferProgressAggregate, DataTransferState, DataTransferStatus, DataViewActivationController, DataViewDndControllerService, DataViewDndGroupControllerService, DataViewDndModelUtil, DataViewDragEnteredEvent, DataViewDragExitedEvent, DataViewIframeAdapterDirective, DataViewIframeComponent, DataViewItemDropEvent, DataViewMessage, DataViewMessageTypeValues, DataViewOptionsProviderBinding, DataViewSelection, DataViewSelectionInit, DateUtil, DelegateContinuableDataSource, DelegateDataSource, DelegateListDataSource, DelegatePagedDataSource, Dimensions, DrawerOutletBinding, DurationBucket, DurationFormat, DurationFormatUtil, ELDER_DATA_VIEW, ELDER_SELECT_BASE, ElderAccessDeniedComponent, ElderAccessDeniedModule, ElderAppHeaderComponent, ElderAuditModule, ElderAuditedEntityComponent, ElderAutoSelectFirstDirective, ElderAutoSelectSuggestFirstDirective, ElderAutocompleteDirective, ElderAutocompleteManyDirective, ElderAutocompleteModule, ElderBadgeChipAvatarDirective, ElderBadgeChipDirective, ElderBadgeComponent, ElderBadgeDirective, ElderBadgeModule, ElderBasicPaneLayoutComponent, ElderBlobViewerComponent, ElderBreadCrumbsComponent, ElderBreadCrumbsModule, ElderButtonGroupComponent, ElderButtonGroupModule, ElderCardComponent, ElderCardContentDirective, ElderCardHeaderActionsDirective, ElderCardHeaderComponent, ElderCardModule, ElderCardOrganizerComponent, ElderCardOrganizerModule, ElderCardPanelComponent, ElderCardStackComponent, ElderCardSubtitleDirective, ElderCardTitleDirective, ElderCenterCellDirective, ElderChipLabelDirective, ElderChipListSelectComponent, ElderChipListSelectModule, ElderChipsIncludeExcludeDirective, ElderChipsModule, ElderClearSelectDirective, ElderClipboardPutDirective, ElderClipboardService, ElderCompositeSortComponent, ElderCompositeSortDcDirective, ElderConfirmDialogComponent, ElderConnectivityModule, ElderConnectivityService, ElderContainersModule, ElderContinuatorComponent, ElderCsvExportBtnComponent, ElderCsvModule, ElderCurrencyModule, ElderCurrencyPipe, ElderDataCommonModule, ElderDataToolbarComponent, ElderDataTransferModule, ElderDataTransferService, ElderDataViewBaseComponent, ElderDataViewDndDirective, ElderDataViewDndGroupDirective, ElderDataViewItemDragDirective, ElderDataViewOptions, ElderDataViewOptionsProvider, ElderDateSwitcherComponent, ElderDateTimeInputComponent, ElderDelayedFocusDirective, ElderDeleteActiveDirective, ElderDetailDialogComponent, ElderDetailDirective, ElderDialogConfig, ElderDialogModule, ElderDialogPanelComponent, ElderDialogService, ElderDimensionsInputComponent, ElderDropZoneComponent, ElderDurationInputComponent, ElderEntityValueAccessorUtil, ElderEnumTranslationService, ElderErrorModule, ElderEventSourceService, ElderExceptionDetailComponent, ElderExpandToggleButtonComponent, ElderExpandToggleButtonModule, ElderFileDropZoneDirective, ElderFileModule, ElderFileSelectComponent, ElderFileSelectDirective, ElderFileUploadComponent, ElderFilterChipTemplateComponent, ElderFormFieldControlBase, ElderFormFieldDenseDirective, ElderFormFieldLabelDirective, ElderFormFieldNoHintDirective, ElderFormFieldNoSpinnerDirective, ElderFormsDirectivesModule, ElderFormsModule, ElderFromFieldBase, ElderFromFieldEntityBase, ElderFromFieldMultiEntityBase, ElderGlobalSearchComponent, ElderGlobalSearchModule, ElderGlobalSearchService, ElderGridActivationDirective, ElderGridComponent, ElderGridModule, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderHttpClient, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollModule, ElderInputPatternDirective, ElderIntervalInputComponent, ElderIntervalPickerBindingDirective, ElderIntervalPickerComponent, ElderIntervalPickerToggleComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageModule, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalDndSupportDirective, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, ElderMasterActivationDirective, ElderMasterDetailComponent, ElderMasterDetailModule, ElderMasterDetailService, ElderMasterDirective, ElderMaxValidator, ElderMeasuresModule, ElderMinValidator, ElderMultiEntityValueAccessorUtil, ElderMultiSelectAllInitialDirective, ElderMultiSelectBase, ElderMultiSelectChipOptionsComponent, ElderMultiSelectChipsComponent, ElderMultiSelectFormField, ElderMultiTranslateHttpLoader, ElderMultipleOfUtil, ElderMultipleOfValidator, ElderNavGroupComponent, ElderNavLinkComponent, ElderNavListComponent, ElderNavModule, ElderNextFocusableDirective, ElderNumberCellDirective, ElderOfflineIndicatorComponent, ElderOverlayComponent, ElderOverlayModule, ElderOverlayOriginDirective, ElderOverlayRef, ElderOverlayTriggerDirective, ElderPaddingDirective, ElderPageExitLockIndicatorComponent, ElderPaneActionsComponent, ElderPaneComponent, ElderPaneContentComponent, ElderPaneHeaderComponent, ElderPaneSubtitleComponent, ElderPaneTitleComponent, ElderPanelModule, ElderPeriodInputComponent, ElderPipesModule, ElderPlugParentFormDirective, ElderProgressBarComponent, ElderProgressBarModule, ElderQuantityFormFieldComponent, ElderQuantityInputControlComponent, ElderQuantityModule, ElderQuantityPipe, ElderQuantityRangeValidator, ElderQuantityService, ElderQuantityTransformPipe, ElderQuestionDialogComponent, ElderRepeatPipe, ElderRepeatPipeLegacy, ElderRequiredDimensionsValidator, ElderRequiredIgnoreZeroValidator, ElderRequiredQuantityValidator, ElderRoundPipe, ElderRouteOutletDrawerService, ElderRouterOutletService, ElderRouterService, ElderSafeUrlPipe, ElderScrollContainerComponent, ElderScrollbarDirective, ElderScrollbarModule, ElderSearchBoxComponent, ElderSearchContextDirective, ElderSearchIncludeExcludeDirective, ElderSearchInputDirective, ElderSearchModule, ElderSearchPanelComponent, ElderSearchUrlDirective, ElderSelectBase, ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectComponent, ElderSelectComponentState, ElderSelectCustomInputDirective, ElderSelectFormField, ElderSelectModule, ElderSelectOnTabDirective, ElderSelectOptionComponent, ElderSelectValueDirective, ElderSelectionDialogComponent, ElderSelectionDialogDirective, ElderSelectionMasterCheckboxComponent, ElderSelectionPopupTriggerAdapterDirective, ElderShellCenterDirective, ElderShellComponent, ElderShellModule, ElderShellNavigationToggleComponent, ElderShellService, ElderShellSideLeftDirective, ElderShellSideRightDirective, ElderShellSlotDirective, ElderSimpleSelectionViewComponent, ElderSimpleSelectionViewModule, ElderSinglePaneWrapperComponent, ElderSingleSortComponent, ElderSingleStateCheckboxDirective, ElderStackCardDirective, ElderStopEventPropagationDirective, ElderSuggestionPanelComponent, ElderSvgViewerComponent, ElderTabDirective, ElderTabFocusTrapDirective, ElderTabGroupRoutingDirective, ElderTabModule, ElderTableActivationDirective, ElderTableComponent, ElderTableDropListConnectorDirective, ElderTableExtensionDirective, ElderTableGroup, ElderTableModel, ElderTableModelCdkTableBinding, ElderTableModelQueryGroup, ElderTableModule, ElderTableProviders, ElderTableRootDirective, ElderTableSelectionCellComponent, ElderTableSortDirective, ElderTableToolbarDirective, ElderThemeApplierDirective, ElderThemeDirective, ElderThemeModule, ElderThemePreferenceService, ElderThemeService, ElderThemeToggleComponent, ElderTileComponent, ElderTimeModule, ElderToastModule, ElderToastService, ElderTogglePanelComponent, ElderTogglePanelPrimaryDirective, ElderTogglePanelSecondaryDirective, ElderTogglePanelTriggerDirective, ElderToolbarColumnDirective, ElderToolbarComponent, ElderToolbarContentDirective, ElderToolbarModule, ElderToolbarService, ElderToolbarTitleComponent, ElderToolbarTitleService, ElderTouchedDirective, ElderTrimPipe, ElderTripleStateCheckboxDirective, ElderTruncatePipe, ElderUnitSelectDirective, ElderUnitService, ElderUrlFragment, ElderUrlFragmentModule, ElderUrlFragmentParamsService, ElderUrlFragmentSwitcherComponent, ElderValidationErrorDirective, ElderViewersModule, EntitySetPatch, ErrorUtil, ExceptionDetailCtx, FileEntry, FileListingRx, FileUploadClient, Filter, FilterContext, FilterUtil, FocusUtil, FormFieldBaseComponent, GlobalDragDropService, HttpClientBuilder, HttpClientPristine, HttpDataTransfer, HttpDataTransferAggregateComponent, HttpDataTransferComponent, HttpDataTransferIndicatorComponent, HttpDataTransferOverviewComponent, HttpParamsBuilder, I18nBase, I18nPickAsyncPipe, I18nPickPipe, I18nText, IFrameState, IframeCloseDirective, IframeDialogComponent, IframeHostComponent, IframeService, IframeSideContentComponent, IncludeExcludeSelectionModel, IncludeExcludeState, IncludeExcludeValue, IndexedEntities, InternalRestClientConfig, Interval, IsoDurationPipe, IsoIntervalFormatUtil, IsoIntervalParsePipe, IsoIntervalPipe, ItemActivationEvent, ItemActivationOptions, JsonMapUtil, KafentConfig, KafentEvent, KafentEventService, KafentEventStream, KafentEventStreamDisabled, KafentEventStreamSse, KafentEventTransport, KafentModule, KafentSseEventChannel, KafentTokenProvider, KafentTokenProviderSessionStorage, KafentTopicSse, KnownElderThemes, KnownLocaleTags, LocalDataFilter, LocalListDataSource, LocalPagedDataSource, LocalisationPickerService, MasterDetailActivationEvent, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, MultiModelBaseComponent, NextNumberUtil, Objects, OnlineStatus, Page, PageExitGuardModule, PageExitGuardService, PageExitLock, PageRequest, Pageable, ParseUtil, Path, PathNode, PeriodBucket, PeriodDuration, PeriodFormat, ProcessIterationContext, ProcessState, PropertyPathUtil, Quantity, QueryListBinding, QuestionDialogConfig, ReactiveEventSource, ReactiveEventSourceState, ReactiveFetchEventSource, ReactiveFetchEventSourceService, ReactiveMap, ReactiveSSeMessage, RefreshingEntity, RestClient, RestClientConfig, RestClientContinuable, RestClientList, RestClientPaged, RoutedTabActivationFailed, SearchInputState, SearchQuery, SelectChipSpecUtil, SelectOptionChipSpecUtil, SelectionModel, SelectionModelPopupDirective, Sets, SimpleLocalisationPicker, SimpleSearchInput, Sort, SortOption, SortUtil, StandardToastComponent, SubBar, SuggestionProvider, TemplateCompositeControl, TemplatedSelectionDialogComponent, TemporalPlainDateInterval, TemporalUtil, ThemeSpec, TimeAgoPipe, TimeDurationPipe, TimeUtil, ToIsoDateStringPipe, ToastType, TokenChunkRequest, ToolbarHeader, Translated, TranslatedConverter, TranslatedEnumValue, TranslatedText, TypedEventMessage, Unit, UnitDimension, UnitDimensionInfo, UnitInfo, UnitRegistry, UnreachableCaseError, UrlBuilder, UrlQueryParams, UuidUtil, ValueAccessorBase, ValueWrapper, ViewDropModelUpdateInstruction, ViewProviders, WeightPipe, alphaNumStringComparator, booleanTransformFn, buildFormIntegrationProviders, coerceInterval, coerceIntervalIsoStr, createDataOptionsProvider, createSelectionModel, elderChipColorLevels, elderChipColorNames, elderChipColorStates, existingOrNewElderTableModel, initSearchUrlService, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isDataViewMessageType, isElderEntityValueAccessor, isElderMultiEntityValueAccessor, isListDataSource, isLocalListDataSource, isPagedDataSource, lazySample, lazySampleTime, naturalValueComparator, newElderTableModel, proxyControlContainer, registerLocale, runInZone, themeInit };
+export { ActivationEventSource, ActivationModel, Arrays, AuditedEntity, AutoStartSpec, Batcher, BlobUrl, BytesFormat, BytesPerSecondFormat, BytesPipe, CardDropEvent, CardOrganizerData, CardStack, CollectionUtil, ComparatorBuilder, CompositeSort, ConfirmDialogConfig, ContinuableListing, CsvColumnSpec, CsvSerializer, CsvSpec, CsvStreamExporter, CsvStreamExporterBuilder, CsvStreamExporterBuilderService, Currency, CurrencyCode, CurrencyFormatUtil, CurrencyUnit, CurrencyUnitRegistry, CustomDateAdapter, CustomMatcherSpec, DataContextActivePage, DataContextAutoStarter, DataContextBase, DataContextBuilder, DataContextContinuableBase, DataContextContinuablePaged, DataContextContinuableToken, DataContextLifeCycleBinding, DataContextSelectionDirective, DataContextSimple, DataContextSnapshot, DataContextSourceEventBinding, DataContextStateIndicatorComponent, DataContextStatus, DataSourceAdapter, DataSourceBase, DataSourceChangeEvent, DataSourceEntityPatch, DataSourceProcessor, DataTransferFactory, DataTransferProgress, DataTransferProgressAggregate, DataTransferState, DataTransferStatus, DataViewActivationController, DataViewDndControllerService, DataViewDndGroupControllerService, DataViewDndModelUtil, DataViewDragEnteredEvent, DataViewDragExitedEvent, DataViewIframeAdapterDirective, DataViewIframeComponent, DataViewItemDropEvent, DataViewMessage, DataViewMessageTypeValues, DataViewOptionsProviderBinding, DataViewSelection, DataViewSelectionInit, DateUtil, DelegateContinuableDataSource, DelegateDataSource, DelegateListDataSource, DelegatePagedDataSource, Dimensions, DrawerOutletBinding, DurationBucket, DurationFormat, DurationFormatUtil, ELDER_DATA_VIEW, ELDER_SELECT_BASE, ElderAccessDeniedComponent, ElderAccessDeniedModule, ElderAppHeaderComponent, ElderAuditModule, ElderAuditedEntityComponent, ElderAutoSelectFirstDirective, ElderAutoSelectSuggestFirstDirective, ElderAutocompleteDirective, ElderAutocompleteManyDirective, ElderAutocompleteModule, ElderBadgeChipAvatarDirective, ElderBadgeChipDirective, ElderBadgeComponent, ElderBadgeDirective, ElderBadgeModule, ElderBasicPaneLayoutComponent, ElderBlobViewerComponent, ElderBreadCrumbsComponent, ElderBreadCrumbsModule, ElderButtonGroupComponent, ElderButtonGroupModule, ElderCardComponent, ElderCardContentDirective, ElderCardHeaderActionsDirective, ElderCardHeaderComponent, ElderCardModule, ElderCardOrganizerComponent, ElderCardOrganizerModule, ElderCardPanelComponent, ElderCardStackComponent, ElderCardSubtitleDirective, ElderCardTitleDirective, ElderCenterCellDirective, ElderChipLabelDirective, ElderChipListSelectComponent, ElderChipListSelectModule, ElderChipsIncludeExcludeDirective, ElderChipsModule, ElderClearSelectDirective, ElderClipboardPutDirective, ElderClipboardService, ElderCompositeSortComponent, ElderCompositeSortDcDirective, ElderConfirmDialogComponent, ElderConnectivityModule, ElderConnectivityService, ElderContainersModule, ElderContinuatorComponent, ElderCsvExportBtnComponent, ElderCsvModule, ElderCurrencyModule, ElderCurrencyPipe, ElderDataCommonModule, ElderDataToolbarComponent, ElderDataTransferModule, ElderDataTransferService, ElderDataViewBaseComponent, ElderDataViewDndDirective, ElderDataViewDndGroupDirective, ElderDataViewItemDragDirective, ElderDataViewOptions, ElderDataViewOptionsProvider, ElderDateSwitcherComponent, ElderDateTimeInputComponent, ElderDelayedFocusDirective, ElderDeleteActiveDirective, ElderDetailDialogComponent, ElderDetailDirective, ElderDialogConfig, ElderDialogModule, ElderDialogPanelComponent, ElderDialogService, ElderDimensionsInputComponent, ElderDropZoneComponent, ElderDurationInputComponent, ElderEntityValueAccessorUtil, ElderEnumTranslationService, ElderErrorModule, ElderEventSourceService, ElderExceptionDetailComponent, ElderExpandToggleButtonComponent, ElderExpandToggleButtonModule, ElderFileDropZoneDirective, ElderFileModule, ElderFileSelectComponent, ElderFileSelectDirective, ElderFileUploadComponent, ElderFilterChipTemplateComponent, ElderFormFieldControlBase, ElderFormFieldDenseDirective, ElderFormFieldLabelDirective, ElderFormFieldNoHintDirective, ElderFormFieldNoSpinnerDirective, ElderFormsDirectivesModule, ElderFormsModule, ElderFromFieldBase, ElderFromFieldEntityBase, ElderFromFieldMultiEntityBase, ElderGlobalSearchComponent, ElderGlobalSearchModule, ElderGlobalSearchService, ElderGridActivationDirective, ElderGridComponent, ElderGridModule, ElderGridTileDirective, ElderGridToolbarDirective, ElderHeaderComponent, ElderHeaderModule, ElderHttpClient, ElderI18nEntitiesModule, ElderIFrameModule, ElderInfiniteAutocompleteDirective, ElderInfiniteScrollDirective, ElderInfiniteScrollModule, ElderInputPatternDirective, ElderIntervalInputComponent, ElderIntervalPickerBindingDirective, ElderIntervalPickerComponent, ElderIntervalPickerToggleComponent, ElderKeyEventDirective, ElderLabelInputComponent, ElderLabelsModule, ElderLanguageConfig, ElderLanguageInterceptor, ElderLanguageModule, ElderLanguageService, ElderLanguageSwitcherComponent, ElderLocalDateInputComponent, ElderLocalDndSupportDirective, ElderLocalTimeInputComponent, ElderLocalesDeChModule, ElderLocalizedInputComponent, ElderLocalizedInputDialogComponent, ElderLocalizedInputDialogService, ElderLocalizedInputTableComponent, ElderLocalizedTextColumnDirective, ElderLocalizedTextsDirective, ElderMasterActivationDirective, ElderMasterDetailComponent, ElderMasterDetailModule, ElderMasterDetailService, ElderMasterDirective, ElderMaxValidator, ElderMeasuresModule, ElderMinValidator, ElderMultiEntityValueAccessorUtil, ElderMultiSelectAllInitialDirective, ElderMultiSelectBase, ElderMultiSelectChipOptionsComponent, ElderMultiSelectChipsComponent, ElderMultiSelectFormField, ElderMultiTranslateHttpLoader, ElderMultipleOfUtil, ElderMultipleOfValidator, ElderNavGroupComponent, ElderNavLinkComponent, ElderNavListComponent, ElderNavModule, ElderNextFocusableDirective, ElderNumberCellDirective, ElderOfflineIndicatorComponent, ElderOverlayComponent, ElderOverlayModule, ElderOverlayOriginDirective, ElderOverlayRef, ElderOverlayTriggerDirective, ElderPaddingDirective, ElderPageExitLockIndicatorComponent, ElderPaneActionsComponent, ElderPaneComponent, ElderPaneContentComponent, ElderPaneHeaderComponent, ElderPaneSubtitleComponent, ElderPaneTitleComponent, ElderPanelModule, ElderPeriodInputComponent, ElderPipesModule, ElderPlugParentFormDirective, ElderProgressBarComponent, ElderProgressBarModule, ElderQuantityFormFieldComponent, ElderQuantityInputControlComponent, ElderQuantityModule, ElderQuantityPipe, ElderQuantityRangeValidator, ElderQuantityService, ElderQuantityTransformPipe, ElderQuestionDialogComponent, ElderRepeatPipe, ElderRepeatPipeLegacy, ElderRequiredDimensionsValidator, ElderRequiredIgnoreZeroValidator, ElderRequiredQuantityValidator, ElderRoundPipe, ElderRouteOutletDrawerService, ElderRouterOutletService, ElderRouterService, ElderSafeUrlPipe, ElderScrollContainerComponent, ElderScrollbarDirective, ElderScrollbarModule, ElderSearchBoxComponent, ElderSearchContextDirective, ElderSearchIncludeExcludeDirective, ElderSearchInputDirective, ElderSearchModule, ElderSearchPanelComponent, ElderSearchUrlDirective, ElderSelectBase, ElderSelectChipAvatarDirective, ElderSelectChipDirective, ElderSelectComponent, ElderSelectComponentState, ElderSelectCustomInputDirective, ElderSelectFormField, ElderSelectModule, ElderSelectOnTabDirective, ElderSelectOptionComponent, ElderSelectValueDirective, ElderSelectionDialogComponent, ElderSelectionDialogDirective, ElderSelectionMasterCheckboxComponent, ElderSelectionPopupTriggerAdapterDirective, ElderShellCenterDirective, ElderShellComponent, ElderShellModule, ElderShellNavigationToggleComponent, ElderShellService, ElderShellSideLeftDirective, ElderShellSideRightDirective, ElderShellSlotDirective, ElderSimpleSelectionViewComponent, ElderSimpleSelectionViewModule, ElderSinglePaneWrapperComponent, ElderSingleSortComponent, ElderSingleStateCheckboxDirective, ElderStackCardDirective, ElderStopEventPropagationDirective, ElderSuggestionPanelComponent, ElderSvgViewerComponent, ElderTabDirective, ElderTabFocusTrapDirective, ElderTabGroupRoutingDirective, ElderTabModule, ElderTableActivationDirective, ElderTableComponent, ElderTableDropListConnectorDirective, ElderTableExtensionDirective, ElderTableGroup, ElderTableModel, ElderTableModelCdkTableBinding, ElderTableModelQueryGroup, ElderTableModule, ElderTableProviders, ElderTableRootDirective, ElderTableSelectionCellComponent, ElderTableSortDirective, ElderTableToolbarDirective, ElderThemeApplierDirective, ElderThemeDirective, ElderThemeModule, ElderThemePreferenceService, ElderThemeService, ElderThemeToggleComponent, ElderTileComponent, ElderTimeModule, ElderToastModule, ElderToastService, ElderTogglePanelComponent, ElderTogglePanelPrimaryDirective, ElderTogglePanelSecondaryDirective, ElderTogglePanelTriggerDirective, ElderToolbarColumnDirective, ElderToolbarComponent, ElderToolbarContentDirective, ElderToolbarModule, ElderToolbarService, ElderToolbarTitleComponent, ElderToolbarTitleService, ElderTouchedDirective, ElderTrimPipe, ElderTripleStateCheckboxDirective, ElderTruncatePipe, ElderUnitSelectDirective, ElderUnitService, ElderUrlFragment, ElderUrlFragmentModule, ElderUrlFragmentParamsService, ElderUrlFragmentSwitcherComponent, ElderValidationErrorDirective, ElderViewersModule, EntitySetPatch, ErrorUtil, ExceptionDetailCtx, FileEntry, FileListingRx, FileUploadClient, Filter, FilterContext, FilterUtil, FocusUtil, FormFieldBaseComponent, GlobalDragDropService, HttpClientBuilder, HttpClientPristine, HttpDataTransfer, HttpDataTransferAggregateComponent, HttpDataTransferComponent, HttpDataTransferIndicatorComponent, HttpDataTransferOverviewComponent, HttpParamsBuilder, I18nBase, I18nPickAsyncPipe, I18nPickPipe, I18nText, IFrameState, IframeCloseDirective, IframeDialogComponent, IframeHostComponent, IframeService, IframeSideContentComponent, IncludeExcludeSelectionModel, IncludeExcludeState, IncludeExcludeValue, IndexedEntities, InternalRestClientConfig, Interval, IsoDurationPipe, IsoIntervalFormatUtil, IsoIntervalParsePipe, IsoIntervalPipe, ItemActivationEvent, ItemActivationOptions, JsonMapUtil, KafentConfig, KafentEvent, KafentEventService, KafentEventStream, KafentEventStreamDisabled, KafentEventStreamSse, KafentEventTransport, KafentModule, KafentSseEventChannel, KafentTokenProvider, KafentTokenProviderSessionStorage, KafentTopicSse, KnownElderThemes, KnownLocaleTags, LocalDataFilter, LocalListDataSource, LocalPagedDataSource, LocalisationPickerService, MasterDetailActivationEvent, MasterSelectionState, MatTableDataContextBinding, MatTableDataContextBindingBuilder, MultiModelBaseComponent, NamedColorDirective, NamedColorSelectDirective, NamedColorSelectValueComponent, NextNumberUtil, Objects, OnlineStatus, Page, PageExitGuardModule, PageExitGuardService, PageExitLock, PageRequest, Pageable, ParseUtil, Path, PathNode, PeriodBucket, PeriodDuration, PeriodFormat, ProcessIterationContext, ProcessState, PropertyPathUtil, Quantity, QueryListBinding, QuestionDialogConfig, ReactiveEventSource, ReactiveEventSourceState, ReactiveFetchEventSource, ReactiveFetchEventSourceService, ReactiveMap, ReactiveSSeMessage, RefreshingEntity, ResizeObserverDirective, RestClient, RestClientConfig, RestClientContinuable, RestClientList, RestClientPaged, RoutedTabActivationFailed, SearchInputState, SearchQuery, SelectChipSpecUtil, SelectOptionChipSpecUtil, SelectionModel, SelectionModelPopupDirective, Sets, SimpleLocalisationPicker, SimpleSearchInput, Sort, SortOption, SortUtil, StandardToastComponent, SubBar, SuggestionProvider, TemplateCompositeControl, TemplatedSelectionDialogComponent, TemporalPlainDateInterval, TemporalUtil, ThemeSpec, TimeAgoPipe, TimeDurationPipe, TimeUtil, ToIsoDateStringPipe, ToastType, TokenChunkRequest, ToolbarHeader, Translated, TranslatedConverter, TranslatedEnumValue, TranslatedText, TypedEventMessage, Unit, UnitDimension, UnitDimensionInfo, UnitInfo, UnitRegistry, UnreachableCaseError, UrlBuilder, UrlQueryParams, UuidUtil, ValueAccessorBase, ValueWrapper, ViewDropModelUpdateInstruction, ViewProviders, WeightPipe, alphaNumStringComparator, booleanTransformFn, buildFormIntegrationProviders, coerceInterval, coerceIntervalIsoStr, createDataOptionsProvider, createSelectionModel, elderChipColorLevels, elderChipColorStates, elderNamedColorRoles, elderNamedColorToken, elderNamedColors, existingOrNewElderTableModel, initSearchUrlService, isActivePagedDataContext, isContinuableDataContext, isContinuableDataSource, isDataContext, isDataSource, isDataViewMessageType, isElderEntityValueAccessor, isElderMultiEntityValueAccessor, isListDataSource, isLocalListDataSource, isPagedDataSource, lazySample, lazySampleTime, naturalValueComparator, newElderTableModel, proxyControlContainer, registerLocale, runInZone, themeInit };
 //# sourceMappingURL=elderbyte-ngx-starter.mjs.map