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

package/lib/core.component.d.ts

@@ -1,37 +1,100 @@
-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 { 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 page(page: number);
-    set search(string: Observable<string> | string | null);
+    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>);
-    set sortOrder(sortConfig: GtSortOrder<any>);
+    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>>;
-    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;
+    /** page change event - emitted when current page/index changes for pagination */
+    pageChange: EventEmitter<GtPageChangeEvent>;
+    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$;
     private _searchBy$;
     searchBy$: Observable<string | null>;
+    private _pagingInfo$;
     private _tableConfig$;
     tableConfig$: Observable<TableConfig<any>>;
     private _data$;
@@ -42,8 +105,15 @@ export declare class CoreComponent {
         calculatedColumnsCount: number;
     }>;
     table$: Observable<TableMeta>;
-    private _currentPage$;
-    currentPage$: Observable<number>;
+    /** tableInfo$ - returns observable for table info
+     * @return Observable<TableInfo> */
+    get tableInfo$(): Observable<TableInfo | undefined>;
+    /** tableInfo - returns the current table info
+     * @return TableInfo */
+    get tableInfo(): TableInfo | undefined;
+    private _tableInfo$;
+    private _currentPaginationIndex$;
+    currentPaginationIndex$: Observable<number>;
     colspan$: Observable<number>;
     footerColspan$: Observable<number>;
     /** sortByKey - Sort by key in table row
@@ -53,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"; "page": "page"; "search": "search"; "config": "config"; "data": "data"; "sortOrder": "sortOrder"; }, { "rowClick": "rowClick"; "sortOrderChange": "sortOrderChange"; "rowHover": "rowHover"; "columnSort": "columnSort"; }, 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/gt-pagination.d.ts

@@ -8,3 +8,11 @@ export interface GtPaginationAriaLabels {
     nav: string;
     button: string;
 }
+export interface GtPaginationInfo {
+    pageNext: number | null;
+    pageCurrent: number | null;
+    pagePrevious: number | null;
+    pageSize: number | null;
+    numberOfRecords: number | null;
+    pageTotal?: number | null;
+}

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,14 +5,23 @@ 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;
     order: GtOrder;
     currentSortOrder: GtSortOrder<R>;
     event?: MouseEvent;
+    addSortKey: boolean /** Add additional key to sort on multiple properties? True if the user is holding shift while sorting */;
+}
+export interface GtPageChangeEvent {
+    index: number;
 }

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

@@ -1,4 +1,6 @@
 export interface TableInfo {
-    records: number;
+    numberOfRecords: number;
+    pageSize: number;
     pageTotal: number;
+    lazyLoaded?: boolean;
 }

package/lib/pagination/pagination.component.d.ts

@@ -1,24 +1,62 @@
-import { ReplaySubject } from 'rxjs';
 import { CoreComponent } from '../core.component';
-import { GtPaginationAriaLabels, GtPaginationClasses } from '../models/gt-pagination';
+import { GtPaginationAriaLabels, GtPaginationClasses, GtPaginationInfo } from '../models/gt-pagination';
 import * as i0 from "@angular/core";
 export declare class PaginationComponent {
+    get pagingInfo(): GtPaginationInfo;
+    /** pagingInfo
+     * @description when provided, pagination component will use this information to render pagination instead of data from table. Use this option when pagination is handled by backend (server side).
+     * @type info - metadata for pagination component
+     */
+    set pagingInfo(info: GtPaginationInfo);
     get paginationLength(): number;
-    set paginationLength(value: number);
+    /** paginationLength
+     * @description number of buttons to show in pagination
+     * @type length - number of buttons to show. Defaults to: `5`
+     */
+    set paginationLength(length: number);
     get classes(): GtPaginationClasses;
-    set classes(value: GtPaginationClasses);
+    /** classes
+     * @description classes that should be used within pagination component for different elements
+     * @type classes - classes to be used. Defaults to: `{
+     *     ul: 'pagination',
+     *     li: 'page-item',
+     *     button: 'page-link',
+     *   }`
+     */
+    set classes(classes: GtPaginationClasses);
     get ariaLabels(): GtPaginationAriaLabels;
-    set ariaLabels(value: GtPaginationAriaLabels);
+    /** ariaLabels
+     * @description aria labels that describe pagination component
+     * @type labels - aria labels for pagination. Defaults to: `{
+     *     nav: 'Table pagination',
+     *     button: 'Go to page ',
+     *   }`
+     */
+    set ariaLabels(labels: GtPaginationAriaLabels);
     get table(): CoreComponent;
-    set table(value: CoreComponent);
-    table$: ReplaySubject<CoreComponent>;
+    /** table
+     * @description table component to which pagination is attached
+     * @type tableRef - table component
+     */
+    set table(tableRef: CoreComponent);
+    private _pagingInfo;
+    private _table$;
     private _table;
     private _ariaLabels;
     private _classes;
     private _paginationLength;
-    pagination$: import("rxjs").Observable<number[]>;
-    generateList(pages: number, currentPosition: number): Array<number>;
-    goto(page: number): void;
+    /** paginationListItems$ - observable for page numbers to show based on number of pages and current position  */
+    paginationListItems$: import("rxjs").Observable<number[]>;
+    /** generate list - generate an array with page numbers to show based on number of pages and current position
+     * @param numberOfPages number of pages to show
+     * @param currentPosition current position (page index) being shown in table
+     * @returns Array<number> array of page numbers to show
+     */
+    private _generateList;
+    /** go to page
+     * @param index - page index to go to
+     */
+    goToPage(index: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PaginationComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PaginationComponent, "angular-generic-table-pagination", never, { "paginationLength": "paginationLength"; "classes": "classes"; "ariaLabels": "ariaLabels"; "table": "table"; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PaginationComponent, "angular-generic-table-pagination", never, { "pagingInfo": "pagingInfo"; "paginationLength": "paginationLength"; "classes": "classes"; "ariaLabels": "ariaLabels"; "table": "table"; }, {}, never, never, true, never>;
 }

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/lib/utilities/utilities.d.ts

@@ -1,6 +1,7 @@
 import { TableRow } from '../models/table-row.interface';
 import { TableConfig } from '../models/table-config.interface';
-import { GtSortOrder } from '../models/table-sort.interface';
+import { GtSortConfig, GtSortOrder } from '../models/table-sort.interface';
+import { GtSortEvent } from '../models/table-events.interface';
 export declare let dashed: (s: string) => string;
 export declare let capitalize: (s: string) => string;
 export declare let chunk: (array: Array<any>, chunkSize: number) => Array<Array<TableRow>>;
@@ -11,7 +12,26 @@ export declare let calculate: (data: Array<TableRow>, config: TableConfig) => {
     calculatedColumnsCount: number;
 };
 /** sortOnMultipleKeys
+ * @description Sort data on multiple keys
  * @param {GtSortOrder} keys - array with sort config objects to sort on, data will be sorted according to array order
  * @returns sort function
  */
 export declare const sortOnMultipleKeys: (keys: GtSortOrder<TableRow>) => (a: TableRow, b: TableRow) => number;
+/** parseSortOrderParams
+ * @description Convert sort order query param to array with sort config objects
+ * @param sortParams - Query param string where each sort config object is separated by comma and order is indicated by + (ascending) or - (descending), e.g. _'name,-age'_
+ * @returns GtSortOrder - Array with sort config objects
+ */
+export declare const parseSortOrderParams: (sortParams: string) => GtSortOrder<TableRow>;
+/** sortOrderConfigToParam
+ * @description Convert sort config object to string that can be used as query param when sorting is implemented server side
+ * @param sortConfig - Sort config object
+ * @returns string - Query param string where order is indicated by + (ascending) or - (descending), e.g. _'-name'_
+ */
+export declare const sortOrderConfigToParam: (sortConfig: GtSortEvent | GtSortConfig) => string;
+/** sortOrderToParams
+ * @description Convert sort order array to string that can be used as query param when sorting is implemented server side
+ * @param sortOrder - Array with sort config objects
+ * @returns string - Query param string where each sort config object is separated by comma and order is indicated by + (ascending) or - (descending), e.g. _'name,-age'_
+ */
+export declare const sortOrderToParams: (sortOrder: GtSortOrder<TableRow>) => string;

package/package.json

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

package/public-api.d.ts

@@ -11,3 +11,10 @@ export * from './lib/models/table-row.interface';
 export * from './lib/models/table-sort.interface';
 export * from './lib/models/table-meta.interface';
 export * from './lib/models/table-events.interface';
+export * from './lib/models/gt-pagination';
+export * from './lib/utilities/utilities';
+export * from './lib/pipes/capital-case.pipe';
+export * from './lib/pipes/dash-case.pipe';
+export * from './lib/pipes/dynamic.pipe';
+export * from './lib/pipes/highlight.pipe';
+export * from './lib/pipes/sort-class.pipe';

package/scss/index.scss

@@ -49,8 +49,10 @@ $descending-sort-gradient: linear-gradient(0.75turn,
 
 $skeleton-loader-highlight-color: var(--bs-gray-300, rgb(200,200,200)) !default;
 $skeleton-loader-background-color: var(--bs-gray-200, rgb(240,240,240)) !default;
-$skeleton-loader-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='768' height='159'%3E%3Cpath fill-rule='evenodd' fill='%23FFF' d='M0 124.999v-1h768v1H0ZM660 114V90h73.999v24H660Zm-144.001 0V90h120v24h-120ZM402 114V90h80v24h-80Zm-134 0V90h100v24H268Zm-154.001 0V90h130v24h-130ZM0 78.999h768v1H0v-1ZM660 69V45h63.999v24H660Zm-144.001 0V45h110v24h-110ZM402 69V45h69.999v24H402Zm-134 0V45h80v24h-80Zm-154.001 0V45h120v24h-120ZM0 33.999h768V35H0v-1.001ZM660 0h83.999v24H660V0ZM515.999 0h90v24h-90V0ZM402 0h90v24h-90V0ZM268 0h100v24H268V0ZM113.999 0h100v24h-100V0ZM0 0h90v24H0V0Zm70 69H0V45h70v24Zm10 45H0V90h80v24Zm10 45H0v-24h90v24Zm134 0H113.999v-24H224v24Zm154 0H268v-24h110v24Zm114 0h-90v-24h90v24Zm124 0H515.999v-24H616v24Zm127.999 0H660v-24h83.999v24Z'/%3E%3C/svg%3E") !default;
+$skeleton-loader-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='a' viewBox='0 0 768 135'%3E%3Cdefs/%3E%3Cpath fill='%23FFF' d='M114 10h100v24H114V10ZM114 55h120v24H114V55ZM114 100h130v24H114v-24ZM268 10h100v24H268V10ZM268 55h80v24h-80V55ZM268 100h100v24H268v-24ZM402 10h90v24h-90V10ZM402 55h70v24h-70V55ZM402 100h80v24h-80v-24ZM516 10h90v24h-90V10ZM516 55h110v24H516V55ZM516 100h120v24H516v-24ZM660 100h74v24h-74v-24ZM660 55h64v24h-64V55ZM660 10h84v24h-84V10ZM0 100h80v24H0v-24ZM0 55h70v24H0V55ZM0 10h90v24H0V10ZM0 134h768v1H0v-1ZM0 89h768v1H0v-1ZM0 44h768v1H0v-1Z' class='b'/%3E%3C/svg%3E") !default;
+$skeleton-loader-mask-size: 768px 135px !default;
 
+$skeleton-height: var(--gt-skeleton-height, 169px) !default;
 @mixin styles() {
   @include default-style;
   @include footer-style;
@@ -287,7 +289,7 @@ $skeleton-loader-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2
 
 @mixin skeleton-loader-styles() {
   .gt-skeleton-loader {
-    margin: 0.625rem 0;
+    margin:0 0 0.625rem 0;
     --gt-skeleton-loader-mask: #{$skeleton-loader-mask};
     --gt-skeleton-loader-highlight-color: #{$skeleton-loader-highlight-color};
     --gt-skeleton-loader-bg-color: #{$skeleton-loader-background-color};
@@ -300,8 +302,9 @@ $skeleton-loader-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2
         background-position: 200vw 0;
       }
     }
-    height: 158px;
+    height: $skeleton-height;
     mask-image: var(--gt-skeleton-loader-mask);
+    mask-size: $skeleton-loader-mask-size;
     background: linear-gradient(
         280deg,
         $skeleton-loader-background-color 12.5%,