refactors

src/app/app.module.ts

@@ -35,10 +35,10 @@ import {MlMenuMod} from "./ml/components/menu/mlMenuMod";
 import {App} from "./app.layout";
 
 // Relative paths for SystemJS
-// const basePath = '.app/pages/';
+const basePath = '.app/pages/';
 
 // Absolute paths for Webpack
-const basePath = 'C:/Users/UsuarioAurora/Documents/WebstormProjects/material-light/src/app/pages/';
+// const basePath = 'C:/Users/UsuarioAurora/Documents/WebstormProjects/material-light/src/app/pages/';
 
 const APP_ROUTES: Routes = [
 {path: '',           redirectTo: 'button', pathMatch: 'full'},

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

@@ -1,4 +1,4 @@
-// NOTE: for maximum compatibility between browsers when using html5 controls it is recommended to define aditional
+// NOTE: for maximum compatibility between browsers, when using html5 controls it is recommended to define aditional
 // validators. For example, when using <input type="date"> it is recommended to defined a validator with a regexp
 // validating the date string
 

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

@@ -1,8 +1,7 @@
-//todo: testar textfield con tipo: file, color, etc.
 //todo: (general) usar esta nomenclatura para componentes (Ej: MlTextfieldCmp)
 
 // NOTE: this component ("MlSelectfield") is based on "MlButton", "MdlMenu" and "MdlTextfield"
-// For this reason it uses files from these components
+// For this reason it uses files from those components
 
 import {Component, ElementRef, ViewChild, Input, Renderer, ViewEncapsulation, forwardRef,
  ChangeDetectionStrategy} from "@angular/core";
@@ -65,9 +64,9 @@ template:`
 
   /**
    * Toggle state of clicked selectfield
-   * @param $event
    */
   onClickInput(){
+    debugger;
     this.mdlMenu.toggle();
     this.closeSelectfields();
   }
@@ -83,6 +82,7 @@ template:`
     this.mdlTextfield = new MdlTextfield(this.input.nativeElement);
 
     // if user defines a selectfield height from @Input => enable selectfield content overflow and scrollbars
+    debugger;
     if(this.height){
       this.mdlMenu.userDefinedHeight = this.height;
       this.mdlMenu.container_.style.overflow = 'auto';

src/app/ml/components/menu/mdlMenuClass.ts

@@ -281,7 +281,7 @@ MdlMenu.prototype.show = function (evt: any) {
     this.container_.style.width = width + 'px';
     /* modifications */
     if (this.userDefinedHeight){
-      this.container_.style.height = this.userDefinedHeight + 'px';
+      this.container_.style.height = this.userDefinedHeight;
     } else {
       this.container_.style.height = height + 'px';
     }

src/app/ml/components/spinner/mlSpinner.ts

@@ -14,8 +14,7 @@ changeDetection: ChangeDetectionStrategy.OnPush,
 host: {class: 'mdl-spinner is-active'},
 template:``,
 moduleId: module.id
-})
-export class MlSpinner {
+}) export class MlSpinner {
 
   @Input('single-color') singleColor: string;
   @Input('multicolor') multicolor: string;

src/app/pages/selectfield/pagSelectfield.ts

@@ -4,18 +4,15 @@ import {FormGroup, FormControl, Validators} from "@angular/forms";
 @Component({
 template:`
 
-<style>
-  .validationError{color: red; padding-bottom: 20px}
-  strong {display: block}
-</style>
+<style>.validationError{color: red; padding-bottom: 20px}</style>
 
 <h5>Select Field</h5>
 <p>Reactive Forms only</p>
 <form [formGroup]="selectForm" (ngSubmit)="onSubmit()" autocomplete="off">
 
   <!-- Selectfield1 ------------------------------------------------------------------------------------------------ -->
   
-  <strong>Selectfield1</strong>
+  <div><strong>Selectfield1</strong> (Validated)</div>
   
   <ml-selectfield [formControl]="selectfield1">
     <ml-sf-item>one</ml-sf-item>
@@ -35,19 +32,19 @@ template:`
     Required field
   </ml-error>
   
-  <p>(With validators ↑)</p><br>
+  <br>
   
   <!-- Selectfield2 ------------------------------------------------------------------------------------------------ -->
   
-  <strong>Selectfield2</strong>
+  <div><strong>Selectfield2</strong> (No validated + ripple)</div>
   
   <ml-selectfield [formControl]="selectfield2" label="Choose another option..." ripple>
     <ml-sf-item ripple>alpha</ml-sf-item>
     <ml-sf-item ripple>beta</ml-sf-item>
     <ml-sf-item ripple>gamma</ml-sf-item>
   </ml-selectfield>
   
-  <p>(No validators + ripple ↑)</p><br>
+  <br>
 
   <!-- /Selectfield2 ----------------------------------------------------------------------------------------------- -->
   

src/app/pages/selectfield/pagSelectfieldMod.ts

@@ -8,6 +8,6 @@ import {DebugFormMod} from "../../ml/lib/debug_form/debugFormMod";
 import {ViewSourceMod} from "../view-source/viewSourceMod";
 import {PagSelectfield} from "./pagSelectfield";
 @NgModule({
-imports: [DebugFormMod, MlButtonMod, MlValidationErrorMod, MlSelectfieldMod, ReactiveFormsModule, ViewSourceMod, 
+imports: [ReactiveFormsModule, DebugFormMod, MlButtonMod, MlValidationErrorMod, MlSelectfieldMod, ViewSourceMod,
 RouterModule.forChild([{path: '', component: PagSelectfield}])], declarations: [PagSelectfield]})
 export class PagSelectfieldMod{}

src/app/pages/textfield2/pagTextfield2.ts

@@ -39,14 +39,14 @@ template:`
     <ml-error [validateControl]="week" validator="required">Required field</ml-error>
   </ml-textfield>
   
-  <!-- Number -------------------------------------------------------------------------------------------------------- -->
+  <!-- Number ------------------------------------------------------------------------------------------------------ -->
   
   <div class="field-header"><strong>Number textfield: </strong>(Validated)</div>
   <ml-textfield type="number" [formControl]="number" class="pad-top">
     <ml-error [validateControl]="number" validator="required">Number required</ml-error>
   </ml-textfield>
   
-  <!-- Color -------------------------------------------------------------------------------------------------------- -->
+  <!-- Color ------------------------------------------------------------------------------------------------------- -->
   
   <div class="field-header"><strong>Color textfield: </strong>(Validated)</div>
   <ml-textfield type="color" [formControl]="color" class="pad-top color-field">