Bootstrap4 check, Font Awesome upgrade, cleanout old package stuff.

README.md

@@ -11,7 +11,9 @@ 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.
+
+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-datatable --save`

package.json

@@ -1,7 +1,7 @@
 {
   "name": "angular-datatable",
   "version": "2.0.4",
-  "description": "An Angular 2 data table, with pagination, sorting, expandable rows etc.",
+  "description": "An Angular 2 datatable, with pagination, sorting, expandable rows etc.",
   "keywords": [
     "angular",
     "angular2",
@@ -21,12 +21,12 @@
   },
   "repository": {
     "type": "git",
-    "url": "git://git@github.com/briebugconsulting/ng-data-table.git"
+    "url": "git://git@github.com/briebugconsulting/angular-datatable.git"
   },
   "peerDependencies": {
     "@angular/core": "^2.0.0"
   },
-  "author": "ggmod <ggmod64@gmail.com>",
+  "author": "BrieBug Developers <developers@briebug.com>",
   "license": "MIT",
   "devDependencies": {
     "@angular/common": "^2.0.0",

src/components/header.template.ts

@@ -4,11 +4,11 @@ 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>
         <div class="column-selector-wrapper" (click)="$event.stopPropagation()">
             <div *ngIf="columnSelectorOpen" class="column-selector-box panel panel-default">

src/components/row.template.ts

@@ -10,8 +10,8 @@ export const ROW_TEMPLATE = `
     (click)="dataTable.rowClicked(_this, $event)"
     >
     <td [hide]="!dataTable.expandColumnVisible" (click)="expandRow($event)" class="row-expand-button">
-        <span [ngClass]="{'glyphicon-triangle-right': !expanded, 'glyphicon-triangle-bottom': expanded}" 
-        class="glyphicon"></span>
+        <i [ngClass]="{'fa-caret-right': !expanded, 'fa-caret-bottom': expanded}" 
+        class="fa fa-lg"></i>
     </td>
     <td [hide]="!dataTable.indexColumnVisible" class="index-column" [textContent]="displayIndex"></td>
     <td [hide]="!dataTable.selectColumnVisible" class="select-column">

src/components/table.template.ts

@@ -19,10 +19,10 @@ export const TABLE_TEMPLATE = `
                         <span *ngIf="!column.headerTemplate" [textContent]="column.header"></span>
                         <span *ngIf="column.headerTemplate" [ngTemplateOutlet]="column.headerTemplate" [ngOutletContext]="{column: column}"></span>
                         <span class="column-sort-icon" *ngIf="column.sortable">
-                            <span class="glyphicon glyphicon-sort column-sortable-icon" [hide]="column.property === sortBy"></span>
+                            <i class="fa fa-sort column-sortable-icon" [hide]="column.property === sortBy"></i>
                             <span [hide]="column.property !== sortBy">
-                                <span class="glyphicon glyphicon-triangle-top" [hide]="sortAsc"></span>
-                                <span class="glyphicon glyphicon-triangle-bottom" [hide]="!sortAsc"></span>
+                                <i class="fa fa-sort-asc" [hide]="sortAsc"></i>
+                                <i class="fa fa-sort-desc" [hide]="!sortAsc"></i>
                             </span>
                         </span>
                         <span *ngIf="column.resizable" class="column-resize-handle" (mousedown)="resizeColumnStart($event, column, th)"></span>

typings.json

@@ -1,5 +1,5 @@
 {
-  "name": "angular-2-data-table",
+  "name": "angular-datatable",
   "dependencies": {},
   "globalDevDependencies": {
     "es6-shim": "registry:dt/es6-shim#0.31.2+20160602141504"