{"version":3,"file":"PracticeGuideFi-JcEmDmgf.js","sources":["../../src/pages/practice-guide-fi/PracticeGuideFi.vue"],"sourcesContent":["<template>\n  <component-wrapper class=\"practice-guide-fi\">\n    <grid-container-fi>\n      <loading-indicator\n        v-if=\"!practiceGuideJson\"\n        variant=\"spinnerFullPage\"\n        data-test=\"practice-guide-loading-indicator\"\n      />\n      <div\n        v-else\n        class=\"practice-guide-fi__wrapper\"\n      >\n        <div class=\"practice-guide-fi__headline-super\">{{ fields.heading?.value }}</div>\n        <div class=\"practice-guide-fi__query\">\n          {{ fields.subHeading?.value }}\n        </div>\n\n        <div\n          v-if=\"!gotResults\"\n          class=\"practice-guide-fi__question\"\n        >\n          {{ question }}\n        </div>\n        <progress-bar-fi\n          v-if=\"!gotResults\"\n          :progress=\"progress\"\n          class=\"fi-mb-12\"\n        />\n        <div class=\"practice-guide-fi__back-arrow-container\">\n          <button\n            class=\"button-fi__icon practice-guide-fi__back-button\"\n            :disabled=\"!activeQuestionObject\"\n            @click=\"back\"\n          >\n            <arrow-icon class=\"practice-guide-fi__back-arrow backwards\" />\n          </button>\n        </div>\n      </div>\n    </grid-container-fi>\n    <grid-container-fi :container=\"false\">\n      <transition\n        mode=\"out-in\"\n        enter-active-class=\"animated fadeIn fastest\"\n        leave-active-class=\"animated fadeOut fastest\"\n      >\n        <div\n          v-if=\"!gotResults\"\n          class=\"practice-guide-fi__answers\"\n        >\n          <carousel-fi\n            clipped-right\n            :settings=\"sliderSettings\"\n            no-arrows\n          >\n            <carousel-slide-fi\n              v-for=\"answer in answers\"\n              :key=\"getKey(answer)\"\n            >\n              <question-tile-fi\n                :answer=\"answer\"\n                @select-answer=\"showResult\"\n              />\n            </carousel-slide-fi>\n          </carousel-fi>\n        </div>\n        <div\n          v-else\n          class=\"practice-guide-fi__results\"\n        >\n          <div\n            v-for=\"(result, index) in activeQuestionObject.Results\"\n            :key=\"index\"\n          >\n            <teaser-big-image-element-fi\n              :fields=\"{\n                content: {\n                  value: `<h3>${result.Headline}</h3> <br/> <p>${result.Text}</p> <br/> <a href='${result.Link?.Url}' class='${result.Link?.Url ? 'button-fi__tertiary button-fi__xs-streched' : 'fi-hidden'}'>${result.Link?.Text}</a>`,\n                },\n                image: result.Image\n                  ? { value: { src: result.Image.Src, alt: result.Image.Alt } }\n                  : null,\n                imagePosRight: {\n                  value: !(index % 2),\n                },\n              }\"\n              bg-color=\"white\"\n            />\n          </div>\n        </div>\n      </transition>\n    </grid-container-fi>\n  </component-wrapper>\n</template>\n\n<script setup lang=\"ts\">\nimport { ArrowIcon, CarouselFi, CarouselSlideFi, LoadingIndicator, ProgressBarFi } from 'atoms';\nimport axios from 'axios';\nimport ComponentWrapper from 'components/component-wrapper/ComponentWrapper.vue';\nimport GridContainerFi from 'components/grid-fi/GridContainerFi.vue';\nimport QuestionTileFi from 'components/question-tile-fi/QuestionTileFi.vue';\nimport TeaserBigImageElementFi from 'components/teaser/teaser-big-image-element-fi/TeaserBigImageElementFi.vue';\nimport { useBreakpoints } from 'composables/breakpoint';\nimport { useFischer } from 'composables/fischerPlugin';\nimport { computed, inject, onMounted, ref } from 'vue';\n\ninterface Result {\n  Headline: string;\n  Text: string;\n  Link: {\n    Url?: string;\n    Text?: string;\n  };\n  Image: {\n    Src?: string;\n    Alt?: string;\n  };\n}\n\ninterface Answer {\n  key?: number;\n  Results?: Result[];\n  [key: string]: any;\n}\ninterface PracticeGuideJson {\n  Question: {\n    QuestionText: string;\n    Answers: Answer[];\n  };\n}\n\nconst fischer = useFischer();\nconst breakpoint = useBreakpoints();\nconst fields = inject<any>('fields');\nconst practiceGuideJson = ref<PracticeGuideJson | null>(null);\nconst activeQuestionObject = ref<Answer | null>(null);\nconst historyStack = ref<Answer[]>([]);\nconst finalResult = ref<Result[]>([]);\nlet maxKey = ref<number>(0);\n\nonMounted(async () => {\n  let practiceGuideUrl;\n  if (IS_SHOWROOM) {\n    practiceGuideUrl = '/__mocks__/data/practiceGuide.json';\n  } else {\n    const apiKey = fields.apiKey?.value ? `&apiKey=${encodeURIComponent(fields.apiKey.value)}` : '';\n    practiceGuideUrl = `${fischer.hostUrlBase()}/practiceguide/api/app?lang=${fischer.siteLanguage()}${apiKey}`;\n  }\n  const { data } = await axios.get(practiceGuideUrl);\n  practiceGuideJson.value = data;\n});\n\nconst question = computed(() => {\n  return activeQuestionObject.value\n    ? activeQuestionObject.value.Question?.QuestionText\n    : practiceGuideJson.value?.Question?.QuestionText;\n});\nconst sliderSettings = computed(() => {\n  return {\n    destroy: false,\n    pagination: true,\n    breakpoints: {\n      [breakpoint.screenWidths.md]: {\n        destroy: true,\n        pagination: false,\n      },\n    },\n  };\n});\n\nconst answers = computed(() => {\n  return activeQuestionObject.value\n    ? activeQuestionObject.value.Question?.Answers\n    : practiceGuideJson.value?.Question?.Answers;\n});\nconst currentDepth = computed(() => historyStack.value.length);\n\nconst maxDepth = computed(() => {\n  return getMaxDepth(\n    activeQuestionObject.value?.Question || practiceGuideJson.value?.Question || null,\n  );\n});\nconst progress = computed(() => {\n  return (currentDepth.value / (currentDepth.value + maxDepth.value)) * 100;\n});\n\nconst gotResults = computed(() => !!activeQuestionObject.value?.Results?.length);\nconst getKey = (answer: Answer) => {\n  if (!answer.key) {\n    maxKey.value += 1;\n    answer.key = maxKey.value;\n  }\n  return answer.key;\n};\nconst showResult = (answer: Answer) => {\n  historyStack.value.push(activeQuestionObject.value as Answer);\n  if (answer?.Results) finalResult.value = answer.Results;\n  activeQuestionObject.value = answer;\n};\n\nconst back = () => {\n  finalResult.value = [];\n  if (historyStack.value.length > 0) {\n    activeQuestionObject.value = historyStack.value.pop() || null;\n  } else {\n    activeQuestionObject.value = null;\n  }\n};\n\nconst getMaxDepth = (node: Answer | null): number => {\n  if (!node || !node.Answers) return 0;\n  let maxDepth = 0;\n  for (const answer of node.Answers) {\n    maxDepth = Math.max(maxDepth, getMaxDepth(answer));\n  }\n  return maxDepth + 1;\n};\n</script>\n\n<style scoped lang=\"scss\">\n@import './practice-guide-fi';\n</style>\n"],"names":["fischer","useFischer","breakpoint","useBreakpoints","fields","inject","practiceGuideJson","ref","activeQuestionObject","historyStack","finalResult","maxKey","onMounted","practiceGuideUrl","apiKey","_a","data","axios","question","computed","_c","_b","sliderSettings","answers","currentDepth","maxDepth","getMaxDepth","progress","gotResults","getKey","answer","showResult","back","node"],"mappings":"44CAkIA,MAAMA,EAAUC,IACVC,EAAaC,IACbC,EAASC,EAAY,QAAQ,EAC7BC,EAAoBC,EAA8B,IAAI,EACtDC,EAAuBD,EAAmB,IAAI,EAC9CE,EAAeF,EAAc,CAAA,CAAE,EAC/BG,EAAcH,EAAc,CAAA,CAAE,EAChC,IAAAI,EAASJ,EAAY,CAAC,EAE1BK,EAAU,SAAY,OAChB,IAAAC,EAGG,CACC,MAAAC,GAASC,EAAAX,EAAO,SAAP,MAAAW,EAAe,MAAQ,WAAW,mBAAmBX,EAAO,OAAO,KAAK,CAAC,GAAK,GAC1ES,EAAA,GAAGb,EAAQ,aAAa,+BAA+BA,EAAQ,aAAc,CAAA,GAAGc,CAAM,EAC3G,CACA,KAAM,CAAE,KAAAE,CAAK,EAAI,MAAMC,EAAM,IAAIJ,CAAgB,EACjDP,EAAkB,MAAQU,CAAA,CAC3B,EAEK,MAAAE,EAAWC,EAAS,IAAM,WACvB,OAAAX,EAAqB,OACxBO,EAAAP,EAAqB,MAAM,WAA3B,YAAAO,EAAqC,cACrCK,GAAAC,EAAAf,EAAkB,QAAlB,YAAAe,EAAyB,WAAzB,YAAAD,EAAmC,YAAA,CACxC,EACKE,EAAiBH,EAAS,KACvB,CACL,QAAS,GACT,WAAY,GACZ,YAAa,CACX,CAACjB,EAAW,aAAa,EAAE,EAAG,CAC5B,QAAS,GACT,WAAY,EACd,CACF,CAAA,EAEH,EAEKqB,EAAUJ,EAAS,IAAM,WACtB,OAAAX,EAAqB,OACxBO,EAAAP,EAAqB,MAAM,WAA3B,YAAAO,EAAqC,SACrCK,GAAAC,EAAAf,EAAkB,QAAlB,YAAAe,EAAyB,WAAzB,YAAAD,EAAmC,OAAA,CACxC,EACKI,EAAeL,EAAS,IAAMV,EAAa,MAAM,MAAM,EAEvDgB,EAAWN,EAAS,IAAM,SACvB,OAAAO,IACLX,EAAAP,EAAqB,QAArB,YAAAO,EAA4B,aAAYM,EAAAf,EAAkB,QAAlB,YAAAe,EAAyB,WAAY,IAAA,CAC/E,CACD,EACKM,EAAWR,EAAS,IAChBK,EAAa,OAASA,EAAa,MAAQC,EAAS,OAAU,GACvE,EAEKG,EAAaT,EAAS,aAAM,OAAC,GAACE,GAAAN,EAAAP,EAAqB,QAArB,YAAAO,EAA4B,UAA5B,MAAAM,EAAqC,QAAM,EACzEQ,EAAUC,IACTA,EAAO,MACVnB,EAAO,OAAS,EAChBmB,EAAO,IAAMnB,EAAO,OAEfmB,EAAO,KAEVC,EAAcD,GAAmB,CACxBrB,EAAA,MAAM,KAAKD,EAAqB,KAAe,EACxDsB,GAAA,MAAAA,EAAQ,UAAqBpB,EAAA,MAAQoB,EAAO,SAChDtB,EAAqB,MAAQsB,CAAA,EAGzBE,EAAO,IAAM,CACjBtB,EAAY,MAAQ,GAChBD,EAAa,MAAM,OAAS,EAC9BD,EAAqB,MAAQC,EAAa,MAAM,IAAA,GAAS,KAEzDD,EAAqB,MAAQ,IAC/B,EAGIkB,EAAeO,GAAgC,CACnD,GAAI,CAACA,GAAQ,CAACA,EAAK,QAAgB,MAAA,GACnC,IAAIR,EAAW,EACJ,UAAAK,KAAUG,EAAK,QACxBR,EAAW,KAAK,IAAIA,EAAUC,EAAYI,CAAM,CAAC,EAEnD,OAAOL,EAAW,CAAA"}