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

PostNord Web Components

/*!
 * Built with Stencil
 * By PostNord.
 */
import { r as registerInstance, c as createEvent, h, a as Host } from './index-5606614b.js';
import { w as white } from './colors-fb335769.js';

const pnProgressIndicatorStepCss = "pn-progress-indicator-step{display:flex;flex:1 0 4em}pn-progress-indicator-step:first-child{flex:0 0 auto}pn-progress-indicator-step:first-child .progress-line{display:none}pn-progress-indicator-step:first-child .info-container{transform:translateX(-50%);left:50%}.pn-progress-indicator-step{position:relative;display:flex;flex:1 0 4em;-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-tap-highlight-color:transparent}.pn-progress-indicator-step .circle{width:1.5em;height:1.5em;padding:0.3rem;border-radius:50%;background-color:#f3f2f2;transition:background-color 0.2s ease-in-out}.pn-progress-indicator-step .info-container{position:absolute;bottom:-2.5em;right:0;transform:translateX(50%) translateX(-1.2rem);white-space:nowrap;color:#f3f2f2;display:flex;align-items:center;flex-direction:column;transition:color 0.2s ease-in-out;font-size:1em;font-weight:normal}.pn-progress-indicator-step .info-container .pn-icon-svg{height:1.7em;width:1.7em;margin-bottom:0.1em}.pn-progress-indicator-step .info-container .pn-icon-svg path,.pn-progress-indicator-step .info-container .pn-icon-svg polygon{fill:#f3f2f2;transition:fill 0.2s ease-in-out}.pn-progress-indicator-step .progress-line{flex:1 1 auto;margin:auto 4px;height:0.8rem;background-color:#f3f2f2;position:relative;overflow:hidden;pointer-events:none;border-radius:10rem}.pn-progress-indicator-step .progress-line:after{content:\"\";position:absolute;top:0;left:0;height:0.8rem;width:100%;background-color:#005d92;transition:transform 0.4s cubic-bezier(0.55, 0, 0.1, 1) 0.2s;transform:translateX(-100%)}.pn-progress-indicator-step.active .info-container{color:#000000}.pn-progress-indicator-step.active .info-container .pn-icon-svg path{fill:#000000}.pn-progress-indicator-step.active .info-container .pn-icon-svg polygon{fill:#000000}.pn-progress-indicator-step.activated{cursor:pointer}.pn-progress-indicator-step.done .progress-line:after,.pn-progress-indicator-step.active .progress-line:after{transform:translateX(0)}.pn-progress-indicator-step.done .circle,.pn-progress-indicator-step.active .circle{background-color:#005d92}.pn-progress-indicator-step.done .checkmark-path{stroke-linecap:round;stroke-dasharray:27;stroke-dashoffset:-23;animation:dash 0.2s cubic-bezier(0.55, 0, 0.1, 1) both}@keyframes dash{to{stroke-dashoffset:0}}";
const PnProgressIndicatorStepStyle0 = pnProgressIndicatorStepCss;

const PnProgressIndicatorStep = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.setactivestep = createEvent(this, "setactivestep", 7);
        this.activated = undefined;
        this.done = undefined;
        this.activeStep = undefined;
        this.index = undefined;
        this.name = undefined;
        this.checked = false;
        this.active = undefined;
    }
    setactivestep;
    setActiveStepHandler() {
        if (this.done || this.activated) {
            this.setactivestep.emit(this.index);
        }
    }
    componentWillLoad() {
        this.checkStatus();
    }
    componentDidUpdate() {
        this.checkStatus();
    }
    checkStatus() {
        if (!this.done) {
            this.done = this.checked || this.activeStep > this.index;
        }
        if (this.active === 'yes') {
            this.activated = true;
        }
        else if (this.active === 'no') {
            this.activated = false;
            this.done = false;
        }
        else if (!this.activated) {
            this.activated = this.activeStep >= this.index;
        }
    }
    getClassNames() {
        let className = 'pn-progress-indicator-step';
        if (this.done || this.checked)
            className += ' done';
        if (this.activated)
            className += ' activated';
        if (this.activeStep === this.index)
            className += ' active';
        return className;
    }
    render() {
        return (h(Host, { key: '595a518ecfd98d14a13d195314b71b63441419fb', class: this.getClassNames(), onClick: () => this.setActiveStepHandler() }, h("div", { key: '24e37496e8982209d3b380b8d63c300a0dc16496', class: "progress-line" }), h("div", { key: '4cbbbf6899c666658b4bd407fa0bc6a42c1e1ae2', class: "info-container" }, h("slot", { key: 'd4e48f113e6bd97c563cb7f4ba6b9e883be6879c' }), this.name), h("div", { key: '7151daa3d3ef8b27817337551e8b63b5f9b5c2d8', class: "circle" }, this.done || this.checked ? (h("svg", { xmlns: "http://www.w3.org/2000/svg", "enable-background": "new 0 0 24 24", id: "checkmark", version: "1.0", viewBox: "0 0 24 24" }, h("polyline", { class: "checkmark-path", fill: "none", points: "20,6 9,17 4,12", stroke: white, "stroke-miterlimit": "10", "stroke-width": "3" }))) : (''))));
    }
};
PnProgressIndicatorStep.style = PnProgressIndicatorStepStyle0;

export { PnProgressIndicatorStep as pn_progress_indicator_step };

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