fonteva-design-guide/force-app/main/default/lwc/pfmInputAddress/pfmInputAddress.js

## Dev, Build and Test

import { LightningElement, track, api, wire } from 'lwc';
import BASE from '@salesforce/resourceUrl/PFM_Base';
import { loadStyle } from 'lightning/platformResourceLoader';
import { generateId } from 'c/actionutils';
import { cloneDeep, fireEvent } from 'c/utils';
import getPicklistOptions from '@salesforce/apex/Framework.DependentPicklistInputController.getPicklistOptions';

export default class PfmInputAddress extends LightningElement {
    @api tabIndex;
    @api name;
    @api val;
    @api required = false;
    @api otherAttributes = {};
    @api labels;
    @api label;
    @api errors = [];
    @api backend;

    @track localVal = {};
    @track showError;
    @track searchResults = [];
    @track localLabels = {};
    @track addressiFrameUrl;
    @track showIframe = false;

    uniqueId;
    countries = [];
    provinces = {};
    scrollAfterNItems = 5;
    customValidateMessagesSet = false;

    constructor() {
        super();
        this.uniqueId = generateId(10);
        this.addressiFrameUrl = BASE + '/html/Address.html';
        this.showIframe = true;
    }

    @api
    updateValue(val) {
        if (val) {
            this.localVal = val;
        } else {
            this.localVal = { street: null, city: null, province: null, country: null, postalCode: null };
        }
    }

    connectedCallback() {
        this.loadDependentStyles();
        window.addEventListener('message', event => {
            this.receiveMessage(this, event);
        });
        if (this.val != null && this.val.country != null) {
            this.countrySelected = this.val.country;
        }
        if (this.labels == null) {
            this.localLabels = {
                streetLabel: 'Street',
                cityLabel: 'City',
                countryLabel: 'Country',
                postalCodeLabel: 'Postal Code',
                provinceLabel: 'State'
            };
        } else {
            this.localLabels = this.labels;
        }
    }

    renderedCallback() {
        if (!this.customValidateMessagesSet) {
            this.setCustomValidityMessages();
        }
    }

    receiveMessage(self, event) {
        if (event.data.identifier === self.uniqueId) {
            if (event.data.type === 'queryResult') {
                if (event.data.predictions != null) {
                    if (event.data.predictions.length === 0) {
                        self.searchResults = [];
                    } else {
                        self.setSearchResults(
                            event.data.predictions.map(r => {
                                return {
                                    id: r.place_id,
                                    value: r.description
                                };
                            })
                        );
                    }
                }
            } else if (event.data.type === 'placeDetail') {
                let localPlace = event.data.place;
                if (localPlace.street_number != null) {
                    localPlace.street_name = localPlace.street_number + ' ' + localPlace.street_name;
                }
                localPlace.street = localPlace.street_name;
                localPlace.postalCode = localPlace.postal_code;
                self.localVal = localPlace;

                setTimeout(() => {
                    fireEvent(this, 'valuechanged', { field: this.name, value: localPlace });
                }, 1);
            }
        }
    }

    @api
    setSearchResults(results) {
        this.searchResults = results.map(result => {
            if (typeof result.icon === 'undefined') {
                result.icon = 'standard:default';
            }
            return result;
        });
    }

    setCustomValidityMessages() {
        let inputField = this.template.querySelector('lightning-input-address');
        if (inputField) {
            this.customValidateMessagesSet = true;
            // inputField.setCustomValidityForField(this.localLabels.streetLabel+' is required.','street');
            // inputField.setCustomValidityForField(this.localLabels.cityLabel+' is required.','city');
            // inputField.setCustomValidityForField(this.localLabels.provinceLabel+' is required.','province');
            // inputField.setCustomValidityForField(this.localLabels.postalCodeLabel+' is required.','postalCode');
            // inputField.setCustomValidityForField(this.localLabels.countryLabel+' is required.','country');
        }
    }

    get getInputClass() {
        return (
            'slds-input slds-combobox__input has-custom-height ' +
            (this.errors != null && this.errors.length === 0 ? '' : 'has-custom-error ')
        );
    }

    get getSearchIconClass() {
        return 'slds-input__icon slds-input__icon_right ';
    }

    handleInput(evt) {
        let value = evt.detail ? evt.detail.value : evt.target.value;
        if (value != null && value.length > 3) {
            this.template.querySelector('iframe').contentWindow.postMessage(
                {
                    identifier: this.uniqueId,
                    type: 'query',
                    query: value
                },
                '*'
            );
        } else {
            this.searchResults = [];
        }
    }

    get getListboxClass() {
        if (this.searchResults != null && this.searchResults.length === 0) {
            return 'slds-hidden';
        }
        return (
            'slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid ' +
            (this.scrollAfterNItems ? 'slds-dropdown_length-with-icon-' + this.scrollAfterNItems : '')
        );
    }

    handleResultClick(event) {
        const recordId = event.currentTarget.dataset.recordid;
        this.template.querySelector('iframe').contentWindow.postMessage(
            {
                identifier: this.uniqueId,
                type: 'placeDetail',
                placeId: recordId
            },
            '*'
        );
        this.searchResults = [];
        this.template.querySelector('c-pfm-input').updateValue(null, false);
    }

    handleAddressChange(evt) {
        let localValObj = {
            street: evt.currentTarget.street,
            city: evt.currentTarget.city,
            country: evt.currentTarget.country,
            province: evt.currentTarget.province,
            postalCode: evt.currentTarget.postalCode
        };
        this.localVal.country = localValObj.country;

        fireEvent(this, 'valuechanged', { field: this.name, value: localValObj });
    }

    @wire(getPicklistOptions, {
        objectName: 'Contact',
        controllingField: 'mailingcountrycode',
        dependentField: 'mailingstatecode'
    })
    wiredAccount({ error, data }) {
        if (data) {
            let countries = [];
            let provinces = {};
            Object.keys(data).forEach(function (element) {
                let nameArr = element.split('__');
                countries.push({ label: nameArr[0], value: nameArr[0] });
                provinces[nameArr[0]] = data[element];
            });
            this.countries = countries;
            this.provinces = provinces;
        } else if (error) {
            console.log(JSON.stringify(error));
        }
    }

    get getCountryOptions() {
        if (this.countries.length > 0) {
            return this.countries;
        }
    }
    get getProvinceOptions() {
        if (this.localVal && this.localVal.country) {
            return this.provinces[this.localVal.country];
        }
    }

    @api
    setCustomValidity() {}

    @api
    checkValidity() {
        return this.template.querySelector('lightning-input-address').checkValidity();
    }

    @api
    reportValidity() {
        this.template.querySelector('lightning-input-address').reportValidity();
    }
    loadDependentStyles() {
        if (!window.pfmAddressStyleLoaded) {
            loadStyle(this, BASE + '/css/component/input/address.css');
            window.pfmAddressStyleLoaded = true;
        }
    }
}