@postnord/web-components/cjs/pn-progress-stepper.cjs.entry.js

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-78a59ba0.js');
const helpers = require('./helpers-2e2349b4.js');

const translations = {
    STEP: {
        da: 'Trin',
        en: 'Step',
        fi: 'Vaihe',
        no: 'Trinn',
        sv: 'Steg',
    },
};

const pnProgressStepperCss = "pn-progress-stepper .pn-progress-stepper{width:100%;background:#f3f2f2;height:0.5em;border-radius:0.5em;box-shadow:0 0 0 0.0625em #969087;position:relative}pn-progress-stepper .pn-progress-stepper[data-full] .pn-progress-stepper-value{border-top-right-radius:0.5em;border-bottom-right-radius:0.5em}pn-progress-stepper .pn-progress-stepper-label{margin-bottom:0.5em}pn-progress-stepper .pn-progress-stepper-value{height:0.625em;background-color:#005d92;width:calc(var(--progress-value) + 0.125em);transition:width 0.4s cubic-bezier(0.7, 0, 0.3, 1), border-radius 0.4s cubic-bezier(0.7, 0, 0.3, 1);border-radius:0.5em 0 0 0.5em;position:absolute;top:-0.0625em;left:-0.0625em}";
const PnProgressStepperStyle0 = pnProgressStepperCss;

const PnProgressStepper = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    id = `pn-progress-stepper-${helpers.uuidv4()}`;
    idLabel = `${this.id}-label`;
    idBar = `${this.id}-bar`;
    minStep = 1;
    maxStep = 7;
    get hostElement() { return index.getElement(this); }
    /** Percentage calculated with currentStep / totalSteps. */
    progressValue = 0;
    /** Set custom label for the stepper, recommended default label is "Step". */
    label;
    /** Set total amount of steps, maximum `7` is allowed. */
    totalSteps = this.maxStep;
    /** The current step of the progress stepper. */
    currentStep = this.minStep;
    /** You can add a custom optional string to the label if you need a name for the current step. */
    stepName;
    /** Set a custom HTML id on the progress stepper element to associate progress bar with label. */
    progressStepperId = '';
    /**
     * Set the language manually, only use this prop if the pnTopbar is not loaded.
     * Will not overwrite the `label` prop if used.
     **/
    language = null;
    validateCurrentStep(step) {
        this.validate(step, 'currentStep');
    }
    validateTotalSteps(step) {
        this.validate(step, 'totalSteps');
    }
    watchLanguage() {
        if (this.hasCustomLabel())
            return;
        this.label = translations.STEP[this.language || helpers.en];
    }
    watchId() {
        if (this.progressStepperId) {
            this.idLabel = `${this.progressStepperId}-label`;
            this.idBar = `${this.progressStepperId}-bar`;
        }
        else {
            this.idLabel = `${this.id}-label`;
            this.idBar = `${this.id}-bar`;
        }
    }
    async componentWillLoad() {
        this.watchLanguage();
        this.watchId();
        this.validate(this.currentStep, 'currentStep');
        this.validate(this.totalSteps, 'totalSteps');
        if (this.language)
            return;
        await helpers.awaitTopbar(this.hostElement);
    }
    componentWillRender() {
        this.calculateProgress();
    }
    hasCustomLabel() {
        if (this.label === undefined)
            return false;
        return !Object.keys(translations.STEP).find(step => translations.STEP[step] === this.label);
    }
    validate(step, prop) {
        const componentName = this.hostElement.localName;
        if (step < this.minStep) {
            console.warn(`${componentName}: The ${prop} ${step} is below the minimum allowed steps of ${this.minStep}. ${prop} will default to ${this.minStep}.`);
            this[prop] = this.minStep;
        }
        if (prop === 'currentStep' && step > this.totalSteps) {
            console.warn(`${componentName}: The ${prop} ${step} is above totalSteps ${this.totalSteps}, ${prop} will default to ${this.totalSteps}.`);
            this[prop] = this.totalSteps;
        }
        if (step > this.maxStep) {
            console.warn(`${componentName}: The ${prop} ${step} is above the maximum allowed steps of ${this.maxStep}. ${prop} will default to ${this.maxStep}.`);
            this[prop] = this.maxStep;
        }
    }
    calculateProgress() {
        try {
            this.progressValue = Math.floor((this.currentStep / this.totalSteps) * 100);
            this.hostElement.style.setProperty('--progress-value', `${this.progressValue}%`);
        }
        catch (error) {
            console.error(`${this.hostElement.localName}:`, error.message);
        }
    }
    render() {
        return (index.h(index.Host, { key: '272d1f3abc78f82d1d047b54e0367067f9487dae' }, index.h("p", { key: '129f4fb4d853db711d059c0d23d10524b0633394', id: this.idLabel, class: "pn-progress-stepper-label" }, index.h("span", { key: '8fb640f99c63b4fdaa2eb6eb1a580b0dd590b75c' }, this.label, " ", this.currentStep, "/", this.totalSteps), this.stepName && index.h("span", { key: 'e6aab7895bbb0b040fec057fdc52a377dcadfae2' }, " - ", this.stepName)), index.h("div", { key: 'e21d798014f01c850d4a90fc525d4ce03fc76705', class: "pn-progress-stepper", role: "progressbar", "aria-labelledby": this.idLabel, "aria-valuenow": this.progressValue, id: this.idBar, "data-full": this.currentStep === this.totalSteps }, index.h("div", { key: 'db86f96f1e1ab1f7e62fb0b2b2b1dfee24647983', class: "pn-progress-stepper-value" }))));
    }
    static get watchers() { return {
        "currentStep": ["validateCurrentStep"],
        "totalSteps": ["validateTotalSteps"],
        "language": ["watchLanguage"],
        "progressStepperId": ["watchId"]
    }; }
};
PnProgressStepper.style = PnProgressStepperStyle0;

exports.pn_progress_stepper = PnProgressStepper;

//# sourceMappingURL=pn-progress-stepper.cjs.entry.js.map