@angular-generic-table/core 5.0.0-rc.2 → 5.0.0-rc.20

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/models/table-meta.interface.d.ts

@@ -0,0 +1,8 @@
+import { TableRow } from './table-row.interface';
+import { TableConfig } from './table-config.interface';
+import { TableInfo } from './table-info.interface';
+export interface TableMeta<R = TableRow> {
+    data: Array<Array<R>>;
+    config: TableConfig<R>;
+    info: TableInfo;
+}

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

@@ -1,3 +1,3 @@
 export interface TableRow {
-    [key: string]: number | string | boolean;
+    [key: string]: number | string | boolean | any;
 }

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

@@ -1,5 +1,7 @@
-import { Order } from '../enums/order.enum';
-export interface TableSort {
-    sortBy: string;
-    sortByOrder: Order;
+import { TableRow } from './table-row.interface';
+export type GtSortOrder<R = TableRow> = Array<GtSortConfig<R>>;
+export interface GtSortConfig<R = {}> {
+    key: keyof R;
+    order: GtOrder;
 }
+export type GtOrder = 'asc' | 'desc';

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

@@ -0,0 +1,62 @@
+import { CoreComponent } from '../core.component';
+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;
+    /** 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;
+    /** 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;
+    /** 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;
+    /** 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;
+    /** 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, { "pagingInfo": "pagingInfo"; "paginationLength": "paginationLength"; "classes": "classes"; "ariaLabels": "ariaLabels"; "table": "table"; }, {}, never, never, true, never>;
+}

package/lib/pagination/pagination.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "./pagination.component";
+export declare class GenericTablePaginationModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<GenericTablePaginationModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<GenericTablePaginationModule, never, [typeof i1.CommonModule, typeof i2.PaginationComponent], [typeof i2.PaginationComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<GenericTablePaginationModule>;
+}

package/lib/pipes/capital-case.pipe.d.ts

@@ -0,0 +1,7 @@
+import { PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class CapitalCasePipe implements PipeTransform {
+    transform(s: string): any;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CapitalCasePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<CapitalCasePipe, "capitalCase", true>;
+}

package/lib/pipes/dash-case.pipe.d.ts

@@ -1,4 +1,7 @@
 import { PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
 export declare class DashCasePipe implements PipeTransform {
     transform(s: string): any;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DashCasePipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<DashCasePipe, "dashCase", true>;
 }

package/lib/pipes/dynamic.pipe.d.ts

@@ -0,0 +1,9 @@
+import { Injector, PipeTransform, Type } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class DynamicPipe implements PipeTransform {
+    private injector;
+    constructor(injector: Injector);
+    transform(value: any, requiredPipe: Type<any>, pipeArgs: any[]): any;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<DynamicPipe, "dynamicPipe", true>;
+}

package/lib/pipes/highlight.pipe.d.ts

@@ -1,4 +1,7 @@
 import { PipeTransform } from '@angular/core';
+import * as i0 from "@angular/core";
 export declare class HighlightPipe implements PipeTransform {
     transform(text: any, searchTerm: string | null): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HighlightPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<HighlightPipe, "highlight", true>;
 }

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

@@ -1,8 +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): string;
+    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,37 @@
 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>>;
 export declare let search: (text: string, caseSensitive: boolean, data: Array<TableRow>, config: TableConfig) => TableRow[];
+export declare let calculate: (data: Array<TableRow>, config: TableConfig) => {
+    calculated: any;
+    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.2",
+  "version": "5.0.0-rc.20",
   "author": "Robert Hjalmers <opensource@rhj.se> (http://www.linkedin.com/in/robert-hjalmers/)",
   "license": "MIT",
   "repository": {
@@ -8,18 +8,30 @@
     "url": "https://github.com/hjalmers/angular-generic-table.git"
   },
   "peerDependencies": {
-    "@angular/common": "^11.0.6",
-    "@angular/core": "^11.0.6"
+    "@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"
   },
-  "main": "bundles/angular-generic-table-core.umd.js",
-  "module": "fesm2015/angular-generic-table-core.js",
-  "es2015": "fesm2015/angular-generic-table-core.js",
-  "esm2015": "esm2015/angular-generic-table-core.js",
-  "fesm2015": "fesm2015/angular-generic-table-core.js",
-  "typings": "angular-generic-table-core.d.ts",
-  "metadata": "angular-generic-table-core.metadata.json",
+  "module": "fesm2015/angular-generic-table-core.mjs",
+  "es2020": "fesm2020/angular-generic-table-core.mjs",
+  "esm2020": "esm2020/angular-generic-table-core.mjs",
+  "fesm2020": "fesm2020/angular-generic-table-core.mjs",
+  "fesm2015": "fesm2015/angular-generic-table-core.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2020": "./esm2020/angular-generic-table-core.mjs",
+      "es2020": "./fesm2020/angular-generic-table-core.mjs",
+      "es2015": "./fesm2015/angular-generic-table-core.mjs",
+      "node": "./fesm2015/angular-generic-table-core.mjs",
+      "default": "./fesm2020/angular-generic-table-core.mjs"
+    }
+  },
   "sideEffects": false
 }

package/public-api.d.ts

@@ -1,8 +1,20 @@
 export * from './lib/core.service';
 export * from './lib/core.component';
 export * from './lib/core.module';
+export * from './lib/gt-delta/gt-delta.component';
+export * from './lib/pagination/pagination.component';
+export * from './lib/pagination/pagination.module';
 export * from './lib/models/table-config.interface';
 export * from './lib/models/table-column.interface';
 export * from './lib/models/table-info.interface';
 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

@@ -0,0 +1,319 @@
+$highlight-background-color: #ffdd00 !default;
+$style-selector: '.table' !default;
+$footer-header-font-weight: 400 !default;
+$footer-cell-font-weight: 500 !default;
+$footer-header-text-align: end !default;
+$footer-border-top: solid 2px var(--bs-table-color, #000) !default;
+$mobile-style-selector: 'table.table-mobile:not(.table-horizontal)' !default;
+$mobile-style-max-width: 576px !default;
+$mobile-style-header-font-weight: 500 !default;
+$mobile-style-header-background-color: var(--bs-body-bg, #fff) !default;
+$mobile-style-button-selector: '.btn-sm' !default;
+$mobile-style-border-bottom: var(--bs-border-style, solid) var(--bs-border-width, 1px) var(--bs-border-color, #dedede) !default;
+$mobile-style-button-font-size: 1rem !default;
+$mobile-style-button-padding: 0.375rem 0.75rem !default;
+$pagination-ellipsis-content: '...' !default;
+$pagination-active-color: var(--bs-light, #000) !default;
+$pagination-justify-content: center !default;
+$cell-padding-y: 0.5rem !default;
+$cell-padding-x: 0.5rem !default;
+$sort-selector: '.gt-sort' !default;
+
+$table-column-header-bg: var(--bs-body-bg);
+$table-row-header-bg: var(--bs-body-bg);
+
+$delta-positive-prefix: '+' !default;
+
+$sort-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 448 644'%3E%3Cpath transform='translate(0 240)' d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3E%3Cpath transform='translate(0 -100)' d='M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z'/%3E%3C/svg%3E") !default;
+//$sort-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-arrows-sort' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='currentColor' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'%3E%3C/path%3E%3Cpath d='M3 9l4 -4l4 4m-4 -4v14'%3E%3C/path%3E%3Cpath d='M21 15l-4 4l-4 -4m4 4v-14'%3E%3C/path%3E%3C/svg%3E") !default;
+$sort-icon-size: 1rem;
+$sort-icon-color: rgba(var(--bs-secondary-rgb, #000),0.25) !default;
+$sort-icon-color-active: var(--bs-primary, #000) !default;
+$ascending-sort-gradient: linear-gradient(1turn,
+  $sort-icon-color 50%,
+  $sort-icon-color-active 50%
+) !default;
+$descending-sort-gradient: linear-gradient(
+  $sort-icon-color 50%,
+  $sort-icon-color-active 50%
+) !default;
+/*$ascending-sort-gradient: linear-gradient(0.25turn,
+    $sort-icon-color 50%,
+    $sort-icon-color-active 50%
+) !default;
+$descending-sort-gradient: linear-gradient(0.75turn,
+    $sort-icon-color 50%,
+    $sort-icon-color-active 50%
+) !default;
+*/
+
+$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' 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;
+  @include search-style;
+  @include mobile-style;
+  @include pagination-style;
+  @include delta-style;
+  @include sticky-style;
+  @include skeleton-loader-styles;
+}
+
+@mixin default-style {
+  #{$style-selector} {
+    thead tr th {
+      // sort button
+      &[aria-sort],
+      &.gt-sortable {
+        > #{$sort-selector} {
+          appearance: none;
+          font: inherit;
+          margin: 0;
+          padding: $cell-padding-y $cell-padding-x;
+          margin: -#{$cell-padding-y} -#{$cell-padding-x};
+          border: none;
+          background: none;
+          color: inherit;
+          width: 100%;
+          text-align: left;
+          display: flex;
+          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;
+            width: $sort-icon-size;
+            height: $sort-icon-size;
+            margin-left: 0.25rem;
+            mask-image: $sort-icon;
+            mask-repeat: no-repeat;
+            mask-size: cover;
+            mask-position: right;
+            display: block;
+            flex-shrink: 0;
+          }
+          &:focus-visible {
+            box-shadow: inset rgba(var(--bs-primary-rgb, (0,0,0)),0.35) 0 0 0 4px;
+            outline: none;
+            border-radius: 4px;
+          }
+        }
+      }
+      &[aria-sort='ascending'] {
+        #{$sort-selector}::after {
+          background: $ascending-sort-gradient;
+        }
+      }
+      &[aria-sort='descending'] {
+        #{$sort-selector}::after {
+          background: $descending-sort-gradient;
+        }
+      }
+    }
+    tr {
+      th, td {
+        padding: $cell-padding-y $cell-padding-x;
+      }
+    }
+    tfoot {
+      th {
+        font-weight: $footer-header-font-weight;
+        text-align: $footer-header-text-align;
+      }
+      td[data-header]:first-child {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-top: none !important;
+        &::before {
+          content: attr(data-header);
+          display: block;
+          font-weight: $footer-header-font-weight;
+        }
+      }
+    }
+  }
+}
+
+@mixin footer-style {
+  tfoot tr:first-child {
+    border-top: $footer-border-top;
+  }
+  tfoot tr th {
+    font-weight: $footer-header-font-weight;
+  }
+  tfoot tr td {
+    font-weight: $footer-cell-font-weight;
+  }
+}
+
+@mixin search-style {
+  .gt-highlight-search {
+    background: $highlight-background-color;
+  }
+}
+@mixin mobile-style($selector: $mobile-style-selector) {
+  @media (max-width: $mobile-style-max-width) {
+    #{$selector} {
+      table-layout: fixed;
+      border-bottom: none;
+      thead {
+        position: sticky;
+        top: 0;
+        display: block;
+        @media (hover: none) and (pointer: coarse) {
+          display: table-header-group;
+        }
+        background: $mobile-style-header-background-color;
+        tr {
+          display: flex;
+          overflow: auto;
+          &::-webkit-scrollbar {
+            display: none;
+          }
+          th {
+            flex: auto;
+            text-align: left !important;
+            white-space: nowrap;
+          }
+        }
+      }
+      tbody, tfoot {
+        tr {
+          display: flex;
+          flex-direction: column;
+          border-bottom: $mobile-style-border-bottom;
+        }
+        td {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          border-top: none !important;
+          &::before {
+            content: attr(data-label);
+            display: block;
+            font-weight: $mobile-style-header-font-weight;
+          }
+
+          #{$mobile-style-button-selector} {
+            width: 100%;
+            font-size: $mobile-style-button-font-size;
+            padding: $mobile-style-button-padding;
+          }
+        }
+      }
+      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;
+        }
+      }
+    }
+  }
+}
+@mixin pagination-style() {
+  nav.gt-pagination {
+    display: flex;
+    justify-content: $pagination-justify-content;
+    ul {
+      display: inline-flex;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      li {
+        &.gt-ellipsis > button::after {
+          content: $pagination-ellipsis-content;
+          display: inline-flex;
+        }
+        &.active button {
+          color: $pagination-active-color;
+        }
+      }
+    }
+  }
+}
+
+@mixin delta-style() {
+  .gt-delta {
+    display: flex;
+    &.gt-delta-positive > span {
+      display: inline-flex;
+      &::before {
+        display: block;
+        content: $delta-positive-prefix;
+      }
+    }
+  }
+}
+@mixin sticky-style() {
+  .gt-sticky-column-header thead tr th {
+    position: sticky;
+    top: 0;
+    background: $table-column-header-bg;
+    z-index: 2;
+    white-space: nowrap;
+  }
+
+  .gt-sticky-row-header {
+    tbody tr th.row-header, thead tr th:first-child {
+    position: sticky;
+    left: 0;
+    background: $table-row-header-bg;
+    z-index: 1;
+    white-space: nowrap;
+    }
+    thead tr th:first-child {
+      z-index: 3;
+    }
+  }
+}
+
+@mixin skeleton-loader-styles() {
+  .gt-skeleton-loader {
+    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};
+    @keyframes skeleton-loader {
+      0% {
+        background-position: 0 0;
+      }
+      25%,
+      100% {
+        background-position: 200vw 0;
+      }
+    }
+    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%,
+        $skeleton-loader-highlight-color 17.5%,
+        $skeleton-loader-background-color 37.5%
+    );
+    background-size: 200vw 100vw;
+    background-position: 0 0;
+    animation: skeleton-loader 3000ms linear infinite;
+  }
+}
+

package/angular-generic-table-core.d.ts

@@ -1,7 +0,0 @@
-/**
- * Generated bundle index. Do not edit.
- */
-export * from './public-api';
-export { DashCasePipe as ɵb } from './lib/pipes/dash-case.pipe';
-export { HighlightPipe as ɵc } from './lib/pipes/highlight.pipe';
-export { SortClassPipe as ɵa } from './lib/pipes/sort-class.pipe';

package/angular-generic-table-core.metadata.json

@@ -1 +0,0 @@
-{"__symbolic":"module","version":4,"metadata":{"CoreService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ɵprov":{}}},"CoreComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":12,"character":1},"arguments":[{"selector":"angular-generic-table","styles":[],"changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":16,"character":19},"member":"OnPush"},"template":"<table class=\"table text-nowrap mb-0\" id=\"agreementList_table\">\n  <thead>\n    <tr>\n      <ng-container *ngFor=\"let column of (tableConfig$ | async)!.columns | keyvalue: columnOrder\">\n        <th\n          *ngIf=\"!column.value?.hidden\"\n          ngClass=\"{{ column.value?.sortable ? 'sort ' : '' }} {{ sortBy$ | async | sortClass: column.key }} {{\n            (column.key | dashCase) + '-column'\n          }}\"\n          [class.disabled]=\"loading$ | async\"\n          (click)=\"!column.value.sortable || sort(column.key)\"\n        >\n          <span>{{ column.value?.header || column.key }}</span>\n        </th>\n      </ng-container>\n    </tr>\n  </thead>\n  <tbody *ngIf=\"false !== false; else tableContent\">\n    <tr>\n      <!-- <td class=\"p-0\" [colSpan]=\"colspan$ | async\">-->\n      <td class=\"p-0\">\n        <div class=\"skeleton-loader skeleton-loader-table\"></div>\n      </td>\n    </tr>\n  </tbody>\n</table>\n<ng-template #tableContent>\n  <ng-container\n    *ngIf=\"(table$ | async)! as table\"\n  >\n    <tbody id=\"agreementList_tableContent\" *ngIf=\"table!.data!.length > 0; else noData\">\n      <tr *ngFor=\"let row of table!.data![(currentPage$ | async) || 0]; let i = index\" [attr.id]=\"'tableRow_' + i\">\n        <ng-container *ngFor=\"let column of table.config?.columns | keyvalue: columnOrder\">\n          <td *ngIf=\"!column.value?.hidden\">\n            <!--<ng-container *ngIf=\"column.value.template === 'actions'\">\n            <ng-container\n              *ngTemplateOutlet=\"actionsColumn; context: { agreement: agreement, index: i }\"\n            ></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"column.value.template === 'date'\">\n            <ng-container\n              *ngTemplateOutlet=\"dateColumn; context: { agreement: agreement, column: column.key }\"\n            ></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"column.value.template === 'name'\">\n            <ng-container *ngTemplateOutlet=\"nameColumn; context: { agreement: agreement }\"></ng-container>\n          </ng-container>\n          <ng-container *ngIf=\"column.value.template === 'badge'\">\n            <ng-container *ngTemplateOutlet=\"badgeColumn; context: { agreement: agreement }\"></ng-container>\n          </ng-container>-->\n            <ng-container [ngTemplateOutlet]=\"(searchBy$ | async) && !table.config.columns[column.key].templateRef ? highlighted:\n            table.config.columns[column.key].templateRef ? templateRef :\n            rawData\" [ngTemplateOutletContext]=\"{row: row, column: column, search: (searchBy$ | async), templateRef: table.config.columns[column.key].templateRef, index: i}\"></ng-container></td>\n        </ng-container>\n      </tr>\n    </tbody>\n  </ng-container>\n</ng-template>\n<ng-template #noData></ng-template>\n<ng-template #highlighted let-row=\"row\" let-column=\"column\" let-search=\"search\">\n  <div [innerHTML]=\"(row[column.key] | highlight: search)\"></div>\n</ng-template>\n<ng-template #rawData let-row=\"row\" let-column=\"column\">\n  {{row[column.key]}}\n</ng-template>\n<ng-template #templateRef let-row=\"row\" let-column=\"column\" let-index=\"index\" let-templateRef=\"templateRef\">\n  <ng-container [ngTemplateOutlet]=\"templateRef\"  [ngTemplateOutletContext]=\"{row: row, col: column, index: index}\"></ng-container>\n</ng-template>\n"}]}],"members":{"page":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"search":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"sort":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}]}},"GenericTableCoreModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":7,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"CoreComponent"},{"__symbolic":"reference","name":"ɵa"},{"__symbolic":"reference","name":"ɵb"},{"__symbolic":"reference","name":"ɵc"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":9,"character":12}],"exports":[{"__symbolic":"reference","name":"CoreComponent"}]}]}],"members":{}},"TableConfig":{"__symbolic":"interface"},"TableColumn":{"__symbolic":"interface"},"TableInfo":{"__symbolic":"interface"},"TableRow":{"__symbolic":"interface"},"TableSort":{"__symbolic":"interface"},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"sortClass"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵb":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"dashCase"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ɵc":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":2,"character":1},"arguments":[{"name":"highlight"}]}],"members":{"transform":[{"__symbolic":"method"}]}}},"origins":{"CoreService":"./lib/core.service","CoreComponent":"./lib/core.component","GenericTableCoreModule":"./lib/core.module","TableConfig":"./lib/models/table-config.interface","TableColumn":"./lib/models/table-column.interface","TableInfo":"./lib/models/table-info.interface","TableRow":"./lib/models/table-row.interface","TableSort":"./lib/models/table-sort.interface","ɵa":"./lib/pipes/sort-class.pipe","ɵb":"./lib/pipes/dash-case.pipe","ɵc":"./lib/pipes/highlight.pipe"},"importAs":"@angular-generic-table/core"}