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

## Dev, Build and Test

import { LightningElement, api, track } from 'lwc';

import Dropdown_State_Expanded from '@salesforce/label/c.Pfm_Dropdown_State_Expanded';
import Dropdown_State_Collapsed from '@salesforce/label/c.Pfm_Dropdown_State_Collapsed';

export default class PfmDropdown extends LightningElement {
    @api icon = 'utility:down'; // only use utility icons found here: https://www.lightningdesignsystem.com/icons/#utility
    @api iconPosition = 'right'; // left, right
    @api iconSize = 'xx-small'; // xx-small, x-small, small, medium, large, x-large
    @api label; // string to be displayed inside of button
    @api menuList; // list of menu items
    @api position = 'left'; // left, right
    @api type = 'default'; // default, outline, success, danger, link
    @api alternativeText; // aria attribute

    @track dropdownMenuClasses;
    @track classes;
    @track dropdownState;

    get alternativeTextMenu() {
        return this.alternativeText + ' ' + 'Menu';
    }

    connectedCallback() {

        let valPosition = this.position,
            position;

        position = valPosition === 'left' ? ' pfm-dropdown_content-left' : ' pfm-dropdown_content-right';

        this.dropdownMenuClasses = 'pfm-dropdown_content' + position;

        if (this.icon === 'false') this.icon = false;
    }
    renderedCallback() {
        const dropdown = this.template.querySelector('.pfm-dropdown'),
              menus = this.template.querySelectorAll('.pfm-dropdown_item');

        dropdown.addEventListener('click', () => {
            const isOpen = this.classList.contains('js-dropdown_open'),
                  btn = this.template.querySelector('c-pfm-button');
            btn.endLoader();
            dropdown.setAttribute('aria-expanded', !isOpen);
            this.openMenu(!isOpen);
        });
        dropdown.addEventListener('keydown',(e) => {
            if(e.key === 'Escape') {
                this.openMenu(false);
            }
        })
        menus.forEach(menu => {
            menu.addEventListener('keydown', (e) => {
                if (e.key === 'Enter') {
                    this.selectValue(e);
                }
            })
        })
    }
    selectValue(event) {
        const selectedValue = new CustomEvent('menuselect', {
            detail: {
                title: event.target.title,
                path: event.target.href
            }
        });
        this.dispatchEvent(selectedValue);
    }
    @api
    startLoader() {
        const btn = this.template.querySelector('c-pfm-button');
        btn.startLoader();
    }
    openMenu(state) {
        if (state) {
            this.classList.add('js-dropdown_open');
        } else {
            this.classList.remove('js-dropdown_open');
            this.template.querySelector('.pfm-dropdown').setAttribute('aria-expanded', false);
        }

        const dropdown = this.template.querySelector('.pfm-dropdown'),
              items = dropdown.querySelectorAll('a');

        items.forEach((item, i) => {
            items[i].tabIndex = state ? '0' : '-1';
        })

        this.announceDropdownState(state);
    }
    announceDropdownState(state) {
        const dropdown = this.template.querySelector('.pfm-dropdown'),
              ariaState = state ? Dropdown_State_Expanded : Dropdown_State_Collapsed;
        dropdown.setAttribute('aria-live', 'polite');
        dropdown.setAttribute('aria-label', ariaState.replace('{0}', this.label));
        dropdown.setAttribute('aria-live', 'stop');
    }
}