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

## Dev, Build and Test

import { LightningElement, api, wire, track } from 'lwc';
import getSinglePicklistOptions from '@salesforce/apex/Framework.DependentPicklistInputController.getSinglePicklistOptions';
import getPicklistOptions from '@salesforce/apex/Framework.DependentPicklistInputController.getPicklistOptions';
import Is_Required from '@salesforce/label/c.Pfm_Is_Required';
import { parseToObject, fireEvent, cloneDeep } from 'c/utils';
import { registerListener, unregisterAllListeners, publishEvent } from 'c/pubsub';

export default class PfmPicklist extends LightningElement {
    @api tabIndex;
    @api name;
    @api val;
    @api required = false;
    @api options = [];
    @api otherAttributes = {};
    @api objectName;
    @api field;
    @api disabled;
    @api labels;
    _label;
    @api
    get label() {
        return this._label;
    }
    set label(value) {
        this._label = value;
        this.errorMsg = Is_Required.replace('{0}', value);
    }

    @track localVal;
    @track localOptions;
    @track showError;
    @track errorMsg;

    dependentOptions = {};
    localAttributes = {};
    localValue;
    isDependentField = false;
    isDisabled = false;
    nullValue = 'ZZZ_NOT_VALID_ZZZ';
    pleaseSelectPicklistOption = '-- Please Select --';

    connectedCallback() {
        this.localAttributes = cloneDeep(parseToObject(this.otherAttributes));
        if (this.localAttributes && this.localAttributes.parentControllingFieldKey) {
            registerListener('picklistOptionSelected', this.setDependentFieldValue, this);
        }
        this.buildPicklistOptions(null);
    }

    disconnectedCallback() {
        unregisterAllListeners(this);
    }

    @api
    setCustomValidity() {}

    @api
    updateOptions(options, val) {
        this.localOptions = cloneDeep(options);
        this.updateValue(val);
    }
    @api
    checkValidity() {
        if (this.isDependentField && this.isDisabled) {
            this.showError = false;
            this.toggleErrorClass();
            return;
        }
        this.showError = false;
        if (this.required && this.localValue == null) {
            this.showError = true;
            this.toggleErrorClass();
            return false;
        }
        return true;
    }

    @api
    reportValidity() {}

    optionSelected(evt) {
        this.firePicklistEvents(evt.target.value);
    }

    @api
    updateValue(val) {
        if (this.localOptions && this.localOptions.length > 0) {
            this.localOptions = this.localOptions.filter(item => {
                item.isSelected = false;
                if (item.value === val) {
                    item.isSelected = true;
                }
                return item;
            });
        }
    }

    firePicklistEvents(value) {
        if (value === this.nullValue) {
            value = null;
        }
        this.localValue = value;
        fireEvent(this, 'valuechanged', { field: this.name, value: value });
        if (
            this.localAttributes &&
            (this.localAttributes.parentControllingFieldKey || this.localAttributes.controllingFieldKey)
        ) {
            publishEvent('picklistOptionSelected', {
                field: this.name,
                value: value,
                controllingFieldKey: this.otherAttributes.controllingFieldKey
            });
        }
        this.showError = false;
        this.toggleErrorClass();
    }

    toggleErrorClass() {
        let input = this.template.querySelector("[data-id='picklist-wrapper']");
        if (this.showError) {
            input.classList.add('slds-has-error');
        } else {
            input.classList.remove('slds-has-error');
        }
    }

    buildPicklistOptions() {
        this.localAttributes = this.localAttributes || {};
        if (this.options != null && this.options.length > 0) {
            let optionsTemp = cloneDeep(this.options);
            if (!this.localAttributes.hidePleaseSelect) {
                optionsTemp.unshift({ label: this.pleaseSelectPicklistOption, value: this.nullValue });
            }
            this.localOptions = optionsTemp;
        } else if (
            this.options == null &&
            (this.localAttributes.controllingFieldKey || this.localAttributes.parentControllingFieldKey == null)
        ) {
            getSinglePicklistOptions({ objectName: this.objectName, field: this.field })
                .then(result => {
                    if (!this.localAttributes.hidePleaseSelect) {
                        result.unshift({ label: this.pleaseSelectPicklistOption, value: 'ZZZ_NOT_VALID_ZZZ' });
                    }
                    this.localOptions = result;
                })
                .catch(error => {
                    console.log(error);
                });
        } else if (this.localAttributes.parentControllingFieldKey) {
            this.isDependentField = true;
            getPicklistOptions({ objectName: this.objectName, dependentField: this.field })
                .then(result => {
                    for (let key in result) {
                        let labelValue = key.split('__');
                        this.dependentOptions[labelValue[1]] = result[key];
                    }
                    if (this.val == null) {
                        this.template.querySelector('select').setAttribute('disabled', true);
                        this.isDisabled = true;
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        }
    }

    setDependentFieldValue(evt) {
        this.localAttributes = this.localAttributes || {};
        if (
            this.localAttributes &&
            this.localAttributes.parentControllingFieldKey &&
            evt.controllingFieldKey === this.localAttributes.parentControllingFieldKey
        ) {
            if (
                !this.dependentOptions[evt.value] ||
                (this.dependentOptions[evt.value] && this.dependentOptions[evt.value].length === 0)
            ) {
                this.template.querySelector('select').setAttribute('disabled', true);
                this.isDisabled = true;
                this.firePicklistEvents(null);
                this.localOptions = [];
            } else {
                let depOpts = cloneDeep(this.dependentOptions[evt.value]);
                if (!this.localAttributes.hidePleaseSelect) {
                    depOpts.unshift({ label: this.pleaseSelectPicklistOption, value: this.nullValue });
                }
                this.template.querySelector('select').removeAttribute('disabled');
                this.isDisabled = false;
                this.localOptions = depOpts;
            }
        }
    }
}