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

## Dev, Build and Test

import { api, track } from 'lwc';
import { loadStyle } from 'lightning/platformResourceLoader';
import BASE from '@salesforce/resourceUrl/PFM_Base';
import PFM_Element from 'c/pfmElement';
import Pfm_Loader_State_Loading from '@salesforce/label/c.Pfm_Loader_State_Loading';

export default class PfmButton extends PFM_Element {
    static delegatesFocus = true;

    @api cref;
    @api ctext;
    @track hasCref;

    // Native button attributes
    @api autofocus;
    @api disabled;
    @api form;
    @api formaction;
    @api formenctype;
    @api formmethod;
    @api formnovalidate;
    @api target;
    @api name;
    @api type;
    @api value;
    @api textAlign; // left, right

    // style classes
    @api subtype; // DEPRECATED
    @api variant; // default, outline, success, danger, link, icon, flex
    @api backend; // boolean
    @api expand; // boolean: allow button to expand to parent width
    @api additionalClasses; // should not be used in portal. should only be used in older products such as events

    // loader
    @api disableLoader;
    @track loaderState;

    @api group;
    @api label; // string to be displayed inside of button
    @api labelClass;
    @api theme; // open attribute, but will be overwritten by parent component
    @api disableClick = false; // boolean

    // Deprecated
    @api submit; // boolean: Only for legacy code where the type is not used.

    @api refreshAttributes() {
        this.connectedCallback();
    }

    @track classes;
    @track isSubmit;
    @track iconVariant;
    @track loaderCondition;
    @track status = false;
    @track pfmLoaderStateLoading = Pfm_Loader_State_Loading
    isRendered = false;

    excludedAttributes = [
        'group',
        'disableLoader',
        'disableClick',
        'theme',
        'label',
        'labelClass',
        'icon',
        'iconPosition',
        'iconSize',
        'iconRight',
        'iconRightSize',
        'variant',
        'backend',
        'expand',
        'additionalClasses',
        'textAlign'
    ];

    connectedCallback() {
        this.hasCref = this.cref && !this.ctext;
        if (this.disableLoader === undefined) {
            this.disableLoader = this.variant && this.variant.includes('link'); // everything defaults to a loader except links
        }
        this.loadDependentStyles();
        this.loaderState = this.disableLoader ? 'slds-hide' : 'pfm-button_loader';

        this.mapTypeToVariant();
        this.setClasses();

        if (this.icon && this.iconPosition === 'right') {
            this.rightIcon = true;
            this.iconRightSize = this.iconSize;
            this.iconRightClass = this.iconClass;
            this.iconRightLabel = this.iconLabel;
        }
    }

    mapTypeToVariant() {
        if (PFM_Element.getStyleVariants().includes(this.type)) {
            this.variant = this.type;
            this.type = typeof this.submit === 'boolean' ? 'submit' : '';
        }
    }

    renderedCallback() {
        if (typeof this.label === 'number') {
            this.label = this.label + '';
        }
        if (this.disabled || this.disableClick) {
            this.classList.add('js-disabled');
        } else {
            this.classList.remove('js-disabled');
        }
        if (this.ariaExpanded.length > 0 && this.ariaExpanded) {
            this.template.querySelector('button').setAttribute('aria-expanded', true);
        } else if (this.ariaExpanded.length > 0 && !this.ariaExpanded) {
            this.template.querySelector('button').setAttribute('aria-expanded', false);
        }

        this.leftIcon = this.icon && this.iconPosition === 'left';
        this.rightIcon = this.rightIcon || this.iconRight;

        // console.warn('button dataset', this.isRendered, this.dataset, this.template.dataset);
        super.initializeElement(this, super.__proto__, 'button', this.excludedAttributes, this.isRendered);
        this.isRendered = true;
    }

    // loading methods
    @api
    startLoader() {
        if (this.disableLoader) {
            return;
        }

        this.classList.add('js-disabled');

        const btn = this.template.querySelector('button');
        btn.classList.add('js-load');
        btn.removeAttribute('aria-hidden');

        if (this.type !== 'submit') {
            const changeEvent = new CustomEvent('submit', {
                detail: {}
            });
            this.dispatchEvent(changeEvent);
        }
    }

    @api
    endLoader() {
        this.classList.remove('js-disabled');

        const btn = this.template.querySelector('button');
        btn.setAttribute('aria-hidden', 'true');
        btn.classList.remove('js-load');
        btn.classList.add('js-load-transition');

        setTimeout(function () {
            btn.classList.remove('js-load-transition');
        }, 1000);
    }

    setClasses() {
        const classes = ['pfm-button'];
        if (this.expand) {
            classes.push('pfm-button_expand');
        }
        if (this.variant) {
            this.variant.split(' ').forEach(v => classes.push(`pfm-button_${v}`));
        } else {
            classes.push('pfm-button_default');
        }
        if (this.additionalClasses) {
            this.additionalClasses.split(' ').forEach(c => classes.push(c));
        }
        if (this.backend) {
            classes.push('pfm-button_backend');
        }
        if (this.theme) {
            classes.push(`pfm-theme_${this.theme}`);
        }
        if (this.textAlign === 'left') {
            classes.push('left');
        }
        if (this.textAlign === 'right') {
            classes.push('right');
        }
        this.classes = classes.join(' ');
    }

    loadDependentStyles() {
        if (!window.pfmButtonStyleLoaded) {
            loadStyle(this, BASE + '/css/component/button/button.css');
            loadStyle(this, BASE + '/css/component/button/button-animation.css');
            window.pfmButtonStyleLoaded = true;
        }
    }

    @api rotateIcon() {
        if (this.icon === 'utility:chevrondown') {
            this.icon = 'utility:chevronright';
        } else if (this.icon === 'utility:chevronright') {
            this.icon = 'utility:chevrondown';
        }
    }

    // data-binding from Aura is not reliable; use this instead
    @api setLabel(label) {
        this.label = label;
    }
}