refactor(components): add color/mode properties

src/components/segment/segment.ts

@@ -1,6 +1,8 @@
 import { Component, ContentChildren, Directive, ElementRef, EventEmitter, HostListener, Input, Output, Optional, QueryList, Renderer, ViewEncapsulation } from '@angular/core';
 import { NgControl } from '@angular/forms';
 
+import { Config } from '../../config/config';
+import { Ion } from '../ion';
 import { isPresent, isTrueProperty } from '../../util/util';
 
 
@@ -42,10 +44,9 @@ import { isPresent, isTrueProperty } from '../../util/util';
  */
 @Component({
   selector: 'ion-segment-button',
-  template: `
-    <ng-content></ng-content>
-    <ion-button-effect></ion-button-effect>
-  `,
+  template:
+    '<ng-content></ng-content>' +
+    '<div class="button-effect"></div>',
   host: {
     'tappable': '',
     'class': 'segment-button',
@@ -54,7 +55,7 @@ import { isPresent, isTrueProperty } from '../../util/util';
   encapsulation: ViewEncapsulation.None,
 })
 export class SegmentButton {
-  private _disabled: boolean = false;
+  _disabled: boolean = false;
 
   /**
    * @input {string} the value of the segment button. Required.
@@ -78,13 +79,13 @@ export class SegmentButton {
 
   set disabled(val: boolean) {
     this._disabled = isTrueProperty(val);
-    this.setCssClass('segment-button-disabled', this._disabled);
+    this._setCssClass('segment-button-disabled', this._disabled);
   }
 
   /**
    * @private
    */
-  setCssClass(cssClass: string, shouldAdd: boolean) {
+  _setCssClass(cssClass: string, shouldAdd: boolean) {
     this._renderer.setElementClass(this._elementRef.nativeElement, cssClass, shouldAdd);
   }
 
@@ -93,7 +94,7 @@ export class SegmentButton {
    * On click of a SegmentButton
    */
   @HostListener('click')
-  private onClick() {
+  onClick() {
     console.debug('SegmentButton, select', this.value);
     this.ionSelect.emit(this);
   }
@@ -177,27 +178,27 @@ export class SegmentButton {
 @Directive({
   selector: 'ion-segment'
 })
-export class Segment {
-  private _disabled: boolean = false;
+export class Segment extends Ion {
+  _disabled: boolean = false;
 
   /**
    * @private
    */
   value: string;
 
-  /** @internal */
-  _color: string;
-
   /**
    * @input {string} The predefined color to use. For example: `"primary"`, `"secondary"`, `"danger"`.
    */
   @Input()
-  get color(): string {
-    return this._color;
+  set color(val: string) {
+    this._setColor('segment', val);
   }
 
-  set color(value: string) {
-    this._updateColor(value);
+  /**
+   * @input {string} The mode to apply to this component.
+   */
+  set mode(val: string) {
+    this._setMode('segment', val);
   }
 
   /**
@@ -212,10 +213,15 @@ export class Segment {
   @ContentChildren(SegmentButton) _buttons: QueryList<SegmentButton>;
 
   constructor(
-    private _elementRef: ElementRef,
-    private _renderer: Renderer,
+    config: Config,
+    elementRef: ElementRef,
+    renderer: Renderer,
     @Optional() ngControl: NgControl
   ) {
+    super(config, elementRef, renderer);
+
+    this.mode = config.get('mode');
+
     if (ngControl) {
       ngControl.valueAccessor = this;
     }
@@ -233,28 +239,9 @@ export class Segment {
     this._disabled = isTrueProperty(val);
 
     if (this._buttons) {
-      let buttons = this._buttons.toArray();
-      for (let button of buttons) {
-        button.setCssClass('segment-button-disabled', this._disabled);
-      }
-    }
-  }
-
-  /**
-   * @internal
-   */
-  _updateColor(newColor: string) {
-    this._setElementColor(this._color, false);
-    this._setElementColor(newColor, true);
-    this._color = newColor;
-  }
-
-  /**
-   * @internal
-   */
-  _setElementColor(color: string, isAdd: boolean) {
-    if (color !== null && color !== '') {
-      this._renderer.setElementClass(this._elementRef.nativeElement, `segment-${color}`, isAdd);
+      this._buttons.forEach(button => {
+        button._setCssClass('segment-button-disabled', this._disabled);
+      });
     }
   }
 
@@ -276,8 +263,7 @@ export class Segment {
    * @private
    */
   ngAfterViewInit() {
-   let buttons = this._buttons.toArray();
-   for (let button of buttons) {
+   this._buttons.forEach(button => {
      button.ionSelect.subscribe((selectedButton: any) => {
        this.writeValue(selectedButton.value);
        this.onChange(selectedButton.value);
@@ -289,10 +275,9 @@ export class Segment {
      }
 
      if (isTrueProperty(this._disabled)) {
-       button.setCssClass('segment-button-disabled', this._disabled);
+       button._setCssClass('segment-button-disabled', this._disabled);
      }
-
-   }
+   });
   }
 
   /**