places-autocomplete-svelte 2.2.23 → 2.2.24

package/README.md

@@ -50,6 +50,7 @@ The component handles API loading, session tokens, debounced fetching, and acces
 *   💰 Automatically handles **session tokens** for optimal cost management
 *   ⚡ **Debounced Input:** Configurable delay to minimise API calls while typing
 *   ✨ **Suggestion Highlighting:** Automatically highlights matched text in suggestions
+*   🌍 **Internationally Neutral:** No default regional restrictions - works globally out of the box
 
 ### Accessibility & User Experience
 *   ♿ **WCAG Compliant:** Follows WAI-ARIA patterns for comboboxes
@@ -58,7 +59,7 @@ The component handles API loading, session tokens, debounced fetching, and acces
 
 ### Developer Experience
 *   🎨 **Customisable Styling:** Override default styles via `options.classes` prop
-*   🔧 **Imperative API:** Direct control with `clear()`, `focus()`, `getRequestParams()`, `setRequestParams()`, `setFetchFields()`, and `getFetchFields()` methods
+*   🔧 **Imperative API:** Direct control with `clear()`, `focus()`, `getRequestParams()`, `setRequestParams()`, `setFetchFields()`, `getFetchFields()`, and `setInputValue()` methods
 *   📘 **TypeScript Support:** Fully typed with comprehensive type definitions
 *   🔐 **Secure:** XSS protection with safe rendering of suggestions
 *   🎯 **Event Handling:** `onResponse` and `onError` callbacks for complete control
@@ -94,7 +95,6 @@ This component has been recognised as a winner of the **Google Maps Platform Awa
 ## Requirements
 
 *   **Svelte 5+** - This component requires Svelte 5.0.0 or higher and uses Svelte 5 features including runes (`$state`, `$derived`, etc.)
-*   **Node.js 18+** - Required for development and building
 *   **Google Maps API Key** with the "Places API" enabled. Refer to [Use API Keys](https://developers.google.com/maps/documentation/javascript/get-api-key) for detailed instructions.
 
 ## Installation
@@ -122,6 +122,21 @@ For simple use cases, just pass your API key to the component. It will automatic
     // Get API Key securely (e.g., from environment variables)
     const PUBLIC_GOOGLE_MAPS_API_KEY = import.meta.env.VITE_PUBLIC_GOOGLE_MAPS_API_KEY;
 
+    // Optional: Set regional preferences (component works globally by default)
+    const requestParams = {
+        language: 'en-US',      // Set language preference
+        region: 'US',           // Set regional bias
+        // includedRegionCodes: ['US', 'CA'] // Restrict to specific regions
+    };
+
+    // Optional: Configure UI and behaviour
+    const options = {
+        show_place_type: true,     // Show place type icons
+        distance: true,            // Show distance (if origin provided)
+        response_type: 'json',     // Return JSON object (default)
+        placeholder: 'Search for places...'
+    };
+
     const handleResponse = (response: PlaceResult) => {
         console.log('Selected:', response.formattedAddress);
     };
@@ -133,6 +148,8 @@ For simple use cases, just pass your API key to the component. It will automatic
 
 <PlaceAutocomplete 
     {PUBLIC_GOOGLE_MAPS_API_KEY}
+    {requestParams}
+    {options}
     onResponse={handleResponse} 
     onError={handleError} 
 />
@@ -259,8 +276,8 @@ This component is built to be accessible and follows the [WAI-ARIA Authoring Pra
 | `onResponse` | `(response: PlaceResult) => void` | Yes | - | Callback triggered when a user selects a place. Receives the full place details object. |
 | `onError` | `(error: string) => void` | Yes | - | Callback triggered when an error occurs (API loading, network issues, etc.). |
 | `fetchFields` | `string[]` | No | `['formattedAddress', 'addressComponents']` | Place Data Fields to request from the API. See [Place Data Fields](https://developers.google.com/maps/documentation/javascript/place-data-fields). **Affects API billing.** |
-| `requestParams` | `Partial<RequestParams>` | No | `{ inputOffset: 3 }` | Parameters for the Autocomplete API request (language, region, location bias, etc.). See RequestParams interface. |
-| `options` | `Partial<ComponentOptions>` | No | `{ debounce: 100 }` | UI and behavior options (placeholder, debounce delay, distance display, custom classes, etc.). See ComponentOptions interface. |
+| `requestParams` | `Partial<RequestParams>` | No | `{ inputOffset: 0 }` | Parameters for the Autocomplete API request. By default, the component is internationally neutral (no default `language` or `region`), allowing the Google Maps API to use browser settings and IP-based location detection. You can specify parameters like `language`, `region` (for biasing results), or `includedRegionCodes` (for filtering results) to customize behaviour. See the RequestParams interface for all options. |
+| `options` | `Partial<ComponentOptions>` | No | `{ debounce: 100 }` | UI and behaviour options (placeholder, debounce delay, distance display, custom classes, etc.). See ComponentOptions interface. |
 
 *Either `PUBLIC_GOOGLE_MAPS_API_KEY` prop OR manual initialisation with `initialiseGMaps()` is required.
 
@@ -287,6 +304,9 @@ Get a reference to the component instance using `bind:this` to call its methods
 <button onclick={() => autocompleteComponent?.setOptions({ placeholder: 'Search locations...', debounce: 300 })}>
     Update Options
 </button>
+<button onclick={() => autocompleteComponent?.setInputValue(48.8584, 2.2945)}>
+    Set to Eiffel Tower
+</button>
 ```
 
 | Method | Signature | Description |
@@ -299,6 +319,94 @@ Get a reference to the component instance using `bind:this` to call its methods
 | `getFetchFields()` | `() => string[]` | Returns the current array of Place Data Fields that will be requested. |
 | `setOptions(options)` | `(options: Partial<ComponentOptions>) => void` | Dynamically updates the component's configuration options. Merges the provided options with existing settings. |
 | `getOptions()` | `() => ComponentOptions` | Returns the current validated options used by the component. Useful for inspecting configuration settings. |
+| `setInputValue(latitude, longitude)` | `(latitude: number, longitude: number) => Promise<void>` | Sets the input by finding and selecting a place for the given coordinates. Performs reverse geocoding to convert lat/lng to a place, then triggers `onResponse`. **Requires Geocoding API to be enabled.** |
+
+### Reverse Geocoding with `setInputValue`
+
+The `setInputValue` method allows you to programmatically set a location by coordinates, useful for integrating with geolocation APIs or map click events:
+
+```javascript
+// Example: Set location from user's current position
+navigator.geolocation.getCurrentPosition(async (position) => {
+    try {
+        await autocompleteComponent.setInputValue(
+            position.coords.latitude,
+            position.coords.longitude
+        );
+        console.log('Location set successfully');
+    } catch (error) {
+        console.error('Failed to set location:', error);
+    }
+});
+
+// Example: Set specific landmark (Eiffel Tower)
+await autocompleteComponent.setInputValue(48.8584, 2.2945);
+```
+
+**Important:** This method requires the **Geocoding API** to be enabled in your Google Cloud Console project. The method:
+1. Performs reverse geocoding to convert coordinates to a place
+2. Fetches place details using your configured `fetchFields`
+3. Triggers the `onResponse` callback with the place data
+4. Updates the input field (respects `clear_input` option)
+
+## Advanced Response Handling
+
+### Response Types
+
+Control the format of data returned by the `onResponse` callback using the `response_type` option:
+
+**JSON Format (Default):**
+```javascript
+const options = {
+    response_type: 'json' // Default
+};
+
+const handleResponse = (response: PlaceResult) => {
+    console.log(response.formattedAddress);      // "123 Main St, City, Country"
+    console.log(response.location);              // { lat: 40.7128, lng: -74.0060 }
+    console.log(response.addressComponents);     // Array of address components
+};
+```
+
+**Google Maps Place Instance:**
+```javascript
+const options = {
+    response_type: 'place'
+};
+
+const handleResponse = (place: google.maps.places.Place) => {
+    // Access to full Place API methods
+    console.log(place.formattedAddress);
+    console.log(place.location);
+    
+    // Access photos (if fetchFields includes 'photos')
+    const photos = place.photos;
+    if (photos && photos.length > 0) {
+        const photoUrl = photos[0].getURI({ maxHeight: 1200 });
+        console.log('Photo URL:', photoUrl);
+    }
+    
+    // Convert to JSON when needed
+    const jsonData = place.toJSON();
+    console.log('JSON format:', jsonData);
+};
+```
+
+### Place Type Icons
+
+Enable visual categorisation of suggestions with place type icons:
+
+```javascript
+const options = {
+    show_place_type: true,
+    distance: false,  // Must be false when using place type icons
+    fetchFields: ['formattedAddress', 'primaryType'] // Ensure primaryType is included
+};
+```
+
+**Important:** `show_place_type` and `distance` are mutually exclusive - only one can be enabled at a time. When `show_place_type` is `true`, the distance display is automatically disabled.
+
+This displays categorized icons (🏪 Shopping, 🍽️ Dining, 🏨 Lodging, etc.) on the right side of each suggestion, helping users quickly identify the type of place.
 
 ## Options
 
@@ -306,13 +414,15 @@ Get a reference to the component instance using `bind:this` to call its methods
 | :--- | :--- | :--- | :--- |
 | `placeholder` | `string` | `''` | Placeholder text for the input field. |
 | `debounce` | `number` | `100` | Delay in ms before firing API request. Set to `0` to disable. |
-| `distance` | `boolean` | `true` | Show distance from `requestParams.origin` (if provided). |
+| `distance` | `boolean` | `false` | Show distance from `requestParams.origin` (if provided). **Mutually exclusive with `show_place_type`.** |
 | `distance_units` | `'km' \| 'miles'` | `'km'` | Units for displaying distance. |
 | `label` | `string` | `''` | Optional label text displayed above the input. |
 | `autofocus` | `boolean` | `false` | Automatically focus the input on mount. |
 | `autocomplete` | `string` | `'off'` | The `autocomplete` attribute for the input field. |
 | `classes` | `Partial<ComponentClasses>` | `{}` | Object to override default CSS classes. See Styling section. |
 | `clear_input` | `boolean` | `true` | If `false`, retains the `formattedAddress` in the input after selection. |
+| `response_type` | `'json' \| 'place'` | `'json'` | Return format: `'json'` for JSON object (`.toJSON()`), `'place'` for Google Maps Place instance with access to methods like `.getPhotos()`. |
+| `show_place_type` | `boolean` | `false` | Display place type icons (shopping, dining, etc.) on the right side of suggestion items. **Mutually exclusive with `distance`.** |
 
 ## Styling
 
@@ -322,14 +432,14 @@ The component includes built-in styles with `.pac-` prefixed CSS classes, provid
 
 *   **Framework-agnostic**: Pure CSS with no dependencies on Tailwind or other frameworks
 *   **Modern design**: Clean, professional appearance with proper spacing, shadows, and hover effects
-*   **Fully functional**: Includes keyboard navigation indicators, loading states, and responsive behavior
+*   **Fully functional**: Includes keyboard navigation indicators, loading states, and responsive behaviour
 *   **Customisable**: All styles can be overridden via the `options.classes` prop
 
 The default styles include:
 - Rounded input with shadow and focus states
-- Dropdown list with scroll behavior and dividers
+- Dropdown list with scroll behaviour and dividers
 - Keyboard navigation hints (Esc, ↑, ↓)
-- Highlighted current selection with color transitions
+- Highlighted current selection with colour transitions
 - Distance display for location-based results
 - Icon support with proper alignment
 - Responsive layout for mobile and desktop
@@ -358,7 +468,10 @@ Override any default styling by providing your own CSS classes via `options.clas
 *   `li_div_p_container`: Container for paragraphs (default: `.pac-li-div-p-container`)
 *   `li_div_two`: Second inner `div` containing the distance (default: `.pac-li-div-two`)
 *   `li_div_two_p`: The `<p>` tag containing the distance text (default: `.pac-li-div-two-p`)
-*   `kbd_container`: Container for the keyboard hint keys (default: `.pac-kbd-container`)
+*   `li_div_two_p_place_type`: Container for place type display (default: `.pac-li-div-two-p-place_type`)
+*   `li_div_two_p_place_type_icon`: The place type icon element (default: `.pac-li-div-two-p-place_type-icon`)
+*   `li_div_two_p_place_type_label`: The place type label text (default: `.pac-li-div-two-p-place_type-label`)
+*   `kbd_container`: Container for the keyboard hint keys (default: `.pac-kbd-container`))
 *   `kbd_escape`: The `<kbd>` tag for the 'Esc' hint (default: `.pac-kbd-escape`)
 *   `kbd_up`: The `<kbd>` tag for the 'Up Arrow' hint (default: `.pac-kbd-up`)
 *   `kbd_down`: The `<kbd>` tag for the 'Down Arrow' hint (default: `.pac-kbd-down`)
@@ -375,7 +488,11 @@ const options = {
     ul: 'absolute mt-1 w-full bg-white shadow-lg rounded-md border border-gray-200 max-h-60 overflow-auto',
     li: 'px-4 py-2 hover:bg-blue-500 hover:text-white cursor-pointer',
     li_current: 'bg-blue-500 text-white',
-    highlight: 'font-semibold text-blue-700'
+    highlight: 'font-semibold text-blue-700',
+    // Place type styling
+    li_div_two_p_place_type: 'flex items-center gap-1 text-gray-500',
+    li_div_two_p_place_type_icon: 'w-4 h-4',
+    li_div_two_p_place_type_label: 'text-xs font-medium'
   }
 };
 ```
@@ -416,7 +533,7 @@ import { PlaceAutocomplete } from 'places-autocomplete-svelte';
 ```typescript
 import type { 
     PlaceResult,       // Place data returned from API
-    ComponentOptions,  // UI and behavior configuration
+    ComponentOptions,  // UI and behaviour configuration
     RequestParams,     // Autocomplete request parameters
     FormattedAddress,  // Standardised address structure
     ComponentClasses,  // CSS class overrides
@@ -445,6 +562,34 @@ import {
 *   Place Details requests (via `fetchFields`) are billed separately. **Only request the fields you need** to manage costs effectively.
 *   For detailed pricing information, see [Google Maps Platform Pricing](https://developers.google.com/maps/documentation/javascript/usage-and-billing).
 
+## Troubleshooting
+
+Common issues and how to resolve them:
+
+### No Suggestions Appear / "This API project is not authorised..."
+
+This is typically an issue with your Google Maps API key.
+
+*   **Check API Key Restrictions:** Ensure your key is correctly restricted. For web use, you should have an **HTTP referrer** restriction matching your website's domain (e.g., `yourdomain.com/*`). For local development, you might need to add `localhost:*` or your specific local server address.
+*   **Enable APIs:** In the Google Cloud Console, make sure you have enabled both the **Places API** and the **Maps JavaScript API** for your project. The `setInputValue()` method also requires the **Geocoding API**.
+*   **Enable Billing:** Your Google Cloud project must have a valid billing account attached.
+*   **Check for Errors:** Open your browser's developer console and check for any error messages from the Google Maps script.
+
+### "Loader must not be called again" Error
+
+This error occurs when you have multiple Google Maps components on the same page (or across different routes in a SvelteKit app) and each one tries to initialize the Google Maps loader independently.
+
+**Solution:** Use the **Advanced Usage (Manual Initialisation)** pattern.
+1.  Call `setGMapsContext()` once in a shared parent component (like `+layout.svelte`).
+2.  Call `initialiseGMaps()` once in the same parent component, inside a `if (browser)` block.
+3.  The `PlaceAutocomplete` component (and any other Google Maps components) will then automatically use the shared loader instance, preventing the error.
+
+### Component or Styles Not Loading Correctly
+
+*   **Check Installation:** Make sure the `places-autocomplete-svelte` package is correctly installed in your `node_modules`.
+*   **SvelteKit / Vite Config:** Ensure your bundler is correctly processing Svelte components from `node_modules`. This is usually handled automatically.
+*   **CSS Conflicts:** If the styling looks broken, you may have global styles that are conflicting with the component's default `.pac-` classes. You can either debug the conflicting styles or use the `options.classes` prop to replace the default classes with your own (e.g., Tailwind CSS classes), giving you full control over styling.
+
 ## Standalone JavaScript Library
 
 Need this functionality for a non-Svelte project? Check out our companion vanilla JavaScript library:

package/dist/PlaceAutocomplete.svelte

@@ -5,10 +5,10 @@
 	 * @see https://github.com/alexpechkarev/places-autocomplete-svelte
 	 * @version 1.0.0
 	 * @license MIT
-	 * 
+	 *
 	 * A production-ready, accessible autocomplete component for Google Places API (New).
 	 * Built with Svelte 5 runes for optimal reactivity and performance.
-	 * 
+	 *
 	 * @features
 	 * - Full keyboard navigation (ArrowUp, ArrowDown, Enter, Escape)
 	 * - Session token management for billing optimization
@@ -18,8 +18,8 @@
 	 * - Text highlighting in suggestions
 	 * - ARIA-compliant accessibility
 	 * - Imperative API for programmatic control
-	 * 
-	 * 
+	 *
+	 *
 	 * @publicMethods
 	 * - `clear()` - Clears input and resets session
 	 * - `focus()` - Focuses the input field
@@ -27,7 +27,8 @@
 	 * - `setRequestParams(params)` - Updates request parameters dynamically
 	 * - `setFetchFields(fields)` - Updates Place Data Fields to fetch
 	 * - `getFetchFields()` - Returns current fetch fields
-	 * 
+	 * - `setInputValue(latitude, longitude)` - Finds and selects a place by coordinates
+	 *
 	 */
 
 	import { onMount, untrack } from 'svelte';
@@ -45,7 +46,9 @@
 		formatDistance,
 		validateFetchFields,
 		createHighlightedSegments,
-		debounce
+		debounce,
+		ITINERARY_CATEGORIES,
+		ITINERARY_SVG_ICONS
 	} from './helpers.js';
 
 	let gmaps: GMapsContext | undefined;
@@ -116,7 +119,7 @@
 	 * @param {PlaceResult} [placeData] - Optional place data to populate the input field with.
 	 * @private
 	 */
-	const reset = (placeData?: PlaceResult) => {
+	export const reset = (placeData?: PlaceResult) => {
 		currentSuggestion = -1;
 		if (validatedOptions?.clear_input == false) {
 			if (placeData && placeData.formattedAddress) {
@@ -227,10 +230,9 @@
 	 *   showDistance: true
 	 * });
 	 */
-	export function setOptions(options: typeof validatedOptions){
+	export function setOptions(options: typeof validatedOptions) {
 		validatedOptions = validateOptions(options);
-	}	
-
+	}
 
 	/**
 	 * Returns the current validated options used by the component.
@@ -245,6 +247,71 @@
 		return validatedOptions;
 	}
 
+	/**
+	 * Sets the input value by finding and selecting a place for the given coordinates.
+	 * Performs reverse geocoding to convert latitude/longitude to a place, then fetches
+	 * place details and triggers the onResponse callback.
+	 * @public
+	 * @param {number} latitude - The latitude coordinate of the location.
+	 * @param {number} longitude - The longitude coordinate of the location.
+	 * @returns {Promise<void>} A promise that resolves when the place has been found and selected.
+	 * @throws {Error} If the geocoding fails or no place is found for the coordinates.
+	 * @example
+	 * // Set input to a specific location (e.g., Eiffel Tower)
+	 * await autocompleteComponent.setInputValue(48.8584, 2.2945);
+	 */
+	export async function setInputValue(latitude: number, longitude: number): Promise<void> {
+		try {
+			// Ensure placesApi is loaded
+			if (!placesApi.AutocompleteSuggestion) {
+				throw new Error('Places API not loaded yet. Please wait for component initialisation.');
+			}
+
+			// Import the geocoding library
+			const { Geocoder } = await importLibrary('geocoding');
+			const geocoder = new Geocoder();
+
+			// Perform reverse geocoding
+			const response = await geocoder.geocode({
+				location: { lat: latitude, lng: longitude }
+			});
+
+			if (!response.results || response.results.length === 0) {
+				throw new Error('No place found for the given coordinates.');
+			}
+
+			// Get the first result (most specific)
+			const geocodeResult = response.results[0];
+
+			// Import the Place class to create a Place object from the place ID
+			const { Place } = await importLibrary('places');
+			const place = new Place({
+				id: geocodeResult.place_id
+			});
+
+			// Fetch the place details with the configured fields
+			await place.fetchFields({
+				fields: validatedFetchFields
+			});
+
+			// Convert to JSON format
+			const placeData = place.toJSON() as PlaceResult;
+
+			// Reset search input and results
+			reset(placeData);
+
+			// Trigger the onResponse callback
+			onResponse(placeData);
+		} catch (e: any) {
+			// Handle errors
+			onError(
+				(e.name || 'An error occurred') +
+					' - ' +
+					(e.message || 'error setting input value from coordinates')
+			);
+			throw e;
+		}
+	}
 
 	/**
 	 * Extracts a specific address component from the place response.
@@ -329,7 +396,35 @@
 
 				// Create highlighted segments
 				highlightedText = createHighlightedSegments(originalText, matches);
+				//console.log(suggestion.placePrediction.types);
+
+				// Extract the types array for cleaner code
+				const types = suggestion.placePrediction.types;
+				let placeType = {
+					icon: '',
+					label: ''
+				};
 
+				if (validatedOptions.show_place_type) {
+					if (Array.isArray(types) && types.length > 0) {
+						// Look through the array until we find a type we actually recognize
+						const matchedType = types.find(
+							(type: string) => typeof type === 'string' && type in ITINERARY_CATEGORIES
+						);
+
+						// If we found a match, get its label; otherwise, use 'Default'
+						const categoryLabel = matchedType
+							? ITINERARY_CATEGORIES[matchedType as keyof typeof ITINERARY_CATEGORIES]
+							: 'Default';
+
+						placeType = {
+							icon: ITINERARY_SVG_ICONS[categoryLabel as keyof typeof ITINERARY_SVG_ICONS] || '',
+							label: categoryLabel
+						};
+					}
+				}
+
+				// const category = ITINERARY_CATEGORIES[suggestion.placePrediction.placeType] || 'Default';
 				results.push({
 					place: place,
 					mainText: highlightedText,
@@ -337,7 +432,8 @@
 					distance: formatDistance(
 						suggestion.placePrediction.distanceMeters,
 						validatedOptions.distance_units ?? 'km'
-					)
+					),
+					placeType: placeType
 				});
 			}
 			//console.log('Autocomplete suggestions:', results);
@@ -351,7 +447,9 @@
 	 * The debounce delay is reactive and updates when the validatedOptions.debounce value changes.
 	 * @private
 	 */
-	const debouncedMakeAcRequest = $derived(debounce(makeAcRequest, validatedOptions?.debounce ?? 100));
+	const debouncedMakeAcRequest = $derived(
+		debounce(makeAcRequest, validatedOptions?.debounce ?? 100)
+	);
 
 	/**
 	 * Handles the selection of an autocomplete suggestion.
@@ -366,12 +464,11 @@
 		toJSON: () => any;
 	}): Promise<void> => {
 		try {
-			// console.log(place);
-			// console.log(validatedFetchFields);
 			await place.fetchFields({
 				fields: validatedFetchFields
 			});
-			let placeData = place.toJSON();
+			// return place as json or full place class instance
+			let placeData = validatedOptions.response_type === 'json' ? place.toJSON() : place;
 			// reset search input and results
 			reset(placeData);
 			onResponse(placeData);
@@ -406,7 +503,7 @@
 	onMount(async (): Promise<void> => {
 		if (isDefaultOnResponse) {
 			console.warn(
-				'PlaceAutocomplete: The `onResponse` callback has not been provided. Selected place data will not be handled. See documentation for usage.'
+				'[PlaceAutocomplete] No onResponse callback provided. Place selection events will not be handled. Please provide an onResponse function to handle place selections. See: https://places-autocomplete-svelte.uk/docs'
 			);
 		}
 		if (validatedOptions.autofocus) {
@@ -593,7 +690,7 @@
 											stroke-width="2"
 											stroke-linecap="round"
 											stroke-linejoin="round"
-											class="size-5">{@html validatedOptions.classes.map_pin_icon}</svg
+											class="size-5 shrink-0">{@html validatedOptions.classes.map_pin_icon}</svg
 										>
 									{/if}
 
@@ -625,7 +722,7 @@
 									</div>
 								</div>
 							</div>
-							{#if validatedOptions.distance && p.distance}
+							{#if validatedOptions.distance && p.distance && !validatedOptions.show_place_type}
 								<div class={[validatedOptions.classes?.li_div_two]}>
 									<p
 										class={[
@@ -637,6 +734,33 @@
 									</p>
 								</div>
 							{/if}
+							{#if validatedOptions.show_place_type && p.placeType && !validatedOptions.distance}
+								<div class={[validatedOptions.classes?.li_div_two]}>
+									<div
+										class={[
+											i === currentSuggestion && validatedOptions.classes?.li_current,
+											validatedOptions.classes?.li_div_two_p_place_type
+										]}
+									>
+										<div
+											class={[
+												i === currentSuggestion && validatedOptions.classes?.li_current,
+												validatedOptions.classes?.li_div_two_p_place_type_icon
+											]}
+										>
+											{@html p.placeType.icon}
+										</div>
+										<div
+											class={[
+												i === currentSuggestion && validatedOptions.classes?.li_current,
+												validatedOptions.classes?.li_div_two_p_place_type_label
+											]}
+										>
+											{p.placeType.label}
+										</div>
+									</div>
+								</div>
+							{/if}
 						</button>
 					</li>
 				{/each}
@@ -689,8 +813,8 @@
 			monospace;
 		-webkit-text-size-adjust: 100%;
 		-moz-tab-size: 4;
-		  -o-tab-size: 4;
-		     tab-size: 4;
+		-o-tab-size: 4;
+		tab-size: 4;
 		line-height: 1.5;
 		font-family: var(
 			--default-font-family,
@@ -805,6 +929,13 @@
 		--default-mono-font-family: var(--font-mono);
 		--color-primary-500: #fe795d;
 	}
+	.size-5 {
+		width: 20px;
+		height: 20px;
+	}
+	.shrink-0 {
+		flex-shrink: 0;
+	}
 	.pac-section {
 		width: 100%;
 	}
@@ -867,6 +998,11 @@
 		padding-right: calc(var(--spacing, 0.25rem) * 1.5);
 		display: flex;
 		position: absolute;
+		/* max-height: 40px; */
+		align-content: center;
+		align-items: center;
+		flex-wrap: wrap;
+		flex-direction: row;
 	}
 	.pac-kbd-escape {
 		margin-right: calc(var(--spacing, 0.25rem) * 1);
@@ -995,7 +1131,7 @@
 		color: var(--color-gray-900, oklch(21% 0.034 264.665));
 		-webkit-user-select: none;
 		-moz-user-select: none;
-		     user-select: none;
+		user-select: none;
 	}
 	@media (hover: hover) {
 		.pac-li:hover {
@@ -1035,7 +1171,7 @@
 		min-width: calc(var(--spacing, 0.25rem) * 0);
 		align-items: center;
 		-moz-column-gap: calc(var(--spacing, 0.25rem) * 3);
-		     column-gap: calc(var(--spacing, 0.25rem) * 3);
+		column-gap: calc(var(--spacing, 0.25rem) * 3);
 		flex: auto;
 		display: flex;
 	}
@@ -1058,6 +1194,7 @@
 	.pac-li-div-one-p-secondaryText {
 		font-size: var(--text-xs, 0.75rem);
 		line-height: calc(var(--spacing, 0.25rem) * 4);
+		text-align: left;
 	}
 	.pac-li-current {
 		background-color: var(--color-indigo-500, oklch(58.5% 0.233 277.117));
@@ -1079,6 +1216,43 @@
 		font-size: var(--text-xs, 0.75rem);
 		line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
 	}
+	.pac-li-div-two-p-place_type {
+		font-size: var(--text-xs, 0.75rem);
+		line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		/* justify-content: space-between; */
+		justify-content: flex-end;
+		width: 100%;
+		/* min-width: 120px; */
+		gap: 0.5rem;
+	}
+	.pac-li-div-two-p-place_type-icon {
+		flex-shrink: 0;
+	}
+	.pac-li-div-two-p-place_type-label {
+		/* text-wrap: left; */
+		display: none;
+	}
+
+	@media (min-width: 48rem) {
+		.pac-li-div-two-p-place_type {
+			font-size: var(--text-xs, 0.75rem);
+			line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: flex-start;
+			width: 100%;
+			min-width: 120px;
+			gap: 0.5rem;
+		}
+		.pac-li-div-two-p-place_type-label {
+			/* text-wrap: left; */
+			display: inline;
+		}
+	}
 	.pac-highlight {
 		--tw-font-weight: var(--font-weight-bold, 700);
 		font-weight: var(--font-weight-bold, 700);

package/dist/PlaceAutocomplete.svelte.d.ts

@@ -1,5 +1,11 @@
-import type { Props } from './interfaces.js';
+import type { PlaceResult, Props } from './interfaces.js';
 declare const PlaceAutocomplete: import("svelte").Component<Props, {
+    /**
+         * Resets the search input and clears the suggestions list.
+         * Optionally populates the input with the formatted address of the selected place.
+         * @param {PlaceResult} [placeData] - Optional place data to populate the input field with.
+         * @private
+         */ reset: (placeData?: PlaceResult) => void;
     clear: () => void;
     focus: () => void;
     getRequestParams: () => import("./interfaces.js").RequestParams;
@@ -8,6 +14,7 @@ declare const PlaceAutocomplete: import("svelte").Component<Props, {
     getFetchFields: () => string[];
     setOptions: (options: import("./interfaces.js").ComponentOptions) => void;
     getOptions: () => import("./interfaces.js").ComponentOptions;
+    setInputValue: (latitude: number, longitude: number) => Promise<void>;
 }, "onResponse" | "onError">;
 type PlaceAutocomplete = ReturnType<typeof PlaceAutocomplete>;
 export default PlaceAutocomplete;

package/dist/helpers.d.ts

@@ -63,3 +63,114 @@ export declare function createHighlightedSegments(originalText: string, matches:
  * @param delay The debounce delay in milliseconds.
  */
 export declare const debounce: <T extends (...args: any[]) => void>(func: T, delay: number) => (...args: Parameters<T>) => void;
+export declare const ITINERARY_CATEGORIES: {
+    car_rental: string;
+    car_dealer: string;
+    gas_station: string;
+    electric_vehicle_charging_station: string;
+    parking: string;
+    airport: string;
+    bus_station: string;
+    train_station: string;
+    subway_station: string;
+    taxi_stand: string;
+    ferry_terminal: string;
+    restaurant: string;
+    cafe: string;
+    coffee_shop: string;
+    bar: string;
+    pub: string;
+    night_club: string;
+    bakery: string;
+    fast_food_restaurant: string;
+    ice_cream_shop: string;
+    pizza_restaurant: string;
+    steak_house: string;
+    sushi_restaurant: string;
+    hotel: string;
+    hostel: string;
+    motel: string;
+    resort_hotel: string;
+    bed_and_breakfast: string;
+    campground: string;
+    rv_park: string;
+    lodging: string;
+    cottage: string;
+    inn: string;
+    guest_house: string;
+    tourist_attraction: string;
+    museum: string;
+    art_gallery: string;
+    cultural_landmark: string;
+    historical_landmark: string;
+    monument: string;
+    performing_arts_theater: string;
+    aquarium: string;
+    zoo: string;
+    visitor_center: string;
+    town_square: string;
+    landmark: string;
+    place_of_worship: string;
+    park: string;
+    national_park: string;
+    state_park: string;
+    beach: string;
+    hiking_area: string;
+    amusement_park: string;
+    water_park: string;
+    botanical_garden: string;
+    golf_course: string;
+    gym: string;
+    natural_feature: string;
+    shopping_mall: string;
+    supermarket: string;
+    grocery_store: string;
+    clothing_store: string;
+    electronics_store: string;
+    souvenir_shop: string;
+    gift_shop: string;
+    duty_free_store: string;
+    hospital: string;
+    pharmacy: string;
+    atm: string;
+    bank: string;
+    post_office: string;
+    police: string;
+    neighborhood: string;
+    sublocality: string;
+    route: string;
+    street_address: string;
+    intersection: string;
+    locality: string;
+    administrative_area_level_4: string;
+    country: string;
+    administrative_area_level_1: string;
+    administrative_area_level_2: string;
+    administrative_area_level_3: string;
+    administrative_area_level_5: string;
+    sublocality_level_1: string;
+    sublocality_level_2: string;
+    sublocality_level_3: string;
+    sublocality_level_4: string;
+    sublocality_level_5: string;
+    default: string;
+};
+export declare const ITINERARY_SVG_ICONS: {
+    Automotive: string;
+    Transport: string;
+    "Food and Drink": string;
+    Lodging: string;
+    Sightseeing: string;
+    Recreation: string;
+    Shopping: string;
+    Health: string;
+    Finance: string;
+    Geographical: string;
+    Navigation: string;
+    City: string;
+    District: string;
+    Airport: string;
+    "Subway Station": string;
+    "Train Station": string;
+    Default: string;
+};

package/dist/helpers.js

@@ -15,7 +15,7 @@ export const requestParamsDefault = {
      * https://developers.google.com/maps/documentation/javascript/place-types
      *
      * ['postal_code','premise','street_address','route']
-     * FY83DD 72
+     *
      */
     //includedPrimaryTypes: ['postal_code','premise','street_address','route'],
     includedPrimaryTypes: [],
@@ -25,7 +25,7 @@ export const requestParamsDefault = {
      * An empty set will not restrict the results.
      * If both locationRestriction and includedRegionCodes are set, the results will be located in the area of intersection.
      */
-    includedRegionCodes: ['GB'],
+    includedRegionCodes: [],
     /**
      * @type number optional
      * A zero-based Unicode character offset of input indicating the cursor position in input.
@@ -192,9 +192,9 @@ export const validateRequestParams = (requestParams) => {
     const validatedParams = {
         input: String(''),
         sessionToken: String(''),
-        includedRegionCodes: ['GB'],
-        language: 'en-GB',
-        region: 'GB',
+        //includedRegionCodes: ['GB'],
+        //language: 'en-GB',
+        //region: 'GB',
     };
     // iterate over requestParams
     for (const key in requestParams) {
@@ -315,6 +315,9 @@ export const componentClasses = {
     li_div_one_p_secondaryText: 'pac-li-div-one-p-secondaryText', //'text-xs text-left leading-2',
     li_div_two: 'pac-li-div-two', //'shrink-0 flex flex-col items-end min-w-16',
     li_div_two_p: 'pac-li-div-two-p', //'mt-1 text-xs/5',
+    li_div_two_p_place_type: 'pac-li-div-two-p-place_type',
+    li_div_two_p_place_type_icon: 'pac-li-div-two-p-place_type-icon',
+    li_div_two_p_place_type_label: 'pac-li-div-two-p-place_type-label',
     highlight: 'pac-highlight', //'font-bold',
     map_pin_icon: '<path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/>',
 };
@@ -325,12 +328,16 @@ export const componentOptions = {
     autofocus: false,
     autocomplete: 'off',
     placeholder: 'Start typing your address',
-    distance: true,
+    distance: false,
     distance_units: 'km',
     classes: componentClasses,
     label: '',
     debounce: 100,
-    clear_input: true
+    clear_input: true,
+    // Return Value:  Object a JSON object with all the requested Place properties
+    // or as google.maps.places.Place class instance
+    response_type: 'json', // 'json' | 'place',
+    show_place_type: false, // show place type in the autocomplete suggestions
 };
 /**
  * Validate and cast component options
@@ -415,3 +422,127 @@ export const debounce = (func, delay) => {
         }, delay);
     };
 };
+// Itinerary category mapping
+export const ITINERARY_CATEGORIES = {
+    // --- TRANSPORT & AUTO ---
+    "car_rental": "Automotive",
+    "car_dealer": "Automotive",
+    "gas_station": "Automotive",
+    "electric_vehicle_charging_station": "Automotive",
+    "parking": "Automotive",
+    "airport": "Airport",
+    "bus_station": "Transport",
+    "train_station": "Train Station",
+    "subway_station": "Subway Station",
+    "taxi_stand": "Transport",
+    "ferry_terminal": "Transport",
+    // --- DINING & NIGHTLIFE ---
+    "restaurant": "Food and Drink",
+    "cafe": "Food and Drink",
+    "coffee_shop": "Food and Drink",
+    "bar": "Food and Drink",
+    "pub": "Food and Drink",
+    "night_club": "Food and Drink",
+    "bakery": "Food and Drink",
+    "fast_food_restaurant": "Food and Drink",
+    "ice_cream_shop": "Food and Drink",
+    "pizza_restaurant": "Food and Drink",
+    "steak_house": "Food and Drink",
+    "sushi_restaurant": "Food and Drink",
+    // --- LODGING ---
+    "hotel": "Lodging",
+    "hostel": "Lodging",
+    "motel": "Lodging",
+    "resort_hotel": "Lodging",
+    "bed_and_breakfast": "Lodging",
+    "campground": "Lodging",
+    "rv_park": "Lodging",
+    "lodging": "Lodging",
+    "cottage": "Lodging",
+    "inn": "Lodging",
+    "guest_house": "Lodging",
+    // --- SIGHTSEEING & CULTURE ---
+    "tourist_attraction": "Sightseeing",
+    "museum": "Sightseeing",
+    "art_gallery": "Sightseeing",
+    "cultural_landmark": "Sightseeing",
+    "historical_landmark": "Sightseeing",
+    "monument": "Sightseeing",
+    "performing_arts_theater": "Sightseeing",
+    "aquarium": "Sightseeing",
+    "zoo": "Sightseeing",
+    "visitor_center": "Sightseeing",
+    "town_square": "Sightseeing",
+    "landmark": "Sightseeing",
+    "place_of_worship": "Sightseeing",
+    // --- RECREATION & PARKS ---
+    "park": "Recreation",
+    "national_park": "Recreation",
+    "state_park": "Recreation",
+    "beach": "Recreation",
+    "hiking_area": "Recreation",
+    "amusement_park": "Recreation",
+    "water_park": "Recreation",
+    "botanical_garden": "Recreation",
+    "golf_course": "Recreation",
+    "gym": "Recreation",
+    "natural_feature": "Recreation",
+    // --- SHOPPING ---
+    "shopping_mall": "Shopping",
+    "supermarket": "Shopping",
+    "grocery_store": "Shopping",
+    "clothing_store": "Shopping",
+    "electronics_store": "Shopping",
+    "souvenir_shop": "Shopping", // Simplified name
+    "gift_shop": "Shopping",
+    "duty_free_store": "Shopping",
+    // --- ESSENTIAL SERVICES ---
+    "hospital": "Health",
+    "pharmacy": "Health",
+    "atm": "Finance",
+    "bank": "Finance",
+    "post_office": "Services",
+    "police": "Services",
+    // --- GEOGRAPHICAL ---
+    "neighborhood": "Geographical",
+    "sublocality": "Geographical",
+    // --- NAVIGATION ---
+    "route": "Navigation",
+    "street_address": "Navigation",
+    "intersection": "Navigation",
+    // -- CITY --
+    'locality': 'City',
+    'administrative_area_level_4': 'City',
+    'country': 'Country',
+    'administrative_area_level_1': 'City',
+    'administrative_area_level_2': 'City',
+    'administrative_area_level_3': 'City',
+    'administrative_area_level_5': 'City',
+    'sublocality_level_1': 'Neighborhood',
+    'sublocality_level_2': 'Neighborhood',
+    'sublocality_level_3': 'Neighborhood',
+    'sublocality_level_4': 'Neighborhood',
+    'sublocality_level_5': 'Neighborhood',
+    // --- DEFAULT ---
+    "default": "Default"
+};
+// Itinerary category SVG icons
+export const ITINERARY_SVG_ICONS = {
+    "Automotive": `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"  style="display:inline-block"; viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2"/><circle cx="7" cy="17" r="2"/><path d="M9 17h6"/><circle cx="17" cy="17" r="2"/></svg>`,
+    "Transport": `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"  style="display:inline-block"; viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z"/></svg>`,
+    "Food and Drink": `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"  style="display:inline-block"; viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"/><path d="M7 2v20"/><path d="M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7"/></svg>`,
+    "Lodging": `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"  style="display:inline-block"; viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 4v16"/><path d="M2 8h18a2 2 0 0 1 2 2v10"/><path d="M2 17h20"/><path d="M6 8v9"/></svg>`,
+    "Sightseeing": `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"  style="display:inline-block"; viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-binoculars-icon lucide-binoculars"><path d="M10 10h4"/><path d="M19 7V4a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v3"/><path d="M20 21a2 2 0 0 0 2-2v-3.851c0-1.39-2-2.962-2-4.829V8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v11a2 2 0 0 0 2 2z"/><path d="M 22 16 L 2 16"/><path d="M4 21a2 2 0 0 1-2-2v-3.851c0-1.39 2-2.962 2-4.829V8a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v11a2 2 0 0 1-2 2z"/><path d="M9 7V4a1 1 0 0 0-1-1H6a1 1 0 0 0-1 1v3"/></svg>`,
+    "Recreation": `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"  style="display:inline-block"; viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-kayak-icon lucide-kayak"><path d="M18 17a1 1 0 0 0-1 1v1a2 2 0 1 0 2-2z"/><path d="M20.97 3.61a.45.45 0 0 0-.58-.58C10.2 6.6 6.6 10.2 3.03 20.39a.45.45 0 0 0 .58.58C13.8 17.4 17.4 13.8 20.97 3.61"/><path d="m6.707 6.707 10.586 10.586"/><path d="M7 5a2 2 0 1 0-2 2h1a1 1 0 0 0 1-1z"/></svg>`,
+    "Shopping": `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"  style="display:inline-block"; viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>`,
+    "Health": `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"  style="display:inline-block"; viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 7v4"/><path d="M14 21v-3a2 2 0 0 0-4 0v3"/><path d="M14 9h-4"/><path d="M18 11h2a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-9a2 2 0 0 1 2-2h2"/><path d="M18 21V5a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16"/></svg>`,
+    "Finance": `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"  style="display:inline-block"; viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="14" x="2" y="5" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>`,
+    "Geographical": `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"  style="display:inline-block"; viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m20 20-6-10.6c-.4-.7-1.5-.7-1.9 0L6 20"/><path d="M7 16h10"/><path d="M12 4a8 8 0 0 1 8 8v2a2 2 0 0 1-2 2h-1"/><path d="M7 16H6a2 2 0 0 1-2-2v-2a8 8 0 0 1 8-8"/></svg>`,
+    "Navigation": `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"  style="display:inline-block"; viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-navigation-icon lucide-navigation"><polygon points="3 11 22 2 13 21 11 13 3 11"/></svg>`,
+    "City": `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"  style="display:inline-block"; viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-building2-icon lucide-building-2"><path d="M10 12h4"/><path d="M10 8h4"/><path d="M14 21v-3a2 2 0 0 0-4 0v3"/><path d="M6 10H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2"/><path d="M6 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16"/></svg>`,
+    "District": `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"  style="display:inline-block"; viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-land-plot-icon lucide-land-plot"><path d="m12 8 6-3-6-3v10"/><path d="m8 11.99-5.5 3.14a1 1 0 0 0 0 1.74l8.5 4.86a2 2 0 0 0 2 0l8.5-4.86a1 1 0 0 0 0-1.74L16 12"/><path d="m6.49 12.85 11.02 6.3"/><path d="M17.51 12.85 6.5 19.15"/></svg>`,
+    "Airport": `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"  style="display:inline-block"; viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plane-icon lucide-plane"><path d="M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z"/></svg>`,
+    "Subway Station": `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"  style="display:inline-block"; viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-subway-icon lucide-subway"><path d="M12 22a10 10 0 0 0 10-10V8l-5-5H7L2 8v4a10 10 0 0 0 10 10Z"/><path d="M12 22V8"/><path d="M7 13h10"/><path d="M7 17h10"/></svg>`,
+    "Train Station": `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"  style="display:inline-block"; viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-train-icon lucide-train"><path d="M2 10h20"/><path d="M2 10a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-5Z"/><circle cx="7" cy="15" r="2"/><circle cx="17" cy="15" r="2"/></svg>`,
+    "Default": `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" style="display:inline-block";  viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>`
+};

package/dist/interfaces.d.ts

@@ -64,7 +64,7 @@ export interface ComponentClasses {
  * Controls browser autofill behavior for the input field.
  * @type {"on" | "off"}
  */
-export type AutoFill = "on" | "off" | string;
+export type AutoFill = "on" | "off" | "new-password";
 /**
  * Distance measurement units for displaying place distances.
  * @type {"km" | "miles"}
@@ -93,6 +93,28 @@ export interface ComponentOptions {
     debounce?: number;
     /** Clear the input field after selecting a place. @default true */
     clear_input?: boolean;
+    /** Format of the place data returned in onResponse callback. @default "json" */
+    response_type?: 'json' | 'object';
+    /** Show the place type in the autocomplete suggestions. @default false */
+    show_place_type?: boolean;
+}
+/**
+ * Photo Class
+ */
+export interface Photo {
+    authorAttributions?: {
+        displayName?: string;
+        uri?: string;
+        photoURI?: string;
+    }[];
+    flagContentURI?: string;
+    googleMapsURI?: string;
+    heightPx?: number;
+    widthPx?: number;
+    getURI(options?: {
+        maxHeight?: number;
+        maxWidth?: number;
+    }): string;
 }
 /**
  * Detailed information about a selected place returned by the Google Places API.
@@ -121,6 +143,17 @@ export interface PlaceResult {
         lat: number;
         lng: number;
     };
+    photos?: Photo[];
+    /**
+     * Returns the URL of the photo with the specified options.
+     * @param options - Options for the photo URL.
+     * @returns The URL of the photo.
+     */
+    getURI(options?: {
+        maxHeight?: number;
+        maxWidth?: number;
+    }): string;
+    toJSON(): PlaceResult;
     /** Additional place data fields as requested via fetchFields prop (e.g., displayName, types, photos). */
     [key: string]: unknown;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "places-autocomplete-svelte",
 	"license": "MIT",
-	"version": "2.2.23",
+	"version": "2.2.24",
 	"description": "A flexible, accessible, and secure Svelte component leveraging the Google Maps Places Autocomplete API (New). Winner of the Google Maps Platform Awards 2025, recognising excellence in Google Maps Platform development.",
 	"keywords": [
 		"svelte",
@@ -76,8 +76,8 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^7.0.0",
-		"@sveltejs/adapter-cloudflare": "^7.2.4",
-		"@sveltejs/kit": "^2.49.4",
+		"@sveltejs/adapter-cloudflare": "^7.2.6",
+		"@sveltejs/kit": "^2.50.2",
 		"@sveltejs/package": "^2.5.7",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
 		"@tailwindcss/postcss": "^4.1.18",
@@ -85,23 +85,24 @@
 		"@tailwindcss/vite": "^4.1.18",
 		"@types/eslint": "^9.6.1",
 		"@types/google.maps": "^3.58.1",
-		"@types/node": "^25.0.6",
-		"autoprefixer": "^10.4.23",
+		"@types/node": "^25.2.0",
+		"autoprefixer": "^10.4.24",
 		"eslint": "^9.39.2",
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-svelte": "^3.14.0",
-		"globals": "^17.0.0",
+		"globals": "^17.3.0",
 		"postcss": "^8.5.6",
-		"prettier": "^3.7.4",
+		"prettier": "^3.8.1",
 		"prettier-plugin-svelte": "^3.4.1",
-		"publint": "^0.3.16",
-		"svelte": "^5.46.1",
-		"svelte-check": "^4.3.5",
+		"publint": "^0.3.17",
+		"svelte": "^5.49.1",
+		"svelte-check": "^4.3.6",
 		"tailwindcss": "^4.1.18",
 		"tslib": "^2.8.1",
 		"typescript": "^5.9.3",
-		"typescript-eslint": "^8.52.0",
-		"vite": "^7.3.1"
+		"typescript-eslint": "^8.54.0",
+		"vite": "^7.3.1",
+		"vitest": "^4.0.18"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/PlaceAutocomplete.svelte.d.ts",