refactor(all): consistent inputs

fixes #8578

src/components/alert/test/basic/app/app.module.ts

@@ -11,7 +11,9 @@ import { PageOneModule } from '../pages/page-one/page-one.module';
   ],
   imports: [
     BrowserModule,
-    IonicModule.forRoot(AppComponent, {}),
+    IonicModule.forRoot(AppComponent, {
+      mode: 'ios'
+    }),
     PageOneModule
   ],
   bootstrap: [IonicApp]

src/components/checkbox/checkbox.ts

@@ -1,10 +1,10 @@
-import { AfterContentInit, ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, HostListener, Input, OnDestroy, Optional, Output, Renderer, ViewEncapsulation } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, forwardRef, HostListener, Input, OnDestroy, Optional, Renderer, ViewEncapsulation } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { Config } from '../../config/config';
-import { Form, IonicTapInput } from '../../util/form';
-import { Ion } from '../ion';
 import { isTrueProperty } from '../../util/util';
+import { Form, IonicTapInput } from '../../util/form';
+import { BaseInput } from '../../util/base-input';
 import { Item } from '../item/item';
 
 export const CHECKBOX_VALUE_ACCESSOR: any = {
@@ -54,14 +54,14 @@ export const CHECKBOX_VALUE_ACCESSOR: any = {
 @Component({
   selector: 'ion-checkbox',
   template:
-    '<div class="checkbox-icon" [class.checkbox-checked]="_checked">' +
+    '<div class="checkbox-icon" [class.checkbox-checked]="_value">' +
       '<div class="checkbox-inner"></div>' +
     '</div>' +
     '<button role="checkbox" ' +
             'type="button" ' +
             'ion-button="item-cover" ' +
             '[id]="id" ' +
-            '[attr.aria-checked]="_checked" ' +
+            '[attr.aria-checked]="_value" ' +
             '[attr.aria-labelledby]="_labelId" ' +
             '[attr.aria-disabled]="_disabled" ' +
             'class="item-cover"> ' +
@@ -72,42 +72,37 @@ export const CHECKBOX_VALUE_ACCESSOR: any = {
   providers: [CHECKBOX_VALUE_ACCESSOR],
   encapsulation: ViewEncapsulation.None,
 })
-export class Checkbox extends Ion implements IonicTapInput, AfterContentInit, ControlValueAccessor, OnDestroy {
-  /** @hidden */
-  _checked: boolean = false;
-  /** @hidden */
-  _init: boolean;
-  /** @hidden */
-  _disabled: boolean = false;
-  /** @hidden */
-  _labelId: string;
-  /** @hidden */
-  _fn: Function;
-  /** @hidden */
-  id: string;
+export class Checkbox extends BaseInput<boolean> implements IonicTapInput, AfterViewInit, OnDestroy {
 
   /**
-   * @output {Checkbox} Emitted when the checkbox value changes.
+   * @input {boolean} If true, the element is selected.
    */
-  @Output() ionChange: EventEmitter<Checkbox> = new EventEmitter<Checkbox>();
+  @Input()
+  get checked(): boolean {
+    return this.value;
+  }
+
+  set checked(val: boolean) {
+    this.value = val;
+  }
 
   constructor(
     config: Config,
-    private _form: Form,
-    @Optional() private _item: Item,
+    form: Form,
+    @Optional() item: Item,
     elementRef: ElementRef,
     renderer: Renderer,
     private _cd: ChangeDetectorRef
   ) {
-    super(config, elementRef, renderer, 'checkbox');
-
-    _form.register(this);
+    super(config, elementRef, renderer, 'checkbox', form, item, null);
+    this._value = false;
+  }
 
-    if (_item) {
-      this.id = 'chk-' + _item.registerInput('checkbox');
-      this._labelId = 'lbl-' + _item.id;
-      this._item.setElementClass('item-checkbox', true);
-    }
+  /**
+   * @hidden
+   */
+  initFocus() {
+    this._elementRef.nativeElement.querySelector('button').focus();
   }
 
   /**
@@ -118,115 +113,27 @@ export class Checkbox extends Ion implements IonicTapInput, AfterContentInit, Co
     console.debug('checkbox, checked');
     ev.preventDefault();
     ev.stopPropagation();
-    this.onChange(!this._checked);
-  }
-
-  /**
-   * @input {boolean} If true, the element is selected.
-   */
-  @Input()
-  get checked(): boolean {
-    return this._checked;
-  }
-
-  set checked(val: boolean) {
-    this._setChecked(isTrueProperty(val));
-    this.onChange(this._checked);
-  }
-
-  /**
-   * @hidden
-   */
-  _setChecked(isChecked: boolean) {
-    if (isChecked !== this._checked) {
-      this._checked = isChecked;
-      if (this._init) {
-        this.ionChange.emit(this);
-      }
-      this._item && this._item.setElementClass('item-checkbox-checked', isChecked);
-    }
-  }
-
-  /**
-   * @hidden
-   */
-  writeValue(val: any) {
-    this._setChecked(isTrueProperty(val));
+    this.value = !this.value;
   }
 
   /**
    * @hidden
    */
-  registerOnChange(fn: Function): void {
-    this._fn = fn;
-    this.onChange = (isChecked: boolean) => {
-      console.debug('checkbox, onChange', isChecked);
-      fn(isChecked);
-      this._setChecked(isChecked);
-      this.onTouched();
-      this._cd.detectChanges();
-    };
+  _inputNormalize(val: any): boolean {
+    return isTrueProperty(val);
   }
-
   /**
    * @hidden
    */
-  registerOnTouched(fn: any) { this.onTouched = fn; }
-
-  /**
-   * @input {boolean} If true, the user cannot interact with this element.
-   */
-  @Input()
-  get disabled(): boolean {
-    return this._disabled;
-  }
-
-  set disabled(val: boolean) {
-    this._disabled = isTrueProperty(val);
-    this._item && this._item.setElementClass('item-checkbox-disabled', this._disabled);
+  _inputCheckHasValue(val: boolean) {
+    this._item && this._item.setElementClass('item-checkbox-checked', val);
   }
 
   /**
    * @hidden
    */
-  onChange(isChecked: boolean) {
-    // used when this input does not have an ngModel or formControlName
-    console.debug('checkbox, onChange (no ngModel)', isChecked);
-    this._setChecked(isChecked);
-    this.onTouched();
+  _inputUpdated() {
     this._cd.detectChanges();
   }
 
-  /**
-   * @hidden
-   */
-  initFocus() {
-    this._elementRef.nativeElement.querySelector('button').focus();
-  }
-
-  /**
-   * @hidden
-   */
-  onTouched() { }
-
-  /**
-   * @hidden
-   */
-  ngAfterContentInit() {
-    this._init = true;
-  }
-
-  /**
-   * @hidden
-   */
-  setDisabledState(isDisabled: boolean) {
-    this.disabled = isDisabled;
-  }
-
-  /**
-   * @hidden
-   */
-  ngOnDestroy() {
-    this._form.deregister(this);
-  }
 }

src/components/checkbox/test/checkbox.spec.ts

@@ -0,0 +1,24 @@
+
+import { Checkbox } from '../checkbox';
+import { mockConfig, mockElementRef, mockRenderer, mockItem, mockChangeDetectorRef } from '../../../util/mock-providers';
+import { commonInputTest, BOOLEAN_CORPUS } from '../../../util/input-tester';
+
+describe('Checkbox', () => {
+
+  it('should pass common test', () => {
+
+    const config = mockConfig();
+    const elementRef = mockElementRef();
+    const renderer = mockRenderer();
+    const item: any = mockItem();
+    const cd = mockChangeDetectorRef();
+    const checkbox = new Checkbox(config, null, item, elementRef, renderer, cd);
+
+    commonInputTest(checkbox, {
+      defaultValue: false,
+      corpus: BOOLEAN_CORPUS
+    });
+
+  });
+
+});