@elderbyte/ngx-starter 19.1.26 → 19.2.0

package/lib/components/data-view/master-detail/master-detail-activation-event.d.ts

@@ -1,4 +1,4 @@
-import { ActivationEventSource } from '../table/activation/activation-event-source';
+import { ActivationEventSource } from '../common/activation/model/activation-event-source';
 export declare class MasterDetailActivationEvent<T> {
     readonly item: T;
     readonly creating: boolean;

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

@@ -1,5 +1,5 @@
 export * from './base/public_api';
-export * from './common/elder-data-common.module';
+export * from './common/public_api';
 export * from './table/elder-table.module';
 export * from './simple/elder-simple-selection-view/elder-simple-selection-view.module';
 export * from './grid/elder-grid.module';

package/lib/components/data-view/table/activation/elder-delete-active.directive.d.ts

@@ -1,9 +1,12 @@
-import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
-import { ElderTableActivationDirective } from './elder-table-activation.directive';
+import { DestroyRef, EventEmitter, OnInit } from '@angular/core';
 import { ElderDialogService } from '../../../dialogs/elder-dialog.service';
+import { DataViewActivationController } from '../../common/activation/data-view-activation-controller.service';
+import { ElderTableComponent } from '../elder-table/elder-table.component';
 import * as i0 from "@angular/core";
-export declare class ElderDeleteActiveDirective<T = any> implements OnInit, OnDestroy {
-    private readonly activation;
+export declare class ElderDeleteActiveDirective<T = any> implements OnInit {
+    private readonly elderTable;
+    private readonly destroyRef;
+    private readonly activationController;
     private readonly elderDialog;
     /***************************************************************************
      *                                                                         *
@@ -12,11 +15,7 @@ export declare class ElderDeleteActiveDirective<T = any> implements OnInit, OnDe
      **************************************************************************/
     private readonly logger;
     private latestDeleteRequest;
-    private readonly destroy$;
-    /**
-     * Emits when the active item should be deleted.
-     */
-    readonly requestDelete: EventEmitter<T>;
+    private readonly requestDelete;
     /**
      * Emits when the active item should be deleted.
      */
@@ -27,14 +26,13 @@ export declare class ElderDeleteActiveDirective<T = any> implements OnInit, OnDe
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(activation: ElderTableActivationDirective<any>, elderDialog: ElderDialogService);
+    constructor(elderTable: ElderTableComponent, destroyRef: DestroyRef, activationController: DataViewActivationController<T>, elderDialog: ElderDialogService);
     /***************************************************************************
      *                                                                         *
      * Life Cycle                                                              *
      *                                                                         *
      **************************************************************************/
     ngOnInit(): void;
-    ngOnDestroy(): void;
     /***************************************************************************
      *                                                                         *.
      * Host Listeners                                                          *

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

@@ -1,40 +1,30 @@
-import { AfterViewInit, OnDestroy } from '@angular/core';
-import { ElderTableRowDirective } from '../elder-table-row.directive';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { DestroyRef } from '@angular/core';
+import { Observable } from 'rxjs';
 import { ElderTableComponent } from '../elder-table/elder-table.component';
-import { ElderTableActivationOptions } from './elder-table-activation-options';
-import { ItemActivationOptions } from './item-activation-options';
-import { ItemActivationEvent } from './item-activation-event';
-import { ElderActivationContext } from './elder-activation-context';
+import { ElderActivationOptions } from '../../common/activation/elder-activation-options';
+import { ItemActivationOptions } from '../../common/activation/model/item-activation-options';
+import { ItemActivationEvent } from '../../common/activation/model/item-activation-event';
 import { NoInputArgs } from '../../../../common/utils/input-utils';
+import { ActivationModel } from '../../common/activation/model/activation-model';
+import { DataViewActivationController } from '../../common/activation/data-view-activation-controller.service';
 import * as i0 from "@angular/core";
-export declare class ElderTableActivationDirective<T> implements ElderActivationContext<T>, AfterViewInit, OnDestroy {
+export declare class ElderTableActivationDirective<T> {
     private readonly elderTable;
+    private readonly destroyRef;
+    private readonly activationModel;
+    readonly controller: DataViewActivationController<T>;
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
      *                                                                         *
      **************************************************************************/
     private readonly logger;
-    private readonly destroy$;
-    private readonly itemActivationEventSubject;
-    private _data;
-    readonly activeItem$: BehaviorSubject<T>;
-    readonly rows$: BehaviorSubject<ElderTableRowDirective<T>[]>;
-    private _activationOptions;
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(elderTable: ElderTableComponent);
-    /***************************************************************************
-     *                                                                         *
-     * Life Cycle                                                              *
-     *                                                                         *
-     **************************************************************************/
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
+    constructor(elderTable: ElderTableComponent, destroyRef: DestroyRef, activationModel: ActivationModel<T>, controller: DataViewActivationController<T>);
     /***************************************************************************
      *                                                                         *.
      * Host Listeners                                                          *
@@ -46,8 +36,7 @@ export declare class ElderTableActivationDirective<T> implements ElderActivation
      * Properties                                                              *
      *                                                                         *
      **************************************************************************/
-    set activationOptions(options: ElderTableActivationOptions | NoInputArgs);
-    get activationOptions(): ElderTableActivationOptions;
+    set activationOptions(options: ElderActivationOptions | NoInputArgs);
     get activeItemEventChange(): Observable<ItemActivationEvent<T>>;
     get activeItemChange(): Observable<T>;
     get activeItem(): T;
@@ -59,32 +48,6 @@ export declare class ElderTableActivationDirective<T> implements ElderActivation
      **************************************************************************/
     activate(item: T, options: ItemActivationOptions): void;
     activateAndFocus(item: T): void;
-    isItemActive(item: T): boolean;
-    hasItemFocus(item: T): boolean;
-    nextCloseTo(active: T): T;
-    /***************************************************************************
-     *                                                                         *
-     * Private methods                                                         *
-     *                                                                         *
-     **************************************************************************/
-    private updateActiveItem;
-    private updateRowsActivation;
-    private updateRowActivation;
-    private rowDataUpdated;
-    private deactivateById;
-    private getRowForItem;
-    private handleAutoActivations;
-    private get hasActiveItem();
-    private activateFirst;
-    private activateLast;
-    private previousRowItem;
-    private nextRowItem;
-    private getCurrentIndex;
-    private getItemAtIndex;
-    private findItemIndex;
-    private itemEquals;
-    private itemEqualsId;
-    private getId;
     static ɵfac: i0.ɵɵFactoryDeclaration<ElderTableActivationDirective<any>, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<ElderTableActivationDirective<any>, "elder-table[elderTableActivation]", ["elderTableActivation"], { "activationOptions": { "alias": "elderTableActivation"; "required": false; }; "activeItem": { "alias": "activeItem"; "required": false; }; }, { "activeItemEventChange": "activeItemEventChange"; "activeItemChange": "activeItemChange"; }, never, never, true, never>;
 }

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

@@ -1,7 +1,2 @@
-export * from './activation-event-source';
-export * from './item-activation-event';
-export * from './elder-activation-context';
 export * from './elder-delete-active.directive';
 export * from './elder-table-activation.directive';
-export * from './elder-table-activation-options';
-export * from './item-activation-options';

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

@@ -1,9 +1,9 @@
-import { AfterContentInit, AfterViewInit, ChangeDetectorRef, NgZone, OnInit, QueryList, TemplateRef, TrackByFunction } from '@angular/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, NgZone, OnInit, QueryList, Signal, TemplateRef, TrackByFunction } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { IDataContext } from '../../../../common/data/data-context/data-context';
 import { SelectionModel } from '../../../../common/selection/selection-model';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { BehaviorSubject } from 'rxjs';
 import { CdkColumnDef, CdkRowDef, CdkTable } from '@angular/cdk/table';
 import { ElderTableRowDirective } from '../elder-table-row.directive';
 import { IDataSource } from '../../../../common/data/datasource/data-source';
@@ -13,7 +13,7 @@ import { ElderTableExtensionDirective } from '../elder-table-extension.directive
 import { ElderTableColumnDirective } from '../elder-table-column.directive';
 import { ElderDataViewOptionsProvider } from '../../base/elder-data-view-options-provider';
 import * as i0 from "@angular/core";
-export declare class ElderTableComponent extends ElderDataViewBaseComponent implements OnInit, AfterContentInit, AfterViewInit {
+export declare class ElderTableComponent<T = any> extends ElderDataViewBaseComponent<T> implements OnInit, AfterContentInit, AfterViewInit {
     readonly tableModel: ElderTableModel;
     private readonly parentExtension;
     private cdr;
@@ -23,7 +23,7 @@ export declare class ElderTableComponent extends ElderDataViewBaseComponent impl
      * Fields                                                                  *
      *                                                                         *
      **************************************************************************/
-    private readonly logger;
+    private readonly log;
     /**
      * Load next chunk after current is done
      */
@@ -61,13 +61,11 @@ export declare class ElderTableComponent extends ElderDataViewBaseComponent impl
     keepSelection: boolean;
     showFooter: boolean;
     denseHorizontal: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-    canLoadMore$: Observable<boolean>;
-    total$: Observable<string>;
     /**
      * The table toolbar
      */
     toolbarRowTemplateQuery: QueryList<TemplateRef<any>>;
-    readonly toolbarRowTemplates$: BehaviorSubject<TemplateRef<any>[]>;
+    readonly toolbarRowTemplates: import("@angular/core").WritableSignal<TemplateRef<any>[]>;
     /**
      * Selection model life cycle
      */
@@ -76,18 +74,19 @@ export declare class ElderTableComponent extends ElderDataViewBaseComponent impl
     /**
      * Gets the current rows of this table.
      */
-    readonly rows$: BehaviorSubject<ElderTableRowDirective<any>[]>;
+    readonly rows$: BehaviorSubject<ElderTableRowDirective<T>[]>;
     /**
      * The index of this table group extension
      * @private
      */
     private readonly _extensionGroupIndex;
+    readonly displayedColumnsInner: Signal<string[] | undefined>;
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(tableModel: ElderTableModel, selectionModel: SelectionModel<any>, dataViewOptionsProvider: ElderDataViewOptionsProvider, matSort: MatSort, parentExtension: ElderTableExtensionDirective, cdr: ChangeDetectorRef, zone: NgZone);
+    constructor(tableModel: ElderTableModel, selectionModel: SelectionModel<T>, dataViewOptionsProvider: ElderDataViewOptionsProvider, matSort: MatSort, parentExtension: ElderTableExtensionDirective, cdr: ChangeDetectorRef, zone: NgZone);
     /***************************************************************************
      *                                                                         *
      * Life Cycle                                                              *
@@ -105,8 +104,8 @@ export declare class ElderTableComponent extends ElderDataViewBaseComponent impl
      * @deprecated
      */
     set toolbarTemplate(template: TemplateRef<any>);
-    set data(data: Array<any> | IDataSource<any> | IDataContext<any>);
-    protected onDataContextSet(data: IDataContext<any>): void;
+    set data(data: Array<T> | IDataSource<T> | IDataContext<T>);
+    protected onDataContextSet(data: IDataContext<T>): void;
     set displayedColumns(displayedColumns: string[]);
     get displayedColumns(): string[];
     /** Indicates if selection column is shown. */
@@ -118,14 +117,16 @@ export declare class ElderTableComponent extends ElderDataViewBaseComponent impl
      *                                                                         *
      **************************************************************************/
     requestMoreDataZoned(event: unknown): void;
-    get trackByFn(): TrackByFunction<any>;
-    isDataValid(data: any): boolean;
+    get trackByFn(): TrackByFunction<T>;
+    isDataValid(data: T[]): boolean;
+    hasItemFocus(item: T): boolean;
     /***************************************************************************
      *                                                                         *
      * Private Methods                                                         *
      *                                                                         *
      **************************************************************************/
     private setupSelectionLifeCycle;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ElderTableComponent, [null, { optional: true; }, { optional: true; skipSelf: true; }, { optional: true; }, { optional: true; skipSelf: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElderTableComponent, "elder-table", never, { "idField": { "alias": "idField"; "required": false; }; "removingField": { "alias": "removingField"; "required": false; }; "hiddenField": { "alias": "hiddenField"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; "keepSelection": { "alias": "keepSelection"; "required": false; }; "showFooter": { "alias": "showFooter"; "required": false; }; "denseHorizontal": { "alias": "denseHorizontal"; "required": false; "isSignal": true; }; "toolbarTemplate": { "alias": "toolbarTemplate"; "required": false; }; "data": { "alias": "data"; "required": false; }; "displayedColumns": { "alias": "displayedColumns"; "required": false; }; "selectionVisible": { "alias": "selectionVisible"; "required": false; }; }, {}, ["columnDefs", "elderColumns", "rowDefs", "toolbarRowTemplateQuery"], never, true, never>;
+    private getRowForItem;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderTableComponent<any>, [null, { optional: true; }, { optional: true; skipSelf: true; }, { optional: true; }, { optional: true; skipSelf: true; }, null, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderTableComponent<any>, "elder-table", never, { "idField": { "alias": "idField"; "required": false; }; "removingField": { "alias": "removingField"; "required": false; }; "hiddenField": { "alias": "hiddenField"; "required": false; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; }; "keepSelection": { "alias": "keepSelection"; "required": false; }; "showFooter": { "alias": "showFooter"; "required": false; }; "denseHorizontal": { "alias": "denseHorizontal"; "required": false; "isSignal": true; }; "toolbarTemplate": { "alias": "toolbarTemplate"; "required": false; }; "data": { "alias": "data"; "required": false; }; "displayedColumns": { "alias": "displayedColumns"; "required": false; }; "selectionVisible": { "alias": "selectionVisible"; "required": false; }; }, {}, ["columnDefs", "elderColumns", "rowDefs", "toolbarRowTemplateQuery"], never, true, never>;
 }

package/lib/components/data-view/table/elder-table-row.directive.d.ts

@@ -1,9 +1,10 @@
 import { ElementRef, Renderer2 } from '@angular/core';
-import { ElderActivationContext } from './activation/elder-activation-context';
+import { ActivationModel } from '../common/activation/model/activation-model';
 import * as i0 from "@angular/core";
 export declare class ElderTableRowDirective<T> {
     private readonly rowRef;
     private readonly renderer;
+    private readonly activationModel;
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
@@ -12,14 +13,16 @@ export declare class ElderTableRowDirective<T> {
     private readonly logger;
     private _activated;
     private _model;
-    private readonly _activationDir$;
-    private readonly focused$;
+    private readonly _focused;
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(rowRef: ElementRef<HTMLTableRowElement>, renderer: Renderer2);
+    constructor(rowRef: ElementRef<HTMLTableRowElement>, renderer: Renderer2, activationModel: ActivationModel);
+    private handleActivationEvent;
+    private isItemActive;
+    private updateRowActivation;
     /***************************************************************************
      *                                                                         *
      * Host Listener                                                           *
@@ -33,8 +36,8 @@ export declare class ElderTableRowDirective<T> {
      * Host Bindings                                                           *
      *                                                                         *
      **************************************************************************/
-    get activated(): boolean;
-    set activated(value: boolean);
+    private get activated();
+    private set activated(value);
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
@@ -48,7 +51,6 @@ export declare class ElderTableRowDirective<T> {
      * Public API                                                              *
      *                                                                         *
      **************************************************************************/
-    bindTableActivation(activationDir: ElderActivationContext<T>): void;
     bringToView(): void;
     focus(): void;
     /***************************************************************************
@@ -58,6 +60,6 @@ export declare class ElderTableRowDirective<T> {
      **************************************************************************/
     private enableRowFocus;
     private activatedClassEnabled;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ElderTableRowDirective<any>, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderTableRowDirective<any>, [null, null, { optional: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<ElderTableRowDirective<any>, "tr[elderTableRow]", ["elderTableRow"], { "model": { "alias": "elderTableRow"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/components/i18n/entities/elder-localized-input-table/elder-localized-input-table.component.d.ts

@@ -23,7 +23,13 @@ export declare class ElderLocalizedInputTableComponent<T extends Localized> exte
     readonly textColumns$: BehaviorSubject<ElderLocalizedTextColumnDirective[]>;
     readonly defaultLanguageTags$: BehaviorSubject<string[]>;
     dense: boolean;
+    /**
+     * @deprecated No longer supported
+     */
     float: boolean;
+    /**
+     * @deprecated No longer supported
+     */
     embedded: boolean;
     private readonly destroy$;
     /***************************************************************************

package/lib/components/select-chip-list/chip-list-select/elder-chip-list-select.component.d.ts

@@ -1,17 +1,21 @@
 import { EventEmitter } from '@angular/core';
 import { SelectionModel } from '../../../common/selection/selection-model';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { IElderDataView } from '../../data-view/base/elder-data-view';
+import { Observable } from 'rxjs';
 import { ThemePalette } from '@angular/material/core';
+import { IDataContext } from '../../../common/data/data-context/data-context';
+import { IDataSource } from '../../../common/data/datasource/data-source';
 import * as i0 from "@angular/core";
-export declare class ElderChipListSelectComponent {
-    selectionModel: SelectionModel<any>;
+export declare class ElderChipListSelectComponent<T = any> implements IElderDataView {
+    selectionModel: SelectionModel<T>;
     /***************************************************************************
      *                                                                         *
      * Fields                                                                  *
      *                                                                         *
      **************************************************************************/
     private readonly log;
-    data$: BehaviorSubject<any[]>;
+    private readonly _dataSource$;
+    private readonly _dataContext$;
     /**
      * The property used to compare two values.
      * Useful if the values are entities with an id property.
@@ -30,20 +34,24 @@ export declare class ElderChipListSelectComponent {
      */
     stacked: false;
     itemClick: EventEmitter<any>;
+    readonly data$: Observable<T[]>;
     /***************************************************************************
      *                                                                         *
      * Constructor                                                             *
      *                                                                         *
      **************************************************************************/
-    constructor(selectionModel: SelectionModel<any>);
+    constructor(selectionModel: SelectionModel<T>);
+    hasItemFocus(item: any): boolean;
     /***************************************************************************
      *                                                                         *
      * Properties                                                              *
      *                                                                         *
      **************************************************************************/
-    set data(data: any[]);
-    set selection(selection: any[]);
-    get selectionChange(): Observable<any[]>;
+    set data(data: T[]);
+    set dataSource(dataSource: IDataSource<T>);
+    get dataContext$(): Observable<IDataContext<T>>;
+    set selection(selection: T[]);
+    get selectionChange(): Observable<T[]>;
     get selectionSingleChange(): Observable<any>;
     set selectionMultiEnabled(enableMultiSelection: boolean);
     /***************************************************************************
@@ -68,6 +76,6 @@ export declare class ElderChipListSelectComponent {
      *                                                                         *
      **************************************************************************/
     private getId;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ElderChipListSelectComponent, [{ optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ElderChipListSelectComponent, " elder-chip-list-select", never, { "data$": { "alias": "data$"; "required": false; }; "idField": { "alias": "idField"; "required": false; }; "displayField": { "alias": "displayField"; "required": false; }; "color": { "alias": "color"; "required": false; }; "stacked": { "alias": "stacked"; "required": false; }; "data": { "alias": "data"; "required": false; }; "selection": { "alias": "selection"; "required": false; }; "selectionMultiEnabled": { "alias": "selectionMultiEnabled"; "required": false; }; }, { "itemClick": "itemClick"; "selectionChange": "selectionChange"; "selectionSingleChange": "selectionSingleChange"; }, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ElderChipListSelectComponent<any>, [{ optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ElderChipListSelectComponent<any>, " elder-chip-list-select", never, { "idField": { "alias": "idField"; "required": false; }; "displayField": { "alias": "displayField"; "required": false; }; "color": { "alias": "color"; "required": false; }; "stacked": { "alias": "stacked"; "required": false; }; "data": { "alias": "data"; "required": false; }; "dataSource": { "alias": "dataSource"; "required": false; }; "selection": { "alias": "selection"; "required": false; }; "selectionMultiEnabled": { "alias": "selectionMultiEnabled"; "required": false; }; }, { "itemClick": "itemClick"; "selectionChange": "selectionChange"; "selectionSingleChange": "selectionSingleChange"; }, never, never, true, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "19.1.26",
+  "version": "19.2.0",
   "peerDependencies": {
     "@angular/core": "^18.0.0 || ^19.0.0",
     "@angular/common": "^18.0.0 || ^19.0.0",

package/src/lib/components/data-view/grid/elder-grid/elder-grid.component.scss

@@ -1,5 +1,14 @@
 $elder-tile-padding: 8px;
 
+.elder-grid-tile {
+  flex: 0 1 100%;
+  flex-grow: 1;
+  margin: 0 $elder-tile-padding;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
 .elder-grid-tile-row {
   display: flex;
   flex-direction: row;
@@ -16,36 +25,6 @@ $elder-tile-padding: 8px;
   height: 100%;
 }
 
-.elder-grid-tile-content {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.elder-grid-tile-overlay {
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  transition:
-    background-color 0.1s ease-in,
-    opacity 0.1s ease-in;
-}
-
-.elder-click-through {
-  pointer-events: none;
-}
-
-.elder-grid-tile-overlay-visible {
-  opacity: 1;
-}
-
-.elder-grid-tile-overlay-hidden {
-  opacity: 0;
-}
-
 .elder-grid-container {
   background-color: var(--elder-grid-background-color);
 }
@@ -65,53 +44,3 @@ $elder-tile-padding: 8px;
 .elder-grid-footer {
   min-height: var(--elder-data-element-footer-height);
 }
-
-.elder-grid-tile {
-  overflow: hidden;
-  flex: 0 1 100%;
-  flex-grow: 1;
-  margin: 0 $elder-tile-padding;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-  border-radius: var(--elder-pane-border-radius);
-  background-color: var(--md-sys-color-surface-container-low);
-  text-align: left;
-  transition:
-    box-shadow 200ms cubic-bezier(0, 0, 0.2, 1),
-    border 0.25s linear;
-}
-
-.elder-grid-tile:hover {
-  //border-color: rgba(var(--md-sys-color-primary), 0.75);
-  border-color: var(--md-sys-color-primary);
-}
-
-.elder-grid-tile-content:hover .elder-grid-tile-overlay {
-  opacity: 1;
-  background-color: rgba(white, 0.08);
-}
-
-.elder-grid-tile:active {
-  z-index: 100;
-  box-shadow: var(--elder-box-shadow-default);
-}
-
-.elder-grid-tile-check {
-  pointer-events: auto;
-  mat-icon {
-    color: var(--md-sys-color-outline-variant);
-    background-color: var(--md-sys-color-surface);
-    border-radius: 12px;
-  }
-
-  mat-icon.elder-selected {
-    color: var(--md-sys-color-tertiary);
-  }
-}
-
-.elder-grid-tile-check:hover {
-  mat-icon {
-    color: var(--md-sys-color-primary);
-  }
-}

package/src/lib/components/data-view/grid/elder-tile/elder-tile.component.scss

@@ -0,0 +1,110 @@
+.elder-tile {
+  border-radius: var(--elder-pane-border-radius);
+  background-color: var(--md-sys-color-surface-container-low);
+  text-align: left;
+  overflow: hidden;
+  transition:
+    box-shadow 200ms cubic-bezier(0, 0, 0.2, 1),
+    border 0.25s linear;
+}
+
+.elder-tile:hover {
+  //border-color: rgba(var(--md-sys-color-primary), 0.75);
+  border-color: var(--md-sys-color-primary);
+}
+
+.elder-tile-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  border-radius: var(--elder-pane-border-radius);
+}
+
+.elder-tile-content:hover .elder-tile-overlay {
+  opacity: 1;
+  background-color: rgba(white, 0.08);
+}
+
+.elder-tile:active {
+  z-index: 100;
+  box-shadow: var(--elder-box-shadow-default);
+}
+
+.elder-selection-overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transition:
+    background-color 0.1s ease-in,
+    opacity 0.1s ease-in;
+}
+
+.elder-tile-overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.elder-selection-overlay-visible {
+  opacity: 1;
+  tab-index: 0;
+}
+
+.elder-selection-overlay-hidden {
+  opacity: 0;
+  tab-index: -1;
+}
+
+.elder-click-through {
+  pointer-events: none;
+}
+
+.elder-tile-check {
+  pointer-events: auto;
+  mat-icon {
+    color: var(--md-sys-color-outline-variant);
+    background-color: var(--md-sys-color-surface);
+    border-radius: 12px;
+  }
+
+  mat-icon.elder-selected {
+    color: var(--md-sys-color-tertiary);
+  }
+}
+
+.elder-tile-check:hover {
+  mat-icon {
+    color: var(--md-sys-color-primary);
+  }
+}
+
+.elder-tile:focus {
+  // Disable browser focus style
+  // box-shadow: color-mix(in rgb, 80%, black);
+  //background-color: color-mix(in sRGB, var(--elder-color-highlight-strong) 80%, black)
+  outline: 2px solid var(--elder-color-highlight-focus);
+
+  // background-color: var(--elder-color-highlight-strong);
+}
+
+.elder-tile.activated:focus {
+  // Disable browser focus style
+  // box-shadow: color-mix(in rgb, 80%, black);
+  //background-color: color-mix(in sRGB, var(--elder-color-highlight-strong) 80%, black)
+  outline: 2px solid var(--elder-color-highlight-focus);
+  // background-color: var(--elder-color-highlight-strong);
+}
+
+.elder-tile.activated {
+  // background-color: var(--elder-color-highlight-strong);
+  outline: 2px dashed var(--elder-color-highlight-focus);
+  .elder-tile-overlay {
+    // opacity: 1;
+    // background-color: color-mix(in sRGB, var(--elder-color-highlight-strong), transparent 70%);
+  }
+}