custom dependent picklist

Creating a custom lightning web component for custom dependent pick-list

I created two custom picklist fields on account object called "TestPick__c" and "TestDepPick__c"
TestPick__c is a controlling field, TestDepPick__c is a dependennt field.

Based on the selection of TestPick__c fields TestDepPcik__c fields will vary.

Below is the component code,

custdepPicklist.html

<template>
    <lightning-card title="Dependent picklist" icon-name="custom:custom14">
        <lightning-layout>
            <lightning-layout-item>
                <div class="slds-m-around_medium">
                    <lightning-combobox label="Controlling picklist" name="cpick" onchange={handleCPicklist}
                        options={controlingpick} placeholder="--None--" value={selectedCpick}></lightning-combobox>
                    <br />
                    <template if:true={selectedCpick}>
                        <p>Controlling Value is, {selectedCpick}</p>
                    </template>
                </div>
            </lightning-layout-item>
            <lightning-layout-item>
                <div class="slds-m-around_medium">
                    <lightning-combobox label="Dependent picklist" name="dpick" onchange={handleDPicklist}
                     options={dependentpick} placeholder="--None--" value={selectedDpick}></lightning-combobox>
                     <br />
                    <template if:true={selectedDpick}>
                        <p>Dependent Pick Value is, {selectedDpick}</p>
                    </template>
                </div>
            </lightning-layout-item>
        </lightning-layout>
    </lightning-card>
</template>


custdepPicklist.js

import { LightningElement,wire } from 'lwc';
import { getPicklistValuesByRecordType } from 'lightning/uiObjectInfoApi';
import { getObjectInfo } from 'lightning/uiObjectInfoApi';
import ACCOUNT_OBJECT from '@salesforce/schema/Account';

export default class CustdepPicklist extends LightningElement {
    controlingpick = [];
    dependentpick = [];
    selectedCpick;
    selectedDpick;
    error;
    isEmpty;
    controllingValues;
    totDependentValues = [];

    // Account object info
    @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })
    objectInfo;

    // Picklist values based on record type
    @wire(getPicklistValuesByRecordType, { objectApiName: ACCOUNT_OBJECT, recordTypeId: '$objectInfo.data.defaultRecordTypeId'})
    primaryPicklistValues({error, data}) {
        if(data) {
            this.error = undefined;
            var controlingpickval = [{label:'--None--', value:'--None--'}];           
            data.picklistFieldValues.TestPick__c.values.forEach(key => {
                controlingpickval.push({
                    label : key.label,
                    value: key.value
                })
            });
            this.controlingpick = controlingpickval;
            var dependentOptions = [{label:'--None--', value:'--None--'}];            
            this.controllingValues = data.picklistFieldValues.TestDepPick__c.controllerValues;           
            this.totDependentValues = data.picklistFieldValues.TestDepPick__c.values;
            this.totDependentValues.forEach(key => {
                dependentOptions.push({
                    label : key.label,
                    value: key.value
                })
            });

            this.dependentpick = dependentOptions;
        }
        else if(error) {
            this.error = JSON.stringify(error);
        }
    }

    handleCPicklist(event) {       
        this.selectedCpick = event.target.value;
        this.isEmpty = false;
        var dependValues = [];

        if(this.selectedCpick) {           
            if(this.selectedCpick === '--None--') {
                this.isEmpty = true;
                dependValues = [{label:'--None--', value:'--None--'}];
                this.selectedCpick = null;
                this.selectedDpick = null;
                return;
            }           
            this.totDependentValues.forEach(conValues => {
                if(conValues.validFor[0] === this.controllingValues[this.selectedCpick]) {
                    dependValues.push({
                        label: conValues.label,
                        value: conValues.value
                    })
                }
            })

            this.dependentpick = dependValues;
        }
    }

    handleDPicklist(event) {
        this.selectedDpick = event.target.value;
    }
}

custdepPicklist.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>