add virtual table component

README.md

@@ -19,6 +19,7 @@ Additional components for @angular-mdl/core that are not part of material design
 | fab-menu | [leojpod](https://github.com/leojpod) | a fab menu component | [![npm version](https://badge.fury.io/js/@angular-mdl%2Ffab-menu.svg)](https://www.npmjs.com/package/@angular-mdl/fab-menu)| [readme](https://github.com/mseemann/angular2-mdl-ext/tree/master/src/components/fab-menu) | experimental | [demo](http://mseemann.io/angular2-mdl-ext/fab-menu)
 | popover | [tb](https://github.com/tb) | popover with arbitrary content | [![npm version](https://badge.fury.io/js/%40angular-mdl%2Fpopover.svg)](https://www.npmjs.com/package/@angular-mdl/popover)| [readme](https://github.com/mseemann/angular2-mdl-ext/tree/master/src/components/popover) | experimental | [demo](http://mseemann.io/angular2-mdl-ext/popover)
 | select | [tb](https://github.com/tb) | a select box | [![npm version](https://badge.fury.io/js/%40angular-mdl%2Fselect.svg)](https://www.npmjs.com/package/@angular-mdl/select)| [readme](https://github.com/mseemann/angular2-mdl-ext/tree/master/src/components/select) | experimental | [demo](http://mseemann.io/angular2-mdl-ext/select)
+| virtual-table | [kmcs](https://github.com/kmcs) | a virtual table | [![npm version](https://badge.fury.io/js/%40angular-mdl%2Fvirtual-table.svg)](https://www.npmjs.com/package/@angular-mdl/virtual-table)| [readme](https://github.com/mseemann/angular2-mdl-ext/tree/master/src/components/virtual-table) | proof of concept | [demo](http://mseemann.io/angular2-mdl-ext/virtual-table)
 
 
 These components support AOT and TreeShaking!

config/tests/karma.conf.js

@@ -2,12 +2,13 @@ module.exports = function (config) {
 
   config.set({
     basePath: '../..',
-    frameworks: ['jasmine'],
+    frameworks: ['jasmine', 'viewport'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-coverage'),
-      require('karma-spec-reporter')
+      require('karma-spec-reporter'),
+      require('karma-viewport')
     ],
     customLaunchers: {
       // chrome setup for travis CI using chromium
@@ -59,6 +60,24 @@ module.exports = function (config) {
     logLevel: config.LOG_ERROR,
     autoWatch: true,
     browsers: ['Chrome'],
-    singleRun: false
+    singleRun: false,
+    viewport: {
+      breakpoints: [
+        {
+          name: 'mobile',
+          size: {
+            width: 320,
+            height: 480
+          }
+        },
+        {
+          name: 'desktop',
+          size: {
+            width: 1440,
+            height: 900
+          }
+        }
+      ]
+    }
   });
 };

config/webpack/webpack.common.js

@@ -28,10 +28,9 @@ module.exports = {
 				enforce: 'pre',
 				test: /.ts$/,
 				loader: 'string-replace-loader',
-				options: {
-					search: 'moduleId: module.id,',
-					replace: '',
-					flags: 'g'
+				query: {
+					search: new RegExp('moduleId: module.id,', 'g'), 
+					replace: ''
 				}
 			},
 			{
@@ -66,15 +65,29 @@ module.exports = {
 				test: /\.scss$/,
 				exclude: [util.root('src', 'e2e-app', 'app'), util.root('src', 'components')],
 				use: ExtractTextPlugin.extract({
-					use: ["css-loader", "postcss-loader", "sass-loader"],
+					use: ["css-loader",  {
+						loader: 'postcss-loader',
+						options: {
+						  ident: 'embedded',
+						  plugins: function() { return []; },
+						  sourceMap: true
+						}
+					  }, "sass-loader"],
 					// use style-loader in development
 					fallback: "style-loader"
 				})
 			},
 			{
 				test: /\.scss$/,
 				include: [util.root('src', 'e2e-app', 'app'), util.root('src', 'components')],
-				loaders: ['raw-loader', 'postcss-loader', 'sass-loader']
+				loaders: ['raw-loader', {
+					loader: 'postcss-loader',
+					options: {
+					  ident: 'embedded',
+					  plugins: function() { return []; },
+					  sourceMap: true
+					}
+				  }, 'sass-loader']
 			},
 			{
 				test: /\.hbs$/,
@@ -90,9 +103,6 @@ module.exports = {
 			/@angular(\\|\/)core(\\|\/)esm5/,
 			util.root('src') // location of your src
 		),
-		new webpack.optimize.CommonsChunkPlugin({
-			name: ['app', 'vendor', 'polyfills']
-		}),
 		new webpack.LoaderOptionsPlugin({
 			options: {
 				postcss: function () {
@@ -106,4 +116,4 @@ module.exports = {
 			production: process.env.NODE_ENV == 'production' ? true : false
 		})
 	]
-};
+};

config/webpack/webpack.dev.js

@@ -5,7 +5,7 @@ var util = require('./util');
 
 module.exports = webpackMerge(commonConfig, {
 	devtool: 'cheap-module-eval-source-map',
-
+	mode: 'development',
 	output: {
 		path: util.root('dist'),
 		filename: '[name].js',

config/webpack/webpack.prod.js

@@ -2,6 +2,7 @@ var webpack = require('webpack');
 var webpackMerge = require('webpack-merge');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var CopyWebpackPlugin = require('copy-webpack-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 var commonConfig = require('./webpack.common.js');
 var util = require('./util');
 
@@ -16,19 +17,33 @@ module.exports = webpackMerge(commonConfig, {
 		filename: '[name].[hash].js',
 		chunkFilename: '[id].[hash].chunk.js'
 	},
+
 	//
 	// htmlLoader: {
 	// 	minimize: false // workaround for ng2
 	// },
 
+	optimization: {
+		minimizer: [
+			new UglifyJsPlugin({
+				cache: true,
+				parallel: true,
+				uglifyOptions: {
+				  compress: true,
+				  ecma: 5,
+				  mangle: true
+				}
+			})
+		]
+	},
+
 	plugins: [
 		new CopyWebpackPlugin([{ from: util.root('src', 'e2e-app', '404.html') }], {copyUnmodified: true}),
 		new webpack.NoEmitOnErrorsPlugin(),
 		new webpack.LoaderOptionsPlugin({
 			minimize: false,
 			debug: false
 		}),
-		new webpack.optimize.UglifyJsPlugin(),
 		new ExtractTextPlugin('[name].[hash].css'),
 		new webpack.DefinePlugin({
 			'process.env': {

package.json

@@ -30,6 +30,8 @@
     "@angular/platform-browser-dynamic": "5.2.9",
     "@angular/router": "5.2.9",
     "@mseemann/prism": "0.0.1",
+    "@tweenjs/tween.js":"17.2.0",
+    "angular2-virtual-scroll": "github:kmcs/angular2-virtual-scroll#a83b922",
     "core-js": "2.5.7",
     "custom-event-polyfill": "^0.3.0",
     "match-sorter": "2.2.1",
@@ -50,11 +52,11 @@
     "angular2-template-loader": "^0.6.2",
     "awesome-typescript-loader": "5.1.1",
     "codeclimate-test-reporter": "0.5.0",
-    "copy-webpack-plugin": "4.2.1",
+    "copy-webpack-plugin": "4.5.2",
     "coveralls": "3.0.1",
     "cross-env": "5.2.0",
     "css-loader": "1.0.0",
-    "extract-text-webpack-plugin": "3.0.1",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "glob": "7.1.2",
     "gulp": "3.9.1",
     "gulp-autoprefixer": "4.0.0",
@@ -67,7 +69,7 @@
     "gulp-typescript": "^4.0.2",
     "handlebars-loader": "1.6.0",
     "html-loader": "0.5.5",
-    "html-webpack-plugin": "2.30.1",
+    "html-webpack-plugin": "3.1.0",
     "jasmine-core": "2.8.0",
     "jasmine-spec-reporter": "4.2.1",
     "karma": "2.0.4",
@@ -78,9 +80,10 @@
     "karma-jasmine": "1.1.0",
     "karma-remap-istanbul": "0.6.0",
     "karma-spec-reporter": "0.0.31",
+    "karma-viewport": "^1.0.2",
     "merge2": "1.2.1",
     "node-sass": "4.9.2",
-    "postcss-loader": "1.3.3",
+    "postcss-loader": "^2.1.5",
     "raw-loader": "0.5.1",
     "remap-istanbul": "0.11.1",
     "rimraf": "2.6.2",
@@ -91,9 +94,10 @@
     "ts-helpers": "^1.1.2",
     "ts-node": "5.0.1",
     "tslint": "5.8.0",
-    "typescript": "2.6.2",
-    "webpack": "3.8.0",
-    "webpack-dev-server": "2.9.4",
+    "typescript": "2.7.2",
+    "webpack": "4.16.0",
+    "webpack-cli": "^3.0.8",
+    "webpack-dev-server": "3.1.4",
     "webpack-merge": "4.1.2"
   },
   "keywords": [

src/components/system-config-spec.ts

@@ -4,7 +4,8 @@ const components = [
     'expansion-panel',
     'fab-menu',
     'popover',
-    'select'
+    'select',
+    'virtual-table'
 ];
 
 const angularPackages = [
@@ -32,6 +33,8 @@ vendorPackages[`@angular-mdl/core`] = { main: `bundle/core.js` };
 
 vendorPackages['rxjs'] = { main: 'index.js' };
 vendorPackages['moment'] = { main: 'min/moment.min.js'};
+vendorPackages['@tweenjs/tween.js'] = { main: 'src/Tween.js'};
+vendorPackages['angular2-virtual-scroll'] = { main: 'dist/virtual-scroll.js'};
 
 /** Type declaration for ambient System. */
 declare var System: any;
@@ -42,7 +45,9 @@ System.config({
         '@angular': 'vendor/@angular',
         '@angular-mdl/core': 'vendor/@angular-mdl/core',
         'rxjs': 'vendor/rxjs',
-        'moment': 'vendor/moment'
+        'moment': 'vendor/moment',
+        '@tweenjs/tween.js': 'vendor/@tweenjs/tween.js',
+        'angular2-virtual-scroll': 'vendor/angular2-virtual-scroll'
     },
     packages: vendorPackages
 });

src/components/tsconfig-spec.json

@@ -17,7 +17,8 @@
     "baseUrl": "",
     "types": [
       "jasmine",
-      "node"
+      "node",
+      "karma-viewport"
     ]
   }
 }

src/components/virtual-table/README.md

@@ -0,0 +1,28 @@
+# Virtual-Table
+
+### Installing
+
+Install the package and angular2-virtual-scroll!
+
+    npm i --save @angular-mdl/virtual-table
+
+Please use the angular2-virtual-scroll from the peer dependency reference!
+
+import the MdlVirtualTableModule and add it to your app.module imports:
+
+    import { MdlVirtualTableModule } from '@angular-mdl/virtual-table';
+
+### Browser Requirements
+
+The IntersectionObserver is used for any table resize occurenc! Please be aware of using a modern browser ((see here for implementation status)[https://github.com/w3c/IntersectionObserver]) or use the official [polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill).
+
+If you use the polyfill please do not forget to disable the mutuation observer!
+`(<any>window).IntersectionObserver.prototype.USE_MUTATION_OBSERVER = false;`
+
+You can disable the IntersectionObserver by adding the directive intersection-observer-disabled. Be aware if you are using e.g. the table within @angular-mdl/core tabs component and the virtual table is inital hidden may data is not loaded as expected.
+
+### Usage & API
+
+    Visit [demo] for usage examples and API summary.
+    [demo]: http://mseemann.io/angular2-mdl-ext/virtual-table
+

src/components/virtual-table/column.component.ts

@@ -0,0 +1,37 @@
+import { Component, Input, ContentChild, TemplateRef } from '@angular/core';
+
+@Component({
+    selector: 'mdl-column',
+    template: ''
+})
+export class MdlVirtualTableColumnComponent {
+    @Input() label: string;
+    @Input() field: string;
+    @Input() width: string;
+    @Input() set sortable(v: boolean) {
+        this._sortable = v !== null && "" + v !== 'false';
+    }
+    get sortable(): boolean {
+        return this._sortable;
+    }
+
+    @Input('row-selection-enabled') set rowSelection(v: boolean) {
+        this._rowSelection = v !== null && "" + v !== 'false';
+    }
+    get rowSelectionEnabled(): boolean {
+        return this._rowSelection;
+    }
+    @Input('select-all-enabled') set selectAllEnabled(v: boolean) {
+        this._selectAllEnabled = v !== null && "" + v !== 'false';
+    }
+    get selectAllEnabled(): boolean {
+        return this._selectAllEnabled;
+    }
+
+    private _sortable: boolean = false;
+    private _rowSelection: boolean = false;
+    private _selectAllEnabled: boolean = false;
+
+    sortDirection: string;
+    @ContentChild(TemplateRef) cellTemplate: TemplateRef<any>;
+}

src/components/virtual-table/index.ts

@@ -0,0 +1,5 @@
+export * from './module';
+export * from './table.component';
+export * from './column.component';
+export * from './list.component';
+export * from './row-data-response.interface';

src/components/virtual-table/list.component.ts

@@ -0,0 +1,38 @@
+import { Component, Input, ContentChild, TemplateRef, Output, EventEmitter } from '@angular/core';
+
+@Component({
+    selector: 'mdl-virtual-table-list',
+    template: ''
+})
+export class MdlVirtualTableListComponent {
+
+
+    @Input('breakpoint-max-width') set breakpointMaxWidth(v: number) {
+        this._breakpointMaxWidth = parseInt("" + v);
+    }
+    get breakpointMaxWidth(): number {
+        return this._breakpointMaxWidth;
+    }
+
+    @Input('item-height') set itemHeight(v: number) {
+        this._itemHeight = parseInt("" + v);
+    }
+    get itemHeight(): number {
+        return this._itemHeight;
+    }
+
+    get styledItemHeight(): string {
+        return this._itemHeight - 11 + 'px';
+    }
+    sortDirection: string;
+
+    @Output('item-click') itemClick: EventEmitter<any>;
+    @ContentChild(TemplateRef) itemTemplate: TemplateRef<any>;
+
+    private _breakpointMaxWidth: number = 480;
+    private _itemHeight: number = 51;
+
+    constructor() {
+        this.itemClick = new EventEmitter<any>();
+    }
+}