Merge branch 'master' into v4

src/components/input/input.ios.scss

@@ -85,12 +85,17 @@ $text-input-ios-highlight-color-invalid:   $text-input-highlight-color-invalid !
 @if ($text-input-ios-show-focus-highlight) {
   // In order to get a 2px border we need to add an inset
   // box-shadow 1px (this is to avoid the div resizing)
+
+  // TODO remove all uses of input-has-focus in v4
+  // TODO remove all uses of input-has-value in v4
+  .item-ios.item-input.item-input-has-focus .item-inner,
   .item-ios.item-input.input-has-focus .item-inner {
     @include ios-input-highlight($text-input-ios-highlight-color);
   }
 
   // The last item in a list has a border on the item, not the
   // inner item, so add it to the item itself
+  .list-ios .item-input.item-input-has-focus:last-child,
   .list-ios .item-input.input-has-focus:last-child {
     @include ios-input-highlight($text-input-ios-highlight-color);
 
@@ -102,11 +107,13 @@ $text-input-ios-highlight-color-invalid:   $text-input-highlight-color-invalid !
 
 // Show the valid highlight when it has the .ng-valid class and a value
 @if ($text-input-ios-show-valid-highlight) {
-  .item-ios.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner {
+  .item-ios.item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner,
+  .item-ios.item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner {
     @include ios-input-highlight($text-input-ios-highlight-color-valid);
   }
 
-  .list-ios .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child {
+  .list-ios .item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child,
+  .list-ios .item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child {
     @include ios-input-highlight($text-input-ios-highlight-color-valid);
 
     .item-inner {
@@ -117,11 +124,11 @@ $text-input-ios-highlight-color-invalid:   $text-input-highlight-color-invalid !
 
 // Show the invalid highlight when it has the invalid class and has been touched
 @if ($text-input-ios-show-invalid-highlight) {
-  .item-ios.item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner {
+  .item-ios.item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .item-inner {
     @include ios-input-highlight($text-input-ios-highlight-color-invalid);
   }
 
-  .list-ios .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child {
+  .list-ios .item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus):last-child {
     @include ios-input-highlight($text-input-ios-highlight-color-invalid);
 
     .item-inner {

src/components/input/input.md.scss

@@ -86,12 +86,16 @@ $text-input-md-highlight-color-invalid:     $text-input-highlight-color-invalid
 @if ($text-input-md-show-focus-highlight) {
   // In order to get a 2px border we need to add an inset
   // box-shadow 1px (this is to avoid the div resizing)
+
+  // TODO remove all uses of input-has-focus in v4
+  .item-md.item-input.item-input-has-focus .item-inner,
   .item-md.item-input.input-has-focus .item-inner {
     @include md-input-highlight($text-input-md-highlight-color);
   }
 
   // The last item in a list has a border on the item, not the
   // inner item, so add it to the item itself
+  .list-md .item-input.item-input-has-focus:last-child,
   .list-md .item-input.input-has-focus:last-child {
     @include md-input-highlight($text-input-md-highlight-color);
 
@@ -103,11 +107,15 @@ $text-input-md-highlight-color-invalid:     $text-input-highlight-color-invalid
 
 // Show the valid highlight when it has the .ng-valid class and a value
 @if ($text-input-md-show-valid-highlight) {
-  .item-md.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner {
+  // TODO remove all uses of input-has-focus in v4
+  // TODO remove all uses of input-has-value in v4
+  .item-md.item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner,
+  .item-md.item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .item-inner {
     @include md-input-highlight($text-input-md-highlight-color-valid);
   }
 
-  .list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child {
+  .list-md .item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child,
+  .list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus):last-child {
     @include md-input-highlight($text-input-md-highlight-color-valid);
 
     .item-inner {
@@ -118,11 +126,11 @@ $text-input-md-highlight-color-invalid:     $text-input-highlight-color-invalid
 
 // Show the invalid highlight when it has the invalid class and has been touched
 @if ($text-input-md-show-invalid-highlight) {
-  .item-md.item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner {
+  .item-md.item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .item-inner {
     @include md-input-highlight($text-input-md-highlight-color-invalid);
   }
 
-  .list-md .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child {
+  .list-md .item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus):last-child {
     @include md-input-highlight($text-input-md-highlight-color-invalid);
 
     .item-inner {

src/components/input/input.scss

@@ -104,17 +104,24 @@ input.text-input:-webkit-autofill {
 // --------------------------------------------------
 // When the input has focus, then the input cover should be hidden
 
+// TODO remove all uses of input-has-focus in v4
+.item-input-has-focus .input-cover,
 .input-has-focus .input-cover {
   display: none;
 }
 
+.item-input-has-focus,
 .input-has-focus {
   pointer-events: none;
 }
 
+.item-input-has-focus input,
 .input-has-focus input,
+.item-input-has-focus textarea,
 .input-has-focus textarea,
+.item-input-has-focus a,
 .input-has-focus a,
+.item-input-has-focus button,
 .input-has-focus button {
   pointer-events: auto;
 }
@@ -158,6 +165,9 @@ input.text-input:-webkit-autofill {
   background-position: center;
 }
 
+// TODO remove all uses of input-has-focus in v4
+// TODO remove all uses of input-has-value in v4
+.item-input-has-focus.item-input-has-value .text-input-clear-icon,
 .input-has-focus.input-has-value .text-input-clear-icon {
   display: block;
 }

src/components/input/input.ts

@@ -607,7 +607,9 @@ export class TextInput extends Ion implements IonicFormInput {
   checkHasValue(inputValue: any) {
     if (this._item) {
       var hasValue = (inputValue !== null && inputValue !== undefined && inputValue !== '');
+      // TODO remove all uses of input-has-value in v4
       this._item.setElementClass('input-has-value', hasValue);
+      this._item.setElementClass('item-input-has-value', hasValue);
     }
   }
 
@@ -617,7 +619,9 @@ export class TextInput extends Ion implements IonicFormInput {
   focusChange(inputHasFocus: boolean) {
     if (this._item) {
       console.debug(`input-base, focusChange, inputHasFocus: ${inputHasFocus}, ${this._item.getNativeElement().nodeName}.${this._item.getNativeElement().className}`);
+      // TODO remove input-has-focus for v4
       this._item.setElementClass('input-has-focus', inputHasFocus);
+      this._item.setElementClass('item-input-has-focus', inputHasFocus);
     }
 
     // If clearOnEdit is enabled and the input blurred but has a value, set a flag

src/components/input/input.wp.scss

@@ -96,6 +96,9 @@ $text-input-wp-highlight-color-invalid:     $text-input-highlight-color-invalid
 
 // Show the focus highlight when the input has focus
 @if ($text-input-wp-show-focus-highlight) {
+  // TODO remove all uses of input-has-focus in v4
+  // TODO remove all uses of input-has-value in v4
+  .item-wp.item-input.item-input-has-focus .text-input,
   .item-wp.item-input.input-has-focus .text-input {
     border-color: $text-input-wp-highlight-color;
   }
@@ -103,14 +106,15 @@ $text-input-wp-highlight-color-invalid:     $text-input-highlight-color-invalid
 
 // Show the valid highlight when it has the .ng-valid class and a value
 @if ($text-input-wp-show-valid-highlight) {
-  .item-wp.item-input.ng-valid.input-has-value:not(.input-has-focus) .text-input {
+  .item-wp.item-input.ng-valid.item-input-has-value:not(.input-has-focus):not(.item-input-has-focus) .text-input,
+  .item-wp.item-input.ng-valid.input-has-value:not(.input-has-focus):not(.item-input-has-focus) .text-input {
     border-color: $text-input-wp-highlight-color-valid;
   }
 }
 
 // Show the invalid highlight when it has the invalid class and has been touched
 @if ($text-input-wp-show-invalid-highlight) {
-  .item-wp.item-input.ng-invalid.ng-touched:not(.input-has-focus) .text-input {
+  .item-wp.item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .text-input {
     border-color: $text-input-wp-highlight-color-invalid;
   }
 }

src/components/label/label.ios.scss

@@ -77,7 +77,11 @@ $label-ios-margin-start:       0 !default;
   transform-origin: right top;
 }
 
+// TODO remove all uses of input-has-focus in v4
+// TODO remove all uses of input-has-value in v4
+.item-input-has-focus .label-ios[floating],
 .input-has-focus .label-ios[floating],
+.item-input-has-value .label-ios[floating],
 .input-has-value .label-ios[floating] {
   transform: translate3d(0, 0, 0) scale(.8);
 }
@@ -90,7 +94,9 @@ $label-ios-margin-start:       0 !default;
   margin-bottom: $item-ios-padding-media-bottom - 2;
 }
 
+.item-input-has-focus .label-ios[stacked],
 .input-has-focus .label-ios[stacked],
+.item-input-has-focus .label-ios[floating],
 .input-has-focus .label-ios[floating] {
   color: $label-ios-text-color-focused;
 }

src/components/label/label.md.scss

@@ -70,12 +70,18 @@ $label-md-margin-start:               0 !default;
   @include margin(null, null, 0, 0);
 }
 
+// TODO remove all uses of input-has-focus in v4
+// TODO remove all uses of input-has-value in v4
+.item-input-has-focus .label-md[stacked],
 .input-has-focus .label-md[stacked],
+.item-input-has-focus .label-md[floating],
 .input-has-focus .label-md[floating] {
   color: $label-md-text-color-focused;
 }
 
+.item-input-has-focus .label-md[floating],
 .input-has-focus .label-md[floating],
+.item-input-has-value .label-md[floating],
 .input-has-value .label-md[floating] {
   transform: translate3d(0, 0, 0) scale(.8);
 }

src/components/label/label.wp.scss

@@ -50,12 +50,18 @@ $label-wp-text-color-focused:         color($colors-wp, primary) !default;
   @include margin(null, null, 0, 0);
 }
 
+// TODO remove all uses of input-has-focus in v4
+// TODO remove all uses of input-has-value in v4
+.item-input-has-focus .label-wp[stacked],
 .input-has-focus .label-wp[stacked],
+.item-input-has-focus .label-wp[floating],
 .input-has-focus .label-wp[floating] {
   color: $label-wp-text-color-focused;
 }
 
+.item-input-has-focus .label-wp[floating],
 .input-has-focus .label-wp[floating],
+.item-input-has-value .label-wp[floating],
 .input-has-value .label-wp[floating] {
   transform: translate3d(0, 0, 0) scale(.8);
 }

src/util/base-input.ts

@@ -282,7 +282,9 @@ export class BaseInput<T> extends Ion implements CommonInput<T> {
     if (!this._item) {
       return;
     }
+    // TODO remove all uses of input-has-value in v4
     this._item.setElementClass('input-has-value', this.hasValue());
+    this._item.setElementClass('item-input-has-value', this.hasValue());
   }
 
   /**