fix(chips): placeholder is truncated even though there is room

- add a new `md-input-class` to `<md-chips>`
  to `md-chips` and `md-contact-chips`
  - allows custom styling like adding a `min-width` for supporting
    very long placeholders
  - this is the same API as `<md-autocomplete>` already has
  - add demo of long `placeholder` and `md-input-class`

Fixes #10630

Author: Splaktar

src/components/chips/chips.scss

@@ -51,10 +51,15 @@ $contact-chip-name-width: rem(12) !default;
 .md-contact-chips-suggestions li {
   height: 100%;
 }
+md-chips {
+  display: flex;
+}
 .md-chips {
   @include pie-clearfix();
 
-  display: block;
+  display: flex;
+  flex-wrap: wrap;
+  flex-grow: 1;
   font-family: $font-family;
   font-size: $chip-font-size;
   @include rtl(padding, $chip-wrap-padding, rtl-value($chip-wrap-padding));
@@ -143,9 +148,17 @@ $contact-chip-name-width: rem(12) !default;
     line-height: $chip-height;
     @include rtl(margin, $chip-margin, rtl-value($chip-margin));
     padding: $chip-input-padding;
+    flex-grow: 1;
     @include rtl(float, left, right);
     input {
-      &:not([type]),&[type="email"],&[type="number"],&[type="tel"],&[type="url"],&[type="text"] {
+      width: 100%;
+
+      &:not([type]),
+      &[type="email"],
+      &[type="number"],
+      &[type="tel"],
+      &[type="url"],
+      &[type="text"] {
         border: 0;
         height: $chip-height;
         line-height: $chip-height;

src/components/chips/demoBasicUsage/index.html

@@ -1,11 +1,24 @@
 <div ng-controller="BasicDemoCtrl as ctrl" layout="column" ng-cloak>
 
   <md-content class="md-padding" layout="column">
-    <h2 class="md-title">Use a custom chip template.</h2>
-
+    <h2 class="md-title">Use the default chip template.</h2>
+    <md-chips ng-model="ctrl.fruitNames" readonly="ctrl.readonly" md-removable="ctrl.removable">
+    </md-chips>
+    <br/>
+    <h2 class="md-title">Use ng-change and add-on-blur</h2>
+    <md-chips ng-model="ctrl.ngChangeFruitNames" md-add-on-blur="true" readonly="ctrl.readonly"
+              ng-change="ctrl.onModelChange(ctrl.ngChangeFruitNames)" input-aria-label="Fruit names"
+              md-removable="ctrl.removable"></md-chips>
+    <br/>
+    <h2 class="md-title">Make chips editable.</h2>
+    <md-chips ng-model="ctrl.editableFruitNames" readonly="ctrl.readonly"
+              md-removable="ctrl.removable" md-enable-chip-edit="true"
+              input-aria-label="Fruit names"></md-chips>
+    <br/>
+    <h2 class="md-title">Use a custom chip template with max chips.</h2>
     <form name="fruitForm">
       <md-chips ng-model="ctrl.roFruitNames" name="fruitName" readonly="ctrl.readonly"
-                md-removable="ctrl.removable" md-max-chips="5" placeholder="Enter a fruit..."
+                md-removable="ctrl.removable" md-max-chips="5" placeholder="Ex. Peach"
                 input-aria-label="Fruit names">
         <md-chip-template>
           <strong>{{$chip}}</strong>
@@ -17,30 +30,14 @@ <h2 class="md-title">Use a custom chip template.</h2>
         <div ng-message="md-max-chips">Maximum number of chips reached.</div>
       </div>
     </form>
-
     <br/>
-    <h2 class="md-title">Use the default chip template.</h2>
-
-    <md-chips ng-model="ctrl.fruitNames" readonly="ctrl.readonly" md-removable="ctrl.removable">
+    <h2 class="md-title">Use a long placeholder with md-input-class.</h2>
+    <md-chips ng-model="ctrl.fruitNames" readonly="ctrl.readonly" md-removable="ctrl.removable"
+              placeholder="Ex. Peach, Kiwi, Watermelon, Passion Fruit, Nectarine, etc."
+              md-input-class="demo-long-fruit-input">
     </md-chips>
-
-    <br/>
-    <h2 class="md-title">Use ng-change and add-on-blur</h2>
-
-    <md-chips ng-model="ctrl.ngChangeFruitNames" md-add-on-blur="true" readonly="ctrl.readonly"
-              ng-change="ctrl.onModelChange(ctrl.ngChangeFruitNames)" input-aria-label="Fruit names"
-              md-removable="ctrl.removable"></md-chips>
-
-    <br/>
-    <h2 class="md-title">Make chips editable.</h2>
-
-    <md-chips ng-model="ctrl.editableFruitNames" readonly="ctrl.readonly"
-              md-removable="ctrl.removable" md-enable-chip-edit="true"
-              input-aria-label="Fruit names"></md-chips>
-
     <br/>
     <h2 class="md-title">Use Placeholders and override hint texts.</h2>
-
     <md-chips
         ng-model="ctrl.tags"
         readonly="ctrl.readonly"
@@ -55,7 +52,6 @@ <h2 class="md-title">Use Placeholders and override hint texts.</h2>
         container-hint="Chips container. Press the right and left arrow keys to change tag selection."
         container-empty-hint="Chips container. Enter the text area, start typing, and then press enter when done to add a tag.">
     </md-chips>
-
     <br/>
     <h2 class="md-title">Display an ordered set of objects as chips (with custom template).</h2>
     <p>Note: the variables <code>$chip</code> and <code>$index</code> are available in custom chip templates.</p>

src/components/chips/demoBasicUsage/style.scss

@@ -3,6 +3,9 @@
   color: rgb(221,44,0);
   margin-top: 10px;
 }
+.demo-long-fruit-input {
+  min-width: 340px;
+}
 .custom-chips {
   md-chip {
     position: relative;

src/components/chips/js/chipsController.js

@@ -81,6 +81,12 @@ function MdChipsCtrl ($scope, $attrs, $mdConstant, $log, $element, $timeout, $md
   /** @type {string} */
   this.addOnBlur = $mdUtil.parseAttributeBoolean($attrs.mdAddOnBlur);
 
+  /**
+   * The class names to apply to the autocomplete or input.
+   * @type {string}
+   */
+  this.inputClass = '';
+
   /**
    * The text to be used as the aria-label for the input.
    * @type {string}

src/components/chips/js/chipsDirective.js

@@ -33,7 +33,7 @@
    * <ul style="padding-left:20px;">
    *
    *   <ul>Style
-   *     <li>Colours for hover, press states (ripple?).</li>
+   *     <li>Colors for hover, press states (ripple?).</li>
    *   </ul>
    *
    *   <ul>Validation
@@ -135,6 +135,9 @@
    * @param {expression=} md-on-select An expression which will be called when a chip is selected.
    * @param {boolean=} md-require-match If true, and the chips template contains an autocomplete,
    *    only allow selection of pre-defined chips (i.e. you cannot add new ones).
+   * @param {string=} md-input-class This class will be applied to the child input for custom
+   *    styling. If you are using an `md-autocomplete`, then you need to put this attribute on the
+   *    `md-autocomplete` rather than the `md-chips`.
    * @param {string=} input-aria-describedby A space-separated list of element IDs. This should
    *     contain the IDs of any elements that describe this autocomplete. Screen readers will read
    *     the content of these elements at the end of announcing that the chips input has been
@@ -249,7 +252,7 @@
 
   var CHIP_INPUT_TEMPLATE = '\
         <input\
-            class="md-input"\
+            class="md-input{{ $mdChipsCtrl.inputClass ? \' \' + $mdChipsCtrl.inputClass: \'\'}}"\
             tabindex="0"\
             aria-label="{{$mdChipsCtrl.inputAriaLabel}}"\
             placeholder="{{$mdChipsCtrl.getPlaceholder()}}"\
@@ -306,6 +309,7 @@
         addedMessage: '@?mdAddedMessage',
         removedMessage: '@?mdRemovedMessage',
         onSelect: '&?mdOnSelect',
+        inputClass: '@?mdInputClass',
         inputAriaDescribedBy: '@?inputAriaDescribedby',
         inputAriaLabelledBy: '@?inputAriaLabelledby',
         inputAriaLabel: '@?',

src/components/chips/js/contactChipsController.js

@@ -71,6 +71,9 @@ MdContactChipsCtrl.prototype.setupChipsAria = function() {
   if (this.inputAriaLabel) {
     chipsCtrl.inputAriaLabel = this.inputAriaLabel;
   }
+  if (this.inputClass) {
+    chipsCtrl.inputClass = this.inputClass;
+  }
 };
 
 MdContactChipsCtrl.prototype.setupAutocompleteAria = function() {

src/components/chips/js/contactChipsDirective.js

@@ -35,6 +35,8 @@ angular
  *    contact's image.
  * @param {number=} md-min-length Specifies the minimum length of text before autocomplete will
  *    make suggestions
+ * @param {string=} md-input-class This class will be applied to the child `md-autocomplete` for
+ *    custom styling.
  * @param {string=} input-aria-describedby A space-separated list of element IDs. This should
  *     contain the IDs of any elements that describe this autocomplete. Screen readers will read
  *     the content of these elements at the end of announcing that the chips input has been
@@ -93,6 +95,7 @@ var MD_CONTACT_CHIPS_TEMPLATE = '\
               md-no-cache="true"\
               md-min-length="$mdContactChipsCtrl.minLength"\
               md-autoselect\
+              ng-attr-md-input-class="{{$mdContactChipsCtrl.inputClass}}"\
               ng-keydown="$mdContactChipsCtrl.inputKeydown($event)"\
               placeholder="{{$mdContactChipsCtrl.contacts.length === 0 ?\
                   $mdContactChipsCtrl.placeholder : $mdContactChipsCtrl.secondaryPlaceholder}}">\
@@ -155,6 +158,7 @@ function MdContactChips($mdTheming, $mdUtil) {
       chipAppendDelay: '@?mdChipAppendDelay',
       separatorKeys: '=?mdSeparatorKeys',
       removedMessage: '@?mdRemovedMessage',
+      inputClass: '@?mdInputClass',
       inputAriaDescribedBy: '@?inputAriaDescribedby',
       inputAriaLabelledBy: '@?inputAriaLabelledby',
       inputAriaLabel: '@?',