places-autocomplete-svelte 2.1.2 → 2.1.3

package/README.md

@@ -1,6 +1,7 @@
-# Places Autocomplete Svelte
+# Places (New) Autocomplete Svelte
+
+This Svelte component leverages the [Google Maps Places (New) Autocomplete API](https://developers.google.com/maps/documentation/javascript/place-autocomplete-overview) to provide a user-friendly way to search for and retrieve detailed address information within your [SvelteKit](https://kit.svelte.dev) applications. Default styling is provided using [Tailwind CSS](https://tailwindcss.com/), but you can fully customize the appearance with your own styles.
 
-This Svelte component leverages the [Google Maps Places Autocomplete API](https://developers.google.com/maps/documentation/javascript/place-autocomplete-overview) to provide a user-friendly way to search for and retrieve detailed address information within your [SvelteKit](https://kit.svelte.dev) applications.
 
 
 ## Features:
@@ -9,9 +10,11 @@ This Svelte component leverages the [Google Maps Places Autocomplete API](https:
 - **Autocomplete Suggestions:** Provides real-time address suggestions as the user types.
 - **Detailed Address Retrieval:** Retrieve comprehensive address information, including street address, city, region, postal code, and country.
 - **Country/Region Filtering:**  Refine search results by specifying countries or regions.
-- **Customizable:** Tailor the component's appearance (placeholder, language) and data retrieved (`fetchFields`).
+- **Customizable Appearance:** Tailor the component's look and feel with custom CSS classes, overriding the default Tailwind CSS styles.
+- **Flexible Data Retrieval:** Control the retrieved data using the `fetchFields` property.
 - **Accessible:** Supports keyboard navigation for selecting suggestions.
 
+
 ## Demo
 
 See a live demo of the component in action: [Demo](https://places-autocomplete-demo.pages.dev/)
@@ -60,27 +63,18 @@ let onResponse = (response) => {
 
 
 ## Customization
-
-- `countries`: Use countries property to refine search by region
 - `placeholder`: Use the placeholder property to customize the input field's placeholder text.
 - `autocomplete`: Use to disable the HTML `<input>` autocomplete attribute. 
 - `requestParams` (optional [AutocompleteRequest properties](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest) ):
 	- `language`: in which to return results. If ommited defaults to `en-GB`. [See details](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest.language)
 	- `region`: the [CLDR two-character format](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest). Defaults to `GB`. If the countries array is provided the coutries region overwrites the `region` value in `requestParams`.
 - `fetchFields`: Use to control the Place response. See [types](https://developers.google.com/maps/documentation/javascript/place-class-data-fields) for details. If omitted defaults to `['formattedAddress', 'addressComponents']`
+- `classes`: Customize the styling by providing an object with your CSS classes. This overrides the default Tailwind CSS classes. See the example in the "Basic Usage" section for the structure of the classes object and default class names.
 
 ```svelte
 <script>
 // ... other imports
 
-/**
- * @type array optional
- */
-let countries = [
-	{ name: 'United Kingdom', region: 'GB'},
-	{ name: 'United States', region: 'US' }
-	// ... more countries
-];
 /**
  * @type string optional
  */
@@ -106,6 +100,30 @@ const requestParams = {
 	region : 'GB',
 }
 
+/**
+ * @type object optional
+ * Component default Tailwind CSS classes
+ */
+const classes = {
+	section: '',
+	container: 'relative z-10 transform rounded-xl mt-4',
+	icon_container: 'pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3',
+	icon: '<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>',
+	input:
+		'border-1 w-full rounded-md border-0 shadow-sm bg-gray-100 px-4 py-2.5 pl-10 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 sm:text-sm',
+	kbd_container: 'absolute inset-y-0 right-0 flex py-1.5 pr-1.5',
+	kbd_escape:
+		'inline-flex items-center rounded border border-gray-300 px-1 font-sans text-xs text-gray-500 w-8 mr-1',
+	kbd_up:
+		'inline-flex items-center justify-center rounded border border-gray-300 px-1 font-sans text-xs text-gray-500 w-6',
+	kbd_down:
+		'inline-flex items-center rounded border border-gray-400 px-1 font-sans text-xs text-gray-500 justify-center w-6',
+	ul: 'absolute z-50 -mb-2 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm',
+	li: 'z-50 cursor-default select-none py-2 pl-4 text-gray-900 hover:bg-indigo-500 hover:text-white',
+	li_current: 'bg-indigo-500 text-white',
+	li_a: 'block w-full'
+},
+
 /**
  * @type array optional
  */
@@ -120,7 +138,7 @@ const fetchFields = ['formattedAddress', 'addressComponents'];
 	{placeholder} 
 	{autocompete}
 	{fetchFields}
-	bind:countries
+	{classes}
 />
 
 ```
@@ -132,11 +150,11 @@ const fetchFields = ['formattedAddress', 'addressComponents'];
 | `PUBLIC_GOOGLE_MAPS_API_KEY` | `String`                                     | Your Google Maps Places API Key.                                                                                                                                         | Yes       |                                               |
 | `onResponse`              | `CustomEvent` | Dispatched when a place is selected, containing the place details.                                                                                                     | Yes       |                                               |
 | `onError`                 | `CustomEvent`                      | Dispatched when an error occurs.                                                                                                                                        | No        |                                               |
-| `countries`              | `Array` | Array of countries/regions to filter results.                                                                                                                            | No        | `[]`                                       |
 | `placeholder`            | `String`                                     | Placeholder text for the input field.                                                                                                                                        | No        | `"Search..."`                             |
 | `autocomplete`           | `string`                                     | HTML `autocomplete` attribute for the input field. Set to "off" to disable browser autocomplete.                                                                        | No        | `"off"`                                    |
 | `requestParams`          | `Object`   | Object for additional request parameters (e.g., `types`, `bounds`). See [AutocompleteRequest](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest). | No        | `{}`                                       |
 | `fetchFields`            | `Array`                                | Array of place data fields to return. See [Supported Fields](https://developers.google.com/maps/documentation/javascript/reference/places-service#PlaceResult)                | No        | `['formattedAddress', 'addressComponents']` |
+| `classes`              | `Object` |  Object to override default Tailwind CSS classes applied to the component's elements (input, list, etc.). See the "Basic Usage" section for structure and default class names.   | No | *Default Tailwind classes* |
 
 
 ## Error Handling
@@ -172,6 +190,4 @@ Contributions are welcome! Please open an issue or submit a pull request on the
 
 ## License
 
-[MIT](LICENSE)
-
-
+[MIT](LICENSE)

package/dist/PlaceAutocomplete.svelte

@@ -2,10 +2,7 @@
 	import { onMount } from 'svelte';
 	import * as GMaps from '@googlemaps/js-api-loader';
 	import type { Props } from './interfaces.js';
-	import {
-		validateRequestParams,
-		requestParamsDefault,
-	} from './helpers.js';
+	import { validateRequestParams } from './helpers.js';
 	const { Loader } = GMaps;
 
 	let {
@@ -15,28 +12,55 @@
 		 */
 		PUBLIC_GOOGLE_MAPS_API_KEY,
 		fetchFields = $bindable(['formattedAddress', 'addressComponents']),
-		countries = $bindable([]),
 		placeholder = 'Search...',
 		autocompete = 'off',
+		classes = {
+			section: '',
+			container: 'relative z-10 transform rounded-xl mt-4',
+			icon_container: 'pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3',
+			icon: '<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg>',
+			input:
+				'border-1 w-full rounded-md border-0 shadow-sm bg-gray-100 px-4 py-2.5 pl-10 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 sm:text-sm',
+			kbd_container: 'absolute inset-y-0 right-0 flex py-1.5 pr-1.5',
+			kbd_escape:
+				'inline-flex items-center rounded border border-gray-300 px-1 font-sans text-xs text-gray-500 w-8 mr-1',
+			kbd_up:
+				'inline-flex items-center justify-center rounded border border-gray-300 px-1 font-sans text-xs text-gray-500 w-6',
+			kbd_down:
+				'inline-flex items-center rounded border border-gray-400 px-1 font-sans text-xs text-gray-500 justify-center w-6',
+			ul: 'absolute z-50 -mb-2 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm',
+			li: 'z-50 cursor-default select-none py-2 pl-4 text-gray-900 hover:bg-indigo-500 hover:text-white',
+			li_current: 'bg-indigo-500 text-white',
+			li_a: 'block w-full'
+		},
 		onResponse = $bindable((e: Event) => {}),
 		onError = $bindable((error: string) => {}),
 		requestParams
 	}: Props = $props();
 
-	// Check if countries are available
-	let hasCountries = countries.length > 0;
+	// set classes as state
+	let cl = $state(classes);
+
+    // reset keyboard classes
+    const resetKbdClasses = () => {
+        cl.kbd_down = classes.kbd_down;
+        cl.kbd_up = classes.kbd_up;
+    }	
+
+
 	// Local variables
 	let inputRef: HTMLInputElement;
 	let currentSuggestion = $state(-1);
-	let title: string = $state('');
 	let results: any[] = $state([]);
 	let loader: GMaps.Loader;
 	let placesApi: { [key: string]: any } = {};
 	//https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data
 	// validate and merge requestParams with requestParamsDefault
-	let request = $state(validateRequestParams(Object.assign(requestParamsDefault, requestParams)));
-
+	//let request = $state(validateRequestParams(Object.assign(requestParamsDefault, requestParams)));
+	requestParams = validateRequestParams(requestParams);
+	let request = $state(requestParams);
 
+	// clear result when input is empty
 	$effect(() => {
 		if (request.input == '') {
 			results = [];
@@ -62,7 +86,7 @@
 	): Promise<void> => {
 		const target = event.currentTarget as HTMLInputElement;
 		if (target?.value == '') {
-			title = '';
+			//title = '';
 			request.input = '';
 			results = [];
 			return;
@@ -130,7 +154,7 @@
 			request.sessionToken = new placesApi.AutocompleteSessionToken();
 		} catch (e: any) {
 			onError((e.name || 'An error occurred') + ' - ' + (e.message || 'error fetch token'));
-		}		
+		}
 	};
 
 	/**
@@ -165,8 +189,12 @@
 	function onKeyDown(e: KeyboardEvent) {
 		if (e.key === 'ArrowDown') {
 			currentSuggestion = Math.min(currentSuggestion + 1, results.length - 1);
+			resetKbdClasses();
+            cl.kbd_down += ' bg-indigo-500 text-white';
 		} else if (e.key === 'ArrowUp') {
 			currentSuggestion = Math.max(currentSuggestion - 1, 0);
+			resetKbdClasses();
+            cl.kbd_up += ' bg-indigo-500 text-white';
 		} else if (e.key === 'Enter') {
 			e.preventDefault();
 			if (currentSuggestion >= 0) {
@@ -176,660 +204,76 @@
 			// reset srarch input and results
 			reset();
 		}
+
+		setTimeout(() => {
+            resetKbdClasses();
+        }, 300);
 	}
 </script>
 
 <svelte:window onkeydown={onKeyDown} />
 
-<section class="my-10">
-	<div class="grid grid-cols-1 lg:grid-cols-6 gap-x-4">
-		<div class:lg:col-span-4={hasCountries} class:lg:col-span-6={!hasCountries}>
-			<label class="mt-1 text-sm leading-6 text-gray-600" for="search"
-				>Start typing your address</label
-			>
-			<div class="relative z-10 transform rounded-xl mt-4">
-				<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="w-5 h-5"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						stroke-width="2"
-						stroke-linecap="round"
-						stroke-linejoin="round"><circle cx="11" cy="11" r="8" /><path d="m21 21-4.3-4.3" /></svg
-					>
-				</div>
-
-				<input
-					type="text"
-					name="search"
-					bind:this={inputRef}
-					class="border-1 w-full rounded-md border-0 shadow-sm bg-gray-100 px-4 py-2.5 pl-10 pr-20 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 sm:text-sm"
-					{placeholder}
-					autocomplete={autocompete}
-					aria-controls="options"
-					aria-autocomplete="list"
-					aria-owns="options"
-					aria-labelledby="search"
-					aria-label="Search"
-					aria-haspopup="listbox"
-					bind:value={request.input}
-					oninput={makeAcRequest}
-				/>
-
-				{#if results.length > 0}
-					<div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
-						<kbd
-							class="inline-flex items-center rounded border border-gray-300 px-1 font-sans text-xs text-gray-500 w-8 mr-1"
-							>Esc</kbd
-						>
-						<kbd
-							class="inline-flex items-center justify-center rounded border border-gray-300 px-1 font-sans text-xs text-gray-500 w-6"
-							>&uArr;</kbd
-						>
-						<kbd
-							class="inline-flex items-center rounded border border-gray-400 px-1 font-sans text-xs text-gray-500 justify-center w-6"
-							>&dArr;</kbd
-						>
-					</div>
-					<ul
-						class="absolute z-50 -mb-2 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
-						id="options"
-					>
-						{#each results as place, i}
-							<li
-								class="z-50 cursor-default select-none py-2 pl-4 text-gray-900 hover:bg-indigo-500 hover:text-white"
-								class:bg-indigo-500={i === currentSuggestion}
-								class:bg-white={i !== currentSuggestion}
-								class:text-white={i === currentSuggestion}
-								id="option-{i + 1}"
-							>
-								<!-- svelte-ignore a11y_invalid_attribute -->
-								<a
-									href="javascript:void(0)"
-									class="block w-full"
-									tabindex={i + 1}
-									onclick={() => onPlaceSelected(place.to_pace)}
-								>
-									{place.text}
-								</a>
-							</li>
-						{/each}
-					</ul>
-				{/if}
-			</div>
+<section class="{classes?.section}">
+	<div class="{classes.container}">
+		{#if classes.icon}
+		<div class="{classes.icon_container}">
+            {@html classes.icon}
 		</div>
+        {/if}
 
-		<div class:lg:col-span-2={hasCountries} class:hidden={!hasCountries}>
-			<label class="mt-1 text-sm leading-6 text-gray-600" for="search">Address country</label>
-			<div class="flex items-center mt-4">
-				<label for="country" class="sr-only">Country</label>
-				<select
-					id="country"
-					name="country"
-					class="h-10 w-full rounded-md border-0 bg-transparent py-0 pl-2 pr-7 text-gray-500 focus:ring-2 ring-1 ring-inset ring-gray-300 focus:ring-inset focus:ring-indigo-600 sm:text-sm"
-					bind:value={request.region}
-				>
-					{#each countries as country}
-						<option value={country.region}>{country.name}</option>
-					{/each}
-				</select>
-			</div>
+		<input
+			type="text"
+			name="search"
+			bind:this={inputRef}
+			class="{classes.input}"
+			{placeholder}
+			autocomplete={autocompete}
+			aria-controls="options"
+			aria-autocomplete="list"
+			aria-owns="options"
+			aria-labelledby="search"
+			aria-label="Search"
+			aria-haspopup="listbox"
+			bind:value={request.input}
+			oninput={makeAcRequest}
+		/>
+
+		{#if results.length > 0}
+		<div class="{classes.kbd_container}">
+			<kbd
+				class="{classes.kbd_escape}"
+				>Esc</kbd
+			>
+			<kbd
+				class="{cl.kbd_up}"
+				>&uArr;</kbd
+			>
+			<kbd
+				class="{cl.kbd_down}"  
+				>&dArr;</kbd
+			>
 		</div>
+			<ul
+				class="{classes.ul}"
+				id="options"
+			>
+				{#each results as place, i}
+					<li
+						class={[ classes.li, i === currentSuggestion && classes.li_current ]}
+						id="option-{i + 1}"
+					>
+						<!-- svelte-ignore a11y_invalid_attribute -->
+						<a
+							href="javascript:void(0)"
+							class="{classes?.li_a}"
+							tabindex={i + 1}
+							onclick={() => onPlaceSelected(place.to_pace)}
+						>
+							{place.text}
+						</a>
+					</li>
+				{/each}
+			</ul>
+		{/if}
 	</div>
 </section>
-
-<style>
-	input,
-	select,
-	ul {
-		margin: 0;
-		padding: 0;
-	}
-	.absolute,
-	.sr-only {
-		position: absolute;
-	}
-	.block,
-	svg {
-		display: block;
-	}
-	*,
-	.border-gray-300 {
-		--tw-border-opacity: 1;
-	}
-	.text-gray-500,
-	.text-gray-900,
-	.text-white {
-		--tw-text-opacity: 1;
-	}
-	*,
-	:after,
-	:before {
-		box-sizing: border-box;
-		border: 0 solid #e5e7eb;
-		--tw-border-spacing-x: 0;
-		--tw-border-spacing-y: 0;
-		--tw-translate-x: 0;
-		--tw-translate-y: 0;
-		--tw-rotate: 0;
-		--tw-skew-x: 0;
-		--tw-skew-y: 0;
-		--tw-scale-x: 1;
-		--tw-scale-y: 1;
-		--tw-pan-x: ;
-		--tw-pan-y: ;
-		--tw-pinch-zoom: ;
-		--tw-scroll-snap-strictness: proximity;
-		--tw-gradient-from-position: ;
-		--tw-gradient-via-position: ;
-		--tw-gradient-to-position: ;
-		--tw-ordinal: ;
-		--tw-slashed-zero: ;
-		--tw-numeric-figure: ;
-		--tw-numeric-spacing: ;
-		--tw-numeric-fraction: ;
-		--tw-ring-inset: ;
-		--tw-ring-offset-width: 0px;
-		--tw-ring-offset-color: #fff;
-		--tw-ring-color: rgb(59 130 246 / 0.5);
-		--tw-ring-offset-shadow: 0 0 #0000;
-		--tw-ring-shadow: 0 0 #0000;
-		--tw-shadow: 0 0 #0000;
-		--tw-shadow-colored: 0 0 #0000;
-		--tw-blur: ;
-		--tw-brightness: ;
-		--tw-contrast: ;
-		--tw-grayscale: ;
-		--tw-hue-rotate: ;
-		--tw-invert: ;
-		--tw-saturate: ;
-		--tw-sepia: ;
-		--tw-drop-shadow: ;
-		--tw-backdrop-blur: ;
-		--tw-backdrop-brightness: ;
-		--tw-backdrop-contrast: ;
-		--tw-backdrop-grayscale: ;
-		--tw-backdrop-hue-rotate: ;
-		--tw-backdrop-invert: ;
-		--tw-backdrop-opacity: ;
-		--tw-backdrop-saturate: ;
-		--tw-backdrop-sepia: ;
-		--tw-contain-size: ;
-		--tw-contain-layout: ;
-		--tw-contain-paint: ;
-		--tw-contain-style: ;
-	}
-	:after,
-	:before {
-		--tw-content: '';
-	}
-	:host,
-	section {
-		line-height: 1.5;
-		-webkit-text-size-adjust: 100%;
-		-moz-tab-size: 4;
-		-o-tab-size: 4;
-		tab-size: 4;
-		font-family:
-			system-ui,
-			sans-serif,
-			apple color emoji,
-			segoe ui emoji,
-			Segoe UI Symbol,
-			noto color emoji;
-		font-feature-settings: normal;
-		font-variation-settings: normal;
-		-webkit-tap-highlight-color: transparent;
-	}
-	kbd {
-		font-family:
-			ui-monospace,
-			SFMono-Regular,
-			Menlo,
-			Monaco,
-			Consolas,
-			Liberation Mono,
-			Courier New,
-			monospace;
-		font-feature-settings: normal;
-		font-variation-settings: normal;
-		font-size: 1em;
-	}
-	input,
-	select {
-		font-family: inherit;
-		font-feature-settings: inherit;
-		font-variation-settings: inherit;
-		font-size: 100%;
-		font-weight: inherit;
-		line-height: inherit;
-		letter-spacing: inherit;
-		color: inherit;
-	}
-	:-moz-focusring {
-		outline: auto;
-	}
-	:-moz-ui-invalid {
-		box-shadow: none;
-	}
-	::-webkit-inner-spin-button,
-	::-webkit-outer-spin-button {
-		height: auto;
-	}
-	::-webkit-search-decoration {
-		-webkit-appearance: none;
-	}
-	::-webkit-file-upload-button {
-		-webkit-appearance: button;
-		font: inherit;
-	}
-	ul {
-		list-style: none;
-	}
-	.cursor-default,
-	:disabled {
-		cursor: default;
-	}
-	svg {
-		vertical-align: middle;
-	}
-	[type='text'],
-	input:where(:not([type])),
-	select {
-		-webkit-appearance: none;
-		-moz-appearance: none;
-		appearance: none;
-		background-color: #fff;
-		border-color: #6b7280;
-		border-width: 1px;
-		border-radius: 0;
-		padding: 0.5rem 0.75rem;
-		font-size: 1rem;
-		line-height: 1.5rem;
-		--tw-shadow: 0 0 #0000;
-	}
-	[type='text']:focus,
-	input:where(:not([type])):focus,
-	select:focus {
-		outline: transparent solid 2px;
-		outline-offset: 2px;
-		--tw-ring-inset: var(--tw-empty,);
-		--tw-ring-offset-width: 0px;
-		--tw-ring-offset-color: #fff;
-		--tw-ring-color: #2563eb;
-		--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
-			var(--tw-ring-offset-color);
-		--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width))
-			var(--tw-ring-color);
-		box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-		border-color: #2563eb;
-	}
-	input::-moz-placeholder {
-		color: #6b7280;
-		opacity: 1;
-	}
-	input::placeholder {
-		color: #6b7280;
-		opacity: 1;
-	}
-	select {
-		text-transform: none;
-		background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZpbGw9J25vbmUnIHZpZXdCb3g9JzAgMCAyMCAyMCc+PHBhdGggc3Ryb2tlPScjNmI3MjgwJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnIHN0cm9rZS13aWR0aD0nMS41JyBkPSdNNiA4bDQgNCA0LTQnLz48L3N2Zz4=);
-		background-position: right 0.5rem center;
-		background-repeat: no-repeat;
-		background-size: 1.5em 1.5em;
-		padding-right: 2.5rem;
-		-webkit-print-color-adjust: exact;
-		print-color-adjust: exact;
-	}
-	:root {
-		--background: 0 0% 100%;
-		--foreground: 222.2 84% 4.9%;
-		--muted: 210 40% 96.1%;
-		--muted-foreground: 215.4 16.3% 46.9%;
-		--popover: 0 0% 100%;
-		--popover-foreground: 222.2 84% 4.9%;
-		--card: 0 0% 100%;
-		--card-foreground: 222.2 84% 4.9%;
-		--border: 214.3 31.8% 91.4%;
-		--input: 214.3 31.8% 91.4%;
-		--primary: 222.2 47.4% 11.2%;
-		--primary-foreground: 210 40% 98%;
-		--secondary: 210 40% 96.1%;
-		--secondary-foreground: 222.2 47.4% 11.2%;
-		--accent: 210 40% 96.1%;
-		--accent-foreground: 222.2 47.4% 11.2%;
-		--destructive: 0 72.2% 50.6%;
-		--destructive-foreground: 210 40% 98%;
-		--ring: 222.2 84% 4.9%;
-		--radius: 0.5rem;
-	}
-	* {
-		border-color: hsl(var(--border) / var(--tw-border-opacity));
-	}
-	::backdrop {
-		--tw-border-spacing-x: 0;
-		--tw-border-spacing-y: 0;
-		--tw-translate-x: 0;
-		--tw-translate-y: 0;
-		--tw-rotate: 0;
-		--tw-skew-x: 0;
-		--tw-skew-y: 0;
-		--tw-scale-x: 1;
-		--tw-scale-y: 1;
-		--tw-pan-x: ;
-		--tw-pan-y: ;
-		--tw-pinch-zoom: ;
-		--tw-scroll-snap-strictness: proximity;
-		--tw-gradient-from-position: ;
-		--tw-gradient-via-position: ;
-		--tw-gradient-to-position: ;
-		--tw-ordinal: ;
-		--tw-slashed-zero: ;
-		--tw-numeric-figure: ;
-		--tw-numeric-spacing: ;
-		--tw-numeric-fraction: ;
-		--tw-ring-inset: ;
-		--tw-ring-offset-width: 0px;
-		--tw-ring-offset-color: #fff;
-		--tw-ring-color: rgb(59 130 246 / 0.5);
-		--tw-ring-offset-shadow: 0 0 #0000;
-		--tw-ring-shadow: 0 0 #0000;
-		--tw-shadow: 0 0 #0000;
-		--tw-shadow-colored: 0 0 #0000;
-		--tw-blur: ;
-		--tw-brightness: ;
-		--tw-contrast: ;
-		--tw-grayscale: ;
-		--tw-hue-rotate: ;
-		--tw-invert: ;
-		--tw-saturate: ;
-		--tw-sepia: ;
-		--tw-drop-shadow: ;
-		--tw-backdrop-blur: ;
-		--tw-backdrop-brightness: ;
-		--tw-backdrop-contrast: ;
-		--tw-backdrop-grayscale: ;
-		--tw-backdrop-hue-rotate: ;
-		--tw-backdrop-invert: ;
-		--tw-backdrop-opacity: ;
-		--tw-backdrop-saturate: ;
-		--tw-backdrop-sepia: ;
-		--tw-contain-size: ;
-		--tw-contain-layout: ;
-		--tw-contain-paint: ;
-		--tw-contain-style: ;
-	}
-	.sr-only {
-		width: 1px;
-		height: 1px;
-		padding: 0;
-		margin: -1px;
-		overflow: hidden;
-		clip: rect(0, 0, 0, 0);
-		white-space: nowrap;
-		border-width: 0;
-	}
-	.pointer-events-none {
-		pointer-events: none;
-	}
-	.relative {
-		position: relative;
-	}
-	.inset-y-0 {
-		top: 0;
-		bottom: 0;
-	}
-	.left-0 {
-		left: 0;
-	}
-	.right-0 {
-		right: 0;
-	}
-	.z-50 {
-		z-index: 50;
-	}
-	.-mb-2 {
-		margin-bottom: -0.5rem;
-	}
-	.mr-1 {
-		margin-right: 0.25rem;
-	}
-	.mt-4 {
-		margin-top: 1rem;
-	}
-	.flex {
-		display: flex;
-	}
-	.inline-flex {
-		display: inline-flex;
-	}
-	.hidden {
-		display: none;
-	}
-	.h-10 {
-		height: 2.5rem;
-	}
-	.h-5 {
-		height: 1.25rem;
-	}
-	.max-h-60 {
-		max-height: 15rem;
-	}
-	.w-5 {
-		width: 1.25rem;
-	}
-	.w-6 {
-		width: 1.5rem;
-	}
-	.w-8 {
-		width: 2rem;
-	}
-	.w-full {
-		width: 100%;
-	}
-	.transform {
-		transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-			skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
-			scaleY(var(--tw-scale-y));
-	}
-	.select-none {
-		-webkit-user-select: none;
-		-moz-user-select: none;
-		user-select: none;
-	}
-	.grid-cols-1 {
-		grid-template-columns: repeat(1, minmax(0, 1fr));
-		grid-template-columns: 1fr;
-	}
-	.items-center {
-		align-items: center;
-	}
-	.gap-x-4 {
-		-moz-column-gap: 1rem;
-		column-gap: 1rem;
-		row-gap: 1rem;
-	}
-	.rounded-md {
-		border-radius: calc(var(--radius) - 2px);
-	}
-	.rounded-xl {
-		border-radius: 0.75rem;
-	}
-	.border {
-		border-width: 1px;
-	}
-	.border-gray-300 {
-		border-color: rgb(209 213 219 / var(--tw-border-opacity));
-	}
-	.bg-gray-100 {
-		--tw-bg-opacity: 1;
-		background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-	}
-	.bg-indigo-500,
-	.hover\:bg-indigo-500:hover {
-		--tw-bg-opacity: 1;
-		background-color: rgb(99 102 241 / var(--tw-bg-opacity));
-	}
-	.bg-transparent {
-		background-color: transparent;
-	}
-	.bg-white {
-		--tw-bg-opacity: 1;
-		background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-	}
-	.px-1 {
-		padding-left: 0.25rem;
-		padding-right: 0.25rem;
-	}
-	.px-4 {
-		padding-left: 1rem;
-		padding-right: 1rem;
-	}
-	.py-0 {
-		padding-top: 0;
-		padding-bottom: 0;
-	}
-	.py-1 {
-		padding-top: 0.25rem;
-		padding-bottom: 0.25rem;
-	}
-	.py-1\.5 {
-		padding-top: 0.375rem;
-		padding-bottom: 0.375rem;
-	}
-	.py-2 {
-		padding-top: 0.5rem;
-		padding-bottom: 0.5rem;
-	}
-	.py-2\.5 {
-		padding-top: 0.625rem;
-		padding-bottom: 0.625rem;
-	}
-	.pl-10 {
-		padding-left: 2.5rem;
-	}
-	.pl-2 {
-		padding-left: 0.5rem;
-	}
-	.pl-3 {
-		padding-left: 0.75rem;
-	}
-	.pl-4 {
-		padding-left: 1rem;
-	}
-	.pr-1\.5 {
-		padding-right: 0.375rem;
-	}
-	.pr-20 {
-		padding-right: 5rem;
-	}
-	.pr-7 {
-		padding-right: 1.75rem;
-	}
-	.text-base {
-		font-size: 1rem;
-		line-height: 1.5rem;
-	}
-	.text-sm {
-		font-size: 0.875rem;
-		line-height: 1.25rem;
-	}
-	.text-xs {
-		font-size: 0.75rem;
-		line-height: 1rem;
-	}
-	.text-gray-500 {
-		color: rgb(107 114 128 / var(--tw-text-opacity));
-	}
-	.text-gray-900 {
-		color: rgb(17 24 39 / var(--tw-text-opacity));
-	}
-	.text-white {
-		color: rgb(255 255 255 / var(--tw-text-opacity));
-	}
-	.shadow-lg {
-		--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-		--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
-			0 4px 6px -4px var(--tw-shadow-color);
-		box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
-			var(--tw-shadow);
-	}
-	.focus\:ring-2:focus,
-	.ring-1 {
-		--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
-			var(--tw-ring-offset-color);
-		box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-	}
-	.ring-1 {
-		--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width))
-			var(--tw-ring-color);
-	}
-	.ring-black {
-		--tw-ring-opacity: 1;
-		--tw-ring-color: rgb(0 0 0 / var(--tw-ring-opacity));
-	}
-	.focus\:outline-none:focus {
-		outline: transparent solid 2px;
-		outline-offset: 2px;
-	}
-	.focus\:ring-2:focus {
-		--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width))
-			var(--tw-ring-color);
-	}
-	.focus\:ring-inset:focus {
-		--tw-ring-inset: inset;
-	}
-	@media (min-width: 640px) {
-		.sm\:text-sm {
-			font-size: 0.875rem;
-			line-height: 1.25rem;
-		}
-	}
-	@media (min-width: 1024px) {
-		.lg\:col-span-2 {
-			grid-column: span 2 / span 2;
-		}
-	}
-	@keyframes swipe-out {
-		0% {
-			transform: translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount)));
-			opacity: 1;
-		}
-		to {
-			transform: translateY(
-				calc(var(--lift) * var(--offset) + var(--swipe-amount) + var(--lift) * -100%)
-			);
-			opacity: 0;
-		}
-	}
-	.grid {
-		display: grid;
-	}
-	@media (min-width: 768px) {
-		.lg\:grid-cols-6 {
-			grid-template-columns: repeat(6, 1fr);
-		}
-		.lg\:col-span-6 {
-			grid-column-start: span 6;
-		}
-		.lg\:col-span-4 {
-			grid-column-start: span 4;
-		}
-		.lg\:col-span-2 {
-			grid-column-start: span 2;
-		}
-	}
-	.my-10 {
-		margin-top: 2.5rem;
-		margin-bottom: 2.5rem;
-	}
-	.justify-center {
-		justify-content: center;
-	}
-	.hover\:text-white:hover {
-		color: rgb(255 255 255 / var(--tw-text-opacity));
-	}
-</style>

package/dist/PlaceAutocomplete.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { Props } from './interfaces.js';
-declare const PlaceAutocomplete: import("svelte").Component<Props, {}, "fetchFields" | "countries" | "onResponse" | "onError">;
+declare const PlaceAutocomplete: import("svelte").Component<Props, {}, "fetchFields" | "onResponse" | "onError">;
 type PlaceAutocomplete = ReturnType<typeof PlaceAutocomplete>;
 export default PlaceAutocomplete;

package/dist/helpers.js

@@ -114,6 +114,8 @@ export const validateRequestParams = (requestParams) => {
             delete requestParams[key];
         }
     }
+    // merge requestParams with requestParamsDefault
+    requestParams = Object.assign(requestParamsDefault, requestParams);
     // Reset sessionToken to empty string if passed to the component
     if (requestParams.sessionToken) {
         requestParams.sessionToken = String('');

package/dist/interfaces.d.ts

@@ -22,6 +22,21 @@ export interface RequestParams {
     region?: string;
     sessionToken?: string;
 }
+export interface ComponentClasses {
+    section?: string;
+    container?: string;
+    icon_container?: string;
+    icon?: string;
+    input?: string;
+    kbd_container?: string;
+    kbd_escape?: string;
+    kbd_up?: string;
+    kbd_down?: string;
+    ul?: string;
+    li?: string;
+    li_current?: string;
+    li_a?: string;
+}
 export interface Props {
     PUBLIC_GOOGLE_MAPS_API_KEY: string;
     fetchFields?: string[];
@@ -30,6 +45,7 @@ export interface Props {
         region: string;
     }[];
     placeholder?: string;
+    classes?: ComponentClasses;
     autocompete?: AutoFill;
     requestParams: RequestParams;
     onResponse: (e: Event) => void;

package/package.json

@@ -1,8 +1,8 @@
 {
 	"name": "places-autocomplete-svelte",
 	"license": "MIT",
-	"version": "2.1.2",
-	"description": "A lightweight and customizable Svelte component for easy integration of Google Maps Places Autocomplete (New API) in your Svelte/SvelteKit applications. Provides accessible autocomplete suggestions and detailed address retrieval.",
+	"version": "2.1.3",
+	"description": "A lightweight and customizable Svelte component for easy integration of Google Maps Places (New) Autocomplete in your Svelte/SvelteKit applications. Provides accessible autocomplete suggestions and detailed address retrieval.",
 	"keywords": [
 		"svelte",
 		"sveltekit",
@@ -68,28 +68,28 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.3.1",
-		"@sveltejs/adapter-cloudflare": "^4.8.0",
-		"@sveltejs/kit": "^2.9.0",
+		"@sveltejs/adapter-cloudflare": "^5.0.0",
+		"@sveltejs/kit": "^2.15.1",
 		"@sveltejs/package": "^2.3.7",
-		"@sveltejs/vite-plugin-svelte": "^4.0.1",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@tailwindcss/typography": "^0.5.15",
 		"@types/eslint": "^9.6.1",
 		"autoprefixer": "^10.4.20",
-		"eslint": "^9.16.0",
+		"eslint": "^9.17.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.46.1",
-		"globals": "^15.12.0",
+		"globals": "^15.14.0",
 		"postcss": "^8.4.49",
-		"prettier": "^3.4.1",
+		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.2",
 		"publint": "^0.2.12",
-		"svelte": "^5.2.11",
-		"svelte-check": "^4.1.0",
-		"tailwindcss": "^3.4.15",
+		"svelte": "^5.16.0",
+		"svelte-check": "^4.1.1",
+		"tailwindcss": "^3.4.17",
 		"tslib": "^2.8.1",
 		"typescript": "^5.7.2",
-		"typescript-eslint": "^8.16.0",
-		"vite": "^5.4.11"
+		"typescript-eslint": "^8.19.0",
+		"vite": "^6.0.6"
 	},
 	"svelte": "./dist/index.js",
 	"types": "./dist/PlaceAutocomplete.svelte.d.ts",