chore(upgrade): to ng2 beta 1

.gitignore

@@ -3,9 +3,6 @@
 /node_modules
 npm-debug.log
 
-# type script artifacts
-/typings
-
 # WebStorm
 .idea
 

.npmignore

@@ -4,7 +4,4 @@ build
 gulp-tasks
 logs
 
-tsd.d.ts
-typings
-
 webpack.config.js

components/select/select-pipes.ts

@@ -1,4 +1,4 @@
-import {Pipe} from 'angular2/angular2';
+import {Pipe} from 'angular2/core';
 
 @Pipe({
   name: 'hightlight'

components/select/select.ts

@@ -1,42 +1,41 @@
 import {
-  Component, View, OnInit, OnDestroy,
-  Directive, ViewEncapsulation, Self,
-  EventEmitter, ElementRef, ComponentRef,
-  Pipe, CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgStyle,
+  Component, OnInit, OnDestroy,
+  EventEmitter, ElementRef, Pipe,
   bind, forwardRef, ResolvedBinding, Injector
-} from 'angular2/angular2';
+} from 'angular2/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgStyle} from 'angular2/common';
 
 import {SelectItem} from './select-item';
 import {HightlightPipe} from './select-pipes';
 import {IOptionsBehavior} from './select-interfaces';
 
 let optionsTemplate = `
-    <ul *ng-if="optionsOpened && options && options.length > 0 && !itemObjects[0].hasChildren()"
+    <ul *ngIf="optionsOpened && options && options.length > 0 && !itemObjects[0].hasChildren()"
         class="ui-select-choices ui-select-choices-content ui-select-dropdown dropdown-menu">
       <li class="ui-select-choices-group">
-        <div *ng-for="#o of options"
+        <div *ngFor="#o of options"
              class="ui-select-choices-row"
+             [ngClass]="{'active': isActive(o)}"
              (mouseenter)="selectActive(o)"
-             (click)="selectMatch(o, $event)"
-             [ng-class]="{'active': isActive(o)}">
+             (click)="selectMatch(o, $event)">
           <a href="javascript:void(0)" class="ui-select-choices-row-inner">
-            <div [inner-html]="o.text | hightlight:inputValue"></div>
+            <div [innerHtml]="o.text | hightlight:inputValue"></div>
           </a>
         </div>
       </li>
     </ul>
 
-    <ul *ng-if="optionsOpened && options && options.length > 0 && itemObjects[0].hasChildren()"
+    <ul *ngIf="optionsOpened && options && options.length > 0 && itemObjects[0].hasChildren()"
         class="ui-select-choices ui-select-choices-content ui-select-dropdown dropdown-menu">
-      <li *ng-for="#c of options; #index=index" class="ui-select-choices-group">
-        <div class="divider" *ng-if="index > 0"></div>
+      <li *ngFor="#c of options; #index=index" class="ui-select-choices-group">
+        <div class="divider" *ngIf="index > 0"></div>
         <div class="ui-select-choices-group-label dropdown-header">{{c.text}}</div>
 
-        <div *ng-for="#o of c.children"
+        <div *ngFor="#o of c.children"
              class="ui-select-choices-row"
+             [class.active]="isActive(o)"
              (mouseenter)="selectActive(o)"
-             (click)="selectMatch(o, $event)"
-             [ng-class]="{'active': isActive(o)}">
+             (click)="selectMatch(o, $event)">
           <a href="javascript:void(0)" class="ui-select-choices-row-inner">
             <div [inner-html]="o.text | hightlight:inputValue"></div>
           </a>
@@ -46,17 +45,15 @@ let optionsTemplate = `
 `;
 
 @Component({
-  selector: 'ng2-select',
+  selector: 'ng-select',
   properties: [
     'allowClear',
     'placeholder',
     'initData:data',
     'items',
     'disabled',
     'multiple'],
-  events: ['selected', 'removed', 'typed', 'data']
-})
-@View({
+  events: ['selected', 'removed', 'typed', 'data'],
   template: `
   <div tabindex="0"
      *ng-if="multiple === false"
@@ -133,10 +130,10 @@ export class Select implements OnInit, OnDestroy {
   public active:Array<SelectItem> = [];
   public activeOption:SelectItem;
 
-  private data:EventEmitter = new EventEmitter();
-  private selected:EventEmitter = new EventEmitter();
-  private removed:EventEmitter = new EventEmitter();
-  private typed:EventEmitter = new EventEmitter();
+  private data:EventEmitter<any> = new EventEmitter();
+  private selected:EventEmitter<any> = new EventEmitter();
+  private removed:EventEmitter<any> = new EventEmitter();
+  private typed:EventEmitter<any> = new EventEmitter();
   private allowClear:boolean = false;
   private placeholder:string = '';
   private initData:Array<any> = [];
@@ -237,7 +234,7 @@ export class Select implements OnInit, OnDestroy {
     }
   }
 
-  onInit() {
+  ngOnInit() {
     this.behavior = this.itemObjects[0].hasChildren() ?
       new Select.ChildrenBehavior(this) : new Select.GenericBehavior(this);
     this.offSideClickHandler = this.getOffSideClickHandler(this);
@@ -249,7 +246,7 @@ export class Select implements OnInit, OnDestroy {
     }
   }
 
-  onDestroy() {
+  ngOnDestroy() {
     document.removeEventListener('click', this.offSideClickHandler);
     this.offSideClickHandler = null;
   }
@@ -623,4 +620,4 @@ export module Select {
   }
 }
 
-export const select:Array<any> = [Select];
+export const SELECT_DIRECTIVES:Array<any> = [Select];

demo/components/select-section.ts

@@ -1,8 +1,8 @@
-/// <reference path="../../tsd.d.ts" />
-
-import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2';
+import {Component} from 'angular2/core';
+import {CORE_DIRECTIVES} from 'angular2/common';
 
 import {tabs} from 'ng2-bootstrap/ng2-bootstrap';
+
 import {SingleDemo} from './select/single-demo';
 import {MultipleDemo} from './select/multiple-demo';
 import {ChildrenDemo} from './select/children-demo';
@@ -60,9 +60,7 @@ tabDesc.forEach(desc => {
 });
 
 @Component({
-  selector: 'select-section'
-})
-@View({
+  selector: 'select-section',
   template: `
   <section id="${name.toLowerCase()}">
     <div class="row">

demo/components/select/children-demo.html

@@ -1,12 +1,12 @@
 <div class="selectivity-input example-input" style="width: 300px; margin-bottom: 20px;">
     <h3>Select a city by country</h3>
-    <ng2-select [allow-clear]="true"
+    <ng-select [allow-clear]="true"
                 [items]="items"
                 [disabled]="disabled"
                 (data)="refreshValue($event)"
                 (selected)="selected($event)"
                 (removed)="removed($event)"
-                [placeholder]="'No city selected'"></ng2-select>
+                [placeholder]="'No city selected'"></ng-select>
     <p><pre>{{value.text}}</pre></p>
     <div>
         <button type="button" class="btn btn-primary"

demo/components/select/children-demo.ts

@@ -1,23 +1,16 @@
-/// <reference path="../../../tsd.d.ts" />
-
-import {
-  Component, View,
-  CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass
-} from 'angular2/angular2';
-
+import {Component} from 'angular2/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common';
 import {ButtonCheckbox} from 'ng2-bootstrap/ng2-bootstrap';
 
-import {select} from '../../../ng2-select';
+import {SELECT_DIRECTIVES} from '../../../ng2-select';
 
 // webpack html imports
 let template = require('./children-demo.html');
 
 @Component({
-  selector: 'children-demo'
-})
-@View({
+  selector: 'children-demo',
   template: template,
-  directives: [select, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, ButtonCheckbox]
+  directives: [SELECT_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, ButtonCheckbox]
 })
 export class ChildrenDemo {
   private value:any = {};

demo/components/select/multiple-demo.ts

@@ -1,23 +1,16 @@
-/// <reference path="../../../tsd.d.ts" />
-
-import {
-  Component, View,
-  CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass
-} from 'angular2/angular2';
-
+import {Component} from 'angular2/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common';
 import {ButtonCheckbox} from 'ng2-bootstrap/ng2-bootstrap';
 
-import {select} from '../../../ng2-select';
+import {SELECT_DIRECTIVES} from '../../../ng2-select';
 
 // webpack html imports
 let template = require('./multiple-demo.html');
 
 @Component({
-  selector: 'multiple-demo'
-})
-@View({
+  selector: 'multiple-demo',
   template: template,
-  directives: [select, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, ButtonCheckbox]
+  directives: [SELECT_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, ButtonCheckbox]
 })
 export class MultipleDemo {
   private value:any = ['Athens'];

demo/components/select/single-demo.ts

@@ -1,23 +1,16 @@
-/// <reference path="../../../tsd.d.ts" />
-
-import {
-  Component, View,
-  CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass
-} from 'angular2/angular2';
-
+import {Component} from 'angular2/core';
+import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common';
 import {ButtonCheckbox} from 'ng2-bootstrap/ng2-bootstrap';
 
-import {select} from '../../../ng2-select';
+import {SELECT_DIRECTIVES} from '../../../ng2-select';
 
 // webpack html imports
 let template = require('./single-demo.html');
 
 @Component({
-  selector: 'single-demo'
-})
-@View({
+  selector: 'single-demo',
   template: template,
-  directives: [select, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, ButtonCheckbox]
+  directives: [SELECT_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, ButtonCheckbox]
 })
 export class SingleDemo {
   private value:any = {};

demo/index.ts

@@ -1,25 +1,14 @@
-/// <reference path="../tsd.d.ts" />
-import {Component, View, bootstrap, NgClass} from 'angular2/angular2';
-
-import {Ng2SelectConfig, Ng2SelectTheme} from '../ng2-select';
-
-let w:any = window;
-if (w && w.__theme === 'bs4') {
-  Ng2SelectConfig.theme = Ng2SelectTheme.BS4;
-}
-
+import {bootstrap} from 'angular2/bootstrap';
+import {Component} from 'angular2/core';
+import {NgClass} from 'angular2/common';
 
 import {SelectSection} from './components/select-section';
 
 let gettingStarted = require('./getting-started.md');
 
 @Component({
-  selector: 'app'
-})
-@View({
+  selector: 'app',
   template: `
-  <!--<demo-header>Loading header</demo-header>-->
-
   <main class="bd-pageheader">
     <div class="container">
       <h1>ng2-select</h1>
@@ -33,15 +22,6 @@ let gettingStarted = require('./getting-started.md');
   </main>
 
   <div class="container">
-    <div class="col-md-12 card card-block panel panel-default">
-      <selection>
-          <h1>ng2-select available with:
-          <a class="btn btn-default btn-secondary btn-lg" [ng-class]="{active: isBs3}" href="./">Bootstrap 3</a>
-          <a class="btn btn-default btn-secondary btn-lg" [ng-class]="{active: !isBs3}" href="./index-bs4.html">Bootstrap 4</a>
-          </h1>
-      </selection>
-    </div>
-    <br>
     <section id="getting-started">${gettingStarted}</section>
 
     <select-section class="col-md-12"></select-section>
@@ -60,7 +40,6 @@ let gettingStarted = require('./getting-started.md');
   ]
 })
 export class Demo {
-  private isBs3:boolean = Ng2SelectConfig.theme === Ng2SelectTheme.BS3;
 }
 
 bootstrap(Demo);

ng2-select.ts

@@ -1,2 +1 @@
 export * from './components/select/select';
-export * from './components/ng2-select-config';