{"version":3,"file":"CardHeader.0bc550b6.js","sources":["../../../ad-data-composition/src/lib/formatDate.ts","../../../ad-data-composition/src/date.ts","../../src/components/Live.vue","../../src/components/Live.vue?vue&type=template&id=82470a02&lang.js","../../src/components/branded/FixtureDate.vue","../../src/components/branded/FixtureDate.vue?vue&type=template&id=30a116ac&lang.js","../../src/components/CardHeader.vue","../../src/components/CardHeader.vue?vue&type=template&id=73fe9616&lang.js"],"sourcesContent":["import { Languages } from \"../lang\";\n\nfunction getIsTomorrow(fixture: Date) {\n  const date = new Date();\n  date.setDate(date.getDate() + 1);\n  const tomorrow = date.getDate();\n  const month = date.getMonth();\n  const year = date.getFullYear();\n  if (\n    tomorrow === fixture.getDate() &&\n    month === fixture.getMonth() &&\n    year === fixture.getFullYear()\n  )\n    return true;\n  return false;\n}\n\nfunction getIsToday(fixture: Date) {\n  const day = new Date().getDate();\n  const month = new Date().getMonth();\n  const year = new Date().getFullYear();\n\n  const fixtureDay = fixture.getDate();\n  const fixtureMonth = fixture.getMonth();\n  const fixtureYear = fixture.getFullYear();\n\n  if (day === fixtureDay && month === fixtureMonth && year === fixtureYear) {\n    return true;\n  }\n\n  return false;\n}\n\nfunction getTomorrow() {\n  const lang = Languages[window.navigator.language.toLowerCase()];\n  return lang?.DateTimeTexts?.Tomorrow || \"Tomorrow\";\n}\n\nfunction getToday() {\n  const lang = Languages[window.navigator.language.toLowerCase()];\n  return lang?.DateTimeTexts?.Today || \"Today\";\n}\n\nfunction getTimeTillNextWeek(): number {\n  const today = new Date(Date.now()); // passing Date.now() as its easier to mock\n  const nextweek = new Date(\n    today.getFullYear(),\n    today.getMonth(),\n    today.getDate() + 6\n  );\n  return nextweek.valueOf() - today.valueOf();\n}\n\nfunction getTimeTillFixture(fixture: Date): number {\n  const today = new Date(Date.now()); // passing Date.now() as its easier to mock\n  return fixture.valueOf() - today.valueOf();\n}\n\nexport default function(fixture: string, languageCode: string): string {\n  const dateFixture = new Date(fixture);\n  const timeTillFixture = getTimeTillFixture(dateFixture);\n  const timeTillNextWeek = getTimeTillNextWeek();\n  const isToday = getIsToday(dateFixture);\n  const isTomorrow = getIsTomorrow(dateFixture);\n\n  if (isToday) {\n    const formattedDate = dateFixture.toLocaleTimeString(languageCode, {\n      hour: \"numeric\",\n      minute: \"2-digit\"\n    });\n    return `${getToday()}, ${formattedDate}`;\n  }\n\n  if (isTomorrow) {\n    const formattedDate = dateFixture.toLocaleTimeString(languageCode, {\n      hour: \"numeric\",\n      minute: \"2-digit\"\n    });\n    return `${getTomorrow()}, ${formattedDate}`;\n  }\n\n  // fixture is in the future but less that 6 days away\n  if (timeTillFixture > 0 && timeTillFixture < timeTillNextWeek) {\n    const formattedDate = dateFixture.toLocaleTimeString(languageCode, {\n      weekday: \"short\",\n      hour: \"numeric\",\n      minute: \"2-digit\"\n    });\n    return formattedDate;\n  }\n\n  const formattedDate = dateFixture.toLocaleDateString(languageCode, {\n    month: \"short\",\n    day: \"numeric\",\n    hour: \"numeric\",\n    minute: \"2-digit\"\n  });\n\n  return formattedDate;\n}\n","import { computed, ComputedRef } from \"vue\";\n\nimport { composeEvent } from \"./betData\";\nimport formatedDate from \"./lib/formatDate\";\n\nexport default function composeDate(\n  eventId: string | undefined,\n  languageCode: string = navigator.language\n): ComputedRef<string | undefined> {\n  const event = composeEvent(eventId);\n\n  return computed(() => {\n    if (event.value?.live) {\n      return formatedDate(\"live\", languageCode);\n    }\n    if (event.value?.fixture) {\n      return formatedDate(event.value?.fixture, languageCode);\n    }\n  });\n}\n","<template>\n  <div :class=\"classes.liveEvents\"><slot /></div>\n</template>\n\n<script>\nimport { defineComponent } from \"vue\";\nimport { createUseStyles } from \"@fresh8/vue-jss/src\";\n\nconst useStyles = createUseStyles({\n  \"@keyframes flashing\": {\n    \"0%\": { opacity: 0 },\n    \"50%\": { opacity: 1 },\n    \"100%\": { opacity: 0 }\n  },\n  liveEvents: {\n    paddingLeft: \"8px\",\n    position: \"relative\",\n    \"&:before\": {\n      position: \"absolute\",\n      content: \"''\",\n      width: \"5px\",\n      height: \"5px\",\n      left: \"0px\",\n      top: \"49%\",\n      transform: \"translateY(-50%)\",\n      backgroundColor: \"#d00d00\",\n      borderRadius: \"50%\",\n      verticalAlign: \"middle\",\n      animationName: \"$flashing\",\n      animationDuration: \"1s\",\n      animationIterationCount: \"infinite\"\n    }\n  }\n});\nexport default defineComponent({\n  name: \"LiveEvents\",\n  setup() {\n    const classesRef = useStyles();\n\n    return {\n      classes: classesRef.value\n    };\n  }\n});\n</script>\n","<template>\n  <div :class=\"classes.liveEvents\"><slot /></div>\n</template>\n\n<script>\nimport { defineComponent } from \"vue\";\nimport { createUseStyles } from \"@fresh8/vue-jss/src\";\n\nconst useStyles = createUseStyles({\n  \"@keyframes flashing\": {\n    \"0%\": { opacity: 0 },\n    \"50%\": { opacity: 1 },\n    \"100%\": { opacity: 0 }\n  },\n  liveEvents: {\n    paddingLeft: \"8px\",\n    position: \"relative\",\n    \"&:before\": {\n      position: \"absolute\",\n      content: \"''\",\n      width: \"5px\",\n      height: \"5px\",\n      left: \"0px\",\n      top: \"49%\",\n      transform: \"translateY(-50%)\",\n      backgroundColor: \"#d00d00\",\n      borderRadius: \"50%\",\n      verticalAlign: \"middle\",\n      animationName: \"$flashing\",\n      animationDuration: \"1s\",\n      animationIterationCount: \"infinite\"\n    }\n  }\n});\nexport default defineComponent({\n  name: \"LiveEvents\",\n  setup() {\n    const classesRef = useStyles();\n\n    return {\n      classes: classesRef.value\n    };\n  }\n});\n</script>\n","<template>\n  <DynamicText\n    tag=\"span\"\n    styleGroup=\"Fixture Time\"\n    :get=\"fixtureTimeFont.get\"\n    :set=\"fixtureTimeFont.set\"\n  >\n    <slot />\n  </DynamicText>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from \"vue\";\nimport DynamicText from \"../DynamicText.vue\";\n\nimport { Brand } from \"@fresh8/types/src\";\n\nexport default defineComponent({\n  name: \"BrandedDate\",\n  components: {\n    DynamicText\n  },\n  setup() {\n    return {\n      fixtureTimeFont: {\n        get(brand: Brand | undefined) {\n          return brand?.adTemplate.market.fixtureTimeFont;\n        },\n        set(brand: Brand, value: string) {\n          brand.adTemplate.market.fixtureTimeFont = value;\n        }\n      }\n    };\n  }\n});\n</script>\n","<template>\n  <DynamicText\n    tag=\"span\"\n    styleGroup=\"Fixture Time\"\n    :get=\"fixtureTimeFont.get\"\n    :set=\"fixtureTimeFont.set\"\n  >\n    <slot />\n  </DynamicText>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from \"vue\";\nimport DynamicText from \"../DynamicText.vue\";\n\nimport { Brand } from \"@fresh8/types/src\";\n\nexport default defineComponent({\n  name: \"BrandedDate\",\n  components: {\n    DynamicText\n  },\n  setup() {\n    return {\n      fixtureTimeFont: {\n        get(brand: Brand | undefined) {\n          return brand?.adTemplate.market.fixtureTimeFont;\n        },\n        set(brand: Brand, value: string) {\n          brand.adTemplate.market.fixtureTimeFont = value;\n        }\n      }\n    };\n  }\n});\n</script>\n","<template>\n  <div :class=\"[classes.cardHeader, layoutClass]\">\n    <Live v-if=\"event.live\">\n      <FixtureDate class=\"live\">{{ live }}</FixtureDate>\n    </Live>\n    <FixtureDate :class=\"[classes.fixtureDate, 'fixture-start-date']\" v-else>\n      {{ fixtureStartDate }}\n    </FixtureDate>\n    <FixtureSport\n      :class=\"[classes.fixtureSport, 'sport']\"\n      :id=\"marketBranding?.marketNameFont\"\n    >\n      {{ eventSport }}\n    </FixtureSport>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { createUseStyles } from \"@fresh8/vue-jss/src\";\nimport { computed, defineComponent } from \"vue\";\n\nimport { injectBrand } from \"@fresh8/ad-data-composition/src/brand\";\nimport { composeEvent } from \"@fresh8/ad-data-composition/src/betData\";\nimport composeDate from \"@fresh8/ad-data-composition/src/date\";\nimport { getTranslation } from \"@fresh8/ad-data-composition/src/lang\";\nimport { getSport } from \"../lib/language\";\nimport {\n  injectTemplateSize,\n  SMALL_RESPONSIVE,\n  SKYSCRAPER,\n  LMLB\n} from \"@fresh8/ad-data-composition/src/useTemplateSize\";\n\nimport Live from \"./Live.vue\";\nimport FixtureDate from \"./branded/FixtureDate.vue\";\nimport FixtureSport from \"./branded/FixtureSport.vue\";\n\nconst useStyles = createUseStyles({\n  cardHeader: {\n    width: \"100%\",\n    borderBottom: props => `1px solid ${props.marketBorderColor || \"#dcddf\"}`,\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    fontSize: \"10px\",\n    padding: \"0 8px\",\n    height: \"20px\",\n    boxSizing: \"border-box\",\n    alignItems: \"center\",\n    flex: \"none\",\n    [`&.${SKYSCRAPER.name}`]: {\n      height: \"28px\",\n      flexDirection: \"column\",\n      justifyContent: \"center\",\n      lineHeight: \"11px\",\n      padding: \"4px 8px\"\n    },\n    [`&.${SMALL_RESPONSIVE.name}`]: {\n      height: \"17px\",\n      flex: \"1 0 17px\",\n      padding: \"0 6px\",\n      maxHeight: \"17px\"\n    },\n    [`&.${LMLB.name}`]: {\n      fontSize: \"9px\",\n      padding: \"0\",\n      border: \"0\"\n    }\n  },\n  fixtureDate: {\n    flex: 1\n  },\n  fixtureSport: {\n    flex: 1,\n    textAlign: \"right\"\n  }\n});\n\nexport default defineComponent({\n  name: \"CardHeader\",\n  components: {\n    Live,\n    FixtureDate,\n    FixtureSport\n  },\n  props: {\n    eventId: { type: String, required: true }\n  },\n  setup(props) {\n    const layout = injectTemplateSize();\n    const { adTemplateBranding, marketBranding } = injectBrand();\n    const event = composeEvent(props.eventId);\n    const fixtureStartDate = composeDate(event.value.id);\n    const eventSport = computed(() => getSport(event.value.sport));\n\n    const classesRef = useStyles(\n      computed(() => ({\n        marketBorderColor: adTemplateBranding.value.marketBorderColor\n      }))\n    );\n\n    const live = computed(\n      () =>\n        getTranslation(window.navigator.language.toLowerCase()).DateTimeTexts\n          .Live\n    );\n\n    return {\n      classes: classesRef,\n      event,\n      eventSport,\n      fixtureStartDate,\n      marketBranding,\n      layoutClass: computed(() => layout.size.value.name),\n      live\n    };\n  }\n});\n</script>\n","<template>\n  <div :class=\"[classes.cardHeader, layoutClass]\">\n    <Live v-if=\"event.live\">\n      <FixtureDate class=\"live\">{{ live }}</FixtureDate>\n    </Live>\n    <FixtureDate :class=\"[classes.fixtureDate, 'fixture-start-date']\" v-else>\n      {{ fixtureStartDate }}\n    </FixtureDate>\n    <FixtureSport\n      :class=\"[classes.fixtureSport, 'sport']\"\n      :id=\"marketBranding?.marketNameFont\"\n    >\n      {{ eventSport }}\n    </FixtureSport>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { createUseStyles } from \"@fresh8/vue-jss/src\";\nimport { computed, defineComponent } from \"vue\";\n\nimport { injectBrand } from \"@fresh8/ad-data-composition/src/brand\";\nimport { composeEvent } from \"@fresh8/ad-data-composition/src/betData\";\nimport composeDate from \"@fresh8/ad-data-composition/src/date\";\nimport { getTranslation } from \"@fresh8/ad-data-composition/src/lang\";\nimport { getSport } from \"../lib/language\";\nimport {\n  injectTemplateSize,\n  SMALL_RESPONSIVE,\n  SKYSCRAPER,\n  LMLB\n} from \"@fresh8/ad-data-composition/src/useTemplateSize\";\n\nimport Live from \"./Live.vue\";\nimport FixtureDate from \"./branded/FixtureDate.vue\";\nimport FixtureSport from \"./branded/FixtureSport.vue\";\n\nconst useStyles = createUseStyles({\n  cardHeader: {\n    width: \"100%\",\n    borderBottom: props => `1px solid ${props.marketBorderColor || \"#dcddf\"}`,\n    display: \"flex\",\n    justifyContent: \"space-between\",\n    fontSize: \"10px\",\n    padding: \"0 8px\",\n    height: \"20px\",\n    boxSizing: \"border-box\",\n    alignItems: \"center\",\n    flex: \"none\",\n    [`&.${SKYSCRAPER.name}`]: {\n      height: \"28px\",\n      flexDirection: \"column\",\n      justifyContent: \"center\",\n      lineHeight: \"11px\",\n      padding: \"4px 8px\"\n    },\n    [`&.${SMALL_RESPONSIVE.name}`]: {\n      height: \"17px\",\n      flex: \"1 0 17px\",\n      padding: \"0 6px\",\n      maxHeight: \"17px\"\n    },\n    [`&.${LMLB.name}`]: {\n      fontSize: \"9px\",\n      padding: \"0\",\n      border: \"0\"\n    }\n  },\n  fixtureDate: {\n    flex: 1\n  },\n  fixtureSport: {\n    flex: 1,\n    textAlign: \"right\"\n  }\n});\n\nexport default defineComponent({\n  name: \"CardHeader\",\n  components: {\n    Live,\n    FixtureDate,\n    FixtureSport\n  },\n  props: {\n    eventId: { type: String, required: true }\n  },\n  setup(props) {\n    const layout = injectTemplateSize();\n    const { adTemplateBranding, marketBranding } = injectBrand();\n    const event = composeEvent(props.eventId);\n    const fixtureStartDate = composeDate(event.value.id);\n    const eventSport = computed(() => getSport(event.value.sport));\n\n    const classesRef = useStyles(\n      computed(() => ({\n        marketBorderColor: adTemplateBranding.value.marketBorderColor\n      }))\n    );\n\n    const live = computed(\n      () =>\n        getTranslation(window.navigator.language.toLowerCase()).DateTimeTexts\n          .Live\n    );\n\n    return {\n      classes: classesRef,\n      event,\n      eventSport,\n      fixtureStartDate,\n      marketBranding,\n      layoutClass: computed(() => layout.size.value.name),\n      live\n    };\n  }\n});\n</script>\n"],"names":["Date","fixture","now","valueOf","today","getTimeTillFixture","dateFixture","getFullYear","getMonth","getDate","getTimeTillNextWeek","day","fixtureDay","month","fixtureMonth","year","fixtureYear","getIsToday","setDate","date","tomorrow","getIsTomorrow","isToday","toLocaleTimeString","languageCode","hour","minute","Languages","window","navigator","language","toLowerCase","DateTimeTexts","Today","formattedDate2","isTomorrow","Tomorrow","timeTillFixture","timeTillNextWeek","weekday","toLocaleDateString","composeEvent","eventId","computed","event","value","live","formatedDate","createUseStyles","@keyframes flashing","0%","opacity","50%","100%","liveEvents","paddingLeft","position","&:before","content","width","height","left","top","transform","backgroundColor","borderRadius","verticalAlign","animationName","animationDuration","animationIterationCount","defineComponent","name","setup","classes","useStyles","_createBlock","class","_ctx","_renderSlot","components","DynamicText","fixtureTimeFont","get","brand","adTemplate","market","[object Object]","tag","styleGroup","set","cardHeader","borderBottom","props","marketBorderColor","display","justifyContent","fontSize","padding","boxSizing","alignItems","flex","SKYSCRAPER","flexDirection","lineHeight","SMALL_RESPONSIVE","maxHeight","LMLB","border","fixtureDate","fixtureSport","textAlign","Live","FixtureDate","FixtureSport","type","String","required","injectTemplateSize","adTemplateBranding","marketBranding","injectBrand","composeDate","id","getSport","sport","getTranslation","classesRef","eventSport","fixtureStartDate","layoutClass","layout","size","_createVNode","marketNameFont"],"mappings":"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"}