{"version":3,"file":"CSMpsDPn.js","sources":["../../../../storyblok/ServiceMethod.vue"],"sourcesContent":["<template>\n  <div class=\"service-process\" ref=\"serviceProcessEl\">\n    <GridContainer>\n      <GridItem>\n        <div class=\"header-container\">\n          <h2>{{ blok.title }}</h2>\n          <p>{{ blok.description }}</p>\n        </div>\n      </GridItem>\n      <GridItem\n        :size-lg=\"7\"\n        :size-xl=\"6\"\n        :offset-xl=\"1\"\n        class=\"step-info-list-container\"\n      >\n        <div class=\"step-info-list\">\n          <div\n            class=\"step-info-container\"\n            v-for=\"(step, i) in blok.steps\"\n            :class=\"{ active: activeStep == i }\"\n          >\n            <button class=\"step-header\" @click=\"changeStep(i)\">\n              <div class=\"step-number\">\n                {{ i + 1 }}\n              </div>\n              <div class=\"step-title-wrapper\">\n                <div class=\"step-title\">\n                  {{ step.title }}\n                </div>\n              </div>\n              <span\n                class=\"m-cgg-icon--chevron-right\"\n                v-if=\"i < blok.steps.length - 1\"\n              ></span>\n            </button>\n            <Transition\n              name=\"fade\"\n              @enter=\"setHeightEnter\"\n              @leave=\"setHeightLeave\"\n            >\n              <div class=\"step-description\" v-if=\"activeStep == i\">\n                {{ step.description }}\n              </div>\n            </Transition>\n          </div>\n        </div>\n        <div class=\"btn-container\" v-if=\"blok.button?.length\">\n          <NavigationButton :blok=\"button\" v-for=\"button in blok.button\" />\n        </div>\n      </GridItem>\n      <GridItem :size-lg=\"5\" :size-xl=\"4\">\n        <div class=\"step-image-container\">\n          <TransitionGroup name=\"fade\">\n            <div\n              class=\"step-image-wrapper\"\n              v-for=\"(step, i) in blok.steps\"\n              :key=\"i\"\n              v-show=\"i == activeStep\"\n            >\n              <StoryblokImg :image=\"step.image\" height=\"284\" />\n              <div class=\"text-container\">\n                <div class=\"step-title\">\n                  {{ step.title }}\n                </div>\n                <div class=\"step-description\">\n                  {{ step.description }}\n                </div>\n              </div>\n            </div>\n          </TransitionGroup>\n        </div>\n      </GridItem>\n      <GridItem v-if=\"blok.button?.length\" class=\"btn-container-mobile\">\n        <NavigationButton :blok=\"blok.button[0]\" />\n      </GridItem>\n    </GridContainer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { GridItem, GridContainer } from \"cja-phoenix\";\nimport { ServiceMethodStoryblok } from \"~/types/bloks\";\n\nconst props = defineProps<{ blok: ServiceMethodStoryblok }>();\n\nconst activeStep = ref(0);\nconst timer = ref();\nconst serviceProcessEl = ref();\n\nconst setHeightEnter = (el: any) => {\n  if (el.offsetParent) {\n    const targetHeight = el.offsetHeight;\n    el.style.height = 0;\n\n    window.requestAnimationFrame(() => {\n      el.style.height = `${targetHeight}px`;\n    });\n  }\n};\n\nconst setHeightLeave = (el: any) => {\n  if (el.offsetParent) {\n    el.style.height = `${el.offsetHeight}px`;\n\n    window.requestAnimationFrame(() => {\n      el.style.height = 0;\n    });\n  }\n};\n\nconst changeStep = (step?: number) => {\n  activeStep.value =\n    step != undefined\n      ? step\n      : activeStep.value < props.blok.steps.length - 1\n      ? activeStep.value + 1\n      : 0;\n\n  if (step != undefined) {\n    clearTimer();\n    setTimer();\n  }\n};\n\nconst setTimer = () => {\n  timer.value = setInterval(\n    changeStep,\n    parseInt(props.blok.stepDuration) * 1000\n  );\n};\n\nconst clearTimer = () => {\n  clearInterval(timer.value);\n  timer.value = null;\n};\n\nconst checkActive = () => {\n  const scrollData = {\n    top: window.scrollY,\n    bottom: window.scrollY + window.innerHeight,\n  };\n\n  const elementData = {\n    top: serviceProcessEl.value.offsetTop,\n    bottom:\n      serviceProcessEl.value.offsetTop + serviceProcessEl.value.offsetHeight,\n  };\n\n  if (\n    scrollData.bottom > elementData.top &&\n    scrollData.top < elementData.bottom &&\n    !timer.value\n  ) {\n    setTimer();\n  } else if (\n    (scrollData.bottom < elementData.top ||\n      scrollData.top > elementData.bottom) &&\n    timer.value\n  ) {\n    clearTimer();\n  }\n};\n\nonMounted(() => {\n  window.addEventListener(\"scroll\", checkActive);\n  checkActive();\n});\n\nonUnmounted(() => {\n  window.removeEventListener(\"scroll\", checkActive);\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.service-process {\n  padding: 60px 0;\n\n  .header-container {\n    margin-bottom: 40px;\n    @include blok-header;\n\n    h2 {\n      margin: 0 0 16px;\n    }\n\n    p {\n      margin: 0;\n    }\n  }\n\n  .step-info-list-container {\n    @media screen and (max-width: $break-md-max) {\n      display: flex;\n      justify-content: center;\n      margin-bottom: 24px;\n    }\n\n    .btn-container {\n      display: none;\n\n      @media screen and (min-width: $break-lg-min) {\n        display: block;\n      }\n\n      .cja-btn {\n        min-width: 200px;\n      }\n    }\n  }\n\n  .step-info-list {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n\n    @media screen and (min-width: $break-lg-min) {\n      flex-direction: column;\n      align-items: unset;\n      gap: 24px;\n      margin-bottom: 32px;\n    }\n\n    .step-info-container {\n      display: grid;\n      grid-template-rows: 1fr;\n      gap: 8px;\n\n      &.active {\n        .step-header {\n          .step-title {\n            font-size: 20px;\n            font-weight: 700;\n          }\n        }\n      }\n\n      @media screen and (min-width: $break-lg-min) {\n        grid-template-columns: 1fr;\n        gap: 0;\n        padding-left: 24px;\n        border-left: 2px solid transparent;\n        transition: all 0.3s ease-in-out;\n      }\n\n      .step-header {\n        display: flex;\n        align-items: center;\n        border: none;\n        padding: 0;\n        outline: none;\n        cursor: pointer;\n        background: none;\n\n        &:hover {\n          @media screen and (min-width: $break-lg-min) {\n            .step-number {\n              background-color: $dark-blue;\n            }\n\n            .step-title {\n              color: $dark-blue;\n            }\n          }\n        }\n\n        .step-number {\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          width: 25px;\n          height: 25px;\n          flex-shrink: 0;\n          border-radius: 50%;\n          background-color: $extra-dark-blue;\n          color: $white;\n          font-size: 16px;\n          font-weight: 700;\n          transition: all 0.3s ease-in-out;\n        }\n\n        .step-title-wrapper {\n          overflow: hidden;\n          transition: all 0.3s ease-in-out;\n          margin-left: 8px;\n\n          @media screen and (min-width: $break-lg-min) {\n            margin-left: 24px;\n          }\n\n          &.slide-enter-from,\n          &.slide-leave-to {\n            margin-left: 0;\n          }\n\n          &.slide-enter-to,\n          &.slide-leave-from {\n            margin-left: 8px;\n\n            @media screen and (min-width: $break-lg-min) {\n              margin-left: 24px;\n            }\n          }\n        }\n\n        .step-title {\n          font-size: 16px;\n          line-height: 24px;\n          transition: all 0.3s ease-in-out;\n          display: none;\n          color: $extra-dark-blue;\n\n          @media screen and (min-width: $break-lg-min) {\n            display: block;\n            text-align: left;\n          }\n        }\n\n        .m-cgg-icon--chevron-right {\n          margin-left: 8px;\n          font-size: 16px;\n          transition: all 0.3s ease-in-out;\n\n          @media screen and (min-width: $break-lg-min) {\n            display: none;\n          }\n        }\n      }\n\n      .step-description {\n        transition: all 0.3s ease-in-out;\n        margin-top: 16px;\n        font-size: 16px;\n        line-height: 24px;\n\n        @media screen and (max-width: $break-md-max) {\n          display: none;\n        }\n\n        &.fade-enter-to,\n        &.fade-leave-from {\n          opacity: 1;\n          margin-top: 16px;\n        }\n\n        &.fade-enter-from,\n        &.fade-leave-to {\n          opacity: 0;\n          margin-top: 0;\n        }\n      }\n\n      &.active {\n        border-color: $main-blue;\n\n        .step-header {\n          .step-number {\n            background-color: $main-blue;\n          }\n\n          .step-title {\n            color: $main-blue;\n          }\n\n          .m-cgg-icon--chevron-right {\n            color: $main-blue;\n          }\n        }\n      }\n    }\n  }\n\n  .step-image-container {\n    position: relative;\n\n    @media screen and (min-width: $break-lg-min) {\n      margin-bottom: 0;\n    }\n\n    .step-image-wrapper {\n      transition: all 0s ease-in-out;\n\n      @media screen and (min-width: $break-md-min) {\n        transition: opacity 0.3s ease-in-out;\n      }\n\n      @media screen and (min-width: $break-md-min) and (max-width: $break-md-max) {\n        display: grid;\n        grid-template-columns: repeat(2, 1fr);\n        align-items: center;\n        gap: 24px;\n      }\n\n      img {\n        display: block;\n        max-width: 100%;\n        margin: 0 auto 24px;\n\n        @media screen and (min-width: $break-md-min) and (max-width: $break-md-max) {\n          grid-area: 1 / 2 / 2 / 3;\n        }\n\n        @media screen and (min-width: $break-md-min) {\n          max-width: 100%;\n          max-height: 284px;\n          margin: 0;\n        }\n      }\n\n      .text-container {\n        max-width: 400px;\n        margin: 0 auto;\n\n        @media screen and (min-width: $break-md-min) and (max-width: $break-md-max) {\n          grid-area: 1 / 1 / 2 / 2;\n        }\n\n        @media screen and (min-width: $break-lg-min) {\n          display: none;\n        }\n      }\n\n      .step-title {\n        color: $main-blue;\n        font-size: 18px;\n        font-weight: 700;\n        max-width: 400px;\n        margin-bottom: 16px;\n      }\n\n      .step-description {\n        font-size: 16px;\n        line-height: 22px;\n      }\n\n      &.fade-leave-active {\n        @media screen and (min-width: $break-md-min) {\n          position: absolute;\n          left: 0;\n          top: 0;\n          width: 100%;\n        }\n      }\n\n      &.fade-enter-to,\n      &.fade-leave-from {\n        @media screen and (min-width: $break-md-min) {\n          opacity: 1;\n        }\n      }\n\n      &.fade-enter-from,\n      &.fade-leave-to {\n        @media screen and (min-width: $break-md-min) {\n          opacity: 0;\n        }\n      }\n    }\n  }\n\n  .btn-container-mobile {\n    display: grid;\n    margin-top: 24px;\n\n    @media screen and (min-width: $break-xs-min) {\n      display: flex;\n      justify-content: center;\n    }\n\n    @media screen and (min-width: $break-lg-min) {\n      display: none;\n    }\n\n    .cja-btn {\n      @media screen and (min-width: $break-xs-min) {\n        min-width: 400px;\n      }\n\n      @media screen and (min-width: $break-md-min) {\n        min-width: 200px;\n      }\n    }\n  }\n}\n</style>\n"],"names":["props","__props","activeStep","ref","timer","serviceProcessEl","setHeightEnter","el","targetHeight","setHeightLeave","changeStep","step","clearTimer","setTimer","setInterval","checkActive","scrollData","elementData","onMounted","onUnmounted"],"mappings":"isBAmFA,MAAMA,EAAQC,EAERC,EAAaC,EAAI,CAAC,EAClBC,EAAQD,EAAI,EACZE,EAAmBF,EAAI,EAEvBG,EAAkBC,GAAY,CAClC,GAAIA,EAAG,aAAc,CACnB,MAAMC,EAAeD,EAAG,aACxBA,EAAG,MAAM,OAAS,EAElB,OAAO,sBAAsB,IAAM,CAC9BA,EAAA,MAAM,OAAS,GAAGC,CAAY,IAAA,CAClC,CAAA,CAEL,EAEMC,EAAkBF,GAAY,CAC9BA,EAAG,eACLA,EAAG,MAAM,OAAS,GAAGA,EAAG,YAAY,KAEpC,OAAO,sBAAsB,IAAM,CACjCA,EAAG,MAAM,OAAS,CAAA,CACnB,EAEL,EAEMG,EAAcC,GAAkB,CACpCT,EAAW,MACTS,IAEIT,EAAW,MAAQF,EAAM,KAAK,MAAM,OAAS,EAC7CE,EAAW,MAAQ,EACnB,GAEFS,GAAQ,OACCC,EAAA,EACFC,EAAA,EAEb,EAEMA,EAAW,IAAM,CACrBT,EAAM,MAAQU,EACZJ,EACA,SAASV,EAAM,KAAK,YAAY,EAAI,GACtC,CACF,EAEMY,EAAa,IAAM,CACvB,cAAcR,EAAM,KAAK,EACzBA,EAAM,MAAQ,IAChB,EAEMW,EAAc,IAAM,CACxB,MAAMC,EAAa,CACjB,IAAK,OAAO,QACZ,OAAQ,OAAO,QAAU,OAAO,WAClC,EAEMC,EAAc,CAClB,IAAKZ,EAAiB,MAAM,UAC5B,OACEA,EAAiB,MAAM,UAAYA,EAAiB,MAAM,YAC9D,EAGEW,EAAW,OAASC,EAAY,KAChCD,EAAW,IAAMC,EAAY,QAC7B,CAACb,EAAM,MAEES,EAAA,GAERG,EAAW,OAASC,EAAY,KAC/BD,EAAW,IAAMC,EAAY,SAC/Bb,EAAM,OAEKQ,EAAA,CAEf,EAEA,OAAAM,EAAU,IAAM,CACP,OAAA,iBAAiB,SAAUH,CAAW,EACjCA,EAAA,CAAA,CACb,EAEDI,EAAY,IAAM,CACT,OAAA,oBAAoB,SAAUJ,CAAW,CAAA,CACjD"}