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

PostNord Web Components

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

const pnProgressIndicatorCss = () => `.pn-progress-indicator{display:flex;padding:2.8em 1em 0}`;

const PnProgressIndicator = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.progresschange = createEvent(this, "progresschange");
    }
    get hostElement() { return getElement(this); }
    /** Takes the index of the active step */
    activeStep = 0;
    /** This will emit when progress is changed and is the value you want to bind to your VM state */
    progresschange;
    setActiveStepHandler({ detail }) {
        this.activeStep = detail;
        this.progresschange.emit(this.activeStep);
    }
    componentWillLoad() {
        this.passPropsToChildren();
    }
    componentDidUpdate() {
        this.passPropsToChildren();
    }
    passPropsToChildren() {
        const children = Array.from(this.hostElement.querySelectorAll(`${transformTag("pn-progress-indicator-step")}`));
        children.forEach((child, i) => {
            child.activeStep = this.activeStep;
            child.index = i;
        });
    }
    render() {
        return (h("div", { key: '1108f70edf525c6e7e0e45d34a6d58e69c5b9ab2', class: "pn-progress-indicator" }, h("slot", { key: 'c4035cf9fadb46f4e573c0225bebb2f8f7187da6' })));
    }
};
PnProgressIndicator.style = pnProgressIndicatorCss();

export { PnProgressIndicator as pn_progress_indicator };