/*!
 * Built with Stencil
 * By PostNord.
 */
import { t as transformTag, r as registerInstance, g as getElement, h, a as Host } from './index-CAEP792y.js';
import { uuidv4, en, awaitTopbar } from './index.js';

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

const pnProgressStepperCss = () => `${transformTag("pn-progress-stepper")}{display:block}${transformTag("pn-progress-stepper")} .pn-progress{position:relative;width:100%;background:#f3f2f2;height:0.5em;border-radius:0.5em;box-shadow:0 0 0 0.0625em #969087}${transformTag("pn-progress-stepper")} .pn-progress-label{display:block;color:#2d2013;font-size:1em;margin-bottom:0.5em}${transformTag("pn-progress-stepper")} .pn-progress-value{position:absolute;top:-0.0625em;left:-0.0625em;height:0.625em;background-color:#005d92;width:calc(var(--pn-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){${transformTag("pn-progress-stepper")} .pn-progress-value{transition-duration:0s;transition-delay:0s}}${transformTag("pn-progress-stepper")} .pn-progress-value[data-full]{border-top-right-radius:0.5em;border-bottom-right-radius:0.5em}${transformTag("pn-progress-stepper")} .pn-progress-dots{display:flex;align-items:center;justify-content:center;gap:1em}${transformTag("pn-progress-stepper")} .pn-progress-dot{width:0.875em;height:0.875em;background-color:#f3f2f2;border:0.0625em solid #d3cecb;border-radius:50%;transform:scale(1) translateY(0%);transition-property:background-color, border-color;transition-duration:0.4s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){${transformTag("pn-progress-stepper")} .pn-progress-dot{transition-duration:0s;transition-delay:0s}}${transformTag("pn-progress-stepper")} .pn-progress-dot{animation:pnBackwards 0.2s cubic-bezier(0.7, 0, 0.3, 1);animation-fill-mode:forwards}${transformTag("pn-progress-stepper")} .pn-progress-dot[data-active]{background-color:#005d92;border-color:#005d92;animation:pnForward 0.2s cubic-bezier(0.7, 0, 0.3, 1);animation-fill-mode:forwards}${transformTag("pn-progress-stepper")} .pn-progress-sr-only{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);margin:-1px;white-space:nowrap}@keyframes pnForward{0%{transform:scale(1) translateY(0%)}50%{transform:scale(1) translateY(20%)}75%{transform:scale(1.1) translateY(10%)}100%{transform:scale(1) translateY(0%)}}@keyframes pnBackwards{0%{transform:scale(1) translateY(0%)}50%{transform:scale(1) translateY(-20%)}75%{transform:scale(0.9) translateY(-10%)}100%{transform:scale(1) translateY(0%)}}`;

const PnProgressStepper = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    id = `pn-progress-stepper-${uuidv4()}`;
    minStep = 1;
    maxStep = 7;
    get hostElement() { return getElement(this); }
    builtInLabel;
    /** Percentage calculated with currentStep / totalSteps. */
    progressValue = 0;
    /** Set custom label for the stepper, default label is "Step". */
    label = '';
    /** 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 custom `label` prop if used.
     **/
    language = null;
    /** Set total amount of steps, maximum allowed is `7`. @category Steps */
    totalSteps = this.maxStep;
    /** The current step of the progress stepper. @category Steps */
    currentStep = this.minStep;
    /** You can add a custom optional string to the label if you need a name for the current step. @category Steps */
    stepName;
    /**
     * Use the dots visual, instead of the bar.
     *
     * This will hide the label from view, but is still accessible to screenreaders.
     *
     * @since v7.16.0
     * @category Visual
     */
    dots = false;
    stepWatchers(a, b, c) {
        if (c === 'currentStep')
            this.validate(a, 'currentStep');
        if (c === 'totalSteps')
            this.validate(b, 'totalSteps');
        this.calculateProgress();
    }
    watchLanguage() {
        this.builtInLabel = translations.STEP[this.language || en];
    }
    async componentWillLoad() {
        this.watchLanguage();
        this.validate(this.currentStep, 'currentStep');
        this.validate(this.totalSteps, 'totalSteps');
        this.calculateProgress();
        if (this.language === null)
            await awaitTopbar(this.hostElement);
    }
    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('--pn-progress-value', `${this.progressValue}%`);
        }
        catch (error) {
            console.error(`${this.hostElement.localName}:`, error.message);
        }
    }
    getLabel() {
        return this.label || this.builtInLabel;
    }
    getId() {
        return this.progressStepperId || this.id;
    }
    render() {
        return (h(Host, { key: 'a93457e5c8ec35858e7f15e45578feb67ec37f4e' }, h("label", { key: '86a36ba455f7433f072a9b38b8af09c9fda45fc4', htmlFor: this.getId(), class: 'pn-progress-label' + (this.dots ? ' pn-progress-sr-only' : '') }, h("span", { key: 'eeb9163062bd19b03c394fe6c936440f040dd246' }, this.getLabel(), " ", this.currentStep, "/", this.totalSteps), this.stepName && h("span", { key: 'f43fd84597ee5adcee54f8d16c3cba9c4fe3f2cf' }, " - ", this.stepName)), h("progress", { key: '81658eb2942d0b1712bbbb4e22904d0b4c3a5229', id: this.getId(), class: "pn-progress-sr-only", max: "100", value: this.progressValue }), this.dots ? (h("div", { class: "pn-progress-dots", "aria-hidden": "true" }, [...Array(this.totalSteps)].map((_, i) => (h("div", { class: "pn-progress-dot", "data-active": i + 1 <= this.currentStep, key: i }))))) : (h("div", { "aria-hidden": "true", class: "pn-progress" }, h("div", { class: "pn-progress-value", "data-full": this.currentStep === this.totalSteps })))));
    }
    static get watchers() { return {
        "currentStep": [{
                "stepWatchers": 0
            }],
        "totalSteps": [{
                "stepWatchers": 0
            }],
        "language": [{
                "watchLanguage": 0
            }]
    }; }
};
PnProgressStepper.style = pnProgressStepperCss();

export { PnProgressStepper as pn_progress_stepper };
