ng2-select - npm Package Compare versions

Comparing version 0.44.0 to 1.0.1-beta.0

components/select/readme.md

 ### Usage
 ```typescript
-import {select} from 'ng2-select';
+import {SELECT_DIRECTIVES} from 'ng2-select/ng2-select';
 ```
@@ -5,0 +5,0 @@

components/select/select-pipes.js

 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 c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
@@ -12,3 +10,3 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
-var angular2_1 = require('angular2/angular2');
+var core_1 = require('angular2/core');
 var HightlightPipe = (function () {
@@ -30,3 +28,3 @@ function HightlightPipe() {
     HightlightPipe = __decorate([
-        angular2_1.Pipe({
+        core_1.Pipe({
             name: 'hightlight'
@@ -33,0 +31,0 @@ }),

components/select/select-pipes.ts

@@ -1,2 +0,2 @@
-import {Pipe} from 'angular2/angular2';
+import {Pipe} from 'angular2/core';
 
@@ -3,0 +3,0 @@ @Pipe({

components/select/select.d.ts

@@ -1,7 +0,16 @@
-import { OnInit, OnDestroy, ElementRef } from 'angular2/angular2';
+import { EventEmitter, ElementRef } from 'angular2/core';
 import { SelectItem } from './select-item';
 import { IOptionsBehavior } from './select-interfaces';
-export declare class Select implements OnInit, OnDestroy {
+export declare class Select {
     element: ElementRef;
+    allowClear: boolean;
+    placeholder: string;
+    initData: Array<any>;
     multiple: boolean;
+    items: Array<any>;
+    disabled: boolean;
+    data: EventEmitter<any>;
+    selected: EventEmitter<any>;
+    removed: EventEmitter<any>;
+    typed: EventEmitter<any>;
     options: Array<SelectItem>;
@@ -11,10 +20,2 @@ itemObjects: Array<SelectItem>;
     activeOption: SelectItem;
-    private data;
-    private selected;
-    private removed;
-    private typed;
-    private allowClear;
-    private placeholder;
-    private initData;
-    private _items;
     private offSideClickHandler;
@@ -24,4 +25,5 @@ private inputMode;
     private behavior;
+    private inputValue;
+    private _items;
     private _disabled;
-    private inputValue;
     constructor(element: ElementRef);
@@ -32,6 +34,4 @@ private focusToInput(value?);
     private open();
-    private items;
-    disabled: boolean;
-    onInit(): void;
-    onDestroy(): void;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
     private getOffSideClickHandler(context);
@@ -47,30 +47,27 @@ remove(item: SelectItem): void;
 }
-export declare module Select {
-    class Behavior {
-        actor: Select;
-        optionsMap: Map<string, number>;
-        constructor(actor: Select);
-        private getActiveIndex(optionsMap?);
-        fillOptionsMap(): void;
-        ensureHighlightVisible(optionsMap?: Map<string, number>): void;
-    }
-    class GenericBehavior extends Behavior implements IOptionsBehavior {
-        actor: Select;
-        constructor(actor: Select);
-        first(): void;
-        last(): void;
-        prev(): void;
-        next(): void;
-        filter(query: RegExp): void;
-    }
-    class ChildrenBehavior extends Behavior implements IOptionsBehavior {
-        actor: Select;
-        constructor(actor: Select);
-        first(): void;
-        last(): void;
-        prev(): void;
-        next(): void;
-        filter(query: RegExp): void;
-    }
+export declare class Behavior {
+    actor: Select;
+    optionsMap: Map<string, number>;
+    constructor(actor: Select);
+    private getActiveIndex(optionsMap?);
+    fillOptionsMap(): void;
+    ensureHighlightVisible(optionsMap?: Map<string, number>): void;
 }
-export declare const select: Array<any>;
+export declare class GenericBehavior extends Behavior implements IOptionsBehavior {
+    actor: Select;
+    constructor(actor: Select);
+    first(): void;
+    last(): void;
+    prev(): void;
+    next(): void;
+    filter(query: RegExp): void;
+}
+export declare class ChildrenBehavior extends Behavior implements IOptionsBehavior {
+    actor: Select;
+    constructor(actor: Select);
+    first(): void;
+    last(): void;
+    prev(): void;
+    next(): void;
+    filter(query: RegExp): void;
+}

components/select/select.js

@@ -7,8 +7,6 @@ var __extends = (this && this.__extends) || function (d, b) {
 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 c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
@@ -18,26 +16,44 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 };
-var angular2_1 = require('angular2/angular2');
+var core_1 = require('angular2/core');
 var select_item_1 = require('./select-item');
 var select_pipes_1 = require('./select-pipes');
-var optionsTemplate = "\n    <ul *ng-if=\"optionsOpened && options && options.length > 0 && !itemObjects[0].hasChildren()\"\n        class=\"ui-select-choices ui-select-choices-content ui-select-dropdown dropdown-menu\">\n      <li class=\"ui-select-choices-group\">\n        <div *ng-for=\"#o of options\"\n             class=\"ui-select-choices-row\"\n             (mouseenter)=\"selectActive(o)\"\n             (click)=\"selectMatch(o, $event)\"\n             [ng-class]=\"{'active': isActive(o)}\">\n          <a href=\"javascript:void(0)\" class=\"ui-select-choices-row-inner\">\n            <div [inner-html]=\"o.text | hightlight:inputValue\"></div>\n          </a>\n        </div>\n      </li>\n    </ul>\n\n    <ul *ng-if=\"optionsOpened && options && options.length > 0 && itemObjects[0].hasChildren()\"\n        class=\"ui-select-choices ui-select-choices-content ui-select-dropdown dropdown-menu\">\n      <li *ng-for=\"#c of options; #index=index\" class=\"ui-select-choices-group\">\n        <div class=\"divider\" *ng-if=\"index > 0\"></div>\n        <div class=\"ui-select-choices-group-label dropdown-header\">{{c.text}}</div>\n\n        <div *ng-for=\"#o of c.children\"\n             class=\"ui-select-choices-row\"\n             (mouseenter)=\"selectActive(o)\"\n             (click)=\"selectMatch(o, $event)\"\n             [ng-class]=\"{'active': isActive(o)}\">\n          <a href=\"javascript:void(0)\" class=\"ui-select-choices-row-inner\">\n            <div [inner-html]=\"o.text | hightlight:inputValue\"></div>\n          </a>\n        </div>\n      </li>\n    </ul>\n";
+var optionsTemplate = "\n    <ul *ngIf=\"optionsOpened && options && options.length > 0 && !itemObjects[0].hasChildren()\"\n        class=\"ui-select-choices ui-select-choices-content ui-select-dropdown dropdown-menu\">\n      <li class=\"ui-select-choices-group\">\n        <div *ngFor=\"#o of options\"\n             class=\"ui-select-choices-row\"\n             [class.active]=\"isActive(o)\"\n             (mouseenter)=\"selectActive(o)\"\n             (click)=\"selectMatch(o, $event)\">\n          <a href=\"javascript:void(0)\" class=\"ui-select-choices-row-inner\">\n            <div [innerHtml]=\"o.text | hightlight:inputValue\"></div>\n          </a>\n        </div>\n      </li>\n    </ul>\n\n    <ul *ngIf=\"optionsOpened && options && options.length > 0 && itemObjects[0].hasChildren()\"\n        class=\"ui-select-choices ui-select-choices-content ui-select-dropdown dropdown-menu\">\n      <li *ngFor=\"#c of options; #index=index\" class=\"ui-select-choices-group\">\n        <div class=\"divider\" *ngIf=\"index > 0\"></div>\n        <div class=\"ui-select-choices-group-label dropdown-header\">{{c.text}}</div>\n\n        <div *ngFor=\"#o of c.children\"\n             class=\"ui-select-choices-row\"\n             [class.active]=\"isActive(o)\"\n             (mouseenter)=\"selectActive(o)\"\n             (click)=\"selectMatch(o, $event)\">\n             [ngClass]=\"{'active': isActive(o)}\">\n          <a href=\"javascript:void(0)\" class=\"ui-select-choices-row-inner\">\n            <div [innerHtml]=\"o.text | hightlight:inputValue\"></div>\n          </a>\n        </div>\n      </li>\n    </ul>\n";
 var Select = (function () {
     function Select(element) {
         this.element = element;
+        this.allowClear = false;
+        this.placeholder = '';
+        this.initData = [];
         this.multiple = false;
+        this.data = new core_1.EventEmitter();
+        this.selected = new core_1.EventEmitter();
+        this.removed = new core_1.EventEmitter();
+        this.typed = new core_1.EventEmitter();
         this.options = [];
         this.itemObjects = [];
         this.active = [];
-        this.data = new angular2_1.EventEmitter();
-        this.selected = new angular2_1.EventEmitter();
-        this.removed = new angular2_1.EventEmitter();
-        this.typed = new angular2_1.EventEmitter();
-        this.allowClear = false;
-        this.placeholder = '';
-        this.initData = [];
-        this._items = [];
         this.inputMode = false;
         this.optionsOpened = false;
+        this.inputValue = '';
+        this._items = [];
         this._disabled = false;
-        this.inputValue = '';
     }
+    Object.defineProperty(Select.prototype, "items", {
+        set: function (value) {
+            this._items = value;
+            this.itemObjects = this._items.map(function (item) { return new select_item_1.SelectItem(item); });
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(Select.prototype, "disabled", {
+        set: function (value) {
+            this._disabled = value;
+            if (this._disabled === true) {
+                this.hideOptions();
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     Select.prototype.focusToInput = function (value) {
@@ -53,3 +69,3 @@ var _this = this;
     Select.prototype.matchClick = function (e) {
-        if (this.disabled === true) {
+        if (this._disabled === true) {
             return;
@@ -64,3 +80,3 @@ }
     Select.prototype.mainClick = function (e) {
-        if (this.inputMode === true || this.disabled === true) {
+        if (this.inputMode === true || this._disabled === true) {
             return;
@@ -102,29 +118,5 @@ }
     };
-    Object.defineProperty(Select.prototype, "items", {
-        get: function () {
-            return this._items;
-        },
-        set: function (value) {
-            this._items = value;
-            this.itemObjects = this._items.map(function (item) { return new select_item_1.SelectItem(item); });
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(Select.prototype, "disabled", {
-        get: function () {
-            return this._disabled;
-        },
-        set: function (value) {
-            this._disabled = value;
-            if (this.disabled === true) {
-                this.hideOptions();
-            }
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Select.prototype.onInit = function () {
+    Select.prototype.ngOnInit = function () {
         this.behavior = this.itemObjects[0].hasChildren() ?
-            new Select.ChildrenBehavior(this) : new Select.GenericBehavior(this);
+            new ChildrenBehavior(this) : new GenericBehavior(this);
         this.offSideClickHandler = this.getOffSideClickHandler(this);
@@ -134,6 +126,6 @@ document.addEventListener('click', this.offSideClickHandler);
             this.active = this.initData.map(function (d) { return new select_item_1.SelectItem(d); });
-            this.data.next(this.active);
+            this.data.emit(this.active);
         }
     };
-    Select.prototype.onDestroy = function () {
+    Select.prototype.ngOnDestroy = function () {
         document.removeEventListener('click', this.offSideClickHandler);
@@ -160,3 +152,3 @@ this.offSideClickHandler = null;
     Select.prototype.remove = function (item) {
-        if (this.disabled === true) {
+        if (this._disabled === true) {
             return;
@@ -217,3 +209,3 @@ }
         }
-        if (!isUpMode && e.keyCode === 37 && this.items.length > 0) {
+        if (!isUpMode && e.keyCode === 37 && this._items.length > 0) {
             this.behavior.first();
@@ -223,3 +215,3 @@ e.preventDefault();
         }
-        if (!isUpMode && e.keyCode === 39 && this.items.length > 0) {
+        if (!isUpMode && e.keyCode === 39 && this._items.length > 0) {
             this.behavior.last();
@@ -285,20 +277,51 @@ e.preventDefault();
     };
+    __decorate([
+        core_1.Input(), 
+        __metadata('design:type', Boolean)
+    ], Select.prototype, "allowClear", void 0);
+    __decorate([
+        core_1.Input(), 
+        __metadata('design:type', String)
+    ], Select.prototype, "placeholder", void 0);
+    __decorate([
+        core_1.Input(), 
+        __metadata('design:type', Array)
+    ], Select.prototype, "initData", void 0);
+    __decorate([
+        core_1.Input(), 
+        __metadata('design:type', Boolean)
+    ], Select.prototype, "multiple", void 0);
+    __decorate([
+        core_1.Input(), 
+        __metadata('design:type', Array), 
+        __metadata('design:paramtypes', [Array])
+    ], Select.prototype, "items", null);
+    __decorate([
+        core_1.Input(), 
+        __metadata('design:type', Boolean), 
+        __metadata('design:paramtypes', [Boolean])
+    ], Select.prototype, "disabled", null);
+    __decorate([
+        core_1.Output(), 
+        __metadata('design:type', core_1.EventEmitter)
+    ], Select.prototype, "data", void 0);
+    __decorate([
+        core_1.Output(), 
+        __metadata('design:type', core_1.EventEmitter)
+    ], Select.prototype, "selected", void 0);
+    __decorate([
+        core_1.Output(), 
+        __metadata('design:type', core_1.EventEmitter)
+    ], Select.prototype, "removed", void 0);
+    __decorate([
+        core_1.Output(), 
+        __metadata('design:type', core_1.EventEmitter)
+    ], Select.prototype, "typed", void 0);
     Select = __decorate([
-        angular2_1.Component({
-            selector: 'ng2-select',
-            properties: [
-                'allowClear',
-                'placeholder',
-                'initData:data',
-                'items',
-                'disabled',
-                'multiple'],
-            events: ['selected', 'removed', 'typed', 'data']
-        }),
-        angular2_1.View({
-            template: "\n  <div tabindex=\"0\"\n     *ng-if=\"multiple === false\"\n     (keyup)=\"mainClick($event)\"\n     class=\"ui-select-container ui-select-bootstrap dropdown open\">\n    <div [ng-class]=\"{'ui-disabled': disabled}\"></div>\n    <div class=\"ui-select-match\"\n         *ng-if=\"!inputMode\">\n      <span tabindex=\"-1\"\n          class=\"btn btn-default btn-secondary form-control ui-select-toggle\"\n          (^click)=\"matchClick()\"\n          style=\"outline: 0;\">\n        <span *ng-if=\"active.length <= 0\" class=\"ui-select-placeholder text-muted\">{{placeholder}}</span>\n        <span *ng-if=\"active.length > 0\" class=\"ui-select-match-text pull-left\"\n              [ng-class]=\"{'ui-select-allow-clear': allowClear && active.length > 0}\">{{active[0].text}}</span>\n        <i class=\"dropdown-toggle pull-right\"></i>\n        <i class=\"caret pull-right\"></i>\n        <a *ng-if=\"allowClear && active.length>0\" style=\"margin-right: 10px; padding: 0;\"\n          (click)=\"remove(activeOption)\" class=\"btn btn-xs btn-link pull-right\">\n          <i class=\"glyphicon glyphicon-remove\"></i>\n        </a>\n      </span>\n    </div>\n    <input type=\"text\" autocomplete=\"false\" tabindex=\"-1\"\n           (keydown)=\"inputEvent($event)\"\n           (keyup)=\"inputEvent($event, true)\"\n           [disabled]=\"disabled\"\n           class=\"form-control ui-select-search\"\n           *ng-if=\"inputMode\"\n           placeholder=\"{{active.length <= 0 ? placeholder : ''}}\">\n    " + optionsTemplate + "\n</div>\n\n  <div tabindex=\"0\"\n     *ng-if=\"multiple === true\"\n     (keyup)=\"mainClick($event)\"\n     (focus)=\"focusToInput('')\"\n     class=\"ui-select-container ui-select-multiple ui-select-bootstrap dropdown form-control open\">\n    <div [ng-class]=\"{'ui-disabled': disabled}\"></div>\n    <span class=\"ui-select-match\">\n        <span *ng-for=\"#a of active\">\n            <span class=\"ui-select-match-item btn btn-default btn-secondary btn-xs\"\n                  tabindex=\"-1\"\n                  type=\"button\"\n                  [ng-class]=\"{'btn-default': true}\">\n               <a class=\"close ui-select-match-close\"\n                  (click)=\"remove(a)\">&nbsp;&times;</a>\n               <span>{{a.text}}</span>\n           </span>\n        </span>\n    </span>\n    <input type=\"text\"\n           (keydown)=\"inputEvent($event)\"\n           (keyup)=\"inputEvent($event, true)\"\n           (click)=\"matchClick($event)\"\n           [disabled]=\"disabled\"\n           autocomplete=\"false\"\n           autocorrect=\"off\"\n           autocapitalize=\"off\"\n           spellcheck=\"false\"\n           class=\"ui-select-search input-xs\"\n           placeholder=\"{{active.length <= 0 ? placeholder : ''}}\"\n           role=\"combobox\">\n    " + optionsTemplate + "\n</div>\n  ",
-            directives: [angular2_1.CORE_DIRECTIVES, angular2_1.FORM_DIRECTIVES],
-            pipes: [select_pipes_1.HightlightPipe]
+        core_1.Component({
+            selector: 'ng-select',
+            pipes: [select_pipes_1.HightlightPipe],
+            template: "\n  <div tabindex=\"0\"\n     *ngIf=\"multiple === false\"\n     (keyup)=\"mainClick($event)\"\n     class=\"ui-select-container ui-select-bootstrap dropdown open\">\n    <div [ngClass]=\"{'ui-disabled': disabled}\"></div>\n    <div class=\"ui-select-match\"\n         *ngIf=\"!inputMode\">\n      <span tabindex=\"-1\"\n          class=\"btn btn-default btn-secondary form-control ui-select-toggle\"\n          (^click)=\"matchClick()\"\n          style=\"outline: 0;\">\n        <span *ngIf=\"active.length <= 0\" class=\"ui-select-placeholder text-muted\">{{placeholder}}</span>\n        <span *ngIf=\"active.length > 0\" class=\"ui-select-match-text pull-left\"\n              [ngClass]=\"{'ui-select-allow-clear': allowClear && active.length > 0}\">{{active[0].text}}</span>\n        <i class=\"dropdown-toggle pull-right\"></i>\n        <i class=\"caret pull-right\"></i>\n        <a *ngIf=\"allowClear && active.length>0\" style=\"margin-right: 10px; padding: 0;\"\n          (click)=\"remove(activeOption)\" class=\"btn btn-xs btn-link pull-right\">\n          <i class=\"glyphicon glyphicon-remove\"></i>\n        </a>\n      </span>\n    </div>\n    <input type=\"text\" autocomplete=\"false\" tabindex=\"-1\"\n           (keydown)=\"inputEvent($event)\"\n           (keyup)=\"inputEvent($event, true)\"\n           [disabled]=\"disabled\"\n           class=\"form-control ui-select-search\"\n           *ngIf=\"inputMode\"\n           placeholder=\"{{active.length <= 0 ? placeholder : ''}}\">\n      " + optionsTemplate + "\n  </div>\n\n  <div tabindex=\"0\"\n     *ngIf=\"multiple === true\"\n     (keyup)=\"mainClick($event)\"\n     (focus)=\"focusToInput('')\"\n     class=\"ui-select-container ui-select-multiple ui-select-bootstrap dropdown form-control open\">\n    <div [ngClass]=\"{'ui-disabled': disabled}\"></div>\n    <span class=\"ui-select-match\">\n        <span *ngFor=\"#a of active\">\n            <span class=\"ui-select-match-item btn btn-default btn-secondary btn-xs\"\n                  tabindex=\"-1\"\n                  type=\"button\"\n                  [ngClass]=\"{'btn-default': true}\">\n               <a class=\"close ui-select-match-close\"\n                  (click)=\"remove(a)\">&nbsp;&times;</a>\n               <span>{{a.text}}</span>\n           </span>\n        </span>\n    </span>\n    <input type=\"text\"\n           (keydown)=\"inputEvent($event)\"\n           (keyup)=\"inputEvent($event, true)\"\n           (click)=\"matchClick($event)\"\n           [disabled]=\"disabled\"\n           autocomplete=\"false\"\n           autocorrect=\"off\"\n           autocapitalize=\"off\"\n           spellcheck=\"false\"\n           class=\"ui-select-search input-xs\"\n           placeholder=\"{{active.length <= 0 ? placeholder : ''}}\"\n           role=\"combobox\">\n    " + optionsTemplate + "\n  </div>\n  "
         }), 
-        __metadata('design:paramtypes', [angular2_1.ElementRef])
+        __metadata('design:paramtypes', [core_1.ElementRef])
     ], Select);
@@ -308,179 +331,175 @@ return Select;
 exports.Select = Select;
-var Select;
-(function (Select) {
-    var Behavior = (function () {
-        function Behavior(actor) {
-            this.actor = actor;
-            this.optionsMap = new Map();
+var Behavior = (function () {
+    function Behavior(actor) {
+        this.actor = actor;
+        this.optionsMap = new Map();
+    }
+    Behavior.prototype.getActiveIndex = function (optionsMap) {
+        if (optionsMap === void 0) { optionsMap = null; }
+        var ai = this.actor.options.indexOf(this.actor.activeOption);
+        if (ai < 0 && optionsMap !== null) {
+            ai = optionsMap.get(this.actor.activeOption.id);
         }
-        Behavior.prototype.getActiveIndex = function (optionsMap) {
-            if (optionsMap === void 0) { optionsMap = null; }
-            var ai = this.actor.options.indexOf(this.actor.activeOption);
-            if (ai < 0 && optionsMap !== null) {
-                ai = optionsMap.get(this.actor.activeOption.id);
-            }
-            return ai;
-        };
-        Behavior.prototype.fillOptionsMap = function () {
-            var _this = this;
-            this.optionsMap.clear();
-            var startPos = 0;
-            this.actor.itemObjects.map(function (i) {
-                startPos = i.fillChildrenHash(_this.optionsMap, startPos);
-            });
-        };
-        Behavior.prototype.ensureHighlightVisible = function (optionsMap) {
-            if (optionsMap === void 0) { optionsMap = null; }
-            var container = this.actor.element.nativeElement.querySelector('.ui-select-choices-content');
-            if (!container) {
-                return;
-            }
-            var choices = container.querySelectorAll('.ui-select-choices-row');
-            if (choices.length < 1) {
-                return;
-            }
-            var activeIndex = this.getActiveIndex(optionsMap);
-            if (activeIndex < 0) {
-                return;
-            }
-            var highlighted = choices[activeIndex];
-            if (!highlighted) {
-                return;
-            }
-            var posY = highlighted.offsetTop + highlighted.clientHeight - container.scrollTop;
-            var height = container.offsetHeight;
-            if (posY > height) {
-                container.scrollTop += posY - height;
-            }
-            else if (posY < highlighted.clientHeight) {
-                container.scrollTop -= highlighted.clientHeight - posY;
-            }
-        };
-        return Behavior;
-    })();
-    Select.Behavior = Behavior;
-    var GenericBehavior = (function (_super) {
-        __extends(GenericBehavior, _super);
-        function GenericBehavior(actor) {
-            _super.call(this, actor);
-            this.actor = actor;
+        return ai;
+    };
+    Behavior.prototype.fillOptionsMap = function () {
+        var _this = this;
+        this.optionsMap.clear();
+        var startPos = 0;
+        this.actor.itemObjects.map(function (i) {
+            startPos = i.fillChildrenHash(_this.optionsMap, startPos);
+        });
+    };
+    Behavior.prototype.ensureHighlightVisible = function (optionsMap) {
+        if (optionsMap === void 0) { optionsMap = null; }
+        var container = this.actor.element.nativeElement.querySelector('.ui-select-choices-content');
+        if (!container) {
+            return;
         }
-        GenericBehavior.prototype.first = function () {
+        var choices = container.querySelectorAll('.ui-select-choices-row');
+        if (choices.length < 1) {
+            return;
+        }
+        var activeIndex = this.getActiveIndex(optionsMap);
+        if (activeIndex < 0) {
+            return;
+        }
+        var highlighted = choices[activeIndex];
+        if (!highlighted) {
+            return;
+        }
+        var posY = highlighted.offsetTop + highlighted.clientHeight - container.scrollTop;
+        var height = container.offsetHeight;
+        if (posY > height) {
+            container.scrollTop += posY - height;
+        }
+        else if (posY < highlighted.clientHeight) {
+            container.scrollTop -= highlighted.clientHeight - posY;
+        }
+    };
+    return Behavior;
+})();
+exports.Behavior = Behavior;
+var GenericBehavior = (function (_super) {
+    __extends(GenericBehavior, _super);
+    function GenericBehavior(actor) {
+        _super.call(this, actor);
+        this.actor = actor;
+    }
+    GenericBehavior.prototype.first = function () {
+        this.actor.activeOption = this.actor.options[0];
+        _super.prototype.ensureHighlightVisible.call(this);
+    };
+    GenericBehavior.prototype.last = function () {
+        this.actor.activeOption = this.actor.options[this.actor.options.length - 1];
+        _super.prototype.ensureHighlightVisible.call(this);
+    };
+    GenericBehavior.prototype.prev = function () {
+        var index = this.actor.options.indexOf(this.actor.activeOption);
+        this.actor.activeOption = this.actor
+            .options[index - 1 < 0 ? this.actor.options.length - 1 : index - 1];
+        _super.prototype.ensureHighlightVisible.call(this);
+    };
+    GenericBehavior.prototype.next = function () {
+        var index = this.actor.options.indexOf(this.actor.activeOption);
+        this.actor.activeOption = this.actor
+            .options[index + 1 > this.actor.options.length - 1 ? 0 : index + 1];
+        _super.prototype.ensureHighlightVisible.call(this);
+    };
+    GenericBehavior.prototype.filter = function (query) {
+        var _this = this;
+        var options = this.actor.itemObjects
+            .filter(function (option) { return query.test(option.text) &&
+            (_this.actor.multiple === false ||
+                (_this.actor.multiple === true &&
+                    _this.actor.active.indexOf(option) < 0)); });
+        this.actor.options = options;
+        if (this.actor.options.length > 0) {
             this.actor.activeOption = this.actor.options[0];
             _super.prototype.ensureHighlightVisible.call(this);
-        };
-        GenericBehavior.prototype.last = function () {
-            this.actor.activeOption = this.actor.options[this.actor.options.length - 1];
-            _super.prototype.ensureHighlightVisible.call(this);
-        };
-        GenericBehavior.prototype.prev = function () {
-            var index = this.actor.options.indexOf(this.actor.activeOption);
-            this.actor.activeOption = this.actor
-                .options[index - 1 < 0 ? this.actor.options.length - 1 : index - 1];
-            _super.prototype.ensureHighlightVisible.call(this);
-        };
-        GenericBehavior.prototype.next = function () {
-            var index = this.actor.options.indexOf(this.actor.activeOption);
-            this.actor.activeOption = this.actor
-                .options[index + 1 > this.actor.options.length - 1 ? 0 : index + 1];
-            _super.prototype.ensureHighlightVisible.call(this);
-        };
-        GenericBehavior.prototype.filter = function (query) {
-            var _this = this;
-            var options = this.actor.itemObjects
-                .filter(function (option) { return query.test(option.text) &&
-                (_this.actor.multiple === false ||
-                    (_this.actor.multiple === true &&
-                        _this.actor.active.indexOf(option) < 0)); });
-            this.actor.options = options;
-            if (this.actor.options.length > 0) {
-                this.actor.activeOption = this.actor.options[0];
-                _super.prototype.ensureHighlightVisible.call(this);
+        }
+    };
+    return GenericBehavior;
+})(Behavior);
+exports.GenericBehavior = GenericBehavior;
+var ChildrenBehavior = (function (_super) {
+    __extends(ChildrenBehavior, _super);
+    function ChildrenBehavior(actor) {
+        _super.call(this, actor);
+        this.actor = actor;
+    }
+    ChildrenBehavior.prototype.first = function () {
+        this.actor.activeOption = this.actor.options[0].children[0];
+        this.fillOptionsMap();
+        this.ensureHighlightVisible(this.optionsMap);
+    };
+    ChildrenBehavior.prototype.last = function () {
+        this.actor.activeOption =
+            this.actor
+                .options[this.actor.options.length - 1]
+                .children[this.actor.options[this.actor.options.length - 1].children.length - 1];
+        this.fillOptionsMap();
+        this.ensureHighlightVisible(this.optionsMap);
+    };
+    ChildrenBehavior.prototype.prev = function () {
+        var _this = this;
+        var indexParent = this.actor.options
+            .findIndex(function (a) { return _this.actor.activeOption.parent && _this.actor.activeOption.parent.id === a.id; });
+        var index = this.actor.options[indexParent].children
+            .findIndex(function (a) { return _this.actor.activeOption && _this.actor.activeOption.id === a.id; });
+        this.actor.activeOption = this.actor.options[indexParent].children[index - 1];
+        if (!this.actor.activeOption) {
+            if (this.actor.options[indexParent - 1]) {
+                this.actor.activeOption = this.actor
+                    .options[indexParent - 1]
+                    .children[this.actor.options[indexParent - 1].children.length - 1];
             }
-        };
-        return GenericBehavior;
-    })(Behavior);
-    Select.GenericBehavior = GenericBehavior;
-    var ChildrenBehavior = (function (_super) {
-        __extends(ChildrenBehavior, _super);
-        function ChildrenBehavior(actor) {
-            _super.call(this, actor);
-            this.actor = actor;
         }
-        ChildrenBehavior.prototype.first = function () {
-            this.actor.activeOption = this.actor.options[0].children[0];
-            this.fillOptionsMap();
-            this.ensureHighlightVisible(this.optionsMap);
-        };
-        ChildrenBehavior.prototype.last = function () {
-            this.actor.activeOption =
-                this.actor
-                    .options[this.actor.options.length - 1]
-                    .children[this.actor.options[this.actor.options.length - 1].children.length - 1];
-            this.fillOptionsMap();
-            this.ensureHighlightVisible(this.optionsMap);
-        };
-        ChildrenBehavior.prototype.prev = function () {
-            var _this = this;
-            var indexParent = this.actor.options
-                .findIndex(function (a) { return _this.actor.activeOption.parent && _this.actor.activeOption.parent.id === a.id; });
-            var index = this.actor.options[indexParent].children
-                .findIndex(function (a) { return _this.actor.activeOption && _this.actor.activeOption.id === a.id; });
-            this.actor.activeOption = this.actor.options[indexParent].children[index - 1];
-            if (!this.actor.activeOption) {
-                if (this.actor.options[indexParent - 1]) {
-                    this.actor.activeOption = this.actor
-                        .options[indexParent - 1]
-                        .children[this.actor.options[indexParent - 1].children.length - 1];
-                }
+        if (!this.actor.activeOption) {
+            this.last();
+        }
+        this.fillOptionsMap();
+        this.ensureHighlightVisible(this.optionsMap);
+    };
+    ChildrenBehavior.prototype.next = function () {
+        var _this = this;
+        var indexParent = this.actor.options
+            .findIndex(function (a) { return _this.actor.activeOption.parent && _this.actor.activeOption.parent.id === a.id; });
+        var index = this.actor.options[indexParent].children
+            .findIndex(function (a) { return _this.actor.activeOption && _this.actor.activeOption.id === a.id; });
+        this.actor.activeOption = this.actor.options[indexParent].children[index + 1];
+        if (!this.actor.activeOption) {
+            if (this.actor.options[indexParent + 1]) {
+                this.actor.activeOption = this.actor.options[indexParent + 1].children[0];
             }
-            if (!this.actor.activeOption) {
-                this.last();
+        }
+        if (!this.actor.activeOption) {
+            this.first();
+        }
+        this.fillOptionsMap();
+        this.ensureHighlightVisible(this.optionsMap);
+    };
+    ChildrenBehavior.prototype.filter = function (query) {
+        var options = [];
+        var optionsMap = new Map();
+        var startPos = 0;
+        for (var _i = 0, _a = this.actor.itemObjects; _i < _a.length; _i++) {
+            var si = _a[_i];
+            var children = si.children.filter(function (option) { return query.test(option.text); });
+            startPos = si.fillChildrenHash(optionsMap, startPos);
+            if (children.length > 0) {
+                var newSi = si.getSimilar();
+                newSi.children = children;
+                options.push(newSi);
             }
-            this.fillOptionsMap();
-            this.ensureHighlightVisible(this.optionsMap);
-        };
-        ChildrenBehavior.prototype.next = function () {
-            var _this = this;
-            var indexParent = this.actor.options
-                .findIndex(function (a) { return _this.actor.activeOption.parent && _this.actor.activeOption.parent.id === a.id; });
-            var index = this.actor.options[indexParent].children
-                .findIndex(function (a) { return _this.actor.activeOption && _this.actor.activeOption.id === a.id; });
-            this.actor.activeOption = this.actor.options[indexParent].children[index + 1];
-            if (!this.actor.activeOption) {
-                if (this.actor.options[indexParent + 1]) {
-                    this.actor.activeOption = this.actor.options[indexParent + 1].children[0];
-                }
-            }
-            if (!this.actor.activeOption) {
-                this.first();
-            }
-            this.fillOptionsMap();
-            this.ensureHighlightVisible(this.optionsMap);
-        };
-        ChildrenBehavior.prototype.filter = function (query) {
-            var options = [];
-            var optionsMap = new Map();
-            var startPos = 0;
-            for (var _i = 0, _a = this.actor.itemObjects; _i < _a.length; _i++) {
-                var si = _a[_i];
-                var children = si.children.filter(function (option) { return query.test(option.text); });
-                startPos = si.fillChildrenHash(optionsMap, startPos);
-                if (children.length > 0) {
-                    var newSi = si.getSimilar();
-                    newSi.children = children;
-                    options.push(newSi);
-                }
-            }
-            this.actor.options = options;
-            if (this.actor.options.length > 0) {
-                this.actor.activeOption = this.actor.options[0].children[0];
-                _super.prototype.ensureHighlightVisible.call(this, optionsMap);
-            }
-        };
-        return ChildrenBehavior;
-    })(Behavior);
-    Select.ChildrenBehavior = ChildrenBehavior;
-})(Select = exports.Select || (exports.Select = {}));
-exports.select = [Select];
+        }
+        this.actor.options = options;
+        if (this.actor.options.length > 0) {
+            this.actor.activeOption = this.actor.options[0].children[0];
+            _super.prototype.ensureHighlightVisible.call(this, optionsMap);
+        }
+    };
+    return ChildrenBehavior;
+})(Behavior);
+exports.ChildrenBehavior = ChildrenBehavior;
 //# sourceMappingURL=select.js.map

components/select/select.ts

 import {
-  Component, View, OnInit, OnDestroy,
-  Directive, ViewEncapsulation, Self,
-  EventEmitter, ElementRef, ComponentRef,
-  Pipe, CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgStyle,
-  bind, forwardRef, ResolvedBinding, Injector
-} from 'angular2/angular2';
-
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  ElementRef
+} from 'angular2/core';
+import {
+  CORE_DIRECTIVES,
+  FORM_DIRECTIVES,
+  NgClass,
+  NgStyle
+} from 'angular2/common';
 import {SelectItem} from './select-item';
@@ -14,12 +19,12 @@ import {HightlightPipe} from './select-pipes';
 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"
+             [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>
+            <div [innerHtml]="o.text | hightlight:inputValue"></div>
           </a>
@@ -30,15 +35,16 @@ </div>
 
-    <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)">
+             [ngClass]="{'active': isActive(o)}">
           <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>
@@ -51,21 +57,12 @@ </div>
 @Component({
-  selector: 'ng2-select',
-  properties: [
-    'allowClear',
-    'placeholder',
-    'initData:data',
-    'items',
-    'disabled',
-    'multiple'],
-  events: ['selected', 'removed', 'typed', 'data']
-})
-@View({
+  selector: 'ng-select',
+  pipes: [HightlightPipe],
   template: `
   <div tabindex="0"
-     *ng-if="multiple === false"
+     *ngIf="multiple === false"
      (keyup)="mainClick($event)"
      class="ui-select-container ui-select-bootstrap dropdown open">
-    <div [ng-class]="{'ui-disabled': disabled}"></div>
+    <div [ngClass]="{'ui-disabled': disabled}"></div>
     <div class="ui-select-match"
-         *ng-if="!inputMode">
+         *ngIf="!inputMode">
       <span tabindex="-1"
@@ -75,8 +72,8 @@ class="btn btn-default btn-secondary form-control ui-select-toggle"
           style="outline: 0;">
-        <span *ng-if="active.length <= 0" class="ui-select-placeholder text-muted">{{placeholder}}</span>
-        <span *ng-if="active.length > 0" class="ui-select-match-text pull-left"
-              [ng-class]="{'ui-select-allow-clear': allowClear && active.length > 0}">{{active[0].text}}</span>
+        <span *ngIf="active.length <= 0" class="ui-select-placeholder text-muted">{{placeholder}}</span>
+        <span *ngIf="active.length > 0" class="ui-select-match-text pull-left"
+              [ngClass]="{'ui-select-allow-clear': allowClear && active.length > 0}">{{active[0].text}}</span>
         <i class="dropdown-toggle pull-right"></i>
         <i class="caret pull-right"></i>
-        <a *ng-if="allowClear && active.length>0" style="margin-right: 10px; padding: 0;"
+        <a *ngIf="allowClear && active.length>0" style="margin-right: 10px; padding: 0;"
           (click)="remove(activeOption)" class="btn btn-xs btn-link pull-right">
@@ -92,19 +89,19 @@ <i class="glyphicon glyphicon-remove"></i>
            class="form-control ui-select-search"
-           *ng-if="inputMode"
+           *ngIf="inputMode"
            placeholder="{{active.length <= 0 ? placeholder : ''}}">
-    ${optionsTemplate}
-</div>
+      ${optionsTemplate}
+  </div>
 
   <div tabindex="0"
-     *ng-if="multiple === true"
+     *ngIf="multiple === true"
      (keyup)="mainClick($event)"
      (focus)="focusToInput('')"
      class="ui-select-container ui-select-multiple ui-select-bootstrap dropdown form-control open">
-    <div [ng-class]="{'ui-disabled': disabled}"></div>
+    <div [ngClass]="{'ui-disabled': disabled}"></div>
     <span class="ui-select-match">
-        <span *ng-for="#a of active">
+        <span *ngFor="#a of active">
             <span class="ui-select-match-item btn btn-default btn-secondary btn-xs"
                   tabindex="-1"
                   type="button"
-                  [ng-class]="{'btn-default': true}">
+                  [ngClass]="{'btn-default': true}">
                <a class="close ui-select-match-close"
@@ -129,9 +126,36 @@ (click)="remove(a)">&nbsp;&times;</a>
     ${optionsTemplate}
-</div>
-  `,
-  directives: [CORE_DIRECTIVES, FORM_DIRECTIVES],
-  pipes: [HightlightPipe]
+  </div>
+  `
 })
-export class Select implements OnInit, OnDestroy {
-  public multiple:boolean = false;
+export class Select {
+  @Input()
+  allowClear:boolean = false;
+  @Input()
+  placeholder:string = '';
+  @Input()
+  initData:Array<any> = [];
+  @Input()
+  multiple:boolean = false;
+
+  @Input() set items(value:Array<any>) {
+    this._items = value;
+    this.itemObjects = this._items.map((item:any) => new SelectItem(item));
+  }
+
+  @Input() set disabled(value:boolean) {
+    this._disabled = value;
+    if (this._disabled === true) {
+      this.hideOptions();
+    }
+  }
+
+  @Output()
+  data:EventEmitter<any> = new EventEmitter();
+  @Output()
+  selected:EventEmitter<any> = new EventEmitter();
+  @Output()
+  removed:EventEmitter<any> = new EventEmitter();
+  @Output()
+  typed:EventEmitter<any> = new EventEmitter();
+
   public options:Array<SelectItem> = [];
@@ -141,11 +165,2 @@ public itemObjects: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 allowClear:boolean = false;
-  private placeholder:string = '';
-  private initData:Array<any> = [];
-  private _items:Array<any> = [];
   private offSideClickHandler:any;
@@ -155,4 +170,5 @@ private inputMode:boolean = false;
   private behavior:IOptionsBehavior;
+  private inputValue:string = '';
+  private _items:Array<any> = [];
   private _disabled:boolean = false;
-  private inputValue:string = '';
 
@@ -171,3 +187,3 @@ constructor(public element:ElementRef) {
   private matchClick(e:any) {
-    if (this.disabled === true) {
+    if (this._disabled === true) {
       return;
@@ -184,3 +200,3 @@ }
   private mainClick(e:any) {
-    if (this.inputMode === true || this.disabled === true) {
+    if (this.inputMode === true || this._disabled === true) {
       return;
@@ -229,26 +245,5 @@ }
 
-  private get items():Array<any> {
-    return this._items;
-  }
-
-  private set items(value:Array<any>) {
-    this._items = value;
-    this.itemObjects = this._items.map((item:any) => new SelectItem(item));
-  }
-
-  public get disabled():boolean {
-    return this._disabled;
-  }
-
-  public set disabled(value:boolean) {
-    this._disabled = value;
-
-    if (this.disabled === true) {
-      this.hideOptions();
-    }
-  }
-
-  onInit() {
+  ngOnInit() {
     this.behavior = this.itemObjects[0].hasChildren() ?
-      new Select.ChildrenBehavior(this) : new Select.GenericBehavior(this);
+      new ChildrenBehavior(this) : new GenericBehavior(this);
     this.offSideClickHandler = this.getOffSideClickHandler(this);
@@ -259,7 +254,7 @@ document.addEventListener('click', this.offSideClickHandler);
       this.active = this.initData.map(d => new SelectItem(d));
-      this.data.next(this.active);
+      this.data.emit(this.active);
     }
   }
 
-  onDestroy() {
+  ngOnDestroy() {
     document.removeEventListener('click', this.offSideClickHandler);
@@ -290,3 +285,3 @@ this.offSideClickHandler = null;
   public remove(item:SelectItem) {
-    if (this.disabled === true) {
+    if (this._disabled === true) {
       return;
@@ -363,3 +358,3 @@ }
     // left
-    if (!isUpMode && e.keyCode === 37 && this.items.length > 0) {
+    if (!isUpMode && e.keyCode === 37 && this._items.length > 0) {
       this.behavior.first();
@@ -371,3 +366,3 @@ e.preventDefault();
     // right
-    if (!isUpMode && e.keyCode === 39 && this.items.length > 0) {
+    if (!isUpMode && e.keyCode === 39 && this._items.length > 0) {
       this.behavior.last();
@@ -449,194 +444,189 @@ e.preventDefault();
 
-export module Select {
+export class Behavior {
+  public optionsMap:Map<string, number> = new Map<string, number>();
 
-  export class Behavior {
-    public optionsMap:Map<string, number> = new Map<string, number>();
+  constructor(public actor:Select) {
+  }
 
-    constructor(public actor:Select) {
+  private getActiveIndex(optionsMap:Map<string, number> = null):number {
+    let ai = this.actor.options.indexOf(this.actor.activeOption);
+
+    if (ai < 0 && optionsMap !== null) {
+      ai = optionsMap.get(this.actor.activeOption.id);
     }
 
-    private getActiveIndex(optionsMap:Map<string, number> = null):number {
-      let ai = this.actor.options.indexOf(this.actor.activeOption);
+    return ai;
+  }
 
-      if (ai < 0 && optionsMap !== null) {
-        ai = optionsMap.get(this.actor.activeOption.id);
-      }
+  public fillOptionsMap() {
+    this.optionsMap.clear();
+    let startPos = 0;
+    this.actor.itemObjects.map(i => {
+      startPos = i.fillChildrenHash(this.optionsMap, startPos);
+    });
+  }
 
-      return ai;
+  public ensureHighlightVisible(optionsMap:Map<string, number> = null) {
+    let container = this.actor.element.nativeElement.querySelector('.ui-select-choices-content');
+
+    if (!container) {
+      return;
     }
 
-    public fillOptionsMap() {
-      this.optionsMap.clear();
-      let startPos = 0;
-      this.actor.itemObjects.map(i => {
-        startPos = i.fillChildrenHash(this.optionsMap, startPos);
-      });
+    let choices = container.querySelectorAll('.ui-select-choices-row');
+    if (choices.length < 1) {
+      return;
     }
 
-    public ensureHighlightVisible(optionsMap:Map<string, number> = null) {
-      let container = this.actor.element.nativeElement.querySelector('.ui-select-choices-content');
+    let activeIndex = this.getActiveIndex(optionsMap);
+    if (activeIndex < 0) {
+      return;
+    }
 
-      if (!container) {
-        return;
-      }
+    let highlighted:any = choices[activeIndex];
+    if (!highlighted) {
+      return;
+    }
 
-      let choices = container.querySelectorAll('.ui-select-choices-row');
-      if (choices.length < 1) {
-        return;
-      }
+    let posY:number = highlighted.offsetTop + highlighted.clientHeight - container.scrollTop;
+    let height:number = container.offsetHeight;
 
-      let activeIndex = this.getActiveIndex(optionsMap);
-      if (activeIndex < 0) {
-        return;
-      }
+    if (posY > height) {
+      container.scrollTop += posY - height;
+    } else if (posY < highlighted.clientHeight) {
+      container.scrollTop -= highlighted.clientHeight - posY;
+    }
+  }
+}
 
-      let highlighted:any = choices[activeIndex];
-      if (!highlighted) {
-        return;
-      }
+export class GenericBehavior extends Behavior implements IOptionsBehavior {
+  constructor(public actor:Select) {
+    super(actor);
+  }
 
-      let posY:number = highlighted.offsetTop + highlighted.clientHeight - container.scrollTop;
-      let height:number = container.offsetHeight;
+  public first() {
+    this.actor.activeOption = this.actor.options[0];
+    super.ensureHighlightVisible();
+  }
 
-      if (posY > height) {
-        container.scrollTop += posY - height;
-      } else if (posY < highlighted.clientHeight) {
-        container.scrollTop -= highlighted.clientHeight - posY;
-      }
-    }
+  public last() {
+    this.actor.activeOption = this.actor.options[this.actor.options.length - 1];
+    super.ensureHighlightVisible();
   }
 
-  export class GenericBehavior extends Behavior implements IOptionsBehavior {
-    constructor(public actor:Select) {
-      super(actor);
-    }
+  public prev() {
+    let index = this.actor.options.indexOf(this.actor.activeOption);
+    this.actor.activeOption = this.actor
+      .options[index - 1 < 0 ? this.actor.options.length - 1 : index - 1];
+    super.ensureHighlightVisible();
+  }
 
-    public first() {
-      this.actor.activeOption = this.actor.options[0];
-      super.ensureHighlightVisible();
-    }
+  public next() {
+    let index = this.actor.options.indexOf(this.actor.activeOption);
+    this.actor.activeOption = this.actor
+      .options[index + 1 > this.actor.options.length - 1 ? 0 : index + 1];
+    super.ensureHighlightVisible();
+  }
 
-    public last() {
-      this.actor.activeOption = this.actor.options[this.actor.options.length - 1];
-      super.ensureHighlightVisible();
-    }
+  public filter(query:RegExp) {
+    let options = this.actor.itemObjects
+      .filter(option => query.test(option.text) &&
+      (this.actor.multiple === false ||
+      (this.actor.multiple === true &&
+      this.actor.active.indexOf(option) < 0)));
+    this.actor.options = options;
 
-    public prev() {
-      let index = this.actor.options.indexOf(this.actor.activeOption);
-      this.actor.activeOption = this.actor
-        .options[index - 1 < 0 ? this.actor.options.length - 1 : index - 1];
+    if (this.actor.options.length > 0) {
+      this.actor.activeOption = this.actor.options[0];
       super.ensureHighlightVisible();
     }
+  }
+}
 
-    public next() {
-      let index = this.actor.options.indexOf(this.actor.activeOption);
-      this.actor.activeOption = this.actor
-        .options[index + 1 > this.actor.options.length - 1 ? 0 : index + 1];
-      super.ensureHighlightVisible();
-    }
+export class ChildrenBehavior extends Behavior implements IOptionsBehavior {
+  constructor(public actor:Select) {
+    super(actor);
+  }
 
-    public filter(query:RegExp) {
-      let options = this.actor.itemObjects
-        .filter(option => query.test(option.text) &&
-        (this.actor.multiple === false ||
-        (this.actor.multiple === true &&
-        this.actor.active.indexOf(option) < 0)));
-      this.actor.options = options;
+  public first() {
+    this.actor.activeOption = this.actor.options[0].children[0];
+    this.fillOptionsMap();
+    this.ensureHighlightVisible(this.optionsMap);
+  }
 
-      if (this.actor.options.length > 0) {
-        this.actor.activeOption = this.actor.options[0];
-        super.ensureHighlightVisible();
-      }
-    }
+  public last() {
+    this.actor.activeOption =
+      this.actor
+        .options[this.actor.options.length - 1]
+        .children[this.actor.options[this.actor.options.length - 1].children.length - 1];
+    this.fillOptionsMap();
+    this.ensureHighlightVisible(this.optionsMap);
   }
 
-  export class ChildrenBehavior extends Behavior implements IOptionsBehavior {
-    constructor(public actor:Select) {
-      super(actor);
-    }
+  public prev() {
+    let indexParent = this.actor.options
+      .findIndex(a => this.actor.activeOption.parent && this.actor.activeOption.parent.id === a.id);
+    let index = this.actor.options[indexParent].children
+      .findIndex(a => this.actor.activeOption && this.actor.activeOption.id === a.id);
+    this.actor.activeOption = this.actor.options[indexParent].children[index - 1];
 
-    public first() {
-      this.actor.activeOption = this.actor.options[0].children[0];
-      this.fillOptionsMap();
-      this.ensureHighlightVisible(this.optionsMap);
+    if (!this.actor.activeOption) {
+      if (this.actor.options[indexParent - 1]) {
+        this.actor.activeOption = this.actor
+          .options[indexParent - 1]
+          .children[this.actor.options[indexParent - 1].children.length - 1];
+      }
     }
 
-    public last() {
-      this.actor.activeOption =
-        this.actor
-          .options[this.actor.options.length - 1]
-          .children[this.actor.options[this.actor.options.length - 1].children.length - 1];
-      this.fillOptionsMap();
-      this.ensureHighlightVisible(this.optionsMap);
+    if (!this.actor.activeOption) {
+      this.last();
     }
 
-    public prev() {
-      let indexParent = this.actor.options
-        .findIndex(a => this.actor.activeOption.parent && this.actor.activeOption.parent.id === a.id);
-      let index = this.actor.options[indexParent].children
-        .findIndex(a => this.actor.activeOption && this.actor.activeOption.id === a.id);
-      this.actor.activeOption = this.actor.options[indexParent].children[index - 1];
+    this.fillOptionsMap();
+    this.ensureHighlightVisible(this.optionsMap);
+  }
 
-      if (!this.actor.activeOption) {
-        if (this.actor.options[indexParent - 1]) {
-          this.actor.activeOption = this.actor
-            .options[indexParent - 1]
-            .children[this.actor.options[indexParent - 1].children.length - 1];
-        }
+  public next() {
+    let indexParent = this.actor.options
+      .findIndex(a => this.actor.activeOption.parent && this.actor.activeOption.parent.id === a.id);
+    let index = this.actor.options[indexParent].children
+      .findIndex(a => this.actor.activeOption && this.actor.activeOption.id === a.id);
+    this.actor.activeOption = this.actor.options[indexParent].children[index + 1];
+    if (!this.actor.activeOption) {
+      if (this.actor.options[indexParent + 1]) {
+        this.actor.activeOption = this.actor.options[indexParent + 1].children[0];
       }
+    }
 
-      if (!this.actor.activeOption) {
-        this.last();
-      }
-
-      this.fillOptionsMap();
-      this.ensureHighlightVisible(this.optionsMap);
+    if (!this.actor.activeOption) {
+      this.first();
     }
 
-    public next() {
-      let indexParent = this.actor.options
-        .findIndex(a => this.actor.activeOption.parent && this.actor.activeOption.parent.id === a.id);
-      let index = this.actor.options[indexParent].children
-        .findIndex(a => this.actor.activeOption && this.actor.activeOption.id === a.id);
-      this.actor.activeOption = this.actor.options[indexParent].children[index + 1];
-      if (!this.actor.activeOption) {
-        if (this.actor.options[indexParent + 1]) {
-          this.actor.activeOption = this.actor.options[indexParent + 1].children[0];
-        }
-      }
+    this.fillOptionsMap();
+    this.ensureHighlightVisible(this.optionsMap);
+  }
 
-      if (!this.actor.activeOption) {
-        this.first();
-      }
+  public filter(query:RegExp) {
+    let options:Array<SelectItem> = [];
+    let optionsMap:Map<string, number> = new Map<string, number>();
+    let startPos = 0;
 
-      this.fillOptionsMap();
-      this.ensureHighlightVisible(this.optionsMap);
-    }
+    for (let si of this.actor.itemObjects) {
+      let children:Array<SelectItem> = si.children.filter(option => query.test(option.text));
+      startPos = si.fillChildrenHash(optionsMap, startPos);
 
-    public filter(query:RegExp) {
-      let options:Array<SelectItem> = [];
-      let optionsMap:Map<string, number> = new Map<string, number>();
-      let startPos = 0;
-
-      for (let si of this.actor.itemObjects) {
-        let children:Array<SelectItem> = si.children.filter(option => query.test(option.text));
-        startPos = si.fillChildrenHash(optionsMap, startPos);
-
-        if (children.length > 0) {
-          let newSi = si.getSimilar();
-          newSi.children = children;
-          options.push(newSi);
-        }
+      if (children.length > 0) {
+        let newSi = si.getSimilar();
+        newSi.children = children;
+        options.push(newSi);
       }
+    }
 
-      this.actor.options = options;
+    this.actor.options = options;
 
-      if (this.actor.options.length > 0) {
-        this.actor.activeOption = this.actor.options[0].children[0];
-        super.ensureHighlightVisible(optionsMap);
-      }
+    if (this.actor.options.length > 0) {
+      this.actor.activeOption = this.actor.options[0].children[0];
+      super.ensureHighlightVisible(optionsMap);
     }
   }
 }
-
-export const select:Array<any> = [Select];

ng2-select.d.ts

 export * from './components/select/select';
-export * from './components/ng2-select-config';
+export * from './components/select';

ng2-select.js

@@ -5,3 +5,3 @@ function __export(m) {
 __export(require('./components/select/select'));
-__export(require('./components/ng2-select-config'));
+__export(require('./components/select'));
 //# sourceMappingURL=ng2-select.js.map

ng2-select.ts

 export * from './components/select/select';
-export * from './components/ng2-select-config';
+export * from './components/select';

package.json

 {
   "name": "ng2-select",
-  "version": "0.44.0",
-  "description": "angular2 select component",
+  "version": "1.0.1-beta.0",
+  "description": "Angular2 based replacement for select boxes",
   "scripts": {
     "deploy": "NODE_ENV=production webpack -p --progress --color --optimize-minimize --optimize-dedupe --optimize-occurence-order",
-    "prepublish": "gulp clean",
+    "prepublish": "gulp clean && tsc",
     "dev": "webpack-dev-server --hot --inline --colors --display-error-details --display-cached",
@@ -30,35 +30,49 @@ "start": "npm run dev",
   "homepage": "https://github.com/valor-software/ng2-select#readme",
-  "dependencies": {
-    "angular2": "2.0.0-alpha.44",
-    "reflect-metadata": "0.1.2",
-    "zone.js": "0.5.8"
-  },
+  "dependencies": {},
   "devDependencies": {
-    "bootstrap": "3.3.5",
-    "clean-webpack-plugin": "0.1.3",
+    "angular2": "2.0.0-beta.1",
+    "bootstrap": "3.3.6",
+    "clean-webpack-plugin": "0.1.6",
     "compression-webpack-plugin": "0.2.0",
-    "eslint": "1.7.2",
+    "es6-shim": "0.33.13",
+    "eslint": "1.10.3",
     "exports-loader": "0.6.2",
-    "file-loader": "0.8.4",
+    "file-loader": "0.8.5",
     "gulp": "3.9.0",
     "gulp-clean": "0.3.1",
-    "gulp-eslint": "1.0.0",
+    "gulp-eslint": "1.1.1",
     "gulp-size": "2.0.0",
-    "gulp-tsc": "1.1.1",
-    "gulp-tslint": "3.3.1",
-    "html-loader": "0.3.0",
+    "gulp-tsc": "1.1.4",
+    "gulp-tslint": "4.2.2",
+    "html-loader": "0.4.0",
     "markdown-loader": "0.1.7",
     "marked": "0.3.5",
-    "moment": "2.10.6",
-    "ng2-bootstrap": "0.44.3",
-    "pre-commit": "1.1.1",
+    "moment": "2.11.1",
+    "ng2-bootstrap": "1.0.0-beta.2",
+    "pre-commit": "1.1.2",
     "prismjs": "valorkin/prism",
     "prismjs-loader": "0.0.2",
     "raw-loader": "0.5.1",
+    "reflect-metadata": "0.1.2",
     "require-dir": "0.3.0",
-    "ts-loader": "0.5.6",
-    "typescript": "1.6.2",
-    "webpack": "1.12.2",
-    "webpack-dev-server": "1.12.1"
-  }
+    "rxjs": "5.0.0-beta.0",
+    "ts-loader": "0.7.2",
+    "tslint": "3.2.1",
+    "typescript": "1.7.5",
+    "webpack": "1.12.10",
+    "webpack-dev-server": "1.14.0",
+    "zone.js": "0.5.10"
+  },
+  "contributors": [
+    {
+      "name": "Vyacheslav Chub",
+      "email": "[e-mail]",
+      "url": "https://github.com/buchslava"
+    },
+    {
+      "name": "Dmitriy Shekhovtsov",
+      "email": "[e-mail]",
+      "url": "https://github.com/valorkin"
+    }
+  ]
 }

README.md

@@ -1,3 +0,10 @@
-# ng2-select
+# ng2-select [![npm version](https://badge.fury.io/js/ng2-select.svg)](http://badge.fury.io/js/ng2-select) [![npm downloads](https://img.shields.io/npm/dm/ng2-select.svg)](https://npmjs.org/ng2-select)
 
+Follow me at [twitter](https://twitter.com/valorkin) to be notified about new releases.
+
+[![Code Climate](https://codeclimate.com/github/valor-software/ng2-select/badges/gpa.svg)](https://codeclimate.com/github/valor-software/ng2-select)
+[![Join the chat at https://gitter.im/valor-software/ng2-bootstrap](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/valor-software/ng2-bootstrap?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+[![devDependency Status](https://david-dm.org/valor-software/ng2-select/dev-status.svg)](https://david-dm.org/valor-software/ng2-select#info=devDependencies)
+[![Throughput Graph](https://graphs.waffle.io/valor-software/ng2-select/throughput.svg)](https://waffle.io/valor-software/ng2-select/metrics)
+
 Native Select Angular2 component
@@ -11,4 +18,2 @@
 
-  Alternatively, you can [download it in a ZIP file](https://github.com/valor-software/ng2-select/archive/master.zip).
-
 2. Include `ng2-select.css` in your project
@@ -15,0 +20,0 @@

tsconfig.json

 {
-  "version": "1.6.2",
+  "version": "1.7.5",
   "compilerOptions": {
@@ -4,0 +4,0 @@ "target": "es5",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Dependency count

0

decreased by-100%

Number of lines in readme file

59

increased by9.26%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

97395

decreased by-1.67%

Dev dependency count

32

increased by23.08%

Lines of code

1604

decreased by-2.02%

Dependency changes

• - Removedangular2@2.0.0-alpha.44

• - Removedreflect-metadata@0.1.2

• - Removedzone.js@0.5.8

• - Removed@reactivex/rxjs@5.0.0-alpha.4(transitive)

• - Removedangular2@2.0.0-alpha.44(transitive)

• - Removedes6-promise@3.3.1(transitive)

• - Removedreflect-metadata@0.1.10.1.2(transitive)

• - Removedzone.js@0.5.8(transitive)