feature ctrl + click select

README.md

@@ -34,13 +34,13 @@ Basic usage is:
 ```html
 <dual-list [source]="source" [(destination)]="confirmed"></dual-list>
 ```
-The following parameters can be set on a dual-list: 
-- **key** - The unique identifier field of each object in the `source` and 
+The following parameters can be set on a dual-list:
+- **key** - The unique identifier field of each object in the `source` and
 `destination` arrays, default is ``_id``. (Note: with a source of an array of strings, each string is its own id.)
 - **display** - The field of each object for displaying the object each the
 lists, default is ``_name``. Or, a function that returns a string that can be used for displaying an object. (Note: with a source of an array of strings, each string is its own display.)
 - **height** - The height of the lists, default is ``100px``.
-- **format** - A format object, default is ``{ add: 'Add', remove: 'Remove', all: 'All', none: 'None', direction: 'left-to-right', draggable: true, locale: undefined }``
+- **format** - A format object, default is ``{ add: 'Add', remove: 'Remove', all: 'All', none: 'None', direction: 'left-to-right', draggable: true, locale: undefined, ctr_click: false }``
 - **filter** - A boolean whether or not to display a filter for the lists, default is ``false``.
 - **sort** - A boolean whether or not to keep the lists sorted, default is ``false``.
 - **compare** - A compare function to be used for sorting the lists. Note if
@@ -81,9 +81,9 @@ import { DualListComponent } from 'angular-dual-listbox';
 export class CustomDualListComponent extends DualListComponent {
 }
 ```
-See [`dual-list.component.html`](https://github.com/czeckd/angular-dual-listbox/blob/master/lib/dual-list.component.html) and [`dual-list.component.css`](https://github.com/czeckd/angular-dual-listbox/blob/master/lib/dual-list.component.css) for template and style guidance. 
+See [`dual-list.component.html`](https://github.com/czeckd/angular-dual-listbox/blob/master/lib/dual-list.component.html) and [`dual-list.component.css`](https://github.com/czeckd/angular-dual-listbox/blob/master/lib/dual-list.component.css) for template and style guidance.
 
-There is also an Angular-CLI seed project, [custom-dual-listbox](https://github.com/czeckd/custom-dual-listbox), available with an example of a 
+There is also an Angular-CLI seed project, [custom-dual-listbox](https://github.com/czeckd/custom-dual-listbox), available with an example of a
 customized view and extended functionality.
 
 ## License

lib/src/dual-list.component.html

@@ -12,7 +12,7 @@
 			<ul [ngStyle]="{'max-height': height, 'min-height': height}" [ngClass]="{over:available.dragOver}"
 				(drop)="drop($event, confirmed)" (dragover)="allowDrop($event, available)" (dragleave)="dragLeave()">
 				<li *ngFor="let item of available.sift; let idx=index;"
-					(click)="disabled ? null : selectItem(available.pick, item); shiftClick($event, idx, available, item)"
+					(click)="disabled ? null : selectItemClick($event, available.pick, item); shiftClick($event, idx, available, item)"
 					[ngClass]="{selected: isItemSelected(available.pick, item), disabled: disabled}"
 					[draggable]="!disabled && format.draggable" (dragstart)="drag($event, item, available)" (dragend)="dragEnd(available)"
 				><label>{{item._name}}</label></li>
@@ -40,7 +40,7 @@
 			<ul [ngStyle]="{'max-height': height, 'min-height': height}" [ngClass]="{over:confirmed.dragOver}"
 				(drop)="drop($event, available)" (dragover)="allowDrop($event, confirmed)" (dragleave)="dragLeave()">
 				<li #itmConf *ngFor="let item of confirmed.sift; let idx=index;"
-					(click)="disabled ? null : selectItem(confirmed.pick, item); shiftClick($event, idx, confirmed, item)"
+					(click)="disabled ? null : selectItemClick($event, confirmed.pick, item); shiftClick($event, idx, confirmed, item)"
 					[ngClass]="{selected: isItemSelected(confirmed.pick, item), disabled: disabled}"
 					[draggable]="!disabled && format.draggable" (dragstart)="drag($event, item, confirmed)" (dragend)="dragEnd(confirmed)"
 				><label>{{item._name}}</label></li>

lib/src/dual-list.component.ts

@@ -1,5 +1,4 @@
-import { Component, DoCheck, EventEmitter, Input, IterableDiffers, OnChanges,
-	Output, SimpleChange } from '@angular/core';
+import { Component, DoCheck, EventEmitter, Input, IterableDiffers, OnChanges, Output, SimpleChange } from '@angular/core';
 
 import { BasicList } from './basic-list';
 
@@ -27,7 +26,8 @@ export class DualListComponent implements DoCheck, OnChanges {
 		none: 'None',
 		direction: DualListComponent.LTR,
 		draggable: true,
-		locale: undefined
+		locale: undefined,
+		ctrl_click: false
 	};
 
 	@Input() id = `dual-list-${nextId++}`;
@@ -419,6 +419,15 @@ export class DualListComponent implements DoCheck, OnChanges {
 		source.last = item;
 	}
 
+	selectItemClick(event:MouseEvent, list:Array<any>, item:any) {
+		if (this.format.ctrl_click && list.length !== 0 && !event.ctrlKey && !event.shiftKey)  {
+			list.splice(0, list.length);
+			this.selectItem(list, item);
+		} else {
+			this.selectItem(list, item);
+		}
+	}
+
 	selectItem(list:Array<any>, item:any) {
 		const pk = list.filter( (e:any) => {
 			return Object.is(e, item);