{"version":3,"file":"js/538.85e952a9.js","mappings":"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","sources":["webpack://tva-div-template/./src/components/charts/info-road-2050/AreasMenu.vue","webpack://tva-div-template/./src/components/charts/info-road-2050/AreasMenu.vue?feb1","webpack://tva-div-template/./src/components/charts/info-road-2050/DataMilestones.vue","webpack://tva-div-template/./src/components/charts/info-road-2050/DataMilestones.vue?a9d2","webpack://tva-div-template/./src/components/charts/info-road-2050/AreasIndex.vue","webpack://tva-div-template/./src/components/charts/info-road-2050/AreasIndex.vue?5d05","webpack://tva-div-template/./src/components/charts/info-road-2050/ChartContainer.vue","webpack://tva-div-template/./src/components/charts/info-road-2050/ChartContainer.vue?f17c","webpack://tva-div-template/./src/components/charts/info-road-2050/ChartRoadTo2050.vue","webpack://tva-div-template/./src/components/charts/info-road-2050/ChartRoadTo2050.vue?c809","webpack://tva-div-template/./src/components/general/ArrowButtons.vue","webpack://tva-div-template/./src/components/general/BubbleDecoration.vue","webpack://tva-div-template/./src/components/general/BubbleDecoration.vue?8f4e","webpack://tva-div-template/./src/components/general/CancelButton.vue","webpack://tva-div-template/./src/components/general/CancelButton.vue?5252","webpack://tva-div-template/./src/components/general/DropDown.vue","webpack://tva-div-template/./src/components/general/DropDown.vue?3f5f","webpack://tva-div-template/./src/components/general/RoundIconButton.vue"],"sourcesContent":["<template>\n  <div class=\"areas-wrapper\">\n    <div class=\"areas-container\">\n      <div class=\"areas-container__areas\">\n        <button\n          v-for=\"(area, index) of area\"\n          :class=\"[\n            'areas-container__areas__area',\n            { active: area.label == selectedEl },\n          ]\"\n          @click=\"\n            $emit('selectArea', { el: area.label, id: area.id, type: 'areas' })\n          \"\n          :key=\"'area' + index\"\n        >\n          <p>{{ area.label }}</p>\n        </button>\n      </div>\n      <!-- <button\n      v-if=\"checkChart == 'scrollable'\"\n      class=\"areas-container__arrow-slider\"\n      @click=\"\n        $emit('selectArea', { el: area.label, id: area.id, type: 'slider' })\n      \"\n    >\n      <img\n        :src=\"`${$baseUrl}icons/arrow-right.svg`\"\n        alt=\"\"\n        role=\"presentation\"\n      />\n    </button> -->\n    </div>\n\n    <CancelButton\n      v-if=\"selectedEl\"\n      class=\"areas-cancel-btn\"\n      @onCancel=\"$emit('selectArea', { el: selectedEl })\"\n    />\n  </div>\n</template>\n\n<script>\nimport CancelButton from \"../../general/CancelButton.vue\";\n\n// import ClickOutside from \"vue-click-outside\";\n// v-click-outside=\"resetArea\"\n\nexport default {\n  components: {\n    CancelButton,\n  },\n  // directives: {\n  //   ClickOutside,\n  // },\n  props: {\n    selectedEl: String,\n    area: {\n      type: Array,\n      required: true,\n    },\n    checkChart: {\n      type: String,\n      required: true,\n    },\n    dragging: Boolean,\n    withClickOutside: Boolean,\n  },\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.areas-wrapper {\n  position: relative;\n\n  .areas-container {\n    @include scrollbar-style;\n\n    display: flex;\n    align-items: center;\n    max-width: calc(var(--vw-no-scrollbar) - var(--page-padding-h) - 5rem);\n    overflow: scroll;\n    padding-bottom: 1rem;\n    position: relative;\n\n    &__areas {\n      @include overlay-s;\n      display: flex;\n      gap: 0.15rem;\n      color: var(--black);\n\n      &__area {\n        display: flex;\n        align-items: center;\n        text-transform: uppercase;\n        white-space: nowrap;\n        padding: 0.94rem 1.19em;\n        margin: 0;\n        background: var(--white);\n        transition: background-color 0.3s;\n        color: var(--page-color);\n        border: 1px solid var(--page-color);\n        border-radius: 0.5rem;\n        line-height: 0.875rem;\n\n        &:not(.active):hover {\n          background-color: color-mix(in oklab, var(--page-color), white 90%);\n        }\n\n        &.active {\n          background: var(--page-color);\n          color: var(--white);\n        }\n      }\n    }\n    &__arrow-slider {\n      position: absolute;\n      right: 8rem;\n      top: 6rem;\n      z-index: 6;\n\n      &__icon {\n        fill: var(--white);\n      }\n    }\n  }\n\n  .areas-cancel-btn {\n    position: absolute;\n    right: 0;\n    top: 100%;\n    color: var(--black);\n  }\n}\n</style>\n","import { render } from \"./AreasMenu.vue?vue&type=template&id=0efd4a54&scoped=true\"\nimport script from \"./AreasMenu.vue?vue&type=script&lang=js\"\nexport * from \"./AreasMenu.vue?vue&type=script&lang=js\"\n\nimport \"./AreasMenu.vue?vue&type=style&index=0&id=0efd4a54&lang=scss&scoped=true\"\n\nimport exportComponent from \"../../../../node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-0efd4a54\"]])\n\nexport default __exports__","<template>\n  <div class=\"milestones\">\n    <div class=\"milestones__circles\">\n      <div\n        class=\"milestones__circles__circle\"\n        v-for=\"milestoneData in filteredYears\"\n        :key=\"milestoneData.index\"\n        :style=\"[\n          {\n            top: `calc(${100 / (years.length - 1)}% * ${milestoneData.index})`,\n            background: 'var(--neutralita-carbonica)',\n          },\n        ]\"\n      >\n        <div\n          :class=\"[\n            'milestones__circles__circle__label',\n            { small: milestoneData.label.includes('<div>') },\n          ]\"\n          v-if=\"milestoneData.label && !Array.isArray(milestoneData.label)\"\n          v-html=\"\n            milestoneData.label +\n            (milestoneData.unit ? ' ' + milestoneData.unit : '') +\n            (milestoneData.note ? `<sup>(${milestoneData.note})</sup>` : '')\n          \"\n        />\n\n        <div\n          class=\"milestones__circles__circle__label\"\n          v-else-if=\"\n            milestoneData.label && !!Array.isArray(milestoneData.label)\n          \"\n        >\n          <p\n            v-for=\"(paragraph, index) in milestoneData.label\"\n            :key=\"'paragraph' + index\"\n          >\n            {{ paragraph }}\n          </p>\n        </div>\n      </div>\n    </div>\n    <div\n      class=\"milestones__line\"\n      :style=\"{\n        height: `calc(((100% - 2rem) - ${\n          filteredYears[filteredYears.length - 1].index\n        } * ${100 / years.length}%))`,\n      }\"\n    ></div>\n    <div class=\"milestones__step-label\" v-html=\"area.label\" />\n  </div>\n</template>\n\n<script setup>\nimport { computed } from \"vue\";\n\nconst props = defineProps({\n  area: {\n    type: Object,\n    required: true,\n  },\n  years: Array,\n  isLastOne: Boolean,\n});\n\nconst filteredYears = computed(() => {\n  const filteredArray = [];\n\n  const yearsArray = props.years;\n  props.area.milestones.map((el) => {\n    filteredArray.push({\n      index: yearsArray.indexOf(el.year),\n      label: el.label,\n      unit: props.area.unit,\n      note: el.note,\n    });\n  });\n\n  return filteredArray;\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.milestones {\n  height: 100%;\n  width: calc(10rem + 27px);\n  position: relative;\n  z-index: 1;\n  padding-right: 5rem;\n\n  &__circles {\n    position: absolute;\n    height: calc(100% - 27px);\n    bottom: 0;\n\n    &__circle {\n      position: absolute;\n      width: 0.8rem;\n      height: 0.8rem;\n      bottom: 0;\n      transform: translate(-45%, -50%);\n      border-radius: 100px;\n      border: 2px solid var(--white);\n      // box-shadow: 0px 0px 16px var(--white);\n\n      &__label {\n        @include title-xs;\n\n        line-height: 105%;\n        position: relative;\n        transform: translate(1.1rem, calc(-50% + 5px));\n        background: var(--page-color);\n        border: 2px solid var(--white);\n        color: var(--white);\n        padding: 0.35rem 0.62rem;\n        width: max-content;\n        border-radius: 0.5rem;\n\n        &.small ::v-deep(div) {\n          font-size: toRem(14);\n          line-height: 130%;\n        }\n      }\n    }\n  }\n  &__line {\n    width: 1px;\n    position: absolute;\n    z-index: -1;\n    bottom: 0;\n    background-color: var(--page-color);\n  }\n  &__step-label {\n    @include p-s;\n\n    line-height: 1.375rem;\n    position: absolute;\n    width: 91.5%;\n    bottom: 0;\n    transform: translate(-10%, calc(100% + 28px));\n    padding-left: 0.75rem;\n  }\n}\n</style>\n","import script from \"./DataMilestones.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./DataMilestones.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./DataMilestones.vue?vue&type=style&index=0&id=f815a206&lang=scss&scoped=true\"\n\nimport exportComponent from \"../../../../node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-f815a206\"]])\n\nexport default __exports__","<template>\n  <div class=\"areas-index\" :style=\"{ width: lineWidth + 'px' }\">\n    <div class=\"areas-index__line\" />\n    <div class=\"areas-index__description\">\n      <div class=\"areas-index__description__icon\">\n        <img\n          :src=\"`${$baseUrl}images/icons-chart/${content.id}-area-road2050.svg`\"\n          alt=\"\"\n          role=\"presentation\"\n        />\n      </div>\n      <p class=\"areas-index__description__label\" v-html=\"content.title\" />\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  data() {\n    return {\n      lineWidth: 0,\n    };\n  },\n  props: {\n    content: {\n      type: Object,\n      required: true,\n    },\n    isLastOne: Boolean,\n  },\n  mounted() {\n    this.$nextTick(() => {\n      this.lineWidth = document\n        .querySelector(\"#\" + this.content.id)\n        .getBoundingClientRect().width;\n    });\n  },\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.areas-index {\n  padding-right: 0.9rem;\n  color: var(--page-color);\n\n  &__description {\n    display: flex;\n    align-items: center;\n    margin-top: toRem(10);\n\n    &__icon {\n      padding-right: 0.5rem;\n\n      img {\n        height: 1.5rem;\n      }\n    }\n    &__label {\n      @include title-xs;\n\n      text-transform: uppercase;\n      padding-right: 0.9rem;\n      white-space: nowrap;\n    }\n  }\n\n  &__line {\n    width: 100%;\n    border-bottom: 1px solid var(--neutralita-carbonica);\n  }\n}\n</style>\n","import { render } from \"./AreasIndex.vue?vue&type=template&id=3a79918a&scoped=true\"\nimport script from \"./AreasIndex.vue?vue&type=script&lang=js\"\nexport * from \"./AreasIndex.vue?vue&type=script&lang=js\"\n\nimport \"./AreasIndex.vue?vue&type=style&index=0&id=3a79918a&lang=scss&scoped=true\"\n\nimport exportComponent from \"../../../../node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-3a79918a\"]])\n\nexport default __exports__","<template>\n  <div class=\"graph\">\n    <div class=\"graph__axis\">\n      <div class=\"graph__axis__years\">\n        <div\n          class=\"graph__axis__years__year\"\n          v-for=\"(year, index) in chart.years\"\n          :key=\"'year' + index\"\n        >\n          {{ year }}\n        </div>\n      </div>\n    </div>\n\n    <div\n      :class=\"['graph__container', { mouseDown: mouseDown }]\"\n      tabindex=\"0\"\n      id=\"container\"\n      @mousedown=\"mouseDown = true\"\n      @mouseup=\"mouseDown = false\"\n    >\n      <div class=\"graph__container__grid\" id=\"grid\">\n        <div\n          :class=\"[\n            'graph__container__grid__area',\n            { notSelected: selectedAreaId != area.id && selectedAreaId },\n          ]\"\n          :id=\"area.id\"\n          v-for=\"area of chart.areas\"\n          :key=\"area.id\"\n        >\n          <DataMilestones\n            id=\"dataMilestone\"\n            v-for=\"(step, stepIndex) of area.steps\"\n            :key=\"area.id + stepIndex\"\n            :area=\"step\"\n            :years=\"chart.years\"\n          />\n        </div>\n        <div class=\"graph__container__grid__lines\">\n          <div\n            class=\"graph__container__grid__lines__line\"\n            v-for=\"(year, index) in chart.years\"\n            :key=\"'year' + index\"\n          />\n        </div>\n      </div>\n\n      <div class=\"graph__container__areas-index-container\">\n        <AreasIndex\n          :class=\"{ notSelected: selectedAreaId != area.id && selectedAreaId }\"\n          v-for=\"(area, index) in chart.areas\"\n          :key=\"area.id\"\n          :isLastOne=\"index == chart.areas.length - 1 ? true : false\"\n          :content=\"{ id: area.id, title: area.title }\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { ref } from \"vue\";\n\nimport DataMilestones from \"@/components/charts/info-road-2050/DataMilestones.vue\";\nimport AreasIndex from \"@/components/charts/info-road-2050/AreasIndex.vue\";\n\ndefineProps({\n  chart: {\n    type: Object,\n    required: true,\n  },\n  selectedAreaId: String,\n});\n\nconst mouseDown = ref(false);\n</script>\n\n<style lang=\"scss\" scoped>\n.graph {\n  height: calc(0.708 * var(--chart-height));\n  margin-top: 1.5rem;\n  position: relative;\n  &__axis {\n    height: 100%;\n    width: 4.3rem;\n    position: absolute;\n    left: 0;\n    z-index: 2;\n    text-align: center;\n    background-color: var(--white);\n\n    &__years {\n      height: 65%;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n\n      &__year {\n        @include p-s;\n\n        border-bottom: 1px solid var(--grey-600);\n      }\n    }\n  }\n  &__container {\n    height: 100%;\n    position: relative;\n    overflow-x: auto;\n\n    &:focus {\n      outline: none;\n    }\n\n    &:focus-visible {\n      outline: 2px solid steelblue;\n    }\n\n    .desktop &,\n    .large & {\n      padding-right: 15rem;\n    }\n\n    &.mouseDown {\n      cursor: grab;\n    }\n    &__grid {\n      height: 65%;\n      width: max-content;\n      position: relative;\n      display: flex;\n      flex-direction: row;\n      &__area {\n        position: relative;\n        left: 6.3rem;\n        height: 100%;\n        display: flex;\n        flex-direction: row;\n        justify-content: space-around;\n      }\n      &__lines {\n        position: absolute;\n        top: 0;\n        height: 100%;\n        width: calc(100% + 11rem);\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n        margin-left: -4rem;\n\n        &__line {\n          border-bottom: 1px solid var(--grey-600);\n          margin-top: 26px;\n        }\n      }\n    }\n    &__areas-index-container {\n      display: flex;\n      flex-direction: row;\n      position: absolute;\n      bottom: 4%;\n      left: 5.4rem;\n    }\n  }\n  &__container::-webkit-scrollbar {\n    display: none;\n  }\n  .notSelected {\n    opacity: 0.4;\n  }\n  .mobile & {\n    margin-top: 1.8rem;\n  }\n}\n</style>\n","import script from \"./ChartContainer.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./ChartContainer.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./ChartContainer.vue?vue&type=style&index=0&id=349de5e8&lang=scss&scoped=true\"\n\nimport exportComponent from \"../../../../node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-349de5e8\"]])\n\nexport default __exports__","<template>\n  <div class=\"chart\">\n    <BubbleDecoration class=\"small-bubble\" />\n\n    <div class=\"chart__bubble-wrapper\">\n      <BubbleDecoration class=\"bubble\" />\n    </div>\n\n    <div class=\"chart__content-wrapper\">\n      <div class=\"chart__top\">\n        <div class=\"chart__header\">\n          <div class=\"chart__header__title-container\">\n            <div class=\"chart__header__title-container__title\">\n              {{ content.title }}\n            </div>\n            <div class=\"chart__header__title-container__tip\">\n              <img\n                v-if=\"mobile\"\n                class=\"chart__header__title-container__tip__icon\"\n                :src=\"`${$baseUrl}icons/icon-tap.svg`\"\n                alt=\"\"\n                role=\"presentation\"\n              />\n\n              <img\n                v-else\n                class=\"chart__header__title-container__tip__icon\"\n                :src=\"`${$baseUrl}icons/icon-click.svg`\"\n                alt=\"\"\n                role=\"presentation\"\n              />\n              <p>{{ mobile || tablet ? content.tipMobile : content.tip }}</p>\n            </div>\n          </div>\n        </div>\n\n        <AreasMenu\n          v-if=\"!(mobile || tablet)\"\n          :area=\"content.menu\"\n          :checkChart=\"content.type\"\n          :dragging=\"dragging\"\n          :selectedEl=\"selectedEl\"\n          @selectArea=\"selectArea\"\n        />\n\n        <DropDown\n          v-else\n          class=\"chart__dropdown\"\n          :placeholder=\"content.dropdownPlaceholder\"\n          :content=\"dropdownItems\"\n          :selectedElement=\"\n            selectedEl ? { label: selectedEl, id: selectedAreaId } : null\n          \"\n          @select=\"\n            selectArea({ el: $event?.label, id: $event?.id, type: 'areas' })\n          \"\n        />\n      </div>\n\n      <ChartContainer\n        :chart=\"content.chart\"\n        :selectedAreaId=\"selectedAreaId\"\n        @onDrag=\"setDragging\"\n      />\n\n      <ArrowButtons\n        class=\"chart__arrow-buttons\"\n        :current-index=\"currentSelectedAreaIndex\"\n        :last-index=\"content.menu.length - 1\"\n        mobileArrows\n        @onClick=\"\n          selectArea({\n            el: content.menu[\n              currentSelectedAreaIndex + ($event === 'sx' ? -1 : 1)\n            ]?.label,\n            id: content.menu[\n              currentSelectedAreaIndex + ($event === 'sx' ? -1 : 1)\n            ]?.id,\n            type: 'areas',\n          })\n        \"\n      />\n\n      <div class=\"chart__notes\">\n        <p\n          v-for=\"note of content.notes\"\n          :key=\"note.slice(0, 4)\"\n          class=\"chart__note\"\n          v-html=\"`<strong>${note.slice(0, 3)}</strong> ${note.slice(3)}`\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed, ref } from \"vue\";\nimport useTvaMq from \"@/plugins/tvaMq.js\";\nimport { useI18n } from \"vue-i18n\";\n\nimport AreasMenu from \"@/components/charts/info-road-2050/AreasMenu.vue\";\nimport DropDown from \"@/components/general/DropDown.vue\";\nimport ChartContainer from \"@/components/charts/info-road-2050/ChartContainer.vue\";\nimport contentIT from \"@/assets/data/roadto2050_IT.json\";\nimport contentEN from \"@/assets/data/roadto2050_EN.json\";\nimport BubbleDecoration from \"../../general/BubbleDecoration.vue\";\nimport ArrowButtons from \"../../general/ArrowButtons.vue\";\n\nconst localeContent = {\n  it: contentIT,\n  en: contentEN,\n};\n\nconst selectedAreaId = ref(\"\");\nconst selectedEl = ref(\"\");\nconst dragging = ref(false);\n\nconst { $tvaMq } = useTvaMq();\nconst { locale } = useI18n();\n\nconst content = computed(() => {\n  return localeContent[locale.value];\n});\n\nconst currentSelectedAreaIndex = computed(() =>\n  content.value.menu.findIndex((area) => area.label === selectedEl.value)\n);\n\nconst mobile = computed(() => {\n  return $tvaMq.value === \"mobile\";\n});\n\nconst tablet = computed(() => {\n  return $tvaMq.value === \"tablet\";\n});\n\nconst dropdownItems = computed(() => content.value.menu);\n\nfunction selectedArea(value) {\n  selectedAreaId.value = value;\n}\n\nfunction setDragging() {\n  dragging.value = true;\n}\n\nfunction resetArea() {\n  if (!dragging.value) {\n    selectArea({ el: \"\", id: null, type: \"areas\" });\n    selectedArea(null);\n  } else {\n    dragging.value = false;\n  }\n}\n\nfunction selectArea({ el, id, type }) {\n  if (selectedEl.value && selectedEl.value === el) {\n    resetArea();\n  } else if (content.value.type == \"scrollable\") {\n    const milestoneWidth = document\n      .querySelector(\"#dataMilestone\")\n      .getBoundingClientRect().width;\n\n    const gridX = document.querySelector(\"#grid\").getBoundingClientRect().x;\n\n    if (type == \"areas\" && selectedEl.value != el) {\n      selectedEl.value = el;\n      if (id) {\n        const containerWidth = document\n          .querySelector(\"#container\")\n          .getBoundingClientRect().width;\n\n        const selectedAreaX = document\n          .querySelector(\"#\" + id)\n          .getBoundingClientRect().x;\n\n        document.querySelector(\"#container\").scrollTo({\n          top: 0,\n          left: selectedAreaX - gridX - containerWidth / 2,\n          behavior: \"smooth\",\n        });\n      } else {\n        document.querySelector(\"#container\").scrollTo({\n          top: 0,\n          left: 0,\n          behavior: \"smooth\",\n        });\n      }\n\n      selectedArea(id);\n      // this.$emit(\"isSelected\", id);\n    } else if (type == \"slider\") {\n      document.querySelector(\"#container\").scrollTo({\n        top: 0,\n        left: milestoneWidth * 2 - gridX,\n        behavior: \"smooth\",\n      });\n    }\n  } else {\n    selectedEl.value = el;\n    selectedArea(id);\n    // this.$emit(\"isSelected\", id);\n  }\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.chart {\n  // @include blurred-section;\n\n  --chart-height: max(calc(var(--vh, 1vh) * 87.5), 45.5rem);\n\n  .tablet &,\n  .mobile & {\n    --chart-height: #{toRem(750)};\n  }\n\n  width: 100%;\n  height: calc(var(--chart-height) + var(--section-padding-v));\n  position: relative;\n\n  .small-bubble {\n    z-index: var(--z-foreground) !important;\n  }\n\n  &__content-wrapper {\n    @include blurred-section;\n\n    position: relative;\n    height: 100%;\n\n    .desktop &,\n    .large & {\n      padding-left: 4rem;\n    }\n  }\n\n  &__bubble-wrapper {\n    --bubble-color-1: var(--page-color);\n    --bubble-size: var(--medium-bubble-size);\n    --wrapper-translation: -70%;\n\n    @include medium-bubble-wrapper(var(--wrapper-translation), true);\n\n    .bubble {\n      --bubble-degrees: -80deg;\n\n      transform: rotate(45deg);\n    }\n\n    .mobile &,\n    .tablet & {\n      --wrapper-translation: -50%;\n    }\n  }\n\n  .small-bubble {\n    @include small-bubble;\n\n    --bubble-color-1: var(--page-color);\n\n    top: 0;\n\n    .mobile &,\n    .tablet & {\n      left: var(--bubble-offset);\n    }\n  }\n\n  &__top {\n    padding-left: calc(var(--page-padding-h));\n    display: flex;\n    flex-direction: column;\n    width: fit-content;\n\n    .mobile &,\n    .tablet & {\n      width: 100%;\n    }\n  }\n\n  &__header {\n    width: 100%;\n    padding-top: 2rem;\n    display: flex;\n    justify-content: space-between;\n\n    .mobile &,\n    .tablet & {\n      padding-top: 3rem;\n    }\n\n    &__title-container {\n      width: 100%;\n      padding-bottom: 1.1rem;\n\n      &__title {\n        @include title-m;\n\n        color: var(--page-color);\n      }\n      &__tip {\n        @include dida-s;\n\n        display: flex;\n        align-items: center;\n        margin-top: 0.15rem;\n\n        &__icon {\n          padding-right: 0.5rem;\n        }\n      }\n    }\n  }\n\n  &__notes {\n    @include p-xs;\n\n    padding-block: 1rem;\n    margin-left: 4.3rem;\n    border-top: 1px solid var(--grey-600);\n    width: 80%;\n    max-width: toRem(1000);\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.5rem 1rem;\n\n    &__note {\n      display: inline-block;\n    }\n\n    strong {\n      font-weight: bold;\n      margin-right: 0.25rem;\n    }\n\n    .mobile & {\n      margin-left: 2.5rem;\n      font-size: 0.8rem;\n    }\n\n    .mobile &,\n    .tablet & {\n      margin-top: 3rem;\n    }\n  }\n\n  &__arrow-buttons {\n    --arrow-btn-width: 2rem;\n\n    top: calc(var(--chart-height) - 2.5rem);\n    left: initial;\n    right: var(--text-padding-h);\n\n    .mobile &,\n    .tablet & {\n      top: calc(var(--chart-height) - 1.75rem) !important;\n      left: 50% !important;\n      z-index: 6;\n      transform: translate(-50%) !important;\n    }\n  }\n\n  &__dropdown {\n    margin: 1.5rem var(--page-padding-h) 0.5rem;\n    width: calc(100% - var(--page-padding-h) * 2.5);\n  }\n\n  .mobile &,\n  .tablet & {\n    height: toRem(1100);\n\n    &__header {\n      width: 86.7%;\n      display: block;\n      padding-left: 1.5rem;\n\n      &__title-container {\n        width: 100%;\n        display: block;\n        padding-bottom: 0;\n\n        &__title {\n          @include title-s;\n          width: 100%;\n          padding-bottom: 0.3rem;\n        }\n        &__tip {\n          width: 100%;\n\n          &__tip-text {\n            width: fit-content;\n          }\n        }\n      }\n    }\n  }\n}\n</style>\n","import script from \"./ChartRoadTo2050.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./ChartRoadTo2050.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./ChartRoadTo2050.vue?vue&type=style&index=0&id=7c3844fd&lang=scss&scoped=true\"\n\nimport exportComponent from \"../../../../node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-7c3844fd\"]])\n\nexport default __exports__","import script from \"./ArrowButtons.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./ArrowButtons.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./ArrowButtons.vue?vue&type=style&index=0&id=56d5aafb&lang=scss&scoped=true\"\n\nimport exportComponent from \"../../../node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-56d5aafb\"]])\n\nexport default __exports__","<template>\n  <div class=\"bubble-decoration\">\n    <slot></slot>\n  </div>\n</template>\n\n<script setup></script>\n\n<style lang=\"scss\" scoped>\n.bubble-decoration {\n  --color-1: var(--bubble-color-1, var(--bubble-dark));\n  --color-2: var(--bubble-color-2, var(--white));\n  --size: var(--bubble-size);\n\n  border-radius: 50%;\n  width: var(--size);\n  aspect-ratio: 1;\n  background-image: linear-gradient(\n    var(--bubble-degrees, 225deg),\n    var(--color-1),\n    var(--color-2) 95%\n  );\n}\n</style>\n","import { render } from \"./BubbleDecoration.vue?vue&type=template&id=34a48320&scoped=true\"\nconst script = {}\n\nimport \"./BubbleDecoration.vue?vue&type=style&index=0&id=34a48320&lang=scss&scoped=true\"\n\nimport exportComponent from \"../../../node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-34a48320\"]])\n\nexport default __exports__","<template>\n  <button class=\"cancel-button\" @click=\"$emit('onCancel')\">\n    {{ $t(\"general.ctas.cancelSelection\") }}\n  </button>\n</template>\n\n<script setup></script>\n\n<style lang=\"scss\" scoped>\n.cancel-button {\n  font-family: EniTab;\n  font-size: 0.75rem;\n  line-height: 116.667%;\n  text-decoration-line: underline;\n  text-transform: uppercase;\n\n  &:hover {\n    opacity: 0.7;\n  }\n}\n</style>\n","import { render } from \"./CancelButton.vue?vue&type=template&id=6f062c5b&scoped=true\"\nconst script = {}\n\nimport \"./CancelButton.vue?vue&type=style&index=0&id=6f062c5b&lang=scss&scoped=true\"\n\nimport exportComponent from \"../../../node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-6f062c5b\"]])\n\nexport default __exports__","<template>\n  <div\n    class=\"tva-dropdown-container\"\n    ref=\"dropdownContainer\"\n    :style=\"{\n      '--item-height': itemHeight,\n      '--content-height': content.length * itemHeight + (content.length - 1),\n    }\"\n  >\n    <!-- + content.length for borders -->\n    <div class=\"dropdown-label\" v-if=\"label\" v-html=\"label\"></div>\n    <button\n      :class=\"[\n        'tva-dropdown-button',\n        { open: dropdownOpen, selected: selectedEl },\n      ]\"\n      @click=\"toggleDropdown\"\n    >\n      <div class=\"tva-dropdown-button-container\">\n        <span>\n          <slot v-if=\"selectedEl\" :id=\"selectedEl?.id\"></slot>\n          {{ selectedEl ? selectedEl.label : placeholder }}</span\n        >\n        <img\n          class=\"tva-dropdown-button-container__icon\"\n          :src=\"`${$baseUrl}icons/${\n            selectedEl ? 'close-white' : 'arrow-small-left'\n          }.svg`\"\n          alt=\"\"\n          role=\"presentation\"\n        />\n      </div>\n    </button>\n\n    <div :class=\"['tva-dropdown-content', dropdownOpen ? 'open' : '']\">\n      <ul>\n        <li\n          v-for=\"(child, childIndex) in content\"\n          :key=\"childIndex\"\n          :class=\"{\n            selected: selectedEl && child.id === selectedEl.id,\n          }\"\n        >\n          <button @click=\"selectElement(child)\">\n            <slot :id=\"child.id\"></slot>\n            <span>{{ child.label }}</span>\n          </button>\n        </li>\n      </ul>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { onClickOutside } from \"@vueuse/core\";\n\nexport default {\n  props: {\n    content: {\n      type: Array,\n      default: () => [],\n    },\n    label: { type: String, default: null },\n    placeholder: String,\n    selectedElement: {\n      type: Object,\n      default: null,\n    },\n  },\n  data() {\n    return {\n      selectedEl: this.selectedElement,\n      dropdownOpen: false,\n      itemHeight: 42,\n      close,\n    };\n  },\n  methods: {\n    selectElement(element) {\n      this.$emit(\"select\", element);\n      this.selectedEl = element;\n      this.dropdownOpen = false;\n    },\n    closeDropdown() {\n      this.dropdownOpen = false;\n    },\n    toggleDropdown() {\n      if (this.selectedEl) {\n        this.$emit(\"select\", null);\n      } else {\n        this.dropdownOpen = !this.dropdownOpen;\n      }\n    },\n  },\n  watch: {\n    selectedElement(selectedElement) {\n      this.selectedEl = selectedElement;\n    },\n  },\n  mounted() {\n    this.$nextTick(() =>\n      onClickOutside(this.$refs.dropdownContainer, this.closeDropdown)\n    );\n  },\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.tva-dropdown-container {\n  position: relative;\n  user-select: none;\n  width: 100%;\n  font-family: \"EniTab\";\n  font-size: toRem(12);\n  line-height: toRem(14);\n  z-index: 3;\n\n  span {\n    display: flex;\n    align-items: center;\n  }\n\n  .dropdown-label {\n    margin-bottom: 0.5em;\n  }\n  .tva-dropdown-button {\n    width: 100%;\n    display: inline-block;\n    height: toRem(34);\n    position: relative;\n    background-color: var(--white);\n    border-radius: 6px;\n    text-transform: uppercase;\n    transition: background-color 0.3s;\n    cursor: pointer;\n    border-radius: 6px;\n    box-shadow: 0px 4px 20px 0px rgba(112, 112, 112, 0.2);\n\n    &-container {\n      width: 100%;\n      height: 100%;\n      white-space: nowrap;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding-left: toRem(14);\n\n      &__icon {\n        margin: 0 0.5rem;\n        transform: rotate(-90deg);\n        width: 1.25rem;\n        filter: grayscale(1);\n      }\n    }\n    &.open {\n      .tva-dropdown-button-container {\n        &::after {\n          opacity: 1;\n        }\n        .tva-dropdown-button-container__icon {\n          transform: rotate(90deg);\n        }\n      }\n    }\n\n    &.selected {\n      background-color: var(--page-color);\n      color: var(--white);\n\n      .tva-dropdown-button-container__icon {\n        width: 1rem;\n      }\n    }\n  }\n\n  .tva-dropdown-content {\n    overflow: hidden;\n    position: absolute;\n    top: calc(100% + 1rem);\n    left: 0;\n    width: 100%;\n    display: inline-block;\n    background-color: var(--white);\n    border-radius: 6px;\n    padding-bottom: 0;\n    transition: padding-bottom 0.5s ease;\n    box-shadow: 0px 4px 20px 0px rgba(112, 112, 112, 0.2);\n\n    &.open {\n      padding-bottom: toRem(var(--content-height));\n    }\n\n    ul {\n      position: absolute;\n      left: 0;\n      bottom: 0;\n      list-style-type: none;\n      padding: 0;\n      margin: 0;\n      width: 100%;\n\n      li {\n        width: 100%;\n        border-bottom: solid 1px var(--grey-600);\n        transition: background-color 0.3s;\n\n        &:last-child {\n          border-bottom: none;\n        }\n\n        button {\n          width: 100%;\n          height: toRem(var(--item-height));\n          padding: 0 toRem(14);\n          display: flex;\n          align-items: center;\n          text-transform: uppercase;\n          cursor: pointer;\n        }\n\n        &.selected {\n          background-color: var(--selected-color, var(--primary-yellow-light));\n        }\n      }\n    }\n  }\n}\n</style>\n","import { render } from \"./DropDown.vue?vue&type=template&id=69e03f6e&scoped=true\"\nimport script from \"./DropDown.vue?vue&type=script&lang=js\"\nexport * from \"./DropDown.vue?vue&type=script&lang=js\"\n\nimport \"./DropDown.vue?vue&type=style&index=0&id=69e03f6e&lang=scss&scoped=true\"\n\nimport exportComponent from \"../../../node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-69e03f6e\"]])\n\nexport default __exports__","import script from \"./RoundIconButton.vue?vue&type=script&setup=true&lang=js\"\nexport * from \"./RoundIconButton.vue?vue&type=script&setup=true&lang=js\"\n\nimport \"./RoundIconButton.vue?vue&type=style&index=0&id=c55d02b2&lang=scss&scoped=true\"\n\nimport exportComponent from \"../../../node_modules/vue-loader/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['__scopeId',\"data-v-c55d02b2\"]])\n\nexport default __exports__"],"names":["class","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_Fragment","_renderList","$props","area","index","_normalizeClass","label","selectedEl","onClick","$event","_ctx","$emit","el","id","type","key","_toDisplayString","_hoisted_4","_createBlock","_component_CancelButton","onOnCancel","_cache","_createCommentVNode","components","CancelButton","props","String","Array","required","checkChart","dragging","Boolean","withClickOutside","__exports__","render","__props","filteredYears","computed","filteredArray","yearsArray","years","milestones","map","push","indexOf","year","unit","note","style","_normalizeStyle","width","$data","lineWidth","src","$baseUrl","content","alt","role","innerHTML","title","_hoisted_5","data","Object","isLastOne","mounted","this","$nextTick","document","querySelector","getBoundingClientRect","mouseDown","ref","localeContent","it","contentIT","en","contentEN","selectedAreaId","$tvaMq","useTvaMq","locale","useI18n","value","currentSelectedAreaIndex","menu","findIndex","mobile","tablet","dropdownItems","selectedArea","setDragging","resetArea","selectArea","milestoneWidth","gridX","x","containerWidth","selectedAreaX","scrollTo","top","left","behavior","_renderSlot","$slots","undefined","script","$t","itemHeight","length","dropdownOpen","selected","args","$options","toggleDropdown","_createTextVNode","placeholder","child","childIndex","selectElement","default","selectedElement","close","methods","element","closeDropdown","watch","onClickOutside","$refs","dropdownContainer"],"sourceRoot":""}