Add expandRow EventEmitter to allow more dynamic expanded row data loads

.gitignore

@@ -1,6 +1,12 @@
-/dist
+!dist/package.json
+dist/*
 /tmp
 /node_modules
 /.idea
 /typings
-npm-debug.log
+npm-debug.log
+/.vscode
+/src/**/*.js*
+/src/**/*.ngfactory.ts
+**/*.ngsummary.json
+/aot

.npmignore

@@ -1,5 +1 @@
-
-/tmp
-/node_modules
-/.idea
-/typings
+src

README.md

@@ -11,13 +11,22 @@ A simple Angular 2 data table, with built-in solutions for features including:
 
 The component can be used not just with local data, but remote resources too: for example if the sorting and paging happen in the database.
 
-The templates use bootstrap CSS class names, so the component requires a bootstrap .css file to be present in the application using it.
+The templates use bootstrap 4 CSS class names, so the component requires a bootstrap .css file to be present in the application using it.
 
-Check out the [demo](https://ggmod.github.io/angular-2-data-table-demo) and its [code](https://github.com/ggmod/angular-2-data-table-demo) for examples of how to use it. 
+The templates use Font Awesome CSS class names, so the component requires Font Awesome to be present in the application using it.
 
 ## Installing:
-`npm install angular-2-data-table --save`
+`npm install angular-datatable --save`
 
+## Usage:
+
+### Custom Sorting
+
+To make use of custom sort functionality, one must add a `[customSort]` binding to the data-table (if necessary for the default sort) or to the data-column (if necessary to sort that column). One must still specify the `[sortBy]` binding and specify the primary property of the bound data set that is being sorted, as this is fundamental to maintaining sort order (ASC or DESC).
+
+The `[customSort]` binding must bind to a function that implements the function signature defined by `DataTableSortCallback`. This function is the same as any standard JS Array.sort() callback, and in fact is actually passed to array.sort() when sorting occurs.
+
+If custom sort is not required, then only the `[sortBy]` binding is necessary.
 
 #### Licensing
 MIT License

VERSIONING.md

@@ -0,0 +1,19 @@
+# Versioning Angular-DataTable
+
+Version maintenance is a critical aspect of maintaining a public NPM package. New versions must be carefully managed to ensure they properly publish. Moreso, proper linting and testing must be performed on each version before publishing to ensure a bad version is never published to the public NPM repository.
+
+Please follow this procedure to version angular-datatable before publishing:
+
+## Versioning Procedure
+
+On your development branch:
+
+1. Verify that you have the latest changes from development by rebasing or merging into your branch.
+2. Run linting to ensure the code conforms to necessary style rules.
+3. Run unit tests to ensure the code properly functions.
+4. Bump the version number in package.json:
+  - Use revisions for small updates that fix bugs that do not otherwise change the functionality
+  - Use minor versions for small updates to functionality, if changes to not break backwards compatibility
+  - Use major versions for large updates to functionality, particularly if they involve breaking changes to backwards compatibility
+5. PR your changes with the updated version into the develop branch
+6. Request a repository owner to merge the changes into master, which will automatically invoke a publish to the public NPM repo

circle.yml

@@ -0,0 +1,23 @@
+## Customize the test machine
+machine:
+  timezone:
+    America/Denver # Set the timezone
+  node:
+    version: 6.9.4
+
+## Customize dependencies
+dependencies:
+  pre:
+    - npm install -g typescript typings
+
+## customize test commands
+test:
+  override:
+    - npm run build
+
+deployment:
+  production:
+    branch: master
+    commands:
+      - echo -e "$NPM_USERNAME\n$NPM_PASSWORD\n$NPM_EMAIL" | npm login
+      - npm run publish-to-npm

dist/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "angular-datatable",
+  "version": "2.2.1",
+  "description": "An Angular 2 datatable, with pagination, sorting, expandable rows etc.",
+  "main": "bundles/datatable.umd.js",
+  "module": "index.js",
+  "typings": "index.d.ts",
+  "keywords": [
+    "angular",
+    "angular2",
+    "Angular 2",
+    "ng2",
+    "ngx",
+    "datatable",
+    "data-table",
+    "data table",
+    "pagination"
+  ],
+  "author": "BrieBug Developers <[email protected]>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git://[email protected]/briebug/angular-datatable.git"
+  },
+  "homepage": "https://github.com/briebug/angular-datatable",
+  "bugs": {
+    "url": "https://github.com/briebug/angular-datatable/issues"
+  },
+  "peerDependencies": {
+    "@angular/core": "^2.4.0",
+    "@angular/common": "^2.4.0",
+    "@angular/forms": "^2.4.0",
+    "reflect-metadata": "^0.1.8",
+    "rxjs": "^5.0.1",
+    "zone.js": "^0.7.2"
+  }
+}

index.ts

@@ -0,0 +1,6 @@
+/**
+ * @module
+ * @description
+ * Entry point for all public APIs of the Angular Module
+ */
+export * from './src/index';

package.json

@@ -1,7 +1,9 @@
 {
-  "name": "angular-2-data-table",
-  "version": "0.1.2",
-  "description": "An Angular 2 data table, with pagination, sorting, expandable rows etc.",
+  "name": "angular-datatable",
+  "version": "2.2.1",
+  "description": "An Angular 2 datatable, with pagination, sorting, expandable rows etc.",
+  "main": "dist/bundles/angular-datatable.umd.js",
+  "module": "dist/index.js",
   "keywords": [
     "angular",
     "angular2",
@@ -12,27 +14,47 @@
     "data table",
     "pagination"
   ],
-  "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
   "scripts": {
-    "build": "rm -rf dist/* && tsc",
-    "serve": "rm -rf dist/ && tsc -w",
-    "prepublish": "npm run build"
+    "cleanup": "rimraf dist/bundles dist/src dist/index.d.ts dist/index.metadata.json dist/index.js dist/index.js.map dist/LICENSE dist/README.md",
+    "bundling": "rollup -c",
+    "minify": "uglifyjs dist/bundles/angular-datatable.umd.js --screw-ie8 --compress --mangle --comments --output dist/bundles/angular-datatable.umd.min.js",
+    "copy": "copyfiles LICENSE README.md dist",
+    "build": "npm run cleanup && ngc && npm run bundling && npm run minify && npm run copy",
+    "build-only": "npm run cleanup && ngc",
+    "publish-to-npm": "cd dist && npm publish",
+    "link": "cd dist && npm link && cd .."
   },
   "repository": {
     "type": "git",
-    "url": "git://[email protected]/ggmod/angular-2-data-table.git"
+    "url": "git://[email protected]/briebugconsulting/angular-datatable.git"
   },
-  "peerDependencies": {
-    "@angular/core": "^2.0.0"
-  },
-  "author": "ggmod <[email protected]>",
+  "author": "BrieBug Developers <[email protected]>",
   "license": "MIT",
+  "dependencies": {
+    "@angular/common": "^2.4.0",
+    "@angular/core": "^2.4.0",
+    "@angular/forms": "^2.4.0",
+    "reflect-metadata": "^0.1.8",
+    "rxjs": "^5.0.3",
+    "zone.js": "^0.7.2"
+  },
   "devDependencies": {
-    "@angular/common": "^2.0.0",
-    "@angular/core": "^2.0.0",
-    "@angular/forms": "^2.0.0",
-    "rxjs": "^5.0.0-beta.12",
-    "typescript": "^2.0.2"
+    "@angular/compiler": "^2.4.0",
+    "@angular/compiler-cli": "^2.4.0",
+    "copyfiles": "^1.2.0",
+    "cz-conventional-changelog": "1.2.0",
+    "rimraf": "^2.6.1",
+    "rollup": "^0.37.0",
+    "typescript": "~2.0.10",
+    "uglify-js": "^2.7.5",
+    "validate-commit-msg": "2.8.2"
+  },
+  "config": {
+    "ghooks": {
+      "commit-msg": "validate-commit-msg"
+    },
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
   }
 }

rollup.config.js

@@ -0,0 +1,12 @@
+export default {
+    entry: 'dist/index.js',
+    dest: 'dist/bundles/angular-datatable.umd.js',
+    sourceMap: false,
+    format: 'umd',
+    moduleName: 'ng.datatable',
+    globals: {
+        '@angular/core': 'ng.core',
+        '@angular/common': 'ng.common',
+        '@angular/forms': 'ng.forms'
+    }
+}

src/components/column.component.ts

@@ -1,10 +1,10 @@
 import { Directive, Input, ContentChild, OnInit } from '@angular/core';
 import { DataTableRow } from './row.component';
-import { CellCallback } from './types';
+import { CellCallback, DataTableSortCallback } from './types';
 
 
 @Directive({
-  selector: 'data-table-column'
+    selector: 'data-table-column'
 })
 export class DataTableColumn implements OnInit {
 
@@ -15,13 +15,14 @@ export class DataTableColumn implements OnInit {
     @Input() property: string;
     @Input() styleClass: string;
     @Input() cellColors: CellCallback;
+    @Input() customSort: DataTableSortCallback;
 
     // init and state:
     @Input() width: number | string;
     @Input() visible = true;
 
-    @ContentChild('dataTableCell') cellTemplate;
-    @ContentChild('dataTableHeader') headerTemplate;
+    @ContentChild('dataTableCell') cellTemplate: any;
+    @ContentChild('dataTableHeader') headerTemplate: any;
 
     getCellColor(row: DataTableRow, index: number) {
         if (this.cellColors !== undefined) {
@@ -50,4 +51,4 @@ export class DataTableColumn implements OnInit {
             };
         }
     }
-}
+}

src/components/header.template.ts

@@ -4,11 +4,15 @@ export const HEADER_TEMPLATE = `
     <div class="button-panel">
         <button type="button" class="btn btn-default btn-sm refresh-button"
             (click)="dataTable.reloadItems()">
-            <span class="glyphicon glyphicon-refresh"></span>
+            <i class="fa fa-refresh fa-lg"></i>
         </button>
         <button type="button" class="btn btn-default btn-sm column-selector-button" [class.active]="columnSelectorOpen"
             (click)="columnSelectorOpen = !columnSelectorOpen; $event.stopPropagation()" >
-            <span class="glyphicon glyphicon-list"></span>
+            <i class="fa fa-list fa-lg"></i>
+        </button>
+        <button *ngIf="dataTable.showDownloadButton" type="button" class="btn btn-default btn-sm download-button"
+            (click)="dataTable.downloadItems()">
+            <i class="fa fa-download fa-lg"></i>
         </button>
         <div class="column-selector-wrapper" (click)="$event.stopPropagation()">
             <div *ngIf="columnSelectorOpen" class="column-selector-box panel panel-default">

src/components/row.component.ts

@@ -23,6 +23,7 @@ export class DataTableRow implements OnDestroy {
     private _selected: boolean;
 
     @Output() selectedChange = new EventEmitter();
+    @Output() expandRowChange = new EventEmitter();
 
     get selected() {
         return this._selected;
@@ -50,6 +51,12 @@ export class DataTableRow implements OnDestroy {
         return '';
     }
 
+    expandRow(event: Event) {
+        event.stopPropagation();
+        this.expanded = !this.expanded;
+        this.expandRowChange.emit();
+    }
+
     constructor(@Inject(forwardRef(() => DataTable)) public dataTable: DataTable) {}
 
     ngOnDestroy() {

src/components/row.template.ts

@@ -9,9 +9,9 @@ export const ROW_TEMPLATE = `
     (dblclick)="dataTable.rowDoubleClicked(_this, $event)"
     (click)="dataTable.rowClicked(_this, $event)"
     >
-    <td [hide]="!dataTable.expandColumnVisible" (click)="expanded = !expanded; $event.stopPropagation()" class="row-expand-button">
-        <span class="glyphicon glyphicon-triangle-right" [hide]="expanded"></span>
-        <span class="glyphicon glyphicon-triangle-bottom" [hide]="!expanded"></span>
+    <td [hide]="!dataTable.expandColumnVisible" (click)="expandRow($event)" class="row-expand-button">
+        <i [ngClass]="{'fa-caret-right': !expanded, 'fa-caret-down': expanded}" 
+        class="fa fa-lg"></i>
     </td>
     <td [hide]="!dataTable.indexColumnVisible" class="index-column" [textContent]="displayIndex"></td>
     <td [hide]="!dataTable.selectColumnVisible" class="select-column">
@@ -23,7 +23,7 @@ export const ROW_TEMPLATE = `
         <div *ngIf="column.cellTemplate" [ngTemplateOutlet]="column.cellTemplate" [ngOutletContext]="{column: column, row: _this, item: item}"></div>
     </td>
 </tr>
-<tr *ngIf="dataTable.expandableRows" [hide]="!expanded" class="row-expansion">
+<tr *ngIf="dataTable.expandableRows && expanded" class="row-expansion">
     <td [attr.colspan]="dataTable.columnCount">
         <div [ngTemplateOutlet]="dataTable.expandTemplate" [ngOutletContext]="{row: _this, item: item}"></div>
     </td>