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

## Dev, Build and Test

import { LightningElement, api, track } from 'lwc';
import { Selector } from 'c/utils';

export default class Drawer extends Selector(LightningElement) {
    @api backend;
    @api customActions;
    @api customHeader;
    @api customFooter; // deprecated
    @track hasFooter = true;
    @api closeLabel = 'Close';
    @api saveLabel = 'Save';
    @api additionalCloseClasses;
    @api additionalSaveClasses;
    @api bare;
    @api size;

    _open = false;

    @api
    get open() {
        return this._open;
    }

    set open(value) {
        this._open = value;
        this.doShowHide();
    }

    @api
    show() {
        this._open = true;
        this.doShowHide();
    }

    @api
    hide() {
        this._open = false;
        this.doShowHide();
    }

    doShowHide() {
        if (this._open) {
            this.classes = (this.classes || '') + ' slds-fade-in-open';
            this.bdClasses = (this.bdClasses || '') + ' slds-backdrop_open';
            document.body.setAttribute('style', 'overflow-y: hidden');
            this.querySelector('##pfm-drawer').style.display = 'inherit';
            this.querySelector('##pfm-drawer').focus();
        } else {
            this.classes = this.classes ? this.classes.replace(' slds-fade-in-open', '') : '';
            this.bdClasses = this.bdClasses ? this.bdClasses.replace(' slds-backdrop_open', '') : '';
            document.body.removeAttribute('style');
            this.querySelector('##closeButtonModal', l => l.endLoader());
            this.querySelector('##saveButtonModal', l => l.endLoader());
            setTimeout(()=>{
                this.querySelector('##pfm-drawer').style.removeProperty('display');
                this.querySelector('##pfm-drawer').blur();
            }, 1000)
        }
    }

    @api headerTheme;
    // @api direction; to change direction of drawer at a later time

    @track classes;
    @track bdClasses;
    @track contentClasses;
    @track closeVariant;
    @track closeButtonVariant;

    @track hasTag = true;
    @track hasCustomHeader = true;
    @track hasCustomActions = true;
    @track hasTitle = true;

    @track initLoad = true;

    connectedCallback() {
        if (this.customFooter)
            console.log('CustomFooter is deprecated. Condition is automatically fulfilled if footer is present');
    }
    renderedCallback() {
        if (this.initLoad) {
            this.template.querySelector('[role="dialog"]').setAttribute('style', 'transition: none; display: none;');
            this.querySelector('##pfmBackdrop').setAttribute('style', 'transition: none; display: none;');
            setTimeout(() => {
                this.template.querySelector('[role="dialog"]').removeAttribute('style');
                this.querySelector('##pfmBackdrop').removeAttribute('style');
            }, 250);
            this.initLoad = false;
        }
        this.drawerBody();
        this.drawerContent();
        this.backdrop();
        this.endLoader('closeButtonDrawer');
        this.endLoader('saveButtonDrawer');
        this.optionalElements();
    }

    optionalElements() {
        const actions = this.querySelectorAll('span[slot="actions"]');
        const header = this.querySelectorAll('span[slot="header"]');
        const tag = this.querySelectorAll('span[slot="tag"]');
        const title = this.querySelectorAll('span[slot="title"]');
        const footer = this.querySelectorAll('span[slot="footer"]');

        if (actions.length === 0) {
            this.hasCustomActions = false;
        }
        if (header.length === 0) {
            this.hasCustomHeader = false;
        }
        if (tag.length === 0) {
            this.hasTag = false;
        }
        if (title.length === 0) {
            this.hasTitle = false;
        }
        this.hasFooter = footer.length !== 0;
    }

    drawerBody() {
        const classBase = 'pfm-modal_drawer slds-modal';

        let valOpen = this.open,
            valSize = this.size,
            valBackend = this.backend;

        let str, backend, size, open;

        open = valOpen ? ' slds-fade-in-open' : '';
        backend = valBackend ? ' pfm-modal_drawer pfm-modal_drawer-backend' : ' pfm-modal_drawer';
        size = valSize ? ' pfm-modal_drawer-' + valSize : '';

        this.classes = classBase + backend + open + size;

        this.closeVariant = valBackend ? 'inverse' : false;
        this.closeButtonVariant = valBackend
            ? ' slds-button slds-button_icon slds-button_icon-inverse'
            : ' slds-button slds-button_icons';

        if (valOpen) {
            document.body.setAttribute('style', 'overflow-y: hidden');
        } else {
            document.body.removeAttribute('style');
        }
    }
    backdrop() {
        const classBase = 'slds-backdrop';

        let valOpen = this.open;

        let str, open;

        open = valOpen ? ' slds-backdrop_open' : '';

        this.bdClasses = classBase + open;
    }
    drawerContent() {
        const classBase = 'slds-modal__content',
            bare = this.bare ? '' : ' slds-p-horizontal_large slds-p-bottom_x-large';
        this.contentClasses = classBase + bare;
    }

    closeHandler() {
        this.dispatchEvent(new CustomEvent('close'));
    }

    saveHandler() {
        this.dispatchEvent(new CustomEvent('save'));
    }

    @api
    endLoader(buttonType) {
        let buttonTarget = this.template.querySelector("c-pfm-button[data-name='" + buttonType + "']");
        if (buttonTarget != null) {
            buttonTarget.endLoader();
        }
    }
}