{"version":3,"file":"OddsButton.a4aa939e.js","sources":["../../src/components/styled/OddsButton.vue","../../src/components/styled/OddsButton.vue?vue&type=template&id=789c411c&lang.js"],"sourcesContent":["<template>\n  <LinkWrapper\n    :href=\"href\"\n    :class=\"[classes.oddsButton, testClassName]\"\n    target=\"_blank\"\n    :disabled=\"disabled\"\n    :title=\"title\"\n  >\n    <div v-if=\"suspended\">\n      <Lock :color=\"lockIconColor\" width=\"15\" height=\"15\" />\n    </div>\n\n    <div v-else-if=\"disabled\">\n      <StyledText\n        tag=\"span\"\n        :fontId=\"buttonStyle?.primaryFont\"\n        :class=\"[classes.oddsText, 'odds-text', !!meta && classes.small]\"\n      >\n        -\n      </StyledText>\n    </div>\n\n    <div v-else>\n      <StyledText\n        tag=\"span\"\n        :fontId=\"buttonStyle?.secondaryFont\"\n        v-if=\"meta\"\n        :class=\"[classes.metaText, 'meta-text']\"\n      >\n        {{ meta }}\n      </StyledText>\n      <StyledText\n        v-if=\"showWinnings\"\n        tag=\"span\"\n        :fontId=\"buttonStyle?.primaryFont\"\n        :class=\"[classes.oddsText, 'odds-text', !!meta && classes.small]\"\n      >\n        {{ winnings }}\n      </StyledText>\n      <StyledText\n        v-else\n        tag=\"span\"\n        :fontId=\"buttonStyle?.primaryFont\"\n        :class=\"[classes.oddsText, 'odds-text', !!meta && classes.small]\"\n      >\n        {{ odds }}\n      </StyledText>\n    </div>\n  </LinkWrapper>\n</template>\n\n<script lang=\"ts\">\nimport { createUseStyles } from \"@fresh8/ad-data-composition/src/theme\";\nimport LinkWrapper from \"../LinkWrapper.vue\";\nimport {\n  ButtonStyle,\n  injectBrand\n} from \"@fresh8/ad-data-composition/src/brand\";\nimport { defineComponent, computed } from \"vue\";\nimport StyledText from \"./Text.vue\";\nimport Lock from \"../icons/Lock.vue\";\nimport { useShowWinnings } from \"@fresh8/ad-data-composition/src/usePotentialWinnings\";\n\nexport default defineComponent({\n  name: \"OddsButton\",\n  components: {\n    LinkWrapper,\n    StyledText,\n    Lock\n  },\n  props: {\n    href: {\n      type: String,\n      required: false,\n      default: \"\"\n    },\n    meta: {\n      type: String,\n      required: false\n    },\n    odds: {\n      type: String,\n      required: false\n    },\n    disabled: {\n      type: Boolean,\n      required: false,\n      default: false\n    },\n    buttonId: {\n      type: String,\n      required: false\n    },\n    suspended: {\n      type: Boolean,\n      required: false,\n      default: false\n    },\n    winnings: {\n      type: String,\n      required: false\n    }\n  },\n  setup(props) {\n    const { getButtonStyle, getFontStyle } = injectBrand();\n\n    const buttonStyle = computed(() => {\n      return getButtonStyle(props.buttonId);\n    });\n    const buttonEnabled = computed(() => !props.disabled);\n    const styleComputed = computed(() => ({\n      buttonStyle: buttonStyle.value,\n      buttonEnabled: buttonEnabled.value,\n      primaryColor: getFontStyle(buttonStyle.value?.primaryFont)?.color,\n      secondaryColor: getFontStyle(buttonStyle.value?.secondaryFont)?.color\n    }));\n\n    const showWinnings = useShowWinnings();\n\n    const { classesRef } = useStyles(styleComputed);\n\n    const lockIconColor = computed(\n      () => getFontStyle(buttonStyle.value?.primaryFont)?.color || \"#000\"\n    );\n\n    const title = computed(() => {\n      if (props.disabled) {\n        return \"-\";\n      }\n\n      if (props.suspended) {\n        return `Suspended`;\n      }\n\n      return props.odds;\n    });\n\n    return {\n      title,\n      classes: classesRef,\n      buttonStyle,\n      buttonEnabled,\n      lockIconColor,\n      showWinnings,\n      testClassName: computed(() => \"text-style-market-name\")\n    };\n  }\n});\n\nconst defaultStyling = {\n  backgroundColor: \"#fff\",\n  borderRadius: \"\",\n  borderColor: \"\",\n  borderStyle: \"\",\n  borderWidth: \"\",\n  autoInteractions: true\n};\n\nconst { useStyles } = createUseStyles<\n  \"oddsButton\" | \"metaText\" | \"oddsText\" | \"small\",\n  {\n    buttonStyle: ButtonStyle;\n    buttonEnabled: boolean;\n    primaryColor: string;\n    secondaryColor: string;\n  }\n>({\n  oddsButton: {\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    },\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    boxSizing: \"border-box\",\n    padding: \"2px 0\"\n  },\n  metaText: {\n    fontSize: \"10px\",\n    lineHeight: 1.2,\n    \"$oddsButton:hover &\": {\n      color: props => props.buttonStyle.actions.hover.secondaryColor\n    },\n    \"oddsButton:active &\": {\n      color: props => props.buttonStyle.actions.active.secondaryColor\n    }\n  },\n  oddsText: {\n    fontSize: \"14px\",\n    lineHeight: 1,\n    \"$oddsButton:hover &\": {\n      color: props => props.buttonStyle.actions.hover.primaryColor\n    },\n    \"$oddsButton:active &\": {\n      color: props => props.buttonStyle.actions.active.primaryColor\n    }\n  },\n  small: {\n    fontSize: \"14px\"\n  }\n});\n</script>\n","<template>\n  <LinkWrapper\n    :href=\"href\"\n    :class=\"[classes.oddsButton, testClassName]\"\n    target=\"_blank\"\n    :disabled=\"disabled\"\n    :title=\"title\"\n  >\n    <div v-if=\"suspended\">\n      <Lock :color=\"lockIconColor\" width=\"15\" height=\"15\" />\n    </div>\n\n    <div v-else-if=\"disabled\">\n      <StyledText\n        tag=\"span\"\n        :fontId=\"buttonStyle?.primaryFont\"\n        :class=\"[classes.oddsText, 'odds-text', !!meta && classes.small]\"\n      >\n        -\n      </StyledText>\n    </div>\n\n    <div v-else>\n      <StyledText\n        tag=\"span\"\n        :fontId=\"buttonStyle?.secondaryFont\"\n        v-if=\"meta\"\n        :class=\"[classes.metaText, 'meta-text']\"\n      >\n        {{ meta }}\n      </StyledText>\n      <StyledText\n        v-if=\"showWinnings\"\n        tag=\"span\"\n        :fontId=\"buttonStyle?.primaryFont\"\n        :class=\"[classes.oddsText, 'odds-text', !!meta && classes.small]\"\n      >\n        {{ winnings }}\n      </StyledText>\n      <StyledText\n        v-else\n        tag=\"span\"\n        :fontId=\"buttonStyle?.primaryFont\"\n        :class=\"[classes.oddsText, 'odds-text', !!meta && classes.small]\"\n      >\n        {{ odds }}\n      </StyledText>\n    </div>\n  </LinkWrapper>\n</template>\n\n<script lang=\"ts\">\nimport { createUseStyles } from \"@fresh8/ad-data-composition/src/theme\";\nimport LinkWrapper from \"../LinkWrapper.vue\";\nimport {\n  ButtonStyle,\n  injectBrand\n} from \"@fresh8/ad-data-composition/src/brand\";\nimport { defineComponent, computed } from \"vue\";\nimport StyledText from \"./Text.vue\";\nimport Lock from \"../icons/Lock.vue\";\nimport { useShowWinnings } from \"@fresh8/ad-data-composition/src/usePotentialWinnings\";\n\nexport default defineComponent({\n  name: \"OddsButton\",\n  components: {\n    LinkWrapper,\n    StyledText,\n    Lock\n  },\n  props: {\n    href: {\n      type: String,\n      required: false,\n      default: \"\"\n    },\n    meta: {\n      type: String,\n      required: false\n    },\n    odds: {\n      type: String,\n      required: false\n    },\n    disabled: {\n      type: Boolean,\n      required: false,\n      default: false\n    },\n    buttonId: {\n      type: String,\n      required: false\n    },\n    suspended: {\n      type: Boolean,\n      required: false,\n      default: false\n    },\n    winnings: {\n      type: String,\n      required: false\n    }\n  },\n  setup(props) {\n    const { getButtonStyle, getFontStyle } = injectBrand();\n\n    const buttonStyle = computed(() => {\n      return getButtonStyle(props.buttonId);\n    });\n    const buttonEnabled = computed(() => !props.disabled);\n    const styleComputed = computed(() => ({\n      buttonStyle: buttonStyle.value,\n      buttonEnabled: buttonEnabled.value,\n      primaryColor: getFontStyle(buttonStyle.value?.primaryFont)?.color,\n      secondaryColor: getFontStyle(buttonStyle.value?.secondaryFont)?.color\n    }));\n\n    const showWinnings = useShowWinnings();\n\n    const { classesRef } = useStyles(styleComputed);\n\n    const lockIconColor = computed(\n      () => getFontStyle(buttonStyle.value?.primaryFont)?.color || \"#000\"\n    );\n\n    const title = computed(() => {\n      if (props.disabled) {\n        return \"-\";\n      }\n\n      if (props.suspended) {\n        return `Suspended`;\n      }\n\n      return props.odds;\n    });\n\n    return {\n      title,\n      classes: classesRef,\n      buttonStyle,\n      buttonEnabled,\n      lockIconColor,\n      showWinnings,\n      testClassName: computed(() => \"text-style-market-name\")\n    };\n  }\n});\n\nconst defaultStyling = {\n  backgroundColor: \"#fff\",\n  borderRadius: \"\",\n  borderColor: \"\",\n  borderStyle: \"\",\n  borderWidth: \"\",\n  autoInteractions: true\n};\n\nconst { useStyles } = createUseStyles<\n  \"oddsButton\" | \"metaText\" | \"oddsText\" | \"small\",\n  {\n    buttonStyle: ButtonStyle;\n    buttonEnabled: boolean;\n    primaryColor: string;\n    secondaryColor: string;\n  }\n>({\n  oddsButton: {\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    },\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    boxSizing: \"border-box\",\n    padding: \"2px 0\"\n  },\n  metaText: {\n    fontSize: \"10px\",\n    lineHeight: 1.2,\n    \"$oddsButton:hover &\": {\n      color: props => props.buttonStyle.actions.hover.secondaryColor\n    },\n    \"oddsButton:active &\": {\n      color: props => props.buttonStyle.actions.active.secondaryColor\n    }\n  },\n  oddsText: {\n    fontSize: \"14px\",\n    lineHeight: 1,\n    \"$oddsButton:hover &\": {\n      color: props => props.buttonStyle.actions.hover.primaryColor\n    },\n    \"$oddsButton:active &\": {\n      color: props => props.buttonStyle.actions.active.primaryColor\n    }\n  },\n  small: {\n    fontSize: \"14px\"\n  }\n});\n</script>\n"],"names":["defineComponent","name","components","LinkWrapper","StyledText","Lock","props","href","type","String","required","default","meta","odds","disabled","Boolean","buttonId","suspended","winnings","[object Object]","getButtonStyle","getFontStyle","injectBrand","computed","buttonStyle","value","buttonEnabled","primaryColor","primaryFont","color","secondaryColor","secondaryFont","useShowWinnings","classesRef","useStyles","styleComputed","title","classes","lockIconColor","showWinnings","testClassName","createUseStyles","oddsButton","backgroundColor","defaultStyling","borderRadius","borderColor","borderStyle","borderWidth","&:hover","actions","hover","&:active","active","& > div","display","flexDirection","justifyContent","alignItems","position","boxSizing","padding","metaText","fontSize","lineHeight","$oddsButton:hover &","oddsButton:active &","oddsText","$oddsButton:active &","small","_createBlock","_ctx","class","target","_createVNode","width","height","tag","fontId"],"mappings":"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"}