ng2-completer - npm Package Compare versions

Comparing version 1.2.2 to 1.3.0

CHANGELOG.md

 # Change Log
 All notable changes to this project will be documented in this file.
 
+## 1.3.0 (2017-03-31)
+
+### Implemented enhancements
+- Please add `focus` event along with `blur` one #175
+- Demo redo
+- No link to Github in demo #133
+- added focus() method to completer component #152
+- Add inputId property to ng2-completer component (analogy to existing inputName property) #128
+
+### Fixed bugs
+- Relax peer dependencies to support Angular 4.0 #184
+- ng2-completer closes when scrollbar is clicked on IE browser #158
+
 ## 1.2.1 (2017-03-18)
@@ -5,0 +18,0 @@

components/completer-cmp.d.ts

@@ -1,2 +0,2 @@
-import { EventEmitter, OnInit, AfterViewInit, ElementRef } from "@angular/core";
+import { AfterViewChecked, EventEmitter, OnInit, AfterViewInit, ElementRef } from "@angular/core";
 import { ControlValueAccessor, FormControl } from "@angular/forms";
@@ -8,3 +8,3 @@ import { CtrCompleter } from "../directives/ctr-completer";
 import "rxjs/add/operator/catch";
-export declare class CompleterCmp implements OnInit, ControlValueAccessor, AfterViewInit {
+export declare class CompleterCmp implements OnInit, ControlValueAccessor, AfterViewChecked, AfterViewInit {
     private completerService;
@@ -14,2 +14,3 @@ dataService: CompleterData;
     inputName: string;
+    inputId: string;
     pause: number;
@@ -33,2 +34,3 @@ minSearchLength: number;
     blur: EventEmitter<void>;
+    focusEvent: EventEmitter<void>;
     completer: CtrCompleter;
@@ -41,4 +43,7 @@ ctrInput: ElementRef;
     private _onChangeCallback;
+    private _focus;
     constructor(completerService: CompleterService);
     value: any;
+    ngAfterViewInit(): void;
+    ngAfterViewChecked(): void;
     onTouched(): void;
@@ -48,8 +53,9 @@ writeValue(value: any): void;
     registerOnTouched(fn: any): void;
-    ngAfterViewInit(): void;
     ngOnInit(): void;
     onBlur(): void;
+    onFocus(): void;
     onChange(value: string): void;
     open(searchValue?: string): void;
     close(): void;
+    focus(): void;
 }

components/completer-cmp.js

 "use strict";
-var __decorate = (this && this.__decorate) || function (decorators, target, key, 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;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-import { Component, Input, Output, EventEmitter, ViewChild, forwardRef, ElementRef } from "@angular/core";
+import { Component, Input, Output, EventEmitter, ViewChild, forwardRef } from "@angular/core";
 import { FormControl, NG_VALUE_ACCESSOR } from "@angular/forms";
@@ -27,2 +18,3 @@ import { CtrCompleter } from "../directives/ctr-completer";
         this.inputName = "";
+        this.inputId = "";
         this.pause = PAUSE;
@@ -43,2 +35,3 @@ this.minSearchLength = MIN_SEARCH_LENGTH;
         this.blur = new EventEmitter();
+        this.focusEvent = new EventEmitter();
         this.searchStr = "";
@@ -49,2 +42,3 @@ this.control = new FormControl("");
         this._onChangeCallback = noop;
+        this._focus = false;
     }
@@ -64,2 +58,13 @@ Object.defineProperty(CompleterCmp.prototype, "value", {
     ;
+    CompleterCmp.prototype.ngAfterViewInit = function () {
+        if (this.autofocus) {
+            this._focus = true;
+        }
+    };
+    CompleterCmp.prototype.ngAfterViewChecked = function () {
+        if (this._focus) {
+            this.ctrInput.nativeElement.focus();
+            this._focus = false;
+        }
+    };
     CompleterCmp.prototype.onTouched = function () {
@@ -77,7 +82,2 @@ this._onTouchedCallback();
     };
-    CompleterCmp.prototype.ngAfterViewInit = function () {
-        if (this.autofocus && this.ctrInput) {
-            this.ctrInput.nativeElement.focus();
-        }
-    };
     CompleterCmp.prototype.ngOnInit = function () {
@@ -112,2 +112,6 @@ var _this = this;
     };
+    CompleterCmp.prototype.onFocus = function () {
+        this.focusEvent.emit();
+        this.onTouched();
+    };
     CompleterCmp.prototype.onChange = function (value) {
@@ -123,106 +127,52 @@ this.value = value;
     };
+    CompleterCmp.prototype.focus = function () {
+        if (this.ctrInput) {
+            this.ctrInput.nativeElement.focus();
+        }
+        else {
+            this._focus = true;
+        }
+    };
     return CompleterCmp;
 }());
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], CompleterCmp.prototype, "dataService", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], CompleterCmp.prototype, "datasource", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], CompleterCmp.prototype, "inputName", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], CompleterCmp.prototype, "pause", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], CompleterCmp.prototype, "minSearchLength", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], CompleterCmp.prototype, "maxChars", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], CompleterCmp.prototype, "overrideSuggested", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], CompleterCmp.prototype, "clearSelected", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], CompleterCmp.prototype, "fillHighlighted", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], CompleterCmp.prototype, "placeholder", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], CompleterCmp.prototype, "matchClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], CompleterCmp.prototype, "textSearching", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], CompleterCmp.prototype, "textNoResults", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Number)
-], CompleterCmp.prototype, "fieldTabindex", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], CompleterCmp.prototype, "autoMatch", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], CompleterCmp.prototype, "disableInput", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], CompleterCmp.prototype, "inputClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], CompleterCmp.prototype, "autofocus", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], CompleterCmp.prototype, "selected", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], CompleterCmp.prototype, "highlighted", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], CompleterCmp.prototype, "blur", void 0);
-__decorate([
-    ViewChild(CtrCompleter),
-    __metadata("design:type", CtrCompleter)
-], CompleterCmp.prototype, "completer", void 0);
-__decorate([
-    ViewChild("ctrInput"),
-    __metadata("design:type", ElementRef)
-], CompleterCmp.prototype, "ctrInput", void 0);
-CompleterCmp = __decorate([
-    Component({
-        selector: "ng2-completer",
-        template: "\n        <div class=\"completer-holder\" ctrCompleter>\n            <input #ctrInput type=\"search\" class=\"completer-input\" ctrInput [ngClass]=\"inputClass\" [(ngModel)]=\"searchStr\" (ngModelChange)=\"onChange($event)\" [attr.name]=\"inputName\" [placeholder]=\"placeholder\"\n                [attr.maxlength]=\"maxChars\" [tabindex]=\"fieldTabindex\" [disabled]=\"disableInput\" [clearSelected]=\"clearSelected\" [overrideSuggested]=\"overrideSuggested\" \n                [fillHighlighted]=\"fillHighlighted\" (blur)=\"onBlur()\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" />\n\n            <div class=\"completer-dropdown-holder\" *ctrList=\"dataService; minSearchLength: minSearchLength; pause: pause; autoMatch: autoMatch; let items = results; let searchActive = searching; let isInitialized = searchInitialized;\">\n                <div class=\"completer-dropdown\" ctrDropdown *ngIf=\"isInitialized\">\n                    <div *ngIf=\"searchActive && displaySearching\" class=\"completer-searching\">{{textSearching}}</div>\n                    <div *ngIf=\"!searchActive && (!items || items.length === 0)\" class=\"completer-no-results\">{{textNoResults}}</div>\n                    <div class=\"completer-row-wrapper\" *ngFor=\"let item of items; let rowIndex=index\">\n                        <div class=\"completer-row\" [ctrRow]=\"rowIndex\" [dataItem]=\"item\">\n                            <div *ngIf=\"item.image || item.image === ''\" class=\"completer-image-holder\">\n                                <img *ngIf=\"item.image != ''\" src=\"{{item.image}}\" class=\"completer-image\" />\n                                <div *ngIf=\"item.image === ''\" class=\"completer-image-default\"></div>\n                            </div>\n                            <div class=\"completer-item-text\" [ngClass]=\"{'completer-item-text-image': item.image || item.image === '' }\">\n                                <completer-list-item class=\"completer-title\" [text]=\"item.title\" [matchClass]=\"matchClass\" [searchStr]=\"searchStr\" [type]=\"'title'\"></completer-list-item>\n                                <completer-list-item *ngIf=\"item.description && item.description != ''\" class=\"completer-description\" [text]=\"item.description\"\n                                    [matchClass]=\"matchClass\" [searchStr]=\"searchStr\" [type]=\"'description'\">\n                                </completer-list-item>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    ",
-        styles: ["\n    .completer-dropdown {\n        border-color: #ececec;\n        border-width: 1px;\n        border-style: solid;\n        border-radius: 2px;\n        width: 250px;\n        padding: 6px;\n        cursor: pointer;\n        z-index: 9999;\n        position: absolute;\n        margin-top: -6px;\n        background-color: #ffffff;\n    }\n\n    .completer-row {\n        padding: 5px;\n        color: #000000;\n        margin-bottom: 4px;\n        clear: both;\n        display: inline-block;\n        width: 103%;\n    }\n\n    .completer-selected-row {\n        background-color: lightblue;\n        color: #ffffff;\n    }\n\n    .completer-description {\n        font-size: 14px;\n    }\n\n    .completer-image-default {\n        width: 16px; \n        height: 16px;\n        background-image: url(\"demo/res/img/default.png\");\n    }\n\n    .completer-image-holder {\n        float: left;\n        width: 10%;\n    }\n    .completer-item-text-image {\n        float: right;\n        width: 90%;\n    }\n    "],
-        providers: [COMPLETER_CONTROL_VALUE_ACCESSOR]
-    }),
-    __metadata("design:paramtypes", [CompleterService])
-], CompleterCmp);
 export { CompleterCmp };
+CompleterCmp.decorators = [
+    { type: Component, args: [{
+                selector: "ng2-completer",
+                template: "\n        <div class=\"completer-holder\" ctrCompleter>\n            <input #ctrInput [attr.id]=\"inputId.length > 0 ? inputId : null\" type=\"search\" class=\"completer-input\" ctrInput [ngClass]=\"inputClass\" [(ngModel)]=\"searchStr\" (ngModelChange)=\"onChange($event)\" [attr.name]=\"inputName\" [placeholder]=\"placeholder\"\n                [attr.maxlength]=\"maxChars\" [tabindex]=\"fieldTabindex\" [disabled]=\"disableInput\" [clearSelected]=\"clearSelected\" [overrideSuggested]=\"overrideSuggested\" \n                [fillHighlighted]=\"fillHighlighted\" (blur)=\"onBlur()\" (focus)=\"onFocus()\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" />\n\n            <div class=\"completer-dropdown-holder\" *ctrList=\"dataService; minSearchLength: minSearchLength; pause: pause; autoMatch: autoMatch; let items = results; let searchActive = searching; let isInitialized = searchInitialized;\">\n                <div class=\"completer-dropdown\" ctrDropdown *ngIf=\"isInitialized\">\n                    <div *ngIf=\"searchActive && displaySearching\" class=\"completer-searching\">{{textSearching}}</div>\n                    <div *ngIf=\"!searchActive && (!items || items.length === 0)\" class=\"completer-no-results\">{{textNoResults}}</div>\n                    <div class=\"completer-row-wrapper\" *ngFor=\"let item of items; let rowIndex=index\">\n                        <div class=\"completer-row\" [ctrRow]=\"rowIndex\" [dataItem]=\"item\">\n                            <div *ngIf=\"item.image || item.image === ''\" class=\"completer-image-holder\">\n                                <img *ngIf=\"item.image != ''\" src=\"{{item.image}}\" class=\"completer-image\" />\n                                <div *ngIf=\"item.image === ''\" class=\"completer-image-default\"></div>\n                            </div>\n                            <div class=\"completer-item-text\" [ngClass]=\"{'completer-item-text-image': item.image || item.image === '' }\">\n                                <completer-list-item class=\"completer-title\" [text]=\"item.title\" [matchClass]=\"matchClass\" [searchStr]=\"searchStr\" [type]=\"'title'\"></completer-list-item>\n                                <completer-list-item *ngIf=\"item.description && item.description != ''\" class=\"completer-description\" [text]=\"item.description\"\n                                    [matchClass]=\"matchClass\" [searchStr]=\"searchStr\" [type]=\"'description'\">\n                                </completer-list-item>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    ",
+                styles: ["\n    .completer-dropdown {\n        border-color: #ececec;\n        border-width: 1px;\n        border-style: solid;\n        border-radius: 2px;\n        width: 250px;\n        padding: 6px;\n        cursor: pointer;\n        z-index: 9999;\n        position: absolute;\n        margin-top: -6px;\n        background-color: #ffffff;\n    }\n\n    .completer-row {\n        padding: 5px;\n        color: #000000;\n        margin-bottom: 4px;\n        clear: both;\n        display: inline-block;\n        width: 103%;\n    }\n\n    .completer-selected-row {\n        background-color: lightblue;\n        color: #ffffff;\n    }\n\n    .completer-description {\n        font-size: 14px;\n    }\n\n    .completer-image-default {\n        width: 16px; \n        height: 16px;\n        background-image: url(\"demo/res/img/default.png\");\n    }\n\n    .completer-image-holder {\n        float: left;\n        width: 10%;\n    }\n    .completer-item-text-image {\n        float: right;\n        width: 90%;\n    }\n    "],
+                providers: [COMPLETER_CONTROL_VALUE_ACCESSOR]
+            },] },
+];
+/** @nocollapse */
+CompleterCmp.ctorParameters = function () { return [
+    { type: CompleterService, },
+]; };
+CompleterCmp.propDecorators = {
+    'dataService': [{ type: Input },],
+    'datasource': [{ type: Input },],
+    'inputName': [{ type: Input },],
+    'inputId': [{ type: Input },],
+    'pause': [{ type: Input },],
+    'minSearchLength': [{ type: Input },],
+    'maxChars': [{ type: Input },],
+    'overrideSuggested': [{ type: Input },],
+    'clearSelected': [{ type: Input },],
+    'fillHighlighted': [{ type: Input },],
+    'placeholder': [{ type: Input },],
+    'matchClass': [{ type: Input },],
+    'textSearching': [{ type: Input },],
+    'textNoResults': [{ type: Input },],
+    'fieldTabindex': [{ type: Input },],
+    'autoMatch': [{ type: Input },],
+    'disableInput': [{ type: Input },],
+    'inputClass': [{ type: Input },],
+    'autofocus': [{ type: Input },],
+    'selected': [{ type: Output },],
+    'highlighted': [{ type: Output },],
+    'blur': [{ type: Output },],
+    'focusEvent': [{ type: Output, args: ["focus",] },],
+    'completer': [{ type: ViewChild, args: [CtrCompleter,] },],
+    'ctrInput': [{ type: ViewChild, args: ["ctrInput",] },],
+};
 //# sourceMappingURL=completer-cmp.js.map

components/completer-cmp.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"CompleterCmp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng2-completer","template":"\n        <div class=\"completer-holder\" ctrCompleter>\n            <input #ctrInput type=\"search\" class=\"completer-input\" ctrInput [ngClass]=\"inputClass\" [(ngModel)]=\"searchStr\" (ngModelChange)=\"onChange($event)\" [attr.name]=\"inputName\" [placeholder]=\"placeholder\"\n                [attr.maxlength]=\"maxChars\" [tabindex]=\"fieldTabindex\" [disabled]=\"disableInput\" [clearSelected]=\"clearSelected\" [overrideSuggested]=\"overrideSuggested\" \n                [fillHighlighted]=\"fillHighlighted\" (blur)=\"onBlur()\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" />\n\n            <div class=\"completer-dropdown-holder\" *ctrList=\"dataService; minSearchLength: minSearchLength; pause: pause; autoMatch: autoMatch; let items = results; let searchActive = searching; let isInitialized = searchInitialized;\">\n                <div class=\"completer-dropdown\" ctrDropdown *ngIf=\"isInitialized\">\n                    <div *ngIf=\"searchActive && displaySearching\" class=\"completer-searching\">{{textSearching}}</div>\n                    <div *ngIf=\"!searchActive && (!items || items.length === 0)\" class=\"completer-no-results\">{{textNoResults}}</div>\n                    <div class=\"completer-row-wrapper\" *ngFor=\"let item of items; let rowIndex=index\">\n                        <div class=\"completer-row\" [ctrRow]=\"rowIndex\" [dataItem]=\"item\">\n                            <div *ngIf=\"item.image || item.image === ''\" class=\"completer-image-holder\">\n                                <img *ngIf=\"item.image != ''\" src=\"{{item.image}}\" class=\"completer-image\" />\n                                <div *ngIf=\"item.image === ''\" class=\"completer-image-default\"></div>\n                            </div>\n                            <div class=\"completer-item-text\" [ngClass]=\"{'completer-item-text-image': item.image || item.image === '' }\">\n                                <completer-list-item class=\"completer-title\" [text]=\"item.title\" [matchClass]=\"matchClass\" [searchStr]=\"searchStr\" [type]=\"'title'\"></completer-list-item>\n                                <completer-list-item *ngIf=\"item.description && item.description != ''\" class=\"completer-description\" [text]=\"item.description\"\n                                    [matchClass]=\"matchClass\" [searchStr]=\"searchStr\" [type]=\"'description'\">\n                                </completer-list-item>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    ","styles":["\n    .completer-dropdown {\n        border-color: #ececec;\n        border-width: 1px;\n        border-style: solid;\n        border-radius: 2px;\n        width: 250px;\n        padding: 6px;\n        cursor: pointer;\n        z-index: 9999;\n        position: absolute;\n        margin-top: -6px;\n        background-color: #ffffff;\n    }\n\n    .completer-row {\n        padding: 5px;\n        color: #000000;\n        margin-bottom: 4px;\n        clear: both;\n        display: inline-block;\n        width: 103%;\n    }\n\n    .completer-selected-row {\n        background-color: lightblue;\n        color: #ffffff;\n    }\n\n    .completer-description {\n        font-size: 14px;\n    }\n\n    .completer-image-default {\n        width: 16px; \n        height: 16px;\n        background-image: url(\"demo/res/img/default.png\");\n    }\n\n    .completer-image-holder {\n        float: left;\n        width: 10%;\n    }\n    .completer-item-text-image {\n        float: right;\n        width: 90%;\n    }\n    "],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"CompleterCmp"},"multi":true}]}]}],"members":{"dataService":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"datasource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"inputName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pause":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"minSearchLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxChars":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"overrideSuggested":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"clearSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fillHighlighted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"matchClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"textSearching":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"textNoResults":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fieldTabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autoMatch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"inputClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autofocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"highlighted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"blur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"completer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../directives/ctr-completer","name":"CtrCompleter"}]}]}],"ctrInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["ctrInput"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../services/completer-service","name":"CompleterService"}]}],"onTouched":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CompleterCmp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng2-completer","template":"\n        <div class=\"completer-holder\" ctrCompleter>\n            <input #ctrInput type=\"search\" class=\"completer-input\" ctrInput [ngClass]=\"inputClass\" [(ngModel)]=\"searchStr\" (ngModelChange)=\"onChange($event)\" [attr.name]=\"inputName\" [placeholder]=\"placeholder\"\n                [attr.maxlength]=\"maxChars\" [tabindex]=\"fieldTabindex\" [disabled]=\"disableInput\" [clearSelected]=\"clearSelected\" [overrideSuggested]=\"overrideSuggested\" \n                [fillHighlighted]=\"fillHighlighted\" (blur)=\"onBlur()\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" />\n\n            <div class=\"completer-dropdown-holder\" *ctrList=\"dataService; minSearchLength: minSearchLength; pause: pause; autoMatch: autoMatch; let items = results; let searchActive = searching; let isInitialized = searchInitialized;\">\n                <div class=\"completer-dropdown\" ctrDropdown *ngIf=\"isInitialized\">\n                    <div *ngIf=\"searchActive && displaySearching\" class=\"completer-searching\">{{textSearching}}</div>\n                    <div *ngIf=\"!searchActive && (!items || items.length === 0)\" class=\"completer-no-results\">{{textNoResults}}</div>\n                    <div class=\"completer-row-wrapper\" *ngFor=\"let item of items; let rowIndex=index\">\n                        <div class=\"completer-row\" [ctrRow]=\"rowIndex\" [dataItem]=\"item\">\n                            <div *ngIf=\"item.image || item.image === ''\" class=\"completer-image-holder\">\n                                <img *ngIf=\"item.image != ''\" src=\"{{item.image}}\" class=\"completer-image\" />\n                                <div *ngIf=\"item.image === ''\" class=\"completer-image-default\"></div>\n                            </div>\n                            <div class=\"completer-item-text\" [ngClass]=\"{'completer-item-text-image': item.image || item.image === '' }\">\n                                <completer-list-item class=\"completer-title\" [text]=\"item.title\" [matchClass]=\"matchClass\" [searchStr]=\"searchStr\" [type]=\"'title'\"></completer-list-item>\n                                <completer-list-item *ngIf=\"item.description && item.description != ''\" class=\"completer-description\" [text]=\"item.description\"\n                                    [matchClass]=\"matchClass\" [searchStr]=\"searchStr\" [type]=\"'description'\">\n                                </completer-list-item>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    ","styles":["\n    .completer-dropdown {\n        border-color: #ececec;\n        border-width: 1px;\n        border-style: solid;\n        border-radius: 2px;\n        width: 250px;\n        padding: 6px;\n        cursor: pointer;\n        z-index: 9999;\n        position: absolute;\n        margin-top: -6px;\n        background-color: #ffffff;\n    }\n\n    .completer-row {\n        padding: 5px;\n        color: #000000;\n        margin-bottom: 4px;\n        clear: both;\n        display: inline-block;\n        width: 103%;\n    }\n\n    .completer-selected-row {\n        background-color: lightblue;\n        color: #ffffff;\n    }\n\n    .completer-description {\n        font-size: 14px;\n    }\n\n    .completer-image-default {\n        width: 16px; \n        height: 16px;\n        background-image: url(\"demo/res/img/default.png\");\n    }\n\n    .completer-image-holder {\n        float: left;\n        width: 10%;\n    }\n    .completer-item-text-image {\n        float: right;\n        width: 90%;\n    }\n    "],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"CompleterCmp"},"multi":true}]}]}],"members":{"dataService":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"datasource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"inputName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pause":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"minSearchLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxChars":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"overrideSuggested":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"clearSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fillHighlighted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"matchClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"textSearching":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"textNoResults":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fieldTabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autoMatch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"inputClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autofocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"highlighted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"blur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"completer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../directives/ctr-completer","name":"CtrCompleter"}]}]}],"ctrInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["ctrInput"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../services/completer-service","name":"CompleterService"}]}],"onTouched":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"CompleterCmp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng2-completer","template":"\n        <div class=\"completer-holder\" ctrCompleter>\n            <input #ctrInput [attr.id]=\"inputId.length > 0 ? inputId : null\" type=\"search\" class=\"completer-input\" ctrInput [ngClass]=\"inputClass\" [(ngModel)]=\"searchStr\" (ngModelChange)=\"onChange($event)\" [attr.name]=\"inputName\" [placeholder]=\"placeholder\"\n                [attr.maxlength]=\"maxChars\" [tabindex]=\"fieldTabindex\" [disabled]=\"disableInput\" [clearSelected]=\"clearSelected\" [overrideSuggested]=\"overrideSuggested\" \n                [fillHighlighted]=\"fillHighlighted\" (blur)=\"onBlur()\" (focus)=\"onFocus()\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" />\n\n            <div class=\"completer-dropdown-holder\" *ctrList=\"dataService; minSearchLength: minSearchLength; pause: pause; autoMatch: autoMatch; let items = results; let searchActive = searching; let isInitialized = searchInitialized;\">\n                <div class=\"completer-dropdown\" ctrDropdown *ngIf=\"isInitialized\">\n                    <div *ngIf=\"searchActive && displaySearching\" class=\"completer-searching\">{{textSearching}}</div>\n                    <div *ngIf=\"!searchActive && (!items || items.length === 0)\" class=\"completer-no-results\">{{textNoResults}}</div>\n                    <div class=\"completer-row-wrapper\" *ngFor=\"let item of items; let rowIndex=index\">\n                        <div class=\"completer-row\" [ctrRow]=\"rowIndex\" [dataItem]=\"item\">\n                            <div *ngIf=\"item.image || item.image === ''\" class=\"completer-image-holder\">\n                                <img *ngIf=\"item.image != ''\" src=\"{{item.image}}\" class=\"completer-image\" />\n                                <div *ngIf=\"item.image === ''\" class=\"completer-image-default\"></div>\n                            </div>\n                            <div class=\"completer-item-text\" [ngClass]=\"{'completer-item-text-image': item.image || item.image === '' }\">\n                                <completer-list-item class=\"completer-title\" [text]=\"item.title\" [matchClass]=\"matchClass\" [searchStr]=\"searchStr\" [type]=\"'title'\"></completer-list-item>\n                                <completer-list-item *ngIf=\"item.description && item.description != ''\" class=\"completer-description\" [text]=\"item.description\"\n                                    [matchClass]=\"matchClass\" [searchStr]=\"searchStr\" [type]=\"'description'\">\n                                </completer-list-item>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    ","styles":["\n    .completer-dropdown {\n        border-color: #ececec;\n        border-width: 1px;\n        border-style: solid;\n        border-radius: 2px;\n        width: 250px;\n        padding: 6px;\n        cursor: pointer;\n        z-index: 9999;\n        position: absolute;\n        margin-top: -6px;\n        background-color: #ffffff;\n    }\n\n    .completer-row {\n        padding: 5px;\n        color: #000000;\n        margin-bottom: 4px;\n        clear: both;\n        display: inline-block;\n        width: 103%;\n    }\n\n    .completer-selected-row {\n        background-color: lightblue;\n        color: #ffffff;\n    }\n\n    .completer-description {\n        font-size: 14px;\n    }\n\n    .completer-image-default {\n        width: 16px; \n        height: 16px;\n        background-image: url(\"demo/res/img/default.png\");\n    }\n\n    .completer-image-holder {\n        float: left;\n        width: 10%;\n    }\n    .completer-item-text-image {\n        float: right;\n        width: 90%;\n    }\n    "],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"CompleterCmp"},"multi":true}]}]}],"members":{"dataService":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"datasource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"inputName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"inputId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pause":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"minSearchLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxChars":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"overrideSuggested":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"clearSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fillHighlighted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"matchClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"textSearching":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"textNoResults":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fieldTabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autoMatch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"inputClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autofocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"highlighted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"blur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"focusEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["focus"]}]}],"completer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../directives/ctr-completer","name":"CtrCompleter"}]}]}],"ctrInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["ctrInput"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../services/completer-service","name":"CompleterService"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"onTouched":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CompleterCmp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"ng2-completer","template":"\n        <div class=\"completer-holder\" ctrCompleter>\n            <input #ctrInput [attr.id]=\"inputId.length > 0 ? inputId : null\" type=\"search\" class=\"completer-input\" ctrInput [ngClass]=\"inputClass\" [(ngModel)]=\"searchStr\" (ngModelChange)=\"onChange($event)\" [attr.name]=\"inputName\" [placeholder]=\"placeholder\"\n                [attr.maxlength]=\"maxChars\" [tabindex]=\"fieldTabindex\" [disabled]=\"disableInput\" [clearSelected]=\"clearSelected\" [overrideSuggested]=\"overrideSuggested\" \n                [fillHighlighted]=\"fillHighlighted\" (blur)=\"onBlur()\" (focus)=\"onFocus()\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" />\n\n            <div class=\"completer-dropdown-holder\" *ctrList=\"dataService; minSearchLength: minSearchLength; pause: pause; autoMatch: autoMatch; let items = results; let searchActive = searching; let isInitialized = searchInitialized;\">\n                <div class=\"completer-dropdown\" ctrDropdown *ngIf=\"isInitialized\">\n                    <div *ngIf=\"searchActive && displaySearching\" class=\"completer-searching\">{{textSearching}}</div>\n                    <div *ngIf=\"!searchActive && (!items || items.length === 0)\" class=\"completer-no-results\">{{textNoResults}}</div>\n                    <div class=\"completer-row-wrapper\" *ngFor=\"let item of items; let rowIndex=index\">\n                        <div class=\"completer-row\" [ctrRow]=\"rowIndex\" [dataItem]=\"item\">\n                            <div *ngIf=\"item.image || item.image === ''\" class=\"completer-image-holder\">\n                                <img *ngIf=\"item.image != ''\" src=\"{{item.image}}\" class=\"completer-image\" />\n                                <div *ngIf=\"item.image === ''\" class=\"completer-image-default\"></div>\n                            </div>\n                            <div class=\"completer-item-text\" [ngClass]=\"{'completer-item-text-image': item.image || item.image === '' }\">\n                                <completer-list-item class=\"completer-title\" [text]=\"item.title\" [matchClass]=\"matchClass\" [searchStr]=\"searchStr\" [type]=\"'title'\"></completer-list-item>\n                                <completer-list-item *ngIf=\"item.description && item.description != ''\" class=\"completer-description\" [text]=\"item.description\"\n                                    [matchClass]=\"matchClass\" [searchStr]=\"searchStr\" [type]=\"'description'\">\n                                </completer-list-item>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    ","styles":["\n    .completer-dropdown {\n        border-color: #ececec;\n        border-width: 1px;\n        border-style: solid;\n        border-radius: 2px;\n        width: 250px;\n        padding: 6px;\n        cursor: pointer;\n        z-index: 9999;\n        position: absolute;\n        margin-top: -6px;\n        background-color: #ffffff;\n    }\n\n    .completer-row {\n        padding: 5px;\n        color: #000000;\n        margin-bottom: 4px;\n        clear: both;\n        display: inline-block;\n        width: 103%;\n    }\n\n    .completer-selected-row {\n        background-color: lightblue;\n        color: #ffffff;\n    }\n\n    .completer-description {\n        font-size: 14px;\n    }\n\n    .completer-image-default {\n        width: 16px; \n        height: 16px;\n        background-image: url(\"demo/res/img/default.png\");\n    }\n\n    .completer-image-holder {\n        float: left;\n        width: 10%;\n    }\n    .completer-item-text-image {\n        float: right;\n        width: 90%;\n    }\n    "],"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR"},"useExisting":{"__symbolic":"reference","name":"CompleterCmp"},"multi":true}]}]}],"members":{"dataService":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"datasource":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"inputName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"inputId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"pause":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"minSearchLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"maxChars":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"overrideSuggested":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"clearSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fillHighlighted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"matchClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"textSearching":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"textNoResults":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"fieldTabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autoMatch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"disableInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"inputClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"autofocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"highlighted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"blur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"focusEvent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"},"arguments":["focus"]}]}],"completer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":[{"__symbolic":"reference","module":"../directives/ctr-completer","name":"CtrCompleter"}]}]}],"ctrInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild"},"arguments":["ctrInput"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"../services/completer-service","name":"CompleterService"}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngAfterViewChecked":[{"__symbolic":"method"}],"onTouched":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"onFocus":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}]}}}}]

components/completer-list-item-cmp.js

 "use strict";
-var __decorate = (this && this.__decorate) || function (decorators, target, key, 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;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
 import { Component, Input } from "@angular/core";
@@ -44,25 +35,17 @@ var CompleterListItemCmp = (function () {
 }());
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], CompleterListItemCmp.prototype, "text", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], CompleterListItemCmp.prototype, "searchStr", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], CompleterListItemCmp.prototype, "matchClass", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", String)
-], CompleterListItemCmp.prototype, "type", void 0);
-CompleterListItemCmp = __decorate([
-    Component({
-        selector: "completer-list-item",
-        template: "\n    <span class=\"completer-list-item-holder\" [ngClass]=\"{'completer-title': type === 'title', 'completer-description': type === 'description'}\" >\n        <span class=\"completer-list-item\" *ngFor=\"let part of parts\" [ngClass]=\"part.isMatch ? matchClass : null\">{{part.text}}</span>\n    </span>\n    "
-    })
-], CompleterListItemCmp);
 export { CompleterListItemCmp };
+CompleterListItemCmp.decorators = [
+    { type: Component, args: [{
+                selector: "completer-list-item",
+                template: "\n    <span class=\"completer-list-item-holder\" [ngClass]=\"{'completer-title': type === 'title', 'completer-description': type === 'description'}\" >\n        <span class=\"completer-list-item\" *ngFor=\"let part of parts\" [ngClass]=\"part.isMatch ? matchClass : null\">{{part.text}}</span>\n    </span>\n    "
+            },] },
+];
+/** @nocollapse */
+CompleterListItemCmp.ctorParameters = function () { return []; };
+CompleterListItemCmp.propDecorators = {
+    'text': [{ type: Input },],
+    'searchStr': [{ type: Input },],
+    'matchClass': [{ type: Input },],
+    'type': [{ type: Input },],
+};
 //# sourceMappingURL=completer-list-item-cmp.js.map

components/completer-list-item-cmp.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"CompleterListItemCmp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"completer-list-item","template":"\n    <span class=\"completer-list-item-holder\" [ngClass]=\"{'completer-title': type === 'title', 'completer-description': type === 'description'}\" >\n        <span class=\"completer-list-item\" *ngFor=\"let part of parts\" [ngClass]=\"part.isMatch ? matchClass : null\">{{part.text}}</span>\n    </span>\n    "}]}],"members":{"text":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"searchStr":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"matchClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ngOnInit":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CompleterListItemCmp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"completer-list-item","template":"\n    <span class=\"completer-list-item-holder\" [ngClass]=\"{'completer-title': type === 'title', 'completer-description': type === 'description'}\" >\n        <span class=\"completer-list-item\" *ngFor=\"let part of parts\" [ngClass]=\"part.isMatch ? matchClass : null\">{{part.text}}</span>\n    </span>\n    "}]}],"members":{"text":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"searchStr":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"matchClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ngOnInit":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"MatchPart":{"__symbolic":"interface"},"CompleterListItemCmp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"completer-list-item","template":"\n    <span class=\"completer-list-item-holder\" [ngClass]=\"{'completer-title': type === 'title', 'completer-description': type === 'description'}\" >\n        <span class=\"completer-list-item\" *ngFor=\"let part of parts\" [ngClass]=\"part.isMatch ? matchClass : null\">{{part.text}}</span>\n    </span>\n    "}]}],"members":{"text":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"searchStr":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"matchClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ngOnInit":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"MatchPart":{"__symbolic":"interface"},"CompleterListItemCmp":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component"},"arguments":[{"selector":"completer-list-item","template":"\n    <span class=\"completer-list-item-holder\" [ngClass]=\"{'completer-title': type === 'title', 'completer-description': type === 'description'}\" >\n        <span class=\"completer-list-item\" *ngFor=\"let part of parts\" [ngClass]=\"part.isMatch ? matchClass : null\">{{part.text}}</span>\n    </span>\n    "}]}],"members":{"text":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"searchStr":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"matchClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"}}]}],"ngOnInit":[{"__symbolic":"method"}]}}}}]

directives/ctr-completer.d.ts

@@ -20,2 +20,3 @@ import { EventEmitter, OnInit } from "@angular/core";
     private hasSelected;
+    private _cancelBlur;
     constructor();
@@ -33,2 +34,4 @@ ngOnInit(): void;
     hasHighlited(): boolean;
+    cancelBlur(cancel: boolean): void;
+    isCancelBlur(): boolean;
 }

directives/ctr-completer.js

@@ -1,10 +0,1 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, 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;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
 import { Directive, EventEmitter, Output } from "@angular/core";
@@ -17,2 +8,3 @@ var CtrCompleter = (function () {
         this.hasSelected = false;
+        this._cancelBlur = false;
     }
@@ -75,19 +67,22 @@ CtrCompleter.prototype.ngOnInit = function () {
     };
+    CtrCompleter.prototype.cancelBlur = function (cancel) {
+        this._cancelBlur = cancel;
+    };
+    CtrCompleter.prototype.isCancelBlur = function () {
+        return this._cancelBlur;
+    };
     return CtrCompleter;
 }());
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], CtrCompleter.prototype, "selected", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", Object)
-], CtrCompleter.prototype, "highlighted", void 0);
-CtrCompleter = __decorate([
-    Directive({
-        selector: "[ctrCompleter]",
-    }),
-    __metadata("design:paramtypes", [])
-], CtrCompleter);
 export { CtrCompleter };
+CtrCompleter.decorators = [
+    { type: Directive, args: [{
+                selector: "[ctrCompleter]",
+            },] },
+];
+/** @nocollapse */
+CtrCompleter.ctorParameters = function () { return []; };
+CtrCompleter.propDecorators = {
+    'selected': [{ type: Output },],
+    'highlighted': [{ type: Output },],
+};
 //# sourceMappingURL=ctr-completer.js.map

directives/ctr-completer.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"CtrCompleter":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[ctrCompleter]"}]}],"members":{"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"highlighted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"registerList":[{"__symbolic":"method"}],"registerDropdown":[{"__symbolic":"method"}],"onHighlighted":[{"__symbolic":"method"}],"onSelected":[{"__symbolic":"method"}],"search":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"selectCurrent":[{"__symbolic":"method"}],"nextRow":[{"__symbolic":"method"}],"prevRow":[{"__symbolic":"method"}],"hasHighlited":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CtrCompleter":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[ctrCompleter]"}]}],"members":{"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"highlighted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"registerList":[{"__symbolic":"method"}],"registerDropdown":[{"__symbolic":"method"}],"onHighlighted":[{"__symbolic":"method"}],"onSelected":[{"__symbolic":"method"}],"search":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"selectCurrent":[{"__symbolic":"method"}],"nextRow":[{"__symbolic":"method"}],"prevRow":[{"__symbolic":"method"}],"hasHighlited":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"CompleterList":{"__symbolic":"interface"},"CompleterDropdown":{"__symbolic":"interface"},"CtrCompleter":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[ctrCompleter]"}]}],"members":{"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"highlighted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"registerList":[{"__symbolic":"method"}],"registerDropdown":[{"__symbolic":"method"}],"onHighlighted":[{"__symbolic":"method"}],"onSelected":[{"__symbolic":"method"}],"search":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"selectCurrent":[{"__symbolic":"method"}],"nextRow":[{"__symbolic":"method"}],"prevRow":[{"__symbolic":"method"}],"hasHighlited":[{"__symbolic":"method"}],"cancelBlur":[{"__symbolic":"method"}],"isCancelBlur":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CompleterList":{"__symbolic":"interface"},"CompleterDropdown":{"__symbolic":"interface"},"CtrCompleter":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[ctrCompleter]"}]}],"members":{"selected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"highlighted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"registerList":[{"__symbolic":"method"}],"registerDropdown":[{"__symbolic":"method"}],"onHighlighted":[{"__symbolic":"method"}],"onSelected":[{"__symbolic":"method"}],"search":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"selectCurrent":[{"__symbolic":"method"}],"nextRow":[{"__symbolic":"method"}],"prevRow":[{"__symbolic":"method"}],"hasHighlited":[{"__symbolic":"method"}],"cancelBlur":[{"__symbolic":"method"}],"isCancelBlur":[{"__symbolic":"method"}]}}}}]

directives/ctr-dropdown.d.ts

@@ -23,2 +23,3 @@ import { ElementRef, OnDestroy, OnInit } from "@angular/core";
     ngOnDestroy(): void;
+    onMouseDown(event: any): void;
     registerRow(row: CtrRowItem): void;
@@ -25,0 +26,0 @@ highlightRow(index: number): void;

directives/ctr-dropdown.js

@@ -1,14 +0,2 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, 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;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-var __param = (this && this.__param) || function (paramIndex, decorator) {
-    return function (target, key) { decorator(target, key, paramIndex); }
-};
-import { Directive, ElementRef, Host } from "@angular/core";
+import { Directive, ElementRef, Host, HostListener } from "@angular/core";
 import { CtrCompleter } from "./ctr-completer";
@@ -37,2 +25,10 @@ var CtrRowItem = (function () {
     };
+    CtrDropdown.prototype.onMouseDown = function (event) {
+        var _this = this;
+        // Support for canceling blur on IE (issue #158)
+        this.completer.cancelBlur(true);
+        setImmediate(function () {
+            _this.completer.cancelBlur(false);
+        });
+    };
     CtrDropdown.prototype.registerRow = function (row) {
@@ -120,10 +116,16 @@ this.rows.push(row);
 }());
-CtrDropdown = __decorate([
-    Directive({
-        selector: "[ctrDropdown]",
-    }),
-    __param(0, Host()),
-    __metadata("design:paramtypes", [CtrCompleter, ElementRef])
-], CtrDropdown);
 export { CtrDropdown };
+CtrDropdown.decorators = [
+    { type: Directive, args: [{
+                selector: "[ctrDropdown]",
+            },] },
+];
+/** @nocollapse */
+CtrDropdown.ctorParameters = function () { return [
+    { type: CtrCompleter, decorators: [{ type: Host },] },
+    { type: ElementRef, },
+]; };
+CtrDropdown.propDecorators = {
+    'onMouseDown': [{ type: HostListener, args: ["mousedown", ["$event"],] },],
+};
 //# sourceMappingURL=ctr-dropdown.js.map

directives/ctr-dropdown.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"CtrRowItem":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":13,"character":28,"context":{"typeName":"CtrRowElement"}},{"__symbolic":"reference","name":"number"}]}]}},"CtrDropdown":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[ctrDropdown]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host"}}],null],"parameters":[{"__symbolic":"reference","module":"./ctr-completer","name":"CtrCompleter"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"registerRow":[{"__symbolic":"method"}],"highlightRow":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"onSelected":[{"__symbolic":"method"}],"selectCurrent":[{"__symbolic":"method"}],"nextRow":[{"__symbolic":"method"}],"prevRow":[{"__symbolic":"method"}],"dropdownScrollTopTo":[{"__symbolic":"method"}],"dropdownRowTop":[{"__symbolic":"method"}],"dropdownHeight":[{"__symbolic":"method"}],"dropdownRowOffsetHeight":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CtrRowItem":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"error","message":"Could not resolve type","line":13,"character":28,"context":{"typeName":"CtrRowElement"}},{"__symbolic":"reference","name":"number"}]}]}},"CtrDropdown":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[ctrDropdown]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host"}}],null],"parameters":[{"__symbolic":"reference","module":"./ctr-completer","name":"CtrCompleter"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"registerRow":[{"__symbolic":"method"}],"highlightRow":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"onSelected":[{"__symbolic":"method"}],"selectCurrent":[{"__symbolic":"method"}],"nextRow":[{"__symbolic":"method"}],"prevRow":[{"__symbolic":"method"}],"dropdownScrollTopTo":[{"__symbolic":"method"}],"dropdownRowTop":[{"__symbolic":"method"}],"dropdownHeight":[{"__symbolic":"method"}],"dropdownRowOffsetHeight":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"CtrRowElement":{"__symbolic":"interface"},"CtrRowItem":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"number"}]}]}},"CtrDropdown":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[ctrDropdown]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host"}}],null],"parameters":[{"__symbolic":"reference","module":"./ctr-completer","name":"CtrCompleter"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onMouseDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["mousedown",["$event"]]}]}],"registerRow":[{"__symbolic":"method"}],"highlightRow":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"onSelected":[{"__symbolic":"method"}],"selectCurrent":[{"__symbolic":"method"}],"nextRow":[{"__symbolic":"method"}],"prevRow":[{"__symbolic":"method"}],"dropdownScrollTopTo":[{"__symbolic":"method"}],"dropdownRowTop":[{"__symbolic":"method"}],"dropdownHeight":[{"__symbolic":"method"}],"dropdownRowOffsetHeight":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CtrRowElement":{"__symbolic":"interface"},"CtrRowItem":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"number"}]}]}},"CtrDropdown":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[ctrDropdown]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host"}}],null],"parameters":[{"__symbolic":"reference","module":"./ctr-completer","name":"CtrCompleter"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"onMouseDown":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["mousedown",["$event"]]}]}],"registerRow":[{"__symbolic":"method"}],"highlightRow":[{"__symbolic":"method"}],"clear":[{"__symbolic":"method"}],"onSelected":[{"__symbolic":"method"}],"selectCurrent":[{"__symbolic":"method"}],"nextRow":[{"__symbolic":"method"}],"prevRow":[{"__symbolic":"method"}],"dropdownScrollTopTo":[{"__symbolic":"method"}],"dropdownRowTop":[{"__symbolic":"method"}],"dropdownHeight":[{"__symbolic":"method"}],"dropdownRowOffsetHeight":[{"__symbolic":"method"}]}}}}]

directives/ctr-input.d.ts

@@ -1,2 +0,2 @@
-import { EventEmitter } from "@angular/core";
+import { ElementRef, EventEmitter } from "@angular/core";
 import { NgModel } from "@angular/forms";
@@ -7,2 +7,3 @@ import { CtrCompleter } from "./ctr-completer";
     private ngModel;
+    private el;
     clearSelected: boolean;
@@ -14,3 +15,3 @@ overrideSuggested: boolean;
     private _displayStr;
-    constructor(completer: CtrCompleter, ngModel: NgModel);
+    constructor(completer: CtrCompleter, ngModel: NgModel, el: ElementRef);
     keyupHandler(event: any): void;
@@ -17,0 +18,0 @@ keydownHandler(event: any): void;

directives/ctr-input.js

@@ -1,14 +0,2 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, 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;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-var __param = (this && this.__param) || function (paramIndex, decorator) {
-    return function (target, key) { decorator(target, key, paramIndex); }
-};
-import { Directive, EventEmitter, Host, HostListener, Input, Output } from "@angular/core";
+import { Directive, ElementRef, EventEmitter, Host, HostListener, Input, Output } from "@angular/core";
 import { NgModel } from "@angular/forms";
@@ -25,6 +13,7 @@ import { CtrCompleter } from "./ctr-completer";
 var CtrInput = (function () {
-    function CtrInput(completer, ngModel) {
+    function CtrInput(completer, ngModel, el) {
         var _this = this;
         this.completer = completer;
         this.ngModel = ngModel;
+        this.el = el;
         this.clearSelected = false;
@@ -112,2 +101,10 @@ this.overrideSuggested = false;
         var _this = this;
+        // Check if we need to cancel Blur for IE
+        if (this.completer.isCancelBlur()) {
+            setImmediate(function () {
+                // get the focus back
+                _this.el.nativeElement.focus();
+            });
+            return;
+        }
         setTimeout(function () {
@@ -156,44 +153,23 @@ if (_this.overrideSuggested) {
 }());
-__decorate([
-    Input("clearSelected"),
-    __metadata("design:type", Object)
-], CtrInput.prototype, "clearSelected", void 0);
-__decorate([
-    Input("overrideSuggested"),
-    __metadata("design:type", Object)
-], CtrInput.prototype, "overrideSuggested", void 0);
-__decorate([
-    Input("fillHighlighted"),
-    __metadata("design:type", Object)
-], CtrInput.prototype, "fillHighlighted", void 0);
-__decorate([
-    Output(),
-    __metadata("design:type", EventEmitter)
-], CtrInput.prototype, "ngModelChange", void 0);
-__decorate([
-    HostListener("keyup", ["$event"]),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], CtrInput.prototype, "keyupHandler", null);
-__decorate([
-    HostListener("keydown", ["$event"]),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], CtrInput.prototype, "keydownHandler", null);
-__decorate([
-    HostListener("blur", ["$event"]),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], CtrInput.prototype, "onBlur", null);
-CtrInput = __decorate([
-    Directive({
-        selector: "[ctrInput]",
-    }),
-    __param(0, Host()),
-    __metadata("design:paramtypes", [CtrCompleter, NgModel])
-], CtrInput);
 export { CtrInput };
+CtrInput.decorators = [
+    { type: Directive, args: [{
+                selector: "[ctrInput]",
+            },] },
+];
+/** @nocollapse */
+CtrInput.ctorParameters = function () { return [
+    { type: CtrCompleter, decorators: [{ type: Host },] },
+    { type: NgModel, },
+    { type: ElementRef, },
+]; };
+CtrInput.propDecorators = {
+    'clearSelected': [{ type: Input, args: ["clearSelected",] },],
+    'overrideSuggested': [{ type: Input, args: ["overrideSuggested",] },],
+    'fillHighlighted': [{ type: Input, args: ["fillHighlighted",] },],
+    'ngModelChange': [{ type: Output },],
+    'keyupHandler': [{ type: HostListener, args: ["keyup", ["$event"],] },],
+    'keydownHandler': [{ type: HostListener, args: ["keydown", ["$event"],] },],
+    'onBlur': [{ type: HostListener, args: ["blur", ["$event"],] },],
+};
 //# sourceMappingURL=ctr-input.js.map

directives/ctr-input.metadata.json

@@ -1,1 +0,1 @@
-[{"__symbolic":"module","version":3,"metadata":{"CtrInput":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[ctrInput]"}]}],"members":{"clearSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["clearSelected"]}]}],"overrideSuggested":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["overrideSuggested"]}]}],"fillHighlighted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["fillHighlighted"]}]}],"ngModelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host"}}],null],"parameters":[{"__symbolic":"reference","module":"./ctr-completer","name":"CtrCompleter"},{"__symbolic":"reference","module":"@angular/forms","name":"NgModel"}]}],"keyupHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keyup",["$event"]]}]}],"keydownHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keydown",["$event"]]}]}],"onBlur":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["blur",["$event"]]}]}],"handleSelection":[{"__symbolic":"method"}],"restoreSearchValue":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CtrInput":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[ctrInput]"}]}],"members":{"clearSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["clearSelected"]}]}],"overrideSuggested":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["overrideSuggested"]}]}],"fillHighlighted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["fillHighlighted"]}]}],"ngModelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host"}}],null],"parameters":[{"__symbolic":"reference","module":"./ctr-completer","name":"CtrCompleter"},{"__symbolic":"reference","module":"@angular/forms","name":"NgModel"}]}],"keyupHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keyup",["$event"]]}]}],"keydownHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keydown",["$event"]]}]}],"onBlur":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["blur",["$event"]]}]}],"handleSelection":[{"__symbolic":"method"}],"restoreSearchValue":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":3,"metadata":{"CtrInput":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[ctrInput]"}]}],"members":{"clearSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["clearSelected"]}]}],"overrideSuggested":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["overrideSuggested"]}]}],"fillHighlighted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["fillHighlighted"]}]}],"ngModelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host"}}],null,null],"parameters":[{"__symbolic":"reference","module":"./ctr-completer","name":"CtrCompleter"},{"__symbolic":"reference","module":"@angular/forms","name":"NgModel"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"keyupHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keyup",["$event"]]}]}],"keydownHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keydown",["$event"]]}]}],"onBlur":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["blur",["$event"]]}]}],"handleSelection":[{"__symbolic":"method"}],"restoreSearchValue":[{"__symbolic":"method"}]}}}},{"__symbolic":"module","version":1,"metadata":{"CtrInput":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive"},"arguments":[{"selector":"[ctrInput]"}]}],"members":{"clearSelected":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["clearSelected"]}]}],"overrideSuggested":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["overrideSuggested"]}]}],"fillHighlighted":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input"},"arguments":["fillHighlighted"]}]}],"ngModelChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output"}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host"}}],null,null],"parameters":[{"__symbolic":"reference","module":"./ctr-completer","name":"CtrCompleter"},{"__symbolic":"reference","module":"@angular/forms","name":"NgModel"},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef"}]}],"keyupHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keyup",["$event"]]}]}],"keydownHandler":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["keydown",["$event"]]}]}],"onBlur":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["blur",["$event"]]}]}],"handleSelection":[{"__symbolic":"method"}],"restoreSearchValue":[{"__symbolic":"method"}]}}}}]

directives/ctr-list.d.ts

@@ -0,1 +1,2 @@
+import "rxjs/add/observable/timer";
 import { ChangeDetectorRef, OnInit, TemplateRef, ViewContainerRef } from "@angular/core";
@@ -2,0 +3,0 @@ import { CtrCompleter, CompleterList } from "./ctr-completer";

directives/ctr-list.js

@@ -1,15 +0,4 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, 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;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-var __param = (this && this.__param) || function (paramIndex, decorator) {
-    return function (target, key) { decorator(target, key, paramIndex); }
-};
+import "rxjs/add/observable/timer";
 import { ChangeDetectorRef, Directive, Host, Input, TemplateRef, ViewContainerRef } from "@angular/core";
-import { Observable } from "rxjs/Rx";
+import { Observable, } from "rxjs/Observable";
 import { CtrCompleter } from "./ctr-completer";
@@ -26,3 +15,3 @@ import { MIN_SEARCH_LENGTH, PAUSE, CLEAR_TIMEOUT } from "../globals";
 export { CtrListContext };
-var CtrList = CtrList_1 = (function () {
+var CtrList = (function () {
     function CtrList(completer, templateRef, viewContainer, cd) {
@@ -61,3 +50,3 @@ this.completer = completer;
                     _this.ctx.results = results;
-                    if (_this.ctrListAutoMatch && results.length === 1 && results[0].title && CtrList_1.hasTerm(_this.term) &&
+                    if (_this.ctrListAutoMatch && results.length === 1 && results[0].title && CtrList.hasTerm(_this.term) &&
                         results[0].title.toLocaleLowerCase() === _this.term.toLocaleLowerCase()) {
@@ -76,3 +65,3 @@ // Do automatch
         var _this = this;
-        if (CtrList_1.hasTerm(term) && term.length >= this.ctrListMinSearchLength && this.term !== term) {
+        if (CtrList.hasTerm(term) && term.length >= this.ctrListMinSearchLength && this.term !== term) {
             if (this.searchTimer) {
@@ -120,3 +109,3 @@ this.searchTimer.unsubscribe();
         // Begin the search
-        if (!CtrList_1.hasTerm(term) || term.length < this.ctrListMinSearchLength) {
+        if (!CtrList.hasTerm(term) || term.length < this.ctrListMinSearchLength) {
             this.ctx.searching = false;
@@ -136,3 +125,3 @@ return;
         if (console && console.error) {
-            console.error(errMsg); // log to console 
+            console.error(errMsg); // log to console
         }
@@ -150,31 +139,21 @@ this.refreshTemplate();
 }());
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], CtrList.prototype, "ctrListMinSearchLength", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], CtrList.prototype, "ctrListPause", void 0);
-__decorate([
-    Input(),
-    __metadata("design:type", Object)
-], CtrList.prototype, "ctrListAutoMatch", void 0);
-__decorate([
-    Input("ctrList"),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], CtrList.prototype, "dataService", null);
-CtrList = CtrList_1 = __decorate([
-    Directive({
-        selector: "[ctrList]",
-    }),
-    __param(0, Host()),
-    __metadata("design:paramtypes", [CtrCompleter,
-        TemplateRef,
-        ViewContainerRef,
-        ChangeDetectorRef])
-], CtrList);
 export { CtrList };
-var CtrList_1;
+CtrList.decorators = [
+    { type: Directive, args: [{
+                selector: "[ctrList]",
+            },] },
+];
+/** @nocollapse */
+CtrList.ctorParameters = function () { return [
+    { type: CtrCompleter, decorators: [{ type: Host },] },
+    { type: TemplateRef, },
+    { type: ViewContainerRef, },
+    { type: ChangeDetectorRef, },
+]; };
+CtrList.propDecorators = {
+    'ctrListMinSearchLength': [{ type: Input },],
+    'ctrListPause': [{ type: Input },],
+    'ctrListAutoMatch': [{ type: Input },],
+    'dataService': [{ type: Input, args: ["ctrList",] },],
+};
 //# sourceMappingURL=ctr-list.js.map

directives/ctr-row.js

@@ -1,13 +0,1 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, 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;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-var __param = (this && this.__param) || function (paramIndex, decorator) {
-    return function (target, key) { decorator(target, key, paramIndex); }
-};
 import { Directive, ElementRef, Host, HostListener, Input, Renderer } from "@angular/core";
@@ -57,32 +45,20 @@ import { CtrDropdown, CtrRowItem } from "./ctr-dropdown";
 }());
-__decorate([
-    Input(),
-    __metadata("design:type", Number),
-    __metadata("design:paramtypes", [Number])
-], CtrRow.prototype, "ctrRow", null);
-__decorate([
-    Input(),
-    __metadata("design:type", Object),
-    __metadata("design:paramtypes", [Object])
-], CtrRow.prototype, "dataItem", null);
-__decorate([
-    HostListener("click", ["$event"]),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], CtrRow.prototype, "onClick", null);
-__decorate([
-    HostListener("mouseenter", ["$event"]),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Object]),
-    __metadata("design:returntype", void 0)
-], CtrRow.prototype, "onMouseEnter", null);
-CtrRow = __decorate([
-    Directive({
-        selector: "[ctrRow]",
-    }),
-    __param(2, Host()),
-    __metadata("design:paramtypes", [ElementRef, Renderer, CtrDropdown])
-], CtrRow);
 export { CtrRow };
+CtrRow.decorators = [
+    { type: Directive, args: [{
+                selector: "[ctrRow]",
+            },] },
+];
+/** @nocollapse */
+CtrRow.ctorParameters = function () { return [
+    { type: ElementRef, },
+    { type: Renderer, },
+    { type: CtrDropdown, decorators: [{ type: Host },] },
+]; };
+CtrRow.propDecorators = {
+    'ctrRow': [{ type: Input },],
+    'dataItem': [{ type: Input },],
+    'onClick': [{ type: HostListener, args: ["click", ["$event"],] },],
+    'onMouseEnter': [{ type: HostListener, args: ["mouseenter", ["$event"],] },],
+};
 //# sourceMappingURL=ctr-row.js.map

ng2-completer.module.js

@@ -1,7 +0,1 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, 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;
-};
 import { NgModule } from "@angular/core";
@@ -25,35 +19,37 @@ import { FormsModule } from "@angular/forms";
 }());
-Ng2CompleterModule = __decorate([
-    NgModule({
-        imports: [
-            CommonModule,
-            FormsModule,
-            HttpModule
-        ],
-        declarations: [
-            CompleterListItemCmp,
-            CtrCompleter,
-            CtrDropdown,
-            CtrInput,
-            CtrList,
-            CtrRow,
-            CompleterCmp
-        ],
-        exports: [
-            CompleterCmp,
-            CompleterListItemCmp,
-            CtrCompleter,
-            CtrDropdown,
-            CtrInput,
-            CtrList,
-            CtrRow
-        ],
-        providers: [
-            CompleterService,
-            LocalDataFactoryProvider,
-            RemoteDataFactoryProvider
-        ]
-    })
-], Ng2CompleterModule);
 export { Ng2CompleterModule };
+Ng2CompleterModule.decorators = [
+    { type: NgModule, args: [{
+                imports: [
+                    CommonModule,
+                    FormsModule,
+                    HttpModule
+                ],
+                declarations: [
+                    CompleterListItemCmp,
+                    CtrCompleter,
+                    CtrDropdown,
+                    CtrInput,
+                    CtrList,
+                    CtrRow,
+                    CompleterCmp
+                ],
+                exports: [
+                    CompleterCmp,
+                    CompleterListItemCmp,
+                    CtrCompleter,
+                    CtrDropdown,
+                    CtrInput,
+                    CtrList,
+                    CtrRow
+                ],
+                providers: [
+                    CompleterService,
+                    LocalDataFactoryProvider,
+                    RemoteDataFactoryProvider
+                ]
+            },] },
+];
+/** @nocollapse */
+Ng2CompleterModule.ctorParameters = function () { return []; };
 //# sourceMappingURL=ng2-completer.module.js.map

ng2-completer.umd.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/forms"),require("@angular/http"),require("rxjs/Observable"),require("rxjs/Subject"),require("rxjs/add/operator/map"),require("rxjs/add/operator/catch"),require("rxjs/Rx"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/forms","@angular/http","rxjs/Observable","rxjs/Subject","rxjs/add/operator/map","rxjs/add/operator/catch","rxjs/Rx","@angular/common"],e):e(t.ng2Completer=t.ng2Completer||{},t.ng.core,t.ng.forms,t.ng.http,t.Rx,t.Rx,t.Rx.Operator.map,t.Rx.Operator.catch,t.Rx,t.ng.common)}(this,function(t,e,r,i,o,n,s,c,p,l){"use strict";function a(){return function(){return new t.LocalData}}function h(t){return function(){return new b(t)}}var u=function(t,e,r,i){var o,n=arguments.length,s=n<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,r,i);else for(var c=t.length-1;c>=0;c--)(o=t[c])&&(s=(n<3?o(s):n>3?o(e,r,s):o(e,r))||s);return n>3&&s&&Object.defineProperty(e,r,s),s},d=function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)};t.CtrCompleter=function(){function t(){this.selected=new e.EventEmitter,this.highlighted=new e.EventEmitter,this._hasHighlited=!1,this.hasSelected=!1}return t.prototype.ngOnInit=function(){},t.prototype.registerList=function(t){this.list=t},t.prototype.registerDropdown=function(t){this.dropdown=t},t.prototype.onHighlighted=function(t){this.highlighted.emit(t),this._hasHighlited=!!t},t.prototype.onSelected=function(t){this.selected.emit(t),t&&(this.hasSelected=!0),this.clear()},t.prototype.search=function(t){this.hasSelected&&(this.selected.emit(null),this.hasSelected=!1),this.list&&this.list.search(t)},t.prototype.clear=function(){this.dropdown&&this.dropdown.clear(),this.list&&this.list.clear(),this._hasHighlited=!1},t.prototype.selectCurrent=function(){this.dropdown&&this.dropdown.selectCurrent()},t.prototype.nextRow=function(){this.dropdown&&this.dropdown.nextRow()},t.prototype.prevRow=function(){this.dropdown&&this.dropdown.prevRow()},t.prototype.hasHighlited=function(){return this._hasHighlited},t}(),u([e.Output(),d("design:type",Object)],t.CtrCompleter.prototype,"selected",void 0),u([e.Output(),d("design:type",Object)],t.CtrCompleter.prototype,"highlighted",void 0),t.CtrCompleter=u([e.Directive({selector:"[ctrCompleter]"}),d("design:paramtypes",[])],t.CtrCompleter);var f=function(){var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)e.hasOwnProperty(r)&&(t[r]=e[r])};return function(e,r){function i(){this.constructor=e}t(e,r),e.prototype=null===r?Object.create(r):(i.prototype=r.prototype,new i)}}(),m=function(t){function e(){return t.call(this)||this}return f(e,t),e.prototype.cancel=function(){},e.prototype.searchFields=function(t){return this._searchFields=t,this},e.prototype.titleField=function(t){return this._titleField=t,this},e.prototype.descriptionField=function(t){return this._descriptionField=t,this},e.prototype.imageField=function(t){return this._imageField=t,this},e.prototype.extractMatches=function(t,e){var r=this,i=[],o=this._searchFields?this._searchFields.split(","):null;return i=null!==this._searchFields&&void 0!==this._searchFields&&""!=e?t.filter(function(t){var i=o?o.map(function(e){return r.extractValue(t,e)}).filter(function(t){return!!t}):[t];return i.some(function(t){return t.toString().toLowerCase().indexOf(e.toString().toLowerCase())>=0})}):t},e.prototype.extractTitle=function(t){var e=this;return this._titleField.split(",").map(function(r){return e.extractValue(t,r)}).join(" ")},e.prototype.extractValue=function(t,e){var r,i;if(e){r=e.split("."),i=t;for(var o=0;o<r.length;o++)i&&(i=i[r[o]])}else i=t;return i},e.prototype.processResults=function(t){var e,r,i,o="",n=null,s=[];if(t&&t.length>0)for(e=0;e<t.length;e++)r=this._titleField?this.extractTitle(t[e]):t[e],this._descriptionField&&(o=i=this.extractValue(t[e],this._descriptionField)),this._imageField&&(n=this.extractValue(t[e],this._imageField)),s.push({title:r,description:i,image:n,originalObject:t[e]});return s},e}(n.Subject),g=function(){var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)e.hasOwnProperty(r)&&(t[r]=e[r])};return function(e,r){function i(){this.constructor=e}t(e,r),e.prototype=null===r?Object.create(r):(i.prototype=r.prototype,new i)}}(),y=function(t,e,r,i){var o,n=arguments.length,s=n<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,r,i);else for(var c=t.length-1;c>=0;c--)(o=t[c])&&(s=(n<3?o(s):n>3?o(e,r,s):o(e,r))||s);return n>3&&s&&Object.defineProperty(e,r,s),s},v=function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)};t.LocalData=function(t){function e(){return t.call(this)||this}return g(e,t),e.prototype.data=function(t){var e=this;return t instanceof o.Observable?t.subscribe(function(t){e._data=t,e.savedTerm&&e.search(e.savedTerm)}):this._data=t,this},e.prototype.search=function(t){if(this._data){this.savedTerm=null;var e=this.extractMatches(this._data,t);this.next(this.processResults(e))}else this.savedTerm=t},e}(m),t.LocalData=y([e.Injectable(),v("design:paramtypes",[])],t.LocalData);var C=function(){var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)e.hasOwnProperty(r)&&(t[r]=e[r])};return function(e,r){function i(){this.constructor=e}t(e,r),e.prototype=null===r?Object.create(r):(i.prototype=r.prototype,new i)}}(),b=function(t){function e(e){var r=t.call(this)||this;return r.http=e,r._urlFormater=null,r._dataField=null,r}return C(e,t),e.prototype.remoteUrl=function(t){return this._remoteUrl=t,this},e.prototype.urlFormater=function(t){this._urlFormater=t},e.prototype.dataField=function(t){this._dataField=t},e.prototype.headers=function(t){this._headers=t},e.prototype.search=function(t){var e=this;this.cancel();var r="";r=this._urlFormater?this._urlFormater(t):this._remoteUrl+encodeURIComponent(t),this.remoteSearch=this.http.get(r,{headers:this._headers||new i.Headers}).map(function(t){return t.json()}).map(function(r){var i=e.extractValue(r,e._dataField);return e.extractMatches(i,t)}).map(function(t){var r=e.processResults(t);return e.next(r),r}).catch(function(t){return e.error(t),null}).subscribe()},e.prototype.cancel=function(){this.remoteSearch&&this.remoteSearch.unsubscribe()},e}(m),w=function(t,e,r,i){var o,n=arguments.length,s=n<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,r,i);else for(var c=t.length-1;c>=0;c--)(o=t[c])&&(s=(n<3?o(s):n>3?o(e,r,s):o(e,r))||s);return n>3&&s&&Object.defineProperty(e,r,s),s},S=function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)},O=function(t,e){return function(r,i){e(r,i,t)}};t.CompleterService=function(){function t(t,e){this.localDataFactory=t,this.remoteDataFactory=e}return t.prototype.local=function(t,e,r){void 0===e&&(e=""),void 0===r&&(r="");var i=this.localDataFactory();return i.data(t).searchFields(e).titleField(r)},t.prototype.remote=function(t,e,r){void 0===e&&(e=""),void 0===r&&(r="");var i=this.remoteDataFactory();return i.remoteUrl(t).searchFields(e).titleField(r)},t}(),t.CompleterService=w([e.Injectable(),O(0,e.Inject(t.LocalData)),O(1,e.Inject(b)),S("design:paramtypes",[Object,Object])],t.CompleterService);var R=524288,x=3,j=250,I="Searching...",_="No results found",H=100,L=function(t,e,r,i){var o,n=arguments.length,s=n<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,r,i);else for(var c=t.length-1;c>=0;c--)(o=t[c])&&(s=(n<3?o(s):n>3?o(e,r,s):o(e,r))||s);return n>3&&s&&Object.defineProperty(e,r,s),s},D=function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)},T=function(){},F={provide:r.NG_VALUE_ACCESSOR,useExisting:e.forwardRef(function(){return t.CompleterCmp}),multi:!0};t.CompleterCmp=function(){function t(t){this.completerService=t,this.inputName="",this.pause=j,this.minSearchLength=x,this.maxChars=R,this.overrideSuggested=!1,this.clearSelected=!1,this.fillHighlighted=!0,this.placeholder="",this.textSearching=I,this.textNoResults=_,this.autoMatch=!1,this.disableInput=!1,this.autofocus=!1,this.selected=new e.EventEmitter,this.highlighted=new e.EventEmitter,this.blur=new e.EventEmitter,this.searchStr="",this.control=new r.FormControl(""),this.displaySearching=!0,this._onTouchedCallback=T,this._onChangeCallback=T}return Object.defineProperty(t.prototype,"value",{get:function(){return this.searchStr},set:function(t){t!==this.searchStr&&(this.searchStr=t),this._onChangeCallback(t)},enumerable:!0,configurable:!0}),t.prototype.onTouched=function(){this._onTouchedCallback()},t.prototype.writeValue=function(t){this.searchStr=t},t.prototype.registerOnChange=function(t){this._onChangeCallback=t},t.prototype.registerOnTouched=function(t){this._onTouchedCallback=t},t.prototype.ngAfterViewInit=function(){this.autofocus&&this.ctrInput&&this.ctrInput.nativeElement.focus()},t.prototype.ngOnInit=function(){var t=this;this.datasource&&(this.datasource instanceof Array?this.dataService=this.completerService.local(this.datasource):"string"==typeof this.datasource?this.dataService=this.completerService.remote(this.datasource):this.dataService=this.datasource),this.completer.selected.subscribe(function(e){var r=e?e.title:"";t.selected.emit(e),t._onChangeCallback(r)}),this.completer.highlighted.subscribe(function(e){t.highlighted.emit(e)}),"false"===this.textSearching&&(this.displaySearching=!1)},t.prototype.onBlur=function(){this.blur.emit(),this.onTouched()},t.prototype.onChange=function(t){this.value=t},t.prototype.open=function(t){void 0===t&&(t=""),this.completer.search(t)},t.prototype.close=function(){this.completer.clear()},t}(),L([e.Input(),D("design:type",Object)],t.CompleterCmp.prototype,"dataService",void 0),L([e.Input(),D("design:type",Object)],t.CompleterCmp.prototype,"datasource",void 0),L([e.Input(),D("design:type",Object)],t.CompleterCmp.prototype,"inputName",void 0),L([e.Input(),D("design:type",Object)],t.CompleterCmp.prototype,"pause",void 0),L([e.Input(),D("design:type",Object)],t.CompleterCmp.prototype,"minSearchLength",void 0),L([e.Input(),D("design:type",Object)],t.CompleterCmp.prototype,"maxChars",void 0),L([e.Input(),D("design:type",Object)],t.CompleterCmp.prototype,"overrideSuggested",void 0),L([e.Input(),D("design:type",Object)],t.CompleterCmp.prototype,"clearSelected",void 0),L([e.Input(),D("design:type",Object)],t.CompleterCmp.prototype,"fillHighlighted",void 0),L([e.Input(),D("design:type",Object)],t.CompleterCmp.prototype,"placeholder",void 0),L([e.Input(),D("design:type",String)],t.CompleterCmp.prototype,"matchClass",void 0),L([e.Input(),D("design:type",Object)],t.CompleterCmp.prototype,"textSearching",void 0),L([e.Input(),D("design:type",Object)],t.CompleterCmp.prototype,"textNoResults",void 0),L([e.Input(),D("design:type",Number)],t.CompleterCmp.prototype,"fieldTabindex",void 0),L([e.Input(),D("design:type",Object)],t.CompleterCmp.prototype,"autoMatch",void 0),L([e.Input(),D("design:type",Object)],t.CompleterCmp.prototype,"disableInput",void 0),L([e.Input(),D("design:type",String)],t.CompleterCmp.prototype,"inputClass",void 0),L([e.Input(),D("design:type",Object)],t.CompleterCmp.prototype,"autofocus",void 0),L([e.Output(),D("design:type",Object)],t.CompleterCmp.prototype,"selected",void 0),L([e.Output(),D("design:type",Object)],t.CompleterCmp.prototype,"highlighted",void 0),L([e.Output(),D("design:type",Object)],t.CompleterCmp.prototype,"blur",void 0),L([e.ViewChild(t.CtrCompleter),D("design:type",t.CtrCompleter)],t.CompleterCmp.prototype,"completer",void 0),L([e.ViewChild("ctrInput"),D("design:type",e.ElementRef)],t.CompleterCmp.prototype,"ctrInput",void 0),t.CompleterCmp=L([e.Component({selector:"ng2-completer",template:'\n        <div class="completer-holder" ctrCompleter>\n            <input #ctrInput type="search" class="completer-input" ctrInput [ngClass]="inputClass" [(ngModel)]="searchStr" (ngModelChange)="onChange($event)" [attr.name]="inputName" [placeholder]="placeholder"\n                [attr.maxlength]="maxChars" [tabindex]="fieldTabindex" [disabled]="disableInput" [clearSelected]="clearSelected" [overrideSuggested]="overrideSuggested" \n                [fillHighlighted]="fillHighlighted" (blur)="onBlur()" autocomplete="off" autocorrect="off" autocapitalize="off" />\n\n            <div class="completer-dropdown-holder" *ctrList="dataService; minSearchLength: minSearchLength; pause: pause; autoMatch: autoMatch; let items = results; let searchActive = searching; let isInitialized = searchInitialized;">\n                <div class="completer-dropdown" ctrDropdown *ngIf="isInitialized">\n                    <div *ngIf="searchActive && displaySearching" class="completer-searching">{{textSearching}}</div>\n                    <div *ngIf="!searchActive && (!items || items.length === 0)" class="completer-no-results">{{textNoResults}}</div>\n                    <div class="completer-row-wrapper" *ngFor="let item of items; let rowIndex=index">\n                        <div class="completer-row" [ctrRow]="rowIndex" [dataItem]="item">\n                            <div *ngIf="item.image || item.image === \'\'" class="completer-image-holder">\n                                <img *ngIf="item.image != \'\'" src="{{item.image}}" class="completer-image" />\n                                <div *ngIf="item.image === \'\'" class="completer-image-default"></div>\n                            </div>\n                            <div class="completer-item-text" [ngClass]="{\'completer-item-text-image\': item.image || item.image === \'\' }">\n                                <completer-list-item class="completer-title" [text]="item.title" [matchClass]="matchClass" [searchStr]="searchStr" [type]="\'title\'"></completer-list-item>\n                                <completer-list-item *ngIf="item.description && item.description != \'\'" class="completer-description" [text]="item.description"\n                                    [matchClass]="matchClass" [searchStr]="searchStr" [type]="\'description\'">\n                                </completer-list-item>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    ',styles:['\n    .completer-dropdown {\n        border-color: #ececec;\n        border-width: 1px;\n        border-style: solid;\n        border-radius: 2px;\n        width: 250px;\n        padding: 6px;\n        cursor: pointer;\n        z-index: 9999;\n        position: absolute;\n        margin-top: -6px;\n        background-color: #ffffff;\n    }\n\n    .completer-row {\n        padding: 5px;\n        color: #000000;\n        margin-bottom: 4px;\n        clear: both;\n        display: inline-block;\n        width: 103%;\n    }\n\n    .completer-selected-row {\n        background-color: lightblue;\n        color: #ffffff;\n    }\n\n    .completer-description {\n        font-size: 14px;\n    }\n\n    .completer-image-default {\n        width: 16px; \n        height: 16px;\n        background-image: url("demo/res/img/default.png");\n    }\n\n    .completer-image-holder {\n        float: left;\n        width: 10%;\n    }\n    .completer-item-text-image {\n        float: right;\n        width: 90%;\n    }\n    '],providers:[F]}),D("design:paramtypes",[t.CompleterService])],t.CompleterCmp);var M=function(t,e,r,i){var o,n=arguments.length,s=n<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,r,i);else for(var c=t.length-1;c>=0;c--)(o=t[c])&&(s=(n<3?o(s):n>3?o(e,r,s):o(e,r))||s);return n>3&&s&&Object.defineProperty(e,r,s),s},E=function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)};t.CompleterListItemCmp=function(){function t(){this.parts=[]}return t.prototype.ngOnInit=function(){if(!this.searchStr)return void this.parts.push({isMatch:!1,text:this.text});for(var t=this.text.toLowerCase(),e=t.indexOf(this.searchStr.toLowerCase()),r=0;e>=0;){var i=this.text.slice(e,e+this.searchStr.length);if(0===e)this.parts.push({isMatch:!0,text:i}),r+=this.searchStr.length;else if(e>0){var o=this.text.slice(r,e);this.parts.push({isMatch:!1,text:o}),this.parts.push({isMatch:!0,text:i}),r+=this.searchStr.length+o.length}e=t.indexOf(this.searchStr.toLowerCase(),r)}r<this.text.length&&this.parts.push({isMatch:!1,text:this.text.slice(r,this.text.length)})},t}(),M([e.Input(),E("design:type",String)],t.CompleterListItemCmp.prototype,"text",void 0),M([e.Input(),E("design:type",String)],t.CompleterListItemCmp.prototype,"searchStr",void 0),M([e.Input(),E("design:type",String)],t.CompleterListItemCmp.prototype,"matchClass",void 0),M([e.Input(),E("design:type",String)],t.CompleterListItemCmp.prototype,"type",void 0),t.CompleterListItemCmp=M([e.Component({selector:"completer-list-item",template:'\n    <span class="completer-list-item-holder" [ngClass]="{\'completer-title\': type === \'title\', \'completer-description\': type === \'description\'}" >\n        <span class="completer-list-item" *ngFor="let part of parts" [ngClass]="part.isMatch ? matchClass : null">{{part.text}}</span>\n    </span>\n    '})],t.CompleterListItemCmp);var P={provide:t.LocalData,useFactory:a},k={provide:b,useFactory:h,deps:[i.Http]},N=function(t,e,r,i){var o,n=arguments.length,s=n<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,r,i);else for(var c=t.length-1;c>=0;c--)(o=t[c])&&(s=(n<3?o(s):n>3?o(e,r,s):o(e,r))||s);return n>3&&s&&Object.defineProperty(e,r,s),s},V=function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)},A=function(t,e){return function(r,i){e(r,i,t)}},z=function(){function t(t,e){this.row=t,this.index=e}return t}();t.CtrDropdown=function(){function t(t,e){this.completer=t,this.el=e,this.rows=[],this.completer.registerDropdown(this)}return t.prototype.ngOnInit=function(){var t=getComputedStyle(this.el.nativeElement);this.isScrollOn=t.maxHeight&&"auto"===t.overflowY},t.prototype.ngOnDestroy=function(){this.completer.registerDropdown(null)},t.prototype.registerRow=function(t){this.rows.push(t)},t.prototype.highlightRow=function(t){var e=this.rows.find(function(e){return e.index===t});return t<0?(this.currHighlited&&this.currHighlited.row.setHighlited(!1),this.currHighlited=void 0,void this.completer.onHighlighted(null)):void(e&&(this.currHighlited&&this.currHighlited.row.setHighlited(!1),this.currHighlited=e,this.currHighlited.row.setHighlited(!0),this.completer.onHighlighted(this.currHighlited.row.getDataItem())))},t.prototype.clear=function(){this.rows=[]},t.prototype.onSelected=function(t){this.completer.onSelected(t)},t.prototype.selectCurrent=function(){this.currHighlited?this.onSelected(this.currHighlited.row.getDataItem()):this.rows.length>0&&this.onSelected(this.rows[0].row.getDataItem())},t.prototype.nextRow=function(){var t=0;if(this.currHighlited&&(t=this.currHighlited.index+1),this.highlightRow(t),this.isScrollOn&&this.currHighlited){var e=this.currHighlited.row.getNativeElement();this.dropdownHeight()<e.getBoundingClientRect().bottom&&this.dropdownScrollTopTo(this.dropdownRowOffsetHeight(e))}},t.prototype.prevRow=function(){var t=-1;if(this.currHighlited&&(t=this.currHighlited.index-1),this.highlightRow(t),this.isScrollOn&&this.currHighlited){var e=this.dropdownRowTop();e<0&&this.dropdownScrollTopTo(e-1)}},t.prototype.dropdownScrollTopTo=function(t){this.el.nativeElement.scrollTop=this.el.nativeElement.scrollTop+t},t.prototype.dropdownRowTop=function(){return this.currHighlited.row.getNativeElement().getBoundingClientRect().top-(this.el.nativeElement.getBoundingClientRect().top+parseInt(getComputedStyle(this.el.nativeElement).paddingTop,10))},t.prototype.dropdownHeight=function(){return this.el.nativeElement.getBoundingClientRect().top+parseInt(getComputedStyle(this.el.nativeElement).maxHeight,10)},t.prototype.dropdownRowOffsetHeight=function(t){var e=getComputedStyle(t);return t.offsetHeight+parseInt(e.marginTop,10)+parseInt(e.marginBottom,10)},t}(),t.CtrDropdown=N([e.Directive({selector:"[ctrDropdown]"}),A(0,e.Host()),V("design:paramtypes",[t.CtrCompleter,e.ElementRef])],t.CtrDropdown);var B=function(t,e,r,i){var o,n=arguments.length,s=n<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,r,i);else for(var c=t.length-1;c>=0;c--)(o=t[c])&&(s=(n<3?o(s):n>3?o(e,r,s):o(e,r))||s);return n>3&&s&&Object.defineProperty(e,r,s),s},q=function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)},U=function(t,e){return function(r,i){e(r,i,t)}},$=40,G=39,Y=38,J=37,K=27,Q=13,W=9;t.CtrInput=function(){function t(t,r){var i=this;this.completer=t,this.ngModel=r,this.clearSelected=!1,this.overrideSuggested=!1,this.fillHighlighted=!0,this.ngModelChange=new e.EventEmitter,this._searchStr="",this._displayStr="",this.completer.selected.subscribe(function(t){t&&(i.clearSelected?i.searchStr="":i.searchStr=t.title,i.ngModelChange.emit(i.searchStr))}),this.completer.highlighted.subscribe(function(t){i.fillHighlighted&&(t?(i._displayStr=t.title,i.ngModelChange.emit(t.title)):(i._displayStr=i.searchStr,i.ngModelChange.emit(i.searchStr)))}),this.ngModel.valueChanges.subscribe(function(t){i._displayStr!=t&&(i.searchStr=t)})}return t.prototype.keyupHandler=function(t){t.keyCode!==J&&t.keyCode!==G&&t.keyCode!==W&&(t.keyCode===Y||t.keyCode===Q?t.preventDefault():t.keyCode===$?(t.preventDefault(),this.completer.search(this.searchStr)):t.keyCode===K?(this.restoreSearchValue(),this.completer.clear()):this.completer.search(this.searchStr))},t.prototype.keydownHandler=function(t){t.keyCode===Q?(this.completer.hasHighlited()&&t.preventDefault(),this.handleSelection()):t.keyCode===$?(t.preventDefault(),this.completer.nextRow()):t.keyCode===Y?(t.preventDefault(),this.completer.prevRow()):t.keyCode===W?this.handleSelection():t.keyCode===K&&t.preventDefault()},t.prototype.onBlur=function(t){var e=this;setTimeout(function(){e.overrideSuggested?e.completer.onSelected({title:e.searchStr,originalObject:null}):e.restoreSearchValue(),e.completer.clear()},200)},Object.defineProperty(t.prototype,"searchStr",{get:function(){return this._searchStr},set:function(t){this._searchStr=t,this._displayStr=t},enumerable:!0,configurable:!0}),t.prototype.handleSelection=function(){this.overrideSuggested?this.completer.onSelected({title:this.searchStr,originalObject:null}):this.completer.hasHighlited()?this.completer.selectCurrent():this.completer.clear()},t.prototype.restoreSearchValue=function(){this.fillHighlighted&&this._displayStr!=this.searchStr&&(this._displayStr=this.searchStr,this.ngModelChange.emit(this.searchStr))},t}(),B([e.Input("clearSelected"),q("design:type",Object)],t.CtrInput.prototype,"clearSelected",void 0),B([e.Input("overrideSuggested"),q("design:type",Object)],t.CtrInput.prototype,"overrideSuggested",void 0),B([e.Input("fillHighlighted"),q("design:type",Object)],t.CtrInput.prototype,"fillHighlighted",void 0),B([e.Output(),q("design:type",e.EventEmitter)],t.CtrInput.prototype,"ngModelChange",void 0),B([e.HostListener("keyup",["$event"]),q("design:type",Function),q("design:paramtypes",[Object]),q("design:returntype",void 0)],t.CtrInput.prototype,"keyupHandler",null),B([e.HostListener("keydown",["$event"]),q("design:type",Function),q("design:paramtypes",[Object]),q("design:returntype",void 0)],t.CtrInput.prototype,"keydownHandler",null),B([e.HostListener("blur",["$event"]),q("design:type",Function),q("design:paramtypes",[Object]),q("design:returntype",void 0)],t.CtrInput.prototype,"onBlur",null),t.CtrInput=B([e.Directive({selector:"[ctrInput]"}),U(0,e.Host()),q("design:paramtypes",[t.CtrCompleter,r.NgModel])],t.CtrInput);var X=function(t,e,r,i){var o,n=arguments.length,s=n<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,r,i);else for(var c=t.length-1;c>=0;c--)(o=t[c])&&(s=(n<3?o(s):n>3?o(e,r,s):o(e,r))||s);return n>3&&s&&Object.defineProperty(e,r,s),s},Z=function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)},tt=function(t,e){return function(r,i){e(r,i,t)}},et=function(){function t(t,e,r){this.results=t,this.searching=e,this.searchInitialized=r}return t}();t.CtrList=rt=function(){function t(t,e,r,i){this.completer=t,this.templateRef=e,this.viewContainer=r,this.cd=i,this.ctrListMinSearchLength=x,this.ctrListPause=j,this.ctrListAutoMatch=!1,this.term=null,this.searchTimer=null,this.clearTimer=null,this.ctx=new et([],!1,!1)}return t.hasTerm=function(t){return t||""===t},t.prototype.ngOnInit=function(){this.completer.registerList(this),this.viewContainer.createEmbeddedView(this.templateRef,new et([],!1,!1))},Object.defineProperty(t.prototype,"dataService",{set:function(t){var e=this;this._dataService=t,this._dataService&&this._dataService.catch(function(t){return e.handleError(t)}).subscribe(function(t){e.ctx.searchInitialized=!0,e.ctx.searching=!1,e.ctx.results=t,e.ctrListAutoMatch&&1===t.length&&t[0].title&&rt.hasTerm(e.term)&&t[0].title.toLocaleLowerCase()===e.term.toLocaleLowerCase()&&e.completer.onSelected(t[0]),e.refreshTemplate()})},enumerable:!0,configurable:!0}),t.prototype.search=function(t){var e=this;rt.hasTerm(t)&&t.length>=this.ctrListMinSearchLength&&this.term!==t&&(this.searchTimer&&(this.searchTimer.unsubscribe(),this.searchTimer=null),this.ctx.searching||(this.ctx.results=[],this.ctx.searching=!0,this.ctx.searchInitialized=!0,this.refreshTemplate()),this.clearTimer&&this.clearTimer.unsubscribe(),this.searchTimer=p.Observable.timer(this.ctrListPause).subscribe(function(){e.searchTimerComplete(t)}))},t.prototype.clear=function(){var t=this;this.searchTimer&&this.searchTimer.unsubscribe(),this.clearTimer=p.Observable.timer(H).subscribe(function(){t._clear()})},t.prototype._clear=function(){this.searchTimer&&(this.searchTimer.unsubscribe(),this.searchTimer=null),this.dataService&&this.dataService.cancel(),this.ctx.results=[],this.ctx.searchInitialized=!1,this.term=null,this.viewContainer.clear()},t.prototype.searchTimerComplete=function(t){return!rt.hasTerm(t)||t.length<this.ctrListMinSearchLength?void(this.ctx.searching=!1):(this.term=t,void this._dataService.search(t))},t.prototype.handleError=function(t){this.ctx.searching=!1;var e="search error";return t&&(e=t.message?t.message:t.status?t.status+" - "+t.statusText:"Server error"),console&&console.error&&console.error(e),this.refreshTemplate(),p.Observable.throw(e)},t.prototype.refreshTemplate=function(){this.viewContainer.clear(),this.viewContainer.createEmbeddedView(this.templateRef,this.ctx),this.cd.markForCheck()},t}(),X([e.Input(),Z("design:type",Object)],t.CtrList.prototype,"ctrListMinSearchLength",void 0),X([e.Input(),Z("design:type",Object)],t.CtrList.prototype,"ctrListPause",void 0),X([e.Input(),Z("design:type",Object)],t.CtrList.prototype,"ctrListAutoMatch",void 0),X([e.Input("ctrList"),Z("design:type",Object),Z("design:paramtypes",[Object])],t.CtrList.prototype,"dataService",null),t.CtrList=rt=X([e.Directive({selector:"[ctrList]"}),tt(0,e.Host()),Z("design:paramtypes",[t.CtrCompleter,e.TemplateRef,e.ViewContainerRef,e.ChangeDetectorRef])],t.CtrList);var rt,it=function(t,e,r,i){var o,n=arguments.length,s=n<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,r,i);else for(var c=t.length-1;c>=0;c--)(o=t[c])&&(s=(n<3?o(s):n>3?o(e,r,s):o(e,r))||s);return n>3&&s&&Object.defineProperty(e,r,s),s},ot=function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)},nt=function(t,e){return function(r,i){e(r,i,t)}};t.CtrRow=function(){function t(t,e,r){this.el=t,this.renderer=e,this.dropdown=r,this.selected=!1}return t.prototype.ngOnInit=function(){this.dropdown.registerRow(new z(this,this._rowIndex))},Object.defineProperty(t.prototype,"ctrRow",{set:function(t){this._rowIndex=t},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"dataItem",{set:function(t){this._item=t},enumerable:!0,configurable:!0}),t.prototype.onClick=function(t){this.dropdown.onSelected(this._item)},t.prototype.onMouseEnter=function(t){this.dropdown.highlightRow(this._rowIndex)},t.prototype.setHighlited=function(t){this.selected=t,this.renderer.setElementClass(this.el.nativeElement,"completer-selected-row",this.selected)},t.prototype.getNativeElement=function(){return this.el.nativeElement},t.prototype.getDataItem=function(){return this._item},t}(),it([e.Input(),ot("design:type",Number),ot("design:paramtypes",[Number])],t.CtrRow.prototype,"ctrRow",null),it([e.Input(),ot("design:type",Object),ot("design:paramtypes",[Object])],t.CtrRow.prototype,"dataItem",null),it([e.HostListener("click",["$event"]),ot("design:type",Function),ot("design:paramtypes",[Object]),ot("design:returntype",void 0)],t.CtrRow.prototype,"onClick",null),it([e.HostListener("mouseenter",["$event"]),ot("design:type",Function),ot("design:paramtypes",[Object]),ot("design:returntype",void 0)],t.CtrRow.prototype,"onMouseEnter",null),t.CtrRow=it([e.Directive({selector:"[ctrRow]"}),nt(2,e.Host()),ot("design:paramtypes",[e.ElementRef,e.Renderer,t.CtrDropdown])],t.CtrRow);var st=function(t,e,r,i){var o,n=arguments.length,s=n<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,r,i);else for(var c=t.length-1;c>=0;c--)(o=t[c])&&(s=(n<3?o(s):n>3?o(e,r,s):o(e,r))||s);return n>3&&s&&Object.defineProperty(e,r,s),s};t.Ng2CompleterModule=function(){function t(){}return t}(),t.Ng2CompleterModule=st([e.NgModule({imports:[l.CommonModule,r.FormsModule,i.HttpModule],declarations:[t.CompleterListItemCmp,t.CtrCompleter,t.CtrDropdown,t.CtrInput,t.CtrList,t.CtrRow,t.CompleterCmp],exports:[t.CompleterCmp,t.CompleterListItemCmp,t.CtrCompleter,t.CtrDropdown,t.CtrInput,t.CtrList,t.CtrRow],providers:[t.CompleterService,P,k]})],t.Ng2CompleterModule),t.localDataFactory=a,t.LocalDataFactoryProvider=P,t.remoteDataFactory=h,t.RemoteDataFactoryProvider=k,t.RemoteData=b,t.CompleterBaseData=m,Object.defineProperty(t,"__esModule",{value:!0})});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/forms"),require("@angular/http"),require("rxjs/Observable"),require("rxjs/Subject"),require("rxjs/add/operator/map"),require("rxjs/add/operator/catch"),require("rxjs/add/observable/timer"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/forms","@angular/http","rxjs/Observable","rxjs/Subject","rxjs/add/operator/map","rxjs/add/operator/catch","rxjs/add/observable/timer","@angular/common"],e):e(t.ng2Completer=t.ng2Completer||{},t.ng.core,t.ng.forms,t.ng.http,t.Rx,t.Rx,t.Rx.Operator.map,t.Rx.Operator.catch,null,t.ng.common)}(this,function(t,e,r,i,o,n,s,c,a,l){"use strict";function h(){return function(){return new g}}function p(t){return function(){return new v(t)}}var u=function(){function t(){this.selected=new e.EventEmitter,this.highlighted=new e.EventEmitter,this._hasHighlited=!1,this.hasSelected=!1,this._cancelBlur=!1}return t.prototype.ngOnInit=function(){},t.prototype.registerList=function(t){this.list=t},t.prototype.registerDropdown=function(t){this.dropdown=t},t.prototype.onHighlighted=function(t){this.highlighted.emit(t),this._hasHighlited=!!t},t.prototype.onSelected=function(t){this.selected.emit(t),t&&(this.hasSelected=!0),this.clear()},t.prototype.search=function(t){this.hasSelected&&(this.selected.emit(null),this.hasSelected=!1),this.list&&this.list.search(t)},t.prototype.clear=function(){this.dropdown&&this.dropdown.clear(),this.list&&this.list.clear(),this._hasHighlited=!1},t.prototype.selectCurrent=function(){this.dropdown&&this.dropdown.selectCurrent()},t.prototype.nextRow=function(){this.dropdown&&this.dropdown.nextRow()},t.prototype.prevRow=function(){this.dropdown&&this.dropdown.prevRow()},t.prototype.hasHighlited=function(){return this._hasHighlited},t.prototype.cancelBlur=function(t){this._cancelBlur=t},t.prototype.isCancelBlur=function(){return this._cancelBlur},t}();u.decorators=[{type:e.Directive,args:[{selector:"[ctrCompleter]"}]}],u.ctorParameters=function(){return[]},u.propDecorators={selected:[{type:e.Output}],highlighted:[{type:e.Output}]};var d=function(){var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)e.hasOwnProperty(r)&&(t[r]=e[r])};return function(e,r){function i(){this.constructor=e}t(e,r),e.prototype=null===r?Object.create(r):(i.prototype=r.prototype,new i)}}(),m=function(t){function e(){return t.call(this)||this}return d(e,t),e.prototype.cancel=function(){},e.prototype.searchFields=function(t){return this._searchFields=t,this},e.prototype.titleField=function(t){return this._titleField=t,this},e.prototype.descriptionField=function(t){return this._descriptionField=t,this},e.prototype.imageField=function(t){return this._imageField=t,this},e.prototype.extractMatches=function(t,e){var r=this,i=this._searchFields?this._searchFields.split(","):null;return null!==this._searchFields&&void 0!==this._searchFields&&""!=e?t.filter(function(t){return(i?i.map(function(e){return r.extractValue(t,e)}).filter(function(t){return!!t}):[t]).some(function(t){return t.toString().toLowerCase().indexOf(e.toString().toLowerCase())>=0})}):t},e.prototype.extractTitle=function(t){var e=this;return this._titleField.split(",").map(function(r){return e.extractValue(t,r)}).join(" ")},e.prototype.extractValue=function(t,e){var r,i;if(e){r=e.split("."),i=t;for(var o=0;o<r.length;o++)i&&(i=i[r[o]])}else i=t;return i},e.prototype.processResults=function(t){var e,r,i,o=null,n=[];if(t&&t.length>0)for(e=0;e<t.length;e++)r=this._titleField?this.extractTitle(t[e]):t[e],this._descriptionField&&(i=this.extractValue(t[e],this._descriptionField)),this._imageField&&(o=this.extractValue(t[e],this._imageField)),n.push({title:r,description:i,image:o,originalObject:t[e]});return n},e}(n.Subject),f=function(){var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)e.hasOwnProperty(r)&&(t[r]=e[r])};return function(e,r){function i(){this.constructor=e}t(e,r),e.prototype=null===r?Object.create(r):(i.prototype=r.prototype,new i)}}(),g=function(t){function e(){return t.call(this)||this}return f(e,t),e.prototype.data=function(t){var e=this;return t instanceof o.Observable?t.subscribe(function(t){e._data=t,e.savedTerm&&e.search(e.savedTerm)}):this._data=t,this},e.prototype.search=function(t){if(this._data){this.savedTerm=null;var e=this.extractMatches(this._data,t);this.next(this.processResults(e))}else this.savedTerm=t},e}(m);g.decorators=[{type:e.Injectable}],g.ctorParameters=function(){return[]};var y=function(){var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var r in e)e.hasOwnProperty(r)&&(t[r]=e[r])};return function(e,r){function i(){this.constructor=e}t(e,r),e.prototype=null===r?Object.create(r):(i.prototype=r.prototype,new i)}}(),v=function(t){function e(e){var r=t.call(this)||this;return r.http=e,r._urlFormater=null,r._dataField=null,r}return y(e,t),e.prototype.remoteUrl=function(t){return this._remoteUrl=t,this},e.prototype.urlFormater=function(t){this._urlFormater=t},e.prototype.dataField=function(t){this._dataField=t},e.prototype.headers=function(t){this._headers=t},e.prototype.search=function(t){var e=this;this.cancel();var r="";r=this._urlFormater?this._urlFormater(t):this._remoteUrl+encodeURIComponent(t),this.remoteSearch=this.http.get(r,{headers:this._headers||new i.Headers}).map(function(t){return t.json()}).map(function(r){var i=e.extractValue(r,e._dataField);return e.extractMatches(i,t)}).map(function(t){var r=e.processResults(t);return e.next(r),r}).catch(function(t){return e.error(t),null}).subscribe()},e.prototype.cancel=function(){this.remoteSearch&&this.remoteSearch.unsubscribe()},e}(m),w=function(){function t(t,e){this.localDataFactory=t,this.remoteDataFactory=e}return t.prototype.local=function(t,e,r){return void 0===e&&(e=""),void 0===r&&(r=""),this.localDataFactory().data(t).searchFields(e).titleField(r)},t.prototype.remote=function(t,e,r){return void 0===e&&(e=""),void 0===r&&(r=""),this.remoteDataFactory().remoteUrl(t).searchFields(e).titleField(r)},t}();w.decorators=[{type:e.Injectable}],w.ctorParameters=function(){return[{type:void 0,decorators:[{type:e.Inject,args:[g]}]},{type:void 0,decorators:[{type:e.Inject,args:[v]}]}]};var S=524288,b=3,C=250,x="Searching...",_="No results found",I=function(){},H={provide:r.NG_VALUE_ACCESSOR,useExisting:e.forwardRef(function(){return O}),multi:!0},O=function(){function t(t){this.completerService=t,this.inputName="",this.inputId="",this.pause=C,this.minSearchLength=b,this.maxChars=S,this.overrideSuggested=!1,this.clearSelected=!1,this.fillHighlighted=!0,this.placeholder="",this.textSearching=x,this.textNoResults=_,this.autoMatch=!1,this.disableInput=!1,this.autofocus=!1,this.selected=new e.EventEmitter,this.highlighted=new e.EventEmitter,this.blur=new e.EventEmitter,this.focusEvent=new e.EventEmitter,this.searchStr="",this.control=new r.FormControl(""),this.displaySearching=!0,this._onTouchedCallback=I,this._onChangeCallback=I,this._focus=!1}return Object.defineProperty(t.prototype,"value",{get:function(){return this.searchStr},set:function(t){t!==this.searchStr&&(this.searchStr=t),this._onChangeCallback(t)},enumerable:!0,configurable:!0}),t.prototype.ngAfterViewInit=function(){this.autofocus&&(this._focus=!0)},t.prototype.ngAfterViewChecked=function(){this._focus&&(this.ctrInput.nativeElement.focus(),this._focus=!1)},t.prototype.onTouched=function(){this._onTouchedCallback()},t.prototype.writeValue=function(t){this.searchStr=t},t.prototype.registerOnChange=function(t){this._onChangeCallback=t},t.prototype.registerOnTouched=function(t){this._onTouchedCallback=t},t.prototype.ngOnInit=function(){var t=this;this.datasource&&(this.datasource instanceof Array?this.dataService=this.completerService.local(this.datasource):"string"==typeof this.datasource?this.dataService=this.completerService.remote(this.datasource):this.dataService=this.datasource),this.completer.selected.subscribe(function(e){var r=e?e.title:"";t.selected.emit(e),t._onChangeCallback(r)}),this.completer.highlighted.subscribe(function(e){t.highlighted.emit(e)}),"false"===this.textSearching&&(this.displaySearching=!1)},t.prototype.onBlur=function(){this.blur.emit(),this.onTouched()},t.prototype.onFocus=function(){this.focusEvent.emit(),this.onTouched()},t.prototype.onChange=function(t){this.value=t},t.prototype.open=function(t){void 0===t&&(t=""),this.completer.search(t)},t.prototype.close=function(){this.completer.clear()},t.prototype.focus=function(){this.ctrInput?this.ctrInput.nativeElement.focus():this._focus=!0},t}();O.decorators=[{type:e.Component,args:[{selector:"ng2-completer",template:'\n        <div class="completer-holder" ctrCompleter>\n            <input #ctrInput [attr.id]="inputId.length > 0 ? inputId : null" type="search" class="completer-input" ctrInput [ngClass]="inputClass" [(ngModel)]="searchStr" (ngModelChange)="onChange($event)" [attr.name]="inputName" [placeholder]="placeholder"\n                [attr.maxlength]="maxChars" [tabindex]="fieldTabindex" [disabled]="disableInput" [clearSelected]="clearSelected" [overrideSuggested]="overrideSuggested" \n                [fillHighlighted]="fillHighlighted" (blur)="onBlur()" (focus)="onFocus()" autocomplete="off" autocorrect="off" autocapitalize="off" />\n\n            <div class="completer-dropdown-holder" *ctrList="dataService; minSearchLength: minSearchLength; pause: pause; autoMatch: autoMatch; let items = results; let searchActive = searching; let isInitialized = searchInitialized;">\n                <div class="completer-dropdown" ctrDropdown *ngIf="isInitialized">\n                    <div *ngIf="searchActive && displaySearching" class="completer-searching">{{textSearching}}</div>\n                    <div *ngIf="!searchActive && (!items || items.length === 0)" class="completer-no-results">{{textNoResults}}</div>\n                    <div class="completer-row-wrapper" *ngFor="let item of items; let rowIndex=index">\n                        <div class="completer-row" [ctrRow]="rowIndex" [dataItem]="item">\n                            <div *ngIf="item.image || item.image === \'\'" class="completer-image-holder">\n                                <img *ngIf="item.image != \'\'" src="{{item.image}}" class="completer-image" />\n                                <div *ngIf="item.image === \'\'" class="completer-image-default"></div>\n                            </div>\n                            <div class="completer-item-text" [ngClass]="{\'completer-item-text-image\': item.image || item.image === \'\' }">\n                                <completer-list-item class="completer-title" [text]="item.title" [matchClass]="matchClass" [searchStr]="searchStr" [type]="\'title\'"></completer-list-item>\n                                <completer-list-item *ngIf="item.description && item.description != \'\'" class="completer-description" [text]="item.description"\n                                    [matchClass]="matchClass" [searchStr]="searchStr" [type]="\'description\'">\n                                </completer-list-item>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </div>\n    ',styles:['\n    .completer-dropdown {\n        border-color: #ececec;\n        border-width: 1px;\n        border-style: solid;\n        border-radius: 2px;\n        width: 250px;\n        padding: 6px;\n        cursor: pointer;\n        z-index: 9999;\n        position: absolute;\n        margin-top: -6px;\n        background-color: #ffffff;\n    }\n\n    .completer-row {\n        padding: 5px;\n        color: #000000;\n        margin-bottom: 4px;\n        clear: both;\n        display: inline-block;\n        width: 103%;\n    }\n\n    .completer-selected-row {\n        background-color: lightblue;\n        color: #ffffff;\n    }\n\n    .completer-description {\n        font-size: 14px;\n    }\n\n    .completer-image-default {\n        width: 16px; \n        height: 16px;\n        background-image: url("demo/res/img/default.png");\n    }\n\n    .completer-image-holder {\n        float: left;\n        width: 10%;\n    }\n    .completer-item-text-image {\n        float: right;\n        width: 90%;\n    }\n    '],providers:[H]}]}],O.ctorParameters=function(){return[{type:w}]},O.propDecorators={dataService:[{type:e.Input}],datasource:[{type:e.Input}],inputName:[{type:e.Input}],inputId:[{type:e.Input}],pause:[{type:e.Input}],minSearchLength:[{type:e.Input}],maxChars:[{type:e.Input}],overrideSuggested:[{type:e.Input}],clearSelected:[{type:e.Input}],fillHighlighted:[{type:e.Input}],placeholder:[{type:e.Input}],matchClass:[{type:e.Input}],textSearching:[{type:e.Input}],textNoResults:[{type:e.Input}],fieldTabindex:[{type:e.Input}],autoMatch:[{type:e.Input}],disableInput:[{type:e.Input}],inputClass:[{type:e.Input}],autofocus:[{type:e.Input}],selected:[{type:e.Output}],highlighted:[{type:e.Output}],blur:[{type:e.Output}],focusEvent:[{type:e.Output,args:["focus"]}],completer:[{type:e.ViewChild,args:[u]}],ctrInput:[{type:e.ViewChild,args:["ctrInput"]}]};var T=function(){function t(){this.parts=[]}return t.prototype.ngOnInit=function(){if(!this.searchStr)return void this.parts.push({isMatch:!1,text:this.text});for(var t=this.text.toLowerCase(),e=t.indexOf(this.searchStr.toLowerCase()),r=0;e>=0;){var i=this.text.slice(e,e+this.searchStr.length);if(0===e)this.parts.push({isMatch:!0,text:i}),r+=this.searchStr.length;else if(e>0){var o=this.text.slice(r,e);this.parts.push({isMatch:!1,text:o}),this.parts.push({isMatch:!0,text:i}),r+=this.searchStr.length+o.length}e=t.indexOf(this.searchStr.toLowerCase(),r)}r<this.text.length&&this.parts.push({isMatch:!1,text:this.text.slice(r,this.text.length)})},t}();T.decorators=[{type:e.Component,args:[{selector:"completer-list-item",template:'\n    <span class="completer-list-item-holder" [ngClass]="{\'completer-title\': type === \'title\', \'completer-description\': type === \'description\'}" >\n        <span class="completer-list-item" *ngFor="let part of parts" [ngClass]="part.isMatch ? matchClass : null">{{part.text}}</span>\n    </span>\n    '}]}],T.ctorParameters=function(){return[]},T.propDecorators={text:[{type:e.Input}],searchStr:[{type:e.Input}],matchClass:[{type:e.Input}],type:[{type:e.Input}]};var R={provide:g,useFactory:h},F={provide:v,useFactory:p,deps:[i.Http]},E=function(){function t(t,e){this.row=t,this.index=e}return t}(),D=function(){function t(t,e){this.completer=t,this.el=e,this.rows=[],this.completer.registerDropdown(this)}return t.prototype.ngOnInit=function(){var t=getComputedStyle(this.el.nativeElement);this.isScrollOn=t.maxHeight&&"auto"===t.overflowY},t.prototype.ngOnDestroy=function(){this.completer.registerDropdown(null)},t.prototype.onMouseDown=function(t){var e=this;this.completer.cancelBlur(!0),setImmediate(function(){e.completer.cancelBlur(!1)})},t.prototype.registerRow=function(t){this.rows.push(t)},t.prototype.highlightRow=function(t){var e=this.rows.find(function(e){return e.index===t});if(t<0)return this.currHighlited&&this.currHighlited.row.setHighlited(!1),this.currHighlited=void 0,void this.completer.onHighlighted(null);e&&(this.currHighlited&&this.currHighlited.row.setHighlited(!1),this.currHighlited=e,this.currHighlited.row.setHighlited(!0),this.completer.onHighlighted(this.currHighlited.row.getDataItem()))},t.prototype.clear=function(){this.rows=[]},t.prototype.onSelected=function(t){this.completer.onSelected(t)},t.prototype.selectCurrent=function(){this.currHighlited?this.onSelected(this.currHighlited.row.getDataItem()):this.rows.length>0&&this.onSelected(this.rows[0].row.getDataItem())},t.prototype.nextRow=function(){var t=0;if(this.currHighlited&&(t=this.currHighlited.index+1),this.highlightRow(t),this.isScrollOn&&this.currHighlited){var e=this.currHighlited.row.getNativeElement();this.dropdownHeight()<e.getBoundingClientRect().bottom&&this.dropdownScrollTopTo(this.dropdownRowOffsetHeight(e))}},t.prototype.prevRow=function(){var t=-1;if(this.currHighlited&&(t=this.currHighlited.index-1),this.highlightRow(t),this.isScrollOn&&this.currHighlited){var e=this.dropdownRowTop();e<0&&this.dropdownScrollTopTo(e-1)}},t.prototype.dropdownScrollTopTo=function(t){this.el.nativeElement.scrollTop=this.el.nativeElement.scrollTop+t},t.prototype.dropdownRowTop=function(){return this.currHighlited.row.getNativeElement().getBoundingClientRect().top-(this.el.nativeElement.getBoundingClientRect().top+parseInt(getComputedStyle(this.el.nativeElement).paddingTop,10))},t.prototype.dropdownHeight=function(){return this.el.nativeElement.getBoundingClientRect().top+parseInt(getComputedStyle(this.el.nativeElement).maxHeight,10)},t.prototype.dropdownRowOffsetHeight=function(t){var e=getComputedStyle(t);return t.offsetHeight+parseInt(e.marginTop,10)+parseInt(e.marginBottom,10)},t}();D.decorators=[{type:e.Directive,args:[{selector:"[ctrDropdown]"}]}],D.ctorParameters=function(){return[{type:u,decorators:[{type:e.Host}]},{type:e.ElementRef}]},D.propDecorators={onMouseDown:[{type:e.HostListener,args:["mousedown",["$event"]]}]};var L=function(){function t(t,r,i){var o=this;this.completer=t,this.ngModel=r,this.el=i,this.clearSelected=!1,this.overrideSuggested=!1,this.fillHighlighted=!0,this.ngModelChange=new e.EventEmitter,this._searchStr="",this._displayStr="",this.completer.selected.subscribe(function(t){t&&(o.clearSelected?o.searchStr="":o.searchStr=t.title,o.ngModelChange.emit(o.searchStr))}),this.completer.highlighted.subscribe(function(t){o.fillHighlighted&&(t?(o._displayStr=t.title,o.ngModelChange.emit(t.title)):(o._displayStr=o.searchStr,o.ngModelChange.emit(o.searchStr)))}),this.ngModel.valueChanges.subscribe(function(t){o._displayStr!=t&&(o.searchStr=t)})}return t.prototype.keyupHandler=function(t){37!==t.keyCode&&39!==t.keyCode&&9!==t.keyCode&&(38===t.keyCode||13===t.keyCode?t.preventDefault():40===t.keyCode?(t.preventDefault(),this.completer.search(this.searchStr)):27===t.keyCode?(this.restoreSearchValue(),this.completer.clear()):this.completer.search(this.searchStr))},t.prototype.keydownHandler=function(t){13===t.keyCode?(this.completer.hasHighlited()&&t.preventDefault(),this.handleSelection()):40===t.keyCode?(t.preventDefault(),this.completer.nextRow()):38===t.keyCode?(t.preventDefault(),this.completer.prevRow()):9===t.keyCode?this.handleSelection():27===t.keyCode&&t.preventDefault()},t.prototype.onBlur=function(t){var e=this;if(this.completer.isCancelBlur())return void setImmediate(function(){e.el.nativeElement.focus()});setTimeout(function(){e.overrideSuggested?e.completer.onSelected({title:e.searchStr,originalObject:null}):e.restoreSearchValue(),e.completer.clear()},200)},Object.defineProperty(t.prototype,"searchStr",{get:function(){return this._searchStr},set:function(t){this._searchStr=t,this._displayStr=t},enumerable:!0,configurable:!0}),t.prototype.handleSelection=function(){this.overrideSuggested?this.completer.onSelected({title:this.searchStr,originalObject:null}):this.completer.hasHighlited()?this.completer.selectCurrent():this.completer.clear()},t.prototype.restoreSearchValue=function(){this.fillHighlighted&&this._displayStr!=this.searchStr&&(this._displayStr=this.searchStr,this.ngModelChange.emit(this.searchStr))},t}();L.decorators=[{type:e.Directive,args:[{selector:"[ctrInput]"}]}],L.ctorParameters=function(){return[{type:u,decorators:[{type:e.Host}]},{type:r.NgModel},{type:e.ElementRef}]},L.propDecorators={clearSelected:[{type:e.Input,args:["clearSelected"]}],overrideSuggested:[{type:e.Input,args:["overrideSuggested"]}],fillHighlighted:[{type:e.Input,args:["fillHighlighted"]}],ngModelChange:[{type:e.Output}],keyupHandler:[{type:e.HostListener,args:["keyup",["$event"]]}],keydownHandler:[{type:e.HostListener,args:["keydown",["$event"]]}],onBlur:[{type:e.HostListener,args:["blur",["$event"]]}]};var M=function(){function t(t,e,r){this.results=t,this.searching=e,this.searchInitialized=r}return t}(),j=function(){function t(t,e,r,i){this.completer=t,this.templateRef=e,this.viewContainer=r,this.cd=i,this.ctrListMinSearchLength=b,this.ctrListPause=C,this.ctrListAutoMatch=!1,this.term=null,this.searchTimer=null,this.clearTimer=null,this.ctx=new M([],!1,!1)}return t.hasTerm=function(t){return t||""===t},t.prototype.ngOnInit=function(){this.completer.registerList(this),this.viewContainer.createEmbeddedView(this.templateRef,new M([],!1,!1))},Object.defineProperty(t.prototype,"dataService",{set:function(e){var r=this;this._dataService=e,this._dataService&&this._dataService.catch(function(t){return r.handleError(t)}).subscribe(function(e){r.ctx.searchInitialized=!0,r.ctx.searching=!1,r.ctx.results=e,r.ctrListAutoMatch&&1===e.length&&e[0].title&&t.hasTerm(r.term)&&e[0].title.toLocaleLowerCase()===r.term.toLocaleLowerCase()&&r.completer.onSelected(e[0]),r.refreshTemplate()})},enumerable:!0,configurable:!0}),t.prototype.search=function(e){var r=this;t.hasTerm(e)&&e.length>=this.ctrListMinSearchLength&&this.term!==e&&(this.searchTimer&&(this.searchTimer.unsubscribe(),this.searchTimer=null),this.ctx.searching||(this.ctx.results=[],this.ctx.searching=!0,this.ctx.searchInitialized=!0,this.refreshTemplate()),this.clearTimer&&this.clearTimer.unsubscribe(),this.searchTimer=o.Observable.timer(this.ctrListPause).subscribe(function(){r.searchTimerComplete(e)}))},t.prototype.clear=function(){var t=this;this.searchTimer&&this.searchTimer.unsubscribe(),this.clearTimer=o.Observable.timer(100).subscribe(function(){t._clear()})},t.prototype._clear=function(){this.searchTimer&&(this.searchTimer.unsubscribe(),this.searchTimer=null),this.dataService&&this.dataService.cancel(),this.ctx.results=[],this.ctx.searchInitialized=!1,this.term=null,this.viewContainer.clear()},t.prototype.searchTimerComplete=function(e){if(!t.hasTerm(e)||e.length<this.ctrListMinSearchLength)return void(this.ctx.searching=!1);this.term=e,this._dataService.search(e)},t.prototype.handleError=function(t){this.ctx.searching=!1;var e="search error";return t&&(e=t.message?t.message:t.status?t.status+" - "+t.statusText:"Server error"),console&&console.error&&console.error(e),this.refreshTemplate(),o.Observable.throw(e)},t.prototype.refreshTemplate=function(){this.viewContainer.clear(),this.viewContainer.createEmbeddedView(this.templateRef,this.ctx),this.cd.markForCheck()},t}();j.decorators=[{type:e.Directive,args:[{selector:"[ctrList]"}]}],j.ctorParameters=function(){return[{type:u,decorators:[{type:e.Host}]},{type:e.TemplateRef},{type:e.ViewContainerRef},{type:e.ChangeDetectorRef}]},j.propDecorators={ctrListMinSearchLength:[{type:e.Input}],ctrListPause:[{type:e.Input}],ctrListAutoMatch:[{type:e.Input}],dataService:[{type:e.Input,args:["ctrList"]}]};var k=function(){function t(t,e,r){this.el=t,this.renderer=e,this.dropdown=r,this.selected=!1}return t.prototype.ngOnInit=function(){this.dropdown.registerRow(new E(this,this._rowIndex))},Object.defineProperty(t.prototype,"ctrRow",{set:function(t){this._rowIndex=t},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"dataItem",{set:function(t){this._item=t},enumerable:!0,configurable:!0}),t.prototype.onClick=function(t){this.dropdown.onSelected(this._item)},t.prototype.onMouseEnter=function(t){this.dropdown.highlightRow(this._rowIndex)},t.prototype.setHighlited=function(t){this.selected=t,this.renderer.setElementClass(this.el.nativeElement,"completer-selected-row",this.selected)},t.prototype.getNativeElement=function(){return this.el.nativeElement},t.prototype.getDataItem=function(){return this._item},t}();k.decorators=[{type:e.Directive,args:[{selector:"[ctrRow]"}]}],k.ctorParameters=function(){return[{type:e.ElementRef},{type:e.Renderer},{type:D,decorators:[{type:e.Host}]}]},k.propDecorators={ctrRow:[{type:e.Input}],dataItem:[{type:e.Input}],onClick:[{type:e.HostListener,args:["click",["$event"]]}],onMouseEnter:[{type:e.HostListener,args:["mouseenter",["$event"]]}]};var P=function(){function t(){}return t}();P.decorators=[{type:e.NgModule,args:[{imports:[l.CommonModule,r.FormsModule,i.HttpModule],declarations:[T,u,D,L,j,k,O],exports:[O,T,u,D,L,j,k],providers:[w,R,F]}]}],P.ctorParameters=function(){return[]},t.Ng2CompleterModule=P,t.CompleterCmp=O,t.CompleterListItemCmp=T,t.CompleterService=w,t.localDataFactory=h,t.LocalDataFactoryProvider=R,t.remoteDataFactory=p,t.RemoteDataFactoryProvider=F,t.LocalData=g,t.RemoteData=v,t.CompleterBaseData=m,t.CtrCompleter=u,t.CtrDropdown=D,t.CtrInput=L,t.CtrList=j,t.CtrRow=k,Object.defineProperty(t,"__esModule",{value:!0})});
 //# sourceMappingURL=ng2-completer.umd.js.map

package.json

 {
   "name": "ng2-completer",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "ng2 autocomplete/typeahead component",
@@ -22,10 +22,10 @@ "main": "ng2-completer.umd.js",
   "peerDependencies": {
-    "@angular/common": "^2.1.0",
-    "@angular/compiler": "^2.1.0",
-    "@angular/core": "^2.1.0",
-    "@angular/forms": "^2.1.0",
-    "@angular/platform-browser": "^2.1.0",
-    "@angular/platform-browser-dynamic": "^2.1.0"
+    "@angular/common": ">=2.1.0",
+    "@angular/compiler": ">=2.1.0",
+    "@angular/core": ">=2.1.0",
+    "@angular/forms": ">=2.1.0",
+    "@angular/platform-browser": ">=2.1.0",
+    "@angular/platform-browser-dynamic": ">=2.1.0"
   },
   "module": "index.js"
 }

README.md

@@ -92,3 +92,3 @@ # ng2-completer
 
-### ng2-completer directive
+### ng2-completer component
 
@@ -105,2 +105,3 @@ |Attribute|Description|Type|Required|Default|
 |fieldTabindex|Set the `tabIndex` of the input.|number|No||
+|inputId|`id` attribute of the input element.|string|No||
 |inputName|`name` attribute of the input element.|string|No||
@@ -124,4 +125,5 @@ |inputClass| `class` attribute of the input element.|string|No||
 |:---    |:---        |:--- |
-|Open(searchValue: string)|Open the dropdown and do search on a value|searchValue - string to search for default is ""|
-|Close()|Close the dropdown| |
+|open(searchValue: string)|Open the dropdown and do search on a value|searchValue - string to search for default is ""|
+|close()|Close the dropdown| |
+|focus()|Set the focus to the completer input| |
 
@@ -128,0 +130,0 @@ ### Local data

services/completer-service.js

@@ -1,13 +0,1 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, 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;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-var __param = (this && this.__param) || function (paramIndex, decorator) {
-    return function (target, key) { decorator(target, key, paramIndex); }
-};
 import { Injectable, Inject } from "@angular/core";
@@ -43,9 +31,11 @@ import { LocalData } from "./local-data";
 }());
-CompleterService = __decorate([
-    Injectable(),
-    __param(0, Inject(LocalData)),
-    __param(1, Inject(RemoteData)),
-    __metadata("design:paramtypes", [Object, Object])
-], CompleterService);
 export { CompleterService };
+CompleterService.decorators = [
+    { type: Injectable },
+];
+/** @nocollapse */
+CompleterService.ctorParameters = function () { return [
+    { type: undefined, decorators: [{ type: Inject, args: [LocalData,] },] },
+    { type: undefined, decorators: [{ type: Inject, args: [RemoteData,] },] },
+]; };
 //# sourceMappingURL=completer-service.js.map

services/local-data.js

@@ -11,11 +11,2 @@ var __extends = (this && this.__extends) || (function () {
 })();
-var __decorate = (this && this.__decorate) || function (decorators, target, key, 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;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
 import { Injectable } from "@angular/core";
@@ -56,7 +47,8 @@ import { Observable } from "rxjs/Observable";
 }(CompleterBaseData));
-LocalData = __decorate([
-    Injectable(),
-    __metadata("design:paramtypes", [])
-], LocalData);
 export { LocalData };
+LocalData.decorators = [
+    { type: Injectable },
+];
+/** @nocollapse */
+LocalData.ctorParameters = function () { return []; };
 //# sourceMappingURL=local-data.js.map

src/components/completer-cmp.ts

 "use strict";
-import { Component, Input, Output, EventEmitter, OnInit, ViewChild, forwardRef, AfterViewInit, ElementRef } from "@angular/core";
+import { AfterViewChecked, Component, Input, Output, EventEmitter, OnInit, ViewChild, forwardRef, AfterViewInit, ElementRef } from "@angular/core";
 import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from "@angular/forms";
@@ -27,5 +27,5 @@
         <div class="completer-holder" ctrCompleter>
-            <input #ctrInput type="search" class="completer-input" ctrInput [ngClass]="inputClass" [(ngModel)]="searchStr" (ngModelChange)="onChange($event)" [attr.name]="inputName" [placeholder]="placeholder"
+            <input #ctrInput [attr.id]="inputId.length > 0 ? inputId : null" type="search" class="completer-input" ctrInput [ngClass]="inputClass" [(ngModel)]="searchStr" (ngModelChange)="onChange($event)" [attr.name]="inputName" [placeholder]="placeholder"
                 [attr.maxlength]="maxChars" [tabindex]="fieldTabindex" [disabled]="disableInput" [clearSelected]="clearSelected" [overrideSuggested]="overrideSuggested" 
-                [fillHighlighted]="fillHighlighted" (blur)="onBlur()" autocomplete="off" autocorrect="off" autocapitalize="off" />
+                [fillHighlighted]="fillHighlighted" (blur)="onBlur()" (focus)="onFocus()" autocomplete="off" autocorrect="off" autocapitalize="off" />
 
@@ -104,6 +104,7 @@ <div class="completer-dropdown-holder" *ctrList="dataService; minSearchLength: minSearchLength; pause: pause; autoMatch: autoMatch; let items = results; let searchActive = searching; let isInitialized = searchInitialized;">
 })
-export class CompleterCmp implements OnInit, ControlValueAccessor, AfterViewInit {
+export class CompleterCmp implements OnInit, ControlValueAccessor, AfterViewChecked, AfterViewInit {
     @Input() public dataService: CompleterData;
     @Input() public datasource: CompleterData | string | Array<any>;
     @Input() public inputName = "";
+    @Input() public inputId: string = "";
     @Input() public pause = PAUSE;
@@ -128,2 +129,3 @@ @Input() public minSearchLength = MIN_SEARCH_LENGTH;
     @Output() public blur = new EventEmitter<void>();
+    @Output("focus") public focusEvent = new EventEmitter<void>();
 
@@ -139,2 +141,3 @@ @ViewChild(CtrCompleter) public completer: CtrCompleter;
     private _onChangeCallback: (_: any) => void = noop;
+    private _focus: boolean = false;
 
@@ -153,2 +156,15 @@ constructor(private completerService: CompleterService) { }
 
+    public ngAfterViewInit() {
+        if (this.autofocus) {
+            this._focus = true;
+        }
+    }
+
+    public ngAfterViewChecked(): void {
+        if (this._focus) {
+            this.ctrInput.nativeElement.focus();
+            this._focus = false;
+        }
+    }
+
     public onTouched() {
@@ -170,8 +186,2 @@ this._onTouchedCallback();
 
-    public ngAfterViewInit() {
-        if (this.autofocus && this.ctrInput) {
-            this.ctrInput.nativeElement.focus();
-        }
-    }
-
     public ngOnInit() {
@@ -206,13 +216,26 @@ if (this.datasource) {
 
-    public onChange(value: string) {
-        this.value = value;
+    public onFocus() {
+        this.focusEvent.emit();
+        this.onTouched();
     }
 
+    public onChange(value: string) {
+    this.value = value;
+}
+
     public open(searchValue = "") {
-        this.completer.search(searchValue);
-    }
+    this.completer.search(searchValue);
+}
 
     public close() {
-        this.completer.clear();
+    this.completer.clear();
+}
+
+    public focus(): void {
+    if(this.ctrInput) {
+        this.ctrInput.nativeElement.focus();
+    } else {
+        this._focus = true;
     }
 }
+}

src/directives/ctr-completer.ts

 import { Directive, EventEmitter, OnInit, Output } from "@angular/core";
-// import { Observable } from "rxjs/Observable";
 
-
-// import { CompleterData } from "../components/ng2-completer/services/completer-data";
 import { CompleterItem } from "../components/completer-item";
@@ -31,2 +28,3 @@
     private hasSelected = false;
+    private _cancelBlur = false;
 
@@ -101,2 +99,10 @@ constructor() { }
     }
+
+    public cancelBlur(cancel: boolean) {
+        this._cancelBlur = cancel;
+    }
+
+    public isCancelBlur() {
+        return this._cancelBlur;
+    }
 }

src/directives/ctr-dropdown.ts

@@ -1,2 +0,2 @@
-import { Directive, ElementRef, Host, OnDestroy, OnInit } from "@angular/core";
+import { Directive, ElementRef, Host, HostListener, OnDestroy, OnInit } from "@angular/core";
 
@@ -39,2 +39,10 @@ import { CompleterItem } from "../components/completer-item";
 
+    @HostListener("mousedown", ["$event"]) public onMouseDown(event: any) {
+        // Support for canceling blur on IE (issue #158)
+        this.completer.cancelBlur(true);
+        setImmediate(() => {
+            this.completer.cancelBlur(false);
+        })
+    }
+
     public registerRow(row: CtrRowItem) {
@@ -41,0 +49,0 @@ this.rows.push(row);

src/directives/ctr-input.ts

@@ -1,2 +0,2 @@
-import { Directive, EventEmitter, Host, HostListener, Input, Output } from "@angular/core";
+import { Directive, ElementRef, EventEmitter, Host, HostListener, Input, Output } from "@angular/core";
 import { NgModel } from "@angular/forms";
@@ -29,3 +29,3 @@
 
-    constructor( @Host() private completer: CtrCompleter, private ngModel: NgModel) {
+    constructor( @Host() private completer: CtrCompleter, private ngModel: NgModel, private el: ElementRef) {
         this.completer.selected.subscribe((item: CompleterItem) => {
@@ -111,2 +111,10 @@ if (!item) {
     public onBlur(event: any) {
+        // Check if we need to cancel Blur for IE
+        if (this.completer.isCancelBlur()){
+            setImmediate(() => {
+                // get the focus back
+                this.el.nativeElement.focus();
+            })
+            return;
+        }
         setTimeout(
@@ -113,0 +121,0 @@ () => {

src/directives/ctr-list.ts

@@ -0,3 +1,5 @@
+import "rxjs/add/observable/timer";
 import { ChangeDetectorRef, Directive, Host, Input, OnInit, TemplateRef, ViewContainerRef } from "@angular/core";
-import { Observable, Subscription } from "rxjs/Rx";
+import { Observable, } from "rxjs/Observable";
+import { Subscription } from "rxjs/Subscription";
 
@@ -139,3 +141,3 @@
         if (console && console.error) {
-            console.error(errMsg); // log to console 
+            console.error(errMsg); // log to console
         }
@@ -142,0 +144,0 @@ this.refreshTemplate();

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

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

Number of package files

92

increased by2.22%

Number of lines in readme file

184

increased by1.1%

Worsened metrics

Total package byte prevSize

302523

decreased by-7.07%

Lines of code

2713

decreased by-4.61%

No dependency changes