fix(chips): hide remove button on custom template when readonly

Add ng-if to the remove button, conditional on not readonly. Also tweak the custom input styling in the demo, and add the 'readonly' class to md-chip when it is readonly.

fixes #3697. closes #4090.

src/components/chips/demoBasicUsage/style.scss

@@ -1,7 +1,6 @@
 .custom-chips {
   .md-chip {
     position: relative;
-    padding-right: 35px;
     .md-chip-remove-container {
       position: absolute;
       right: 4px;
@@ -35,5 +34,10 @@
         }
       }
     }
+    &:not(.md-readonly) {
+      md-chip-template {
+        padding-right: 20px;
+      }
+    }
   }
 }

src/components/chips/js/chipsDirective.js

@@ -96,14 +96,15 @@
           class="md-chips">\
         <md-chip ng-repeat="$chip in $mdChipsCtrl.items"\
             index="{{$index}}"\
-            ng-class="{\'md-focused\': $mdChipsCtrl.selectedChip == $index}">\
+            ng-class="{\'md-focused\': $mdChipsCtrl.selectedChip == $index, \'md-readonly\': $mdChipsCtrl.readonly}">\
           <div class="md-chip-content"\
               tabindex="-1"\
               aria-hidden="true"\
               ng-focus="!$mdChipsCtrl.readonly && $mdChipsCtrl.selectChip($index)"\
               md-chip-transclude="$mdChipsCtrl.chipContentsTemplate"></div>\
-          <div class="md-chip-remove-container"\
-              md-chip-transclude="$mdChipsCtrl.chipRemoveTemplate"></div>\
+          <div ng-if="!$mdChipsCtrl.readonly"\
+               class="md-chip-remove-container"\
+               md-chip-transclude="$mdChipsCtrl.chipRemoveTemplate"></div>\
         </md-chip>\
         <div ng-if="!$mdChipsCtrl.readonly && $mdChipsCtrl.ngModelCtrl"\
             class="md-chip-input-container"\