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

## Dev, Build and Test

import { LightningElement, api, track } from 'lwc';

import PFM_Base from 'c/pfmBase';

export default class Column extends PFM_Base {
    @api size; // all devices: *-of-1, *-of-2, ... , *-of-12
    @api sSize; // phone: *-of-1, *-of-2, ... , *-of-12
    @api mSize; // tablet: *-of-1, *-of-2, ... , *-of-12
    @api lSize; // desktop: *-of-1, *-of-2, ... , *-of-12
    @api wrap; // boolean
    @api bump; // top, right, bottom, left
    @api nowrap; // boolean
    @api align; // left, center, right
    @api vAlign; // top, middle, bottom
    @api center; // boolean
    @api isRelative; // boolean

    @track classes;
    @track bumpStr;
    @track alignStr;

    @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('pfm-column');
        this.bumpValue();

        const classBase = '';

        let valBump = this.bumpStr,
            valAlign = this.align,
            valSize = this.size,
            valSSize = this.sSize,
            valMSize = this.mSize,
            valLSize = this.lSize,
            valNoWrap = this.nowrap,
            valVAlign = this.vAlign,
            valIsRelative = this.isRelative;

        let bump, size, sSize, mSize, lSize, nowrap, align, vAlign, relative;

        size = valSize === 'auto' ? ' slds-col' : valSize && valSize !== 'auto' ? ' slds-size_' + valSize : '';

        sSize = valSSize ? ' slds-small-size_' + valSSize : '';
        mSize = valMSize ? ' slds-medium-size_' + valMSize : '';
        lSize = valLSize ? ' slds-large-size_' + valLSize : '';

        size = size.indexOf(':') > -1 ? size.replace(/:\s*/g, '-of-') : size;
        sSize = sSize.indexOf(':') > -1 ? sSize.replace(/:\s*/g, '-of-') : sSize;
        mSize = mSize.indexOf(':') > -1 ? mSize.replace(/:\s*/g, '-of-') : mSize;
        lSize = lSize.indexOf(':') > -1 ? lSize.replace(/:\s*/g, '-of-') : lSize;

        nowrap = valNoWrap ? ' ' + 'slds-shrink-none' : '';

        bump = valBump ? ' ' + valBump : '';
        align = valAlign ? ' slds-text-align_' + valAlign : '';
        vAlign = valVAlign ? ' slds-align-' + valVAlign : '';

        relative = valIsRelative ? ' slds-is-relative' : '';

        this.classes = this.classStr + size + sSize + mSize + lSize + nowrap + bump + vAlign + align + relative;
        this.setAttribute('class', this.classes);
    }
    bumpValue() {
        switch (this.bump) {
            case 'top':
                this.bumpStr = 'slds-col_bump-top';
                break;
            case 'bottom':
                this.bumpStr = 'slds-col_bump-bottom';
                break;
            case 'left':
                this.bumpStr = 'slds-col_bump-left';
                break;
            case 'right':
                this.bumpStr = 'slds-col_bump-right';
                break;
            default:
                this.bumpStr = '';
        }
    }
}