@elderbyte/ngx-starter 19.1.26 → 19.2.0

package/lib/common/selection/selection-model.d.ts

@@ -1,4 +1,5 @@
 import { Observable } from 'rxjs';
+import { Signal } from '@angular/core';
 export type KeyGetterFn<T> = (item: T) => any;
 /**
  * Provides a model of a selection.
@@ -16,6 +17,7 @@ export declare class SelectionModel<T> {
     private _multiple;
     private readonly _selectionMap;
     private readonly _selection;
+    private readonly _selectionSig;
     private _keyGetterFn;
     private _selectableEvaluatorFn;
     static readonly FallbackKeyGetterFn: (a: any) => any;
@@ -40,6 +42,7 @@ export declare class SelectionModel<T> {
      **************************************************************************/
     get changed(): Observable<T[]>;
     get selection(): Observable<T[]>;
+    get selectionSig(): Signal<T[]>;
     get selectionSnapshot(): T[];
     set selectableEvaluatorFn(fn: (item: T) => boolean);
     set keyGetterFn(fn: KeyGetterFn<T>);

package/lib/components/data-view/base/elder-data-view-base.d.ts

@@ -1,13 +1,14 @@
 import { BooleanInput } from '@angular/cdk/coercion';
-import { OnDestroy, OnInit } from '@angular/core';
-import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import { OnDestroy, OnInit, Signal } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
 import { IDataContext, IDataContextActivePage, IDataContextContinuable } from '../../../common/data/data-context/data-context';
 import { SelectionModel } from '../../../common/selection/selection-model';
 import { ElderDataViewInteractionMode, IElderDataView } from './elder-data-view';
 import { ElderDataViewOptionsProvider } from './elder-data-view-options-provider';
-import { MatCardAppearance } from '@angular/material/card';
+import { DataContextStatus } from '../../../common/data/data-context/data-context-status';
+import { PageRequest } from '../../../common/data/page';
 import * as i0 from "@angular/core";
-export declare abstract class ElderDataViewBaseComponent implements IElderDataView, OnInit, OnDestroy {
+export declare abstract class ElderDataViewBaseComponent<T = any> implements IElderDataView, OnInit, OnDestroy {
     protected readonly dataViewOptionsProvider: ElderDataViewOptionsProvider;
     /***************************************************************************
      *                                                                         *
@@ -17,7 +18,7 @@ export declare abstract class ElderDataViewBaseComponent implements IElderDataVi
     /**
      * Underlying data context.
      */
-    readonly dataContext$: BehaviorSubject<IDataContext<any>>;
+    private readonly _dataContext$;
     /**
      * Holds the current selection
      */
@@ -36,20 +37,16 @@ export declare abstract class ElderDataViewBaseComponent implements IElderDataVi
      * Heights are generally reduced.
      */
     private _dense;
-    /**
-     * @deprecated This property is no longer relevant, since we always render the elements as embedded.
-     * The appearance of the surrounding card container.
-     */
-    private _appearance;
-    /**
-     * @deprecated This property is no longer relevant, since we always render the elements as embedded.
-     * If true, this table is in embedded mode.
-     * No borders / floating visible so that the table can be embedded into another container
-     */
-    private _embedded;
     private readonly _itemClickSubject;
     private readonly EntityIdKeyFn;
     protected readonly destroy$: Subject<void>;
+    readonly dc: Signal<IDataContext<T> | undefined>;
+    readonly dcStatus: Signal<DataContextStatus>;
+    readonly total: Signal<string>;
+    readonly canLoadMore: Signal<boolean | undefined>;
+    readonly viewData: Signal<T[] | undefined>;
+    readonly currentPage: Signal<PageRequest | undefined>;
+    readonly currentSelection: Signal<T[] | undefined>;
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
@@ -68,6 +65,7 @@ export declare abstract class ElderDataViewBaseComponent implements IElderDataVi
      * Properties                                                              *
      *                                                                         *
      **************************************************************************/
+    get dataContext$(): Observable<IDataContext<any>>;
     get dataContext(): IDataContext<any>;
     set dataContext(data: IDataContext<any>);
     get dataActivePaged(): IDataContextActivePage<any>;
@@ -99,26 +97,6 @@ export declare abstract class ElderDataViewBaseComponent implements IElderDataVi
      **************************************************************************/
     set dense(value: BooleanInput);
     get dense(): boolean;
-    /**
-     * @deprecated Switch to appearance="raised"
-     */
-    set float(value: BooleanInput);
-    /**
-     * @deprecated , since we always render the elements as embedded.
-     */
-    set appearance(value: MatCardAppearance);
-    /**
-     * @deprecated , since we always render the elements as embedded.
-     */
-    get appearance(): MatCardAppearance;
-    /**
-     * @deprecated , since we always render the elements as embedded.
-     */
-    set embedded(value: boolean | '');
-    /**
-     * @deprecated , since we always render the elements as embedded.
-     */
-    get embedded(): boolean | '';
     /***************************************************************************
      *                                                                         *
      * Event Entry Points                                                      *
@@ -130,19 +108,21 @@ export declare abstract class ElderDataViewBaseComponent implements IElderDataVi
      * @param data
      * @protected
      */
-    protected onDataContextSet(data: IDataContext<any>): void;
-    onItemClick(entity: any): void;
-    onItemDoubleClick(entity: any): void;
-    getId(entity: any): any;
+    protected onDataContextSet(data: IDataContext<T>): void;
+    onItemClick(entity: T): void;
+    onItemDoubleClick(entity: T): void;
+    getId(entity: T): any;
+    abstract hasItemFocus(item: T): boolean;
     /***************************************************************************
      *                                                                         *
      * Private Methods                                                         *
      *                                                                         *
      **************************************************************************/
+    private canLoadMoreObs;
     /**
      * Performs clean up of the current data context if auto clean up is enabled.
      */
     protected autoCleanUp(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ElderDataViewBaseComponent, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderDataViewBaseComponent, never, never, { "interactionMode": { "alias": "interactionMode"; "required": false; }; "cleanUp": { "alias": "cleanUp"; "required": false; }; "selectableEvaluatorFn": { "alias": "selectableEvaluatorFn"; "required": false; }; "selection": { "alias": "selection"; "required": false; }; "selectionMultiEnabled": { "alias": "selectionMultiEnabled"; "required": false; }; "dense": { "alias": "dense"; "required": false; }; "float": { "alias": "float"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "embedded": { "alias": "embedded"; "required": false; }; }, { "selectionChange": "selectionChange"; "selectionSingleChange": "selectionSingleChange"; "itemClick": "itemClick"; }, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderDataViewBaseComponent<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderDataViewBaseComponent<any>, never, never, { "interactionMode": { "alias": "interactionMode"; "required": false; }; "cleanUp": { "alias": "cleanUp"; "required": false; }; "selectableEvaluatorFn": { "alias": "selectableEvaluatorFn"; "required": false; }; "selection": { "alias": "selection"; "required": false; }; "selectionMultiEnabled": { "alias": "selectionMultiEnabled"; "required": false; }; "dense": { "alias": "dense"; "required": false; }; }, { "selectionChange": "selectionChange"; "selectionSingleChange": "selectionSingleChange"; "itemClick": "itemClick"; }, never, never, true, never>;
 }

package/lib/components/data-view/base/elder-data-view.d.ts

@@ -1,7 +1,11 @@
 import { SelectionModel } from '../../../common/selection/selection-model';
 import { InjectionToken } from '@angular/core';
-export declare const ELDER_DATA_VIEW: InjectionToken<IElderDataView>;
+import { Observable } from 'rxjs';
+import { IDataContext } from '../../../common/data/data-context/data-context';
+export declare const ELDER_DATA_VIEW: InjectionToken<IElderDataView<any>>;
 export { ElderDataViewInteractionMode } from '../elder-data-view-interaction-mode';
-export interface IElderDataView {
-    readonly selectionModel: SelectionModel<any>;
+export interface IElderDataView<T = any> {
+    readonly selectionModel: SelectionModel<T>;
+    readonly dataContext$: Observable<IDataContext<T>>;
+    hasItemFocus(item: T): boolean;
 }

package/lib/components/data-view/common/activation/data-view-activation-controller.service.d.ts

@@ -0,0 +1,69 @@
+import { IElderDataView } from '../../base/elder-data-view';
+import { ActivationModel } from './model/activation-model';
+import { ElderActivationOptions } from './elder-activation-options';
+import { ItemActivationOptions } from './model/item-activation-options';
+import { NoInputArgs } from '../../../../common/utils/input-utils';
+import * as i0 from "@angular/core";
+export declare class DataViewActivationController<T> {
+    private readonly activationModel;
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    private dataSource$;
+    private dataInView$;
+    private options;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(dataView: IElderDataView, activationModel: ActivationModel<T>);
+    private bindToViewData;
+    /***************************************************************************
+     *                                                                         *
+     * Public Activation API                                                   *
+     *                                                                         *
+     **************************************************************************/
+    activationOptions(options: ElderActivationOptions | NoInputArgs): void;
+    activateAndFocus(item: T): void;
+    activate(item: T, options: ItemActivationOptions): void;
+    /***************************************************************************
+     *                                                                         *
+     * Public Data API                                                         *
+     *                                                                         *
+     **************************************************************************/
+    nextCloseTo(active: T): T;
+    previousDataItem(): T;
+    nextDataItem(): T;
+    isItemActive(item: T): boolean;
+    hasItemFocus(item: T): boolean;
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    private get data();
+    get activeItem(): T;
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    private previousDataItemInternal;
+    private nextDataItemInternal;
+    private handleAutoActivations;
+    private autoActivateItem;
+    private deactivateById;
+    private get hasActiveItem();
+    private activateFirst;
+    private activateLast;
+    private getCurrentIndex;
+    private getItemAtIndex;
+    private findItemIndex;
+    private itemEqualsId;
+    private getId;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DataViewActivationController<any>, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DataViewActivationController<any>>;
+}

package/lib/components/data-view/common/activation/elder-activation-options.d.ts

@@ -0,0 +1,16 @@
+export type ElderAutoActivationMode = 'never' | 'once' | 'always';
+export type ElderAutoActivateItem = 'first' | 'last';
+export interface ElderActivationOptions {
+    /**
+     * After reaching the last element, start over at the first?
+     */
+    loop?: boolean;
+    /**
+     * Attempt to activate an item when the rows change.
+     */
+    autoActivation?: ElderAutoActivationMode;
+    /**
+     * Activate the specified item, if no other item is currently activated.
+     */
+    autoActivateItem?: ElderAutoActivateItem;
+}

package/lib/components/data-view/common/activation/model/activation-model.d.ts

@@ -0,0 +1,49 @@
+import { Observable } from 'rxjs';
+import { ItemActivationEvent } from './item-activation-event';
+import { ItemActivationOptions } from './item-activation-options';
+import { IElderDataView } from '../../../base/elder-data-view';
+import * as i0 from "@angular/core";
+export declare class ActivationModel<T = any> {
+    private readonly dataView;
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    private readonly log;
+    private readonly itemActivationEventSubject;
+    private readonly _activeItem$;
+    private dataSource$;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(dataView: IElderDataView);
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    get itemActivationEvents(): Observable<ItemActivationEvent<T>>;
+    get activeItem$(): Observable<T>;
+    get activeItem(): T;
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    activate(item: T, options: ItemActivationOptions): void;
+    isItemActive(item: T): boolean;
+    hasItemFocus(item: T): boolean;
+    /***************************************************************************
+     *                                                                         *
+     * Private methods                                                         *
+     *                                                                         *
+     **************************************************************************/
+    private updateActiveItem;
+    private itemEquals;
+    private getId;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ActivationModel<any>, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ActivationModel<any>>;
+}

package/lib/components/data-view/common/activation/public_api.d.ts

@@ -0,0 +1,6 @@
+export * from './model/activation-event-source';
+export * from './model/item-activation-event';
+export * from './model/item-activation-options';
+export * from './model/activation-model';
+export * from './elder-activation-options';
+export * from './data-view-activation-controller.service';

package/lib/components/data-view/common/elder-data-common.module.d.ts

@@ -19,15 +19,6 @@ import * as i17 from "./composite-sort/composite-sort-dc.directive";
 import * as i18 from "./selection/elder-selection-master-checkbox/elder-selection-master-checkbox.component";
 import * as i19 from "./selection/data-context-selection.directive";
 import * as i20 from "./data-context-state-indicator/data-context-state-indicator.component";
-export { ElderSingleSortComponent } from './elder-single-sort/elder-single-sort.component';
-export { ElderCompositeSortComponent } from './composite-sort/elder-composite-sort/elder-composite-sort.component';
-export { ElderCompositeSortDcDirective } from './composite-sort/composite-sort-dc.directive';
-export { CompositeSort } from './composite-sort/composite-sort';
-export { ElderDataToolbarComponent, ElderToolbarContentDirective, ElderToolbarContentSlot, } from './elder-data-toolbar/elder-data-toolbar.component';
-export { ElderSelectionMasterCheckboxComponent } from './selection/elder-selection-master-checkbox/elder-selection-master-checkbox.component';
-export { MasterSelectionState } from './selection/master-selection-state';
-export { DataContextSelectionDirective } from './selection/data-context-selection.directive';
-export { DataContextStateIndicatorComponent } from './data-context-state-indicator/data-context-state-indicator.component';
 export declare class ElderDataCommonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderDataCommonModule, never>;
     static ɵmod: i0.ɵɵNgModuleDeclaration<ElderDataCommonModule, never, [typeof i1.CommonModule, typeof i2.RouterModule, typeof i3.MatDividerModule, typeof i4.MatCheckboxModule, typeof i5.MatMenuModule, typeof i6.MatButtonModule, typeof i7.MatIconModule, typeof i8.MatBadgeModule, typeof i9.MatProgressBarModule, typeof i10.MatDialogModule, typeof i11.MatTooltipModule, typeof i12.TranslateModule, typeof i13.ElderBadgeModule, typeof i14.ElderDataToolbarComponent, typeof i14.ElderToolbarContentDirective, typeof i15.ElderSingleSortComponent, typeof i16.ElderCompositeSortComponent, typeof i17.ElderCompositeSortDcDirective, typeof i18.ElderSelectionMasterCheckboxComponent, typeof i19.DataContextSelectionDirective, typeof i20.DataContextStateIndicatorComponent], [typeof i14.ElderDataToolbarComponent, typeof i14.ElderToolbarContentDirective, typeof i15.ElderSingleSortComponent, typeof i16.ElderCompositeSortComponent, typeof i17.ElderCompositeSortDcDirective, typeof i18.ElderSelectionMasterCheckboxComponent, typeof i19.DataContextSelectionDirective, typeof i20.DataContextStateIndicatorComponent]>;

package/lib/components/data-view/common/public_api.d.ts

@@ -0,0 +1,11 @@
+export { ElderSingleSortComponent } from './elder-single-sort/elder-single-sort.component';
+export { ElderCompositeSortComponent } from './composite-sort/elder-composite-sort/elder-composite-sort.component';
+export { ElderCompositeSortDcDirective } from './composite-sort/composite-sort-dc.directive';
+export { CompositeSort } from './composite-sort/composite-sort';
+export { ElderDataToolbarComponent, ElderToolbarContentDirective, ElderToolbarContentSlot, } from './elder-data-toolbar/elder-data-toolbar.component';
+export { ElderSelectionMasterCheckboxComponent } from './selection/elder-selection-master-checkbox/elder-selection-master-checkbox.component';
+export { MasterSelectionState } from './selection/master-selection-state';
+export { DataContextSelectionDirective } from './selection/data-context-selection.directive';
+export { DataContextStateIndicatorComponent } from './data-context-state-indicator/data-context-state-indicator.component';
+export * from './activation/public_api';
+export { ElderDataCommonModule } from './elder-data-common.module';

package/lib/components/data-view/common/selection/data-context-selection.directive.d.ts

@@ -1,5 +1,5 @@
+import { Signal } from '@angular/core';
 import { SelectionModel } from '../../../../common/selection/selection-model';
-import { Observable } from 'rxjs';
 import { IDataContext } from '../../../../common/data/data-context/data-context';
 import { MasterSelectionState } from './master-selection-state';
 import * as i0 from "@angular/core";
@@ -12,7 +12,7 @@ export declare class DataContextSelectionDirective {
     private readonly log;
     private readonly selectionModel$;
     private readonly dataContext$;
-    readonly selectionState$: Observable<MasterSelectionState>;
+    readonly selectionState: Signal<MasterSelectionState>;
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *

package/lib/components/data-view/common/selection/elder-selection-master-checkbox/elder-selection-master-checkbox.component.d.ts

@@ -1,26 +1,22 @@
-import { OnInit } from '@angular/core';
+import { Signal } from '@angular/core';
 import { DataContextSelectionDirective } from '../data-context-selection.directive';
+import { MasterSelectionState } from '../master-selection-state';
 import * as i0 from "@angular/core";
-export declare class ElderSelectionMasterCheckboxComponent implements OnInit {
+export declare class ElderSelectionMasterCheckboxComponent {
     readonly dataContextSelection: DataContextSelectionDirective;
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
      *                                                                         *
      **************************************************************************/
-    private readonly logger;
+    private readonly log;
+    readonly selectionState: Signal<MasterSelectionState | undefined>;
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
     constructor(dataContextSelection: DataContextSelectionDirective);
-    /***************************************************************************
-     *                                                                         *
-     * Life Cycle                                                              *
-     *                                                                         *
-     **************************************************************************/
-    ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderSelectionMasterCheckboxComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ElderSelectionMasterCheckboxComponent, "elder-selection-master-checkbox", never, {}, {}, never, never, true, never>;
 }

package/lib/components/data-view/grid/activation/elder-grid-activation.directive.d.ts

@@ -0,0 +1,46 @@
+import { DestroyRef } from '@angular/core';
+import { ActivationModel } from '../../common/activation/model/activation-model';
+import { DataViewActivationController } from '../../common/activation/data-view-activation-controller.service';
+import { ElderGridComponent } from '../elder-grid/elder-grid.component';
+import { ElderActivationOptions } from '../../common/activation/elder-activation-options';
+import { NoInputArgs } from '../../../../common/utils/input-utils';
+import { Observable } from 'rxjs';
+import { ItemActivationEvent } from '../../common/activation/model/item-activation-event';
+import { ItemActivationOptions } from '../../common/activation/model/item-activation-options';
+import * as i0 from "@angular/core";
+export declare class ElderGridActivationDirective<T = any> {
+    private readonly elderGrid;
+    private readonly destroyRef;
+    private readonly activationModel;
+    readonly controller: DataViewActivationController<T>;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(elderGrid: ElderGridComponent, destroyRef: DestroyRef, activationModel: ActivationModel<T>, controller: DataViewActivationController<T>);
+    /***************************************************************************
+     *                                                                         *.
+     * Host Listeners                                                          *
+     *                                                                         *
+     **************************************************************************/
+    onKeydown(event: KeyboardEvent): void;
+    /***************************************************************************
+     *                                                                         *
+     * Properties                                                              *
+     *                                                                         *
+     **************************************************************************/
+    set activationOptions(options: ElderActivationOptions | NoInputArgs);
+    get activeItemEventChange(): Observable<ItemActivationEvent<T>>;
+    get activeItemChange(): Observable<T>;
+    get activeItem(): T;
+    set activeItem(item: T);
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    activate(item: T, options: ItemActivationOptions): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderGridActivationDirective<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ElderGridActivationDirective<any>, "[elderGridActivation]", never, { "activationOptions": { "alias": "elderTableActivation"; "required": false; }; "activeItem": { "alias": "activeItem"; "required": false; }; }, { "activeItemEventChange": "activeItemEventChange"; "activeItemChange": "activeItemChange"; }, never, never, true, never>;
+}

package/lib/components/data-view/grid/elder-grid/elder-grid.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, OnInit, TemplateRef, TrackByFunction, ViewContainerRef } from '@angular/core';
+import { AfterViewInit, OnInit, Signal, TemplateRef, TrackByFunction, ViewContainerRef } from '@angular/core';
 import { Observable } from 'rxjs';
 import { IDataContext, IDataContextContinuable } from '../../../../common/data/data-context/data-context';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
@@ -8,6 +8,7 @@ import { MatPaginator } from '@angular/material/paginator';
 import { ElderDataViewOptionsProvider } from '../../base/elder-data-view-options-provider';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { CompositeSort } from '../../common/composite-sort/composite-sort';
+import { ElderTileComponent } from '../elder-tile/elder-tile.component';
 import * as i0 from "@angular/core";
 declare class GridRow<T> {
     readonly id: string;
@@ -31,7 +32,7 @@ export declare class ElderGridToolbarDirective {
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderGridToolbarDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<ElderGridToolbarDirective, "[elderGridToolbar]", never, {}, {}, never, never, true, never>;
 }
-export declare class ElderGridComponent<T = any> extends ElderDataViewBaseComponent implements OnInit, AfterViewInit {
+export declare class ElderGridComponent<T = any> extends ElderDataViewBaseComponent<T> implements OnInit, AfterViewInit {
     private breakpointObserver;
     /***************************************************************************
      *                                                                         *
@@ -48,23 +49,19 @@ export declare class ElderGridComponent<T = any> extends ElderDataViewBaseCompon
     readonly scrollContainerId: string;
     readonly TrackGridRowByIdFn: TrackByFunction<GridRow<T>>;
     dataRows$: Observable<GridRow<T>[]>;
-    canLoadMore$: Observable<boolean>;
-    total$: Observable<string>;
     tileTemplateQuery: TemplateRef<any>;
     private _tileTemplate;
     toolbarVisible: boolean;
     footerVisible: boolean;
     itemHeight: number;
+    readonly tileOutlined: import("@angular/core").InputSignalWithTransform<boolean, import("@angular/cdk/coercion").BooleanInput>;
     responsiveColumnCount: boolean;
     virtualScrollViewPort: CdkVirtualScrollViewport;
+    readonly tiles: Signal<readonly ElderTileComponent<any>[]>;
     availableCompositeSorts: CompositeSort[];
     set availableSorts(availableSorts: string[] | CompositeSort[]);
     sortTranslationPrefix: string;
     hiddenField: string;
-    /**
-     * @deprecated No longer required. Id is automatically picked from the DataSource.
-     */
-    idField: string;
     selectionVisible: boolean;
     pageSizeOptions: number[];
     matPaginator: MatPaginator;
@@ -101,9 +98,9 @@ export declare class ElderGridComponent<T = any> extends ElderDataViewBaseCompon
      * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    inSelectionMode(currentSelection: any[]): boolean;
     requestMoreDataZoned(event: unknown): void;
-    showTile(tile: any): boolean;
+    isTileVisible(tile: any): boolean;
+    hasItemFocus(item: T): boolean;
     /***************************************************************************
      *                                                                         *
      * Private Methods                                                         *
@@ -114,7 +111,8 @@ export declare class ElderGridComponent<T = any> extends ElderDataViewBaseCompon
     private rowId;
     private responsiveColumn;
     private activeColumnCount;
+    private getTileForItem;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderGridComponent<any>, [{ optional: true; }, { optional: true; skipSelf: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElderGridComponent<any>, "elder-grid", never, { "toolbarVisible": { "alias": "toolbarVisible"; "required": false; }; "footerVisible": { "alias": "footerVisible"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; "responsiveColumnCount": { "alias": "responsiveColumnCount"; "required": false; }; "availableSorts": { "alias": "availableSorts"; "required": false; }; "sortTranslationPrefix": { "alias": "sortTranslationPrefix"; "required": false; }; "hiddenField": { "alias": "hiddenField"; "required": false; }; "idField": { "alias": "idField"; "required": false; }; "selectionVisible": { "alias": "selectionVisible"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; "tileTemplate": { "alias": "tileTemplate"; "required": false; }; "toolbarTemplate": { "alias": "toolbarTemplate"; "required": false; }; "data": { "alias": "data"; "required": false; }; "columnCount": { "alias": "columnCount"; "required": false; }; }, {}, ["tileTemplateQuery", "toolbarTemplateQuery"], never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderGridComponent<any>, "elder-grid", never, { "toolbarVisible": { "alias": "toolbarVisible"; "required": false; }; "footerVisible": { "alias": "footerVisible"; "required": false; }; "itemHeight": { "alias": "itemHeight"; "required": false; }; "tileOutlined": { "alias": "tileOutlined"; "required": false; "isSignal": true; }; "responsiveColumnCount": { "alias": "responsiveColumnCount"; "required": false; }; "availableSorts": { "alias": "availableSorts"; "required": false; }; "sortTranslationPrefix": { "alias": "sortTranslationPrefix"; "required": false; }; "hiddenField": { "alias": "hiddenField"; "required": false; }; "selectionVisible": { "alias": "selectionVisible"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; "tileTemplate": { "alias": "tileTemplate"; "required": false; }; "toolbarTemplate": { "alias": "toolbarTemplate"; "required": false; }; "data": { "alias": "data"; "required": false; }; "columnCount": { "alias": "columnCount"; "required": false; }; }, {}, ["tileTemplateQuery", "toolbarTemplateQuery"], never, true, never>;
 }
 export {};

package/lib/components/data-view/grid/elder-grid.module.d.ts

@@ -1,25 +1,28 @@
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
-import * as i2 from "@angular/material/core";
-import * as i3 from "@angular/material/progress-bar";
-import * as i4 from "@angular/material/menu";
-import * as i5 from "@angular/cdk/a11y";
-import * as i6 from "@angular/material/divider";
-import * as i7 from "@angular/material/icon";
-import * as i8 from "@angular/material/button";
-import * as i9 from "@angular/material/select";
-import * as i10 from "@angular/cdk/drag-drop";
-import * as i11 from "@angular/cdk/scrolling";
-import * as i12 from "@ngx-translate/core";
-import * as i13 from "../common/elder-data-common.module";
-import * as i14 from "../../infinitescroll/elder-infinite-scroll.module";
-import * as i15 from "../../forms/directives/elder-forms-directives.module";
-import * as i16 from "@angular/material/paginator";
-import * as i17 from "@angular/material/card";
+import * as i2 from "@angular/material/progress-bar";
+import * as i3 from "@angular/material/menu";
+import * as i4 from "@angular/cdk/a11y";
+import * as i5 from "@angular/material/divider";
+import * as i6 from "@angular/material/icon";
+import * as i7 from "@angular/material/button";
+import * as i8 from "@angular/material/select";
+import * as i9 from "@angular/cdk/drag-drop";
+import * as i10 from "@angular/cdk/scrolling";
+import * as i11 from "@ngx-translate/core";
+import * as i12 from "../common/elder-data-common.module";
+import * as i13 from "../../infinitescroll/elder-infinite-scroll.module";
+import * as i14 from "../../forms/directives/elder-forms-directives.module";
+import * as i15 from "@angular/material/paginator";
+import * as i16 from "@angular/material/card";
+import * as i17 from "./elder-tile/elder-tile.component";
 import * as i18 from "./elder-grid/elder-grid.component";
+import * as i19 from "./activation/elder-grid-activation.directive";
 export { ElderGridTileDirective, ElderGridToolbarDirective, ElderGridComponent, } from './elder-grid/elder-grid.component';
+export { ElderTileComponent } from './elder-tile/elder-tile.component';
+export { ElderGridActivationDirective } from './activation/elder-grid-activation.directive';
 export declare class ElderGridModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderGridModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderGridModule, never, [typeof i1.CommonModule, typeof i2.MatCommonModule, typeof i3.MatProgressBarModule, typeof i4.MatMenuModule, typeof i5.A11yModule, typeof i6.MatDividerModule, typeof i7.MatIconModule, typeof i8.MatButtonModule, typeof i9.MatSelectModule, typeof i10.DragDropModule, typeof i11.ScrollingModule, typeof i12.TranslateModule, typeof i13.ElderDataCommonModule, typeof i14.ElderInfiniteScrollModule, typeof i15.ElderFormsDirectivesModule, typeof i16.MatPaginatorModule, typeof i17.MatCardModule, typeof i18.ElderGridComponent, typeof i18.ElderGridTileDirective, typeof i18.ElderGridToolbarDirective], [typeof i18.ElderGridComponent, typeof i18.ElderGridTileDirective, typeof i18.ElderGridToolbarDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ElderGridModule, never, [typeof i1.CommonModule, typeof i2.MatProgressBarModule, typeof i3.MatMenuModule, typeof i4.A11yModule, typeof i5.MatDividerModule, typeof i6.MatIconModule, typeof i7.MatButtonModule, typeof i8.MatSelectModule, typeof i9.DragDropModule, typeof i10.ScrollingModule, typeof i11.TranslateModule, typeof i12.ElderDataCommonModule, typeof i13.ElderInfiniteScrollModule, typeof i14.ElderFormsDirectivesModule, typeof i15.MatPaginatorModule, typeof i16.MatCardModule, typeof i17.ElderTileComponent, typeof i18.ElderGridComponent, typeof i18.ElderGridTileDirective, typeof i18.ElderGridToolbarDirective, typeof i19.ElderGridActivationDirective], [typeof i17.ElderTileComponent, typeof i18.ElderGridComponent, typeof i18.ElderGridTileDirective, typeof i18.ElderGridToolbarDirective, typeof i19.ElderGridActivationDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ElderGridModule>;
 }

package/lib/components/data-view/grid/elder-tile/elder-tile.component.d.ts

@@ -0,0 +1,53 @@
+import { ElementRef, Signal } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { SelectionModel } from '../../../../common/selection/selection-model';
+import { ElderDataViewInteractionMode } from '../../elder-data-view-interaction-mode';
+import { ActivationModel } from '../../common/activation/model/activation-model';
+import * as i0 from "@angular/core";
+export declare class ElderTileComponent<T = any> {
+    private readonly activationModel;
+    /***************************************************************************
+     *                                                                         *
+     * Fields                                                                  *
+     *                                                                         *
+     **************************************************************************/
+    readonly value: import("@angular/core").InputSignal<T>;
+    readonly selectionEnabled: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    readonly selectionModel: import("@angular/core").InputSignal<SelectionModel<T>>;
+    readonly interactionMode: import("@angular/core").InputSignal<ElderDataViewInteractionMode>;
+    readonly outlined: import("@angular/core").InputSignalWithTransform<boolean, BooleanInput>;
+    private readonly logger;
+    private readonly _activated;
+    private readonly _focused;
+    readonly focusable: boolean;
+    readonly elderTileRef: Signal<ElementRef<any>>;
+    /***************************************************************************
+     *                                                                         *
+     * Constructor                                                             *
+     *                                                                         *
+     **************************************************************************/
+    constructor(activationModel: ActivationModel);
+    private handleActivationEvent;
+    private isItemActive;
+    private updateTileActivation;
+    /***************************************************************************
+     *                                                                         *
+     * Host Listener                                                           *
+     *                                                                         *
+     **************************************************************************/
+    onFocus(event: any): void;
+    onBlur(event: any): void;
+    onClick(): void;
+    get activated(): Signal<boolean>;
+    get hasFocus(): boolean;
+    /***************************************************************************
+     *                                                                         *
+     * Public API                                                              *
+     *                                                                         *
+     **************************************************************************/
+    inSelectionMode(currentSelection: any[]): boolean;
+    bringToView(): void;
+    focus(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderTileComponent<any>, [{ optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderTileComponent<any>, "elder-tile", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "selectionEnabled": { "alias": "selectionEnabled"; "required": false; "isSignal": true; }; "selectionModel": { "alias": "selectionModel"; "required": false; "isSignal": true; }; "interactionMode": { "alias": "interactionMode"; "required": false; "isSignal": true; }; "outlined": { "alias": "outlined"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}

package/lib/components/data-view/master-detail/elder-master-detail.service.d.ts

@@ -2,7 +2,7 @@ import { OnDestroy } from '@angular/core';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import { ElderMasterDetailMode } from './elder-master-detail-mode';
 import { MasterDetailActivationEvent } from './master-detail-activation-event';
-import { ActivationEventSource } from '../table/activation/activation-event-source';
+import { ActivationEventSource } from '../common/activation/model/activation-event-source';
 import * as i0 from "@angular/core";
 export interface IMasterDetailActivationOptions {
     source: ActivationEventSource;