chore(Angular Version): Update to alpha 53

Updated angular include paths
Updated common directive casings
Still need to fix systemjs not loading new angular paths
track down variable casing errors after fixing angularjs problems.

gulpfile.js

@@ -106,7 +106,7 @@ gulp.task('sass', ['cleanSass'], function () {
 gulp.task('serve', function(){
     gulp.src('./')
         .pipe(webserver({
-            livereload: true,
+            livereload: false,
             open: true
         }));
 });

package.json

@@ -38,11 +38,12 @@
     "bourbon": "^4.2.6"
   },
   "dependencies": {
-    "angular2": "^2.0.0-alpha.48",
+    "angular2": "^2.0.0-alpha.53",
     "bootstrap": "git://github.com/twbs/bootstrap.git#v4.0.0-alpha",
     "core.js": "^0.4.2",
     "es6-shim": "^0.33.13",
     "font-awesome": "4.4.0",
+    "rxjs": "^5.0.0-alpha.14",
     "systemjs": "0.19.5"
   }
 }

src/components/Alert/Alert.ts

@@ -1,4 +1,5 @@
-import {Component, View, CORE_DIRECTIVES, ElementRef, Input, Output, EventEmitter} from 'angular2/angular2';
+import {Component, View, ElementRef, Input, Output, EventEmitter} from 'angular2/core';
+import {CORE_DIRECTIVES} from 'angular2/common';
 
 @Component({
     selector: 'alert'

src/components/Carousel/Carousel.ts

@@ -1,6 +1,7 @@
-import {Directive, Component, View, CORE_DIRECTIVES, ViewEncapsulation} from 'angular2/angular2';
-import {QueryList, ContentChildren, ElementRef, AfterContentInit} from 'angular2/angular2';
-import {Input, Output, EventEmitter} from 'angular2/angular2';
+import {Directive, Component, View, ViewEncapsulation} from 'angular2/core';
+import {QueryList, ContentChildren, ElementRef, AfterContentInit} from 'angular2/core';
+import {Input, Output, EventEmitter} from 'angular2/core';
+import {CORE_DIRECTIVES} from 'angular2/common';
 
 @Directive({
 	selector: '.carousel-item',
@@ -97,8 +98,7 @@ export class Carousel implements AfterContentInit {
 	}
 
 	ngAfterContentInit(): void {
-		this.imageQuery.changes
-				.subscribe(() => this.registerImages());
+		this.imageQuery.changes.subscribe(() => this.registerImages());
 		this.registerImages();
 	}
 

src/components/Carousel/carousel.html

@@ -1,6 +1,6 @@
 <div class="carousel slide">
   <ol class="carousel-indicators">
-    <li *ng-for="#image of images"
+    <li *ngFor="#image of images"
       (click)="switchTo(image)" [class.active]="image.isActive && !image.checkIfAnimating()"></li> 
   </ol>
   <div class="carousel-inner" role="listbox">

src/components/DatePicker/DatePicker.html

@@ -31,7 +31,7 @@
 	</header>
 	<section class="calendar-container">
 		<date-picker-calendar animation
-			*ng-for="#month of calendarMonths #i=index"
+			*ngFor="#month of calendarMonths #i=index"
 			class="col-md-{{12/months}} p-a-0"
 			[style.margin-left]="(i!=months||direction!='right'?0:-100/months)+'%'" 
 			[id]="i"

src/components/DatePicker/DatePicker.ts

@@ -1,5 +1,6 @@
-import {Component, View, CORE_DIRECTIVES, FORM_DIRECTIVES, OnInit, OnChanges} from 'angular2/angular2';
-import {Input, Output, EventEmitter, ElementRef, ViewChildren, QueryList} from 'angular2/angular2';
+import {Component, View, OnInit, OnChanges} from 'angular2/core';
+import {Input, Output, EventEmitter, ElementRef, ViewChildren, QueryList} from 'angular2/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES} from "angular2/common";
 import {DatePickerBase} from './DatePickerBase';
 import {DatePickerCalendar} from './DatePickerCalendar';
 import {Animation} from '../../Directives/Animation/Animation'

src/components/DatePicker/DatePickerBase.ts

@@ -1,5 +1,6 @@
-import {Component, View, CORE_DIRECTIVES, FORM_DIRECTIVES, AfterViewInit} from 'angular2/angular2';
-import {Input, Output, ElementRef, ViewChildren, QueryList} from 'angular2/angular2';
+import {Component, View, AfterViewInit} from 'angular2/core';
+import {Input, Output, ElementRef, ViewChildren, QueryList} from 'angular2/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
 import {DatePickerCalendar} from './DatePickerCalendar';
 import {Animation} from '../../Directives/Animation/Animation'
 

src/components/DatePicker/DatePickerCalendar.html

@@ -11,8 +11,8 @@
 				<th>F</th>
 				<th>S</th>
 			</tr>
-			<tr *ng-for="#week of weeks">
-				<td *ng-for="#day of week"
+			<tr *ngFor="#week of weeks">
+				<td *ngFor="#day of week"
 					[class.selectable]="checkSelectable(day)" 
 					[class.disabled]="!checkSelectable(day)"
 					[class.selected]="checkSelectedDate(day)" 

src/components/DatePicker/DatePickerCalendar.ts

@@ -1,5 +1,6 @@
-import {Component, View, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
-import {Input, Output, EventEmitter, OnInit} from 'angular2/angular2';
+import {Component, View} from 'angular2/core';
+import {Input, Output, EventEmitter, OnInit} from 'angular2/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
 
 //import {AnimationListener} from '../../directives/AnimationListener/AnimationListener';
 

src/components/DatePicker/DatePickerOld.html

@@ -15,7 +15,7 @@
 	<div class="modal-dialog">
 <section class="modal-content container m-a">
 	<header class="row">
-		<time *ng-for="#month of monthList" 
+		<time *ngFor="#month of monthList" 
 			class="col-xs-{{12/months}} text-center p-y">
 			<h5>{{month | date:'MMMM yyyy'}}</h5>
 		</time>
@@ -35,7 +35,7 @@ <h5>{{month | date:'MMMM yyyy'}}</h5>
 		</div>
 	</header>
 	<section class="row">
-		<date-picker-calendar *ng-for="#month of monthList"
+		<date-picker-calendar *ngFor="#month of monthList"
 			class="col-md-{{12/months}}" 
 			[min-date]="minDate" [max-date]="maxDate"
 			[current-month]="month" 

src/components/DatePicker/DatePickerOld.ts

@@ -1,6 +1,7 @@
-import {Component, View, CORE_DIRECTIVES, FORM_DIRECTIVES, DOCUMENT, ElementRef,
-	Input, Output, EventEmitter, OnInit, DatePipe, AfterViewInit} from 'angular2/angular2';
-import {ViewChildren, QueryList, ViewChild} from 'angular2/angular2';
+import {Component, View, ElementRef,
+	Input, Output, EventEmitter, OnInit, AfterViewInit} from 'angular2/core';
+import {ViewChildren, QueryList, ViewChild} from 'angular2/core';
+import {CORE_DIRECTIVES,FORM_DIRECTIVES,DatePipe} from 'angular2/common';
 import {DatePickerCalendar} from './DatePickerCalendar';
 
 @Component({

src/components/DatePicker/DateRangePicker.ts

@@ -1,6 +1,6 @@
-import {Component, View, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
-import {Input, Output, EventEmitter, ElementRef, ViewChildren, QueryList} from 'angular2/angular2';
-
+import {Component, View, Input, Output} from 'angular2/core';
+import {EventEmitter, ElementRef, ViewChildren, QueryList} from 'angular2/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
 import {DateRange} from '../../utilities/DateUtils.ts';
 
 @Component({

src/components/InfiniteScroller.ts

@@ -0,0 +1,105 @@
+import { 
+	Directive,
+	Component, 
+	View, 
+	ElementRef, 
+	Input, 
+	Output, 
+	EventEmitter,
+	ContentChildren,
+	ViewChildren,
+	QueryList,
+	AfterContentInit
+ } from "angular2/core";
+
+@Component({
+	selector: 'infinite-scroller'
+})
+@View({
+	template: `
+		<div class="scroll-container" (scroll)="doscroll($event)">
+			<ng-content></ng-content>
+		</div>
+	`,
+	styles: [`
+		.scroll-container {
+			overflow-y: scroll;
+			overflow-x: hidden;
+			height: 300px;
+		}
+		
+		.scroll-container::-webkit-scrollbar {
+			display: none;
+		}
+		
+		.scroll-content {
+			overflow: auto;
+		}
+	`]
+})
+export class InfiniteScroller implements AfterContentInit {
+	@Input()
+	distance: number;
+
+	@Output()
+	next = new EventEmitter();
+
+	@Output()
+	prev: EventEmitter<any> = new EventEmitter();
+
+	@ContentChildren(InfiniteScrollItem)
+	contentQuery: QueryList<InfiniteScrollItem>;
+
+	container: Element
+
+	constructor(element: ElementRef) {
+		this.container = element.nativeElement;
+	}
+
+	ngAfterContentInit(): void {
+		this.contentQuery.changes
+			.subscribe(() => this.contentQuery.map(i => console.log(this)));
+	}
+
+	registerItems(): void {
+
+	}
+
+	doscroll(event: Event) {
+
+		var target = <Element>(typeof event.srcElement === 'undefined' ? event.target : event.srcElement);
+
+		var height = target.getBoundingClientRect().height;
+
+		if(height - target.scrollTop > 100)
+			return;
+
+		console.log(this.contentQuery);
+		//console.log(this.itemQuery);
+		//console.log(this.itemQuery.first.element.getBoundingClientRect().top);
+		this.next.emit(null);
+	}
+
+	isVisable(item: InfiniteScrollItem): boolean {
+		var containerRect = this.container.getBoundingClientRect();
+		var itemRect = item.element.getBoundingClientRect();
+
+		return itemRect.top < containerRect.height;
+	}
+}
+
+@Directive({
+	selector: '[infinite-scroll-item]'
+})
+export class InfiniteScrollItem {
+	public element: Element;
+	constructor(element: ElementRef) {
+		this.element = element.nativeElement;
+		//console.log(this);
+	}
+}
+
+export var InfiniteScrollerProviders = [
+	InfiniteScroller,
+	InfiniteScrollItem
+]

src/components/Modal/Modal.ts

@@ -1,4 +1,5 @@
-import {Component, View, CORE_DIRECTIVES, ElementRef, Input, Output, EventEmitter} from 'angular2/angular2';
+import {Component, View, ElementRef, Input, Output, EventEmitter} from 'angular2/core';
+import {CORE_DIRECTIVES} from 'angular2/common';
 import {AnimationListener} from "../../directives/Animation/AnimationListener";
 import {Range} from "../../pipes/Range/Range";
 

src/components/Pagination/Pagination.html

@@ -12,7 +12,7 @@
                 <span class="sr-only">Previous</span>
             </a>
         </li>
-        <li *ng-for="#page of pagesBlank | range : 1 : totalPages | slice: startingIndex : endingIndex" [class.active]="currentPage == page">
+        <li *ngFor="#page of pagesBlank | range : 1 : totalPages | slice: startingIndex : endingIndex" [class.active]="currentPage == page">
             <a (click)="setPage(page)">{{page}}</a>
         </li>
         <li [class.disabled]="currentPage == totalPages">
@@ -33,6 +33,6 @@
 <div class="input-group col-md-3">
     <span class="input-group-addon">Jump to:</span>
     <select class="form-control" (change)="setPage($event.target.value)">
-        <option *ng-for="#page of pagesBlank | range : 1 : totalPages" [value]="page" [selected]="page == currentPage">{{page}}</option>
+        <option *ngFor="#page of pagesBlank | range : 1 : totalPages" [value]="page" [selected]="page == currentPage">{{page}}</option>
     </select>
 </div>

src/components/Pagination/Pagination.ts

@@ -1,4 +1,5 @@
-import {Component, View, CORE_DIRECTIVES, ElementRef, Input, Output, EventEmitter, SlicePipe, OnChanges} from 'angular2/angular2';
+import {Component, View, ElementRef, Input, Output, EventEmitter, OnChanges} from 'angular2/core';
+import {CORE_DIRECTIVES, SlicePipe} from 'angular2/common';
 import {Range} from '../../pipes/Range/Range';
 
 @Component({

src/components/components.ts

@@ -3,17 +3,20 @@ import {CAROUSEL_PROVIDERS, Carousel, CarouselItem} from "./Carousel/Carousel";
 import {DatePicker} from "./DatePicker/DatePicker";
 import {MODAL_PROVIDERS, Modal} from "./Modal/Modal";
 import {PAGINATION_PROVIDERS, Pagination} from "./Pagination/Pagination";
+import {InfiniteScrollerProviders} from "./InfiniteScroller";
 
 export var FUELUI_COMPONENT_PROVIDERS = [
 	ALERT_PROVIDERS,
 	CAROUSEL_PROVIDERS,
 	DatePicker,
 	MODAL_PROVIDERS,
-	PAGINATION_PROVIDERS
+	PAGINATION_PROVIDERS,
+	InfiniteScrollerProviders
 ];
 
 export * from "./Alert/Alert";
 export * from "./Carousel/Carousel";
 export * from "./DatePicker/DatePicker";
 export * from "./Modal/Modal";
-export * from "./Pagination/Pagination";
+export * from "./Pagination/Pagination";
+export * from "./InfiniteScroller";

src/demo.ts

@@ -1,5 +1,6 @@
-import {View, Component, ViewEncapsulation, bootstrap, provide} from 'angular2/angular2';
-import {FORM_DIRECTIVES, FORM_PROVIDERS, CORE_DIRECTIVES } from 'angular2/angular2';
+import {View, Component, ViewEncapsulation, provide} from 'angular2/core';
+import {FORM_DIRECTIVES, FORM_PROVIDERS, CORE_DIRECTIVES } from 'angular2/common';
+import {bootstrap} from 'angular2/bootstrap';
 import {LocationStrategy, HashLocationStrategy, ROUTER_PROVIDERS} from 'angular2/router';
 import {FUELUI_COMPONENT_PROVIDERS} from './fuel-ui';
 import {FUELUI_DIRECTIVE_PROVIDERS} from './fuel-ui';
@@ -11,6 +12,18 @@ import {FUELUI_PIPE_PROVIDERS} from './fuel-ui';
 @View({
 	template: `
 	<main class="container">
+		<h2>Infinite Scroller</h2>
+		<div class="row m-a">
+			<div class="col-md-6">
+				<infinite-scroller (next)="infinteScrollNext()" distance="2">
+					
+						<div *ngFor="#item of infiniteScrollItems" infinite-scroll-item>
+							{{item}}
+						</div>
+					
+				</infinite-scroller>
+			</div>
+		</div>
 		<h2>Animation Helper</h2>
 		<div class="row m-a">
 			<div class="test-box"
@@ -156,10 +169,26 @@ export class DemoComponent {
 	numRooms: number = 1;
 	checkInDate: Date = new Date();
 	checkOutDate: Date = new Date();
+
+	infiniteScrollItems: string[] = [];
+
+	constructor() {
+		for(let i = 0; i < 5; i++)
+			this.infinteScrollNext();
+	}
 
 	pageChange(page:number):void{
 		this.currentPage = page;
 	}
+
+	infinteScrollNext(): void {
+		var currentItem = this.infiniteScrollItems.length;
+		var newItem = "";
+		for(let i = 0; i < 50; i++)
+			newItem += "Test " + currentItem + " ";
+
+		this.infiniteScrollItems.push(newItem);
+	}
 
 	saveFunc(modal:any, error:boolean):void{
 		//do validations

src/directives/Animation/Animation.ts

@@ -1,4 +1,4 @@
-import {Directive, Input, Output, EventEmitter, ElementRef, OnInit, OnChanges} from 'angular2/angular2';
+import {Directive, Input, Output, EventEmitter, ElementRef, OnInit, OnChanges} from 'angular2/core';
 
 @Directive({
     selector: '[animation]',

src/directives/Animation/AnimationListener.ts

@@ -1,4 +1,4 @@
-import {Directive, Output, EventEmitter} from 'angular2/angular2';
+import {Directive, Output, EventEmitter} from 'angular2/core';
 
 @Directive({
     selector: '[.animated]',

src/directives/Tooltip/Tooltip.ts

@@ -1,4 +1,5 @@
-import {Directive, CORE_DIRECTIVES, ElementRef, Input, Output, EventEmitter, ViewContainerRef, ProtoViewRef, View} from 'angular2/angular2';
+import {Directive, ElementRef, Input, Output, EventEmitter, ViewContainerRef, ProtoViewRef, View} from 'angular2/core';
+import {CORE_DIRECTIVES} from 'angular2/common';
 
 @Directive({
     selector: '[tooltip]',

src/pipes/OrderBy/OrderBy.ts

@@ -1,11 +1,11 @@
 /*
  * Example use
- *		Basic Array of single type: *ng-for="#todo of todoService.todos | orderBy : 'desc'"
- *		Multidimensional Array Sort on single column: *ng-for="#todo of todoService.todos | orderBy : 'asc' : 'status'"
- *		Multidimensional Array Sort on multiple columns: *ng-for="#todo of todoService.todos | orderBy : 'asc' : ['status', 'title']"
+ *		Basic Array of single type: *ngFor="#todo of todoService.todos | orderBy : 'desc'"
+ *		Multidimensional Array Sort on single column: *ngFor="#todo of todoService.todos | orderBy : 'asc' : 'status'"
+ *		Multidimensional Array Sort on multiple columns: *ngFor="#todo of todoService.todos | orderBy : 'asc' : ['status', 'title']"
  */
 
-import {Pipe} from "angular2/angular2";
+import {Pipe} from "angular2/core";
 
 @Pipe({
     name: 'orderBy',