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

## Dev, Build and Test

import { LightningElement, api, track } from 'lwc';
import { cloneDeep } from 'c/actionutils';
import BASE from '@salesforce/resourceUrl/PFM_Base';

export default class PfmSubheader extends LightningElement {
    @track isDefault = false;
    @track isProgress = false;
    @track showTimer = true;
    @track currentTimerValue;

    @api type;
    @api cartValue;

    @api labels = {
        remaining: 'Minutes Remaining:',
        expired: 'Time Expired'
    };

    @api hideTimer() {
        this.showTimer = false;
    }

    connectedCallback() {
        if (this.type == null || this.type === 'default') {
            this.isDefault = true;
        } else if (this.type === 'progress') {
            this.isProgress = true;
            this.classList.add('pfm-subheader_progress');
        }
    }

    // Progress

    @track stepClass = 'pfm-subheader_progress-step';
    @track stepCurrent = 0;

    @track privateSteps;

    @api
    get stepList() {
        return this.privateSteps;
    }
    set stepList(value) {
        this.privateSteps = !value
            ? []
            : cloneDeep(value).map((step, i) => {
                  const valActive = step.active ? ' js-active' : '',
                      valComplete = step.complete ? ' js-complete' : '';

                  step.disabled = !(step.active || step.complete);
            // aria-current value, set to 'step' when element is active to indicate that user is going through a series of steps
            step.current = step.active ? 'step' : '';
                  step.class = this.stepClass + valActive + valComplete;
                  step.id = i + 1;
                  if (!step.value) step.value = step.id;

                  return step;
              });

        // updates drop-down values
        if (this.template.querySelector('c-pfm-input')) {
            const activeStep = this.privateSteps.find(s => s.active);
            this.template
                .querySelector('c-pfm-input')
                .setSelectOptions(this.privateSteps, activeStep ? activeStep.value : null);
        }
    }

    switchHandler(event) {
        const switchEvent = new CustomEvent('switch', {
            detail: this.privateSteps.find(step => step.id === parseInt(event.currentTarget.dataset.id, 10))
        });
        this.dispatchEvent(switchEvent);
    }

    dropdownHandler(evt) {
        const switchEvent = new CustomEvent('switch', {
            // intentional type coercion. Callers might pass string values or int values. Let's match on either.
            // eslint-disable-next-line eqeqeq
            detail: this.privateSteps.find(step => step.value == (evt.detail ? evt.detail.value : evt.target.value))
        });
        this.dispatchEvent(switchEvent);
    }

    showSummaryHandler() {
        const showSummary = new CustomEvent('showsummary', {
            detail: {}
        });
        this.dispatchEvent(showSummary);
    }

    // Progress Timer
    @track timer;
    @api
    get countdown() {
        return this.timer;
    }
    set countdown(value) {
        this.timer = {};
        const timer =
            typeof value === 'string' || typeof value === 'number'
                ? { min: parseInt(value, 10), sec: 0 }
                : { min: value.min, sec: value.sec };

        let startTime = new Date().getTime(),
            totalSeconds = timer.min * 60 + timer.sec;

        let eventTimerStartTime = FontevaHelper.getCacheItem('eventTimerStartTime');
        if (eventTimerStartTime === null) {
            FontevaHelper.cacheItem('eventTimerStartTime', startTime);
        } else {
            startTime = eventTimerStartTime;
        }

        let countdown = setInterval(() => {
            let duration = (new Date().getTime() - startTime) / 1000,
                remaining = Math.round(totalSeconds - duration);

            this.currentTimerValue = this.labels.remaining + this.timer.min;

            if (remaining <= 0) {
                FontevaHelper.cacheItem('eventTimerStartTime', null);
                clearInterval(countdown);
                this.timer.sec = '00';
                this.timer.min = '00';

                setTimeout(() => {
                    const timeExpired = new CustomEvent('expired', {
                        detail: {}
                    });
                    this.dispatchEvent(timeExpired);
                }, 1000);
            } else {
                this.timer.sec = String(remaining % 60).padStart(2, '0');
                this.timer.min = String(Math.floor(remaining / 60)).padStart(2, '0');
            }
        }, 1000);
        let timerAlert = setInterval(() => {
            let duration = (new Date().getTime() - startTime) / 1000;
            let remaining = Math.round(totalSeconds - duration);

            const timerAlert = this.template.querySelector('.pfm-subheader_countdown-alert');
            timerAlert.innerHTML = this.labels.remaining + this.timer.min;

            if (remaining <= 0) {
                timerAlert.innerHTML = this.labels.expired;
                clearInterval(timerAlert);
            }
        }, 1000 * 60 * 5);
    }
}