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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { r as registerInstance, g as getElement, h, a as Host } from './index-5606614b.js';
import { u as uuidv4, e as en, k as awaitTopbar } from './helpers-9dac5241.js';

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

const pnProgressStepperCss = "pn-progress-stepper .pn-progress-stepper{position:relative;width:100%;background:#f3f2f2;height:0.5em;border-radius:0.5em;box-shadow:0 0 0 0.0625em #969087}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{position:absolute;top:-0.0625em;left:-0.0625em;height:0.625em;background-color:#005d92;width:calc(var(--progress-value) + 0.125em);border-radius:0.5em 0 0 0.5em;transition-property:width, border-radius;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){pn-progress-stepper .pn-progress-stepper-value{transition-duration:0s;transition-delay:0s}}";
const PnProgressStepperStyle0 = pnProgressStepperCss;

const PnProgressStepper = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.progressValue = 0;
        this.label = undefined;
        this.totalSteps = this.maxStep;
        this.currentStep = this.minStep;
        this.stepName = undefined;
        this.progressStepperId = '';
        this.language = null;
    }
    id = `pn-progress-stepper-${uuidv4()}`;
    idLabel = `${this.id}-label`;
    idBar = `${this.id}-bar`;
    minStep = 1;
    maxStep = 7;
    get hostElement() { return getElement(this); }
    validateCurrentStep(step) {
        this.validate(step, 'currentStep');
    }
    validateTotalSteps(step) {
        this.validate(step, 'totalSteps');
    }
    watchLanguage() {
        if (this.hasCustomLabel())
            return;
        this.label = translations.STEP[this.language || 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 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 (h(Host, { key: '4ba09046dab423fa79ebfdab9fbf312d9d8929cf' }, h("p", { key: 'fa2f78ce5509e1dd7af40657a083356e61d393db', id: this.idLabel, class: "pn-progress-stepper-label" }, h("span", { key: '963374a110ad8fc87d6d6d2b00cd1694992fffab' }, this.label, " ", this.currentStep, "/", this.totalSteps), this.stepName && h("span", { key: 'f5cef98692b9baf2dc2826d1a0ebaebb64e75cf5' }, " - ", this.stepName)), h("div", { key: '2259ad7c3a8d77ff6a59d32124695e9259b22ba5', class: "pn-progress-stepper", role: "progressbar", "aria-labelledby": this.idLabel, "aria-valuenow": this.progressValue, id: this.idBar, "data-full": this.currentStep === this.totalSteps }, h("div", { key: 'f469df98da0b06db3a80fdcdc96555151789b014', class: "pn-progress-stepper-value" }))));
    }
    static get watchers() { return {
        "currentStep": ["validateCurrentStep"],
        "totalSteps": ["validateTotalSteps"],
        "language": ["watchLanguage"],
        "progressStepperId": ["watchId"]
    }; }
};
PnProgressStepper.style = PnProgressStepperStyle0;

export { PnProgressStepper as pn_progress_stepper };

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