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

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>;
+    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/sort-class.pipe.d.ts

@@ -1,11 +1,8 @@
 import { PipeTransform } from '@angular/core';
-import { Order } from '../enums/order.enum';
+import { GtSortOrder } from '../models/table-sort.interface';
 import * as i0 from "@angular/core";
 export declare class SortClassPipe implements PipeTransform {
-    transform(selection: {
-        sortBy: string;
-        sortByOrder: Order;
-    } | any, property: string, aria?: boolean): string | null;
+    transform(sortOrder: GtSortOrder | null, key: string, context?: 'class' | 'aria' | 'order'): string | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<SortClassPipe, never>;
     static ɵpipe: i0.ɵɵPipeDeclaration<SortClassPipe, "sortClass", true>;
 }

package/lib/utilities/utilities.d.ts

@@ -1,5 +1,7 @@
 import { TableRow } from '../models/table-row.interface';
 import { TableConfig } from '../models/table-config.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>>;
@@ -9,3 +11,27 @@ export declare let calculate: (data: Array<TableRow>, config: TableConfig) => {
     calculations: string[];
     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.15",
+  "version": "5.0.0-rc.17",
   "author": "Robert Hjalmers <opensource@rhj.se> (http://www.linkedin.com/in/robert-hjalmers/)",
   "license": "MIT",
   "repository": {
@@ -8,8 +8,8 @@
     "url": "https://github.com/hjalmers/angular-generic-table.git"
   },
   "peerDependencies": {
-    "@angular/common": "^12.0.0 || ^13.0.0 || ^14.0.0",
-    "@angular/core": "^12.0.0 || ^13.0.0 || ^14.0.0"
+    "@angular/common": "^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
+    "@angular/core": "^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0"
   },
   "dependencies": {
     "tslib": "^2.0.0"

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;
@@ -83,6 +85,14 @@ $skeleton-loader-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2
           align-items: center;
           justify-content: inherit;
           transition: box-shadow 0.25s ease-in-out;
+          &[data-sort-order]::before {
+            content: attr(data-sort-order);
+            order: 2;
+            font-variant: diagonal-fractions;
+            font-weight: normal;
+            align-self: flex-start;
+            line-height: initial;
+          }
           &::after {
             content: '';
             background: $sort-icon-color;
@@ -182,7 +192,7 @@ $skeleton-loader-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2
           }
         }
       }
-      tbody {
+      tbody, tfoot {
         tr {
           display: flex;
           flex-direction: column;
@@ -206,6 +216,17 @@ $skeleton-loader-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2
           }
         }
       }
+      tfoot {
+        td:first-child::before {
+          font-weight: $mobile-style-header-font-weight;
+        }
+        td::before {
+          font-weight: normal;
+        }
+        td:not(:first-child).gt-no-content {
+          display: none;
+        }
+      }
     }
   }
 }
@@ -268,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};
@@ -281,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%,

package/esm2020/lib/enums/order.enum.mjs

@@ -1,6 +0,0 @@
-export var Order;
-(function (Order) {
-    Order["ASC"] = "asc";
-    Order["DESC"] = "desc";
-})(Order || (Order = {}));
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib3JkZXIuZW51bS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvcmUvc3JjL2xpYi9lbnVtcy9vcmRlci5lbnVtLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBTixJQUFZLEtBR1g7QUFIRCxXQUFZLEtBQUs7SUFDZixvQkFBVyxDQUFBO0lBQ1gsc0JBQWEsQ0FBQTtBQUNmLENBQUMsRUFIVyxLQUFLLEtBQUwsS0FBSyxRQUdoQiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBlbnVtIE9yZGVyIHtcbiAgQVNDID0gJ2FzYycsXG4gIERFU0MgPSAnZGVzYycsXG59XG4iXX0=

package/lib/enums/order.enum.d.ts

@@ -1,4 +0,0 @@
-export declare enum Order {
-    ASC = "asc",
-    DESC = "desc"
-}