Initial Material Design Lite setup

refs #36

demo-shell-ng2/app/components/MaterialDesignLiteUpgradeElement.ts

@@ -0,0 +1,11 @@
+import {Directive, AfterViewInit} from 'angular2/core';
+declare var componentHandler;
+
+@Directive({
+    selector: '[mdl]'
+})
+export class MDL implements AfterViewInit {
+    ngAfterViewInit() {
+        componentHandler.upgradeAllRegistered();
+    }
+}

demo-shell-ng2/app/components/page2.view.ts

@@ -1,4 +1,5 @@
 import {Component} from 'angular2/core';
+import {MDL} from './MaterialDesignLiteUpgradeElement';
 
 @Component({
     selector: 'page2-view',
@@ -6,9 +7,14 @@ import {Component} from 'angular2/core';
         <div class="container">
             <div class="row">
                 <h2>Page 2</h2>
+                <label mdl class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-1">
+                  <input type="checkbox" id="checkbox-1" class="mdl-checkbox__input" checked>
+                  <span class="mdl-checkbox__label">Checkbox</span>
+                </label>
             </div>
         </div>
-    `
+    `,
+    directives: [MDL]
 })
 export class Page2View {
 

demo-shell-ng2/gulpfile.js

@@ -10,7 +10,7 @@ const tsconfig = require('tsconfig-glob');
 
 // clean the contents of the distribution directory
 gulp.task('clean', function () {
-    return del('dist/**/*');
+    return del('dist');
 });
 
 // copy static assets - i.e. non TypeScript compiled source

demo-shell-ng2/index.html

@@ -9,6 +9,11 @@
     <!-- Custom theme -->
     <link rel="stylesheet" href="app/css/theme/navbar.css">
 
+    <!-- Google Material Design Lite -->
+    <link rel="stylesheet" href="node_modules/material-design-lite/material.min.css">
+    <script src="node_modules/material-design-lite/material.min.js"></script>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+
     <!-- 1. Load libraries -->
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>

demo-shell-ng2/package.json

@@ -21,6 +21,7 @@
     "es6-shim": "^0.35.0",
     "font-awesome": "^4.5.0",
     "jquery": "^2.2.2",
+    "material-design-lite": "^1.1.3",
     "ng2-alfresco-documentlist": "file:../ng2-components/ng2-alfresco-documentlist",
     "ng2-uploader": "denisvuyka/ng2-uploader",
     "reflect-metadata": "0.1.2",