'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var normalText = require('./normalText-7b937f11.js');
var vue = require('vue');

var script = {
    components: {
        TsNormalText: normalText.script,
    },
    props: {
        stepItems: {
            required: true,
        },
        selectedStep: {
            type: String,
        },
    },
    emits: ["update:selectedStep"],
    name: "TsStepFlow",
    setup(props, context) {
        const selectedStepValue = vue.ref("");
        vue.onMounted(() => {
            if (props.stepItems.length > 0) {
                selectedStepValue.value = props.stepItems[0].key;
            }
        });
        vue.watch(selectedStepValue, () => {
            context.emit("update:selectedStep", selectedStepValue.value);
        });
        vue.watch(props, () => {
            selectedStepValue.value = props.selectedStep;
        });
        return {
            selectedStepValue,
        };
    },
};

const _hoisted_1 = { class: "w-full col-span-full flex justify-between flex-row items-center border-b-[1px] mdlg:!border-[1px] mdlg:!border-r-[1px] mdlg:!border-l-[1px] border-r-0 border-l-0 border-gray-200 mdlg:rounded-t-[4px] mdlg:rounded-b-[0px]" };
const _hoisted_2 = ["onClick"];

function render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ts_normal_text = vue.resolveComponent("ts-normal-text");

  return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.stepItems, (step, index) => {
      return (vue.openBlock(), vue.createElementBlock("div", {
        key: index,
        onClick: $event => ($setup.selectedStepValue = step.key),
        class: vue.normalizeClass(`py-3 flex flex-row w-full items-center cursor-pointer justify-center space-x-2 ${
        $props.selectedStep == step.key ? 'border-b-[1px] border-primaryPurple' : ''
      }  `)
      }, [
        vue.createVNode(_component_ts_normal_text, {
          color: `${
          $setup.selectedStepValue == step.key
            ? 'text-primaryPurple '
            : 'text-paragraphTextLight'
        }`
        }, {
          default: vue.withCtx(() => [
            vue.createTextVNode(vue.toDisplayString(index + 1), 1 /* TEXT */)
          ]),
          _: 2 /* DYNAMIC */
        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["color"]),
        vue.createElementVNode("span", {
          class: vue.normalizeClass(`h-[4px] w-[4px] rounded-full ${
          $setup.selectedStepValue == step.key
            ? 'bg-primaryPurple '
            : 'bg-paragraphTextLight'
        } hidden md:!inline-block`)
        }, null, 2 /* CLASS */),
        vue.createVNode(_component_ts_normal_text, {
          color: `${
          $setup.selectedStepValue == step.key
            ? 'text-primaryPurple '
            : 'text-paragraphTextLight'
        }`,
          customClass: 'hidden md:!inline-block'
        }, {
          default: vue.withCtx(() => [
            vue.createTextVNode(vue.toDisplayString(step.value), 1 /* TEXT */)
          ]),
          _: 2 /* DYNAMIC */
        }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["color"])
      ], 10 /* CLASS, PROPS */, _hoisted_2))
    }), 128 /* KEYED_FRAGMENT */))
  ]))
}

script.render = render;
script.__file = "src/components/TsStepFlow/index.vue";

exports["default"] = script;
