places-autocomplete-js 1.1.3 → 1.1.5

package/README.md

@@ -130,67 +130,47 @@ Passed within the main configuration object under the `options` key.
 | `clear_input`        | `boolean` | `true`      | If `true` (default), clears the input field after a suggestion is selected. If `false`, the input field retains the `formattedAddress` of the selected place.                                      |
 
 
-### API Request Parameters (`requestParams`)
+### Styling
 
-Passed within the main configuration object under the `requestParams` key. These parameters are sent to the Google Places Autocomplete API. Refer to the [AutocompleteRequest documentation](https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompleteRequest) for all available options.
+The component is built with flexibility in mind and can be styled in a couple of ways. The default appearance is based on Tailwind CSS, but you are not required to use Tailwind in your project.
 
-**Common `requestParams`:**
+#### 1. Using the Pre-built CSS File
 
-*   `input`: (string) Automatically handled by the library based on user typing.
-*   `language`: (string) The language code, indicating in which language the results should be returned, if possible.
-*   `region`: (string) The region code, specified as a ccTLD ("top-level domain") two-character value.
-*   `includedRegionCodes`: (string[]) An array of up to 5 CLDR region codes to limit results to.
-*   `locationBias`: (google.maps.places.LocationBias)
-*   `locationRestriction`: (google.maps.places.LocationRestriction)
-*   `origin`: (google.maps.LatLngLiteral) The origin point from which to calculate straight-line distances to predictions (if `options.distance` is true).
-*   `sessionToken`: Automatically managed by this library.
+A standalone CSS file is included in the package (`dist/places-autocomplete-js.css`). This file contains all the necessary styles for the component to look and work correctly out-of-the-box.
 
-**Example `requestParams`:**
+You can include it in your project in one of two ways:
 
-```javascript
-const autocomplete = new PlacesAutocomplete({
-  // ... other config
-  requestParams: {
-    language: 'fr',
-    region: 'ca',
-    includedRegionCodes: ['ca'],
-    origin: { lat: 45.5019, lng: -73.5674 } // Montreal
-  }
-});
-```
- 
-### Working with Fetch Fields (`fetchFields`)
-The `fetchFields` option allows you to specify which fields of place data you want to retrieve when a user selects a suggestion. This can help reduce API costs by only fetching the necessary information. See the [Place Class Data Fields](https://developers.google.com/maps/documentation/javascript/place-class-data-fields) for all available fields.
-By default, the library fetches `['formattedAddress', 'addressComponents']`, but you can customise this based on your needs.
+**A) Import into your JavaScript/TypeScript:**
 
-**Example `fetchFields`:**
+If you are using a bundler like Vite, Webpack, or Parcel, you can import the CSS file directly into your main JavaScript file.
 
 ```javascript
-const autocomplete = new PlacesAutocomplete({
-  // ... other config
-  fetchFields: ['formattedAddress', 'addressComponents', 'displayName'] // Fetch additional fields as needed
-});
+import { PlacesAutocomplete } from 'places-autocomplete-js';
+import 'places-autocomplete-js/dist/places-autocomplete-js.css'; // <-- Add this line
 
-// Or
-autocomplete.setFetchFields({
-  fetchFields: ['formattedAddress', 'addressComponents', 'displayName'] // Update fetch fields dynamically
+document.addEventListener('DOMContentLoaded', () => {
+  const autocomplete = new PlacesAutocomplete({
+    // ... your configuration
+  });
 });
 ```
 
-### Retain Input Value After Selection
-To keep the selected address visible in the input field after a suggestion is chosen. Set the `options.clear_input = false`.
+**B) Link in your HTML file:**
 
-```javascript
-const autocomplete = new PlacesAutocomplete({
-  // ... other config
-  options: {
-    clear_input: false // Retain the input value after selection
-  }
-});
-```
+Alternatively, you can link the stylesheet directly in the `<head>` of your HTML file. Make sure the path correctly points to the file within your `node_modules` directory, or copy the file to your public assets folder during your build process.
 
+```html
+<head>
+  <!-- ... other head elements -->
+  <link rel="stylesheet" href="node_modules/places-autocomplete-js/dist/places-autocomplete-js.css">
+</head>
+<body>
+  <div id="autocomplete-container"></div>
+  <!-- ... your scripts -->
+</body>
+```
 
-### Styling (`options.classes`)
+### CSS Classes (`options.classes`)
 
 You can customise the appearance of the component by providing your own CSS classes via the `options.classes` object. The library uses a default set of classes (many are Tailwind CSS utility classes but can be entirely replaced).
 
@@ -251,6 +231,68 @@ Then, style these classes in your CSS:
 /* etc. */
 ```
 
+### API Request Parameters (`requestParams`)
+
+Passed within the main configuration object under the `requestParams` key. These parameters are sent to the Google Places Autocomplete API. Refer to the [AutocompleteRequest documentation](https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompleteRequest) for all available options.
+
+**Common `requestParams`:**
+
+*   `input`: (string) Automatically handled by the library based on user typing.
+*   `language`: (string) The language code, indicating in which language the results should be returned, if possible.
+*   `region`: (string) The region code, specified as a ccTLD ("top-level domain") two-character value.
+*   `includedRegionCodes`: (string[]) An array of up to 5 CLDR region codes to limit results to.
+*   `locationBias`: (google.maps.places.LocationBias)
+*   `locationRestriction`: (google.maps.places.LocationRestriction)
+*   `origin`: (google.maps.LatLngLiteral) The origin point from which to calculate straight-line distances to predictions (if `options.distance` is true).
+*   `sessionToken`: Automatically managed by this library.
+
+**Example `requestParams`:**
+
+```javascript
+const autocomplete = new PlacesAutocomplete({
+  // ... other config
+  requestParams: {
+    language: 'fr',
+    region: 'ca',
+    includedRegionCodes: ['ca'],
+    origin: { lat: 45.5019, lng: -73.5674 } // Montreal
+  }
+});
+```
+ 
+### Working with Fetch Fields (`fetchFields`)
+The `fetchFields` option allows you to specify which fields of place data you want to retrieve when a user selects a suggestion. This can help reduce API costs by only fetching the necessary information. See the [Place Class Data Fields](https://developers.google.com/maps/documentation/javascript/place-class-data-fields) for all available fields.
+By default, the library fetches `['formattedAddress', 'addressComponents']`, but you can customise this based on your needs.
+
+**Example `fetchFields`:**
+
+```javascript
+const autocomplete = new PlacesAutocomplete({
+  // ... other config
+  fetchFields: ['formattedAddress', 'addressComponents', 'displayName'] // Fetch additional fields as needed
+});
+
+// Or
+autocomplete.setFetchFields({
+  fetchFields: ['formattedAddress', 'addressComponents', 'displayName'] // Update fetch fields dynamically
+});
+```
+
+### Retain Input Value After Selection
+To keep the selected address visible in the input field after a suggestion is chosen. Set the `options.clear_input = false`.
+
+```javascript
+const autocomplete = new PlacesAutocomplete({
+  // ... other config
+  options: {
+    clear_input: false // Retain the input value after selection
+  }
+});
+```
+
+
+
+
 ## Public Methods
 
 Instances of `PlacesAutocomplete` have the following public methods:

package/dist/places-autocomplete-js.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Inter:wght@400&display=swap";/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-divide-y-reverse:0;--tw-leading:initial;--tw-font-weight:initial}}}*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}:root,:host{--font-inter:Inter,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-50:#fef2f2;--color-red-300:#fca5a5;--color-red-400:#f87171;--color-red-500:#ef4444;--color-red-600:#dc2626;--color-red-700:#b91c1c;--color-red-800:#991b1b;--color-green-50:#f0fdf4;--color-green-100:#dcfce7;--color-green-200:#bbf7d0;--color-green-300:#86efac;--color-green-400:#4ade80;--color-green-800:#166534;--color-emerald-300:#6ee7b7;--color-emerald-400:#34d399;--color-emerald-500:#10b981;--color-emerald-600:#059669;--color-emerald-700:#047857;--color-sky-300:#7dd3fc;--color-sky-400:#38bdf8;--color-sky-500:#0ea5e9;--color-sky-600:#0284c7;--color-blue-500:#3b82f6;--color-blue-600:#2563eb;--color-indigo-400:#818cf8;--color-indigo-500:#6366f1;--color-indigo-600:#4f46e5;--color-violet-300:#c4b5fd;--color-pink-300:#f9a8d4;--color-slate-50:oklch(98.4% .003 247.858);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-300:oklch(86.9% .022 252.894);--color-slate-400:oklch(70.4% .04 256.788);--color-slate-500:oklch(55.4% .046 257.417);--color-slate-600:oklch(44.6% .043 257.281);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-gray-50:#f9fafb;--color-gray-100:#f4f5f7;--color-gray-200:#e5e7eb;--color-gray-300:#d2d6dc;--color-gray-400:#9fa6b2;--color-gray-500:#6b7280;--color-gray-600:#4b5563;--color-gray-700:#374151;--color-gray-800:#1f2937;--color-gray-900:#111827;--color-zinc-50:#f9fafb;--color-zinc-100:#f4f5f7;--color-zinc-200:#e5e7eb;--color-zinc-300:#d2d6dc;--color-zinc-400:#9fa6b2;--color-zinc-500:#6b7280;--color-zinc-600:#4b5563;--color-zinc-700:#374151;--color-zinc-800:#1f2937;--color-zinc-900:#111827;--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-lg:33rem;--container-2xl:40rem;--text-xs:.8125rem;--text-xs--line-height:1.5rem;--text-sm:.875rem;--text-sm--line-height:1.5rem;--text-base:1rem;--text-base--line-height:1.75rem;--text-lg:1.125rem;--text-lg--line-height:1.75rem;--text-xl:1.25rem;--text-xl--line-height:1.75rem;--text-2xl:1.5rem;--text-2xl--line-height:2rem;--text-4xl:2.25rem;--text-4xl--line-height:2.5rem;--text-5xl:3rem;--text-5xl--line-height:1;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--tracking-tight:-.025em;--leading-tight:1.25;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--ease-in-out:cubic-bezier(.4,0,.2,1);--animate-spin:spin 1s linear infinite;--blur-xs:4px;--blur-sm:8px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-primary-500:#fe795d}.pac-container{z-index:10;margin-top:calc(var(--spacing,.25rem)*10);transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,);border-radius:var(--radius-lg,.5rem);position:relative}.pac-icon-container{pointer-events:none;inset-block:calc(var(--spacing,.25rem)*0);left:calc(var(--spacing,.25rem)*0);padding-left:calc(var(--spacing,.25rem)*3);align-items:center;display:flex;position:absolute}.pac-w-5{width:calc(var(--spacing,.25rem)*5)}.pac-h-5{height:calc(var(--spacing,.25rem)*5)}.pac-input{border-radius:var(--radius-md,.375rem);border-style:var(--tw-border-style);background-color:var(--color-gray-100,oklch(96.7% .003 264.542));width:100%;padding-inline:calc(var(--spacing,.25rem)*4);padding-block:calc(var(--spacing,.25rem)*2.5);padding-right:calc(var(--spacing,.25rem)*20);padding-left:calc(var(--spacing,.25rem)*10);font-family:var(--font-inter);color:var(--color-gray-900,oklch(21% .034 264.665));--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color:var(--color-gray-300,oklch(87.2% .01 258.338));--tw-ring-inset:inset;border-width:1px}.pac-input:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}@media (min-width:40rem){.pac-input{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)))}}.pac-kbd-container{inset-block:calc(var(--spacing,.25rem)*0);right:calc(var(--spacing,.25rem)*0);padding-block:calc(var(--spacing,.25rem)*1.5);padding-right:calc(var(--spacing,.25rem)*1.5);display:flex;position:absolute}.pac-kbd-escape{margin-right:calc(var(--spacing,.25rem)*1);width:calc(var(--spacing,.25rem)*8);border-radius:var(--radius-sm,.25rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-300,oklch(87.2% .01 258.338));padding-inline:calc(var(--spacing,.25rem)*1);font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)));color:var(--color-gray-500,oklch(55.1% .027 264.364));align-items:center;display:inline-flex}.pac-kbd-up{width:calc(var(--spacing,.25rem)*6);border-radius:var(--radius-sm,.25rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-300,oklch(87.2% .01 258.338));padding-inline:calc(var(--spacing,.25rem)*1);font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)));color:var(--color-gray-500,oklch(55.1% .027 264.364));justify-content:center;align-items:center;display:inline-flex}.pac-kbd-down{width:calc(var(--spacing,.25rem)*6);border-radius:var(--radius-sm,.25rem);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-gray-400,oklch(70.7% .022 261.325));padding-inline:calc(var(--spacing,.25rem)*1);font-family:var(--font-sans,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)));color:var(--color-gray-500,oklch(55.1% .027 264.364));justify-content:center;align-items:center;display:inline-flex}.pac-kbd-active{background-color:var(--color-indigo-500,oklch(58.5% .233 277.117));color:var(--color-white,#fff)}.pac-ul{z-index:50;margin-top:calc(var(--spacing,.25rem)*1);margin-bottom:calc(var(--spacing,.25rem)*-2);max-height:calc(var(--spacing,.25rem)*60);width:100%;list-style-type:none;position:absolute}:where(.pac-ul>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px*var(--tw-divide-y-reverse));border-bottom-width:calc(1px*calc(1 - var(--tw-divide-y-reverse)));border-color:var(--color-gray-100,oklch(96.7% .003 264.542))}.pac-ul{border-radius:var(--radius-md,.375rem);background-color:var(--color-white,#fff);padding-block:calc(var(--spacing,.25rem)*1);font-family:var(--font-inter);font-size:var(--text-base,1rem);line-height:var(--tw-leading,var(--text-base--line-height, 1.5 ));--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-color:var(--color-black,#000);overflow:hidden}.pac-ul:focus{--tw-outline-style:none;outline-style:none}@media (min-width:40rem){.pac-ul{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)))}}.pac-li{cursor:default;padding-inline:calc(var(--spacing,.25rem)*2);padding-block:calc(var(--spacing,.25rem)*2);color:var(--color-gray-900,oklch(21% .034 264.665));-webkit-user-select:none;user-select:none}@media (hover:hover){.pac-li:hover{background-color:var(--color-indigo-500,oklch(58.5% .233 277.117));color:var(--color-white,#fff)}}@media (min-width:64rem){.pac-li{padding-inline:calc(var(--spacing,.25rem)*4)}}.pac-li-current{background-color:var(--color-indigo-500,oklch(58.5% .233 277.117))}.pac-li-a{justify-content:space-between;width:100%;display:flex}.pac-li-a-current{color:var(--color-white,#fff)}.pac-li-div-container{min-width:calc(var(--spacing,.25rem)*0);column-gap:calc(var(--spacing,.25rem)*4);display:flex}.pac-li-div-one{min-width:calc(var(--spacing,.25rem)*0);flex:auto}.pac-li-div-one-p{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25/.875)));--tw-leading:calc(var(--spacing,.25rem)*6);line-height:calc(var(--spacing,.25rem)*6)}.pac-li-div-two{min-width:calc(var(--spacing,.25rem)*16);flex-direction:column;flex-shrink:0;align-items:flex-end;display:flex}.pac-li-div-two-p{margin-top:calc(var(--spacing,.25rem)*1);font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1/.75)));--tw-leading:calc(var(--spacing,.25rem)*5);line-height:calc(var(--spacing,.25rem)*5)}.pac-highlight{--tw-font-weight:var(--font-weight-bold,700);font-weight:var(--font-weight-bold,700)}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}