{"version":3,"file":"D5P4yuQo.js","sources":["../../../../storyblok/panels/PanelBroadband.vue"],"sourcesContent":["<template>\n  <div class=\"panel-container\">\n    <div\n      class=\"panel-header\"\n      v-if=\"blok.title || hasRichTextContent(blok.subtitle)\"\n    >\n      <h3 v-if=\"blok.title\">{{ blok.title }}</h3>\n      <RichText\n        :text=\"blok.subtitle\"\n        v-if=\"hasRichTextContent(blok.subtitle)\"\n      />\n    </div>\n\n    <div class=\"option-list\">\n      <button\n        class=\"option\"\n        :class=\"[\n          `option-${option.value.toString().toLowerCase()}`,\n          { active: option.active },\n        ]\"\n        v-for=\"option in blok.options\"\n        @click=\"navigateToUrl(option.value.toString())\"\n      >\n        <StoryblokImg\n          :image=\"option.image\"\n          v-if=\"hasAssetContent(option.image)\"\n        />\n        <span v-else>{{ option.label }}</span>\n      </button>\n    </div>\n\n    <div class=\"btn-container\">\n      <CjaButton\n        :color=\"'orange'\"\n        :icon=\"'m-cgg-icon--chevron-right'\"\n        @click=\"navigateToUrl()\"\n      >\n        {{ t(\"btn\") }}\n      </CjaButton>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { CjaButton } from \"cja-phoenix\";\nimport { hasRichTextContent, hasAssetContent } from \"@/utils/storyblok\";\nimport { PanelBroadbandStoryblok } from \"~/types/bloks\";\n\nconst props = defineProps<{\n  blok: PanelBroadbandStoryblok;\n}>();\n\nconst { t } = useI18n();\n\nconst navigateToUrl = async (option?: string) => {\n  const activeOption =\n    option || props.blok.options.find((o) => o.active)?.value;\n\n  await navigateTo(\n    {\n      path: \"/tv-net-voz/simular\",\n      query: {\n        \"marketing-campaign\": props.blok.marketingCampaign\n          ? props.blok.marketingCampaign\n          : undefined,\n        currentProvider: activeOption,\n      },\n    },\n    {\n      external: true,\n    }\n  );\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.panel-container {\n  @include hero-panel;\n  max-width: 400px;\n  margin: 0 auto;\n  width: 100%;\n\n  @media screen and (min-width: $break-md-min) {\n    max-width: none;\n    margin: 0;\n  }\n\n  .panel-header {\n    @include hero-panel-header;\n\n    h3 {\n      @media screen and (max-width: $break-sm-max) {\n        display: none;\n      }\n    }\n\n    :deep(p) {\n      @media screen and (max-width: $break-sm-max) {\n        font-weight: 700;\n      }\n    }\n  }\n\n  .option-list {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    grid-auto-rows: 56px;\n    gap: 16px;\n    margin-bottom: 24px;\n\n    .option {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      padding: 4px 8px;\n      text-align: center;\n      font-size: 12px;\n      line-height: 16px;\n      font-weight: 700;\n      border-radius: 8px;\n      border: 1px solid $light-grey;\n      background: $white;\n      cursor: pointer;\n      transition: all 0.3s ease-in-out;\n\n      @media screen and (min-width: $break-md-min) {\n        padding: 8px 16px;\n        font-size: 14px;\n        line-height: 18px;\n      }\n\n      &:hover {\n        box-shadow: $box-shadow-s;\n      }\n\n      img {\n        display: block;\n        max-width: 100%;\n        max-height: 100%;\n      }\n\n      &.option-none {\n        grid-column-start: 2;\n        grid-column-end: 4;\n      }\n\n      &.active {\n        border: 1px solid $main-blue;\n      }\n    }\n  }\n\n  .btn-container {\n    display: grid;\n\n    @media screen and (min-width: $break-md-min) {\n      display: flex;\n      justify-content: center;\n    }\n\n    button {\n      @media screen and (min-width: $break-md-min) {\n        width: 250px;\n      }\n    }\n  }\n}\n</style>\n\n<i18n lang=\"json\">\n{\n  \"pt\": {\n    \"btn\": \"Comparar ofertas\"\n  }\n}\n</i18n>\n"],"names":["props","__props","t","useI18n","navigateToUrl","option","activeOption","_a","o","navigateTo"],"mappings":"ubAgDA,MAAMA,EAAQC,EAIR,CAAE,EAAAC,CAAE,EAAIC,EAAQ,EAEhBC,EAAgB,MAAOC,GAAoB,OACzC,MAAAC,EACJD,KAAUE,EAAAP,EAAM,KAAK,QAAQ,KAAMQ,GAAMA,EAAE,MAAM,IAAvC,YAAAD,EAA0C,OAEhD,MAAAE,EACJ,CACE,KAAM,sBACN,MAAO,CACL,qBAAsBT,EAAM,KAAK,kBAC7BA,EAAM,KAAK,kBACX,OACJ,gBAAiBM,CAAA,CAErB,EACA,CACE,SAAU,EAAA,CAEd,CACF"}