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

## Dev, Build and Test

import { LightningElement, track, api } from 'lwc';
import PFM_Base from 'c/pfmBase';

export default class Card extends PFM_Base {
    @api type;
    @track classes;
    @api header;
    @api footer; // not supported
    @api title;
    @track hasFooter = true;
    @track hasHeader = true;
    @track hasBody = true;
    @api collapsed;

    @api show() {
        const body = this.template.querySelector('.pfm-card__body');
        body.classList.remove('js-hide');
        body.style.height = body.scrollHeight + 'px';
        setTimeout(() => {
            body.style.overflow = 'inherit';
            body.style.height = 'auto';
        }, 250);
    }
    @api hide() {
        const body = this.template.querySelector('.pfm-card__body');
        body.style.height = body.scrollHeight + 'px';
        setTimeout(() => {
            body.classList.add('js-hide');
            body.style.height = 0;
            body.style.overflow = 'hidden';
        }, 1);
    }
    @api showFooter() {
        const footer = this.template.querySelector('.pfm-card__footer');
        footer.classList.remove('slds-hide');
    }
    @api hideFooter() {
        const footer = this.template.querySelector('.pfm-card__footer');
        footer.classList.add('slds-hide');
    }
    @api resetHeight() {
        const body = this.template.querySelector('.pfm-card__body');
        body.style.height = body.scrollHeight + 'px';
    }
    connectedCallback() {
        this.classes = 'pfm-card';
    }
    renderedCallback() {
        this.hasFooter = super.hasSlot('footer');
        this.hasHeader = super.hasSlot('header');
        super.renderedCallback('pfm-card');

        // for collapse animation
        const body = this.template.querySelector('.pfm-card__body');
        if (this.collapsed) {
            this.hide();
        } else {
            this.show();
        }
    }
}