feat: selectable group (#325)

fixes #282

README.md

@@ -130,6 +130,7 @@ map: {
 | clearAllText | `string` | `Clear all` | no | Set custom text for clear all icon title |
 | dropdownPosition | `bottom`,`top`,`auto` |  `bottom` | no | Set the dropdown position on open |
 | [groupBy] | `string` | null | no | Allow to group items by key |
+| [selectableGroup] | `boolean` | false | no | Allow to select group when groupBy is used |
 | [items] | `Array<NgOption>` | `[]` | yes | Items array |
 | loading | `boolean` |  `-` | no | You can set the loading state from the outside (e.g. async items loading) |
 | loadingText | `string` | `Loading...` | no | Set custom text when for loading items |

demo/app/examples/groups.component.ts

@@ -7,19 +7,8 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
         <p>
             ng-select supports grouping flat array of objects by providing <b>groupBy</b> input
         </p>
-        ---js
-        const data = [{ name: 'Adam', email: '[email protected]', age: 12, country: 'United States' },
-        { name: 'Samantha', email: '[email protected]', age: 30, country: 'United States' },
-        { name: 'Amalie', email: '[email protected]', age: 12, country: 'Argentina' },
-        { name: 'Estefanía', email: '[email protected]', age: 21, country: 'Argentina' },
-        { name: 'Adrian', email: '[email protected]', age: 21, country: 'Ecuador' },
-        { name: 'Wladimir', email: '[email protected]', age: 30, country: 'Ecuador' },
-        { name: 'Natasha', email: '[email protected]', age: 54, country: 'Ecuador' },
-        { name: 'Nicole', email: '[email protected]', age: 43, country: 'Colombia' },
-        { name: 'Michael', email: '[email protected]', age: 15, country: 'Colombia' },
-        { name: 'Nicolás', email: '[email protected]', age: 43, country: 'Colombia' }];
-        ---
 
+        <label>Default</label>
         ---html,true
         <ng-select [items]="accounts"
                 bindLabel="name"
@@ -32,6 +21,20 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
         <p>
             <small>Selected: {{selectedAccount | json}}</small>
         </p>
+
+        <hr />
+        <label>With selectable groups</label>
+        ---html,true
+        <ng-select [items]="accounts2"
+                bindLabel="name"
+                groupBy="country"
+                [selectableGroup]="true"
+                [(ngModel)]="selectedAccount2">
+        </ng-select>
+        ---
+        <p>
+            <small>Selected: {{selectedAccount2 | json}}</small>
+        </p>
     `
 })
 export class SelectGroupsComponent {
@@ -49,6 +52,9 @@ export class SelectGroupsComponent {
         { name: 'Nicolás', email: '[email protected]', age: 43, country: 'Colombia' }
     ];
 
+    accounts2 = this.accounts.slice();
+    selectedAccount2 = this.accounts2[1];
+
     ngOnInit() {
 
     }

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

@@ -4,6 +4,7 @@ import { NgOption } from '@ng-select/ng-select';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { DataService } from '../shared/data.service';
 import { NgSelectComponent } from '../../../src/ng-select/ng-select.component';
+import { delay } from 'rxjs/operators';
 
 @Component({
     selector: 'reactive-forms',
@@ -256,7 +257,7 @@ export class ReactiveFormsComponent {
     }
 
     private loadAlbums() {
-        this.dataService.getAlbums().subscribe(albums => {
+        this.dataService.getAlbums().pipe(delay(500)).subscribe(albums => {
             this.allAlbums = albums;
             this.albums = [...this.allAlbums];
             this.selectFirstAlbum();

demo/app/examples/search.component.ts

@@ -64,9 +64,7 @@ export class SelectSearchComponent {
 
     searchTerm = new EventEmitter<string>();
     peopleTypeahead = new EventEmitter<string>();
-    selectedPersons = [{
-        name: 'Karyn Wright'
-    }];
+    selectedPersons = [{name: 'Karyn Wright'}, {name: 'Other'}];
     selectedPerson: any;
     selectedCustom: any;
 

src/ng-select/items-list.ts

@@ -1,6 +1,7 @@
 import { NgOption } from './ng-select.types';
 import * as searchHelper from './search-helper';
 import { NgSelectComponent } from './ng-select.component';
+import { isObject } from './utils';
 
 export class ItemsList {
 
@@ -157,7 +158,7 @@ export class ItemsList {
     }
 
     resolveNested(option: any, key: string): any {
-        if (!(typeof option === 'object')) {
+        if (!isObject(option)) {
             return option;
         }
         if (key.indexOf('.') === -1) {
@@ -185,6 +186,10 @@ export class ItemsList {
         };
     }
 
+    updateSelectedItem(item: NgOption, index: number) {
+        this._selected[index] = item;
+    }
+
     private _getNextItemIndex(steps: number) {
         if (steps > 0) {
             return (this._markedIndex === this._filteredItems.length - 1) ? 0 : (this._markedIndex + 1);
@@ -224,7 +229,7 @@ export class ItemsList {
                 label: key,
                 hasChildren: true,
                 index: i,
-                disabled: true
+                disabled: !this._ngSelect.selectableGroup
             };
             parent.value = {};
             parent.value[this._ngSelect.groupBy] = key;