refactor(components): add color/mode properties

src/components/radio/radio-button.ts

@@ -1,6 +1,8 @@
 import { Component, ElementRef, EventEmitter, HostListener, Input, OnInit, OnDestroy, Optional, Output, Renderer, ViewEncapsulation } from '@angular/core';
 
+import { Config } from '../../config/config';
 import { Form } from '../../util/form';
+import { Ion } from '../ion';
 import { isBlank, isCheckedProperty, isPresent, isTrueProperty } from '../../util/util';
 import { Item } from '../item/item';
 import { RadioGroup } from './radio-group';
@@ -43,49 +45,70 @@ import { RadioGroup } from './radio-group';
  */
 @Component({
   selector: 'ion-radio',
-  template: `
-    <div class="radio-icon" [class.radio-checked]="_checked">
-      <div class="radio-inner"></div>
-    </div>
-    <button ion-button="item-cover" 
-            role="radio"
-            type="button"
-            [id]="id"
-            [attr.aria-checked]="_checked"
-            [attr.aria-labelledby]="_labelId"
-            [attr.aria-disabled]="_disabled">
-    </button>
-  `,
+  template:
+    '<div class="radio-icon" [class.radio-checked]="_checked"> ' +
+      '<div class="radio-inner"></div> ' +
+    '</div> ' +
+    '<button role="radio" ' +
+            'type="button" ' +
+            'ion-button="item-cover" ' +
+            '[id]="id" ' +
+            '[attr.aria-checked]="_checked" ' +
+            '[attr.aria-labelledby]="_labelId" ' +
+            '[attr.aria-disabled]="_disabled" ' +
+            'class="item-cover"> ' +
+    '</button>',
   host: {
     '[class.radio-disabled]': '_disabled'
   },
   encapsulation: ViewEncapsulation.None,
 })
-export class RadioButton implements OnDestroy, OnInit {
-  private _checked: boolean = false;
-  private _disabled: boolean = false;
-  private _labelId: string;
-  private _value: any = null;
+export class RadioButton extends Ion implements OnDestroy, OnInit {
 
   /**
-   * @private
+   * @internal
+   */
+  _checked: boolean = false;
+
+  /**
+   * @internal
+   */
+  _disabled: boolean = false;
+
+  /**
+   * @internal
+   */
+  _labelId: string;
+
+  /**
+   * @internal
+   */
+  _value: any = null;
+
+  /**
+   * @internal
    */
   id: 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('radio', val);
+
+    if (this._item) {
+      this._item._updateColor(val, 'item-radio');
+    }
   }
 
-  set color(value: string) {
-    this._updateColor(value);
-  }  
+  /**
+   * @input {string} The mode to apply to this component.
+   */
+  @Input()
+  set mode(val: string) {
+    this._setMode('radio', val);
+  }
 
   /**
    * @output {any} expression to be evaluated when selected
@@ -94,11 +117,15 @@ export class RadioButton implements OnDestroy, OnInit {
 
   constructor(
     private _form: Form,
-    private _elementRef: ElementRef,
-    private _renderer: Renderer,
+    config: Config,
+    elementRef: ElementRef,
+    renderer: Renderer,
     @Optional() private _item: Item,
     @Optional() private _group: RadioGroup
   ) {
+    super(config, elementRef, renderer);
+
+    this.mode = config.get('mode');
     _form.register(this);
 
     if (_group) {
@@ -111,7 +138,7 @@ export class RadioButton implements OnDestroy, OnInit {
       // reset to the item's id instead of the radiogroup id
       this.id = 'rb-' + _item.registerInput('radio');
       this._labelId = 'lbl-' + _item.id;
-      this._item.setCssClass('item-radio', true);
+      this._item.setElementClass('item-radio', true);
     }
   }
 
@@ -123,7 +150,6 @@ export class RadioButton implements OnDestroy, OnInit {
     // if the value is not defined then use it's unique id
     return isBlank(this._value) ? this.id : this._value;
   }
-
   set value(val: any) {
     this._value = val;
   }
@@ -140,7 +166,7 @@ export class RadioButton implements OnDestroy, OnInit {
     this._checked = isTrueProperty(isChecked);
 
     if (this._item) {
-      this._item.setCssClass('item-radio-checked', this._checked);
+      this._item.setElementClass('item-radio-checked', this._checked);
     }
   }
 
@@ -151,17 +177,16 @@ export class RadioButton implements OnDestroy, OnInit {
   get disabled(): boolean {
     return this._disabled;
   }
-
   set disabled(val: boolean) {
     this._disabled = isTrueProperty(val);
-    this._item && this._item.setCssClass('item-radio-disabled', this._disabled);
+    this._item && this._item.setElementClass('item-radio-disabled', this._disabled);
   }
 
   /**
-   * @private
+   * @internal
    */
   @HostListener('click', ['$event'])
-  private _click(ev: UIEvent) {
+  _click(ev: UIEvent) {
     console.debug('radio, select', this.id);
     ev.preventDefault();
     ev.stopPropagation();
@@ -171,7 +196,7 @@ export class RadioButton implements OnDestroy, OnInit {
   }
 
   /**
-   * @private
+   * @internal
    */
   ngOnInit() {
     if (this._group && isPresent(this._group.value)) {
@@ -180,32 +205,10 @@ export class RadioButton implements OnDestroy, OnInit {
   }
 
   /**
-   * @private
+   * @internal
    */
   ngOnDestroy() {
     this._form.deregister(this);
     this._group && this._group.remove(this);
   }
-
-  /**
-   * @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, `radio-${color}`, isAdd);
-
-      if (this._item) {
-        this._item._updateColor(color, 'item-radio');
-      }
-    }
-  }  
 }