Merge pull request #78 from czeckd/locale

Support for locale

Author: czeckd

README.md

@@ -3,13 +3,12 @@
 Angular Dual-Listbox
 =========
 
-The **angular-dual-listbox** is an Angular 4+ component that provides two lists controls 
-side-by-side that allows items in one list to be moved to the other list via drag-and-drop and/or a 
-button-based interface. The component supports multiple select options from the list, programatic 
-setting of list sources, and layout with direction and button formatting.
+The **angular-dual-listbox** is an Angular 4+ component that provides two lists controls side-by-side that allows items in one list to be selected and moved* to the other list via drag-and-drop and/or a button-based interface. The component supports multiple select options from the list, programatic setting of list sources, and layout with direction and button formatting.
 
 A [working demo](http://czeckd.github.io/angular-dual-listbox/demo/) shows the dual listbox in action.
 
+\* Technically, the dual-list component does not move items from one array to another. Rather it makes a copy from the source array of the item and adds it to the destination array, or removes it from the destination array. Thus, the source array is a master list of all available item and the destintion array is a list of items that have been selected from the master list. Therefore, in order for an item to be in the destination array it must also exist in the source array.
+
 ![Dual ListBox](http://czeckd.github.io/angular-dual-listbox/images/dual-listbox.png)
 
 ## How to use?
@@ -28,8 +27,7 @@ import { AngularDualListBoxModule } from 'angular-dual-listbox';
 })
 export class AppModule {}
 ```
-See also the [basic-dual-list-demo](https://github.com/czeckd/basic-dual-listbox-demo) for a sample project using this module.
-
+See also the [basic-dual-list-demo](https://github.com/czeckd/basic-dual-listbox-demo) for a sample project using this module. Note that the default component uses Bootstrap 3 for styling and so the bootstrap.css would need to be included in the project for it to be styled correctly. That said, the styles can be overriden with your own style sheet or fully customized by extending the `DualListComponent` and providing a new template. For more details, see the section on **Extending** below.
 
 ## Usage
 Basic usage is:
@@ -38,22 +36,36 @@ Basic usage is:
 ```
 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``. (With a source of an array of strings, each string is its own id.)
+`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``. (With a source of an array of strings, each string is its own display.)
+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 }``
+- **format** - A format object, default is ``{ add: 'Add', remove: 'Remove', all: 'All', none: 'None', direction: 'left-to-right', draggable: true, locale: undefined }``
 - **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
 sort is not set and compare is set, then sort will be set ``true``.
 - **source** - The source array of objects or strings for the list. (This is the universal, master list of all possible objects.)
-- **destination** The destination array of objects or strings selected from the source.
-Note, the ``destination`` array can have prexisting elements.
+- **destination** The destination array of objects or strings selected from the source. Note, the ``destination`` array can have prexisting elements.
 - **disabled** - The dual-list is disabled, default is ``false``.
 
 For more usage examples, see the [`demo-app.component.ts`](https://github.com/czeckd/angular-dual-listbox/blob/master/app/demo-app.component.ts).
 
+## Format
+The format object allows for the text for the add, remove, all, and none buttons to be set. It also can be used to set the layout direction with the source being on the left-hand side as the default, toggling drag-and-drop, and explicitly setting the locale for the filter string comparision. The default locale is undefined and will use host environment's current locale. An example format object:
+```typescript
+export class MyComponent {
+    ...
+    format = { add: 'Tilføje', remove: 'Fjerne', all: 'Alle', none: 'Intet',
+        direction: DualListComponent.LTR, draggable: true, locale: 'da' };
+    ...
+}
+```
+Then used in an html template:
+```html
+<dual-list [source]="source" [(destination)]="confirmed" [format]="format"></dual-list>
+```
+
 ## Extending
 The html template packaged with this component is based on Bootstap 3; however it can be overridden for customization. Here is an example:
 
@@ -69,8 +81,8 @@ 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 
 customized view and extended functionality.
 

app/demo-app.component.ts

@@ -2,10 +2,9 @@ import { Component, OnInit } from '@angular/core';
 
 import { DualListComponent } from 'angular-dual-listbox';
 
-
 @Component({
 	selector: 'demo-app',
-	styles: [ '.form-group { margin-bottom: 16px; }', '.checkbox { margin-top: inherit }' ],
+	styles: [ 'form { margin-top: 15px; }', '.checkbox { margin-top: inherit; }', 'ul.nav-tabs { cursor: pointer; }' ],
 	template: `
 <div class="container-fluid">
 	<p></p>
@@ -27,37 +26,43 @@ import { DualListComponent } from 'angular-dual-listbox';
 		</div>
 
 		<div class="tab-pane" [class.active]="tab===2">
-			<form class="form" style="margin:20px 0;">
-				<label>Direction</label><br/>
+			<form class="form">
 				<div class="form-group">
+					<label style="display:block;">Direction</label>
 					<div class="btn-group">
 						<button type="button" class="btn" [ngClass]="{ 'btn-primary' : sourceLeft, 'btn-default' : !sourceLeft }"
 							(click)="swapDirection()">left-to-right</button>
 						<button type="button" class="btn" [ngClass]="{ 'btn-primary' : !sourceLeft, 'btn-default' : sourceLeft }"
 							(click)="swapDirection()">right-to-left</button>
 					</div>
 				</div>
+
+				<div class="form-group">
+					<label>Enable drag-and-drop</label>
+					<div class="checkbox">
+						<label><input type="checkbox" [(ngModel)]="format.draggable" name="drag">draggable</label>
+					</div>
+				</div>
+
+				<div class="form-group">
+					<label>Locale</label>
+					<input class="form-control" [(ngModel)]="format.locale" name="locale">
+				</div>
 				<div class="form-group">
 					<label>Add button</label>
-					<input class="form-control col-sm-2" [(ngModel)]="format.add" name="addBtn">
+					<input class="form-control" [(ngModel)]="format.add" name="addBtn">
 				</div>
 				<div class="form-group">
 					<label>Remove button</label>
-					<input class="form-control col-sm-2" [(ngModel)]="format.remove" name="rmBtn">
+					<input class="form-control" [(ngModel)]="format.remove" name="rmBtn">
 				</div>
 				<div class="form-group">
 					<label>All button</label>
-					<input class="form-control col-sm-2" [(ngModel)]="format.all" name="allBtn">
+					<input class="form-control" [(ngModel)]="format.all" name="allBtn">
 				</div>
 				<div class="form-group">
 					<label>None button</label>
-					<input class="form-control col-sm-2" [(ngModel)]="format.none" name="noneBtn">
-				</div>
-				<div class="form-group">
-					<label>Enable drag-and-drop</label>
-					<div class="checkbox">
-						<label><input type="checkbox" [(ngModel)]="format.draggable" name="drag">draggable</label>
-					</div>
+					<input class="form-control" [(ngModel)]="format.none" name="noneBtn">
 				</div>
 			</form>
 		</div>
@@ -114,7 +119,7 @@ export class DemoAppComponent implements OnInit {
 	tab = 1;
 	keepSorted = true;
 	key:string;
-	display:string;
+	display:any;
 	filter = false;
 	source:Array<any>;
 	confirmed:Array<any>;
@@ -216,9 +221,13 @@ export class DemoAppComponent implements OnInit {
 		this.doReset();
 	}
 
+	private stationLabel(item:any) {
+		return item.station + ', ' + item.state;
+	}
+
 	private useStations() {
 		this.key = 'key';
-		this.display = 'station'; // [ 'station', 'state' ];
+		this.display = this.stationLabel;
 		this.keepSorted = true;
 		this.source = this.sourceStations;
 		this.confirmed = this.confirmedStations;

lib/package.json

@@ -2,7 +2,7 @@
   "$schema": "../../node_modules/ng-packagr/package.schema.json",
   "name": "angular-dual-listbox",
   "description": "Angular 4+ component for a dual listbox control.",
-  "version": "4.6.3",
+  "version": "4.7.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/czeckd/angular-dual-listbox.git"

lib/src/dual-list.component.css

@@ -128,12 +128,14 @@ div.record-picker::-webkit-scrollbar-thumb:hover {
 
 /*    ▶ */
 .point-right::after {
-	content: "\00A0\00A0\00A0\25B6";
+	content: "\25B6";
+	padding-left: 1em;
 }
 
 /* ◀    */
 .point-left::before {
-	content: "\25C0\00A0\00A0\00A0";
+	content: "\25C0";
+	padding-right: 1em;
 }
 
 .dual-list .button-bar button {

lib/src/dual-list.component.ts

@@ -26,12 +26,13 @@ export class DualListComponent implements DoCheck, OnChanges {
 		all: 'All',
 		none: 'None',
 		direction: DualListComponent.LTR,
-		draggable: true
+		draggable: true,
+		locale: undefined
 	};
 
 	@Input() id = `dual-list-${nextId++}`;
 	@Input() key = '_id';
-	@Input() display = '_name';
+	@Input() display:any = '_name';
 	@Input() height = '100px';
 	@Input() filter = false;
 	@Input() format = DualListComponent.DEFAULT_FORMAT;
@@ -206,7 +207,7 @@ export class DualListComponent implements DoCheck, OnChanges {
 		return this.format.direction === DualListComponent.LTR;
 	}
 
-	dragEnd(list:BasicList = null) {
+	dragEnd(list:BasicList = null) : boolean {
 		if (list) {
 			list.dragStart = false;
 		} else {
@@ -226,7 +227,7 @@ export class DualListComponent implements DoCheck, OnChanges {
 		event.dataTransfer.setData(this.id, item['_id']);
 	}
 
-	allowDrop(event:DragEvent, list:BasicList) {
+	allowDrop(event:DragEvent, list:BasicList) : boolean {
 		if (event.dataTransfer.types.length && (event.dataTransfer.types[0] === this.id)) {
 			event.preventDefault();
 			if (!list.dragStart) {
@@ -275,7 +276,6 @@ export class DualListComponent implements DoCheck, OnChanges {
 			}
 		}
 
-
 		// Push added items.
 		for (let i = 0, len = this.confirmed.list.length; i < len; i += 1) {
 			let mv = this.destination.filter( (d:any) => {
@@ -396,7 +396,7 @@ export class DualListComponent implements DoCheck, OnChanges {
 		}, 10);
 	}
 
-	isItemSelected(list:Array<any>, item:any) {
+	isItemSelected(list:Array<any>, item:any) : boolean {
 		if (list.filter(e => Object.is(e, item)).length > 0) {
 			return true;
 		}
@@ -445,14 +445,14 @@ export class DualListComponent implements DoCheck, OnChanges {
 		source.pick.length = 0;
 	}
 
-	isAllSelected(source:BasicList) {
+	isAllSelected(source:BasicList) : boolean {
 		if (source.list.length === 0 || source.list.length === source.pick.length) {
 			return true;
 		}
 		return false;
 	}
 
-	isAnySelected(source:BasicList) {
+	isAnySelected(source:BasicList) : boolean {
 		if (source.pick.length > 0) {
 			return true;
 		}
@@ -476,19 +476,30 @@ export class DualListComponent implements DoCheck, OnChanges {
 
 	onFilter(source:BasicList) {
 		if (source.picker.length > 0) {
-			const filtered = source.list.filter( (item:any) => {
-				if (Object.prototype.toString.call(item) === '[object Object]') {
-					if (item._name !== undefined) {
-						return item._name.toLocaleLowerCase().indexOf(source.picker.toLocaleLowerCase()) !== -1;
+			try {
+				const filtered = source.list.filter( (item:any) => {
+					if (Object.prototype.toString.call(item) === '[object Object]') {
+						if (item._name !== undefined) {
+							// @ts-ignore: remove when d.ts has locale as an argument.
+							return item._name.toLocaleLowerCase(this.format.locale).indexOf(source.picker.toLocaleLowerCase(this.format.locale)) !== -1;
+						} else {
+							// @ts-ignore: remove when d.ts has locale as an argument.
+							return JSON.stringify(item).toLocaleLowerCase(this.format.locale).indexOf(source.picker.toLocaleLowerCase(this.format.locale)) !== -1;
+						}
 					} else {
-						return JSON.stringify(item).toLocaleLowerCase().indexOf(source.picker.toLocaleLowerCase()) !== -1;
+						// @ts-ignore: remove when d.ts has locale as an argument.
+						return item.toLocaleLowerCase(this.format.locale).indexOf(source.picker.toLocaleLowerCase(this.format.locale)) !== -1;
 					}
-				} else {
-					return item.toLocaleLowerCase().indexOf(source.picker.toLocaleLowerCase()) !== -1;
+				});
+				source.sift = filtered;
+				this.unpick(source);
+			}
+			catch (e) {
+				if (e instanceof RangeError) {
+					this.format.locale = undefined;
 				}
-			});
-			source.sift = filtered;
-			this.unpick(source);
+				source.sift = source.list;
+			}
 		} else {
 			source.sift = source.list;
 		}
@@ -525,17 +536,20 @@ export class DualListComponent implements DoCheck, OnChanges {
 		let str = '';
 
 		if (this.display !== undefined) {
-			if (Object.prototype.toString.call( this.display ) === '[object Array]' ) {
+			switch (Object.prototype.toString.call(this.display)) {
+			case '[object Function]':
+				str = this.display(item);
+				break;
 
-				for (let i = 0; i < this.display.length; i += 1) {
+			case '[object Array]':
+				for (let i = 0, len = this.display.length; i < len; i += 1) {
 					if (str.length > 0) {
 						str = str + separator;
 					}
 
 					if (this.display[i].indexOf('.') === -1) {
 						// Simple, just add to string.
 						str = str + item[this.display[i]];
-
 					} else {
 						// Complex, some action needs to be performed
 						const parts = this.display[i].split('.');
@@ -564,12 +578,15 @@ export class DualListComponent implements DoCheck, OnChanges {
 						}
 					}
 				}
-				return str;
-			} else {
-				return fallback(item);
+				break;
+			default:
+				str = fallback(item);
+				break;
 			}
+		} else {
+			str = fallback(item);
 		}
 
-		return fallback(item);
+		return str;
 	}
 }

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "angular-dual-listbox",
   "description": "Angular 4+ component for a dual listbox control.",
-  "version": "4.6.3",
+  "version": "4.7.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/czeckd/angular-dual-listbox.git"
@@ -52,7 +52,7 @@
     "systemjs": "0.19.47",
     "ts-node": "^3.3.0",
     "tslint": "^5.8.0",
-    "typescript": "~2.4.2",
+    "typescript": "^2.6.2",
     "zone.js": "^0.8.18"
   }
 }