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

## Dev, Build and Test

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

export default class Modal extends Selector(LightningElement) {
    @api title;
    @api tagline;
    @api backend;
    @api bare;
    @api center;
    @api closeLabel = 'Close';
    @api customFooter; // deprecated
    @api saveLabel = 'Save';
    @api hideSave = false;
    @api size; // small, medium, large

    @api additionalCloseClasses;
    @api additionalSaveClasses;

    @track classes;
    @track bdClasses;
    @track contentClasses;
    @track hasTagline;
    @track closeVariant;
    @track closeButtonVariant;
    @track headerWeight;
    @track hasFooter = true;

    _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');
        } 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());
        }
    }

    connectedCallback() {
        if (this.customFooter)
            console.log('CustomFooter is deprecated. Condition is automatically fulfilled if footer is present');
        this.modalBody();
        this.modalContent();
        this.backdrop();
        this.headerWeight = this.backend ? 'light' : 'bold';
    }

    renderedCallback() {
        const footer = this.querySelectorAll('span[slot="footer"]');
        this.hasFooter = footer.length !== 0;
    }

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

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

        let backend, size;

        backend = valBackend ? '' : ' pfm-modal_portal';
        size = valSize ? ' slds-modal_' + valSize : '';

        this.classes = classBase + size + backend;

        this.hasTagline = this.tagline;
        this.closeVariant = valBackend ? 'inverse' : false;
        this.closeButtonVariant = valBackend
            ? ' slds-button slds-button_icon slds-modal__close slds-button_icon-inverse'
            : ' slds-button slds-button_icon slds-modal__close';
    }

    backdrop() {
        const classBase = 'slds-backdrop';

        this.bdClasses = classBase;
    }

    modalContent() {
        const classBase = 'slds-modal__content';
        let valCenter = this.center;
        let center,
            bare = this.bare ? '' : ' slds-p-around_large';

        center = valCenter ? ' slds-text-align_center' : '';

        this.contentClasses = classBase + center + bare;
    }

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

    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();
        }
    }
}