refactor(components): add color/mode properties

src/components/chip/chip.ts

@@ -1,5 +1,8 @@
 import { Directive, ElementRef, Input, Renderer } from '@angular/core';
 
+import { Config } from '../../config/config';
+import { Ion } from '../ion';
+
 /**
   * @name Chip
   * @module ionic
@@ -90,43 +93,28 @@ import { Directive, ElementRef, Input, Renderer } from '@angular/core';
 @Directive({
   selector: 'ion-chip'
 })
-export class Chip {
-  /** @internal */
-  _color: string;
+export class Chip extends Ion {
 
   /**
    * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
    */
   @Input()
-  get color(): string {
-    return this._color;
-  }
-
-  set color(value: string) {
-    this._updateColor(value);
-  }
-
-  constructor(
-    private _elementRef: ElementRef,
-    private _renderer: Renderer
-  ) { }
-
-  /**
-   * @internal
-   */
-  _updateColor(newColor: string) {
-    this._setElementColor(this._color, false);
-    this._setElementColor(newColor, true);
-    this._color = newColor;
+  set color(val: string) {
+    this._setColor('chip', val);
   }
 
   /**
-   * @internal
+   * @input {string} The mode to apply to this component.
    */
-  _setElementColor(color: string, isAdd: boolean) {
-    if (color !== null && color !== '') {
-      this._renderer.setElementClass(this._elementRef.nativeElement, `chip-${color}`, isAdd);
-    }
+  @Input()
+  set mode(val: string) {
+    this._setMode('chip', val);
+  }
+
+  constructor(config: Config, elementRef: ElementRef, renderer: Renderer) {
+    super(config, elementRef, renderer);
+
+    this.mode = config.get('mode');
   }
 
 }