Bug fixes, optimizations and refactors

README.md

@@ -25,7 +25,7 @@ but this library has the following features:
 The main goal was to achieve minimalism and performance, not to encompass all posible kind of options or UI components (this is the philosophy of
 Material Design Light too). You can always add other components from other sources.
 
-If you find this project useful and are going to use it, please give a star in the repo and credits to the author 
+If you find this project useful and are going to use it, please **give a star in the repo** and credits to the author 
 and to <a href="http://getmdl.io" target="_blank">Material Design Lite from Google</a>
 
 Terms of use under <a href="LICENSE.txt">MIT</a> license.
@@ -40,17 +40,21 @@ Yago López:
 ## Demo
 
 <!-- - <a href="http://yagolopez.github.io/material-light/iframe/iframe.html" target="_blank">Desktop PC</a> -->
-- <a href="http://mobt.me/Xf27" target="_blank">Mobile Simulator (For Desktop)</a>
-- <a href="https://yagolopez.github.io/material-light/dist/index.html" target="_blank">Full Screen (For Mobile)</a>
+- <a href="http://mobt.me/Xf27" target="_blank">Mobile Simulator (For Desktop)</a>.
+- <a href="https://yagolopez.github.io/material-light/dist" target="_blank">Full Screen (For Mobile)</a>
+
+** Warning **:
+When cross domain content is used in iframes some javascript features are disabled for
+security reasons (i. e. alert dialogs). Run the desktop version for full features.
 
 ## Insallation and Use
 
-- To install, run: `npm install YagoLopez/material-light --save-dev`
+- To install, run: `npm install YagoLopez/material-light --save`
 - This project can be used with the **angular-cli** although not mandatory.
 - Include Material Icons from `{project-folder}/src/assets/fonts/mlIcons.css` in your `index.html`
 - To have AOT working you must execute the following steps:
-1. Copy `{project-folder}/node_modules/material-light/src/app/ml/` folder to your `/src/` folder
-2. Copy `{project-folder}/node_modules/material-light/src/assets/` folder to your `/src/` folder
+  - Copy `{project-folder}/node_modules/material-light/src/app/ml/` folder to your `/src/app` folder
+  - Copy `{project-folder}/node_modules/material-light/src/assets/` folder to your `/src/` folder
 - Import the component modules from `{project-folder}/src/app/ml/components` in your own module. Component modules have `*Mod.ts` file name
 - For example, if you want to use `MlButton`, import `MlButtonMod.ts` in your module and place `<ml-button>my button</ml-button>` in your template
 - Use the components following the examples in the `{project-folder}/node_modules/material-light/src/app/pages` directory.
@@ -93,25 +97,21 @@ For advanced theming, CSS selectors must be used. Inspect the DOM using develope
 
 ## Running the demo
 
-- You can run the compiled demo pointing a web server to `{project-folder}/node_modules/material-light/dist/index.html`
-- If you want to compile the project, clone or download the repo, adjust the `basePath` in `app.module.ts` to your environment and run it with `ng serve`
+You can run the compiled demo pointing a web server to `{project-folder}/node_modules/material-light/dist/index.html`
+If you want to compile the project:
+- Clone or download the repo
+- Inside the project folder run `npm install`
+- Adjust the `basePath` in `app.module.ts` to your environment and run it with `ng serve`
 
 ## Testing
 
 <div>Tests with the colaboration of:</div>
 <a href="https://www.browserstack.com/" target="_blank"><img src="browserstack-logo.png" height="90px"></a>
 
-## Used for running this demo:
-
-- Angular latest versions
-- Angular Command Line (angular-cli)
-- Typescript latest versions
-- Webpack for production builds
-- SystemJS as module loader during development time
-- Node/Npm latest versions
-
 ## Disclaimers:
 
 - This project is based on <a href="http://getmdl.io" target="_blank">Material Design Lite from Google</a>. It is an adaptation of MDL JavaScript components to Angular components with the permission of the MDL team.
 - Material Design is a Google's registered trade mark probably.
 - This is an open-source project without commercial or profit intention.
+
+<p><a href="#">Back to top &uparrow;</a>

dist/assets/styles/app-loader.css

@@ -1,4 +1,3 @@
-body{background: lightskyblue; color: white}
 .loading-text{
   position: absolute;
   margin: auto;

dist/index.html

@@ -5,12 +5,12 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="assets/fonts/mlIcon.css">
-    <link rel="stylesheet" href="assets/styles/app-loader.css">
   </head>
-  <body>
+  <body style="background: lightskyblue; color: white">
     <ml-demo-app>
       <div class="loading-text">Loading Material Light Demo</div>
       <div class="loading-logo"><img src="assets/img/logo.png"></div>
     </ml-demo-app>
+    <link rel="stylesheet" href="assets/styles/app-loader.css">
   <script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
 </html>

src/app/app.layout.ts

@@ -15,7 +15,8 @@ template:`
   .active-route {background: darkgrey; color: white !important}
   .drawer-title {color: white; text-align: center}
   .drawer-img {width: 25%; text-align: center; margin: 30px auto auto; display: block}
-  /*:host /deep/ .my-theme {background: cornflowerblue; color: darkblue}*/
+  /* for future theming feature */
+  /* :host /deep/ .my-theme {background: cornflowerblue; color: darkblue} */
 </style>
 
 <ml-layout> 

src/app/app.module.ts

@@ -1,3 +1,8 @@
+//todo: poner los estilos "loader" en index.html para que no haya flickering extraño en logo y texto
+//todo: arreglar lo del router y las tabs (usar named routes?)
+//todo: aplicar zone.runOutsideAngular() a los construcores new Mdl*() y ver si se reduce la deteccion de cambios
+//todo: relativo a lo anterior, probar a hacer esto de forma centralizada en el constructor de MdlElement
+//todo: probar a quitar './' en @Component.styleUrls
 //todo: reset button debe quitar errores de validacion en controles
 //todo: hacer documentacion de api para cada componente
 //todo: instalar polyfill classList.js para svg e IE?
@@ -30,12 +35,12 @@ import {MlLayoutMod} from "./ml/components/layout/mlLayoutMod";
 import {MlMenuMod} from "./ml/components/menu/mlMenuMod";
 import {MlDemoApp} from "./app.layout";
 
-function getUrlParameter(name) {
+const getUrlParameter = (name: string) => {
   name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
   let regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
   let results = regex.exec(location.search);
   return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
-}
+};
 
 // Absolute paths for Webpack
 let basePath = 'C:/Users/UsuarioAurora/Documents/WebstormProjects/material-light/src/app/pages/';

src/app/ml/components/badge/mlBadge.ts

@@ -1,5 +1,5 @@
 import {ElementRef, Input, Renderer2, Component, ViewEncapsulation} from "@angular/core";
-import * as ml from "../../lib/ml_lib";
+import * as ml from "../../lib/mlLib";
 
 @Component({
 selector: 'ml-badge',
@@ -22,11 +22,5 @@ export class MlBadge{
     ml.setAttribute(this.host, 'data-badge', this.value, this.ren);
     ml.isDefined(this.background) && ml.setClass(this.host, 'mdl-badge--no-background', this.ren);
     ml.isDefined(this.overlap) && ml.setClass(this.host, 'mdl-badge--overlap', this.ren);
-
-    if(ml.isDefined(this.icon)){
-      ml.setClass(this.host, 'material-icons', this.ren);
-      ml.setClass(this.host, 'mdl-badge--overlap', this.ren);
-      this.host.nativeElement.querySelector('ml-icon').className = 'mdl-badge-icon';
-    }
   }
 }

src/app/ml/components/card/mlCard.ts

@@ -1,5 +1,5 @@
 import {Component, Directive, ElementRef, Input, Renderer2, ViewEncapsulation, ViewChild} from "@angular/core";
-import * as ml from "../../lib/ml_lib";
+import * as ml from "../../lib/mlLib";
 
 @Component({
 selector: 'ml-card',
@@ -10,7 +10,7 @@ host: {class: 'mdl-card'},
 template:`
 
 <div #cardTitle class="mdl-card__title mdl-card--expand">
-  <h2 class="mdl-card__title-text">
+  <h2 #cardTitleHeader class="mdl-card__title-text">
     <ng-content select="ml-card-title"></ng-content>
   </h2>
 </div>
@@ -30,17 +30,27 @@ template:`
   @Input() shadow: string;
   @Input() img: string;
   @ViewChild('cardTitle') cardTitle: ElementRef;
+  @ViewChild('cardTitleHeader') cardTitleHeader: ElementRef;
   constructor(private host: ElementRef, private ren: Renderer2){}
 
   ngOnInit(){
-      this.cardTitle.nativeElement.style.background = `url('${this.img}')`;
+    // If there is no <ml-card-title> content (cardTitleHeader), delete it to avoid blank space in <ml-card>
+    if(this.cardTitleHeader.nativeElement.children.length == 0){
+      this.host.nativeElement.removeChild(this.cardTitle.nativeElement);
+    }
+    if(this.cardTitle){
+      this.img && (this.cardTitle.nativeElement.style.background = `url('${this.img}')`);
       this.cardTitle.nativeElement.style.color= "#fff";
       this.cardTitle.nativeElement.style.backgroundSize = "cover";
-
-      if (this.shadow){
-        this.shadow = `mdl-shadow--${this.shadow}dp`;
-        ml.setClass(this.host, this.shadow, this.ren);
-     }
+    }
+    if (this.shadow){
+      if(isNaN(+this.shadow) ){
+        console.warn('<ml-card> -> Attribute [shadow] must be a number: ', this.shadow);
+        return;
+      }
+      this.shadow = `mdl-shadow--${this.shadow}dp`;
+      ml.setClass(this.host, this.shadow, this.ren);
+    }
   }
 }
 @Directive({selector: 'ml-card-title'}) export class MlCardTitle{}

src/app/ml/components/controls/button/mlButton.ts

@@ -2,15 +2,13 @@
 //todo: usar enums
 import {Component, ElementRef, Input, Renderer2, ViewEncapsulation} from "@angular/core";
 import MdlButton from "./mdlButtonClass";
-import * as ml from "../../../lib/ml_lib";
+import * as ml from "../../../lib/mlLib";
 
 const ML_BUTTON_ASPECTS = ['raised, colored, accent'];
 const ML_BUTTON_VARIANTS = ['fab', 'minifab', 'icon'];
 
-/**
- * @Input.aspect ="colored" => background blue, font-color white
- * @Input.aspect ="accent" => background magenta, font-color white
- */
+// @Input.aspect ="colored" => background blue, font-color white (by default)
+// @Input.aspect ="accent" => background magenta, font-color white (by default)
 @Component({
 selector: 'ml-button',
 moduleId: module.id,
@@ -30,13 +28,13 @@ template: '<ng-content></ng-content>'
   // }
 
   ngOnInit(){
-    // @Input "aspect" --------------------------------------------------------------------------------------------------
-    this.aspect && ( this.aspect = this.aspect.toLowerCase() );
+    // @Input "aspect" -------------------------------------------------------------------------------------------------
+    this.aspect && ( this.aspect = this.aspect.toString().toLowerCase() );
     ml.isSubstring('raised', this.aspect) && ml.setClass(this.host, 'mdl-button--raised', this.ren);
     ml.isSubstring('colored', this.aspect) && ml.setClass(this.host, 'mdl-button--colored', this.ren);
     ml.isSubstring('accent', this.aspect) && ml.setClass(this.host, 'mdl-button--accent', this.ren);
 
-   // @Input "variant" --------------------------------------------------------------------------------------------------
+   // @Input "variant" -------------------------------------------------------------------------------------------------
     this.variant && ( this.variant = this.variant.toLowerCase() );
     if( this.variant && !ml.isAttributeValid(this.variant, ML_BUTTON_VARIANTS) ){
       console.warn(`<ml-button> Wrong attribute: variant="${this.variant}"`);

src/app/ml/components/controls/button/mlButtonInput.ts

@@ -4,7 +4,7 @@
 import {Component, ElementRef, Input, Renderer2, ViewChild, ChangeDetectionStrategy,
   HostBinding} from "@angular/core";
 import MdlButton from "./mdlButtonClass";
-import * as ml from "../../../lib/ml_lib";
+import * as ml from "../../../lib/mlLib";
 
 // note: <input type="file, date, color, etc."> not cross-browser compatible
 const ML_BUTTON_INPUT_TYPES = ['submit', 'reset', 'button'];

src/app/ml/components/controls/radio/mlRadio.ts

@@ -1,6 +1,6 @@
 import {Component, ElementRef, ViewChild, Input, forwardRef} from "@angular/core";
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";
-import * as ml from "../../../lib/ml_lib";
+import * as ml from "../../../lib/mlLib";
 // ---------------------------------------------------------------------------------------------------------------------
 @Component({
 selector: 'ml-radio',

src/app/ml/components/controls/selectfield/mlSelectfield.ts

@@ -7,7 +7,7 @@ import {NG_VALUE_ACCESSOR, ControlValueAccessor, FormControl} from "@angular/for
 import {MlButton} from "../button/mlButton";
 import MdlMenu from "../../menu/mdlMenuClass";
 import MdlTextfield from "../textfield/mdlTextfieldClass";
-import * as ml from "../../../lib/ml_lib";
+import * as ml from "../../../lib/mlLib";
 
 @Component({
 selector: 'ml-selectfield',
@@ -49,6 +49,9 @@ template:`
   constructor(private ren: Renderer2, private host: ElementRef){}
 
   onItemSelected($event){
+    if(!this.formControl){
+      return;
+    }
     this.label.nativeElement.textContent = '';
     this.input.nativeElement.value = $event.target.textContent;
     this.formControl.setValue($event.target.textContent);

src/app/ml/components/controls/slider/mlSlider.ts

@@ -1,6 +1,6 @@
 import {Component, ElementRef, Renderer2, ViewEncapsulation, ChangeDetectionStrategy} from "@angular/core";
 import MdlSlider from "./mdlSliderClass";
-import * as ml from "../../../lib/ml_lib";
+import * as ml from "../../../lib/mlLib";
 
 @Component({
 selector: 'input.[ml-slider]',

src/app/ml/components/controls/textfield/mlTextfield.ts

@@ -12,7 +12,7 @@ import {Component, ViewEncapsulation, ElementRef, Renderer2, Input, forwardRef,
   from "@angular/core";
 import {NG_VALUE_ACCESSOR, ControlValueAccessor, FormControl} from "@angular/forms";
 import MdlTextfield from "./mdlTextfieldClass";
-import * as ml from "../../../lib/ml_lib";
+import * as ml from "../../../lib/mlLib";
 
 // @Input.type must be restricted to the following values:
 const ML_TEXTFIELD_TYPES = ['text', 'password', 'date', 'datetime-local', 'month', 'time', 'week', 'url', 'tel',
@@ -62,7 +62,7 @@ template:`
     }
   }
   onFocus(){
-    this.formControl.markAsTouched(true);
+    this.formControl && this.formControl.markAsTouched(true);
     this.checkValidity();
   }
 

src/app/ml/components/controls/textfield/mlTextfieldArea.ts

@@ -2,7 +2,7 @@ import {Component, ViewEncapsulation, ElementRef, Renderer2, Input, forwardRef,
   ChangeDetectionStrategy} from "@angular/core";
 import {NG_VALUE_ACCESSOR, ControlValueAccessor, FormControl} from "@angular/forms";
 import MdlTextfield from "./mdlTextfieldClass";
-import * as ml from "../../../lib/ml_lib";
+import * as ml from "../../../lib/mlLib";
 
 @Component({
 selector: 'ml-textfield-area',
@@ -50,7 +50,7 @@ export class MlTextfieldArea implements ControlValueAccessor{
   }
 
   onFocus(){
-    this.formControl.markAsTouched(true);
+    this.formControl && this.formControl.markAsTouched(true);
     this.checkValidity();
   }
   onKeyup(){

src/app/ml/components/controls/textfield/mlTextfieldExpand.ts

@@ -3,7 +3,7 @@ import {Component, ViewEncapsulation, ElementRef, Renderer2, Input, forwardRef,
   ChangeDetectionStrategy} from "@angular/core";
 import {NG_VALUE_ACCESSOR, ControlValueAccessor, FormControl} from "@angular/forms";
 import MdlTextfield from "./mdlTextfieldClass";
-import * as ml from "../../../lib/ml_lib";
+import * as ml from "../../../lib/mlLib";
 
 @Component({
 selector: 'ml-textfield-expand',
@@ -51,7 +51,7 @@ template:`
   }
 
   onFocus(){
-    this.formControl.markAsTouched(true);
+    this.formControl && this.formControl.markAsTouched(true);
     this.checkValidity();
   }
   onKeyup(){

src/app/ml/components/grid/mlGrid.ts

@@ -1,5 +1,5 @@
 import {Component, Renderer2, ElementRef, Input, ViewEncapsulation} from '@angular/core';
-import * as ml from "../../lib/ml_lib";
+import * as ml from "../../lib/mlLib";
 
 @Component({
 selector: 'ml-grid',

src/app/ml/components/layout/mlLayout.css

@@ -829,7 +829,7 @@ body{
 ::-webkit-scrollbar-corner {background-color: #999;}
 ::-webkit-resizer {background-color: #666;}
 
-/* RESPONSIVE MAIN CONTENT ------------------------------------------------------------- */
+/* RESPONSIVE MAIN CONTENT ----------------------------------------------------------- */
 
 @media (min-width: 700px){
   ml-content{

src/app/ml/components/layout/mlLayout.ts

@@ -5,13 +5,12 @@
 import {Component, ElementRef, Renderer2, ViewEncapsulation, Input, Directive, ChangeDetectionStrategy}
   from "@angular/core";
 import MdlLayout from "./mdlLayoutClass";
-import * as ml from "../../lib/ml_lib";
-
+import * as ml from "../../lib/mlLib";
 
 @Component({
 selector: 'ml-layout',
 changeDetection: ChangeDetectionStrategy.OnPush,
-styleUrls: ['./mlLayout.css', '../ripple/mlRipple.css'],
+styleUrls: ['mlLayout.css', '../ripple/mlRipple.css'],
 host: {class: 'mdl-layout mdl-layout__container'},
 encapsulation: ViewEncapsulation.None,
 template: '<ng-content></ng-content>',
@@ -149,7 +148,7 @@ export class MlContent {
   }
 
   ngAfterViewInit(){
-    // If the header has tabs and is scrollable and the navigator is IE, it is needed to repaint it
+    // If the header has tabs and is scrollable, and the navigator is IE, it is needed to repaint it
     // This hack is due to IE repaints bad the left header-tab button after scrolling
     const mlHeaderTabs: HTMLElement = document.querySelector('ml-header-tabs') as HTMLElement;
     if(this.isHeaderScrollable() && this.isIE()){

src/app/ml/components/list/mlList.ts

@@ -1,5 +1,5 @@
 import {Component, ViewEncapsulation, ElementRef, Renderer2, ViewChild, Input, Directive} from '@angular/core';
-import * as ml from "../../lib/ml_lib";
+import * as ml from "../../lib/mlLib";
 
 @Component({
 selector: 'ml-list',
@@ -14,7 +14,7 @@ template: '<ul #ulElement class="mdl-list"><ng-content></ng-content></ul>'
 
   ngOnInit(){
     const hostCssClasses: string = this.host.nativeElement.className;
-    this.ulElement.nativeElement.classList.add(hostCssClasses);
+    hostCssClasses && this.ulElement.nativeElement.classList.add(hostCssClasses);
   }
 }
 // ---------------------------------------------------------------------------------------------------------------------
@@ -78,3 +78,7 @@ export class MlItemSubtitle {}
 @Component({selector: 'ml-item-desc',
 template: '<span class="mdl-list__item-text-body"><ng-content></ng-content></span>'})
 export class MlItemDesc {}
+// ---------------------------------------------------------------------------------------------------------------------
+@Directive({selector: '[ellipsis]',
+  host: {style: 'white-space: nowrap; overflow: hidden; text-overflow: ellipsis'}
+}) export class MlEllipsis {}