fix(package): improved the new search component

angular.json

@@ -147,6 +147,10 @@
               }
             }
           }
+        },
+        "deploy": {
+          "builder": "angular-cli-ghpages:deploy",
+          "options": {}
         }
       }
     },

package.json

@@ -44,6 +44,7 @@
     "@briebug/jest-schematic": "^2.1.1",
     "@nguniversal/express-engine": "^8.2.6",
     "@nguniversal/module-map-ngfactory-loader": "v8.2.6",
+    "angular-cli-ghpages": "^0.6.1",
     "angulartics2": "^8.1.0",
     "express": "^4.15.2",
     "http-server": "^0.11.1",
@@ -137,4 +138,4 @@
       }
     }
   }
-}
+}

projects/angular-material-extensions/google-maps-autocomplete/package.json

@@ -26,6 +26,7 @@
   },
   "scripts": {
     "build": "../../../node_modules/.bin/ng build @angular-material-extensions/google-maps-autocomplete",
+    "build:watch": "../../../node_modules/.bin/ng build @angular-material-extensions/google-maps-autocomplete --watch",
     "build:schematics": "../../../node_modules/.bin/tsc -p tsconfig.schematics.json",
     "clean": "rm -rf ../../../dist",
     "lint": "../../../node_modules/.bin/ng lint @angular-material-extensions/google-maps-autocomplete",
@@ -43,6 +44,7 @@
   "peerDependencies": {
     "@angular/common": "^8.2.14",
     "@angular/core": "^8.2.14",
+    "@angular/platform-browser": "^8.2.14",
     "@angular/forms": "^8.2.14",
     "@angular/cdk": "^8.2.3",
     "@angular/material": "^8.2.3",
@@ -96,4 +98,4 @@
       ]
     }
   }
-}
+}

projects/angular-material-extensions/google-maps-autocomplete/src/lib/animations/index.ts

@@ -0,0 +1,36 @@
+import {animate, animateChild, animation, query, stagger, state, style, transition, trigger, useAnimation} from '@angular/animations';
+
+const customAnimation = animation(
+  [
+    style({
+      opacity: '{{opacity}}',
+      transform: 'scale({{scale}}) translate3d({{x}}, {{y}}, {{z}})'
+    }),
+    animate('{{duration}} {{delay}} cubic-bezier(0.0, 0.0, 0.2, 1)', style('*'))
+  ],
+  {
+    params: {
+      duration: '200ms',
+      delay: '0ms',
+      opacity: '0',
+      scale: '1',
+      x: '0',
+      y: '0',
+      z: '0'
+    }
+  }
+);
+
+export const InputAnimations = [
+  trigger('animate', [transition('void => *', [useAnimation(customAnimation)])]),
+
+  trigger('animateStagger', [
+    state('50', style('*')),
+    state('100', style('*')),
+    state('200', style('*')),
+
+    transition('void => 50', query('@*', [stagger('50ms', [animateChild()])], {optional: true})),
+    transition('void => 100', query('@*', [stagger('100ms', [animateChild()])], {optional: true})),
+    transition('void => 200', query('@*', [stagger('200ms', [animateChild()])], {optional: true}))
+  ]),
+];

projects/angular-material-extensions/google-maps-autocomplete/src/lib/component/index.ts

@@ -0,0 +1,2 @@
+export * from './mat-google-maps-autocomplete.component';
+export * from './mat-search-google-maps-autocomplete/mat-search-google-maps-autocomplete.component';

projects/angular-material-extensions/google-maps-autocomplete/src/lib/helpers/parser.ts

@@ -0,0 +1,51 @@
+import PlaceResult = google.maps.places.PlaceResult;
+import {GermanAddress} from '../interfaces';
+
+export function parseGermanAddress(placeResult: PlaceResult): GermanAddress {
+  const germanAddress: GermanAddress = {
+    gmID: placeResult.id,
+    icon: placeResult.icon,
+    url: placeResult.url,
+    placeID: placeResult.place_id,
+    displayAddress: placeResult.formatted_address,
+    name: placeResult.name,
+    vicinity: placeResult.vicinity,
+    locality: {},
+    state: {},
+    country: {},
+    geoLocation: {latitude: -1, longitude: -1},
+  };
+
+  if (placeResult.address_components && placeResult.address_components.length > 0) {
+    placeResult.address_components.forEach(value => {
+      if (value.types.indexOf('street_number') > -1) {
+        germanAddress.streetNumber = Number(value.short_name);
+      }
+      if (value.types.indexOf('route') > -1) {
+        germanAddress.streetName = value.long_name;
+      }
+      if (value.types.indexOf('postal_code') > -1) {
+        germanAddress.postalCode = Number(value.short_name);
+      }
+      if (value.types.indexOf('sublocality') > -1) {
+        germanAddress.sublocality = value.long_name;
+      }
+      if (value.types.indexOf('locality') > -1) {
+        germanAddress.locality.long = value.long_name;
+        germanAddress.locality.short = value.short_name;
+      }
+      if (value.types.indexOf('administrative_area_level_1') > -1) {
+        germanAddress.state.long = value.long_name;
+        germanAddress.state.short = value.short_name;
+      }
+      if (value.types.indexOf('country') > -1) {
+        germanAddress.country.long = value.long_name;
+        germanAddress.country.short = value.short_name;
+      }
+      if (value.types.indexOf('administrative_area_level_3') > -1) {
+        germanAddress.locality.short = value.short_name;
+      }
+    });
+  }
+  return germanAddress;
+}

projects/angular-material-extensions/google-maps-autocomplete/src/lib/mat-google-maps-autocomplete.module.ts

@@ -1,29 +1,36 @@
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatInputModule} from '@angular/material';
-import {MatGoogleMapsAutocompleteComponent} from './component/mat-google-maps-autocomplete.component';
+import {MatIconModule, MatInputModule} from '@angular/material';
 import {MatGoogleMapsAutocompleteDirective} from './directives/mat-google-maps-autocomplete.directive';
 import {MatValidateAddressDirective} from './directives/address-validator/mat-address-validator.directive';
 import {CommonModule} from '@angular/common';
+import {MatGoogleMapsAutocompleteComponent, MatSearchGoogleMapsAutocompleteComponent} from './component';
+import {FlexLayoutModule} from '@angular/flex-layout';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
 
 @NgModule({
   imports:
     [
       CommonModule,
+      BrowserAnimationsModule,
       FormsModule,
       ReactiveFormsModule,
-      MatInputModule
+      FlexLayoutModule,
+      MatInputModule,
+      MatIconModule
     ],
   exports: [
     MatGoogleMapsAutocompleteComponent,
     MatGoogleMapsAutocompleteDirective,
-    MatValidateAddressDirective
+    MatValidateAddressDirective,
+    MatSearchGoogleMapsAutocompleteComponent
   ],
   declarations: [
     MatGoogleMapsAutocompleteComponent,
     MatGoogleMapsAutocompleteDirective,
-    MatValidateAddressDirective
+    MatValidateAddressDirective,
+    MatSearchGoogleMapsAutocompleteComponent
   ]
 })
 export class MatGoogleMapsAutocompleteModule {

projects/angular-material-extensions/google-maps-autocomplete/src/public-api.ts

@@ -3,7 +3,7 @@
  */
 
 export * from './lib/interfaces';
-export * from './lib/component/mat-google-maps-autocomplete.component';
+export * from './lib/component';
 export * from './lib/directives/mat-google-maps-autocomplete.directive';
 export * from './lib/directives/address-validator/mat-address-validator.directive';
 export * from './lib/mat-google-maps-autocomplete.module';

src/app/app.component.html

@@ -551,6 +551,14 @@ <h2>Usage</h2>
     </mat-card-content>
   </mat-card>
 
+  <mat-card>
+    <mat-card-title>Auto Parse Address</mat-card-title>
+    <mat-card-content>
+      <mat-search-google-maps-autocomplete appearance="outline"
+      ></mat-search-google-maps-autocomplete>
+    </mat-card-content>
+  </mat-card>
+
   <!-- Next Steps -->
   <h2 style="margin-top: 4rem">Next Steps</h2>
   <p>What do you want to do next with your app? Here are some awesome suggested libraries for you!</p>