@angular-material-extensions/google-maps-autocomplete/bundles/angular-material-extensions-google-maps-autocomplete.umd.min.js

Autocomplete input component and directive for google-maps built with angular and material design

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("@agm/core"),require("@angular/animations"),require("@angular/common"),require("@angular/flex-layout"),require("@angular/material/icon"),require("@angular/material/input")):"function"==typeof define&&define.amd?define("@angular-material-extensions/google-maps-autocomplete",["exports","@angular/core","@angular/forms","@agm/core","@angular/animations","@angular/common","@angular/flex-layout","@angular/material/icon","@angular/material/input"],t):t(((e=e||self)["angular-material-extensions"]=e["angular-material-extensions"]||{},e["angular-material-extensions"]["google-maps-autocomplete"]={}),e.ng.core,e.ng.forms,e.core$1,e.ng.animations,e.ng.common,e.ng.flexLayout,e.ng.material.icon,e.ng.material.input)}(this,(function(e,t,o,a,n,r,i,s,l){"use strict";
/*! *****************************************************************************
    Copyright (c) Microsoft Corporation.

    Permission to use, copy, modify, and/or distribute this software for any
    purpose with or without fee is hereby granted.

    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
    PERFORMANCE OF THIS SOFTWARE.
    ***************************************************************************** */function p(e,t,o,a){var n,r=arguments.length,i=r<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,o):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,a);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(i=(r<3?n(i):r>3?n(t,o,i):n(t,o))||i);return r>3&&i&&Object.defineProperty(t,o,i),i}var d,u=function(){function e(){}var a;return a=e,e.prototype.validate=function(){var e=this;return function(t){return e.address?null:{validateAddress:{valid:!1}}}},e.prototype.subscribe=function(e){var t=this;this.subscription=e.subscribe((function(e){t.address=e}))},e.prototype.unsubscribe=function(){this.subscription.unsubscribe()},Object.defineProperty(e.prototype,"address",{get:function(){return this._address},set:function(e){this._address=e},enumerable:!0,configurable:!0}),e=a=p([t.Directive({selector:"[mat-address-validate][formControlName],[MatValidateAddress][formControl],[MatValidateAddress][ngModel]",providers:[{provide:o.NG_VALIDATORS,useExisting:t.forwardRef((function(){return a})),multi:!0}]})],e)}();(d=e.Appearance||(e.Appearance={})).STANDARD="standard",d.FILL="fill",d.OUTLINE="outline",d.LEGACY="legacy";var c=function(){function n(a,n){this.mapsAPILoader=a,this.ngZone=n,this.addressLabelText="Address",this.placeholderText="Please enter the address",this.requiredErrorText="The address is required",this.invalidErrorText="The address is not valid",this.appearance=e.Appearance.STANDARD,this.autoCompleteOptions={},this.onChange=new t.EventEmitter,this.onAutocompleteSelected=new t.EventEmitter,this.onGermanAddressMapped=new t.EventEmitter,this.onLocationSelected=new t.EventEmitter,this.onNewPlaceResult=new t.EventEmitter,this.addressValidator=new u,this.addressSearchControl=new o.FormControl({value:null},o.Validators.compose([o.Validators.required,this.addressValidator.validate()])),this.propagateChange=function(e){}}var r;return r=n,n.prototype.ngOnInit=function(){this.addressValidator.subscribe(this.onNewPlaceResult);var e={placeIdOnly:this.placeIdOnly,strictBounds:this.strictBounds,type:this.type};this.country&&(e.componentRestrictions={country:this.country}),this.country&&(e.types=this.types),this.autoCompleteOptions=Object.assign(this.autoCompleteOptions,e),this.initGoogleMapsAutocomplete()},n.prototype.initGoogleMapsAutocomplete=function(){var e=this;this.mapsAPILoader.load().then((function(){var t=new google.maps.places.Autocomplete(e.searchElementRef.nativeElement,e.autoCompleteOptions);t.addListener("place_changed",(function(){e.ngZone.run((function(){var o=t.getPlace(),a={gmID:o.id,icon:o.icon,url:o.url,placeID:o.place_id,displayAddress:o.formatted_address,name:o.name,vicinity:o.vicinity,locality:{},state:{},country:{},geoLocation:{latitude:-1,longitude:-1}};o.geometry&&o.geometry.location&&(a.geoLocation.latitude=o.geometry.location.lat(),a.geoLocation.longitude=o.geometry.location.lng()),o.address_components.forEach((function(e){e.types.indexOf("street_number")>-1&&(a.streetNumber=e.short_name),e.types.indexOf("route")>-1&&(a.streetName=e.long_name),e.types.indexOf("postal_code")>-1&&(a.postalCode=Number(e.short_name)),e.types.indexOf("sublocality")>-1&&(a.sublocality=e.long_name),e.types.indexOf("locality")>-1&&(a.locality.long=e.long_name,a.locality.short=e.short_name),e.types.indexOf("administrative_area_level_1")>-1&&(a.state.long=e.long_name,a.state.short=e.short_name),e.types.indexOf("country")>-1&&(a.country.long=e.long_name,a.country.short=e.short_name),e.types.indexOf("administrative_area_level_3")>-1&&(a.locality.short=e.short_name)})),e.onGermanAddressMapped.emit(a),o.place_id&&void 0!==o.geometry&&null!==o.geometry&&(e.value=o,e.propagateChange(e.value),e.address=o.formatted_address,e.onAutocompleteSelected.emit(o),e.onLocationSelected.emit({latitude:o.geometry.location.lat(),longitude:o.geometry.location.lng()}))}))}))})).catch((function(e){return console.log(e)}))},n.prototype.onQuery=function(e){this.onChange.emit(this.address)},n.prototype.resetAddress=function(){this.address=null,this.addressSearchControl.updateValueAndValidity()},n.prototype.writeValue=function(e){e&&(this.value=e)},n.prototype.registerOnChange=function(e){this.propagateChange=e},n.prototype.registerOnTouched=function(e){throw new Error("Method not implemented.")},n.prototype.setDisabledState=function(e){throw new Error("Method not implemented.")},n.ctorParameters=function(){return[{type:a.MapsAPILoader},{type:t.NgZone}]},p([t.ViewChild("search")],n.prototype,"searchElementRef",void 0),p([t.Input()],n.prototype,"addressLabelText",void 0),p([t.Input()],n.prototype,"placeholderText",void 0),p([t.Input()],n.prototype,"requiredErrorText",void 0),p([t.Input()],n.prototype,"invalidErrorText",void 0),p([t.Input()],n.prototype,"appearance",void 0),p([t.Input()],n.prototype,"value",void 0),p([t.Input()],n.prototype,"address",void 0),p([t.Input()],n.prototype,"country",void 0),p([t.Input()],n.prototype,"placeIdOnly",void 0),p([t.Input()],n.prototype,"strictBounds",void 0),p([t.Input()],n.prototype,"types",void 0),p([t.Input()],n.prototype,"type",void 0),p([t.Input()],n.prototype,"autoCompleteOptions",void 0),p([t.Output()],n.prototype,"onChange",void 0),p([t.Output()],n.prototype,"onAutocompleteSelected",void 0),p([t.Output()],n.prototype,"onGermanAddressMapped",void 0),p([t.Output()],n.prototype,"onLocationSelected",void 0),n=r=p([t.Component({selector:"mat-google-maps-autocomplete",exportAs:"matGoogleMapsAutocomplete",template:'<mat-form-field class="full-width" [appearance]="appearance">\n  <mat-label>{{addressLabelText}}</mat-label>\n  <input matInput\n         [(ngModel)]="address"\n         (change)="onQuery($event)"\n         placeholder="{{placeholderText}}"\n         class="form-control"\n         #search\n         MatValidateAddress\n         required>\n  <mat-error *ngIf="addressSearchControl.hasError(\'required\')">\n    {{requiredErrorText}}\n  </mat-error>\n  <mat-error *ngIf="addressSearchControl.hasError(\'validateAddress\')">\n    {{invalidErrorText}}\n  </mat-error>\n</mat-form-field>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return r})),multi:!0}],styles:[".full-width{width:100%}"]})],n)}();var m=n.animation([n.style({opacity:"{{opacity}}",transform:"scale({{scale}}) translate3d({{x}}, {{y}}, {{z}})"}),n.animate("{{duration}} {{delay}} cubic-bezier(0.0, 0.0, 0.2, 1)",n.style("*"))],{params:{duration:"200ms",delay:"0ms",opacity:"0",scale:"1",x:"0",y:"0",z:"0"}}),y=[n.trigger("animate",[n.transition("void => *",[n.useAnimation(m)])]),n.trigger("animateStagger",[n.state("50",n.style("*")),n.state("100",n.style("*")),n.state("200",n.style("*")),n.transition("void => 50",n.query("@*",[n.stagger("50ms",[n.animateChild()])],{optional:!0})),n.transition("void => 100",n.query("@*",[n.stagger("100ms",[n.animateChild()])],{optional:!0})),n.transition("void => 200",n.query("@*",[n.stagger("200ms",[n.animateChild()])],{optional:!0}))])],h=function(){function a(o){this.formBuilder=o,this.appearance=e.Appearance.STANDARD,this.searchAddressLabel="Search Address",this.streetNameLabel="Street",this.streetNumberLabel="Nr.",this.postalCodeLabel="PLZ",this.localityLabel="Locality",this.vicinityLabel="Vicinity",this.onGermanAddressMapped=new t.EventEmitter,this.firstInit=!0,this.propagateChange=function(e){}}var n;return n=a,a.prototype.ngOnInit=function(){this.createAddressFormGroup()},a.prototype.createAddressFormGroup=function(){this.addressFormGroup=this.formBuilder.group({streetName:[this.value&&this.value.streetName?this.value.streetName:null,o.Validators.required],streetNumber:[this.value&&this.value.streetNumber?this.value.streetNumber:null,o.Validators.required],postalCode:[this.value&&this.value.postalCode?this.value.postalCode:null,o.Validators.required],vicinity:[this.value&&this.value.vicinity?this.value.vicinity:null],locality:this.formBuilder.group({long:[this.value&&this.value.locality&&this.value.locality.long?this.value.locality.long:null,o.Validators.required]})})},a.prototype.syncAutoComplete=function(e){this.germanAddress&&this.addressFormGroup.reset();var t=function(e){var t={gmID:e.id,icon:e.icon,url:e.url,placeID:e.place_id,displayAddress:e.formatted_address,name:e.name,vicinity:e.vicinity,locality:{},state:{},country:{},geoLocation:{latitude:-1,longitude:-1}};return e.geometry&&e.geometry.location&&(t.geoLocation.latitude=e.geometry.location.lat(),t.geoLocation.longitude=e.geometry.location.lng()),e.address_components&&e.address_components.length>0&&e.address_components.forEach((function(e){e.types.indexOf("street_number")>-1&&(t.streetNumber=e.short_name),e.types.indexOf("route")>-1&&(t.streetName=e.long_name),e.types.indexOf("postal_code")>-1&&(t.postalCode=Number(e.short_name)),e.types.indexOf("sublocality")>-1&&(t.sublocality=e.long_name),e.types.indexOf("locality")>-1&&(t.locality.long=e.long_name,t.locality.short=e.short_name),e.types.indexOf("administrative_area_level_1")>-1&&(t.state.long=e.long_name,t.state.short=e.short_name),e.types.indexOf("country")>-1&&(t.country.long=e.long_name,t.country.short=e.short_name),e.types.indexOf("administrative_area_level_3")>-1&&(t.locality.short=e.short_name)})),t}(e);this.germanAddress=t,t.vicinity&&this.addressFormGroup.get("vicinity").patchValue(t.vicinity),t.streetName&&this.addressFormGroup.get("streetName").patchValue(t.streetName),t.streetNumber&&this.addressFormGroup.get("streetNumber").patchValue(t.streetNumber.toString()),t.postalCode&&this.addressFormGroup.get("postalCode").patchValue(t.postalCode),t.locality&&t.locality.long&&this.addressFormGroup.get("locality.long").patchValue(t.locality.long),this.value=t,this.propagateChange(this.value),this.onGermanAddressMapped.emit(t)},a.prototype.writeValue=function(e){var t=!1;e&&(!this.value&&this.firstInit&&(t=!0),this.value=e,this.propagateChange(this.value),t&&(this.createAddressFormGroup(),this.firstInit=!1))},a.prototype.registerOnChange=function(e){this.propagateChange=e},a.prototype.registerOnTouched=function(e){},a.prototype.setDisabledState=function(e){},a.ctorParameters=function(){return[{type:o.FormBuilder}]},p([t.Input()],a.prototype,"appearance",void 0),p([t.Input()],a.prototype,"searchAddressLabel",void 0),p([t.Input()],a.prototype,"streetNameLabel",void 0),p([t.Input()],a.prototype,"streetNumberLabel",void 0),p([t.Input()],a.prototype,"postalCodeLabel",void 0),p([t.Input()],a.prototype,"localityLabel",void 0),p([t.Input()],a.prototype,"vicinityLabel",void 0),p([t.Input()],a.prototype,"showVicinity",void 0),p([t.Input()],a.prototype,"country",void 0),p([t.Input()],a.prototype,"placeIdOnly",void 0),p([t.Input()],a.prototype,"strictBounds",void 0),p([t.Input()],a.prototype,"types",void 0),p([t.Input()],a.prototype,"type",void 0),p([t.Input()],a.prototype,"readonly",void 0),p([t.Input()],a.prototype,"disableSearch",void 0),p([t.Input()],a.prototype,"value",void 0),p([t.Output()],a.prototype,"onGermanAddressMapped",void 0),a=n=p([t.Component({selector:"mat-search-google-maps-autocomplete",template:'<div fxLayout="column">\n  <div *ngIf="!disableSearch" fxFlex="100">\n    \x3c!--search address--\x3e\n    <mat-form-field fxFlex="auto" [appearance]="appearance" [@animate]="{ value: \'*\', params: { y: \'100%\' } }">\n      <mat-label>{{searchAddressLabel}}</mat-label>\n      <input\n        (onAutocompleteSelected)="syncAutoComplete($event)"\n        [country]="country"\n        [placeIdOnly]="placeIdOnly"\n        [strictBounds]="strictBounds"\n        [types]="types"\n        [type]="type"\n        matGoogleMapsAutocomplete\n        matInput\n        required\n      />\n      <mat-icon color="primary" matSuffix>search</mat-icon>\n      \x3c!--    <mat-error>{{ \'msa.contactData.currentAddress.error\' | translate }}</mat-error>--\x3e\n    </mat-form-field>\n  </div>\n\n  <form [formGroup]="addressFormGroup" fxFlex fxLayoutGap="10px">\n    <div fxLayout="row" fxLayoutGap="10px">\n      <mat-form-field fxFlex="80"\n                      [appearance]="appearance"\n                      [@animate]="{ value: \'*\', params: { y: \'100%\' } }">\n        <mat-label>{{streetNameLabel}}</mat-label>\n        <input\n          [readonly]="readonly"\n          formControlName="streetName"\n          matInput\n          required\n        />\n        \x3c!--        <mat-icon color="primary" matSuffix>add_location</mat-icon>--\x3e\n        \x3c!--    <mat-error>{{ \'msa.contactData.currentAddress.error\' | translate }}</mat-error>--\x3e\n      </mat-form-field>\n      <mat-form-field fxFlex="20" [appearance]="appearance" [@animate]="{ value: \'*\', params: { y: \'100%\' } }">\n        <mat-label>{{streetNumberLabel}}</mat-label>\n        <input\n          [readonly]="readonly"\n          formControlName="streetNumber"\n          matInput\n          required\n        />\n        \x3c!--        <mat-icon color="primary" matSuffix>add_location</mat-icon>--\x3e\n        \x3c!--    <mat-error>{{ \'msa.contactData.currentAddress.error\' | translate }}</mat-error>--\x3e\n      </mat-form-field>\n    </div>\n    <div fxLayout="row" fxLayoutGap="10px">\n      <mat-form-field fxFlex="20" [appearance]="appearance" [@animate]="{ value: \'*\', params: { y: \'100%\' } }">\n        <mat-label>{{postalCodeLabel}}</mat-label>\n        <input\n          [readonly]="readonly"\n          formControlName="postalCode"\n          matInput\n          required\n        />\n        \x3c!--        <mat-icon color="primary" matSuffix>add_location</mat-icon>--\x3e\n        \x3c!--    <mat-error>{{ \'msa.contactData.currentAddress.error\' | translate }}</mat-error>--\x3e\n      </mat-form-field>\n      <mat-form-field *ngIf="showVicinity" fxFlex="auto"\n                      [appearance]="appearance"\n                      [@animate]="{ value: \'*\', params: { y: \'100%\' } }">\n        <mat-label>{{vicinityLabel}}</mat-label>\n        <input\n          [readonly]="readonly"\n          matInput\n          formControlName="vicinity"\n        />\n      </mat-form-field>\n      <div formGroupName="locality" fxFlex="auto">\n        <mat-form-field fxFlex="auto" [appearance]="appearance" [@animate]="{ value: \'*\', params: { y: \'100%\' } }">\n          <mat-label>{{localityLabel}}</mat-label>\n          <input\n            [readonly]="readonly"\n            formControlName="long"\n            matInput\n            required\n          />\n          <mat-icon color="primary" matSuffix>add_location</mat-icon>\n          \x3c!--    <mat-error>{{ \'msa.contactData.currentAddress.error\' | translate }}</mat-error>--\x3e\n        </mat-form-field>\n      </div>\n    </div>\n  </form>\n</div>\n',animations:y,providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return n})),multi:!0}],styles:[""]})],a)}(),g=function(){function e(e,a,n,r){this.platformId=e,this.elemRef=a,this.mapsAPILoader=n,this.ngZone=r,this.autoCompleteOptions={},this.onChange=new t.EventEmitter,this.onAutocompleteSelected=new t.EventEmitter,this.onGermanAddressMapped=new t.EventEmitter,this.onLocationSelected=new t.EventEmitter,this.onNewPlaceResult=new t.EventEmitter,this.addressValidator=new u,this.addressSearchControl=new o.FormControl({value:null},o.Validators.compose([o.Validators.required,this.addressValidator.validate()])),this.propagateChange=function(e){}}var n,i,s;return n=e,e.prototype.ngOnInit=function(){if(r.isPlatformBrowser(this.platformId)){this.addressValidator.subscribe(this.onNewPlaceResult);var e={placeIdOnly:this.placeIdOnly,strictBounds:this.strictBounds,type:this.type};this.country&&(e.componentRestrictions={country:this.country}),this.country&&(e.types=this.types),this.autoCompleteOptions=Object.assign(this.autoCompleteOptions,e),this.initGoogleMapsAutocomplete()}},e.prototype.initGoogleMapsAutocomplete=function(){var e=this;this.mapsAPILoader.load().then((function(){var t=new google.maps.places.Autocomplete(e.elemRef.nativeElement,e.autoCompleteOptions);t.addListener("place_changed",(function(){e.ngZone.run((function(){var o=t.getPlace(),a={gmID:o.id,icon:o.icon,url:o.url,placeID:o.place_id,displayAddress:o.formatted_address,name:o.name,vicinity:o.vicinity,locality:{},state:{},country:{},geoLocation:{latitude:-1,longitude:-1}};o.geometry&&o.geometry.location&&(a.geoLocation.latitude=o.geometry.location.lat(),a.geoLocation.longitude=o.geometry.location.lng()),o.address_components.forEach((function(e){e.types.indexOf("street_number")>-1&&(a.streetNumber=e.short_name),e.types.indexOf("route")>-1&&(a.streetName=e.long_name),e.types.indexOf("postal_code")>-1&&(a.postalCode=Number(e.short_name)),e.types.indexOf("sublocality")>-1&&(a.sublocality=e.long_name),e.types.indexOf("locality")>-1&&(a.locality.long=e.long_name,a.locality.short=e.short_name),e.types.indexOf("administrative_area_level_1")>-1&&(a.state.long=e.long_name,a.state.short=e.short_name),e.types.indexOf("country")>-1&&(a.country.long=e.long_name,a.country.short=e.short_name),e.types.indexOf("administrative_area_level_3")>-1&&(a.locality.short=e.short_name)})),e.onGermanAddressMapped.emit(a),o.place_id&&void 0!==o.geometry&&null!==o.geometry&&(e.value=o,e.propagateChange(e.value),e.address=o.formatted_address,e.onAutocompleteSelected.emit(o),e.onLocationSelected.emit({latitude:o.geometry.location.lat(),longitude:o.geometry.location.lng()}))}))}))})).catch((function(e){return console.log(e)}))},e.prototype.registerOnChange=function(e){this.propagateChange=e},e.prototype.registerOnTouched=function(e){},e.prototype.setDisabledState=function(e){},e.prototype.writeValue=function(e){e&&(this.value=e)},e.ctorParameters=function(){return[{type:String,decorators:[{type:t.Inject,args:[t.PLATFORM_ID]}]},{type:t.ElementRef},{type:a.MapsAPILoader},{type:t.NgZone}]},p([t.Input()],e.prototype,"address",void 0),p([t.Input()],e.prototype,"country",void 0),p([t.Input()],e.prototype,"placeIdOnly",void 0),p([t.Input()],e.prototype,"strictBounds",void 0),p([t.Input()],e.prototype,"types",void 0),p([t.Input()],e.prototype,"type",void 0),p([t.Input()],e.prototype,"autoCompleteOptions",void 0),p([t.Output()],e.prototype,"onChange",void 0),p([t.Output()],e.prototype,"onAutocompleteSelected",void 0),p([t.Output()],e.prototype,"onGermanAddressMapped",void 0),p([t.Output()],e.prototype,"onLocationSelected",void 0),e=n=p([t.Directive({selector:"[matGoogleMapsAutocomplete]",exportAs:"matGoogleMapsAutocomplete",providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return n})),multi:!0}]}),(i=0,s=t.Inject(t.PLATFORM_ID),function(e,t){s(e,t,i)})],e)}(),f=function(){function e(){}return e=p([t.NgModule({imports:[r.CommonModule,o.FormsModule,o.ReactiveFormsModule,i.FlexLayoutModule,l.MatInputModule,s.MatIconModule],exports:[c,g,u,h],declarations:[c,g,u,h]})],e)}();e.MatGoogleMapsAutocompleteComponent=c,e.MatGoogleMapsAutocompleteDirective=g,e.MatGoogleMapsAutocompleteModule=f,e.MatSearchGoogleMapsAutocompleteComponent=h,e.MatValidateAddressDirective=u,e.ɵa=c,e.ɵb=h,e.ɵc=y,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=angular-material-extensions-google-maps-autocomplete.umd.min.js.map