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

## Dev, Build and Test

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

import { loadStyle } from 'lightning/platformResourceLoader';
import BASE from '@salesforce/resourceUrl/PFM_Base';

export default class PfmBase extends Selector(LightningElement) {
    /**
     *  padding="direction:size"
     *      - direction: top, right, bottom, left, horizontal, vertical, around
     *      - size: xx-small, x-small, small, medium, large, x-large
     *
     *  to provide multiple values, separate with a ','
     *      - padding="top:small, right:large"
     */

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

    /**
     *  margin="direction:size"
     *      - direction: top, right, bottom, left, horizontal, vertical, around
     *      - size: xx-small, x-small, small, medium, large, x-large
     *
     *  to provide multiple values, separate with a ','
     *      - margin="top:small, right:large"
     */
    @api
    get margin() {
        return this.marginStr;
    }
    set margin(value) {
        this.marginStr = value;
    }

    @track paddingStr;
    @track marginStr;

    @api showAt; // small, medium, large
    @api hideAt; // small, medium, large

    @api border; // top, right, bottom, left, horizontal, vertical
    @api sBorder; // top, right, bottom, left, horizontal, vertical
    @api mBorder; // top, right, bottom, left, horizontal, vertical
    @api lBorder; // top, right, bottom, left, horizontal, vertical

    @track borderStr;

    @track classStr;

    connectedCallback(targetComponent) {
        this.loadSpacing();
        this.paddingValues();
        this.marginValues();

        let valPadding = this.paddingStr,
            valMargin = this.marginStr,
            valBorder = this.border,
            valSBorder = this.sBorder,
            valMBorder = this.mBorder,
            valLBorder = this.lBorder;

        let padding, margin, border, sBorder, mBorder, lBorder;

        padding = valPadding ? ' ' + valPadding : '';
        padding = padding.indexOf(',') > -1 ? padding.replace(',', '') : padding;

        margin = valMargin ? ' ' + valMargin : '';
        margin = margin.indexOf(',') > -1 ? margin.replace(',', '') : margin;

        border = valBorder ? ' pfm-border_' + valBorder : '';
        sBorder = valSBorder ? ' pfm-small-border_' + valSBorder : '';
        mBorder = valMBorder ? ' pfm-medium-border_' + valMBorder : '';
        lBorder = valLBorder ? ' pfm-large-border_' + valLBorder : '';

        let show = this.showAt ? ' slds-show_' + this.showAt : '';
        let hide = this.hideAt ? ' slds-hide_' + this.hideAt : '';

        this.classStr = targetComponent + padding + margin + show + hide + border + sBorder + mBorder + lBorder;
    }
    renderedCallback(targetComponent) {
        switch (this.theme) {
            case 'shade':
                this.themeRender(targetComponent, 'shade');
                break;
            case 'shade-dark':
                this.themeRender(targetComponent, 'shade-dark');
                break;
            case 'success':
                this.themeRender(targetComponent, 'success');
                break;
            case 'brand':
                this.themeRender(targetComponent, 'brand');
                break;
            case 'blue-dark':
                this.themeRender(targetComponent, 'blue-dark');
                break;
            case 'danger':
                this.themeRender(targetComponent, 'danger');
                break;
        }
    }

    themeRender(targetComponent, theme) {
        this.querySelectorAll('.' + targetComponent + '-theme_' + theme + ' c-pfm-button').forEach(function (b) {
            b.classList.add('pfm-theme_' + theme);
        });
        this.querySelectorAll('.' + targetComponent + '-theme_' + theme + ' c-pfm-text').forEach(function (t) {
            t.classList.add('pfm-theme_' + theme);
        });
    }

    paddingValues() {
        this.paddingMethod('top:', 'pfm-p-top_');
        this.paddingMethod('bottom:', 'pfm-p-bottom_');
        this.paddingMethod('left:', 'pfm-p-left_');
        this.paddingMethod('right:', 'pfm-p-right_');
        this.paddingMethod('horizontal:', 'pfm-p-horizontal_');
        this.paddingMethod('vertical:', 'pfm-p-vertical_');
        this.paddingMethod('around:', 'pfm-p-around_');
    }
    paddingMethod(value, replace) {
        if (this.paddingStr) {
            if (typeof this.paddingStr === 'boolean') {
                this.paddingStr = 'pfm-p-horizontal_small';
            } else if (typeof this.paddingStr === 'string' && this.paddingStr.indexOf(value) > -1) {
                this.paddingStr = this.paddingStr.replace(value, replace);
            }
        }
    }
    marginValues() {
        this.marginMethod('top:', 'pfm-m-top_');
        this.marginMethod('bottom:', 'pfm-m-bottom_');
        this.marginMethod('left:', 'pfm-m-left_');
        this.marginMethod('right:', 'pfm-m-right_');
        this.marginMethod('horizontal:', 'pfm-m-horizontal_');
        this.marginMethod('vertical:', 'pfm-m-vertical_');
        this.marginMethod('around:', 'pfm-m-around_');
    }
    marginMethod(value, replace) {
        if (this.marginStr) {
            if (typeof this.marginStr === 'boolean') {
                this.marginStr = 'pfm-m-horizontal_small';
            } else if (typeof this.marginStr === 'string' && this.marginStr.indexOf(value) > -1) {
                this.marginStr = this.marginStr.replace(value, replace);
            }
        }
    }
    loadSpacing() {
        if (!window.pfmSpacingStylesLoaded) {
            loadStyle(this, BASE + '/css/component/spacing/spacing.css');
            window.pfmSpacingStylesLoaded = true;
        }
    }
}