Skip to content

Commit

Permalink
feat: add placesAutocompleteRequest, placesAutocompleteDebounceTime, …
Browse files Browse the repository at this point in the history 
…addressLine2, regionCode
  • Loading branch information
@lekhmanrus
lekhmanrus committed Oct 21, 2024
1 parent 3c08ab7 commit 66fc5b1
Show file tree
Hide file tree
Showing 11 changed files with 1,032 additions and 560 deletions.
1,164 changes: 768 additions & 396 deletions package-lock.json
View file

Large diffs are not rendered by default.

39 changes: 20 additions & 19 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,33 +48,33 @@
"commitlint": "commitlint"
},
"dependencies": {
"@angular/animations": "^18.2.5",
"@angular/cdk": "^18.2.5",
"@angular/common": "^18.2.5",
"@angular/compiler": "^18.2.5",
"@angular/core": "^18.2.5",
"@angular/forms": "^18.2.5",
"@angular/google-maps": "^18.2.5",
"@angular/material": "^18.2.5",
"@angular/platform-browser": "^18.2.5",
"@angular/platform-browser-dynamic": "^18.2.5",
"@angular/router": "^18.2.5",
"@angular/animations": "^18.2.8",
"@angular/cdk": "^18.2.9",
"@angular/common": "^18.2.8",
"@angular/compiler": "^18.2.8",
"@angular/core": "^18.2.8",
"@angular/forms": "^18.2.8",
"@angular/google-maps": "^18.2.9",
"@angular/material": "^18.2.9",
"@angular/platform-browser": "^18.2.8",
"@angular/platform-browser-dynamic": "^18.2.8",
"@angular/router": "^18.2.8",
"rxjs": "~7.8.1",
"tslib": "^2.7.0",
"tslib": "^2.8.0",
"zone.js": "~0.15.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^18.2.5",
"@angular/cli": "^18.2.5",
"@angular/compiler-cli": "^18.2.5",
"@angular-devkit/build-angular": "^18.2.9",
"@angular/cli": "^18.2.9",
"@angular/compiler-cli": "^18.2.8",
"@commitlint/cli": ">=19.5.0",
"@commitlint/config-conventional": ">=19.5.0",
"@commitlint/format": ">=19.5.0",
"@types/google.maps": "^3.58.0",
"@types/google.maps": "^3.58.1",
"@types/jest": "^29.5.13",
"angular-eslint": "18.3.1",
"angular-eslint": "18.4.0",
"conventional-changelog-angular": ">=8.0.0",
"eslint": "^9.9.1",
"eslint": "^9.13.0",
"husky": "^9.1.6",
"is-ci": ">=3.0.1",
"jest": "^29.7.0",
Expand All @@ -85,6 +85,7 @@
"npm-run-all": "^4.1.5",
"standard-version": ">=9.5.0",
"typescript": "~5.5.2",
"typescript-eslint": "8.2.0"
"typescript-eslint": "8.11.0",
"validate-branch-name": "^1.3.1"
}
}
3 changes: 2 additions & 1 deletion projects/ngx-google-maps-places-api/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,8 @@
},
"peerDependencies": {
"@angular/common": "^18.0.0",
"@angular/core": "^18.0.0"
"@angular/core": "^18.0.0",
"@types/google.maps": "^3.58.0"
},
"sideEffects": false
}
26 changes: 19 additions & 7 deletions projects/ngx-google-maps-places-api/src/lib/ngx-google-maps-places-api.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export class NgxGoogleMapsPlacesApiService {
*/
public refreshToken(): google.maps.places.AutocompleteSessionToken {
this._token = new google.maps.places.AutocompleteSessionToken();
// console.log('refreshToken()', this._token);
return this._token;
}

Expand Down Expand Up @@ -80,11 +81,12 @@ export class NgxGoogleMapsPlacesApiService {
): Observable<google.maps.places.Place | null> {
const placePrediction = this._isAutocompleteSuggestion(suggestionOrPrediction)
? suggestionOrPrediction.placePrediction
: suggestionOrPrediction
if (!placePrediction) {
: suggestionOrPrediction;
const place = placePrediction?.toPlace();
if (!place) {
return of(null);
}
return from(placePrediction.toPlace().fetchFields({ fields }))
return from(place.fetchFields({ fields }))
.pipe(
tap(() => this.refreshToken()),
map(({ place }) => place),
Expand Down Expand Up @@ -117,6 +119,13 @@ export class NgxGoogleMapsPlacesApiService {
'administrative_area_level_4',
'administrative_area_level_5'
],
regionCode: [
'administrative_area_level_1',
'administrative_area_level_2',
'administrative_area_level_3',
'administrative_area_level_4',
'administrative_area_level_5'
],
city: [
'locality',
'sublocality',
Expand All @@ -126,25 +135,28 @@ export class NgxGoogleMapsPlacesApiService {
'sublocality_level_4'
],
countryCode: [ 'country' ],
country: [ 'country' ]
country: [ 'country' ],
addressLine2: [ 'subpremise' ]
};

const addressModel: AddressModel = {
streetNumber: '',
postalCode: '',
street: '',
region: '',
regionCode: '',
city: '',
countryCode: '',
country: ''
country: '',
addressLine2: ''
};

for (const addressComponent of addressComponents) {
for (const mapKey in addressComponentsMap) {
const key = mapKey as AddressKey;
const addressComponentMap = addressComponentsMap[key];
if (addressComponentMap.some((type) => addressComponent.types.includes(type))) {
if (key === 'countryCode') {
if (key === 'countryCode' || key === 'regionCode') {
addressModel[key] = String(addressComponent.shortText);
} else {
addressModel[key] = String(addressComponent.longText);
Expand Down Expand Up @@ -195,6 +207,6 @@ export class NgxGoogleMapsPlacesApiService {
private _isAutocompleteSuggestion(
suggestionOrPrediction: google.maps.places.AutocompleteSuggestion | google.maps.places.PlacePrediction
): suggestionOrPrediction is google.maps.places.AutocompleteSuggestion {
return suggestionOrPrediction && Object.hasOwn(suggestionOrPrediction, 'placePrediction');
return suggestionOrPrediction && 'placePrediction' in suggestionOrPrediction;
}
}
4 changes: 2 additions & 2 deletions projects/ngx-google-maps-places-api/src/lib/ngx-google-maps-places.types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/** Defines the keys that can be used in the `AddressModel` type. */
export type AddressKey
= 'streetNumber' | 'postalCode' | 'street' | 'region' | 'city' | 'countryCode' | 'country';
export type AddressKey = 'streetNumber' | 'postalCode' | 'street' | 'region' | 'regionCode'
| 'city' | 'countryCode' | 'country' | 'addressLine2';

/**
* Defines a type for an address model, where the values can be of type `T`.
Expand Down
20 changes: 20 additions & 0 deletions projects/ngx-google-maps-places-app/src/app/app.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,16 @@
formControlName="street"
[value]="placesAutocomplete.placeDetails$()?.address?.street" />
</mat-form-field>

<mat-form-field class="full-width">
<mat-label>Address Line 2 (apartment, suite, a unit number)</mat-label>
<input type="text"
placeholder="Enter your address line 2 (apartment, suite, a unit number)"
aria-label="Address Line 2 (apartment, suite, a unit number)"
matInput
formControlName="addressLine2"
[value]="placesAutocomplete.placeDetails$()?.address?.addressLine2" />
</mat-form-field>
</div>

<div class="row">
Expand All @@ -75,6 +85,16 @@
formControlName="region"
[value]="placesAutocomplete.placeDetails$()?.address?.region" />
</mat-form-field>

<mat-form-field class="full-width">
<mat-label>State/Province Code</mat-label>
<input type="text"
placeholder="Enter your state/province code"
aria-label="State/Province Code"
matInput
formControlName="regionCode"
[value]="placesAutocomplete.placeDetails$()?.address?.regionCode" />
</mat-form-field>
</div>

<div class="row">
Expand Down
4 changes: 3 additions & 1 deletion projects/ngx-google-maps-places-app/src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,8 +43,10 @@ export class AppComponent {
street: new FormControl<string>('', [ Validators.required ]),
city: new FormControl<string>('', [ Validators.required ]),
region: new FormControl<string>('', [ Validators.required ]),
regionCode: new FormControl<string>('', [ Validators.required ]),
country: new FormControl<string>('', [ Validators.required ]),
countryCode: new FormControl<string>('', [ Validators.required ]),
postalCode: new FormControl<string>('', [ Validators.required ])
postalCode: new FormControl<string>('', [ Validators.required ]),
addressLine2: new FormControl<string>('')
});
}
12 changes: 11 additions & 1 deletion projects/ngx-google-maps-places-autocomplete/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,8 +129,16 @@ Use the `ngxGoogleMapsPlacesAutocomplete` directive within an `matAutocomplete`
formControlName="address"
[matAutocomplete]="addressAutocomplete"
ngxGoogleMapsPlacesAutocomplete
[fetchFields]="[ 'addressComponents', 'location', 'googleMapsURI' ]"
#placesAutocomplete="ngxGoogleMapsPlacesAutocomplete" />
<!--
In addition to ngxGoogleMapsPlacesAutocomplete above you can use the following inputs/outputs like:
[shouldLoadPlaceDetails]="true"
[fetchFields]="[ 'addressComponents', 'location', 'googleMapsURI' ]"
[placesAutocompleteRequest]="{ includedRegionCodes: [ 'UA' ] }"
[placesAutocompleteDebounceTime]="575"
(optionsLoad)="onSuggestionsLoaded($event)"
(placeDetailsLoad)="onPlaceDetailsLoaded($event)"
-->
<mat-autocomplete autoActiveFirstOption #addressAutocomplete="matAutocomplete">
@for (option of placesAutocomplete.options$(); track option.prediction.placeId) {
<mat-option [value]="option">
Expand Down Expand Up @@ -184,6 +192,8 @@ Exported as: `ngxGoogleMapsPlacesAutocomplete`
| **Input** | |
| `shouldLoadPlaceDetails: boolean` | Determines whether place details should be loaded for the selected autocomplete suggestion. Default is `true`. |
| `fetchFields: string[] \| undefined` | List of fields to be fetched at place details request. Default is `undefined`, which will result in passing `[ 'addressComponents' ]` to Google Places API. |
| `placesAutocompleteRequest: Omit<google.maps.places.AutocompleteRequest, 'input'> \| undefined` | An input property that specifies the options for the Google Maps Places Autocomplete request. This property allows the user to customize the autocomplete request, such as setting the location bias, types of places to return, or other parameters. If this property is not set, the default autocomplete request options will be used. See [google.maps.places.AutocompleteRequest](https://developers.google.com/maps/documentation/javascript/reference/autocomplete-data#AutocompleteRequest) interface. |
| `placesAutocompleteDebounceTime: number \| null` | An input property that specifies the debounce time (in milliseconds) for the input event that triggers the autocomplete suggestions. If this property is not set, the default debounce time of 725 milliseconds will be used. |
| **Output** | |
| `optionsLoad: OutputEmitterRef<NgxGoogleMapsPlacesAutocompleteSuggestion[]>` | An event that is emitted when the options for the autocomplete suggestions have been loaded. |
| `placeDetailsLoad: OutputEmitterRef<NgxGoogleMapsPlacesAutocompletePlaceDetails \| null>` | An observable signal that holds the current list of autocomplete suggestions. The suggestions are of type `NgxGoogleMapsPlacesAutocompleteSuggestion[]`. |
Expand Down
1 change: 1 addition & 0 deletions projects/ngx-google-maps-places-autocomplete/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
"@angular/common": "^18.0.0",
"@angular/core": "^18.0.0",
"@angular/material": "^18.0.0",
"@types/google.maps": "^3.58.0",
"ngx-google-maps-places-api": "1.0.0"
},
"sideEffects": false
Expand Down
Loading

0 comments on commit 66fc5b1

Please # to comment.