{"version":3,"file":"useCtaButton.1af18191.js","sources":["../../src/components/OperatorLogo.vue","../../src/components/OperatorLogo.vue?vue&type=template&id=6d46f94d&lang.js","../../src/components/StakeFixed.vue","../../src/components/StakeFixed.vue?vue&type=template&id=c70e1028&lang.js","../../src/components/styled/CtaButton.vue","../../src/components/styled/CtaButton.vue?vue&type=template&id=289d1e05&lang.js","../../src/components/CtaButton.vue","../../src/hooks/useCtaButton.ts","../../src/components/CtaButton.vue?vue&type=template&id=0ca70193&lang.js"],"sourcesContent":["<template>\n  <LinkWrapper\n    :href=\"operatorLink\"\n    :class=\"classes.link\"\n    target=\"_blank\"\n    @click=\"handleClick\"\n    v-if=\"operatorLogo\"\n  >\n    <img\n      :src=\"operatorLogo\"\n      :class=\"[classes.image, 'operator-logo']\"\n      @load=\"effectTrigger\"\n    />\n  </LinkWrapper>\n  <span v-else></span>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed } from \"vue\";\nimport { createUseStyles } from \"@fresh8/vue-jss/src\";\nimport { useLayoutEffect } from \"@fresh8/vue-utils/src/dimensionSync\";\nimport LinkWrapper from \"./LinkWrapper.vue\";\nimport {\n  injectAdTag,\n  injectBrand\n} from \"@fresh8/ad-data-composition/src/brand\";\nimport { injectBetData } from \"@fresh8/ad-data-composition/src/betData\";\nimport { useAnalytics } from \"../hooks/useAnalytics\";\n\nconst useStyles = createUseStyles({\n  link: {\n    height: \"100%\",\n    flex: 1,\n    justifyContent: \"flex-start\"\n  },\n  image: {\n    height: \"100%\",\n    objectFit: \"contain\",\n    maxHeight: \"inherit\",\n    maxWidth: \"inherit\",\n    display: \"block\"\n  }\n});\n\nexport default defineComponent({\n  name: \"OperatorLogo\",\n  components: {\n    LinkWrapper\n  },\n  setup() {\n    const classes = useStyles();\n    const { operatorLogos } = injectBrand();\n    const { links } = injectBetData();\n    const { operator } = injectAdTag();\n    const effectTrigger = useLayoutEffect();\n    const { handleClick } = useAnalytics({}, \"Operator Logo\");\n\n    return {\n      classes,\n      operatorLogo: computed(() => {\n        return (\n          operator.value &&\n          (\n            operatorLogos.value[operator.value._id] ||\n            operatorLogos.value[operator.value.key]\n          )?.desktop?.binary\n        );\n      }),\n      operatorLink: computed(() => links.value.operator),\n      effectTrigger,\n      handleClick\n    };\n  }\n});\n</script>\n\n<style></style>\n","<template>\n  <LinkWrapper\n    :href=\"operatorLink\"\n    :class=\"classes.link\"\n    target=\"_blank\"\n    @click=\"handleClick\"\n    v-if=\"operatorLogo\"\n  >\n    <img\n      :src=\"operatorLogo\"\n      :class=\"[classes.image, 'operator-logo']\"\n      @load=\"effectTrigger\"\n    />\n  </LinkWrapper>\n  <span v-else></span>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed } from \"vue\";\nimport { createUseStyles } from \"@fresh8/vue-jss/src\";\nimport { useLayoutEffect } from \"@fresh8/vue-utils/src/dimensionSync\";\nimport LinkWrapper from \"./LinkWrapper.vue\";\nimport {\n  injectAdTag,\n  injectBrand\n} from \"@fresh8/ad-data-composition/src/brand\";\nimport { injectBetData } from \"@fresh8/ad-data-composition/src/betData\";\nimport { useAnalytics } from \"../hooks/useAnalytics\";\n\nconst useStyles = createUseStyles({\n  link: {\n    height: \"100%\",\n    flex: 1,\n    justifyContent: \"flex-start\"\n  },\n  image: {\n    height: \"100%\",\n    objectFit: \"contain\",\n    maxHeight: \"inherit\",\n    maxWidth: \"inherit\",\n    display: \"block\"\n  }\n});\n\nexport default defineComponent({\n  name: \"OperatorLogo\",\n  components: {\n    LinkWrapper\n  },\n  setup() {\n    const classes = useStyles();\n    const { operatorLogos } = injectBrand();\n    const { links } = injectBetData();\n    const { operator } = injectAdTag();\n    const effectTrigger = useLayoutEffect();\n    const { handleClick } = useAnalytics({}, \"Operator Logo\");\n\n    return {\n      classes,\n      operatorLogo: computed(() => {\n        return (\n          operator.value &&\n          (\n            operatorLogos.value[operator.value._id] ||\n            operatorLogos.value[operator.value.key]\n          )?.desktop?.binary\n        );\n      }),\n      operatorLink: computed(() => links.value.operator),\n      effectTrigger,\n      handleClick\n    };\n  }\n});\n</script>\n\n<style></style>\n","<template>\n  <div :class=\"[classes.stakeFixedWrapper, layoutClass]\">\n    <DynamicText\n      tag=\"div\"\n      styleGroup=\"Stake Text\"\n      :get=\"stakeFixedStyle.get\"\n      :set=\"stakeFixedStyle.set\"\n      :class=\"[classes.stakeText, layoutClass]\"\n    >\n      {{ stakeText }}\n    </DynamicText>\n    <DynamicText\n      tag=\"div\"\n      styleGroup=\"Stake Amount\"\n      :get=\"stakeAmountStyle.get\"\n      :set=\"stakeAmountStyle.set\"\n      :class=\"[classes.stakeAmount, layoutClass]\"\n    >\n      {{ formattedStake }}\n    </DynamicText>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { Brand } from \"@fresh8/types/src\";\nimport { createUseStyles } from \"@fresh8/vue-jss/src\";\nimport { computed, defineComponent } from \"vue\";\nimport { useStake } from \"@fresh8/ad-data-composition/src/usePotentialWinnings\";\nimport { getPotentialWinningsTranslations } from \"../lib/language\";\nimport DynamicText from \"./DynamicText.vue\";\nimport {\n  injectTemplateSize,\n  LARGE_MPU,\n  SKYSCRAPER,\n  MOBILE_LEADERBOARD,\n  LEADERBOARD,\n  LARGE_LEADERBOARD,\n  LMLB\n} from \"@fresh8/ad-data-composition/src/useTemplateSize\";\n\nconst useStyles = createUseStyles({\n  stakeFixedWrapper: {\n    display: \"flex\",\n    flexFlow: props => props.flexFlow,\n    alignItems: \"center\",\n    border: props => props.border,\n\n    [`&.${LARGE_MPU.name}`]: {\n      height: \"84px\"\n    },\n\n    [`&.${SKYSCRAPER.name}`]: {\n      height: \"76px\"\n    },\n\n    [`&.${MOBILE_LEADERBOARD.name}`]: {\n      width: \"51px\",\n      height: \"14px\"\n    },\n\n    [`&.${LMLB.name}`]: {\n      width: \"51px\",\n      height: \"14px\"\n    },\n\n    [`&.${LEADERBOARD.name}`]: {\n      maxWidth: \"128px\",\n      height: \"44px\"\n    },\n\n    [`&.${LARGE_LEADERBOARD.name}`]: {\n      maxWidth: \"128px\",\n      height: \"44px\"\n    }\n  },\n  stakeText: {\n    fontSize: \"12px\",\n    marginRight: \"5px\",\n\n    [`&.${LARGE_MPU.name}`]: {\n      fontSize: \"14px\"\n    },\n\n    [`&.${SKYSCRAPER.name}`]: {\n      fontSize: \"14px\"\n    },\n\n    [`&.${MOBILE_LEADERBOARD.name}`]: {\n      fontSize: \"5px\",\n      lineHeight: \"7px\",\n      display: \"flex\",\n      justifyContent: \"center\",\n      width: \"100%\",\n      background: \"#E1E3EB\",\n      marginRight: \"0px\"\n    },\n\n    [`&.${LEADERBOARD.name}`]: {\n      fontSize: \"14px\",\n      marginRight: \"6px\"\n    },\n\n    [`&.${LARGE_LEADERBOARD.name}`]: {\n      fontSize: \"14px\",\n      marginRight: \"6px\"\n    }\n  },\n  stakeAmount: {\n    fontSize: \"15px\",\n\n    [`&.${LARGE_MPU.name}`]: {\n      fontSize: \"20px\"\n    },\n\n    [`&.${SKYSCRAPER.name}`]: {\n      fontSize: \"20px\"\n    },\n\n    [`&.${MOBILE_LEADERBOARD.name}`]: {\n      fontSize: \"8px\",\n      lineHeight: \"8px\"\n    },\n\n    [`&.${LMLB.name}`]: {\n      fontSize: \"8px\",\n      lineHeight: \"8px\"\n    },\n\n    [`&.${LEADERBOARD.name}`]: {\n      fontSize: \"18px\"\n    },\n\n    [`&.${LARGE_LEADERBOARD.name}`]: {\n      fontSize: \"18px\"\n    }\n  }\n});\n\nexport default defineComponent({\n  name: \"StakeFixed\",\n  components: {\n    DynamicText\n  },\n  setup() {\n    const stake = getPotentialWinningsTranslations();\n    const templateContext = injectTemplateSize();\n\n    const { formattedStake } = useStake();\n\n    const layoutClass = computed(() => templateContext.size.value.name);\n    const classes = useStyles(\n      computed(() => ({\n        flexFlow:\n          layoutClass.value === MOBILE_LEADERBOARD.name ? \"column\" : \"row\",\n        border:\n          layoutClass.value === MOBILE_LEADERBOARD.name\n            ? \"1px solid #E1E3EB\"\n            : \"\"\n      }))\n    );\n\n    return {\n      classes,\n      stakeText: stake,\n      formattedStake,\n      stakeFixedStyle: {\n        get: (brand: Brand) => brand.adTemplate.potentialWinnings.stakeFont,\n        set: (brand: Brand, value: string) =>\n          (brand.adTemplate.potentialWinnings.stakeFont = value)\n      },\n      stakeAmountStyle: {\n        get: (brand: Brand) =>\n          brand.adTemplate.potentialWinnings.stakeAmountFont,\n        set: (brand: Brand, value: string) =>\n          (brand.adTemplate.potentialWinnings.stakeAmountFont = value)\n      },\n      layoutClass: computed(() => templateContext.size.value.name)\n    };\n  }\n});\n</script>\n","<template>\n  <div :class=\"[classes.stakeFixedWrapper, layoutClass]\">\n    <DynamicText\n      tag=\"div\"\n      styleGroup=\"Stake Text\"\n      :get=\"stakeFixedStyle.get\"\n      :set=\"stakeFixedStyle.set\"\n      :class=\"[classes.stakeText, layoutClass]\"\n    >\n      {{ stakeText }}\n    </DynamicText>\n    <DynamicText\n      tag=\"div\"\n      styleGroup=\"Stake Amount\"\n      :get=\"stakeAmountStyle.get\"\n      :set=\"stakeAmountStyle.set\"\n      :class=\"[classes.stakeAmount, layoutClass]\"\n    >\n      {{ formattedStake }}\n    </DynamicText>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { Brand } from \"@fresh8/types/src\";\nimport { createUseStyles } from \"@fresh8/vue-jss/src\";\nimport { computed, defineComponent } from \"vue\";\nimport { useStake } from \"@fresh8/ad-data-composition/src/usePotentialWinnings\";\nimport { getPotentialWinningsTranslations } from \"../lib/language\";\nimport DynamicText from \"./DynamicText.vue\";\nimport {\n  injectTemplateSize,\n  LARGE_MPU,\n  SKYSCRAPER,\n  MOBILE_LEADERBOARD,\n  LEADERBOARD,\n  LARGE_LEADERBOARD,\n  LMLB\n} from \"@fresh8/ad-data-composition/src/useTemplateSize\";\n\nconst useStyles = createUseStyles({\n  stakeFixedWrapper: {\n    display: \"flex\",\n    flexFlow: props => props.flexFlow,\n    alignItems: \"center\",\n    border: props => props.border,\n\n    [`&.${LARGE_MPU.name}`]: {\n      height: \"84px\"\n    },\n\n    [`&.${SKYSCRAPER.name}`]: {\n      height: \"76px\"\n    },\n\n    [`&.${MOBILE_LEADERBOARD.name}`]: {\n      width: \"51px\",\n      height: \"14px\"\n    },\n\n    [`&.${LMLB.name}`]: {\n      width: \"51px\",\n      height: \"14px\"\n    },\n\n    [`&.${LEADERBOARD.name}`]: {\n      maxWidth: \"128px\",\n      height: \"44px\"\n    },\n\n    [`&.${LARGE_LEADERBOARD.name}`]: {\n      maxWidth: \"128px\",\n      height: \"44px\"\n    }\n  },\n  stakeText: {\n    fontSize: \"12px\",\n    marginRight: \"5px\",\n\n    [`&.${LARGE_MPU.name}`]: {\n      fontSize: \"14px\"\n    },\n\n    [`&.${SKYSCRAPER.name}`]: {\n      fontSize: \"14px\"\n    },\n\n    [`&.${MOBILE_LEADERBOARD.name}`]: {\n      fontSize: \"5px\",\n      lineHeight: \"7px\",\n      display: \"flex\",\n      justifyContent: \"center\",\n      width: \"100%\",\n      background: \"#E1E3EB\",\n      marginRight: \"0px\"\n    },\n\n    [`&.${LEADERBOARD.name}`]: {\n      fontSize: \"14px\",\n      marginRight: \"6px\"\n    },\n\n    [`&.${LARGE_LEADERBOARD.name}`]: {\n      fontSize: \"14px\",\n      marginRight: \"6px\"\n    }\n  },\n  stakeAmount: {\n    fontSize: \"15px\",\n\n    [`&.${LARGE_MPU.name}`]: {\n      fontSize: \"20px\"\n    },\n\n    [`&.${SKYSCRAPER.name}`]: {\n      fontSize: \"20px\"\n    },\n\n    [`&.${MOBILE_LEADERBOARD.name}`]: {\n      fontSize: \"8px\",\n      lineHeight: \"8px\"\n    },\n\n    [`&.${LMLB.name}`]: {\n      fontSize: \"8px\",\n      lineHeight: \"8px\"\n    },\n\n    [`&.${LEADERBOARD.name}`]: {\n      fontSize: \"18px\"\n    },\n\n    [`&.${LARGE_LEADERBOARD.name}`]: {\n      fontSize: \"18px\"\n    }\n  }\n});\n\nexport default defineComponent({\n  name: \"StakeFixed\",\n  components: {\n    DynamicText\n  },\n  setup() {\n    const stake = getPotentialWinningsTranslations();\n    const templateContext = injectTemplateSize();\n\n    const { formattedStake } = useStake();\n\n    const layoutClass = computed(() => templateContext.size.value.name);\n    const classes = useStyles(\n      computed(() => ({\n        flexFlow:\n          layoutClass.value === MOBILE_LEADERBOARD.name ? \"column\" : \"row\",\n        border:\n          layoutClass.value === MOBILE_LEADERBOARD.name\n            ? \"1px solid #E1E3EB\"\n            : \"\"\n      }))\n    );\n\n    return {\n      classes,\n      stakeText: stake,\n      formattedStake,\n      stakeFixedStyle: {\n        get: (brand: Brand) => brand.adTemplate.potentialWinnings.stakeFont,\n        set: (brand: Brand, value: string) =>\n          (brand.adTemplate.potentialWinnings.stakeFont = value)\n      },\n      stakeAmountStyle: {\n        get: (brand: Brand) =>\n          brand.adTemplate.potentialWinnings.stakeAmountFont,\n        set: (brand: Brand, value: string) =>\n          (brand.adTemplate.potentialWinnings.stakeAmountFont = value)\n      },\n      layoutClass: computed(() => templateContext.size.value.name)\n    };\n  }\n});\n</script>\n","<template>\n  <LinkWrapper\n    :href=\"href\"\n    :class=\"[classes.ctaButton, testClassName]\"\n    target=\"_blank\"\n    :title=\"text\"\n    ref=\"targetEl\"\n  >\n    <div>\n      <StyledText\n        tag=\"span\"\n        :fontId=\"buttonStyle?.primaryFont\"\n        :class=\"[classes.ctaText, 'cta-text', classes.small]\"\n      >\n        {{ text }}\n      </StyledText>\n    </div>\n  </LinkWrapper>\n</template>\n\n<script lang=\"ts\">\nimport { createUseStyles } from \"@fresh8/ad-data-composition/src/theme\";\nimport {\n  ButtonStyle,\n  injectBrand\n} from \"@fresh8/ad-data-composition/src/brand\";\nimport { defineComponent, computed } from \"vue\";\nimport StyledText from \"./Text.vue\";\nimport LinkWrapper from \"../LinkWrapper.vue\";\nimport {\n  injectTemplateSize,\n  LARGE_MPU,\n  LMLB\n} from \"@fresh8/ad-data-composition/src/useTemplateSize\";\n\nexport default defineComponent({\n  name: \"CtaButton\",\n  components: {\n    LinkWrapper,\n    StyledText\n  },\n  props: {\n    href: {\n      type: String,\n      required: true,\n      default: \"\"\n    },\n    text: {\n      type: String,\n      required: true,\n      default: \"Bet Now\"\n    },\n    buttonId: {\n      type: String,\n      required: true\n    }\n  },\n  setup(props) {\n    const { getButtonStyle, getFontStyle } = injectBrand();\n    const templateContext = injectTemplateSize();\n\n    const fontSize = computed(() => {\n      switch (templateContext?.size.value.name) {\n        case LARGE_MPU.name:\n          return \"17px\";\n        default:\n          return \"12px\";\n      }\n    });\n\n    const buttonHeight = computed(() => {\n      switch (templateContext?.size.value.name) {\n        case LARGE_MPU.name:\n          return \"40px\";\n        case LMLB.name:\n          return \"20px\";\n        default:\n          return \"26px\";\n      }\n    });\n\n    const buttonStyle = computed(() => {\n      return getButtonStyle(props.buttonId);\n    });\n\n    const styleComputed = computed(() => ({\n      buttonStyle: buttonStyle.value,\n      primaryColor: getFontStyle(buttonStyle.value?.primaryFont)?.color,\n      secondaryColor: getFontStyle(buttonStyle.value?.secondaryFont)?.color,\n      fontSize: fontSize.value,\n      buttonHeight: buttonHeight.value\n    }));\n\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    const { classesRef } = useStyles(styleComputed);\n\n    return {\n      classes: classesRef,\n      buttonStyle,\n      testClassName: computed(() => \"text-style-cta-name\")\n    };\n  }\n});\n\nconst defaultStyling = {\n  backgroundColor: \"#fff\",\n  borderRadius: \"\",\n  borderColor: \"\",\n  borderStyle: \"\",\n  borderWidth: 0,\n  autoInteractions: true\n};\n\nconst { useStyles } = createUseStyles<\n  \"ctaButton\" | \"ctaText\" | \"small\",\n  {\n    buttonStyle: ButtonStyle;\n    primaryColor: string;\n    secondaryColor: string;\n    fontSize: string;\n    buttonHeight: string;\n  }\n>({\n  ctaButton: {\n    backgroundColor: props =>\n      props.buttonStyle.backgroundColor || defaultStyling.backgroundColor,\n    borderRadius: props => {\n      if (props.buttonStyle.borderRadius === 0) {\n        return 0;\n      }\n\n      return props.buttonStyle.borderRadius || defaultStyling.borderRadius;\n    },\n    borderColor: props =>\n      props.buttonStyle.borderColor || defaultStyling.borderColor,\n    borderStyle: props =>\n      props.buttonStyle.borderStyle || defaultStyling.borderStyle,\n    borderWidth: props =>\n      props.buttonStyle.borderWidth || defaultStyling.borderWidth,\n    \"&:hover\": {\n      backgroundColor: props => props.buttonStyle.actions.hover.backgroundColor\n    },\n    \"&:active\": {\n      backgroundColor: props => props.buttonStyle.actions.active.backgroundColor\n    },\n    \"& > div\": {\n      display: \"flex\",\n      flexDirection: \"column\",\n      justifyContent: \"space-around\",\n      alignItems: \"center\",\n      position: \"relative\",\n      boxSizing: \"border-box\"\n    },\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    boxSizing: \"border-box\",\n    padding: `7px 12px`,\n    height: props => props.buttonHeight\n  },\n  ctaText: {\n    fontSize: props => props.fontSize,\n    color: props => props.primaryColor || \"#000\",\n    \"offerButton:hover &\": {\n      color: props => props.buttonStyle.actions.hover.primaryColor\n    },\n    \"offerButton:active &\": {\n      color: props => props.buttonStyle.actions.active.primaryColor\n    }\n  }\n});\n</script>\n","<template>\n  <LinkWrapper\n    :href=\"href\"\n    :class=\"[classes.ctaButton, testClassName]\"\n    target=\"_blank\"\n    :title=\"text\"\n    ref=\"targetEl\"\n  >\n    <div>\n      <StyledText\n        tag=\"span\"\n        :fontId=\"buttonStyle?.primaryFont\"\n        :class=\"[classes.ctaText, 'cta-text', classes.small]\"\n      >\n        {{ text }}\n      </StyledText>\n    </div>\n  </LinkWrapper>\n</template>\n\n<script lang=\"ts\">\nimport { createUseStyles } from \"@fresh8/ad-data-composition/src/theme\";\nimport {\n  ButtonStyle,\n  injectBrand\n} from \"@fresh8/ad-data-composition/src/brand\";\nimport { defineComponent, computed } from \"vue\";\nimport StyledText from \"./Text.vue\";\nimport LinkWrapper from \"../LinkWrapper.vue\";\nimport {\n  injectTemplateSize,\n  LARGE_MPU,\n  LMLB\n} from \"@fresh8/ad-data-composition/src/useTemplateSize\";\n\nexport default defineComponent({\n  name: \"CtaButton\",\n  components: {\n    LinkWrapper,\n    StyledText\n  },\n  props: {\n    href: {\n      type: String,\n      required: true,\n      default: \"\"\n    },\n    text: {\n      type: String,\n      required: true,\n      default: \"Bet Now\"\n    },\n    buttonId: {\n      type: String,\n      required: true\n    }\n  },\n  setup(props) {\n    const { getButtonStyle, getFontStyle } = injectBrand();\n    const templateContext = injectTemplateSize();\n\n    const fontSize = computed(() => {\n      switch (templateContext?.size.value.name) {\n        case LARGE_MPU.name:\n          return \"17px\";\n        default:\n          return \"12px\";\n      }\n    });\n\n    const buttonHeight = computed(() => {\n      switch (templateContext?.size.value.name) {\n        case LARGE_MPU.name:\n          return \"40px\";\n        case LMLB.name:\n          return \"20px\";\n        default:\n          return \"26px\";\n      }\n    });\n\n    const buttonStyle = computed(() => {\n      return getButtonStyle(props.buttonId);\n    });\n\n    const styleComputed = computed(() => ({\n      buttonStyle: buttonStyle.value,\n      primaryColor: getFontStyle(buttonStyle.value?.primaryFont)?.color,\n      secondaryColor: getFontStyle(buttonStyle.value?.secondaryFont)?.color,\n      fontSize: fontSize.value,\n      buttonHeight: buttonHeight.value\n    }));\n\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    const { classesRef } = useStyles(styleComputed);\n\n    return {\n      classes: classesRef,\n      buttonStyle,\n      testClassName: computed(() => \"text-style-cta-name\")\n    };\n  }\n});\n\nconst defaultStyling = {\n  backgroundColor: \"#fff\",\n  borderRadius: \"\",\n  borderColor: \"\",\n  borderStyle: \"\",\n  borderWidth: 0,\n  autoInteractions: true\n};\n\nconst { useStyles } = createUseStyles<\n  \"ctaButton\" | \"ctaText\" | \"small\",\n  {\n    buttonStyle: ButtonStyle;\n    primaryColor: string;\n    secondaryColor: string;\n    fontSize: string;\n    buttonHeight: string;\n  }\n>({\n  ctaButton: {\n    backgroundColor: props =>\n      props.buttonStyle.backgroundColor || defaultStyling.backgroundColor,\n    borderRadius: props => {\n      if (props.buttonStyle.borderRadius === 0) {\n        return 0;\n      }\n\n      return props.buttonStyle.borderRadius || defaultStyling.borderRadius;\n    },\n    borderColor: props =>\n      props.buttonStyle.borderColor || defaultStyling.borderColor,\n    borderStyle: props =>\n      props.buttonStyle.borderStyle || defaultStyling.borderStyle,\n    borderWidth: props =>\n      props.buttonStyle.borderWidth || defaultStyling.borderWidth,\n    \"&:hover\": {\n      backgroundColor: props => props.buttonStyle.actions.hover.backgroundColor\n    },\n    \"&:active\": {\n      backgroundColor: props => props.buttonStyle.actions.active.backgroundColor\n    },\n    \"& > div\": {\n      display: \"flex\",\n      flexDirection: \"column\",\n      justifyContent: \"space-around\",\n      alignItems: \"center\",\n      position: \"relative\",\n      boxSizing: \"border-box\"\n    },\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    boxSizing: \"border-box\",\n    padding: `7px 12px`,\n    height: props => props.buttonHeight\n  },\n  ctaText: {\n    fontSize: props => props.fontSize,\n    color: props => props.primaryColor || \"#000\",\n    \"offerButton:hover &\": {\n      color: props => props.buttonStyle.actions.hover.primaryColor\n    },\n    \"offerButton:active &\": {\n      color: props => props.buttonStyle.actions.active.primaryColor\n    }\n  }\n});\n</script>\n","<template>\n  <StyledCtaButton\n    ref=\"targetEl\"\n    :href=\"ctaLink\"\n    :text=\"text\"\n    :buttonId=\"buttonId || ''\"\n    @click=\"() => handleClick()\"\n  />\n</template>\n\n<script lang=\"ts\">\nimport { composePopoverForm } from \"@fresh8/ad-data-composition/src/popoverForm\";\nimport { injectBrand } from \"@fresh8/ad-data-composition/src/brand\";\nimport { injectBetData } from \"@fresh8/ad-data-composition/src/betData\";\nimport * as generateLinks from \"@fresh8/ad-data-composition/src/lib/generateLinks\";\nimport { defineComponent } from \"vue\";\nimport StyledCtaButton from \"./styled/CtaButton.vue\";\nimport { useAnalytics } from \"../hooks/useAnalytics\";\n\nexport default defineComponent({\n  name: \"CtaButton\",\n  components: {\n    StyledCtaButton\n  },\n  props: {\n    text: {\n      type: String,\n      required: true\n    },\n    href: {\n      type: String,\n      required: true\n    },\n    buttonId: {\n      type: String,\n      required: false\n    }\n  },\n  setup(props) {\n    const brandContext = injectBrand();\n    const betData = injectBetData();\n    const { handleClick } = useAnalytics({}, \"CTA Button\");\n    const ctaLink = generateLinks.cta(props.href, {\n      affiliateId: betData?.affiliateId.value,\n      clickUrl: betData?.clickUrl.value,\n      operatorKey: betData?.operator.value?.name || \"\"\n    });\n\n    const { targetEl } = composePopoverForm(\"Cta Button\", [\n      {\n        type: \"ctaButton\",\n        get: () =>\n          brandContext?.brand.value.adTemplate.header.ctaButton.id || \"\",\n        set: (value: string) => {\n          if (brandContext) {\n            brandContext.brand.value.adTemplate.header.ctaButton.id = value;\n          }\n        }\n      }\n    ]);\n\n    return {\n      targetEl,\n      ctaLink,\n      handleClick\n    };\n  }\n});\n</script>\n\n<style></style>\n","import { injectBrand } from \"@fresh8/ad-data-composition/src/brand\";\nimport { AdTemplateHeaderCtaButton } from \"@fresh8/types/src\";\nimport { computed } from \"vue\";\n\nexport function getCtaButton():\n  | AdTemplateHeaderCtaButton\n  | {\n      visible: boolean;\n      text: string;\n      url: string;\n      id: undefined;\n    } {\n  const brand = injectBrand();\n  const ctaButton = computed(() => {\n    if (brand?.adTemplate.value?.header.ctaButton) {\n      return brand.adTemplate.value.header.ctaButton;\n    }\n    return {\n      visible: false,\n      text: \"Bet Now\",\n      url: \"\",\n      id: undefined\n    };\n  });\n  return ctaButton.value;\n}\n","<template>\n  <StyledCtaButton\n    ref=\"targetEl\"\n    :href=\"ctaLink\"\n    :text=\"text\"\n    :buttonId=\"buttonId || ''\"\n    @click=\"() => handleClick()\"\n  />\n</template>\n\n<script lang=\"ts\">\nimport { composePopoverForm } from \"@fresh8/ad-data-composition/src/popoverForm\";\nimport { injectBrand } from \"@fresh8/ad-data-composition/src/brand\";\nimport { injectBetData } from \"@fresh8/ad-data-composition/src/betData\";\nimport * as generateLinks from \"@fresh8/ad-data-composition/src/lib/generateLinks\";\nimport { defineComponent } from \"vue\";\nimport StyledCtaButton from \"./styled/CtaButton.vue\";\nimport { useAnalytics } from \"../hooks/useAnalytics\";\n\nexport default defineComponent({\n  name: \"CtaButton\",\n  components: {\n    StyledCtaButton\n  },\n  props: {\n    text: {\n      type: String,\n      required: true\n    },\n    href: {\n      type: String,\n      required: true\n    },\n    buttonId: {\n      type: String,\n      required: false\n    }\n  },\n  setup(props) {\n    const brandContext = injectBrand();\n    const betData = injectBetData();\n    const { handleClick } = useAnalytics({}, \"CTA Button\");\n    const ctaLink = generateLinks.cta(props.href, {\n      affiliateId: betData?.affiliateId.value,\n      clickUrl: betData?.clickUrl.value,\n      operatorKey: betData?.operator.value?.name || \"\"\n    });\n\n    const { targetEl } = composePopoverForm(\"Cta Button\", [\n      {\n        type: \"ctaButton\",\n        get: () =>\n          brandContext?.brand.value.adTemplate.header.ctaButton.id || \"\",\n        set: (value: string) => {\n          if (brandContext) {\n            brandContext.brand.value.adTemplate.header.ctaButton.id = value;\n          }\n        }\n      }\n    ]);\n\n    return {\n      targetEl,\n      ctaLink,\n      handleClick\n    };\n  }\n});\n</script>\n\n<style></style>\n"],"names":["useStyles","createUseStyles","link","height","flex","justifyContent","image","objectFit","maxHeight","maxWidth","display","defineComponent","name","components","LinkWrapper","[object Object]","operatorLogos","injectBrand","links","injectBetData","operator","injectAdTag","useLayoutEffect","handleClick","useAnalytics2","classes","operatorLogo","computed","value","_id","key","desktop","binary","operatorLink","effectTrigger","_ctx","_createBlock","href","class","target","onClick","_createVNode","src","onLoad","stakeFixedWrapper","flexFlow","props","alignItems","border","LARGE_MPU","SKYSCRAPER","MOBILE_LEADERBOARD","width","LMLB","LEADERBOARD","LARGE_LEADERBOARD","stakeText","fontSize","marginRight","lineHeight","background","stakeAmount","DynamicText","getPotentialWinningsTranslations","injectTemplateSize","formattedStake","useStake","templateContext","size","layoutClass","stake","stakeFixedStyle","get","brand","adTemplate","potentialWinnings","stakeFont","set","stakeAmountStyle","stakeAmountFont","tag","styleGroup","StyledText","type","String","required","default","text","buttonId","getButtonStyle","getFontStyle","buttonStyle","primaryColor","primaryFont","color","secondaryColor","secondaryFont","buttonHeight","classesRef","styleComputed","testClassName","ctaButton","backgroundColor","defaultStyling","borderRadius","borderColor","borderStyle","borderWidth","&:hover","actions","hover","&:active","active","& > div","flexDirection","position","boxSizing","padding","ctaText","offerButton:hover &","offerButton:active &","title","ref","fontId","small","StyledCtaButton","generateLinks.cta","affiliateId","betData2","clickUrl","operatorKey","targetEl","composePopoverForm","brandContext","header","id","ctaLink","brand2","visible","url"],"mappings":"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"}