ng2-completer - npm Package Compare versions

Comparing version 0.4.0 to 1.0.0

CHANGELOG.md

 # Change Log
 All notable changes to this project will be documented in this file.
 
+## 1.0.0 (2017-01-21)
+
+### Implemented enhancements
+- Input box doesn't have a type! #73
+- new ctr-input property 'fillHighlighted' that controls setting of input value when item is highlighted #123 (by @mdudek)
+- Cannot access entered text when not selected from list #72
+- ng2-completer input autofocus? #125
+- Set `max-height` of dropdown in demo
+
+### Fixed bugs
+- ngModelChange doesn't work #97
+- Material design dropdown pushes everything down #115
+
+### Breaking changes
+- NgModel now reflects the vlue of the input. to get only selected values use `selected` event
+
 ## 0.4.0
-### Implemented enhancements:
+### Implemented enhancements
 - reorder of the folder structure
@@ -11,3 +27,3 @@ - Apply class to child input for styling purposes #40
 
-### Fixed bugs:
+### Fixed bugs
 - Problem with OnPush change detection strategy #69
@@ -17,3 +33,3 @@ - AutoMatch doesn't remove binded value if nothing match (angucomplete-alt does) #101
 ## 0.3.3
-### Fixed bugs:
+### Fixed bugs
 - Why version 0.3.2 requires @angular/*@2.2.4? #103
@@ -23,3 +39,3 @@ - Build with @angular version 2.3.1 to fix issue with metadata version
 ## 0.3.2
-### Fixed bugs:
+### Fixed bugs
 - Form is submitted when we select an option from dropdown using enter key #52
@@ -32,3 +48,3 @@
 
-### Fixed bugs:
+### Fixed bugs
 - TS5023 Build:Unknown compiler option 'forceConsistentCasingInFileName' #74
@@ -49,3 +65,3 @@ - .completer-selected-row is missing in the description #78
 
-### Fixed bugs:
+### Fixed bugs
 - Not able to capture blur event #50
@@ -58,3 +74,3 @@ - textSearching not display in first search #55
 
-### Fixed bugs:
+### Fixed bugs
 - Mouse click doesn't select the item, Enter Key does! #46
@@ -68,3 +84,3 @@
 
-### Fixed bugs:
+### Fixed bugs
 - Bump version dependency to angular 2.0.0 #39

components/completer-cmp.d.ts

 import { EventEmitter, OnInit } from "@angular/core";
-import { ControlValueAccessor } from "@angular/forms";
+import { ControlValueAccessor, FormControl } from "@angular/forms";
 import { CtrCompleter } from "../directives/ctr-completer";
@@ -15,2 +15,3 @@ import { CompleterData } from "../services/completer-data";
     clearSelected: boolean;
+    fillHighlighted: boolean;
     placeholder: string;
@@ -24,2 +25,3 @@ matchClass: string;
     inputClass: string;
+    autofocus: boolean;
     selected: EventEmitter<CompleterItem>;
@@ -30,2 +32,3 @@ highlighted: EventEmitter<CompleterItem>;
     searchStr: string;
+    control: FormControl;
     private displaySearching;
@@ -42,4 +45,5 @@ private _onTouchedCallback;
     onBlur(): void;
+    onChange(value: string): void;
     open(searchValue?: string): void;
     close(): void;
 }

components/completer-cmp.js

 "use strict";
 import { Component, Input, Output, EventEmitter, ViewChild, forwardRef } from "@angular/core";
-import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { FormControl, NG_VALUE_ACCESSOR } from "@angular/forms";
 import { CtrCompleter } from "../directives/ctr-completer";
@@ -21,2 +21,3 @@ import { MAX_CHARS, MIN_SEARCH_LENGTH, PAUSE, TEXT_SEARCHING, TEXT_NORESULTS } from "../globals";
         this.clearSelected = false;
+        this.fillHighlighted = true;
         this.placeholder = "";
@@ -27,2 +28,3 @@ this.textSearching = TEXT_SEARCHING;
         this.disableInput = false;
+        this.autofocus = false;
         this.selected = new EventEmitter();
@@ -32,2 +34,3 @@ this.highlighted = new EventEmitter();
         this.searchStr = "";
+        this.control = new FormControl("");
         this.displaySearching = true;
@@ -42,4 +45,5 @@ this._onTouchedCallback = noop;
                 this.searchStr = v;
-                this._onChangeCallback(v);
             }
+            // Propagate the change in any case
+            this._onChangeCallback(v);
         },
@@ -80,2 +84,5 @@ enumerable: true,
     };
+    CompleterCmp.prototype.onChange = function (value) {
+        this.value = value;
+    };
     CompleterCmp.prototype.open = function (searchValue) {
@@ -91,3 +98,3 @@ if (searchValue === void 0) { searchValue = ""; }
                     selector: "ng2-completer",
-                    template: "\n        <div class=\"completer-holder\" ctrCompleter>\n            <input class=\"completer-input\" ctrInput [ngClass]=\"inputClass\" [(ngModel)]=\"searchStr\" [attr.name]=\"inputName\" [placeholder]=\"placeholder\" [attr.maxlength]=\"maxChars\"\n                [tabindex]=\"fieldTabindex\" [disabled]=\"disableInput\" [clearSelected]=\"clearSelected\" [overrideSuggested]=\"overrideSuggested\" (blur)=\"onBlur()\"\n                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    ",
+                    template: "\n        <div class=\"completer-holder\" ctrCompleter>\n            <input 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()\" [autofocus]=\"autofocus\" 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    "],
@@ -107,2 +114,3 @@ providers: [COMPLETER_CONTROL_VALUE_ACCESSOR]
         'clearSelected': [{ type: Input },],
+        'fillHighlighted': [{ type: Input },],
         'placeholder': [{ type: Input },],
@@ -116,2 +124,3 @@ 'matchClass': [{ type: Input },],
         'inputClass': [{ type: Input },],
+        'autofocus': [{ type: Input },],
         'selected': [{ type: Output },],
@@ -118,0 +127,0 @@ 'highlighted': [{ type: Output },],

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 class=\"completer-input\" ctrInput [ngClass]=\"inputClass\" [(ngModel)]=\"searchStr\" [attr.name]=\"inputName\" [placeholder]=\"placeholder\" [attr.maxlength]=\"maxChars\"\n                [tabindex]=\"fieldTabindex\" [disabled]=\"disableInput\" [clearSelected]=\"clearSelected\" [overrideSuggested]=\"overrideSuggested\" (blur)=\"onBlur()\"\n                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"}}]}],"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"}}]}],"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"}}]}],"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"}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"onTouched":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"onBlur":[{"__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 class=\"completer-input\" ctrInput [ngClass]=\"inputClass\" [(ngModel)]=\"searchStr\" [attr.name]=\"inputName\" [placeholder]=\"placeholder\" [attr.maxlength]=\"maxChars\"\n                [tabindex]=\"fieldTabindex\" [disabled]=\"disableInput\" [clearSelected]=\"clearSelected\" [overrideSuggested]=\"overrideSuggested\" (blur)=\"onBlur()\"\n                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"}}]}],"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"}}]}],"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"}}]}],"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"}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"onTouched":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"onBlur":[{"__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 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()\" [autofocus]=\"autofocus\" 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"}}]}],"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"}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"onTouched":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__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 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()\" [autofocus]=\"autofocus\" 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"}}]}],"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"}]}]}],"__ctor__":[{"__symbolic":"constructor"}],"onTouched":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"onBlur":[{"__symbolic":"method"}],"onChange":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}]}}}}]

directives/ctr-input.d.ts

@@ -7,2 +7,3 @@ import { EventEmitter } from "@angular/core";
     overrideSuggested: boolean;
+    fillHighlighted: boolean;
     ngModelChange: EventEmitter<any>;
@@ -9,0 +10,0 @@ private _searchStr;

directives/ctr-input.js

@@ -17,2 +17,3 @@ import { Directive, EventEmitter, Host, HostListener, Input, Output } from "@angular/core";
         this.overrideSuggested = false;
+        this.fillHighlighted = true;
         this.ngModelChange = new EventEmitter();
@@ -36,4 +37,6 @@ this._searchStr = "";
         this.completer.highlighted.subscribe(function (item) {
-            _this._displayStr = item.title;
-            _this.ngModelChange.emit(item.title);
+            if (_this.fillHighlighted) {
+                _this._displayStr = item.title;
+                _this.ngModelChange.emit(item.title);
+            }
         });
@@ -129,2 +132,3 @@ }
         'overrideSuggested': [{ type: Input, args: ["overrideSuggested",] },],
+        'fillHighlighted': [{ type: Input, args: ["fillHighlighted",] },],
         'ngModelChange': [{ type: Output },],
@@ -131,0 +135,0 @@ 'onInputChange': [{ type: HostListener, args: ["input", ["$event"],] },],

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"]}]}],"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"}}]],"parameters":[{"__symbolic":"reference","module":"./ctr-completer","name":"CtrCompleter"}]}],"onInputChange":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["input",["$event"]]}]}],"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"]]}]}]}}}},{"__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"]}]}],"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"}}]],"parameters":[{"__symbolic":"reference","module":"./ctr-completer","name":"CtrCompleter"}]}],"onInputChange":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["input",["$event"]]}]}],"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"]]}]}]}}}}]
+[{"__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"}}]],"parameters":[{"__symbolic":"reference","module":"./ctr-completer","name":"CtrCompleter"}]}],"onInputChange":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["input",["$event"]]}]}],"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"]]}]}]}}}},{"__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"}}]],"parameters":[{"__symbolic":"reference","module":"./ctr-completer","name":"CtrCompleter"}]}],"onInputChange":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener"},"arguments":["input",["$event"]]}]}],"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"]]}]}]}}}}]

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/add/operator/catch"),require("rxjs/Observable"),require("rxjs/Subject"),require("rxjs/add/operator/map"),require("rxjs/Rx"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/forms","@angular/http","rxjs/add/operator/catch","rxjs/Observable","rxjs/Subject","rxjs/add/operator/map","rxjs/Rx","@angular/common"],e):e(t.ng2Completer=t.ng2Completer||{},t.ng.core,t._angular_forms,t._angular_http,t.rxjs_add_operator_catch,t.Rx,t.Rx,t.rxjs_add_operator_map,t.Rx,t.ng.common)}(this,function(t,e,r,i,o,n,s,c,a,h){"use strict";function l(){return function(){return new H}}function p(t){return function(){return new R(t)}}var u=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=!0},t.prototype.onSelected=function(t){this.selected.emit(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.decorators=[{type:e.Directive,args:[{selector:"[ctrCompleter]"}]}],t.ctorParameters=function(){return[]},t.propDecorators={selected:[{type:e.Output}],highlighted:[{type:e.Output}]},t}(),d=524288,m=3,g=250,f="Searching...",y="No results found",v=100,w=function(){},S={provide:r.NG_VALUE_ACCESSOR,useExisting:e.forwardRef(function(){return x}),multi:!0},x=function(){function t(){this.inputName="",this.pause=g,this.minSearchLength=m,this.maxChars=d,this.overrideSuggested=!1,this.clearSelected=!1,this.placeholder="",this.textSearching=f,this.textNoResults=y,this.autoMatch=!1,this.disableInput=!1,this.selected=new e.EventEmitter,this.highlighted=new e.EventEmitter,this.blur=new e.EventEmitter,this.searchStr="",this.displaySearching=!0,this._onTouchedCallback=w,this._onChangeCallback=w}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.ngOnInit=function(){var t=this;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.open=function(t){void 0===t&&(t=""),this.completer.search(t)},t.prototype.close=function(){this.completer.clear()},t.decorators=[{type:e.Component,args:[{selector:"ng2-completer",template:'\n        <div class="completer-holder" ctrCompleter>\n            <input class="completer-input" ctrInput [ngClass]="inputClass" [(ngModel)]="searchStr" [attr.name]="inputName" [placeholder]="placeholder" [attr.maxlength]="maxChars"\n                [tabindex]="fieldTabindex" [disabled]="disableInput" [clearSelected]="clearSelected" [overrideSuggested]="overrideSuggested" (blur)="onBlur()"\n                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:[S]}]}],t.ctorParameters=function(){return[]},t.propDecorators={dataService:[{type:e.Input}],inputName:[{type:e.Input}],pause:[{type:e.Input}],minSearchLength:[{type:e.Input}],maxChars:[{type:e.Input}],overrideSuggested:[{type:e.Input}],clearSelected:[{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}],selected:[{type:e.Output}],highlighted:[{type:e.Output}],blur:[{type:e.Output}],completer:[{type:e.ViewChild,args:[u]}]},t}(),b=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.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}]},t}(),C=function(t,e){function r(){this.constructor=t}for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i]);t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)},I=function(t){function e(){t.call(this)}return C(e,t),e.prototype.cancel=function(){},e.prototype.searchFieldss=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=[];if(this._searchFields&&""!=this._searchFields&&""!=e)for(var i=this._searchFields.split(","),o=0;o<t.length;o++){for(var n=!1,s=0;s<i.length&&!n;s++){var c=this.extractValue(t[o],i[s])||"";n=c.toString().toLowerCase().indexOf(e.toString().toLowerCase())>=0}n&&r.push(t[o])}else r=t;return r},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,s,c=[];if(t&&t.length>0)for(e=0;e<t.length;e++)this.titleField&&""!==this._titleField&&(o=n=this.extractTitle(t[e])),r="",this._descriptionField&&(r=s=this.extractValue(t[e],this._descriptionField)),i=null,this._imageField&&(i=this.extractValue(t[e],this._imageField)),c.push({title:n,description:s,image:i,originalObject:t[e]});return c},e}(s.Subject),_=function(t,e){function r(){this.constructor=t}for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i]);t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)},H=function(t){function r(){t.call(this)}return _(r,t),r.prototype.data=function(t){var e=this;return t instanceof n.Observable?t.subscribe(function(t){e._data=t,e.savedTerm&&e.search(e.savedTerm)}):this._data=t,this},r.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},r.decorators=[{type:e.Injectable}],r.ctorParameters=function(){return[]},r}(I),T=function(t,e){function r(){this.constructor=t}for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i]);t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)},R=function(t){function e(e){t.call(this),this.http=e,this._urlFormater=null,this._dataField=null}return T(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}(I),O=function(){function t(t,e){this.localDataFactory=t,this.remoteDataFactory=e}return t.prototype.local=function(t,e,r){var i=this.localDataFactory();return i.data(t).searchFieldss(e).titleField(r)},t.prototype.remote=function(t,e,r){var i=this.remoteDataFactory();return i.remoteUrl(t).searchFieldss(e).titleField(r)},t.decorators=[{type:e.Injectable}],t.ctorParameters=function(){return[{type:void 0,decorators:[{type:e.Inject,args:[H]}]},{type:void 0,decorators:[{type:e.Inject,args:[R]}]}]},t}(),F={provide:H,useFactory:l},L={provide:R,useFactory:p,deps:[i.Http]},D=function(){function t(t,e){this.row=t,this.index=e}return t}(),E=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),void(this.currHighlited=void 0)):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.decorators=[{type:e.Directive,args:[{selector:"[ctrDropdown]"}]}],t.ctorParameters=function(){return[{type:u,decorators:[{type:e.Host}]},{type:e.ElementRef}]},t}(),j=40,k=39,M=38,P=37,N=27,V=13,z=9,B=function(){function t(t){var r=this;this.completer=t,this.clearSelected=!1,this.overrideSuggested=!1,this.ngModelChange=new e.EventEmitter,this._searchStr="",this._displayStr="",this._selectedItem=null,this.completer.selected.subscribe(function(t){r._selectedItem=t,t&&(r.clearSelected?r.searchStr="":r.searchStr=t.title,r.ngModelChange.emit(r.searchStr))}),this.completer.highlighted.subscribe(function(t){r._displayStr=t.title,r.ngModelChange.emit(t.title)})}return t.prototype.onInputChange=function(t){this.searchStr=t.target.value},t.prototype.keyupHandler=function(t){if(t.keyCode!==P&&t.keyCode!==k&&t.keyCode!==z)if(t.keyCode===M||t.keyCode===V)t.preventDefault();else if(t.keyCode===j)t.preventDefault(),this.completer.search(this.searchStr);else if(t.keyCode===N)this._searchStr=this._displayStr,this.completer.clear();else{if(!this.searchStr)return void this.completer.clear();this.completer.search(this.searchStr)}},t.prototype.keydownHandler=function(t){t.keyCode===V?(this.completer.hasHighlited()&&t.preventDefault(),this.completer.selectCurrent()):t.keyCode===j?(t.preventDefault(),this.completer.nextRow()):t.keyCode===M?(t.preventDefault(),this.completer.prevRow()):t.keyCode===z?this.overrideSuggested&&this._selectedItem?this.completer.onSelected({title:this.searchStr,originalObject:null}):this.completer.selectCurrent():t.keyCode===N&&t.preventDefault()},t.prototype.onBlur=function(t){var e=this;setTimeout(function(){e.overrideSuggested&&e.completer.onSelected({title:e.searchStr,originalObject:null}),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.decorators=[{type:e.Directive,args:[{selector:"[ctrInput]"}]}],t.ctorParameters=function(){return[{type:u,decorators:[{type:e.Host}]}]},t.propDecorators={clearSelected:[{type:e.Input,args:["clearSelected"]}],overrideSuggested:[{type:e.Input,args:["overrideSuggested"]}],ngModelChange:[{type:e.Output}],onInputChange:[{type:e.HostListener,args:["input",["$event"]]}],keyupHandler:[{type:e.HostListener,args:["keyup",["$event"]]}],keydownHandler:[{type:e.HostListener,args:["keydown",["$event"]]}],onBlur:[{type:e.HostListener,args:["blur",["$event"]]}]},t}(),q=function(){function t(t,e,r){this.results=t,this.searching=e,this.searchInitialized=r}return t}(),A=function(){function t(t,e,r,i){this.completer=t,this.templateRef=e,this.viewContainer=r,this.cd=i,this.ctrListMinSearchLength=m,this.ctrListPause=g,this.ctrListAutoMatch=!1,this.term=null,this.searchTimer=null,this.clearTimer=null,this.ctx=new q([],!1,!1)}return t.hasTerm=function(t){return t||""===t},t.prototype.ngOnInit=function(){this.completer.registerList(this),this.viewContainer.createEmbeddedView(this.templateRef,new q([],!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;this.term!=e&&this.completer.clear(),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=a.Observable.timer(this.ctrListPause).subscribe(function(){r.searchTimerComplete(e)}))},t.prototype.clear=function(){var t=this;this.searchTimer&&this.searchTimer.unsubscribe(),this.clearTimer=a.Observable.timer(v).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){return!t.hasTerm(e)||e.length<this.ctrListMinSearchLength?void(this.ctx.searching=!1):(this.term=e,void 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(),a.Observable.throw(e)},t.prototype.refreshTemplate=function(){this.viewContainer.clear(),this.viewContainer.createEmbeddedView(this.templateRef,this.ctx),this.cd.markForCheck()},t.decorators=[{type:e.Directive,args:[{selector:"[ctrList]"}]}],t.ctorParameters=function(){return[{type:u,decorators:[{type:e.Host}]},{type:e.TemplateRef},{type:e.ViewContainerRef},{type:e.ChangeDetectorRef}]},t.propDecorators={ctrListMinSearchLength:[{type:e.Input}],ctrListPause:[{type:e.Input}],ctrListAutoMatch:[{type:e.Input}],dataService:[{type:e.Input,args:["ctrList"]}]},t}(),U=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 D(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.decorators=[{type:e.Directive,args:[{selector:"[ctrRow]"}]}],t.ctorParameters=function(){return[{type:e.ElementRef},{type:e.Renderer},{type:E,decorators:[{type:e.Host}]}]},t.propDecorators={ctrRow:[{type:e.Input}],dataItem:[{type:e.Input}],onClick:[{type:e.HostListener,args:["click",["$event"]]}],onMouseEnter:[{type:e.HostListener,args:["mouseenter",["$event"]]}]},t}(),$=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[h.CommonModule,r.FormsModule,i.HttpModule],declarations:[b,u,E,B,A,U,x],exports:[x,b,u,E,B,A,U],providers:[O,F,L]}]}],t.ctorParameters=function(){return[]},t}();t.Ng2CompleterModule=$,t.CompleterCmp=x,t.CompleterService=O,t.LocalData=H,t.RemoteData=R,t.CompleterBaseData=I,t.CtrCompleter=u,t.CtrDropdown=E,t.CtrInput=B,t.CtrList=A,t.CtrRow=U,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/add/operator/catch"),require("rxjs/Observable"),require("rxjs/Subject"),require("rxjs/add/operator/map"),require("rxjs/Rx"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/forms","@angular/http","rxjs/add/operator/catch","rxjs/Observable","rxjs/Subject","rxjs/add/operator/map","rxjs/Rx","@angular/common"],e):e(t.ng2Completer=t.ng2Completer||{},t.ng.core,t._angular_forms,t._angular_http,t.rxjs_add_operator_catch,t.Rx,t.Rx,t.rxjs_add_operator_map,t.Rx,t.ng.common)}(this,function(t,e,r,i,o,n,s,c,a,l){"use strict";function h(){return function(){return new H}}function p(t){return function(){return new R(t)}}var u=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=!0},t.prototype.onSelected=function(t){this.selected.emit(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.decorators=[{type:e.Directive,args:[{selector:"[ctrCompleter]"}]}],t.ctorParameters=function(){return[]},t.propDecorators={selected:[{type:e.Output}],highlighted:[{type:e.Output}]},t}(),d=524288,m=3,g=250,f="Searching...",y="No results found",v=100,w=function(){},S={provide:r.NG_VALUE_ACCESSOR,useExisting:e.forwardRef(function(){return x}),multi:!0},x=function(){function t(){this.inputName="",this.pause=g,this.minSearchLength=m,this.maxChars=d,this.overrideSuggested=!1,this.clearSelected=!1,this.fillHighlighted=!0,this.placeholder="",this.textSearching=f,this.textNoResults=y,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=w,this._onChangeCallback=w}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.ngOnInit=function(){var t=this;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.decorators=[{type:e.Component,args:[{selector:"ng2-completer",template:'\n        <div class="completer-holder" ctrCompleter>\n            <input 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()" [autofocus]="autofocus" 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:[S]}]}],t.ctorParameters=function(){return[]},t.propDecorators={dataService:[{type:e.Input}],inputName:[{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}],completer:[{type:e.ViewChild,args:[u]}]},t}(),C=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.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}]},t}(),b=function(t,e){function r(){this.constructor=t}for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i]);t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)},I=function(t){function e(){t.call(this)}return b(e,t),e.prototype.cancel=function(){},e.prototype.searchFieldss=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=[];if(this._searchFields&&""!=this._searchFields&&""!=e)for(var i=this._searchFields.split(","),o=0;o<t.length;o++){for(var n=!1,s=0;s<i.length&&!n;s++){var c=this.extractValue(t[o],i[s])||"";n=c.toString().toLowerCase().indexOf(e.toString().toLowerCase())>=0}n&&r.push(t[o])}else r=t;return r},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,s,c=[];if(t&&t.length>0)for(e=0;e<t.length;e++)this.titleField&&""!==this._titleField&&(o=n=this.extractTitle(t[e])),r="",this._descriptionField&&(r=s=this.extractValue(t[e],this._descriptionField)),i=null,this._imageField&&(i=this.extractValue(t[e],this._imageField)),c.push({title:n,description:s,image:i,originalObject:t[e]});return c},e}(s.Subject),_=function(t,e){function r(){this.constructor=t}for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i]);t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)},H=function(t){function r(){t.call(this)}return _(r,t),r.prototype.data=function(t){var e=this;return t instanceof n.Observable?t.subscribe(function(t){e._data=t,e.savedTerm&&e.search(e.savedTerm)}):this._data=t,this},r.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},r.decorators=[{type:e.Injectable}],r.ctorParameters=function(){return[]},r}(I),T=function(t,e){function r(){this.constructor=t}for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i]);t.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)},R=function(t){function e(e){t.call(this),this.http=e,this._urlFormater=null,this._dataField=null}return T(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}(I),O=function(){function t(t,e){this.localDataFactory=t,this.remoteDataFactory=e}return t.prototype.local=function(t,e,r){var i=this.localDataFactory();return i.data(t).searchFieldss(e).titleField(r)},t.prototype.remote=function(t,e,r){var i=this.remoteDataFactory();return i.remoteUrl(t).searchFieldss(e).titleField(r)},t.decorators=[{type:e.Injectable}],t.ctorParameters=function(){return[{type:void 0,decorators:[{type:e.Inject,args:[H]}]},{type:void 0,decorators:[{type:e.Inject,args:[R]}]}]},t}(),F={provide:H,useFactory:h},L={provide:R,useFactory:p,deps:[i.Http]},D=function(){function t(t,e){this.row=t,this.index=e}return t}(),E=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),void(this.currHighlited=void 0)):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.decorators=[{type:e.Directive,args:[{selector:"[ctrDropdown]"}]}],t.ctorParameters=function(){return[{type:u,decorators:[{type:e.Host}]},{type:e.ElementRef}]},t}(),j=40,k=39,M=38,P=37,N=27,V=13,z=9,B=function(){function t(t){var r=this;this.completer=t,this.clearSelected=!1,this.overrideSuggested=!1,this.fillHighlighted=!0,this.ngModelChange=new e.EventEmitter,this._searchStr="",this._displayStr="",this._selectedItem=null,this.completer.selected.subscribe(function(t){r._selectedItem=t,t&&(r.clearSelected?r.searchStr="":r.searchStr=t.title,r.ngModelChange.emit(r.searchStr))}),this.completer.highlighted.subscribe(function(t){r.fillHighlighted&&(r._displayStr=t.title,r.ngModelChange.emit(t.title))})}return t.prototype.onInputChange=function(t){this.searchStr=t.target.value},t.prototype.keyupHandler=function(t){if(t.keyCode!==P&&t.keyCode!==k&&t.keyCode!==z)if(t.keyCode===M||t.keyCode===V)t.preventDefault();else if(t.keyCode===j)t.preventDefault(),this.completer.search(this.searchStr);else if(t.keyCode===N)this._searchStr=this._displayStr,this.completer.clear();else{if(!this.searchStr)return void this.completer.clear();this.completer.search(this.searchStr)}},t.prototype.keydownHandler=function(t){t.keyCode===V?(this.completer.hasHighlited()&&t.preventDefault(),this.completer.selectCurrent()):t.keyCode===j?(t.preventDefault(),this.completer.nextRow()):t.keyCode===M?(t.preventDefault(),this.completer.prevRow()):t.keyCode===z?this.overrideSuggested&&this._selectedItem?this.completer.onSelected({title:this.searchStr,originalObject:null}):this.completer.selectCurrent():t.keyCode===N&&t.preventDefault()},t.prototype.onBlur=function(t){var e=this;setTimeout(function(){e.overrideSuggested&&e.completer.onSelected({title:e.searchStr,originalObject:null}),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.decorators=[{type:e.Directive,args:[{selector:"[ctrInput]"}]}],t.ctorParameters=function(){return[{type:u,decorators:[{type:e.Host}]}]},t.propDecorators={clearSelected:[{type:e.Input,args:["clearSelected"]}],overrideSuggested:[{type:e.Input,args:["overrideSuggested"]}],fillHighlighted:[{type:e.Input,args:["fillHighlighted"]}],ngModelChange:[{type:e.Output}],onInputChange:[{type:e.HostListener,args:["input",["$event"]]}],keyupHandler:[{type:e.HostListener,args:["keyup",["$event"]]}],keydownHandler:[{type:e.HostListener,args:["keydown",["$event"]]}],onBlur:[{type:e.HostListener,args:["blur",["$event"]]}]},t}(),q=function(){function t(t,e,r){this.results=t,this.searching=e,this.searchInitialized=r}return t}(),A=function(){function t(t,e,r,i){this.completer=t,this.templateRef=e,this.viewContainer=r,this.cd=i,this.ctrListMinSearchLength=m,this.ctrListPause=g,this.ctrListAutoMatch=!1,this.term=null,this.searchTimer=null,this.clearTimer=null,this.ctx=new q([],!1,!1)}return t.hasTerm=function(t){return t||""===t},t.prototype.ngOnInit=function(){this.completer.registerList(this),this.viewContainer.createEmbeddedView(this.templateRef,new q([],!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;this.term!=e&&this.completer.clear(),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=a.Observable.timer(this.ctrListPause).subscribe(function(){r.searchTimerComplete(e)}))},t.prototype.clear=function(){var t=this;this.searchTimer&&this.searchTimer.unsubscribe(),this.clearTimer=a.Observable.timer(v).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){return!t.hasTerm(e)||e.length<this.ctrListMinSearchLength?void(this.ctx.searching=!1):(this.term=e,void 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(),a.Observable.throw(e)},t.prototype.refreshTemplate=function(){this.viewContainer.clear(),this.viewContainer.createEmbeddedView(this.templateRef,this.ctx),this.cd.markForCheck()},t.decorators=[{type:e.Directive,args:[{selector:"[ctrList]"}]}],t.ctorParameters=function(){return[{type:u,decorators:[{type:e.Host}]},{type:e.TemplateRef},{type:e.ViewContainerRef},{type:e.ChangeDetectorRef}]},t.propDecorators={ctrListMinSearchLength:[{type:e.Input}],ctrListPause:[{type:e.Input}],ctrListAutoMatch:[{type:e.Input}],dataService:[{type:e.Input,args:["ctrList"]}]},t}(),$=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 D(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.decorators=[{type:e.Directive,args:[{selector:"[ctrRow]"}]}],t.ctorParameters=function(){return[{type:e.ElementRef},{type:e.Renderer},{type:E,decorators:[{type:e.Host}]}]},t.propDecorators={ctrRow:[{type:e.Input}],dataItem:[{type:e.Input}],onClick:[{type:e.HostListener,args:["click",["$event"]]}],onMouseEnter:[{type:e.HostListener,args:["mouseenter",["$event"]]}]},t}(),U=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[l.CommonModule,r.FormsModule,i.HttpModule],declarations:[C,u,E,B,A,$,x],exports:[x,C,u,E,B,A,$],providers:[O,F,L]}]}],t.ctorParameters=function(){return[]},t}();t.Ng2CompleterModule=U,t.CompleterCmp=x,t.CompleterService=O,t.LocalData=H,t.RemoteData=R,t.CompleterBaseData=I,t.CtrCompleter=u,t.CtrDropdown=E,t.CtrInput=B,t.CtrList=A,t.CtrRow=$,Object.defineProperty(t,"__esModule",{value:!0})});
 //# sourceMappingURL=ng2-completer.umd.js.map

package.json

 {
   "name": "ng2-completer",
-  "version": "0.4.0",
+  "version": "1.0.0",
   "description": "ng2 autocomplete/typeahead component",
@@ -5,0 +5,0 @@ "main": "ng2-completer.umd.js",

README.md

@@ -97,2 +97,3 @@ # ng2-completer
 |autoMatch|Auto select an item if it is the only result and it is an exact match of the search text.|boolean|No|false
+|autofocus|Set input focus when the page loads|boolean|No|false
 |clearSelected|Clear the input when a result is selected.|boolean|No|false|
@@ -107,6 +108,7 @@ |disableInput|If true disable the input field.|boolean|No|false|
 |overrideSuggested|If true will override suggested and set the model with the value in the input field.|boolean|No|false|
+|fillHighlighted|If true will set the model with the value in the input field when item is highlighted.|boolean|No|true|
 |pause|Number of msec. to wait before searching.|number|No|250|
 |placeholder|Placeholder text for the search field.|string|No||
 |selected|Event handler that is called when an item is selected.|(selected: CompleterItem): void|No||
-|highlighted|Event handler that is called when an item is highlited.|(highlighted: CompleterItem): void|No||
+|highlighted|Event handler that is called when an item is highlighted.|(highlighted: CompleterItem): void|No||
 |textNoResults|Text displayed when the search returned no results.|string|No|
@@ -113,0 +115,0 @@ |textSearching|Text displayed while search is active.|string|No|Searching...|

src/components/completer-cmp.ts

 "use strict";
 import { Component, Input, Output, EventEmitter, OnInit, ViewChild, forwardRef } from "@angular/core";
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
+import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from "@angular/forms";
 
@@ -26,5 +26,5 @@ import { CtrCompleter } from "../directives/ctr-completer";
         <div class="completer-holder" ctrCompleter>
-            <input class="completer-input" ctrInput [ngClass]="inputClass" [(ngModel)]="searchStr" [attr.name]="inputName" [placeholder]="placeholder" [attr.maxlength]="maxChars"
-                [tabindex]="fieldTabindex" [disabled]="disableInput" [clearSelected]="clearSelected" [overrideSuggested]="overrideSuggested" (blur)="onBlur()"
-                autocomplete="off" autocorrect="off" autocapitalize="off" />
+            <input 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()" [autofocus]="autofocus" autocomplete="off" autocorrect="off" autocapitalize="off" />
 
@@ -111,2 +111,3 @@ <div class="completer-dropdown-holder" *ctrList="dataService; minSearchLength: minSearchLength; pause: pause; autoMatch: autoMatch; let items = results; let searchActive = searching; let isInitialized = searchInitialized;">
     @Input() public clearSelected = false;
+    @Input() public fillHighlighted = true;
     @Input() public placeholder = "";
@@ -120,2 +121,3 @@ @Input() public matchClass: string;
     @Input() public inputClass: string;
+    @Input() public autofocus = false;
 
@@ -129,2 +131,3 @@ @Output() public selected = new EventEmitter<CompleterItem>();
     public searchStr = "";
+    public control = new FormControl("");
 
@@ -142,4 +145,5 @@ private displaySearching = true;
             this.searchStr = v;
-            this._onChangeCallback(v);
         }
+        // Propagate the change in any case
+        this._onChangeCallback(v);
     }
@@ -183,2 +187,6 @@
 
+    public onChange(value: string) {
+        this.value = value;
+    }
+
     public open(searchValue = "") {
@@ -185,0 +193,0 @@ this.completer.search(searchValue);

src/directives/ctr-input.ts

@@ -22,3 +22,4 @@ import { Directive, EventEmitter, Host, HostListener, Input, Output } from "@angular/core";
     @Input("overrideSuggested") public overrideSuggested = false;
-    @Output() public ngModelChange: EventEmitter<any> = new EventEmitter()
+    @Input("fillHighlighted") public fillHighlighted = true;
+    @Output() public ngModelChange: EventEmitter<any> = new EventEmitter();
 
@@ -43,4 +44,6 @@ private _searchStr = "";
         this.completer.highlighted.subscribe((item: CompleterItem) => {
-            this._displayStr = item.title;
-            this.ngModelChange.emit(item.title);
+            if (this.fillHighlighted) {
+                this._displayStr = item.title;
+                this.ngModelChange.emit(item.title);
+            }
         });
@@ -47,0 +50,0 @@ }

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Long strings

Supply chain risk

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Major refactor

Supply chain risk

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

Found 1 instance in 1 package

Long strings

Supply chain risk

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

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

276391

increased by1.96%

Lines of code

2486

increased by1.22%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

179

increased by1.13%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes