complete: support custom components for dropdown items

complete.ts

@@ -5,6 +5,10 @@ import { validateInput } from './index';
 export type CompletionPayload = { place: google.maps.places.PlaceResult };
 /** CompleteEvent is a custom event that is dispatched when an input is validated. */
 export class CompleteEvent extends CustomEvent<CompletionPayload> {}
+/** ComplexInputElement is used to represent any input besides the basic text input. */
+export interface ComplexInputElement {
+	setter(value: string): void;
+}
 
 const googleOptions: google.maps.places.AutocompleteOptions = {
 	// componentRestrictions: { country: ['ca'] },
@@ -21,9 +25,9 @@ export class AddressComplete {
 	private _primary?: HTMLInputElement;
 	private _line2?: HTMLInputElement;
 	private _city?: HTMLInputElement;
-	private _province?: HTMLInputElement;
+	private _province?: ComplexInputElement;
 	private _postalCode?: HTMLInputElement;
-	private _country?: HTMLInputElement;
+	private _country?: ComplexInputElement;
 
 	/** registers line 1 address field and attaches an autocompleter */
 	primary: Action<HTMLInputElement, undefined, { oncomplete: (e: CompleteEvent) => void }> = (
@@ -42,7 +46,7 @@ export class AddressComplete {
 		this._city = node;
 	};
 	/** registers province field */
-	province: Action<HTMLInputElement> = (node) => {
+	province: Action<ComplexInputElement> = (node) => {
 		this._province = node;
 	};
 	/** registers postal code field */
@@ -50,7 +54,7 @@ export class AddressComplete {
 		this._postalCode = node;
 	};
 	/** registers country field */
-	country: Action<HTMLInputElement> = (node) => {
+	country: Action<ComplexInputElement> = (node) => {
 		this._country = node;
 	};
 
@@ -100,12 +104,12 @@ export class AddressComplete {
 					}
 					case 'administrative_area_level_1': {
 						// this._province?.setValStr(component.short_name);
-						if (this._province) this._province.value = component.short_name;
+						if (this._province) this._province.setter(component.short_name);
 						break;
 					}
 					case 'country': {
 						// this._country?.setValStr(component.short_name);
-						if (this._country) this._country.value = component.short_name;
+						if (this._country) this._country.setter(component.short_name);
 						break;
 					}
 				}