fix(chips): show underline when readOnly and add codeblocks (#563)

underline was being removed because of a previous commit, now its show in readOnly state but disabled

src/platform/core/chips/chips.component.html

@@ -5,19 +5,19 @@
                      (keydown)="_chipKeydown($event, index)">
         <span>{{chip}}</span>
         <md-icon *ngIf="!readOnly" (click)="removeChip(chip)">
-            cancel
+          cancel
         </md-icon>
       </md-basic-chip>
     </ng-template>
     <md-input-container floatPlaceholder="never"
-                        [style.width.px]="chipAddition ? null : 0"
+                        [style.width.px]="canAddChip ? null : 0"
                         [color]="matches ? 'primary' : 'warn'">
       <input mdInput
               flex="100" 
               #input
               [mdAutocomplete]="autocomplete"
               [formControl]="inputControl"
-              [placeholder]="chipAddition? placeholder : ''"
+              [placeholder]="canAddChip? placeholder : ''"
               (keydown)="_inputKeydown($event)"
               (keyup.enter)="addChip(input.value)"
               (focus)="handleFocus()"

src/platform/core/chips/chips.component.ts

@@ -105,7 +105,15 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit {
     this._toggleInput();
   }
   get chipAddition(): boolean {
-    return this._chipAddition && !this.readOnly;
+    return this._chipAddition;
+  }
+
+  /**
+   * Checks if not in readOnly state and if chipAddition is set to 'true'
+   * States if a chip can be added and if the input is available
+   */
+  get canAddChip(): boolean {
+    return this.chipAddition && !this.readOnly;
   }
 
   /**
@@ -227,7 +235,7 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit {
    * Programmatically focus the input. Since its the component entry point
    */
   focus(): void {
-    if (this.chipAddition) {
+    if (this.canAddChip) {
       this._inputChild.focus();
     }
   }
@@ -271,7 +279,7 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit {
            * Checks if deleting last single chip, to focus input afterwards
            * Else check if its not the last chip of the list to focus the next one.
            */
-          if (index === (this._totalChips - 1) && index === 0 && this.chipAddition) {
+          if (index === (this._totalChips - 1) && index === 0) {
             this.focus();
           } else if (index < (this._totalChips - 1)) {
             this._focusChip(index + 1);
@@ -280,23 +288,27 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit {
         }
         break;
       case LEFT_ARROW:
-        /** Check to see if left arrow was pressed while focusing the first chip to focus input next */
-        if (index === 0 && this.chipAddition) {
+        /**
+         * Check to see if left arrow was pressed while focusing the first chip to focus input next
+         * Also check if input should be focused
+         */
+        if (index === 0 && this.canAddChip) {
           this.focus();
           event.stopPropagation();
         }
         break;
       case RIGHT_ARROW:
-        /** Check to see if right arrow was pressed while focusing the last chip to focus input next */
-        if (index === (this._totalChips - 1) && this.chipAddition) {
+        /**
+         * Check to see if right arrow was pressed while focusing the last chip to focus input next
+         * Also check if input should be focused
+         */
+        if (index === (this._totalChips - 1) && this.canAddChip) {
           this.focus();
           event.stopPropagation();
         }
         break;
       case ESCAPE:
-        if (this.chipAddition) {
         this.focus();
-        }
         break;
       default:
         // default
@@ -366,7 +378,7 @@ export class TdChipsComponent implements ControlValueAccessor, DoCheck, OnInit {
    * Checks if not in readOnly state and if chipAddition is set to 'true'
    */
   private _toggleInput(): void {
-    if (this.chipAddition) {
+    if (this.canAddChip) {
       this.inputControl.enable();
     } else {
       this.inputControl.disable();