style(demo-app): Use minified js, minor adjustments to toolbar and typography demo

Author: trimox

config/webpack/webpack.dev.js

@@ -41,10 +41,6 @@ module.exports = [{
     }]
   },
   plugins: [
-    new webpack.LoaderOptionsPlugin({
-      minimize: true,
-      debug: false
-    }),
     new webpack.LoaderOptionsPlugin({
       options: {
         postcss: function() {
@@ -59,9 +55,6 @@ module.exports = [{
   output: {
     path: OUT_PATH,
     filename: '[name].bundle.js'
-      // filename: '[name].[chunkhash].bundle.js',
-      // sourceMapFilename: '[name].[chunkhash].bundle.js.map',
-      // chunkFilename: '[name].chunk.[chunkhash].js',
   },
   entry: {
     'polyfills': './src/demo-app/polyfills.ts',
@@ -76,7 +69,7 @@ module.exports = [{
     rules: [{
       test: /\.ts$/,
       use: [{
-        loader: 'babel-loader?presets[]=es2015',
+        loader: 'babel-loader?presets[]=env',
       }, {
         loader: 'awesome-typescript-loader',
         options: {
@@ -92,7 +85,7 @@ module.exports = [{
       "use": [{
         "loader": 'babel-loader',
         "options": {
-          "presets": ['es2015'],
+          "presets": ['env'],
         },
       }, ],
       "exclude": [
@@ -115,10 +108,6 @@ module.exports = [{
     }]
   },
   plugins: [
-    new webpack.LoaderOptionsPlugin({
-      //minimize: true, do not minimize for any loader - this will result in weird, unpredictable behavior
-      debug: false
-    }),
     // Workaround for angular/angular#1158
     new webpack.ContextReplacementPlugin(
       /angular(\\|\/)core(\\|\/)@angular/,

src/demo-app/app/components/toolbar-demo/toolbar-demo.component.html

@@ -67,7 +67,7 @@ <h1 mdc-typography-headline>Examples</h1>
       <mdc-toolbar [flexible]="false" [fixed]="false" [waterfall]="false" [fixedLastrow]="false" [flexibleTitle]="true">
         <mdc-toolbar-row>
           <mdc-toolbar-section [alignStart]="true">
-            <a class="material-icons">menu</a>
+            <a href="#" class="material-icons" aria-label="menu">menu</a>
             <span mdc-toolbar-title>Title</span>
           </mdc-toolbar-section>
           <mdc-toolbar-section [alignEnd]="true">
@@ -86,7 +86,7 @@ <h1 mdc-typography-headline>Examples</h1>
   [flexibleTitle]="true"&gt;
   &lt;mdc-toolbar-row&gt;
     &lt;mdc-toolbar-section [alignStart]="true"&gt;
-      &lt;a class="material-icons"&gt;menu&lt;/a&gt;
+      &lt;a href="#" class="material-icons" aria-label="menu"&gt;menu&lt;/a&gt;
       &lt;span mdc-toolbar-title&gt;Title&lt;/span&gt;
     &lt;/mdc-toolbar-section&gt;
     &lt;mdc-toolbar-section [alignEnd]="true"&gt;

src/demo-app/app/components/typography-demo/typography-demo.component.html

@@ -8,10 +8,12 @@ <h1 mdc-typography-headline>Usage</h1>
   </div>
   <h1 mdc-typography-headline>Examples</h1>
   <div fxLayout="column">
-    <h2 mdc-typography-display4 mdc-typography-adjust-margin>Display 4 with adjust margins</h2>
+    <h3 mdc-typography-title mdc-typography-adjust-margin>Text with adjust margins directive</h3>
+    <h4 mdc-typography-caption mdc-typography-adjust-margin>Sample text showing the aligned margin</h4>
     <span>If you include the mdc-typography-adjust-margin directive, positioning will be adjusted according to the style.</span>
     <pre class="prettyprint">
-&lt;h2 mdc-typography-display4 mdc-typography-adjust-margin&gt;Adjust margins of text&lt;/h2&gt;
+&lt;h3 mdc-typography-title mdc-typography-adjust-margin&gt;Text with adjust margins directive&lt;/h3&gt;
+&lt;h4 mdc-typography-caption mdc-typography-adjust-margin&gt;Sample text showing the aligned margins&lt;/h4&gt;
       </pre>
   </div>
   <div fxLayout="column">

src/demo-app/root.module.ts

@@ -1,7 +1,7 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppModule } from './app/app.module';
-import './../../dist/bundle/core.js';
+import './../../dist/bundle/core.min.js';
 
 enableProdMode();