@angular-generic-table/core 5.0.0-rc.17 → 5.0.0-rc.18

package/lib/core.component.d.ts

@@ -1,37 +1,94 @@
-import { EventEmitter } from '@angular/core';
-import { Observable } from 'rxjs';
+import { EventEmitter, OnDestroy, TrackByFunction } from '@angular/core';
+import { Observable, Subject } from 'rxjs';
 import { TableConfig } from './models/table-config.interface';
 import { KeyValue } from '@angular/common';
 import { TableColumn } from './models/table-column.interface';
 import { TableRow } from './models/table-row.interface';
 import { GtSortOrder } from './models/table-sort.interface';
 import { TableMeta } from './models/table-meta.interface';
-import { GtPageChangeEvent, GtRowClickEvent, GtRowHoverEvent, GtSortEvent } from './models/table-events.interface';
+import { GtPageChangeEvent, GtRowSelectEvent, GtRowClickEvent, GtRowActiveEvent, GtSortEvent } from './models/table-events.interface';
 import { GtPaginationInfo } from './models/gt-pagination';
 import { TableInfo } from './models/table-info.interface';
 import * as i0 from "@angular/core";
-export declare class CoreComponent {
+export declare class CoreComponent implements OnDestroy {
+    unsubscribe$: Subject<unknown>;
+    get navigationKeys(): typeof this._navigationKeys;
+    /** navigationKeys
+     * @description An array of keyboard keys that will trigger navigation and active row, currently only supports arrow keys, home and end (omit key name from array to disable it)
+     * @type {string[]}
+     * @default ['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'Home', 'End']
+     */
+    set navigationKeys(value: typeof this._navigationKeys);
+    private _navigationKeys;
+    get selectKeys(): string[];
+    /** selectKeys
+     * @description An array of keyboard keys that will trigger row selection (omit key name from array to disable it)
+     * @type {string[]}
+     * @default ['Enter', ' ']
+     */
+    set selectKeys(value: string[]);
+    private _selectKeys;
     get sortOrder$(): Observable<GtSortOrder>;
     set loading(isLoading: Observable<boolean> | boolean);
     set paginationIndex(pageIndex: number);
+    get paginationIndex(): number;
     set pagingInfo(value: GtPaginationInfo | null);
+    /** customClasses
+     * @description An object that contains custom classes for various elements in the table.
+     * @type {object} - { selectedRow: string, activeRow: string } - default classes are 'gt-selected' and 'gt-active'
+     */
+    set customClasses(classes: Partial<typeof this._customClasses>);
+    get customClasses(): typeof this._customClasses;
+    private _customClasses;
+    /** isRowSelectedFn
+     * @description Function to determine if row is selected or not.
+     * @type {fn} A function that receives a row object and optional state for current selection that can be used to determine if row should be marked as selected or not. */
+    set isRowSelectedFn(fn: (row: TableRow | any, selection?: any) => boolean);
+    get isRowSelectedFn(): any;
+    private _isRowSelectedFn;
+    /** selection
+     * @description An object that contains the currently selected row(s) in the table. It's passed to the selection function to determine which rows should be selected.
+     * @type {any}
+     */
+    selection: any;
+    /** rowIdKey
+     * @description row key to use as unique id for table row. If passed, table won't generate unique ids for each row but instead use key to retrieve unique id from row.
+     * @type {string}
+     */
+    rowIdKey: string | undefined;
+    /** generateRowId
+     * @description Whether or not to generate a unique id for each row in the table. Defaults to `true`.
+     * @type {boolean}
+     */
+    generateRowId: boolean;
+    /** trackRowByFn
+     * @description A function that returns a unique identifier for each row in the table to optimize rendering when data is added or removed.
+     * @type fn - TrackByFunction to retrieve unique id based on index and/or row. Defaults to using `row[this.rowIdKey]`.
+     */
+    set trackRowByFn(fn: TrackByFunction<TableRow>);
+    get trackRowByFn(): TrackByFunction<TableRow>;
+    private _trackRowByFn;
     set search(string: Observable<string | null> | string | null);
     set config(config: Observable<TableConfig<any>> | TableConfig<any>);
-    set data(data: Observable<Array<TableRow>> | Array<TableRow>);
+    private _tableConfig;
+    set data(data: Observable<Array<TableRow>> | Array<TableRow> | null);
     set sortOrder(sortConfig: GtSortOrder<TableRow> | any);
     rowClick: EventEmitter<GtRowClickEvent<TableRow>>;
+    rowSelect: EventEmitter<GtRowSelectEvent<TableRow>>;
     sortOrderChange: EventEmitter<GtSortOrder<TableRow>>;
     _rowClick(row: TableRow, index: number, event: MouseEvent): void;
-    private _rowHover$;
-    rowHover: EventEmitter<GtRowHoverEvent<TableRow>>;
+    _rowActive(row: TableRow, index: number, event: KeyboardEvent): void;
+    private _rowActive$;
+    rowActive: EventEmitter<GtRowActiveEvent<TableRow>>;
     columnSort: EventEmitter<GtSortEvent<TableRow>>;
     /** page change event - emitted when current page/index changes for pagination */
     pageChange: EventEmitter<GtPageChangeEvent>;
-    rowHover$: Observable<GtRowHoverEvent<TableRow>>;
-    hoverRow(id: string): void;
-    hoverRow(index: number): void;
-    hoverRow(none: null): void;
-    _hoverRow(row: TableRow | null, index: number | null, event?: MouseEvent): void;
+    rowActive$: Observable<GtRowActiveEvent<TableRow>>;
+    activeRowIndex: number | null;
+    activateRow(id: string, event?: MouseEvent | KeyboardEvent): void;
+    activateRow(index: number, event?: MouseEvent | KeyboardEvent): void;
+    activateRow(none: null, event?: MouseEvent | KeyboardEvent): void;
+    protected _activateRow(row: TableRow | null, index: number | null, event?: MouseEvent | KeyboardEvent): void;
     get loading$(): Observable<boolean>;
     private _loading$;
     private _sortOrder$;
@@ -66,6 +123,12 @@ export declare class CoreComponent {
     sortByKey(key: keyof TableRow, $event?: MouseEvent): void;
     columnOrder: (a: KeyValue<string, TableColumn>, b: KeyValue<string, TableColumn>) => number;
     nestedValue(object: any, mapTo: string, missingValue?: string | number | null): unknown;
+    private _unsubscribeFromKeyboardEvents$;
+    private _keyboardArrowEvent$;
+    protected listenToKeyboardEvents(): void;
+    unsubscribeFromKeyboardEvents(tableRef: HTMLTableElement): void;
+    private _handleNavigationEvent;
+    ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CoreComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CoreComponent, "angular-generic-table", never, { "loading": "loading"; "paginationIndex": "paginationIndex"; "pagingInfo": "pagingInfo"; "search": "search"; "config": "config"; "data": "data"; "sortOrder": "sortOrder"; }, { "rowClick": "rowClick"; "sortOrderChange": "sortOrderChange"; "rowHover": "rowHover"; "columnSort": "columnSort"; "pageChange": "pageChange"; }, never, [".table-loading", ".table-no-data"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CoreComponent, "angular-generic-table", never, { "navigationKeys": "navigationKeys"; "selectKeys": "selectKeys"; "loading": "loading"; "paginationIndex": "paginationIndex"; "pagingInfo": "pagingInfo"; "customClasses": "customClasses"; "isRowSelectedFn": "isRowSelectedFn"; "selection": "selection"; "rowIdKey": "rowIdKey"; "generateRowId": "generateRowId"; "trackRowByFn": "trackRowByFn"; "search": "search"; "config": "config"; "data": "data"; "sortOrder": "sortOrder"; }, { "rowClick": "rowClick"; "rowSelect": "rowSelect"; "sortOrderChange": "sortOrderChange"; "rowActive": "rowActive"; "columnSort": "columnSort"; "pageChange": "pageChange"; }, never, [".table-loading", ".table-no-data"], true, never>;
 }

package/lib/core.module.d.ts

@@ -4,11 +4,12 @@ import * as i2 from "./core.component";
 import * as i3 from "./pipes/sort-class.pipe";
 import * as i4 from "./pipes/dash-case.pipe";
 import * as i5 from "./pipes/highlight.pipe";
-import * as i6 from "./pipes/capital-case.pipe";
-import * as i7 from "./pipes/dynamic.pipe";
-import * as i8 from "./gt-delta/gt-delta.component";
+import * as i6 from "./pipes/row-selection.pipe";
+import * as i7 from "./pipes/capital-case.pipe";
+import * as i8 from "./pipes/dynamic.pipe";
+import * as i9 from "./gt-delta/gt-delta.component";
 export declare class GenericTableCoreModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<GenericTableCoreModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<GenericTableCoreModule, never, [typeof i1.CommonModule, typeof i2.CoreComponent, typeof i3.SortClassPipe, typeof i4.DashCasePipe, typeof i5.HighlightPipe, typeof i6.CapitalCasePipe, typeof i6.CapitalCasePipe, typeof i7.DynamicPipe, typeof i8.GtDeltaComponent], [typeof i2.CoreComponent, typeof i8.GtDeltaComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<GenericTableCoreModule, never, [typeof i1.CommonModule, typeof i2.CoreComponent, typeof i3.SortClassPipe, typeof i4.DashCasePipe, typeof i5.HighlightPipe, typeof i6.RowSelectionPipe, typeof i7.CapitalCasePipe, typeof i7.CapitalCasePipe, typeof i8.DynamicPipe, typeof i9.GtDeltaComponent], [typeof i2.CoreComponent, typeof i9.GtDeltaComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<GenericTableCoreModule>;
 }

package/lib/models/table-config.interface.d.ts

@@ -22,7 +22,11 @@ export interface TableConfig<R = TableRow> {
         length?: number;
     };
     rowClick?: boolean;
-    rowHover?: boolean;
+    /** Toggle row active state on mouse enter/leave (hover) <p>**Default:** `false`</p>*/
+    activateRowOnHover?: boolean;
+    /** Toggle row active state on keyboard navigation <p>**Default:** `false`</p>*/
+    activateRowOnKeyboardNavigation?: boolean;
+    deactivateRowOnLostFocus?: boolean;
     footer?: {
         headers?: {
             [key: FooterCalculation | string]: string | boolean;

package/lib/models/table-events.interface.d.ts

@@ -5,10 +5,15 @@ export interface GtRowClickEvent<R = TableRow> {
     index: number;
     event: MouseEvent;
 }
-export interface GtRowHoverEvent<R = TableRow> {
+export interface GtRowActiveEvent<R = TableRow> {
     row: R | null;
     index: number | null;
-    event?: MouseEvent;
+    event?: MouseEvent | KeyboardEvent;
+}
+export interface GtRowSelectEvent<R = TableRow> {
+    row: R | null;
+    index: number | null;
+    event?: KeyboardEvent;
 }
 export interface GtSortEvent<R = TableRow> {
     key: keyof R;

package/lib/pipes/row-selection.pipe.d.ts

@@ -0,0 +1,8 @@
+import { PipeTransform } from '@angular/core';
+import { TableRow } from '../models/table-row.interface';
+import * as i0 from "@angular/core";
+export declare class RowSelectionPipe implements PipeTransform {
+    transform(row: TableRow, selection: any, comparator: (row: TableRow, selection: any) => boolean, className?: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RowSelectionPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<RowSelectionPipe, "rowSelection", true>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-generic-table/core",
-  "version": "5.0.0-rc.17",
+  "version": "5.0.0-rc.18",
   "author": "Robert Hjalmers <opensource@rhj.se> (http://www.linkedin.com/in/robert-hjalmers/)",
   "license": "MIT",
   "repository": {