fix(input): fix material design success/error highlighting on inputs

references #6040
references #5052

src/components/input/input.md.scss

@@ -19,6 +19,8 @@ $text-input-md-input-clear-icon-color:      #5b5b5b !default;
 $text-input-md-input-clear-icon-svg:        "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><polygon fill='" + $text-input-md-input-clear-icon-color + "' points='405,136.798 375.202,107 256,226.202 136.798,107 107,136.798 226.202,256 107,375.202 136.798,405 256,285.798 375.202,405 405,375.202 285.798,256'/></svg>" !default;
 $text-input-md-input-clear-icon-size:       22px !default;
 
+$text-input-md-show-success-highlight:      true !default;
+$text-input-md-show-error-highlight:        true !default;
 
 
 // Material Design Default Input
@@ -44,7 +46,7 @@ $text-input-md-input-clear-icon-size:       22px !default;
 // Material Design Highlighted Input
 // --------------------------------------------------
 
-ion-input::after {
+.item-input::after {
   position: absolute;
   right: 0;
   bottom: 0;
@@ -56,18 +58,34 @@ ion-input::after {
   content: "";
 }
 
-.input-has-focus::after {
+.item-input.input-has-focus::after {
   border-bottom-color: $text-input-md-highlight-color;
 }
 
-ion-input.ng-valid.input-has-value::after {
+@if($text-input-md-show-success-highlight) {
+  .item-input.ng-valid.input-has-value {
+    &::after {
       border-bottom-color: $text-input-md-hightlight-color-valid;
     }
 
-ion-input.ng-invalid.ng-touched::after {
+    &.input-has-focus::after {
+      border-bottom-color: $text-input-md-highlight-color;
+    }
+  }
+}
+
+@if($text-input-md-show-error-highlight) {
+  .item-input.ng-invalid.ng-touched {
+    &::after {
       border-bottom-color: $text-input-md-hightlight-color-invalid;
     }
 
+    &.input-has-focus::after {
+      border-bottom-color: $text-input-md-highlight-color;
+    }
+  }
+}
+
 
 // Material Design Stacked & Floating Inputs
 // --------------------------------------------------

src/components/input/test/form-inputs/index.ts

@@ -1,30 +1,44 @@
 import {App} from '../../../../../src';
-import {FormBuilder, Validators} from '@angular/common';
+import {FormBuilder, Validators, Control} from '@angular/common';
 
 
 @App({
   templateUrl: 'main.html'
 })
 class E2EApp {
-  constructor(fb: FormBuilder) {
+  loginForm: any;
-    this.loginForm = fb.group({
-      email: ["", Validators.required],
-      username: [""],
-      password: ["", Validators.required],
-      comments: ["", Validators.required]
-    });
 
-    this.login = {
+  login = {
     email: 'help@ionic.io',
     username: 'admin'
   };
 
-    this.user = {
+  user = {
     username: 'asdf',
     password: '82'
   };
 
-    this.submitted = false;
+  submitted: boolean = false;
+  isTextAreaDisabled: boolean;
+
+  constructor(fb: FormBuilder) {
+    this.loginForm = fb.group({
+      email: ["", Validators.compose([
+        Validators.required,
+        this.emailValidator
+      ])],
+      username: [""],
+      password: ["", Validators.required],
+      comments: ["", Validators.required]
+    });
+  }
+
+  emailValidator(control) {
+    var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i;
+
+    if (!EMAIL_REGEXP.test(control.value)) {
+      return {invalidEmail: true};
+    }
   }
 
   submit(ev, value) {