/*!
 * Built with Stencil
 * By PostNord.
 */
'use strict';

var index = require('./index-CfUQZtlH.js');
var colors = require('./colors-Dzlq0FRO.js');

const pnProgressIndicatorStepCss = () => `${index.transformTag("pn-progress-indicator-step")}{display:flex;flex:1 0 4em}${index.transformTag("pn-progress-indicator-step")}:first-child{flex:0 0 auto}${index.transformTag("pn-progress-indicator-step")}:first-child .progress-line{display:none}${index.transformTag("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)}@media (prefers-reduced-motion: reduce){.pn-progress-indicator-step .progress-line:after{transition-duration:0s;transition-delay:0s}}.pn-progress-indicator-step .progress-line:after{transition-delay:0.2s}.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 PnProgressIndicatorStep = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.setactivestep = index.createEvent(this, "setactivestep");
    }
    activated;
    done;
    /** Set by the parent component. Do not use manually. @hide true */
    activeStep;
    /** Set by the parent component. Do not use manually. @hide true */
    index;
    /** The step name. */
    name;
    /** Set the step as checked, meaning a white check mark will appear. */
    checked = false;
    /** Set by the parent component. Do not use manually. @hide true */
    active;
    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 (index.h(index.Host, { key: 'e5518f2d8c21c889738beb3a42e6865e7c64ac76', class: this.getClassNames(), onClick: () => this.setActiveStepHandler() }, index.h("div", { key: 'b0f5f684ca12fda2b22b51945d3b0b41ab490fa3', class: "progress-line" }), index.h("div", { key: '8d05494d4cc77145e44270666b678cf48eb05a96', class: "info-container" }, index.h("slot", { key: '864bea1ce3dd348be1abadcc3f8fb3757ac009b9' }), this.name), index.h("div", { key: '7d8394e5a4919404a137fd30ce125dfda5ed3034', class: "circle" }, this.done || this.checked ? (index.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" }, index.h("polyline", { class: "checkmark-path", fill: "none", points: "20,6 9,17 4,12", stroke: colors.white, "stroke-miterlimit": "10", "stroke-width": "3" }))) : (''))));
    }
};
PnProgressIndicatorStep.style = pnProgressIndicatorStepCss();

exports.pn_progress_indicator_step = PnProgressIndicatorStep;
