@firestitch/address
Version:
@firestitch/address
1,220 lines (1,069 loc) • 56.5 kB
HTML
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>@firestitch/address documentation</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="../images/favicon.ico">
<link rel="stylesheet" href="../styles/style.css">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top visible-xs">
<a href="../" class="navbar-brand">@firestitch/address documentation</a>
<button type="button" class="btn btn-default btn-menu fa fa-bars" id="btn-menu"></button>
</div>
<div class="xs-menu menu" id="mobile-menu">
<div id="book-search-input" role="search">
<input type="text" placeholder="Type to search">
</div>
<nav>
<ul class="list">
<li class="title">
<a href="../index.html">@firestitch/address documentation</a>
</li>
<li class="divider"></li>
<li class="chapter">
<a data-type="chapter-link" href="../index.html"><span class="fa fa-home"></span>Getting started</a>
<ul class="links">
<li class="link">
<a
href="../overview.html"
href="../overview.html"
>
<span class="fa fa-th"></span>Overview
</a>
</li>
<li class="link">
<a href="../index.html" ><span class="fa fa-file-text-o"></span>README</a>
</li>
</ul>
</li>
<li class="chapter">
<a data-type="chapter-link" href="../modules.html" >
<div class="menu-toggler linked" data-toggle="collapse"
data-target="#xs-modules-links"
>
<span class="fa fa-archive"></span>
<span class="link-name">Modules</span>
<span class="fa fa-angle-down"></span>
</div>
</a>
<ul class="links collapse "
id="xs-modules-links"
>
<li class="link">
<a href="../modules/FsAddressModule.html" >FsAddressModule</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#xs-components-links"
>
<span class="fa fa-cogs"></span>
<span>Components</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="xs-components-links"
>
<li class="link">
<a href="../components/FsAddressComponent.html" data-type="entity-link" class="active" >FsAddressComponent</a>
</li>
<li class="link">
<a href="../components/FsAddressFormatComponent.html" >FsAddressFormatComponent</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#xs-classes-links"
>
<span class="fa fa-file-code-o"></span>
<span>Classes</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="xs-classes-links"
>
<li class="link">
<a href="../classes/GoogleMapConfig.html" >GoogleMapConfig</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#xs-interfaces-links"
>
<span class="fa fa-info"></span>
<span>Interfaces</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="xs-interfaces-links"
>
<li class="link">
<a href="../interfaces/FsAddress.html" >FsAddress</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#xs-miscellaneous-links"
>
<span class="fa fa-cubes"></span>
<span>Miscellaneous</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="xs-miscellaneous-links"
>
<li class="link">
<a href="../miscellaneous/variables.html" data-type="entity-link" >Variables</a>
</li>
</ul>
</li>
<li class="chapter">
<a data-type="chapter-link" href="../coverage.html" ><span class="fa fa-tasks"></span>Documentation coverage</a>
</li>
</ul>
</nav>
</div>
<div class="container-fluid main">
<div class="row main">
<div class="hidden-xs menu">
<nav>
<ul class="list">
<li class="title">
<a href="../index.html">@firestitch/address documentation</a>
</li>
<li class="divider"></li>
<div id="book-search-input" role="search">
<input type="text" placeholder="Type to search">
</div>
<li class="chapter">
<a data-type="chapter-link" href="../index.html"><span class="fa fa-home"></span>Getting started</a>
<ul class="links">
<li class="link">
<a
href="../overview.html"
href="../overview.html"
>
<span class="fa fa-th"></span>Overview
</a>
</li>
<li class="link">
<a href="../index.html" ><span class="fa fa-file-text-o"></span>README</a>
</li>
</ul>
</li>
<li class="chapter">
<a data-type="chapter-link" href="../modules.html" >
<div class="menu-toggler linked" data-toggle="collapse"
data-target="#modules-links"
>
<span class="fa fa-archive"></span>
<span class="link-name">Modules</span>
<span class="fa fa-angle-down"></span>
</div>
</a>
<ul class="links collapse "
id="modules-links"
>
<li class="link">
<a href="../modules/FsAddressModule.html" >FsAddressModule</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#components-links"
>
<span class="fa fa-cogs"></span>
<span>Components</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="components-links"
>
<li class="link">
<a href="../components/FsAddressComponent.html" data-type="entity-link" class="active" >FsAddressComponent</a>
</li>
<li class="link">
<a href="../components/FsAddressFormatComponent.html" >FsAddressFormatComponent</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#classes-links"
>
<span class="fa fa-file-code-o"></span>
<span>Classes</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="classes-links"
>
<li class="link">
<a href="../classes/GoogleMapConfig.html" >GoogleMapConfig</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#interfaces-links"
>
<span class="fa fa-info"></span>
<span>Interfaces</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="interfaces-links"
>
<li class="link">
<a href="../interfaces/FsAddress.html" >FsAddress</a>
</li>
</ul>
</li>
<li class="chapter">
<div class="simple menu-toggler" data-toggle="collapse"
data-target="#miscellaneous-links"
>
<span class="fa fa-cubes"></span>
<span>Miscellaneous</span>
<span class="fa fa-angle-down"></span>
</div>
<ul class="links collapse "
id="miscellaneous-links"
>
<li class="link">
<a href="../miscellaneous/variables.html" data-type="entity-link" >Variables</a>
</li>
</ul>
</li>
<li class="chapter">
<a data-type="chapter-link" href="../coverage.html" ><span class="fa fa-tasks"></span>Documentation coverage</a>
</li>
</ul>
</nav>
</div>
<div class="content component">
<div class="content-data">
<ol class="breadcrumb">
<li>Components</li>
<li>FsAddressComponent</li>
</ol>
<ul class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#info" id="info-tab" role="tab" data-toggle="tab" data-link="info">Info</a>
</li>
<li>
<a href="#templateData" role="tab" id="templateData-tab" data-toggle="tab" data-link="template">Template</a>
</li>
<li>
<a href="#tree" role="tab" id="tree-tab" data-toggle="tab" data-link="dom-tree">DOM Tree</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="c-info"><p class="comment">
<h3>File</h3>
</p>
<p class="comment">
<code>src/components/fs-address/fs-address.component.ts</code>
</p>
<p class="comment">
<h3>Implements</h3>
</p>
<p class="comment">
<code><a href="https://angular.io/api/core/OnInit" target="_blank" >OnInit</a></code>
<code><a href="https://angular.io/api/core/OnDestroy" target="_blank" >OnDestroy</a></code>
</p>
<section>
<h3>Metadata</h3>
<table class="table table-sm table-hover">
<tbody>
<tr>
<td class="col-md-3">selector</td>
<td class="col-md-9"><code>fs-address</code></td>
</tr>
<tr>
<td class="col-md-3">styleUrls</td>
<td class="col-md-9"><code>fs-address.component.scss</code></td>
</tr>
<tr>
<td class="col-md-3">templateUrl</td>
<td class="col-md-9"><code>./fs-address.component.html</code></td>
</tr>
<tr>
<td class="col-md-3">viewProviders</td>
<td class="col-md-9">
<code>
{ : , : }
</code>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="index">Index</h3>
<table class="table table-sm table-bordered index-table">
<tbody>
<tr>
<td class="col-md-4">
<h6><b>Properties</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#agmMap">agmMap</a>
</li>
<li>
<a href="#agmMarker">agmMarker</a>
</li>
<li>
<a href="#center">center</a>
</li>
<li>
<a href="#countries">countries</a>
</li>
<li>
<a href="#map">map</a>
</li>
<li>
<a href="#mapOptions">mapOptions</a>
</li>
<li>
<a href="#mapReady$">mapReady$</a>
</li>
<li>
<a href="#marker">marker</a>
</li>
<li>
<a href="#regionLabel">regionLabel</a>
</li>
<li>
<a href="#regions">regions</a>
</li>
<li>
<a href="#searched">searched</a>
</li>
<li>
<a href="#searchedAddress">searchedAddress</a>
</li>
<li>
<a href="#zipLabel">zipLabel</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Methods</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#changeCountry">changeCountry</a>
</li>
<li>
<a href="#ngOnDestroy">ngOnDestroy</a>
</li>
<li>
<a href="#ngOnInit">ngOnInit</a>
</li>
<li>
<a href="#recenter">recenter</a>
</li>
<li>
<a href="#search">search</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Inputs</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#address">address</a>
</li>
<li>
<a href="#config">config</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Outputs</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#change">change</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="constructor">Constructor</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<code>constructor(_wrapper: GoogleMapsAPIWrapper, markerManager: MarkerManager)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div>
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>_wrapper</td>
<td>
<code>GoogleMapsAPIWrapper</code>
</td>
<td>
</td>
<td></td>
</tr>
<tr>
<td>markerManager</td>
<td>
<code>MarkerManager</code>
</td>
<td>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="inputs">Inputs</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-2">
<a name="address"></a>
<code>address</code>
</td>
<td class="col-md-10">
<p>
<em>Type:</em> <code><a href="../interfaces/FsAddress.html" target="_self" >FsAddress</a></code>
</p>
<p>
<em>Default value: </em><code>{}</code>
</p>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-2">
<a name="config"></a>
<code>config</code>
</td>
<td class="col-md-10">
<p>
<em>Default value: </em><code>null</code>
</p>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="outputs">Outputs</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-2">
<a name="change"></a>
<code>change</code>
</td>
<td class="col-md-10">
<em><code>$event</code> type:</em> <code><a href="https://angular.io/api/core/EventEmitter" target="_blank" >EventEmitter</a></code>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="methods">
Methods
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="changeCountry"></a>
<span class="name">
<b>
changeCountry
</b>
<a href="#changeCountry"><span class="fa fa-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>changeCountry()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="ngOnDestroy"></a>
<span class="name">
<b>
ngOnDestroy
</b>
<a href="#ngOnDestroy"><span class="fa fa-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>ngOnDestroy()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="ngOnInit"></a>
<span class="name">
<b>
ngOnInit
</b>
<a href="#ngOnInit"><span class="fa fa-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>ngOnInit()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="recenter"></a>
<span class="name">
<b>
recenter
</b>
<a href="#recenter"><span class="fa fa-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>recenter()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="search"></a>
<span class="name">
<b>
search
</b>
<a href="#search"><span class="fa fa-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>search()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section>
<h3 id="inputs">
Properties
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="agmMap"></a>
<span class="name">
<b>
agmMap
</b>
<a href="#agmMap"><span class="fa fa-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>agmMap: <code></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Decorators : </i><code>ViewChild</code>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="agmMarker"></a>
<span class="name">
<b>
agmMarker
</b>
<a href="#agmMarker"><span class="fa fa-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>agmMarker: <code></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Decorators : </i><code>ViewChild</code>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="center"></a>
<span class="name">
<b>
center
</b>
<a href="#center"><span class="fa fa-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>center: <code></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>null</code>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="countries"></a>
<span class="name">
<b>
countries
</b>
<a href="#countries"><span class="fa fa-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>countries: <code></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>{
domestic: [],
international: []
}</code>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="map"></a>
<span class="name">
<b>
map
</b>
<a href="#map"><span class="fa fa-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>map: <code></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>null</code>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="mapOptions"></a>
<span class="name">
<b>
mapOptions
</b>
<a href="#mapOptions"><span class="fa fa-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>mapOptions: <code></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>null</code>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="mapReady$"></a>
<span class="name">
<b>
mapReady$
</b>
<a href="#mapReady$"><span class="fa fa-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>mapReady$: <code></code>
</code>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="marker"></a>
<span class="name">
<b>
marker
</b>
<a href="#marker"><span class="fa fa-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>marker: <code></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>null</code>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="regionLabel"></a>
<span class="name">
<b>
regionLabel
</b>
<a href="#regionLabel"><span class="fa fa-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>regionLabel: <code></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>''</code>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="regions"></a>
<span class="name">
<b>
regions
</b>
<a href="#regions"><span class="fa fa-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>regions: <code></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>[]</code>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="searched"></a>
<span class="name">
<b>
searched
</b>
<a href="#searched"><span class="fa fa-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>searched: <code></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>false</code>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="searchedAddress"></a>
<span class="name">
<b>
searchedAddress
</b>
<a href="#searchedAddress"><span class="fa fa-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>searchedAddress: <code></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>''</code>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="zipLabel"></a>
<span class="name">
<b>
zipLabel
</b>
<a href="#zipLabel"><span class="fa fa-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>zipLabel: <code></code>
</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>''</code>
</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="tab-pane fade" id="c-templateData">
<pre class="line-numbers"><code class="language-html"><div>
<div fxLayout="row">
<mat-form-field fxFlex>
<input matInput [(ngModel)]="address[config.address.name]" [attr.disabled]="config.disabled" [fsFormRequired]="config.address.required" name="{{ config.address.id }}" placeholder="Address" aria-label="Address" (change)="search()" autocomplete="off">
</mat-form-field>
<mat-form-field fxFlex [hidden]="!config.address2.show">
<input matInput [(ngModel)]="address[config.address2.name]" [attr.disabled]="config.disabled" [fsFormRequired]="config.address2.required" name="{{ config.address2.id }}" placeholder="Address 2" aria-label="Address 2" (change)="search()">
<mat-hint>Apartment, suite, unit, building, floor, etc.</mat-hint>
</mat-form-field>
</div>
<div fxLayout="row">
<mat-form-field fxFlex>
<input matInput [(ngModel)]="address[config.city.name]" [attr.disabled]="config.disabled" [fsFormRequired]="config.city.required" name="{{ config.city.id }}" placeholder="City" aria-label="City" (change)="search()">
</mat-form-field>
<mat-form-field fxFlex>
<input matInput [(ngModel)]="address[config.zip.name]" [attr.disabled]="config.disabled" [fsFormRequired]="config.zip.required" name="{{ config.zip.id }}" placeholder="{{ zipLabel }}" (change)="search()">
</mat-form-field>
</div>
<div fxLayout="row">
<mat-form-field fxFlex>
<mat-select [(ngModel)]="address[config.country.name]" [attr.disabled]="config.disabled" [fsFormRequired]="config.country.required" name="{{ config.country.id }}" placeholder="Country" aria-label="Country" (ngModelChange)="changeCountry()" (change)="search()">
<mat-option *ngFor="let country of countries.domestic" [value]="country.code">
<span>{{ country.name }}</span>
</mat-option>
<ng-container *ngIf="countries.international.length">
<mat-option *ngFor="let country of countries.international" [value]="country.code">
<span>{{ country.name }}</span>
</mat-option>
</ng-container>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex>
<mat-select [(ngModel)]="address[config.region.name]" [attr.disabled]="config.disabled" [fsFormRequired]="config.region.required" name="{{ config.region.id }}" placeholder="{{ regionLabel }}" (change)="search()">
<mat-option *ngFor="let region of regions" [value]="region.code">
<span>{{ region.name }}</span>
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="map-container" [hidden]="!config.map">
<button mat-button class="center"
type="button"
*ngIf="(address.lat && address.lng) && (marker.coords.latitude && marker.coords.longitude)"
(click)="recenter()">Center Map using Address</button>
<agm-map
[latitude]="map.center.latitude"
[longitude]="map.center.longitude"
[zoom]="map.zoom"
[scrollwheel]="mapOptions.scrollwheel"
[streetViewControl]="mapOptions.streetViewControl"
[mapTypeControlOptions]="mapOptions.mapTypeControlOptions"
>
<agm-marker
[latitude]="marker.coords.latitude"
[longitude]="marker.coords.longitude"
[markerDraggable]="marker.options.draggable"
(dragEnd)="marker.events.dragend($event)"
></agm-marker>
</agm-map>
<div class="address-incomplete" fxLayout="row" fxLayoutAlign="center center" *ngIf="!address.lat && !address.lng">
<div *ngIf="!searched">Please populate the addres