From 90e6d3c08e18bbccaf4a06d2b2ca9944d14cd538 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Mon, 12 Jun 2017 22:51:41 +0200
Subject: [PATCH] refactor(chips): replace disabled property with mixin (#5072)

---
 src/lib/chips/chip.spec.ts | 12 +++++++++++-
 src/lib/chips/chip.ts      | 11 ++++-------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/lib/chips/chip.spec.ts b/src/lib/chips/chip.spec.ts
index 15f49a9eff2..7f3e4ec90ae 100644
--- a/src/lib/chips/chip.spec.ts
+++ b/src/lib/chips/chip.spec.ts
@@ -113,6 +113,15 @@ describe('Chips', () => {
         expect(testComponent.chipSelect).toHaveBeenCalledWith({ chip: chipInstance });
       });
 
+      it('should update the aria-label for disabled chips', () => {
+        expect(chipNativeElement.getAttribute('aria-disabled')).toBe('false');
+
+        testComponent.disabled = true;
+        fixture.detectChanges();
+
+        expect(chipNativeElement.getAttribute('aria-disabled')).toBe('true');
+      });
+
     });
   });
 });
@@ -121,7 +130,7 @@ describe('Chips', () => {
   template: `
     <md-chip-list>
       <div *ngIf="shouldShow">
-        <md-chip [color]="color" [selected]="selected"
+        <md-chip [color]="color" [selected]="selected" [disabled]="disabled"
                  (focus)="chipFocus($event)" (destroy)="chipDestroy($event)"
                  (select)="chipSelect($event)" (deselect)="chipDeselect($event)">
           {{name}}
@@ -130,6 +139,7 @@ describe('Chips', () => {
     </md-chip-list>`
 })
 class SingleChip {
+  disabled: boolean = false;
   name: string = 'Test';
   color: string = 'primary';
   selected: boolean = false;
diff --git a/src/lib/chips/chip.ts b/src/lib/chips/chip.ts
index a3ba76af587..6cd3f058e81 100644
--- a/src/lib/chips/chip.ts
+++ b/src/lib/chips/chip.ts
@@ -11,6 +11,7 @@ import {
 import {Focusable} from '../core/a11y/focus-key-manager';
 import {coerceBooleanProperty} from '../core/coercion/boolean-property';
 import {CanColor, mixinColor} from '../core/common-behaviors/color';
+import {CanDisable, mixinDisabled} from '../core/common-behaviors/disabled';
 
 export interface MdChipEvent {
   chip: MdChip;
@@ -20,7 +21,7 @@ export interface MdChipEvent {
 export class MdChipBase {
   constructor(public _renderer: Renderer2, public _elementRef: ElementRef) {}
 }
-export const _MdChipMixinBase = mixinColor(MdChipBase, 'primary');
+export const _MdChipMixinBase = mixinColor(mixinDisabled(MdChipBase), 'primary');
 
 
 /**
@@ -39,7 +40,7 @@ export class MdBasicChip { }
 @Directive({
   selector: `md-basic-chip, [md-basic-chip], md-chip, [md-chip],
              mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]`,
-  inputs: ['color'],
+  inputs: ['color', 'disabled'],
   host: {
     'class': 'mat-chip',
     'tabindex': '-1',
@@ -52,11 +53,7 @@ export class MdBasicChip { }
     '(blur)': '_hasFocus = false',
   }
 })
-export class MdChip extends _MdChipMixinBase implements Focusable, OnDestroy, CanColor {
-  /** Whether or not the chip is disabled. */
-  @Input() get disabled(): boolean { return this._disabled; }
-  set disabled(value: boolean) { this._disabled = coerceBooleanProperty(value); }
-  protected _disabled: boolean = null;
+export class MdChip extends _MdChipMixinBase implements Focusable, OnDestroy, CanColor, CanDisable {
 
   /** Whether the chip is selected. */
   @Input() get selected(): boolean { return this._selected; }