Merge pull request #54 from fredguile/fesm

Version 1.5

.circleci/config.yml

@@ -14,37 +14,31 @@ jobs:
           name: Installing Git and SSH client
           command: apt-get update && apt-get install -y git openssh-client
       - checkout
-      - run:
-          name: Installing Angular-CLI as global NPM
-          command: npm install -g @angular/cli@~1.0.0
-      - run:
-          name: Installing Gulp as global NPM
-          command: npm install -g gulp-cli@^1.0.0
       - restore_cache:
-          key: npm-packages-{{ checksum "package.json" }}-{{ checksum "src/demo-app/package.json" }}
+          key: npm-packages-{{ checksum "package.json" }}-{{ checksum "demo-app/package.json" }}
       - run:
           name: Installing ng2-md-datatable dependencies
           command: npm install
       - run:
           name: Building ng2-md-datatable binaries
-          command: gulp build:release
+          command: npm run build
       - run:
           name: Installing Demo app dependencies
-          working_directory: /tmp/ng2-md-datatable/src/demo-app
+          working_directory: /tmp/ng2-md-datatable/demo-app
           command: npm install
       - run:
           name: Verifying Demo app AOT Compilation
-          working_directory: /tmp/ng2-md-datatable/src/demo-app
-          command: ng build --aot
+          working_directory: /tmp/ng2-md-datatable/demo-app
+          command: npx ng build --aot
       - run:
           name: Runing UI integration tests using Chromium (headless)
-          working_directory: /tmp/ng2-md-datatable/src/demo-app
-          command: ng test --single-run --browsers Chromium --reporters junit
+          working_directory: /tmp/ng2-md-datatable/demo-app
+          command: npx ng test --single-run --browsers ChromeHeadless --reporters junit
       - save_cache:
-          key: npm-packages-{{ checksum "package.json" }}-{{ checksum "src/demo-app/package.json" }}
+          key: npm-packages-{{ checksum "package.json" }}-{{ checksum "demo-app/package.json" }}
           paths:
             - /tmp/ng2-md-datatable/node_modules
-            - /tmp/ng2-md-datatable/src/demo-app/node_modules
+            - /tmp/ng2-md-datatable/demo-app/node_modules
       - store_artifacts:
           path: /tmp/test-reports/junit
       - store_test_results:

.gitignore

@@ -14,6 +14,7 @@ tmp
 /tmp
 /typings
 /deploy
+/demo-app/dist
 
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov
@@ -52,3 +53,6 @@ Chrome*
 
 # AOT
 **/codegen
+
+# Angular-CLI
+.ng_build

.vscode/settings.json

@@ -1,3 +1,6 @@
 {
-    "typescript.tsdk": "./node_modules/typescript/lib"
-}
+  "eslint.enable": false,
+  "tslint.enable": true,
+  "tslint.autoFixOnSave": true,
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

README.md

@@ -6,9 +6,9 @@
 
 [Angular 2](https://github.com/angular/angular) with [Material 2](https://github.com/angular/material2) is awesome, but it's still lacking a `DataTable` component (as of November 2016).
 
-As I urgently needed one for a project, I decided to make my own `DataTable` component and share it on GitHub.
+As I urgently needed one for a project, I decided to make my own `DataTable` component and share it on GitHub. This may be useful for you (or not).
 
-This may be useful for you (or not).
+**Update 08/2017:** You may want to use [the official Material 2 DataTable here](https://material.angular.io/components/table/overview). But if this one still speaks more to you, no problem I'll keep it up to date with the latest Angular /  Material 2 versions.
 
 ## Features
 - Pagination Component
@@ -29,12 +29,12 @@ npm install --save ng2-md-datatable
 Then include it in your application's main module:
 
 ```ts
-import { MdDataTableModule } from 'ng2-md-datatable';
+import { MatDataTableModule } from 'ng2-md-datatable';
 
 @NgModule({
   imports: [
     ...
-    MdDataTableModule,
+    MatDataTableModule,
     ...
 ```
 
@@ -124,13 +124,16 @@ This is based on the [current guide](https://github.com/angular/material2/blob/m
 
 ## Live Demo
 
-To see `ng2-md-datatable` in action (head to `/src/demo-app`), a few steps are required:
+To see `ng2-md-datatable` in action (head to `/demo-app`), a few steps are required:
 
-- you need Gulp (`npm install -g gulp-cli`)
 - you need `Angular-CLI` v1.0 or later (`npm install -g @angular/cli`)
-- the demo-app currently uses the compiled library, so please run beforehand:
-  * `gulp build:components` (or `gulp build:release` depending on if you plan to use AOT or not)
-- from the `demo-app` folder, run `npm install` (this will copy the binaries from the `/dist` folder in `nodes_modules`)
+- from the `demo-app` folder, run `npm install`
 - then start `ng serve` or `ng serve --aot`
 
 Don't mind about the use of Observables here (and about the Shuffle button), I just wanted to test if the datatable behaved correctly with Angular async rendering.
+
+## Plunkr
+
+I've been using this Plunkr: <https://plnkr.co/edit/5lnHom0L7Zw7dEP5uyve?p=info> 
+
+But it's still work in progress, actually I shall package a compiled CSS for styling this thing...

src/demo-app/.angular-cli.json → demo-app/.angular-cli.json

@@ -7,20 +7,15 @@
     {
       "root": "src",
       "outDir": "dist",
-      "assets": [
-        "assets",
-        "favicon.ico"
-      ],
+      "assets": ["assets", "favicon.ico"],
       "index": "index.html",
       "main": "main.ts",
       "polyfills": "polyfills.ts",
       "test": "test.ts",
       "tsconfig": "tsconfig.app.json",
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
-      "styles": [
-        "styles.scss"
-      ],
+      "styles": ["styles.scss"],
       "scripts": [],
       "environmentSource": "environments/environment.ts",
       "environments": {

src/demo-app/README.md → demo-app/README.md

@@ -1,14 +1,14 @@
 # DemoApp
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.3.2.
 
 ## Development server
 
 Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
 
 ## Code scaffolding
 
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
 
 ## Build
 

demo-app/e2e/app.e2e-spec.ts

@@ -0,0 +1,14 @@
+import { AppPage } from "./app.po";
+
+describe("demo-app App", () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it("should display welcome message", () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual("Welcome to app!");
+  });
+});

demo-app/e2e/app.po.ts

@@ -0,0 +1,11 @@
+import { browser, by, element } from "protractor";
+
+export class AppPage {
+  navigateTo() {
+    return browser.get("/");
+  }
+
+  getParagraphText() {
+    return element(by.css("app-root h1")).getText();
+  }
+}

src/demo-app/e2e/tsconfig.e2e.json → demo-app/e2e/tsconfig.e2e.json

@@ -2,10 +2,12 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/e2e",
+    "baseUrl": "./",
     "module": "commonjs",
     "target": "es5",
-    "types":[
+    "types": [
       "jasmine",
+      "jasminewd2",
       "node"
     ]
   }

demo-app/karma.conf.js

@@ -0,0 +1,59 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function(config) {
+  config.set({
+    basePath: "",
+    frameworks: ["jasmine", "@angular/cli"],
+    plugins: [
+      require("karma-jasmine"),
+      require("karma-chrome-launcher"),
+      require("karma-jasmine-html-reporter"),
+      require("karma-coverage-istanbul-reporter"),
+      require('karma-junit-reporter'),
+      require("@angular/cli/plugins/karma")
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageIstanbulReporter: {
+      reports: ["html", "lcovonly"],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: "dev"
+    },
+    reporters:
+      config.angularCli && config.angularCli.codeCoverage
+        ? ["progress", "coverage-istanbul"]
+        : ["progress", "kjhtml"],
+    junitReporter: (circleCI => {
+      const outputDir = circleCI ? "/tmp/test-reports/junit" : ".";
+
+      return {
+        outputDir,
+        outputFile: "test-result-ui.xml",
+        useBrowserName: false
+      };
+    })(process.env.CIRCLECI),
+    customLaunchers: {
+      ChromeHeadless: {
+        base: "Chrome",
+        flags: [
+          "--disable-translate",
+          "--headless",
+          "--disable-gpu",
+          "--disable-extensions",
+          "--remote-debugging-port=9222"
+        ],
+        displayName: "Chrome Headless mode"
+      }
+    },
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ["Chrome"],
+    singleRun: false
+  });
+};