feat(at-select): add value and display field selectors

src/elements/select/at-select.html

@@ -6,7 +6,7 @@
 			<div class="dropdown" if.bind="readonly">
 				<div class="selector-caption">
 					<template replaceable part="value-template">
-						<div>${value}</div>
+						<div>${getDisplayValue(selectedOption)}</div>
 					</template>
 				</div>
 				<div class="selector-arrow">▼</div>
@@ -15,7 +15,7 @@
 				<div md-dropdown="ref.bind: dropdown; constrain-width: false; container: body">
 					<div class="selector-caption">
 						<template replaceable part="value-template">
-							<div>${value}</div>
+							<div>${getDisplayValue(selectedOption)}</div>
 						</template>
 					</div>
 					<div class="selector-arrow">▼</div>
@@ -25,7 +25,7 @@
 					<li repeat.for="option of options" click.delegate="select(option)">
 						<a>
 							<template replaceable part="option-template">
-								${option}
+								${getDisplayValue(option)}
 							</template>
 						</a>
 					</li>

src/elements/select/at-select.ts

@@ -7,10 +7,21 @@ export class AtSelect {
 	constructor(private element: Element) { }
 
 	@au.bindable
-	options: any[] = [];
+	options: unknown[] = [];
+	optionsChanged() {
+		this.valueChanged();
+	}
 
 	@au.bindable({ defaultBindingMode: au.bindingMode.twoWay })
-	value: any;
+	value: unknown;
+	valueChanged() {
+		this.selectedOption = this.options?.find(x => this.getValue(x) === this.value);
+		if (!this.selectedOption) {
+			this.value = undefined;
+		}
+	}
+
+	selectedOption: unknown;
 
 	@au.ato.bindable.stringMd
 	label: string;
@@ -24,16 +35,26 @@ export class AtSelect {
 	@au.ato.bindable.booleanMd
 	allowEmpty: boolean;
 
+	@au.bindable
+	displayFieldName: ((option: unknown) => string) | string;
+
+	@au.bindable
+	valueFieldName: ((option: unknown) => unknown) | string;
+
 	input: HTMLDivElement;
 	validateResults: ValidateResult[] = [];
 	validationClass: string;
 
-	select(o) {
+	select(o: unknown) {
 		if (o || this.allowEmpty) {
-			this.value = o;
+			this.value = this.getValue(o);
 		}
 	}
 
+	bind() {
+		this.valueChanged();
+	}
+
 	attached() {
 		this.element.mdRenderValidateResults = this.mdRenderValidateResults;
 		this.element.mdUnrenderValidateResults = this.mdUnrenderValidateResults;
@@ -53,4 +74,33 @@ export class AtSelect {
 		this.validateResults.push(...results.filter(x => !x.valid));
 		this.validationClass = results.find(x => !x.valid) ? "invalid" : "valid";
 	}
+
+	getValue(option: unknown): unknown {
+		if (this.valueFieldName) {
+			if (this.valueFieldName instanceof Function) {
+				return this.valueFieldName(option);
+			}
+			else {
+				return option[this.valueFieldName];
+			}
+		} else {
+			return option;
+		}
+	}
+
+	getDisplayValue(option: unknown): string {
+		if (option === null || option === undefined) {
+			return null;
+		}
+		if (!this.displayFieldName) {
+			return option.toString();
+		}
+		else if (this.displayFieldName instanceof Function) {
+			return this.displayFieldName(option);
+		}
+		else {
+			return option[this.displayFieldName];
+		}
+	}
+
 }