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

## Dev, Build and Test

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

export default class PfmCollapse extends PFM_Base {
    @track collapseState = false;
    @track collapseHeight;
    @track headerClasses;
    @track hasHeader;
    @track classes;

    @api noHeader; // not supported
    @api iconPosition;
    @api loader;

    @api labels = {
        title: 'Section title',
        loading: 'Section loading'
    };

    @api
    get padding() {
        return super.paddingStr;
    }
    set padding(value) {
        super.paddingStr = value;
    }

    @api
    get margin() {
        return super.marginStr;
    }
    set margin(value) {
        super.marginStr = value;
    }

    connectedCallback() {
        super.connectedCallback('');
        const headerClassBase = 'pfm-collapse_header',
            self = this;
        let valIconPosition = this.iconPosition,
            valClassStr = this.classStr,
            classStr,
            iconPosition;

        iconPosition = valIconPosition === 'left' ? ' slds-grid_reverse' : '';
        classStr = valClassStr ? ' ' + valClassStr : '';

        this.headerClasses = headerClassBase + iconPosition + classStr;
    }

    renderedCallback() {
        if (this.loader) {
            this.template.querySelector('c-pfm-button').startLoader();
        }
        const header = this.querySelectorAll('span[slot="header"]');
        if (header.length === 0) {
            this.hasHeader = false;
        }
        super.renderedCallback('pfm-collapse');
    }

    @api
    expand() {
        let collapsed = this.collapseState;

        const wrapper = this.template.querySelector('.pfm-collapse'),
            content = this.template.querySelector('.pfm-collapse_content');

        if (this.collapseState === true) {
            this.collapseState = false;
            wrapper.classList.remove('js-expand');
            content.style.height = 0;

            const changeEvent = new CustomEvent('close', {
                detail: {}
            });
            this.dispatchEvent(changeEvent);
        } else {
            this.collapseState = true;
            setTimeout(() => {
                content.style.height = content.scrollHeight + 'px';
                wrapper.classList.add('js-expand');
            }, 1);

            const changeEvent = new CustomEvent('open', {
                detail: {}
            });
            this.dispatchEvent(changeEvent);
        }
    }

    @api resetHeight() {
        const content = this.template.querySelector('.pfm-collapse_content');
        content.setAttribute('style', 'height: auto');
        setTimeout(() => {
            content.setAttribute('style', 'height: ' + content.offsetHeight + 'px');
        }, 1);
    }
}