fix(mdInput): Fix md-maxlength when used with ng-messages.

The recently added support for input elements to have multiple
messages caused a rendering issue for the `md-maxlength`
character counter.

Update code/CSS to properly position the character counter when
used with and without ng-messages.

Fixes #4783.

POSSIBLE BREAKING CHANGE - The `<div class="md-char-counter">`
that is automatically added to the input is now added after
the input if no messages are found, but inside if they are.

This may cause some styling issues if users provide custom
CSS. Users may need to update their CSS to take the extra
HTML into account.

Example rendered HTML:

**Without `ng-messages`:**

```html
<label>Label is here</label>
<input />
<div class="md-char-counter">10/20</div>
```

**With `ng-messages`:**

```html
<label>Label is here</label>
<input />
<div ng-messages="...">
  <div class="md-char-counter">10/20</div>
  <div ng-message="requried">This is required</div>
</div>
```

Closes #4786.

src/components/input/demoErrors/index.html

@@ -40,7 +40,7 @@ <h1 class="md-toolbar-tools">
  <md-input-container>
  <label>Hourly Rate (USD)</label>
  <input required type="number" step="any" name="rate" ng-model="project.rate" min="800"
- max="4999" ng-pattern="/^1234$/">
+ max="4999" ng-pattern="/^1234$/" md-maxlength="20" />
 
  <div ng-messages="projectForm.rate.$error" multiple>
  <div ng-message="required">

src/components/input/input-theme.scss

@@ -20,7 +20,9 @@ md-input-container.md-THEME_NAME-theme {
  ng-message, data-ng-message, x-ng-message,
  [ng-message], [data-ng-message], [x-ng-message],
  [ng-message-exp], [data-ng-message-exp], [x-ng-message-exp] {
- color: '{{warn-500}}';
+ :not(.md-char-counter) {
+ color: '{{warn-500}}';
+ }
  }
 
  &:not(.md-input-invalid) {

src/components/input/input.js

@@ -362,7 +362,25 @@ function mdMaxlengthDirective($animate) {
  // Stop model from trimming. This makes it so whitespace
  // over the maxlength still counts as invalid.
  attr.$set('ngTrim', 'false');
- input.after(charCountEl);
+
+ var ngMessagesSelectors = [
+ 'ng-messages',
+ 'data-ng-messages',
+ 'x-ng-messages',
+ '[ng-messages]',
+ '[data-ng-messages]',
+ '[x-ng-messages]'
+ ];
+
+ var ngMessages = containerCtrl.element[0].querySelector(ngMessagesSelectors.join(','));
+
+ // If we have an ngMessages container, put the counter at the top; otherwise, put it after the
+ // input so it will be positioned properly in the SCSS
+ if (ngMessages) {
+ angular.element(ngMessages).prepend(charCountEl);
+ } else {
+ input.after(charCountEl);
+ }
 
  ngModelCtrl.$formatters.push(renderCharCount);
  ngModelCtrl.$viewChangeListeners.push(renderCharCount);

src/components/input/input.scss

@@ -166,8 +166,8 @@ md-input-container {
  }
 
  .md-char-counter {
- position: absolute;
- right: 0;
+ position: relative;
+ text-align: right;
  order: 3;
  }
 
@@ -176,6 +176,12 @@ md-input-container {
  position: relative;
  order: 4;
  min-height: $input-error-height;
+
+ .md-char-counter {
+ position: absolute;
+ top: 0;
+ right: 0;
+ }
  }
 
  ng-message, data-ng-message, x-ng-message,