Merge branch 'master'

* remotes/main/master: (25 commits)
  chore(release): 2.13.3
  fix: keep selected items while bindValue is incorrect closes ng-select#993
  chore(release): 2.13.2
  fix: appended dropdown position (ng-select#957)
  chore(release): 2.13.1
  fix: map selected items while source changed closes ng-select#980, ng-select#977, ng-select#959
  chore(release): 2.13.0
  [fix] - $event.path does not work in Safari and Firefox. Replace with $event.composedPath(). (ng-select#968)
  feat(templates): add searchTerm to header and footer (ng-select#961)
  chore(release): 2.12.1
  chore: include scss with package closes ng-select#909
  fix: use classList instead of className closes ng-select#940
  add aria-selected attribute on selected items (ng-select#936)
  fix: handler mousedown for clear event when used animation library (ng-select#931)
  chore(release): 2.12.0
  feat(autofocus): focus if attribute is present (ng-select#924)
  feat(isOpen): treat undefined value as default behaviour closes ng-select#816
  feat: allow to customise clear icon fixes ng-select#835
  chore(demo): fix virtual scroll example closes ng-select#921
  fix: keep items order while mapping selected options fixes ng-select#907
  ...

.github/ISSUE_TEMPLATE/bug_report.md

@@ -7,8 +7,11 @@ about: Create a report to help us improve
 **Describe the bug**
 A clear and concise description of what the bug is.
 
-**To Reproduce**
-Steps to reproduce the behavior:
+**Reproducbile example**
+[Example](https://stackblitz.com) which reproduces described behaviour
+
+**To Reproduce** 
+Steps to reproduce the behavior (if example is not provided):
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'

CHANGELOG.md

@@ -2,6 +2,85 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+<a name="2.13.3"></a>
+## [2.13.3](https://github.com/ng-select/ng-select/compare/v2.13.2...v2.13.3) (2018-12-20)
+
+
+### Bug Fixes
+
+* keep selected items while bindValue is incorrect ([b7294a3](https://github.com/ng-select/ng-select/commit/b7294a3)), closes [#993](https://github.com/ng-select/ng-select/issues/993)
+
+
+
+<a name="2.13.2"></a>
+## [2.13.2](https://github.com/ng-select/ng-select/compare/v2.13.1...v2.13.2) (2018-12-18)
+
+
+### Bug Fixes
+
+* appended dropdown position ([#957](https://github.com/ng-select/ng-select/issues/957)) ([856c9cd](https://github.com/ng-select/ng-select/commit/856c9cd)), closes [#955](https://github.com/ng-select/ng-select/issues/955)
+
+
+
+<a name="2.13.1"></a>
+## [2.13.1](https://github.com/ng-select/ng-select/compare/v2.13.0...v2.13.1) (2018-12-05)
+
+
+### Bug Fixes
+
+* map selected items while source changed ([c5bfd3f](https://github.com/ng-select/ng-select/commit/c5bfd3f)), closes [#980](https://github.com/ng-select/ng-select/issues/980) [#977](https://github.com/ng-select/ng-select/issues/977) [#959](https://github.com/ng-select/ng-select/issues/959)
+
+
+
+<a name="2.13.0"></a>
+# [2.13.0](https://github.com/ng-select/ng-select/compare/v2.12.1...v2.13.0) (2018-12-03)
+
+
+### Features
+
+* **templates:** add searchTerm to header and footer (ng-select[#961](https://github.com/ng-select/ng-select/issues/961)) ([40eb264](https://github.com/ng-select/ng-select/commit/40eb264))
+
+
+
+<a name="2.12.1"></a>
+## [2.12.1](https://github.com/ng-select/ng-select/compare/v2.12.0...v2.12.1) (2018-11-14)
+
+
+### Bug Fixes
+
+* handler mousedown for clear event when used animation library ([#931](https://github.com/ng-select/ng-select/issues/931)) ([dfbbcd6](https://github.com/ng-select/ng-select/commit/dfbbcd6)), closes [#928](https://github.com/ng-select/ng-select/issues/928)
+* use classList instead of className ([bc6f084](https://github.com/ng-select/ng-select/commit/bc6f084)), closes [#940](https://github.com/ng-select/ng-select/issues/940)
+
+
+
+<a name="2.12.0"></a>
+# [2.12.0](https://github.com/ng-select/ng-select/compare/v2.11.2...v2.12.0) (2018-11-06)
+
+
+### Bug Fixes
+
+* keep items order while mapping selected options ([bc1ef8e](https://github.com/ng-select/ng-select/commit/bc1ef8e)), closes [#907](https://github.com/ng-select/ng-select/issues/907)
+
+
+### Features
+
+* allow to customise clear icon ([3e8ad77](https://github.com/ng-select/ng-select/commit/3e8ad77)), closes [#835](https://github.com/ng-select/ng-select/issues/835)
+* **autofocus:** focus if attribute is present ([#924](https://github.com/ng-select/ng-select/issues/924)) ([b78f39f](https://github.com/ng-select/ng-select/commit/b78f39f)), closes [#762](https://github.com/ng-select/ng-select/issues/762)
+* **clearOnBackspace:** configure whether backspace removes selection ([af79a45](https://github.com/ng-select/ng-select/commit/af79a45)), closes [#861](https://github.com/ng-select/ng-select/issues/861)
+* **isOpen:** treat undefined value as default behaviour ([127d6be](https://github.com/ng-select/ng-select/commit/127d6be)), closes [#816](https://github.com/ng-select/ng-select/issues/816)
+
+
+
+<a name="2.11.2"></a>
+## [2.11.2](https://github.com/ng-select/ng-select/compare/v2.11.1...v2.11.2) (2018-10-25)
+
+
+### Bug Fixes
+
+* use autocomplete off when labelForId is used ([5f4d833](https://github.com/ng-select/ng-select/commit/5f4d833)), closes [#269](https://github.com/ng-select/ng-select/issues/269)
+
+
+
 <a name="2.11.1"></a>
 ## [2.11.1](https://github.com/ng-select/ng-select/compare/v2.11.0...v2.11.1) (2018-10-20)
 

README.md

@@ -124,6 +124,7 @@ map: {
 | [closeOnSelect] | `boolean` |  true | no | Whether to close the menu when a value is selected |
 | clearAllText | `string` | `Clear all` | no | Set custom text for clear all icon title |
 | [clearable] | `boolean` | `true` | no | Allow to clear selected value. Default `true`|
+| [clearOnBackspace] | `boolean` | `true` | no | Clear selected values one by one when clicking backspace. Default `true`|
 | [compareWith] | `(a: any, b: any) => boolean` | `(a, b) => a === b` | no | A function to compare the option values with the selected values. The first argument is a value from an option. The second is a value from the selection(model). A boolean should be returned. |
 | dropdownPosition | `bottom` \| `top` \| `auto` |  `auto` | no | Set the dropdown position on open |
 | [excludeGroupsFromDefaultSelection] | `boolean` |  false | no | Exclude group from default selection when `selectableGroup` is `true`. Default `false`. |

demo/app/app.component.ts

@@ -1,9 +1,10 @@
 import '../style/styles.scss';
 
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 import { filter, map, mergeMap } from 'rxjs/operators';
+import { NgSelectConfig } from '../../src';
 
 @Component({
     selector: 'demo-app',
@@ -17,9 +18,13 @@ export class AppComponent {
     exampleSourceUrl: string;
     dir: 'ltr' | 'rtl' = 'ltr';
 
-    constructor(private router: Router,
+    constructor(
+        private router: Router,
         private activatedRoute: ActivatedRoute,
-        private titleService: Title) {
+        private titleService: Title,
+        private config: NgSelectConfig
+    ) {
+        this.config.placeholder = 'Select item';
     }
 
     ngOnInit() {

demo/app/examples/data-source.component.ts

@@ -20,6 +20,7 @@ import { Observable } from 'rxjs';
         ---html,true
         <ng-select [items]="people$ | async"
                    bindLabel="name"
+                   autofocus
                    bindValue="id"
                    [(ngModel)]="selectedPersonId">
         </ng-select>

demo/app/examples/multi.component.ts

@@ -41,6 +41,21 @@ import { DataService } from '../shared/data.service';
         ---
         <hr/>
 
+        <label>Keep selected elements on backspace</label>
+        ---html,true
+        <ng-select
+                [items]="people$1 | async"
+                [multiple]="true"
+                [closeOnSelect]="false"
+                [clearOnBackspace]="false"
+                bindLabel="name"
+                placeholder="Select people"
+                [(ngModel)]="selectedPeople5">
+        </ng-select>
+        ---
+        <hr/>
+
+
         <label>Select multiple elements with a limit number of selections (e.g 3)</label>
         ---html,true
         <div class="alert alert-warning mb-2" *ngIf="selectedPeople2.length === 3 && select.focused">
@@ -128,6 +143,7 @@ export class SelectMultiComponent {
 
     people$3: Observable<any[]>;
     selectedPeople3 = [];
+    selectedPeople5 = [];
     selectedPeople4 = [];
     disable = true;
 

demo/app/examples/reactive-forms.component.ts

@@ -245,7 +245,6 @@ export class ReactiveFormsComponent {
 
     selectAlbumsRange(from, to) {
         this.albums = this.allAlbums.slice(from, to);
-        this.selectFirstAlbum();
     }
 
     openModal(content) {

demo/app/examples/virtual-scroll.component.ts

@@ -1,12 +1,12 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 
 @Component({
     selector: 'select-tags',
     changeDetection: ChangeDetectionStrategy.Default,
     template: `
         <p>
-            In this example we are loading many items but only ~30 of them are rendered in the dom. 
+            In this example we are loading many items but only ~30 of them are rendered in the dom.
             This allows to load as big data as you want.
         </p>
         ---html,true
@@ -16,8 +16,8 @@ import { HttpClient } from '@angular/common/http';
                    bindLabel="title"
                    bindValue="thumbnailUrl"
                    placeholder="Select photo"
-                   (scroll)="scroll($event)"
-                   (scrollToEnd)="fetchMore($event)">
+                   (scroll)="onScroll($event)"
+                   (scrollToEnd)="onScrollToEnd()">
             <ng-template ng-header-tmp>
                 <small class="form-text text-muted">Loaded {{photosBuffer.length}} of {{photos.length}}</small>
             </ng-template>
@@ -36,7 +36,8 @@ export class VirtualScrollComponent {
     numberOfItemsFromEndBeforeFetchingMore = 10;
     loading = false;
 
-    constructor(private http: HttpClient) {}
+    constructor(private http: HttpClient) {
+    }
 
     ngOnInit() {
         this.http.get<any[]>('https://jsonplaceholder.typicode.com/photos').subscribe(photos => {
@@ -45,24 +46,28 @@ export class VirtualScrollComponent {
         });
     }
 
-    fetchMore() {
-        const len = this.photosBuffer.length;
-        const more = this.photos.slice(len, this.bufferSize + len);
-        this.loading = true;
-        // using timeout here to simulate backend API delay
-        setTimeout(() => {
-            this.loading = false;
-            this.photosBuffer = this.photosBuffer.concat(more);
-        }, 200)
+    onScrollToEnd() {
+        this.fetchMore();
     }
 
-    scroll( { end } ) {
-        if (this.loading) {
+    onScroll({ end }) {
+        if (this.loading || this.photos.length === this.photosBuffer.length) {
             return;
         }
 
         if (end + this.numberOfItemsFromEndBeforeFetchingMore >= this.photosBuffer.length) {
             this.fetchMore();
         }
     }
+
+    private fetchMore() {
+        const len = this.photosBuffer.length;
+        const more = this.photos.slice(len, this.bufferSize + len);
+        this.loading = true;
+        // using timeout here to simulate backend API delay
+        setTimeout(() => {
+            this.loading = false;
+            this.photosBuffer = this.photosBuffer.concat(more);
+        }, 200)
+    }
 }

package.json

@@ -7,9 +7,10 @@
   "scripts": {
     "clean": "rimraf out-tsc dist/* integration/node_modules/@ng-select",
     "prebuild": "yarn clean",
-    "build": "ng-packagr -p ./src/package.json && yarn build:themes",
+    "build": "ng-packagr -p ./src/package.json && yarn build:themes && yarn copy-sass",
     "build:demo": "rimraf dist && webpack --config ./scripts/webpack.dev.js --progress --profile --bail",
     "build:themes": "node-sass --output-style compressed src/themes/ -o dist/themes",
+    "copy-sass": "mkdir -p dist/scss && cp src/**/*.scss dist/scss",
     "prestart": "yarn install",
     "start": "webpack-dev-server --config ./scripts/webpack.dev.js --inline --color --progress --port 8080",
     "test:watch": "karma start ./scripts/karma.conf.js --no-single-run --auto-watch",

src/ng-select/config.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 
-@Injectable({providedIn: 'root'})
+@Injectable({ providedIn: 'root' })
 export class NgSelectConfig {
     placeholder: string;
     notFoundText = 'No items found';

src/ng-select/items-list.spec.ts

@@ -408,13 +408,30 @@ describe('ItemsList', () => {
             expect(list.items[0].label).toBe('United States');
             expect(list.items[0].selected).toBeTruthy();
         });
+
+        it('should retain items order', () => {
+            list.select(list.mapItem({ name: 'Samantha' }, null));
+            list.select(list.mapItem({ name: 'Other' }, null));
+            list.select(list.mapItem({ name: 'Amalie' }, null));
+
+            list.setItems([
+                { name: 'Samantha', country: 'United States' },
+                { name: 'Amalie', country: 'Argentina' }]);
+
+            list.mapSelectedItems();
+
+            expect(list.selectedItems.length).toBe(3);
+            expect(list.selectedItems[0].label).toBe('Samantha');
+            expect(list.selectedItems[1].label).toBe('Other');
+            expect(list.selectedItems[2].label).toBe('Amalie');
+        });
     });
-});
 
-function itemsListFactory(cmp: NgSelectComponent): ItemsList {
-    return new ItemsList(cmp, new DefaultSelectionModel());
-}
+    function itemsListFactory(cmp: NgSelectComponent): ItemsList {
+        return new ItemsList(cmp, new DefaultSelectionModel());
+    }
 
-function ngSelectFactory(): NgSelectComponent {
-    return new NgSelectComponent(null, null, new NgSelectConfig(), () => new DefaultSelectionModel(), {} as any, null, null);
-}
+    function ngSelectFactory(): NgSelectComponent {
+        return new NgSelectComponent(null, null, null, new NgSelectConfig(), () => new DefaultSelectionModel(), {} as any, null, null);
+    }
+});

src/ng-select/items-list.ts

@@ -241,12 +241,10 @@ export class ItemsList {
     mapSelectedItems() {
         const multiple = this._ngSelect.multiple;
         for (const selected of this.selectedItems) {
-            const value = this._ngSelect.bindValue ? selected.value[this._ngSelect.bindValue] : selected.value;
-            const item = this.findItem(value);
-            if (item && selected !== item) {
-                this._selectionModel.unselect(selected, multiple);
-                this._selectionModel.select(item, multiple, this._ngSelect.selectableGroupAsModel);
-            }
+            const value = this._ngSelect.bindValue ? this.resolveNested(selected.value, this._ngSelect.bindValue) : selected.value;
+            const item = isDefined(value) ? this.findItem(value) : null;
+            this._selectionModel.unselect(selected, multiple);
+            this._selectionModel.select(item || selected, multiple, this._ngSelect.selectableGroupAsModel);
         }
 
         if (this._ngSelect.hideSelected) {