Update to angular2 v0.35

.eslintrc

@@ -5,7 +5,6 @@
     "mocha": 2,
     "es6": 2
   },
-  "parser": "babel-eslint",
   "ecmaFeatures": {
     "modules": true
   },

.gitignore

@@ -12,5 +12,8 @@ npm-debug.log
 # ignore build and dist for now
 /build
 /dist
-/src/**/*.js
-/src/**/*.js.map
+
+/demo/**/*.js
+/demo/**/*.js.map
+/components/**/*.js
+/components/**/*.js.map

src/components/accordion/accordion.ts → components/accordion/accordion.ts

@@ -1,10 +1,9 @@
-/// <reference path="../../../typings/tsd.d.ts" />
+/// <reference path="../../tsd.d.ts" />
 
 import {
   Component, View,
   Directive, LifecycleEvent,
-  EventEmitter, ElementRef,
-  CSSClass, ViewContainerRef, TemplateRef
+  NgClass, ViewContainerRef, TemplateRef
 } from 'angular2/angular2';
 
 // todo: support template url
@@ -95,7 +94,7 @@ import {Collapse} from '../collapse/collapse';
       <h4 class="panel-title">
         <a href tabindex="0" class="accordion-toggle"
           (^click)="toggleOpen($event)">
-          <span [class]="{'text-muted': isDisabled}"
+          <span [ng-class]="{'text-muted': isDisabled}"
             [accordion-transclude]="headingTemplate">{{heading}}</span>
         </a>
       </h4>
@@ -107,15 +106,15 @@ import {Collapse} from '../collapse/collapse';
     </div>
   </div>
   `,
-  directives: [Collapse, AccordionTransclude, CSSClass]
+  directives: [Collapse, AccordionTransclude, NgClass]
 })
 export class AccordionGroup {
   private templateUrl:string;
   private _isOpen:boolean;
 
   public isDisabled:boolean;
   public headingTemplate:any;
-  public templateRef: any;
+  // public templateRef: any;
 
   constructor(private accordion:Accordion) {
   }

src/components/alert/alert.ts → components/alert/alert.ts

@@ -1,10 +1,10 @@
-/// <reference path="../../../typings/tsd.d.ts" />
+/// <reference path="../../tsd.d.ts" />
 
 import {
   Component, View,
   LifecycleEvent, EventEmitter,
   ElementRef, ViewContainerRef,
-  NgIf, CSSClass
+  NgIf, NgClass
 } from 'angular2/angular2';
 
 // TODO: templateUrl
@@ -16,15 +16,15 @@ import {
 })
 @View({
   template: `
-  <div class="alert" role="alert" [class]="classes" *ng-if="!closed">
+  <div class="alert" role="alert" [ng-class]="classes" *ng-if="!closed">
     <button *ng-if="closeable" type="button" class="close" (^click)="onClose($event)">
       <span aria-hidden="true">&times;</span>
       <span class="sr-only">Close</span>
     </button>
     <ng-content></ng-content>
   </div>
   `,
-  directives: [NgIf, CSSClass]
+  directives: [NgIf, NgClass]
 })
 export class Alert {
   type:string;

src/components/buttons/button-checkbox.ts → components/buttons/button-checkbox.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../typings/tsd.d.ts" />
+/// <reference path="../../tsd.d.ts" />
 import {
   Directive,
   DefaultValueAccessor,

src/components/buttons/button-radio.ts → components/buttons/button-radio.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../typings/tsd.d.ts" />
+/// <reference path="../../tsd.d.ts" />
 import {
   Directive,
   DefaultValueAccessor,

src/components/collapse/collapse.ts → components/collapse/collapse.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../typings/tsd.d.ts" />
+/// <reference path="../../tsd.d.ts" />
 
 import {
   Component, View,

src/components/common.ts → components/common.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../typings/tsd.d.ts" />
+/// <reference path="../tsd.d.ts" />
 
 import {Directive, TemplateRef, ViewContainerRef} from 'angular2/angular2';
 

src/components/dropdown/dropdown-keyboard-nav.ts → components/dropdown/dropdown-keyboard-nav.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../typings/tsd.d.ts" />
+/// <reference path="../../tsd.d.ts" />
 
 import {Directive, ElementRef} from 'angular2/angular2';
 import {Dropdown} from './dropdown';

src/components/dropdown/dropdown-menu.ts → components/dropdown/dropdown-menu.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../typings/tsd.d.ts" />
+/// <reference path="../../tsd.d.ts" />
 
 import {Directive, ElementRef, Host, LifecycleEvent} from 'angular2/angular2';
 import {Dropdown} from './dropdown';

src/components/dropdown/dropdown-service.ts → components/dropdown/dropdown-service.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../typings/tsd.d.ts" />
+/// <reference path="../../tsd.d.ts" />
 
 export const ALWAYS = 'always';
 export const DISABLED = 'disabled';

src/components/dropdown/dropdown-toggle.ts → components/dropdown/dropdown-toggle.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../typings/tsd.d.ts" />
+/// <reference path="../../tsd.d.ts" />
 
 import {Directive, ElementRef, Host, LifecycleEvent} from 'angular2/angular2';
 

src/components/dropdown/dropdown.interfaces.ts → components/dropdown/dropdown.interfaces.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../typings/tsd.d.ts" />
+/// <reference path="../../tsd.d.ts" />
 
 import {ElementRef} from 'angular2/angular2';
 

src/components/dropdown/dropdown.ts → components/dropdown/dropdown.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../../typings/tsd.d.ts" />
+/// <reference path="../../tsd.d.ts" />
 
 import {
   Directive, LifecycleEvent,

src/components/dropdown/index.ts → components/dropdown/index.ts

@@ -1,5 +1,5 @@
 import {Dropdown} from './dropdown';
 import {DropdownMenu} from './dropdown-menu';
 import {DropdownToggle} from './dropdown-toggle';
-export const dropdown: List<any> = [Dropdown, DropdownMenu, DropdownToggle];
+export const dropdown: Array<any> = [Dropdown, DropdownMenu, DropdownToggle];
 // , KeyboardNav

components/index.ts

@@ -0,0 +1,20 @@
+///<reference path="../tsd.d.ts"/>
+
+export * from  './accordion/accordion';
+export * from  './alert/alert';
+export * from  './buttons/button-radio';
+export * from  './buttons/button-checkbox';
+export * from  './dropdown/index';
+export * from  './dropdown/dropdown';
+export * from  './dropdown/dropdown-menu';
+export * from  './dropdown/dropdown-service';
+export * from  './dropdown/dropdown-toggle';
+export * from  './collapse/collapse';
+export * from  './pagination/pagination';
+export * from  './progressbar/progressbar';
+export * from  './rating/rating';
+export * from  './tabs/tabs';
+export * from  './timepicker/timepicker';
+export * from  './tooltip/tooltip';
+export * from  './position'
+export * from  './common'

components/module.ts

@@ -0,0 +1,3 @@
+declare module 'ng2-bootstrap' {
+  export * from 'index';
+}

src/components/pagination/pagination.ts → components/pagination/pagination.ts

@@ -1,11 +1,11 @@
-/// <reference path="../../../typings/tsd.d.ts" />
+/// <reference path="../../tsd.d.ts" />
 
 import {
   Component, View, Directive,
   LifecycleEvent, EventEmitter,
   ElementRef,
   DefaultValueAccessor,
-  coreDirectives, CSSClass,
+  CORE_DIRECTIVES, NgClass,
   Self, NgModel, Renderer,
   ViewEncapsulation, ViewRef,
   ViewContainerRef, TemplateRef, NgFor, ComponentRef
@@ -48,20 +48,20 @@ const paginationConfig = {
 })
 @View({
   template: `
-  <ul class="pagination" [class]="classMap">
-    <li [class]="{disabled: noPrevious()||disabled, hidden: !boundaryLinks}" class="pagination-first">
+  <ul class="pagination" [ng-class]="classMap">
+    <li [ng-class]="{disabled: noPrevious()||disabled, hidden: !boundaryLinks}" class="pagination-first">
       <a href (click)="selectPage(1, $event)">{{getText('first')}}</a></li>
 
-    <li [class]="{disabled: noPrevious()||disabled, hidden: !directionLinks}" class="pagination-prev"><a href (click)="selectPage(page - 1, $event)">{{getText('previous')}}</a></li>
+    <li [ng-class]="{disabled: noPrevious()||disabled, hidden: !directionLinks}" class="pagination-prev"><a href (click)="selectPage(page - 1, $event)">{{getText('previous')}}</a></li>
 
-    <li *ng-for="#page of pages" [class]="{active: page.active, disabled: disabled&&!page.active}" class="pagination-page"><a href (click)="selectPage(page.number, $event)">{{page.text}}</a></li>
+    <li *ng-for="#page of pages" [ng-class]="{active: page.active, disabled: disabled&&!page.active}" class="pagination-page"><a href (click)="selectPage(page.number, $event)">{{page.text}}</a></li>
 
-    <li [class]="{disabled: noNext()||disabled, hidden: !directionLinks}" class="pagination-next"><a href (click)="selectPage(page + 1, $event)">{{getText('next')}}</a></li>
+    <li [ng-class]="{disabled: noNext()||disabled, hidden: !directionLinks}" class="pagination-next"><a href (click)="selectPage(page + 1, $event)">{{getText('next')}}</a></li>
 
-    <li [class]="{disabled: noNext()||disabled, hidden: !boundaryLinks}" class="pagination-last"><a href (click)="selectPage(totalPages, $event)">{{getText('last')}}</a></li>
+    <li [ng-class]="{disabled: noNext()||disabled, hidden: !boundaryLinks}" class="pagination-last"><a href (click)="selectPage(totalPages, $event)">{{getText('last')}}</a></li>
   </ul>
   `,
-  directives: [coreDirectives, CSSClass],
+  directives: [CORE_DIRECTIVES, NgClass],
   encapsulation: ViewEncapsulation.NONE
 })
 export class Pagination extends DefaultValueAccessor {
@@ -154,7 +154,8 @@ export class Pagination extends DefaultValueAccessor {
     }
 
     if ((!this.disabled || !event) && this.page !== page && page > 0 && page <= this.totalPages) {
-      event.target.blur();
+      let target:any = event.target;
+      target.blur();
       this.writeValue(page);
       this.cd.viewToModelUpdate(page);
     }
@@ -257,11 +258,11 @@ const pagerConfig = {
 @View({
   template: `
     <ul class="pager">
-      <li [class]="{disabled: noPrevious(), previous: align}"><a href (click)="selectPage(page - 1, $event)">{{getText('previous')}}</a></li>
-      <li [class]="{disabled: noNext(), next: align}"><a href (click)="selectPage(page + 1, $event)">{{getText('next')}}</a></li>
+      <li [ng-class]="{disabled: noPrevious(), previous: align}"><a href (click)="selectPage(page - 1, $event)">{{getText('previous')}}</a></li>
+      <li [ng-class]="{disabled: noNext(), next: align}"><a href (click)="selectPage(page + 1, $event)">{{getText('next')}}</a></li>
   </ul>
   `,
-  directives: [CSSClass]
+  directives: [NgClass]
 })
 export class Pager extends Pagination {
   constructor(@Self() cd:NgModel, renderer:Renderer, elementRef:ElementRef) {

src/components/position.ts → components/position.ts

@@ -1,4 +1,4 @@
-/// <reference path="../../typings/tsd.d.ts" />
+/// <reference path="../tsd.d.ts" />
 
 import {
   Injectable,

components/progressbar/progressbar.js

@@ -0,0 +1,133 @@
+/// <reference path="../../tsd.d.ts" />
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decorate(decorators, target, key, desc);
+    switch (arguments.length) {
+        case 2: return decorators.reduceRight(function(o, d) { return (d && d(o)) || o; }, target);
+        case 3: return decorators.reduceRight(function(o, d) { return (d && d(target, key)), void 0; }, void 0);
+        case 4: return decorators.reduceRight(function(o, d) { return (d && d(target, key, o)) || o; }, desc);
+    }
+};
+var __param = (this && this.__param) || function (paramIndex, decorator) {
+    return function (target, key) { decorator(target, key, paramIndex); }
+};
+var angular2_1 = require('angular2/angular2');
+var progressConfig = {
+    animate: true,
+    max: 100
+};
+// todo: progress element conflict with bootstrap.css
+// todo: need hack: replace host element with div
+var Progress = (function () {
+    function Progress() {
+        this.bars = [];
+    }
+    Progress.prototype.onInit = function () {
+        this.animate = this.animate !== false;
+        this.max = typeof this.max === 'number' ? this.max : progressConfig.max;
+    };
+    Object.defineProperty(Progress.prototype, "max", {
+        get: function () {
+            return this._max;
+        },
+        set: function (v) {
+            this._max = v;
+            this.bars.forEach(function (bar) {
+                bar.recalculatePercentage();
+            });
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Progress.prototype.addBar = function (bar) {
+        if (!this.animate) {
+            bar.transition = 'none';
+        }
+        this.bars.push(bar);
+    };
+    Progress.prototype.removeBar = function (bar) {
+        this.bars.splice(this.bars.indexOf(bar), 1);
+    };
+    Progress = __decorate([
+        angular2_1.Directive({
+            selector: 'bs-progress, [progress]',
+            properties: ['animate', 'max'],
+            host: {
+                'class': 'progress'
+            },
+            lifecycle: [angular2_1.LifecycleEvent.onInit]
+        })
+    ], Progress);
+    return Progress;
+})();
+exports.Progress = Progress;
+// todo: number pipe
+// todo: use query from progress?
+var Bar = (function () {
+    function Bar(progress) {
+        this.progress = progress;
+        this.percent = 0;
+    }
+    Bar.prototype.onInit = function () {
+        this.progress.addBar(this);
+    };
+    Bar.prototype.onDestroy = function () {
+        this.progress.removeBar(this);
+    };
+    Object.defineProperty(Bar.prototype, "value", {
+        get: function () {
+            return this._value;
+        },
+        set: function (v) {
+            if (!v && v !== 0) {
+                return;
+            }
+            this._value = v;
+            this.recalculatePercentage();
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Bar.prototype.recalculatePercentage = function () {
+        this.percent = +(100 * this.value / this.progress.max).toFixed(2);
+        var totalPercentage = this.progress.bars.reduce(function (total, bar) {
+            return total + bar.percent;
+        }, 0);
+        if (totalPercentage > 100) {
+            this.percent -= totalPercentage - 100;
+        }
+    };
+    Bar = __decorate([
+        angular2_1.Component({
+            selector: 'bar, [bar]',
+            properties: [
+                'type', 'value'
+            ],
+            lifecycle: [angular2_1.LifecycleEvent.onInit, angular2_1.LifecycleEvent.onDestroy]
+        }),
+        angular2_1.View({
+            template: "\n  <div class=\"progress-bar\"\n    style=\"min-width: 0;\"\n    role=\"progressbar\"\n    [ng-class]=\"type && 'progress-bar-' + type\"\n    [ng-style]=\"{width: (percent < 100 ? percent : 100) + '%', transition: transition}\"\n    aria-valuemin=\"0\"\n    [attr.aria-valuenow]=\"value\"\n    [attr.aria-valuetext]=\"percent.toFixed(0) + '%'\"\n    [attr.aria-valuemax]=\"max\"\n    ><ng-content></ng-content></div>\n",
+            directives: [angular2_1.NgStyle, angular2_1.NgClass],
+            encapsulation: angular2_1.ViewEncapsulation.NONE
+        }),
+        __param(0, angular2_1.Host())
+    ], Bar);
+    return Bar;
+})();
+exports.Bar = Bar;
+var Progressbar = (function () {
+    function Progressbar() {
+    }
+    Progressbar = __decorate([
+        angular2_1.Component({
+            selector: 'progressbar, [progressbar]',
+            properties: ['animate', 'max', 'type', 'value']
+        }),
+        angular2_1.View({
+            template: "\n    <div progress [animate]=\"animate\" [max]=\"max\">\n      <bar [type]=\"type\" [value]=\"value\">\n          <ng-content></ng-content>\n      </bar>\n    </div>\n  ",
+            directives: [Progress, Bar]
+        })
+    ], Progressbar);
+    return Progressbar;
+})();
+exports.Progressbar = Progressbar;
+exports.progressbar = [Progress, Bar, Progressbar];