fix(input): smart support of icons

- Fixed single icon on the right
- Added smart classes applying, now the directive will automatically add md-icon-left/right according the icon placement (after/before the input)

fixes #6348

  Closes #6720

Author: EladBezalel

src/components/input/demoIcons/index.html

@@ -21,8 +21,8 @@
     </md-input-container>
 
     <md-input-container md-no-float class="md-block">
-      <md-icon md-svg-src="img/icons/ic_place_24px.svg" style="display:inline-block;"></md-icon>
       <input ng-model="user.address" type="text" placeholder="Address" >
+      <md-icon md-svg-src="img/icons/ic_place_24px.svg" style="display:inline-block;"></md-icon>
     </md-input-container>
 
     <md-input-container class="md-icon-float md-icon-right md-block">

src/components/input/input.js

@@ -60,9 +60,24 @@ function mdInputContainerDirective($mdTheming, $parse) {
     controller: ContainerCtrl
   };
 
-  function postLink(scope, element, attr) {
+  function postLink(scope, element) {
     $mdTheming(element);
-    if (element.find('md-icon').length) element.addClass('md-has-icon');
+
+    var iconElements = element.find('md-icon');
+    var icons = iconElements.length ? iconElements : element[0].getElementsByClassName('md-icon');
+
+    // Incase there's one icon we want to identify where the icon is (right or left) and apply the related class
+    if (icons.length == 1) {
+      var next = icons[0].nextElementSibling;
+      var previous = icons[0].previousElementSibling;
+
+      element.addClass(next && next.tagName === 'INPUT' ? 'md-icon-left' :
+                       previous && previous.tagName === 'INPUT' ? 'md-icon-right' : '');
+    }
+    // In case there are two icons we apply both icon classes
+    else if (icons.length == 2) {
+      element.addClass('md-icon-left md-icon-right');
+    }
   }
 
   function ContainerCtrl($scope, $element, $attrs, $animate) {
@@ -244,7 +259,8 @@ function inputTextareaDirective($mdUtil, $window, $mdAria) {
 
     // Add an error spacer div after our input to provide space for the char counter and any ng-messages
     var errorsSpacer = angular.element('<div class="md-errors-spacer">');
-    element.after(errorsSpacer);
+    // element.after appending the div before the icon (if exist) which cause a problem with calculating which class to apply
+    element.parent().append(errorsSpacer);
 
     if (!containerCtrl.label) {
       $mdAria.expect(element, 'aria-label', element.attr('placeholder'));

src/components/input/input.scss

@@ -93,16 +93,6 @@ md-input-container {
     @include rtl(right, auto, 0);
   }
 
-  // icon offset should have higher priority as normal label
-  &.md-has-icon {
-    @include rtl(padding-left, $icon-offset, 0);
-    @include rtl(padding-right, 0, $icon-offset);
-    > label {
-      @include rtl(left, $icon-offset, auto);
-      @include rtl(right, auto, $icon-offset);
-    }
-  }
-
   label:not(.md-no-float):not(.md-container-ignore),
   .md-placeholder {
     order: 1;
@@ -301,46 +291,59 @@ md-input-container {
       margin-bottom: -1px; // Shift downward so dotted line is positioned the same as other bottom borders
     }
   }
-}
 
-md-input-container.md-icon-float {
+  &.md-icon-float {
 
-  transition: margin-top 0.5s $swift-ease-out-timing-function;
+    transition: margin-top 0.5s $swift-ease-out-timing-function;
 
-  > label {
-    pointer-events: none;
-    position: absolute;
-  }
+    > label {
+      pointer-events: none;
+      position: absolute;
+    }
 
-  > md-icon {
-    top: 2px;
-    @include rtl(left, 2px, auto);
-    @include rtl(right, auto, 2px);
-  }
+    > md-icon {
+      top: 2px;
+      @include rtl(left, 2px, auto);
+      @include rtl(right, auto, 2px);
+    }
 
-  &.md-input-focused,
-  &.md-input-has-value {
+    &.md-input-focused,
+    &.md-input-has-value {
 
-    label {
-      transform: translate3d(0, $input-label-float-offset, 0) scale($input-label-float-scale);
-      transition: transform $swift-ease-out-timing-function 0.5s;
+      label {
+        transform: translate3d(0, $input-label-float-offset, 0) scale($input-label-float-scale);
+        transition: transform $swift-ease-out-timing-function 0.5s;
+      }
     }
+
   }
 
-}
+  // icon offset should have higher priority as normal label
+  &.md-icon-left {
+    @include rtl(padding-left, $icon-offset, 0);
+    @include rtl(padding-right, 0, $icon-offset);
+    > label {
+      @include rtl(left, $icon-offset, auto);
+      @include rtl(right, auto, $icon-offset);
+    }
+  }
 
-md-input-container.md-icon-right {
-  @include rtl(padding-right, $icon-offset, $icon-offset);
-  @include rtl(padding-left, $icon-offset, $icon-offset);
+  &.md-icon-right {
+    @include rtl(padding-left, 0, $icon-offset);
+    @include rtl(padding-right, $icon-offset, 0);
 
-  .md-errors-spacer {
-    + md-icon {
+    > md-icon:last-of-type {
       margin: 0;
 
       @include rtl(right, 2px, auto);
       @include rtl(left, auto, 2px);
     }
   }
+
+  &.md-icon-left.md-icon-right {
+    padding-left: $icon-offset;
+    padding-right: $icon-offset;
+  }
 }
 
 @media screen and (-ms-high-contrast: active) {

src/components/input/input.spec.js

@@ -458,4 +458,72 @@ describe('md-input-container directive', function() {
       expect(textarea.offsetHeight).toBeGreaterThan(oldHeight);
     });
   });
+
+  describe('icons', function () {
+    it('should add md-icon-left class when md-icon is before the input', function () {
+      var el = compile(
+        '<md-input-container>' +
+        '  <md-icon></md-icon>' +
+        '  <input ng-model="foo">' +
+        '</md-input-container>'
+      );
+
+      expect(el.hasClass('md-icon-left')).toBeTruthy();
+
+    });
+
+    it('should add md-icon-left class when .md-icon is before the input', function () {
+      var el = compile(
+        '<md-input-container>' +
+        '  <i class="md-icon"></i>' +
+        '  <input ng-model="foo">' +
+        '</md-input-container>'
+      );
+      expect(el.hasClass('md-icon-left')).toBeTruthy();
+    });
+
+    it('should add md-icon-right class when md-icon is after the input', function () {
+      var el = compile(
+        '<md-input-container>' +
+        '  <input ng-model="foo">' +
+        '  <md-icon></md-icon>' +
+        '</md-input-container>'
+      );
+
+      expect(el.hasClass('md-icon-right')).toBeTruthy();
+
+    });
+
+    it('should add md-icon-right class when .md-icon is after the input', function () {
+      var el = compile(
+        '<md-input-container>' +
+        '  <input ng-model="foo">' +
+        '  <i class="md-icon"></i>' +
+        '</md-input-container>'
+      );
+      expect(el.hasClass('md-icon-right')).toBeTruthy();
+    });
+
+    it('should add md-icon-left and md-icon-right classes when md-icons are before and after the input', function () {
+      var el = compile(
+        '<md-input-container>' +
+        '  <md-icon></md-icon>' +
+        '  <input ng-model="foo">' +
+        '  <md-icon></md-icon>' +
+        '</md-input-container>'
+      );
+      expect(el.hasClass('md-icon-left md-icon-right')).toBeTruthy();
+    });
+
+    it('should add md-icon-left and md-icon-right classes when .md-icons are before and after the input', function () {
+      var el = compile(
+        '<md-input-container>' +
+        '  <i class="md-icon"></i>' +
+        '  <input ng-model="foo">' +
+        '  <i class="md-icon"></i>' +
+        '</md-input-container>'
+      );
+      expect(el.hasClass('md-icon-left md-icon-right')).toBeTruthy();
+    });
+  });
 });