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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';

const pnProgressIndicatorCss = ".pn-progress-indicator{display:flex;padding:2.8em 1em 0}";
const PnProgressIndicatorStyle0 = pnProgressIndicatorCss;

const PnProgressIndicator$1 = /*@__PURE__*/ proxyCustomElement(class PnProgressIndicator extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.progresschange = createEvent(this, "progresschange", 7);
        this.activeStep = 0;
    }
    get hostElement() { return this; }
    /** 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('pn-progress-indicator-step'));
        children.forEach((child, i) => {
            child.activeStep = this.activeStep;
            child.index = i;
        });
    }
    render() {
        return (h("div", { key: 'c78f37115c48eaff800b2f372a78efa406f79f1f', class: "pn-progress-indicator" }, h("slot", { key: '0e6dea61f881561da76a6979451c29eea31ab119' })));
    }
    static get style() { return PnProgressIndicatorStyle0; }
}, [4, "pn-progress-indicator", {
        "activeStep": [1026, "active-step"]
    }, [[0, "setactivestep", "setActiveStepHandler"]]]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["pn-progress-indicator"];
    components.forEach(tagName => { switch (tagName) {
        case "pn-progress-indicator":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, PnProgressIndicator$1);
            }
            break;
    } });
}

const PnProgressIndicator = PnProgressIndicator$1;
const defineCustomElement = defineCustomElement$1;

export { PnProgressIndicator, defineCustomElement };

//# sourceMappingURL=pn-progress-indicator.js.map