Merge pull request #54 from edcarroll/develop

v0.6.2 into master

components/checkbox/checkbox.ts

@@ -5,32 +5,38 @@ import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
     selector: 'sui-checkbox',
     exportAs: 'suiCheckbox',
     template: `
-<input class="hidden" type="checkbox" [attr.name]="name" [attr.checked]="checkedAttribute" [attr.disabled]="isDisabledAttribute" [(ngModel)]="checked">
+<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 {
     @HostBinding('class.ui')
-    @HostBinding('class.checkbox') classes = true;
+    @HostBinding('class.checkbox')
+    private _classes = true;
 
-    @Input() public name:string;
+    @Input()
+    public name:string;
 
     @HostBinding('class.checked')
-    private checked:boolean = false;
+    public isChecked:boolean = false;
 
-    @Output() public checkChange:EventEmitter<boolean> = new EventEmitter<boolean>(false);
+    @Output()
+    public checkChange:EventEmitter<boolean> = new EventEmitter<boolean>(false);
+
+    @Input()
+    public isDisabled:boolean = false;
 
-    @Input() public isDisabled:boolean = false;
     @HostBinding('class.read-only')
-    @Input() public isReadonly:boolean = false;
+    @Input()
+    public isReadonly:boolean = false;
 
-    private get checkedAttribute():string {
-        return this.checked ? "" : null;
+    public get checkedAttribute():string {
+        return this.isChecked ? "" : null;
     }
 
-    private get isDisabledAttribute():string {
+    public get isDisabledAttribute():string {
         return this.isDisabled ? "disabled" : null;
     }
 
@@ -42,13 +48,13 @@ export class SuiCheckbox {
     }
 
     public toggle():void {
-        this.checked = !this.checked;
-        this.checkChange.emit(this.checked);
+        this.isChecked = !this.isChecked;
+        this.checkChange.emit(this.isChecked);
     }
 
     public writeValue(value:boolean) {
         setTimeout(() => {
-            this.checked = value;
+            this.isChecked = value;
         });
     }
 }

components/checkbox/radiobutton.ts

@@ -10,7 +10,7 @@ import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
        [attr.name]="name"
        [attr.checked]="checkedAttribute"
        [attr.disabled]="isDisabledAttribute"
-       [ngModel]="checked"
+       [ngModel]="isChecked"
        (ngModel)="currentValue = value">
 <label>
     <ng-content></ng-content>
@@ -20,27 +20,35 @@ import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/forms';
 export class SuiRadioButton {
     @HostBinding('class.ui')
     @HostBinding('class.radio')
-    @HostBinding('class.checkbox') classes = true;
+    @HostBinding('class.checkbox')
+    private _classes = true;
 
-    @Input() public name:string;
-    @Input() public value:any = "";
+    @Input()
+    public name:string;
+
+    @Input()
+    public value:any = "";
+
+    @Input()
+    public isDisabled:boolean = false;
 
-    @Input() public isDisabled:boolean = false;
     @HostBinding('class.read-only')
-    @Input() public isReadonly:boolean = false;
+    @Input()
+    public isReadonly:boolean = false;
 
     @HostBinding('class.checked')
-    private checked:boolean = false;
+    public isChecked:boolean = false;
 
-    private currentValue:any;
+    public currentValue:any;
 
-    @Output() public currentValueChange:EventEmitter<any> = new EventEmitter<boolean>(false);
+    @Output()
+    public currentValueChange:EventEmitter<any> = new EventEmitter<boolean>(false);
 
-    private get checkedAttribute():string {
-        return this.checked ? "" : null;
+    public get checkedAttribute():string {
+        return this.isChecked ? "" : null;
     }
 
-    private get isDisabledAttribute():string {
+    public get isDisabledAttribute():string {
         return this.isDisabled ? "disabled" : null;
     }
 
@@ -56,7 +64,7 @@ export class SuiRadioButton {
     public update():void {
         //This is a horrible hack - need to rewrite!
         setTimeout(() => {
-            this.checked = this.currentValue == this.value;
+            this.isChecked = this.currentValue == this.value;
         });
     }
 

components/message/message.ts

@@ -20,9 +20,9 @@ export class SuiMessage {
 
     private transition:TransitionController = new TransitionController();
 
-    private isDismissed:boolean = false;
+    public isDismissed:boolean = false;
 
-    private dismiss():void {
+    public dismiss():void {
         this.transition.animate(new Transition("fade", 300, TransitionDirection.Out, () => {
             this.isDismissed = true;
             this.onDismiss.emit(this);

components/progress/progress.ts

@@ -15,7 +15,8 @@ import {Component, Input, HostBinding} from '@angular/core';
 })
 export class SuiProgress {
     @HostBinding('class.ui')
-    @HostBinding('class.progress') classes = true;
+    @HostBinding('class.progress')
+    private _classes = true;
 
     @HostBinding('class.success')
     private get reachedMaximum() {
@@ -26,9 +27,14 @@ export class SuiProgress {
     private unscaledValue:number = 0;
     private _maximum:number = 100;
 
-    @Input() public autoSuccess:boolean = true;
-    @Input() public progress:boolean = true;
-    @Input() public precision:number = 0;
+    @Input()
+    public autoSuccess:boolean = true;
+
+    @Input()
+    public progress:boolean = true;
+
+    @Input()
+    public precision:number = 0;
 
     @Input()
     public set value(value:any) {
@@ -64,7 +70,7 @@ export class SuiProgress {
     }
 
     @HostBinding('attr.data-percent')
-    private get percentage():string {
+    public get percentage():string {
         return this._value.toString();
     }
 

components/rating/rating.ts

@@ -30,16 +30,20 @@ export class SuiRating {
     public set max(value:any) {
         this._max = parseInt(value);
     }
-    private get icons() {
+
+    public get icons() {
         return Array(this._max);
     }
 
-    @Output() public valueChange:EventEmitter<number> = new EventEmitter<number>(false);
+    @Output()
+    public valueChange:EventEmitter<number> = new EventEmitter<number>(false);
 
     private _hoveredIndex:number = -1;
+
     private mouseover(i:number) {
         this._hoveredIndex = i;
     }
+
     @HostListener('mouseout')
     private mouseout() {
         this._hoveredIndex = -1;

components/select/multi-select.ts

@@ -14,7 +14,7 @@ import {KeyCode} from '../util/util';
 <!-- Query input -->
 <input [hidden]="!isSearchable" class="search" type="text" autocomplete="off" [(ngModel)]="query" (keydown)="onQueryInputKeydown($event)" #queryInput>
 <!-- Placeholder text -->
-<div *ngIf="!selectedOption" class="default text" [class.filtered]="!!query">{{ placeholder }}</div>
+<div class="default text" [class.filtered]="!!query">{{ placeholder }}</div>
 <!-- Select dropdown menu -->
 <div class="menu" suiDropdownMenu [menuAutoSelectFirst]="true">
     <ng-content></ng-content>

components/select/select-base.ts

@@ -17,7 +17,7 @@ export abstract class SuiSelectBase<T, U> implements AfterContentInit {
 
     // Keep track of all of the rendered select options. (Rendered by the user using *ngFor).
     @ContentChildren(SuiSelectOption, { descendants: true })
-    private _renderedOptions:QueryList<SuiSelectOption<T>>;
+    protected _renderedOptions:QueryList<SuiSelectOption<T>>;
 
     // Keep track of all of the subscriptions to the selected events on the rendered options.
     private _renderedSubscriptions:Subscription[];

components/select/select.ts

@@ -78,8 +78,6 @@ export class SuiSelect<T, U> extends SuiSelectBase<T, U> {
         this.searchService.updateQueryDelayed("");
 
         this.drawSelectedOption();
-        // Adds the active property to the items.
-        this.onAvailableOptionsRendered();
 
         // Automatically refocus the search input for better keyboard accessibility.
         this.focusInput();
@@ -97,6 +95,7 @@ export class SuiSelect<T, U> extends SuiSelectBase<T, U> {
                     (this.searchService.itemLookup<U>(value) as Promise<T>)
                         .then(r => {
                             this.selectedOption = r;
+
                             this.drawSelectedOption();
                         });
                     return;
@@ -119,6 +118,11 @@ export class SuiSelect<T, U> extends SuiSelectBase<T, U> {
     }
 
     private drawSelectedOption() {
+        // Updates the active class on the newly selected option.
+        if (this._renderedOptions) {
+            this.onAvailableOptionsRendered();
+        }
+
         if (this.selectedOption && this.optionTemplate) {
             this.drawTemplate(this._optionTemplateSibling, this.selectedOption);
         }

demo/src/app/components/codeblock/codeblock.component.ts

@@ -14,9 +14,9 @@ export class CodeblockComponent implements AfterViewInit {
     @Input()
     public src:string;
 
-    private html:string;
+    public html:string;
 
-    private languageClass:any = {};
+    public languageClass:any = {};
 
     constructor(private changeDetectorRef:ChangeDetectorRef) {}
 

demo/src/app/components/example/example.component.ts

@@ -6,7 +6,7 @@ import {Component, Input} from '@angular/core';
     styleUrls: ['./example.component.css']
 })
 export class ExampleComponent {
-    private detail:boolean = false;
+    public detail:boolean = false;
 
     @Input()
     public code:string;