dgtek-autocomplete-address

dgtek-autocomplete-address

Package installation

yarn add dgtek-autocomplete-address

Start package

import DGtekAutocompleteAddress from 'dgtek-autocomplete-address'

window.customElements.define('dgtek-autocomplete-address', DGtekAutocompleteAddress)

Mount component

<dgtek-autocomplete-address />

or

const component = document.body
  .appendChild(document.createElement('dgtek-autocomplete-address'))

Styling elements

You can stylize elements:

document.getElementsByTagName('dgtek-autocomplete-address')[0]
  .setStyleOption('snackBar', 'backgroundColor', '#09b')
  .setStyleOption('snackBar', 'borderRadius', '0px')
  .setStyleOption('snackBar', 'borderColor', '#ff0')
  .setStyleOption('submitButton', 'backgroundColor', '#090')

There are some style properties which you can change:

Element	Style property	Default value
submitButton	borderRadius	4px
submitButton	border	4px solid transparent
submitButton	backgroundColor	#881f1a
submitButton	fontFamily	Gilroy, "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif
submitButton	fontSize	16px
submitButton	color	#fff
submitButton	padding	4px 8px
input	width	88%
input	padding	12px 16px
input	border	solid 1px #bbb
input	borderRadius	4px
input	fontFamily	Gilroy, "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif
snackBar	backgroundColor	#881f1aa0
snackBar	borderColor	#881f1a
snackBar	borderRadius	4px
snackBar	margin	8px 16px
snackBar	color	#fff
snackBar	fontSize	.875rem
snackBar	fontFamily	Gilroy, "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif
link	fontFamily	Gilroy, "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial, sans-serif
link	fontSize	14px
link	color	#ddd

Catch events

Submit button event:

window.addEventListener('submit-address', function (event) {
  console.log(event.detail)
})

Example of event.detail content:

address: "45 CLARKE ST, SOUTHBANK VIC 3006"
addressComponents: { number1: '45', number2: '', number: '45', street: 'CLARKE', streetType: 'ST', …}
buildingId: null
coordinates: { lat: -37.8269008, lng: 144.9595298 }
estimatedServiceDeliveryTime: ""
status: "polygons-service-available"

The most important here is status

Status possible variants

if address was found in DB:

• on-net • db-footprint • db-build-commenced • db-coming-soon

if the address belongs to some polygon

• polygons-service-available • polygons-build-commenced • polygons-coming-soon

otherwise

Failure events

During checking the address, a number of requests will be made to remote server.

Every request can fail.

window.addEventListener('server-error', function (event) {
  console.log(event.detail) /* { error: true, errorType: String, errorMessage: String } */
})

You can catch errors with handler for open-error-popup event:

window.addEventListener('open-error-popup', function (event) {
  console.log(event.detail) /* { error: true, errorType: String, errorMessage: String } */
})