1.0.4 • Published 2 years ago
dgtek-autocomplete-address v1.0.4
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 } */
})