@firestitch/address/src/components/fs-address/fs-address.component.html

@firestitch/address

<div>
  <div fxLayout="row">
    <mat-form-field fxFlex>
      <input
        matInput
        [(ngModel)]="address.name"
        [attr.disabled]="config.name.disabled"
        [fsFormRequired]="config.name.required"
        name="location_name"
        placeholder="Location name"
        aria-label="Location name"
        (change)="search($event)"
        autocomplete="off">
    </mat-form-field>
  </div>

  <div fxLayout="row">
    <mat-form-field fxFlex>
      <input
        matInput
        [(ngModel)]="address.street"
        [attr.disabled]="config.street.disabled"
        [fsFormRequired]="config.street.required"
        name="street"
        placeholder="Street"
        aria-label="Street"
        (change)="search($event)"
        autocomplete="off">
    </mat-form-field>
  </div>

  <div fxLayoutGap="5px">
    <mat-form-field fxFlex>
      <input
        matInput
        [(ngModel)]="address.city"
        [attr.disabled]="config.city.disabled"
        [fsFormRequired]="config.city.required"
        name="city"
        placeholder="City"
        aria-label="City"
        (change)="search($event)"
        autocomplete="off">
    </mat-form-field>
    <mat-form-field fxFlex>
      <input
        matInput
        [(ngModel)]="address.zip"
        [attr.disabled]="config.zip.disabled"
        [fsFormRequired]="config.zip.required"
        name="zip"
        aria-label="Zip"
        [placeholder]="zipLabel"
        (change)="search($event)"
        autocomplete="off">
    </mat-form-field>
  </div>

  <div fxLayoutGap="5px">
    <mat-form-field fxFlex>

      <mat-select
        [(ngModel)]="address.country"
        [attr.disabled]="config.country.disabled"
        [fsFormRequired]="config.country.required"
        name="country"
        placeholder="Country"
        aria-label="Country"
        (change)="changeCountry()"
        autocomplete="off">

        <mat-option *ngFor="let country of countries" [value]="country.code">
          <span>{{ country.name }}</span>
        </mat-option>

      </mat-select>

    </mat-form-field>

    <mat-form-field fxFlex>

      <mat-select
        [(ngModel)]="address.region"
        [attr.disabled]="config.region.disabled"
        [fsFormRequired]="config.region.required"
        name="region"
        placeholder="{{ regionLabel }}"
        (change)="changeRegion()"
        autocomplete="off">

        <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.showMap">

    <button
      mat-button
      class="center"
      type="button"
      *ngIf="(address.lat && address.lng) && (config.map.marker.coords.latitude && config.map.marker.coords.longitude)"
      (click)="recenter()"
    >Center Map using Address</button>

    <agm-map
      [latitude]="config.map.center.latitude"
      [longitude]="config.map.center.longitude"
      [zoom]="config.map.zoom"
      [scrollwheel]="config.map.scrollwheel"
      [streetViewControl]="config.map.streetViewControl"
      [zoomControl]="config.map.zoomControl"
      [mapTypeControlOptions]="config.map.mapTypeControlOptions"
    >
      <agm-marker
        [latitude]="config.map.marker.coords.latitude"
        [longitude]="config.map.marker.coords.longitude"
        [markerDraggable]="config.map.marker.options.draggable"
        (dragEnd)="config.map.marker.events.dragend($event)"
      ></agm-marker>
    </agm-map>

    <div class="address-incomplete" fxLayout="row" fxLayoutAlign="center center" *ngIf="!address.lat && !address.lng">
      <div *ngIf="!isSearched">Please populate the address above to locate it on the map</div>
      <div *ngIf="isSearched">Could not find address "{{ searchedAddress }}"</div>
    </div>
  </div>
</div>