merge with master

ng-select · Jan 17, 2018 · f6c4ad5 · f6c4ad5
2 parents 5568c4c + f5e99f0
commit f6c4ad5
Show file tree

Hide file tree

Showing 10 changed files with 91 additions and 75 deletions.
diff --git a/README.md b/README.md
@@ -61,9 +61,16 @@ import {NgSelectModule} from '@ng-select/ng-select';
 export class AppModule {
 }
 ```
-You can also configure global configuration and localization messages by using NgSelectModule.forRoot:
+You can also configure global configuration and localization messages by providing custom NG_SELECT_DEFAULT_CONFIG
 ```js
-NgSelectModule.forRoot({notFoundText: 'Your custom not found text', typeToSearchText: 'Your custom type to search text'})
+    providers: [
+        {
+            provide: NG_SELECT_DEFAULT_CONFIG,
+            useValue: {
+                notFoundText: 'Custom not found'
+            }
+        }
+    ]
 ```
 ### SystemJS
 If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.

diff --git a/demo/app/app.module.ts b/demo/app/app.module.ts
@@ -4,7 +4,7 @@ import { HttpClientModule } from '@angular/common/http';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule, Routes } from '@angular/router';
-import { NgSelectModule } from '@ng-select/ng-select';
+import { NgSelectModule, NG_SELECT_DEFAULT_CONFIG } from '@ng-select/ng-select';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 import { AppComponent } from './app.component';
@@ -44,7 +44,7 @@ const appRoutes: Routes = [
 @NgModule({
     imports: [
         BrowserModule,
-        NgSelectModule.forRoot(),
+        NgSelectModule,
         CommonModule,
         FormsModule,
         ReactiveFormsModule,
@@ -58,7 +58,13 @@ const appRoutes: Routes = [
         )
     ],
     providers: [
-        DataService
+        DataService,
+        {
+            provide: NG_SELECT_DEFAULT_CONFIG,
+            useValue: {
+                notFoundText: 'Custom not found'
+            }
+        }
     ],
     declarations: [
         AppComponent,

diff --git a/integration/src/app/app.module.ts b/integration/src/app/app.module.ts
@@ -4,7 +4,7 @@ import {FormsModule} from '@angular/forms';
 import {CommonModule} from '@angular/common';
 
 import {AppComponent} from './app.component';
-import {NgSelectModule} from '@ng-select/ng-select';
+import {NgSelectModule, NG_SELECT_DEFAULT_CONFIG} from '@ng-select/ng-select';
 
 @NgModule({
   declarations: [
@@ -14,9 +14,16 @@ import {NgSelectModule} from '@ng-select/ng-select';
     CommonModule,
     FormsModule,
     BrowserModule,
-    NgSelectModule.forRoot({clearAllText: ''})
+    NgSelectModule
+  ],
+  providers: [
+    {
+      provide: NG_SELECT_DEFAULT_CONFIG,
+      useValue: {
+          notFoundText: 'Custom not found'
+      }
+  }
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule {

diff --git a/src/index.ts b/src/index.ts
@@ -1,3 +1,3 @@
-export { NgSelectComponent } from './ng-select/ng-select.component';
+export { NgSelectComponent, NG_SELECT_DEFAULT_CONFIG } from './ng-select/ng-select.component';
 export { NgSelectModule } from './ng-select/ng-select.module';
 export { NgOption, NgSelectConfig } from './ng-select/ng-select.types';
diff --git a/src/ng-select/items-list.ts b/src/ng-select/items-list.ts
@@ -43,7 +43,7 @@ export class ItemsList {
         item.selected = true;
     }
 
-    findItem(value, bindValue: string): NgOption {
+    findItem(value: any, bindValue: string): NgOption {
         if (!value) {
             return null;
         }
@@ -109,7 +109,7 @@ export class ItemsList {
         this._markedIndex = this.filteredItems.indexOf(item);
     }
 
-    markSelectedOrDefault(markDefault) {
+    markSelectedOrDefault(markDefault: boolean) {
         if (this.filteredItems.length === 0) {
             return;
         }
@@ -139,7 +139,7 @@ export class ItemsList {
         }
     }
 
-    private getDefaultFilterFunc(term) {
+    private getDefaultFilterFunc(term: string) {
         return (option: NgOption) => {
             return searchHelper.stripSpecialChars(option.label || '')
                 .toUpperCase()

diff --git a/src/ng-select/ng-select.component.html b/src/ng-select/ng-select.component.html
@@ -21,7 +21,7 @@
             <input #filterInput
                    type="text"
                    [value]="filterValue"
-                   (input)="onFilter($event)"
+                   (input)="onFilter(filterInput.value)"
                    (focus)="onInputFocus($event)"
                    (blur)="onInputBlur($event)"
                    (change)="$event.stopPropagation()"

diff --git a/src/ng-select/ng-select.component.spec.ts b/src/ng-select/ng-select.component.spec.ts
@@ -492,7 +492,7 @@ describe('NgSelectComponent', function () {
 
         describe('tab', () => {
             it('should close dropdown when there are no items', fakeAsync(() => {
-                fixture.componentInstance.select.onFilter({ target: { value: 'random stuff' } });
+                fixture.componentInstance.select.onFilter('random stuff');
                 tick(200);
                 triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Space);
                 triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Tab);
@@ -778,7 +778,7 @@ describe('NgSelectComponent', function () {
                 </ng-select>`);
 
             tickAndDetectChanges(fixture);
-            fixture.componentInstance.select.onFilter({ target: { value: 'new tag' } });
+            fixture.componentInstance.select.onFilter('new tag');
             tickAndDetectChanges(fixture);
             triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Enter);
             expect(fixture.componentInstance.selectedCity.name).toBe('new tag');
@@ -795,7 +795,7 @@ describe('NgSelectComponent', function () {
                 </ng-select>`);
 
             tickAndDetectChanges(fixture);
-            fixture.componentInstance.select.onFilter({ target: { value: 'custom tag' } });
+            fixture.componentInstance.select.onFilter('custom tag');
             tickAndDetectChanges(fixture);
             triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Enter);
             expect(<any>fixture.componentInstance.selectedCity).toEqual(jasmine.objectContaining({
@@ -845,7 +845,7 @@ describe('NgSelectComponent', function () {
                 </ng-select>`);
 
             tick(200);
-            fixture.componentInstance.select.onFilter({ target: { value: 'vilnius' } });
+            fixture.componentInstance.select.onFilter('vilnius');
             tick(200);
 
             const result = [jasmine.objectContaining({
@@ -884,7 +884,7 @@ describe('NgSelectComponent', function () {
                     [(ngModel)]="selectedCity">
                 </ng-select>`);
 
-            fixture.componentInstance.select.onFilter({ target: { value: 'vilnius' } });
+            fixture.componentInstance.select.onFilter('vilnius');
             tickAndDetectChanges(fixture);
             expect(fixture.componentInstance.select.filterValue).toBe(null);
         }));
@@ -898,7 +898,7 @@ describe('NgSelectComponent', function () {
                 </ng-select>`);
 
             tick(200);
-            fixture.componentInstance.select.onFilter({ target: { value: 'pab' } });
+            fixture.componentInstance.select.onFilter('pab');
             tick(200);
 
             const result = jasmine.objectContaining({
@@ -919,7 +919,7 @@ describe('NgSelectComponent', function () {
                 </ng-select>`);
 
             tick(200);
-            fixture.componentInstance.select.onFilter({ target: { value: 'pab' } });
+            fixture.componentInstance.select.onFilter('pab');
             tick(200);
             expect(fixture.componentInstance.select.itemsList.markedItem).toEqual(undefined)
         }));
@@ -955,13 +955,13 @@ describe('NgSelectComponent', function () {
                     expect(term).toBe('vilnius');
                 });
                 tick(200);
-                fixture.componentInstance.select.onFilter({ target: { value: 'vilnius' } });
+                fixture.componentInstance.select.onFilter('vilnius');
                 tickAndDetectChanges(fixture);
             }));
 
             it('should mark first item when typeahead results are loaded', fakeAsync(() => {
                 fixture.componentInstance.customFilter.subscribe();
-                fixture.componentInstance.select.onFilter({ target: { value: 'buk' } });
+                fixture.componentInstance.select.onFilter('buk');
                 fixture.componentInstance.cities = [{ id: 4, name: 'Bukiskes' }];
                 tickAndDetectChanges(fixture);
                 triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Enter);
@@ -973,7 +973,7 @@ describe('NgSelectComponent', function () {
             it('should not mark first item when typeahead results are loaded', fakeAsync(() => {
                 fixture.componentInstance.select.markFirst = false;
                 fixture.componentInstance.customFilter.subscribe();
-                fixture.componentInstance.select.onFilter({ target: { value: 'buk' } });
+                fixture.componentInstance.select.onFilter('buk');
                 fixture.componentInstance.cities = [{ id: 4, name: 'Bukiskes' }];
                 tickAndDetectChanges(fixture);
                 triggerKeyDownEvent(getNgSelectElement(fixture), KeyCode.Enter);
@@ -982,7 +982,7 @@ describe('NgSelectComponent', function () {
 
             it('should start and stop loading indicator', fakeAsync(() => {
                 fixture.componentInstance.customFilter.subscribe();
-                fixture.componentInstance.select.onFilter({ target: { value: 'buk' } });
+                fixture.componentInstance.select.onFilter('buk');
                 expect(fixture.componentInstance.select.isLoading).toBeTruthy();
                 fixture.componentInstance.cities = [{ id: 4, name: 'Bukiskes' }];
                 tickAndDetectChanges(fixture);

diff --git a/src/ng-select/ng-select.component.ts b/src/ng-select/ng-select.component.ts
@@ -17,9 +17,10 @@ import {
     ViewChild,
     ElementRef,
     ChangeDetectionStrategy,
-    Optional,
+    Inject,
     SimpleChanges,
-    Renderer2, ContentChildren, QueryList
+    Renderer2, ContentChildren, QueryList,
+    InjectionToken
 } from '@angular/core';
 
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -35,6 +36,8 @@ import { ItemsList } from './items-list';
 import { Subject } from 'rxjs/Subject';
 import { NgOptionComponent } from './ng-option.component';
 
+export const NG_SELECT_DEFAULT_CONFIG = new InjectionToken<NgSelectConfig>('ng-select-default-options');
+
 const NG_SELECT_VALUE_ACCESSOR = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => NgSelectComponent),
@@ -65,23 +68,23 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
     @ViewChild(VirtualScrollComponent) dropdownList: VirtualScrollComponent;
     @ViewChild('dropdownPanel') dropdownPanel: ElementRef;
     @ContentChildren(NgOptionComponent, { descendants: true }) ngOptions: QueryList<NgOptionComponent>;
-    @ViewChild('filterInput') filterInput;
+    @ViewChild('filterInput') filterInput: ElementRef;
 
     // inputs
-    @Input() items = [];
+    @Input() items: any[] = [];
     @Input() bindLabel: string;
     @Input() bindValue: string;
     @Input() clearable = true;
     @Input() markFirst = true;
     @Input() disableVirtualScroll = false;
     @Input() placeholder: string;
-    @Input() notFoundText;
-    @Input() typeToSearchText;
-    @Input() addTagText;
-    @Input() loadingText;
-    @Input() clearAllText;
+    @Input() notFoundText: string;
+    @Input() typeToSearchText: string;
+    @Input() addTagText: string;
+    @Input() loadingText: string;
+    @Input() clearAllText: string;
     @Input() dropdownPosition: 'bottom' | 'top' = 'bottom';
-    @Input() appendTo;
+    @Input() appendTo: string;
 
     @Input()
     @HostBinding('class.typeahead') typeahead: Subject<string>;
@@ -90,7 +93,7 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
     @HostBinding('class.ng-multiple') multiple = false;
 
     @Input()
-    @HostBinding('class.taggable') addTag: boolean | ((term) => NgOption) = false;
+    @HostBinding('class.taggable') addTag: boolean | ((term: string) => NgOption) = false;
 
     @Input()
     @HostBinding('class.searchable') searchable = true;
@@ -121,7 +124,7 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
     isLoading = false;
     filterValue: string = null;
 
-    private _ngModel = null;
+    private _ngModel: any = null;
     private _simple = false;
     private _defaultLabel = 'label';
     private _defaultValue = 'value';
@@ -131,7 +134,7 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
     private disposeDocumentClickListener = () => { };
     private disposeDocumentResizeListener = () => { };
 
-    clearItem = (item) => {
+    clearItem = (item: any) => {
         const option = this.itemsList.items.find(x => x.value === item);
         this.unselect(option);
     };
@@ -140,7 +143,7 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
         return this.itemsList.value;
     }
 
-    constructor( @Optional() config: NgSelectConfig,
+    constructor(@Inject(NG_SELECT_DEFAULT_CONFIG) config: NgSelectConfig,
         private changeDetectorRef: ChangeDetectorRef,
         private elementRef: ElementRef,
         private renderer: Renderer2
@@ -367,7 +370,7 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
         return empty && this.isTypeahead && !this.filterValue && !this.isLoading;
     }
 
-    onFilter($event) {
+    onFilter(term: string) {
         if (!this.searchable) {
             return;
         }
@@ -376,7 +379,7 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
             this.open();
         }
 
-        this.filterValue = $event.target.value;
+        this.filterValue = term;
 
         if (this.isTypeahead) {
             this.isLoading = true;
@@ -432,7 +435,7 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
     private setItemsFromNgOptions() {
         this.bindLabel = this.bindLabel || this._defaultLabel;
         this.bindValue = this.bindValue || this._defaultValue;
-        const handleNgOptions = (options) => {
+        const handleNgOptions = (options: QueryList<NgOptionComponent>) => {
             this.items = options.map(option => ({
                 value: option.value,
                 label: option.elementRef.nativeElement.innerHTML
@@ -451,7 +454,7 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
     }
 
     private handleDocumentClick() {
-        const handler = ($event) => {
+        const handler = ($event: any) => {
             // prevent close if clicked on select
             if (this.elementRef.nativeElement.contains($event.target)) {
                 return;
@@ -492,7 +495,7 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
         if (this.appendTo === 'body') {
             document.body.appendChild(this.dropdownPanel.nativeElement);
         } else {
-            const parent: HTMLElement = document.querySelector(this.appendTo);
+            const parent = document.querySelector(this.appendTo);
             if (!parent) {
                 throw new Error(`appendTo selector ${this.appendTo} did not found any parent element`)
             }
@@ -521,7 +524,7 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
             return;
         }
 
-        const validateBinding = (item) => {
+        const validateBinding = (item: any) => {
             if (item instanceof Object && this.bindValue) {
                 throw new Error('Binding object with bindValue is not allowed.');
             }
@@ -676,9 +679,6 @@ export class NgSelectComponent implements OnInit, OnDestroy, OnChanges, AfterVie
     }
 
     private mergeGlobalConfig(config: NgSelectConfig) {
-        if (!config) {
-            config = new NgSelectConfig();
-        }
         this.notFoundText = this.notFoundText || config.notFoundText;
         this.typeToSearchText = this.typeToSearchText || config.typeToSearchText;
         this.addTagText = this.addTagText || config.addTagText;