@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-property:background-color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){.pn-progress-indicator-step .circle{transition-duration:0s;transition-delay:0s}}.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;font-size:1em;font-weight:normal;transition-property:color;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1)}@media (prefers-reduced-motion: reduce){.pn-progress-indicator-step .info-container{transition-duration:0s;transition-delay:0s}}.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}.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;transform:translateX(-100%);transition-property:transform;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.7, 0, 0.3, 1);transition-delay:0.2s}@media (prefers-reduced-motion: reduce){.pn-progress-indicator-step .progress-line:after{transition-duration:0s;transition-delay:0s}}.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: '72cc83f88a80acff2dc2d379abddf32d1f7100a8', class: this.getClassNames(), onClick: () => this.setActiveStepHandler() }, h("div", { key: '39f44c9b4e625898d16278575894ed8f01261a89', class: "progress-line" }), h("div", { key: '17858a1e590a364b82db40088f0017a5ddfde37e', class: "info-container" }, h("slot", { key: 'bd8a6e97e2a0aa6e3a0ff0565069792dc4e5cd0e' }), this.name), h("div", { key: '0122ff04b13f3d610a036bd354333e5b4ed4b898', 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