feat(package): added the appearance input to style the address mat-form-field #5

Author: AnthonyNahas

README.md

@@ -160,7 +160,8 @@ add `mat-google-maps-auto-complete` element to your template
 ### `mat-google-maps-auto-complete` 
 
 ```html
-<mat-google-maps-autocomplete (onAddressSelected)="onAddressSelected($event)"
+<mat-google-maps-autocomplete [appearance]="appearance.OUTLINE"
+                              (onAddressSelected)="onAddressSelected($event)"
                               (onLocationSelected)="onLocationSelected($event)">
       </mat-google-maps-autocomplete>
 ```
@@ -204,7 +205,7 @@ in your component, the code will be similar to -->
 ```typescript
 import {Component, OnInit, ViewEncapsulation} from '@angular/core';
 import {Title} from '@angular/platform-browser';
-import {Location} from '@angular-material-extensions/google-maps-autocomplete';
+import {Location, Appearance} from '@angular-material-extensions/google-maps-autocomplete';
 import {} from '@types/googlemaps';
 import PlaceResult = google.maps.places.PlaceResult;
 
@@ -216,6 +217,7 @@ import PlaceResult = google.maps.places.PlaceResult;
 })
 export class HomeComponent implements OnInit {
 
+  public appearance = Appearance;
   public zoom: number;
   public latitude: number;
   public longitude: number;
@@ -266,6 +268,7 @@ export class HomeComponent implements OnInit {
 
 | option | bind  |  type  |   default    | description  |
 |:-------------------|:--------:|:------:|:------------:|:-------------------------------------------------------------------------------------------------|    
+| appearance          | Input()   |  Appearance | string;      | Appearance.STANDARD |  Style the `mat-form-field` by setting the appearance option : standard, fill, outline or legacy
 | address             | Input()   |  PlaceResult | string;      | - |  
 | country             | Input()   | string | string[];          | - | can be used to restrict results to specific groups. Currently, you can use componentRestrictions to filter by up to 5 countries. Countries must be passed as as a two-character, ISO 3166-1 Alpha-2 compatible country code. Multiple countries must be passed as a list of country codes.  
 | placeIdOnly         | Input()   | boolean                     | - | can be used to instruct the Autocomplete widget to retrieve only Place IDs. On calling getPlace() on the Autocomplete object, the PlaceResult made available will only have the place id, types and name properties set. You can use the returned place ID with calls to the Places, Geocoding, Directions or Distance Matrix services.

demo/src/app/app.module.ts

@@ -10,9 +10,11 @@ import {AppComponent} from './app.component';
 import {HttpClientModule} from '@angular/common/http';
 import {environment} from '../environments/environment';
 import {AgmCoreModule} from '@agm/core';
+import {MatGoogleMapsAutocompleteModule} from '@angular-material-extensions/google-maps-autocomplete';
 import {FlexLayoutModule} from '@angular/flex-layout';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {MatJumbotronModule} from '@angular-material-extensions/jumbotron';
+
 // import {} from '@types/googlemaps';
 
 const googleMapsParams = {
@@ -32,6 +34,7 @@ const googleMapsParams = {
     // the page.
     BrowserModule.withServerTransition({appId: '@angular-material-extensions/google-maps-autocomplete-demo-id'}),
     AgmCoreModule.forRoot(googleMapsParams),
+    MatGoogleMapsAutocompleteModule.forRoot(),
     MatJumbotronModule.forRoot(),
     BrowserAnimationsModule,
     FlexLayoutModule,

demo/src/app/home/home.component.html

@@ -78,7 +78,8 @@ <h1>@angular-material-extensions/google-maps-autocomplete</h1>
                    class="autocomplete-container"
                    [ngStyle.xs]="{'min-width.%': 100}"
                    [ngStyle.sm]="{'width.%': 70}">
-                <mat-google-maps-autocomplete (onAutocompleteSelected)="onAutocompleteSelected($event)"
+                <mat-google-maps-autocomplete [appearance]="appearance.STANDARD"
+                                              (onAutocompleteSelected)="onAutocompleteSelected($event)"
                                               (onLocationSelected)="onLocationSelected($event)">
                 </mat-google-maps-autocomplete>
 

demo/src/app/home/home.component.ts

@@ -1,6 +1,6 @@
 import {Component, OnInit, ViewEncapsulation} from '@angular/core';
 import {Title} from '@angular/platform-browser';
-import {Location} from '@angular-material-extensions/google-maps-autocomplete';
+import {Location, Appearance} from '@angular-material-extensions/google-maps-autocomplete';
 import sdk from '@stackblitz/sdk';
 import {} from '@types/googlemaps';
 import PlaceResult = google.maps.places.PlaceResult;
@@ -23,14 +23,15 @@ export class HomeComponent implements OnInit {
                  class="autocomplete-container"
                  [ngStyle.xs]="{'min-width.%': 100}"
                  [ngStyle.sm]="{'width.%': 70}">
-              <mat-google-maps-autocomplete (onAddressSelected)="onAddressSelected($event)"
-                                            (onLocationSelected)="onLocationSelected($event)">
+              <mat-google-maps-autocomplete [appearance]="appearance.OUTLINE"
+                                              (onAutocompleteSelected)="onAutocompleteSelected($event)"
+                                              (onLocationSelected)="onLocationSelected($event)">
               </mat-google-maps-autocomplete>
             </div>`;
 
   ts = `import {Component, OnInit, ViewEncapsulation} from '@angular/core';
 import {Title} from '@angular/platform-browser';
-import {Location} from '@angular-material-extensions/google-maps-autocomplete';
+import {Location, Appearance} from '@angular-material-extensions/google-maps-autocomplete';
 import sdk from '@stackblitz/sdk';
 import {} from '@types/googlemaps';
 import PlaceResult = google.maps.places.PlaceResult;
@@ -43,6 +44,7 @@ import PlaceResult = google.maps.places.PlaceResult;
 })
 export class HomeComponent implements OnInit {
 
+  public appearance = Appearance;
   public zoom: number;
   public latitude: number;
   public longitude: number;
@@ -92,6 +94,7 @@ export class HomeComponent implements OnInit {
   width: 50%;
 }`;
 
+  public appearance = Appearance;
   public zoom: number;
   public latitude: number;
   public longitude: number;

demo/src/app/home/home.module.ts

@@ -14,7 +14,7 @@ import {MatJumbotronModule} from '@angular-material-extensions/jumbotron';
   imports: [
     CommonModule,
     FlexLayoutModule,
-    MatGoogleMapsAutocompleteModule.forRoot(),
+    MatGoogleMapsAutocompleteModule,
     HighlightModule.forRoot({theme: 'vs2015'}),
     HomeRoutingModule,
     MatJumbotronModule,

src/module/component/mat-google-maps-autocomplete.component.html

@@ -1,4 +1,4 @@
-<mat-form-field class="full-width" appearance="outline">
+<mat-form-field class="full-width" [appearance]="appearance">
   <mat-label>Address</mat-label>
   <input matInput
          [(ngModel)]="address"

src/module/component/mat-google-maps-autocomplete.component.ts

@@ -10,6 +10,13 @@ export interface Location {
   longitude: number;
 }
 
+export enum Appearance {
+  STANDARD = 'standard',
+  FILL = 'fill',
+  OUTLINE = 'outline',
+  LEGACY = 'legacy',
+}
+
 @Component({
   selector: 'mat-google-maps-autocomplete',
   templateUrl: './mat-google-maps-autocomplete.component.html',
@@ -20,6 +27,9 @@ export class MatGoogleMapsAutocompleteComponent implements OnInit {
   @ViewChild('search')
   public searchElementRef: ElementRef;
 
+  @Input()
+  appearance: string | Appearance = Appearance.STANDARD;
+
   @Input()
   address: PlaceResult | string;
 

src/module/mat-google-maps-autocomplete.module.ts

@@ -7,7 +7,7 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatValidateAddressDirective} from './directives/address-validator/mat-address-validator.directive';
 
 // Export module's public API
-export {MatGoogleMapsAutocompleteComponent, Location} from './component/mat-google-maps-autocomplete.component';
+export {MatGoogleMapsAutocompleteComponent, Location, Appearance} from './component/mat-google-maps-autocomplete.component';
 
 // export {MatValidateAddressDirective} from './directives/address-validator/mat-address-validator.directive';