Merge pull request #77 from edcarroll/develop

v0.7.0 into master

Author: edcarroll

components/checkbox/checkbox.module.ts

@@ -1,12 +1,25 @@
 import {NgModule} from '@angular/core';
-import {FormsModule} from "@angular/forms";
-import {SUI_CHECKBOX_DIRECTIVES} from "./checkbox";
-import {SUI_RADIOBUTTON_DIRECTIVES} from "./radiobutton";
 import {CommonModule} from "@angular/common";
+import {FormsModule} from "@angular/forms";
+import {SuiCheckbox, SuiCheckboxValueAccessor} from './checkbox';
+import {SuiRadioButton, SuiRadioButtonValueAccessor} from './radiobutton';
 
 @NgModule({
-    imports: [CommonModule, FormsModule],
-    declarations: [SUI_CHECKBOX_DIRECTIVES, SUI_RADIOBUTTON_DIRECTIVES],
-    exports: [SUI_CHECKBOX_DIRECTIVES, SUI_RADIOBUTTON_DIRECTIVES]
+    imports: [
+        CommonModule,
+        FormsModule
+    ],
+    declarations: [
+        SuiCheckbox,
+        SuiCheckboxValueAccessor,
+        SuiRadioButton,
+        SuiRadioButtonValueAccessor
+    ],
+    exports: [
+        SuiCheckbox,
+        SuiCheckboxValueAccessor,
+        SuiRadioButton,
+        SuiRadioButtonValueAccessor
+    ]
 })
 export class SuiCheckboxModule {}

components/checkbox/checkbox.ts

@@ -1,87 +1,84 @@
 import {Component, Directive, Input, Output, HostListener, HostBinding, EventEmitter, forwardRef} from '@angular/core';
-import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
+import {CustomValueAccessorHost, customValueAccessorFactory, CustomValueAccessor} from '../util/custom-value-accessor';
 
 @Component({
     selector: 'sui-checkbox',
     exportAs: 'suiCheckbox',
     template: `
-<input class="hidden" type="checkbox" [attr.name]="name" [attr.checked]="checkedAttribute" [attr.disabled]="isDisabledAttribute" [(ngModel)]="isChecked">
+<input class="hidden"
+       type="checkbox"
+       [attr.name]="name"
+       [attr.checked]="checkedAttribute"
+       [attr.disabled]="isDisabledAttribute"
+       [(ngModel)]="isChecked">
 <label>
     <ng-content></ng-content>
 </label>
 `
 })
-export class SuiCheckbox {
+export class SuiCheckbox implements CustomValueAccessorHost<boolean> {
     @HostBinding('class.ui')
     @HostBinding('class.checkbox')
-    private _classes = true;
+    private _checkboxClasses:boolean;
 
     @Input()
     public name:string;
 
     @HostBinding('class.checked')
-    public isChecked:boolean = false;
+    public isChecked:boolean;
 
     @Output()
-    public checkChange:EventEmitter<boolean> = new EventEmitter<boolean>(false);
+    public checkChange:EventEmitter<boolean>;
 
     @Input()
-    public isDisabled:boolean = false;
+    public isDisabled:boolean;
 
     @HostBinding('class.read-only')
     @Input()
-    public isReadonly:boolean = false;
+    public isReadonly:boolean;
 
-    public get checkedAttribute():string {
+    public get checkedAttribute() {
         return this.isChecked ? "" : null;
     }
 
-    public get isDisabledAttribute():string {
+    public get isDisabledAttribute() {
         return this.isDisabled ? "disabled" : null;
     }
 
+    constructor() {
+        this.isChecked = false;
+        this.checkChange = new EventEmitter<boolean>();
+
+        this.isDisabled = false;
+        this.isReadonly = false;
+
+        this._checkboxClasses = true;
+    }
+
     @HostListener('click')
-    public onClick():void {
+    public onClick() {
         if (!this.isDisabled && !this.isReadonly) {
             this.toggle();
         }
     }
 
-    public toggle():void {
+    public toggle() {
         this.isChecked = !this.isChecked;
         this.checkChange.emit(this.isChecked);
     }
 
     public writeValue(value:boolean) {
-        setTimeout(() => {
-            this.isChecked = value;
-        });
+        this.isChecked = value;
     }
 }
 
-export const CUSTOM_VALUE_ACCESSOR: any = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => SuiCheckboxValueAccessor),
-    multi: true
-};
-
 @Directive({
     selector: 'sui-checkbox',
-    host: {'(checkChange)': 'onChange($event)'},
-    providers: [CUSTOM_VALUE_ACCESSOR]
+    host: { '(checkChange)': 'onChange($event)' },
+    providers: [customValueAccessorFactory(SuiCheckboxValueAccessor)]
 })
-export class SuiCheckboxValueAccessor implements ControlValueAccessor {
-    onChange = () => {};
-    onTouched = () => {};
-
-    constructor(private host: SuiCheckbox) { }
-
-    writeValue(value: any): void {
-        this.host.writeValue(!!value);
+export class SuiCheckboxValueAccessor extends CustomValueAccessor<boolean, SuiCheckbox> {
+    constructor(host:SuiCheckbox) {
+        super(host);
     }
-
-    registerOnChange(fn: () => void): void { this.onChange = fn; }
-    registerOnTouched(fn: () => void): void { this.onTouched = fn; }
 }
-
-export const SUI_CHECKBOX_DIRECTIVES = [SuiCheckbox, SuiCheckboxValueAccessor];

components/checkbox/radiobutton.ts

@@ -1,5 +1,5 @@
 import {Component, Directive, Input, Output, HostListener, HostBinding, EventEmitter, forwardRef} from '@angular/core';
-import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
+import {CustomValueAccessorHost, customValueAccessorFactory, CustomValueAccessor} from '../util/custom-value-accessor';
 
 @Component({
     selector: 'sui-radio-button[ngModel]',
@@ -17,32 +17,32 @@ import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
 </label>
 `
 })
-export class SuiRadioButton {
+export class SuiRadioButton<T> implements CustomValueAccessorHost<T> {
     @HostBinding('class.ui')
     @HostBinding('class.radio')
     @HostBinding('class.checkbox')
-    private _classes = true;
+    private _radioClasses = true;
 
     @Input()
     public name:string;
 
     @Input()
-    public value:any = "";
-
-    @Input()
-    public isDisabled:boolean = false;
-
-    @HostBinding('class.read-only')
-    @Input()
-    public isReadonly:boolean = false;
+    public value:T;
 
     @HostBinding('class.checked')
-    public isChecked:boolean = false;
+    public isChecked:boolean;
 
-    public currentValue:any;
+    public currentValue:T;
 
     @Output()
-    public currentValueChange:EventEmitter<any> = new EventEmitter<boolean>(false);
+    public currentValueChange:EventEmitter<T>;
+
+    @Input()
+    public isDisabled:boolean;
+
+    @HostBinding('class.read-only')
+    @Input()
+    public isReadonly:boolean;
 
     public get checkedAttribute():string {
         return this.isChecked ? "" : null;
@@ -52,51 +52,42 @@ export class SuiRadioButton {
         return this.isDisabled ? "disabled" : null;
     }
 
+    constructor() {
+        this.isChecked = false;
+        this.currentValueChange = new EventEmitter<T>();
+
+        this.isDisabled = false;
+        this.isReadonly = false;
+
+        this._radioClasses = true;
+    }
+
     @HostListener('click')
-    public onClick():void {
+    public onClick() {
         if (!this.isDisabled && !this.isReadonly) {
             this.currentValue = this.value;
             this.currentValueChange.emit(this.currentValue);
             this.update();
         }
     }
 
-    public update():void {
-        //This is a horrible hack - need to rewrite!
-        setTimeout(() => {
-            this.isChecked = this.currentValue == this.value;
-        });
+    public update() {
+        this.isChecked = this.currentValue == this.value;
     }
 
-    public writeValue(value:any) {
+    public writeValue(value:T) {
         this.currentValue = value;
         this.update();
     }
 }
 
-export const CUSTOM_VALUE_ACCESSOR: any = {
-    provide: NG_VALUE_ACCESSOR,
-    useExisting: forwardRef(() => SuiRadioButtonValueAccessor),
-    multi: true
-};
-
 @Directive({
     selector: 'sui-radio-button',
-    host: {'(currentValueChange)': 'onChange($event)'},
-    providers: [CUSTOM_VALUE_ACCESSOR]
+    host: { '(currentValueChange)': 'onChange($event)' },
+    providers: [customValueAccessorFactory(SuiRadioButtonValueAccessor)]
 })
-export class SuiRadioButtonValueAccessor implements ControlValueAccessor {
-    onChange = () => {};
-    onTouched = () => {};
-
-    constructor(private host: SuiRadioButton) { }
-
-    writeValue(value: any): void {
-        this.host.writeValue(value);
+export class SuiRadioButtonValueAccessor<T> extends CustomValueAccessor<T, SuiRadioButton<T>> {
+    constructor(host:SuiRadioButton<T>) {
+        super(host);
     }
-
-    registerOnChange(fn: () => void): void { this.onChange = fn; }
-    registerOnTouched(fn: () => void): void { this.onTouched = fn; }
-}
-
-export const SUI_RADIOBUTTON_DIRECTIVES = [SuiRadioButton, SuiRadioButtonValueAccessor];
+}

components/collapse/collapse.ts

@@ -1,4 +1,5 @@
 import {Directive, ElementRef, Input, HostBinding, Renderer} from '@angular/core';
+import "web-animations-js";
 
 @Directive({
     selector: '[suiCollapse]'