{"version":3,"file":"BentoBox-chunk-BLxSH36h.js","sources":["../../theme/ts/components/frontend-ui/MediaCard/BadgeDate.tsx","../../theme/ts/components/frontend-ui/MediaCard/MediaCard.tsx","../../theme/ts/components/frontend-ui/BentoBox/BentoBox.tsx"],"sourcesContent":["import classNames from 'classnames';\n\ntype Props = {\n  sizeVariant?: string;\n  day: string;\n  month: string;\n};\n\nexport const BadgeDate = ({ sizeVariant, day, month }: Props) => {\n  const classes = classNames('bo-badge-date', {\n    [`bo-badge-date--${sizeVariant}`]: !!sizeVariant,\n  });\n\n  return (\n    <div className={classes}>\n      <span className=\"bo-badge-date__day\">{day}</span>\n      <span className=\"bo-badge-date__month\">{month}</span>\n    </div>\n  );\n};\n","import classNames from 'classnames';\nimport { Icon } from '../Icon/Icon';\nimport { BadgeDate } from './BadgeDate';\n\ntype MediaTypes = 'event' | 'quiz' | 'podcast';\n\nexport type SizeVariant = 'xl' | 'lg' | 'mdw' | 'md' | 'sm' | 'xs';\n\nexport type Props = {\n  title?: string;\n  text?: string;\n  url?: string;\n  image?: string;\n  srcset?: string;\n  badge?: { day: string; month: string };\n  datetime?: string;\n  location?: string;\n  sizeVariant?: SizeVariant;\n  sizeVariantClass?: string;\n  mediaType?: MediaTypes;\n  isHighlight?: boolean;\n  highlightColorText?: string;\n  highlightColorBackground?: string;\n  highlightCallToActionColorText?: string;\n  highlightCallToActionColorBackground?: string;\n  podcastBackground?: string;\n  sizes?: string;\n  isSingleDemo?: boolean;\n  isTest: boolean;\n};\n\n// Not all sizes can be highlighted\nconst canHighlightSize = (size: SizeVariant) => {\n  const highlightableSizes = ['xl', 'sm'];\n  return highlightableSizes.includes(size);\n};\n\nexport const getAttributes = (\n  isSingleDemo: boolean,\n  sizeVariant: SizeVariant,\n  sizeVariantClass: string,\n  mediaType: string | undefined,\n  isHighlight: boolean,\n  highlightColorText: string,\n  highlightColorBackground: string,\n  highlightCallToActionColorText: string,\n  highlightCallToActionColorBackground: string,\n) => ({\n  className: classNames(\n    'bo-media-card',\n    `bo-media-card--${mediaType}`,\n    isSingleDemo ? `bo-media-card--${sizeVariant}` : sizeVariantClass,\n    {\n      'bo-media-card--highlight': isHighlight && canHighlightSize(sizeVariant),\n    },\n    `${isSingleDemo ? 'bo-media-card--xl-@l' : 'bo-media-card--sm bo-media-card--md-@l'}`,\n  ),\n  style: {\n    '--background-color': highlightColorBackground,\n    '--color': highlightColorText,\n    '--call-to-action-color': highlightCallToActionColorText,\n    '--call-to-action-background': highlightCallToActionColorBackground,\n  },\n});\n\nexport const MediaCard = ({\n  title,\n  text,\n  url,\n  image,\n  srcset,\n  badge = { day: '1', month: '1' },\n  datetime,\n  location,\n  sizeVariant = 'sm',\n  sizeVariantClass = '',\n  mediaType,\n  isHighlight = true,\n  highlightColorText = '',\n  highlightColorBackground = '',\n  highlightCallToActionColorText = '',\n  highlightCallToActionColorBackground = '',\n  isSingleDemo = false,\n  isTest = false,\n}: Props) => {\n  const attributes = getAttributes(\n    isSingleDemo,\n    sizeVariant,\n    sizeVariantClass,\n    mediaType,\n    isHighlight,\n    highlightColorText,\n    highlightColorBackground,\n    highlightCallToActionColorText,\n    highlightCallToActionColorBackground,\n  );\n\n  return (\n    <article {...attributes}>\n      <a href={url} title={title} className=\"bo-media-card__link\"></a>\n      <figure className=\"bo-media-card__media\">\n        <img\n          loading=\"lazy\"\n          decoding=\"async\"\n          className=\"bo-media-card__media__img\"\n          src={image}\n          srcSet={srcset}\n          alt=\"Image Alt Text\"\n        />\n      </figure>\n      <div className=\"bo-media-card__details\">\n        {mediaType === 'event' ? (\n          <div className=\"bo-media-card__event-title-wrapper\">\n            <BadgeDate day={badge.day} month={badge.month} />\n            <h3 className=\"bo-media-card__title u-hyphens\">{title}</h3>\n          </div>\n        ) : (\n          <h3 className={`bo-media-card__title u-hyphens`}>{title}</h3>\n        )}\n\n        {mediaType === 'event' && (\n          <div className=\"bo-media-card__event-tags\">\n            <div className=\"bo-media-card__event-tags__item\">\n              {!isTest && (\n                <Icon\n                  iconName=\"clock\"\n                  width={16}\n                  height={16}\n                  wrapperClass=\"bo-icon bo-icon--size-sm\"\n                />\n              )}\n\n              <span>{datetime}</span>\n            </div>\n            <div className=\"bo-media-card__event-tags__item\">\n              {!isTest && (\n                <Icon\n                  iconName=\"pin\"\n                  width={16}\n                  height={16}\n                  wrapperClass=\"bo-icon bo-icon--size-sm\"\n                />\n              )}\n              <span>{location}</span>\n            </div>\n          </div>\n        )}\n\n        <p className=\"bo-media-card__text u-hyphens\">{text}</p>\n      </div>\n    </article>\n  );\n};\n","import { render } from 'preact/compat';\nimport { useState, useEffect } from 'preact/hooks';\nimport { MediaCard } from '@components/MediaCard/MediaCard';\n\ntype Props = {\n  eventUrl: string;\n  singleCluster: boolean;\n  highlight: boolean;\n};\n\ntype EventData = {\n  url: string;\n  title: string;\n  image: {\n    src: string;\n    srcset: string;\n  };\n  badge: {\n    day: string;\n    month: string;\n  };\n  datetime: string;\n  location: string;\n  excerpt: string;\n};\n\nasync function fetchEventData(articleDescription: string) {\n  try {\n    const response = await fetch(articleDescription);\n    if (!response.ok) {\n      throw new Error('Failed to fetch event data');\n    }\n    const data = await response.json();\n\n    return {\n      url: data.url,\n      title: data.title,\n      image: {\n        src: data.image.src,\n        srcset: data.image.srcset,\n      },\n      badge: {\n        day: data.badge.day,\n        month: data.badge.month,\n      },\n      datetime: data.datetime,\n      location: data.location,\n      excerpt: data.excerpt,\n    };\n  } catch (error) {\n    console.error('Error fetching event data:', error);\n    return null;\n  }\n}\n\nexport const BentoBox = ({ eventUrl, singleCluster, highlight }: Props) => {\n  const [eventData, setEventData] = useState<EventData | null>(null);\n\n  useEffect(() => {\n    const getEventData = async () => {\n      if (eventUrl) {\n        const data = await fetchEventData(eventUrl);\n        setEventData(data);\n      }\n    };\n\n    getEventData();\n  }, []);\n\n  return (\n    <>\n      {eventData && (\n        <MediaCard\n          title={eventData?.title}\n          text={eventData?.excerpt}\n          url={eventData?.url}\n          image={eventData?.image.src}\n          srcset={eventData?.image.srcset}\n          badge={eventData?.badge}\n          datetime={eventData?.datetime}\n          location={eventData?.location}\n          isSingleDemo={singleCluster}\n          isHighlight={highlight}\n          mediaType=\"event\"\n          isTest={false}\n        />\n      )}\n    </>\n  );\n};\n\ndocument.querySelectorAll('.pts-bento-box-card').forEach(bentoBoxCard => {\n  const clusterDescription = bentoBoxCard.getAttribute('cluster-description');\n  const qtt = bentoBoxCard.getAttribute('qtt');\n  const singleCluster = qtt === '1';\n  const eventUrl = `${clusterDescription}.json`;\n\n  render(\n    <BentoBox\n      eventUrl={eventUrl || ''}\n      singleCluster={singleCluster}\n      highlight={singleCluster}\n    />,\n    bentoBoxCard,\n  );\n});\n"],"names":["BadgeDate","sizeVariant","day","month","classes","classNames","_jsxs","className","children","_jsx","canHighlightSize","size","includes","getAttributes","isSingleDemo","sizeVariantClass","mediaType","isHighlight","highlightColorText","highlightColorBackground","highlightCallToActionColorText","highlightCallToActionColorBackground","style","MediaCard","title","text","url","image","srcset","badge","datetime","location","isTest","attributes","href","loading","decoding","src","srcSet","alt","Icon","iconName","width","height","wrapperClass","fetchEventData","articleDescription","response","fetch","ok","Error","data","json","excerpt","error","BentoBox","eventUrl","singleCluster","highlight","eventData","setEventData","useState","useEffect","_Fragment","document","querySelectorAll","forEach","bentoBoxCard","clusterDescription","getAttribute","render"],"mappings":"mXAQO,MAAMA,EAAYA,CAAC,CAAEC,YAAAA,EAAaC,IAAAA,EAAKC,MAAAA,CAAa,IAAM,CACzDC,MAAAA,EAAUC,EAAW,gBAAiB,CAC1C,CAAC,kBAAkBJ,CAAW,EAAE,EAAG,CAAC,CAACA,CAAAA,CACtC,EAED,OACEK,EAAA,MAAA,CAAKC,UAAWH,EAAQI,UACtBC,EAAA,OAAA,CAAMF,UAAU,qBAAoBC,SAAEN,CAAAA,CAAU,EAChDO,EAAA,OAAA,CAAMF,UAAU,uBAAsBC,SAAEL,CAAAA,CAAY,CAAC,CAAA,CAClD,CAET,ECaMO,EAAoBC,GACG,CAAC,KAAM,IAAI,EACZC,SAASD,CAAI,EAG5BE,EAAgBA,CAC3BC,EACAb,EACAc,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,KACI,CACJd,UAAWF,EACT,gBACA,kBAAkBW,CAAS,GAC3BF,EAAe,kBAAkBb,CAAW,GAAKc,EACjD,CACE,2BAA4BE,GAAeP,EAAiBT,CAAW,CAEzE,EAAA,GAAGa,EAAe,uBAAyB,wCAAwC,EACrF,EACAQ,MAAO,CACL,qBAAsBH,EACtB,UAAWD,EACX,yBAA0BE,EAC1B,8BAA+BC,CAAAA,CAEnC,GAEaE,EAAYA,CAAC,CACxBC,MAAAA,EACAC,KAAAA,EACAC,IAAAA,EACAC,MAAAA,EACAC,OAAAA,EACAC,MAAAA,EAAQ,CAAE3B,IAAK,IAAKC,MAAO,GAAI,EAC/B2B,SAAAA,EACAC,SAAAA,EACA9B,YAAAA,EAAc,KACdc,iBAAAA,EAAmB,GACnBC,UAAAA,EACAC,YAAAA,EAAc,GACdC,mBAAAA,EAAqB,GACrBC,yBAAAA,EAA2B,GAC3BC,+BAAAA,EAAiC,GACjCC,qCAAAA,EAAuC,GACvCP,aAAAA,EAAe,GACfkB,OAAAA,EAAS,EACJ,IAAM,CACLC,MAAAA,EAAapB,EACjBC,EACAb,EACAc,EACAC,EACAC,EACAC,EACAC,EACAC,EACAC,CACF,EAEA,OACEf,EAAA,UAAA,CAAA,GAAa2B,EAAUzB,UACrBC,EAAA,IAAA,CAAGyB,KAAMR,EAAKF,MAAAA,EAAcjB,UAAU,qBAAA,CAAyB,EAC/DE,EAAA,SAAA,CAAQF,UAAU,uBAAsBC,SACtCC,EAAA,MAAA,CACE0B,QAAQ,OACRC,SAAS,QACT7B,UAAU,4BACV8B,IAAKV,EACLW,OAAQV,EACRW,IAAI,gBACL,CAAA,CAAA,CACK,EACRjC,EAAA,MAAA,CAAKC,UAAU,yBAAwBC,SACpCQ,CAAAA,IAAc,QACbV,EAAA,MAAA,CAAKC,UAAU,qCAAoCC,SAAA,CACjDC,EAACT,EAAS,CAACE,IAAK2B,EAAM3B,IAAKC,MAAO0B,EAAM1B,KAAAA,CAAQ,EAChDM,EAAA,KAAA,CAAIF,UAAU,iCAAgCC,SAAEgB,CAAAA,CAAU,CAAC,CAAA,CACxD,EAELf,EAAA,KAAA,CAAIF,UAAW,iCAAiCC,SAAEgB,CAAU,CAAA,EAG7DR,IAAc,SACbV,EAAA,MAAA,CAAKC,UAAU,4BAA2BC,UACxCF,EAAA,MAAA,CAAKC,UAAU,kCAAiCC,UAC7C,CAACwB,GACAvB,EAAC+B,EAAI,CACHC,SAAS,QACTC,MAAO,GACPC,OAAQ,GACRC,aAAa,0BAAA,CACd,EAGHnC,EAAA,OAAA,CAAAD,SAAOsB,CAAAA,CAAe,CAAC,CAAA,CACpB,EACLxB,EAAA,MAAA,CAAKC,UAAU,kCAAiCC,UAC7C,CAACwB,GACAvB,EAAC+B,EAAI,CACHC,SAAS,MACTC,MAAO,GACPC,OAAQ,GACRC,aAAa,0BAAA,CACd,EAEHnC,EAAA,OAAA,CAAAD,SAAOuB,CAAAA,CAAe,CAAC,CAAA,CACpB,CAAC,CAAA,CACH,EAGPtB,EAAA,IAAA,CAAGF,UAAU,gCAA+BC,SAAEiB,CAAAA,CAAQ,CAAC,CAAA,CACpD,CAAC,CAAA,CACC,CAEb,EC9HA,eAAeoB,EAAeC,EAA4B,CACpD,GAAA,CACIC,MAAAA,EAAW,MAAMC,MAAMF,CAAkB,EAC3C,GAAA,CAACC,EAASE,GACN,MAAA,IAAIC,MAAM,4BAA4B,EAExCC,MAAAA,EAAO,MAAMJ,EAASK,KAAK,EAE1B,MAAA,CACL1B,IAAKyB,EAAKzB,IACVF,MAAO2B,EAAK3B,MACZG,MAAO,CACLU,IAAKc,EAAKxB,MAAMU,IAChBT,OAAQuB,EAAKxB,MAAMC,MACrB,EACAC,MAAO,CACL3B,IAAKiD,EAAKtB,MAAM3B,IAChBC,MAAOgD,EAAKtB,MAAM1B,KACpB,EACA2B,SAAUqB,EAAKrB,SACfC,SAAUoB,EAAKpB,SACfsB,QAASF,EAAKE,OAChB,QACOC,EAAO,CACNA,eAAAA,MAAM,6BAA8BA,CAAK,EAC1C,IAAA,CAEX,CAEO,MAAMC,EAAWA,CAAC,CAAEC,SAAAA,EAAUC,cAAAA,EAAeC,UAAAA,CAAiB,IAAM,CACzE,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAA2B,IAAI,EAEjEC,OAAAA,EAAU,IAAM,EACO,SAAY,CAC/B,GAAIN,EAAU,CACNL,MAAAA,EAAO,MAAMN,EAAeW,CAAQ,EAC1CI,EAAaT,CAAI,CAAA,CAErB,GAEa,CACf,EAAG,EAAE,EAGH1C,EAAAsD,EAAA,CAAAvD,SACGmD,GACClD,EAACc,EAAS,CACRC,MAAOmC,GAAAA,YAAAA,EAAWnC,MAClBC,KAAMkC,GAAAA,YAAAA,EAAWN,QACjB3B,IAAKiC,GAAAA,YAAAA,EAAWjC,IAChBC,MAAOgC,GAAAA,YAAAA,EAAWhC,MAAMU,IACxBT,OAAQ+B,GAAAA,YAAAA,EAAWhC,MAAMC,OACzBC,MAAO8B,GAAAA,YAAAA,EAAW9B,MAClBC,SAAU6B,GAAAA,YAAAA,EAAW7B,SACrBC,SAAU4B,GAAAA,YAAAA,EAAW5B,SACrBjB,aAAc2C,EACdxC,YAAayC,EACb1C,UAAU,QACVgB,OAAQ,EACT,CAAA,CAAA,CAEH,CAEN,EAEAgC,SAASC,iBAAiB,qBAAqB,EAAEC,QAAwBC,GAAA,CACjEC,MAAAA,EAAqBD,EAAaE,aAAa,qBAAqB,EAEpEZ,EADMU,EAAaE,aAAa,KAAK,IACb,IACxBb,EAAW,GAAGY,CAAkB,QAEtCE,EACE7D,EAAC8C,EAAQ,CACPC,SAAUA,GAAY,GACtBC,cAAAA,EACAC,UAAWD,CACZ,CAAA,EACDU,CACF,CACF,CAAC"}