@angular-generic-table/core 5.0.0-rc.4 → 5.0.0-rc.5

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">;
 }

package/lib/pipes/sort-class.pipe.d.ts

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

package/lib/utilities/utilities.d.ts

@@ -1,5 +1,6 @@
 import { TableRow } from '../models/table-row.interface';
 import { TableConfig } from '../models/table-config.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[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@angular-generic-table/core",
-  "version": "5.0.0-rc.4",
+  "version": "5.0.0-rc.5",
   "author": "Robert Hjalmers <opensource@rhj.se> (http://www.linkedin.com/in/robert-hjalmers/)",
   "license": "MIT",
   "repository": {
@@ -14,12 +14,24 @@
   "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",
+  "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": "angular-generic-table-core.d.ts",
-  "metadata": "angular-generic-table-core.metadata.json",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./angular-generic-table-core.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,11 @@
 export * from './lib/core.service';
 export * from './lib/core.component';
 export * from './lib/core.module';
+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';

package/scss/index.scss

@@ -0,0 +1,4 @@
+@use "mixins";
+@include mixins.add-mobile-style;
+@include mixins.add-search-style;
+@include mixins.add-pagination-style;

package/scss/mixins.scss

@@ -0,0 +1,79 @@
+@use "tokens";
+
+@mixin add-search-style {
+  .gt-highlight-search {
+    background: tokens.$highlight-background-color;
+  }
+}
+@mixin add-mobile-style($selector: tokens.$mobile-style-selector) {
+  #{$selector} {
+    .mobile-header {
+      display: none;
+    }
+  }
+  @media (max-width: tokens.$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: tokens.$mobile-style-header-background-color;
+        tr {
+          display: flex;
+          overflow: auto;
+          &::-webkit-scrollbar {
+            display: none;
+          }
+        }
+      }
+      tbody {
+        tr {
+          display: flex;
+          flex-direction: column;
+          border-bottom: tokens.$mobile-style-border-bottom;
+        }
+        td {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          border-top: none !important;
+          & > .mobile-header {
+            font-weight: tokens.$mobile-style-header-font-weight;
+            display: block;
+          }
+          #{tokens.$mobile-style-button-selector} {
+            width: 100%;
+            font-size: tokens.$mobile-style-button-font-size;
+            padding: tokens.$mobile-style-button-padding;
+          }
+        }
+      }
+    }
+  }
+}
+@mixin add-pagination-style() {
+  nav.gt-pagination {
+    display: flex;
+    justify-content: tokens.$pagination-justify-content;
+    ul {
+      display: inline-flex;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      li {
+        &.ellipsis::after {
+          content: tokens.$pagination-ellipsis-content;
+          display: inline-flex;
+        }
+        &.active button {
+          color: tokens.$pagination-active-color;
+        }
+      }
+    }
+  }
+}

package/scss/tokens.scss

@@ -0,0 +1,12 @@
+$highlight-background-color: #ffdd00;
+$mobile-style-selector: 'table.table-mobile';
+$mobile-style-max-width: 576px;
+$mobile-style-header-font-weight: 500;
+$mobile-style-header-background-color: #fff;
+$mobile-style-button-selector: '.btn-sm';
+$mobile-style-border-bottom: solid 1px #dedede;
+$mobile-style-button-font-size: 1rem;
+$mobile-style-button-padding: 0.5625rem 1rem;
+$pagination-ellipsis-content: '...';
+$pagination-active-color: #000;
+$pagination-justify-content: center;

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 *ngIf=\"{\n    config:(tableConfig$ | async)!,\n    loading: loading$ | async\n    } as table\">\n      <ng-container *ngFor=\"let column of table.config.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          }} {{column.value.class}}\"\n          [class.disabled]=\"table.loading\"\n          (click)=\"table.loading || !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=\"loading$ | async; else tableContent\">\n    <tr>\n      <td class=\"p-0\" [colSpan]=\"colspan$ | async\">\n        <ng-content select=\".table-loading\"></ng-content>\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\" ngClass=\"{{(column.key | dashCase) + '-column'}} {{column.value.class}}\">\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>\n  <tbody>\n  <tr>\n    <td class=\"p-0\" [colSpan]=\"colspan$ | async\">\n      <ng-content select=\".table-no-data\"></ng-content>\n    </td>\n  </tr>\n  </tbody>\n</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":{"loading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"page":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":3}}]}],"search":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"config":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"sort":[{"__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"}