{"version":3,"file":"1756-2d3e7ef598612f06961b.js","mappings":"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","sources":["webpack://brc/./src/helpers/aspectRatio.ts","webpack://brc/./src/helpers/image.ts","webpack://brc/./src/stories/Components/Cards/BrandCard/BrandCard.styles.ts","webpack://brc/./src/stories/Components/Cards/BrandCard/BrandCard.tsx","webpack://brc/./src/stories/Widgets/BrandCardListing/BrandCardListing.styles.ts","webpack://brc/./src/stories/Widgets/BrandCardListing/BrandCardListing.tsx"],"sourcesContent":["import { css } from 'styled-components';\r\n/**\r\n * Returns the aspect ratio of the given width and height as a percentage.\r\n */\r\nexport function aspectRatio(width, height) {\r\n    return (height / width) * 100;\r\n}\r\n/**\r\n * Re-usable styles for image container where the\r\n * image needs to maintain it's aspect ratio\r\n *\r\n * @param width\r\n * @param height\r\n * @returns\r\n */\r\nexport function imageWrapperPreserveRatio(width, height) {\r\n    if (!width && !height) {\r\n        return null;\r\n    }\r\n    return css `\r\n    position: relative;\r\n    overflow: hidden;\r\n    overflow: clip;\r\n    width: 100%;\r\n    aspect-ratio: ${width / height};\r\n  `;\r\n}\r\n/**\r\n * Calculates the percentage bottom padding\r\n * required to maintain a certain ratio.\r\n *\r\n * To be used in cases where the image ratio\r\n * changes based on viewport.\r\n *\r\n * @param width\r\n * @param height\r\n * @returns padding-bottom: {ratioPercentage}%\r\n */\r\nexport function imageWrapperRatioPadding(width, height) {\r\n    if (!width && !height) {\r\n        return '';\r\n    }\r\n    const ratioPercentage = aspectRatio(width, height).toFixed(2);\r\n    return `padding-bottom: ${ratioPercentage}%`;\r\n}\r\n/**\r\n * Re-usable styles for an image placed within\r\n * a container maintaining aspect ratio\r\n */\r\nexport const imageCoverContainer = (relative) => css `\r\n  display: block;\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  object-position: center;\r\n  ${!relative && 'position: absolute; top: 0;left: 0;'}\r\n`;\r\n","import queryString from 'query-string';\r\n/**\r\n * Create an image URL for ImageProcessor\r\n * @param image The image model\r\n * @param imageParams The image parameters\r\n * @returns The image URL\r\n */\r\nexport function imageUrl(image, imageParams) {\r\n    if (!image) {\r\n        return '';\r\n    }\r\n    const params = {\r\n        rxy: image.focalPoint ? `${image.focalPoint.top},${image.focalPoint.left}` : undefined,\r\n        ...imageParams,\r\n    };\r\n    if (params.width && params.heightratio) {\r\n        params.height = Math.round(params.width / params.heightratio);\r\n    }\r\n    if (params.height && params.widthratio) {\r\n        params.width = Math.round(params.height / params.widthratio);\r\n    }\r\n    const paramsString = queryString.stringify(params);\r\n    return `${image.src}${paramsString ? `?${queryString.stringify(params)}` : ''}`;\r\n}\r\nexport function getSrcs(image, upper, lower, steps, ratio, imageParams) {\r\n    if (!image) {\r\n        return undefined;\r\n    }\r\n    const sizes = getRange(upper, lower, steps);\r\n    const sizesArr = sizes.map((size) => `${imageUrl(image, { ...imageParams, width: size, heightratio: ratio })} ${size}w`);\r\n    return {\r\n        src: sizesArr[0].split(' ')[0],\r\n        srcSet: sizesArr.join(','),\r\n    };\r\n}\r\nexport function getRetinaSrcs(image, width, ratio) {\r\n    const dprs = [1, 1.5, 2, 2.5, 3];\r\n    const dprsArr = dprs.map((dpr) => `${imageUrl(image, { width: width * dpr, heightratio: ratio })} ${dpr}x`);\r\n    return {\r\n        src: dprsArr[0].split(' ')[0],\r\n        srcSet: dprsArr.join(','),\r\n    };\r\n}\r\nfunction getRange(upper, lower, steps) {\r\n    const difference = upper - lower;\r\n    const increment = difference / (steps - 1);\r\n    return [\r\n        lower,\r\n        ...Array(steps - 2)\r\n            .fill('')\r\n            .map((_, index) => Math.ceil(lower + increment * (index + 1))),\r\n        upper,\r\n    ];\r\n}\r\n","import { transition } from '@helpers/animate';\r\nimport { imageWrapperPreserveRatio } from '@helpers/aspectRatio';\r\nimport brand, { BrandColours } from '@helpers/brand';\r\nimport { fluid } from '@helpers/fluid';\r\nimport fonts from '@helpers/fonts';\r\nimport { Device, from } from '@helpers/media';\r\nimport { paragraphSmall } from '@helpers/typography';\r\nimport ButtonStyles from '@stories/Components/Buttons/Button/Button.styles';\r\nimport styled from 'styled-components';\r\nconst Container = styled.div `\r\n  display: flex;\r\n  flex-direction: column;\r\n  border-radius: 10px;\r\n  color: ${brand.global.white};\r\n  overflow: hidden;\r\n\r\n  a& {\r\n    text-decoration: none;\r\n\r\n    ${() => Image}, svg {\r\n      ${transition('transform', 0.25)};\r\n    }\r\n\r\n    &:focus-visible,\r\n    &:hover {\r\n      ${() => Image}, svg {\r\n        transform: scale(1.05);\r\n      }\r\n    }\r\n  }\r\n\r\n  &[data-variant=${BrandColours.BlueDark}] {\r\n    --contentColour: ${brand.primary.blue.dark};\r\n    --imageColour: ${brand.primary.blue.light};\r\n\r\n    &:has(${() => Image}) {\r\n      --imageColour: ${brand.global.white};\r\n    }\r\n\r\n    &:has(${() => Image}) {\r\n      border: 1px solid var(--contentColour);\r\n    }\r\n  }\r\n\r\n  &[data-variant=${BrandColours.PurpleDark}] {\r\n    --contentColour: ${brand.primary.purple.dark};\r\n    --imageColour: ${brand.global.white};\r\n\r\n    border: 1px solid var(--contentColour);\r\n  }\r\n`;\r\nconst ImageContainer = styled.div `\r\n  ${imageWrapperPreserveRatio(328, 164)};\r\n\r\n  display: grid;\r\n  place-content: center;\r\n  background-color: var(--imageColour);\r\n\r\n  svg {\r\n    width: 92px;\r\n    aspect-ratio: 1;\r\n\r\n    ${Container}[data-variant=${BrandColours.PurpleDark}] & {\r\n      color: var(--contentColour);\r\n    }\r\n  }\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    aspect-ratio: 259 / 146;\r\n  }\r\n`;\r\nconst Image = styled.img `\r\n  --spacing: ${fluid(10, 16)};\r\n\r\n  display: block;\r\n  object-fit: contain;\r\n  object-position: center;\r\n  width: calc(100% - var(--spacing) * 2);\r\n  height: calc(100% - var(--spacing) * 2);\r\n  position: absolute;\r\n  top: var(--spacing);\r\n  left: var(--spacing);\r\n`;\r\nconst ContentWrapper = styled.div `\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  background-color: var(--contentColour);\r\n  padding: 16px;\r\n  min-height: 157px;\r\n\r\n  ${ButtonStyles.Container} {\r\n    --buttonHeight: ${fluid(42, 56)};\r\n\r\n    margin: auto 0 0 auto;\r\n  }\r\n`;\r\nconst Heading = styled.h3 `\r\n  ${fonts.lato.semiBold};\r\n\r\n  font-size: ${fluid(18, 22)};\r\n  line-height: ${fluid(24, 34)};\r\n  margin: 0 0 8px;\r\n`;\r\nconst Subheading = styled.p `\r\n  ${paragraphSmall};\r\n\r\n  margin: 0 0 24px;\r\n`;\r\nconst BrandCardStyles = {\r\n    Container,\r\n    ImageContainer,\r\n    Image,\r\n    ContentWrapper,\r\n    Heading,\r\n    Subheading,\r\n};\r\nexport default BrandCardStyles;\r\n","import { getSvgIcon, InterfaceIcon } from '@helpers/icons';\r\nimport { getSrcs } from '@helpers/image';\r\nimport { FakeButton } from '@stories/Components/Buttons/Button/Button';\r\nimport * as React from 'react';\r\nimport S from './BrandCard.styles';\r\nconst BrandCard = (props) => {\r\n    const srcs = props.type === 'image' && props.image\r\n        ? getSrcs(props.image, 706, 170, 8, 259 / 146, { rmode: 'pad' })\r\n        : undefined;\r\n    return (React.createElement(S.Container, { \"data-variant\": props.variant, ...(props.cta\r\n            ? {\r\n                as: 'a',\r\n                href: props.cta.url,\r\n                target: props.cta.target,\r\n                'aria-label': props.imageOnly ? props.heading : undefined,\r\n            }\r\n            : {}) },\r\n        React.createElement(S.ImageContainer, null,\r\n            props.type === 'image' && srcs && (React.createElement(S.Image, { src: srcs.src, srcSet: srcs.srcSet, sizes: props.sizes, alt: props.image.altText, loading: \"lazy\" })),\r\n            props.type === 'icon' && React.createElement(React.Fragment, null, getSvgIcon(props.icon))),\r\n        !props.imageOnly ? (React.createElement(S.ContentWrapper, null,\r\n            React.createElement(S.Heading, { as: props.headingType }, props.heading),\r\n            props.subheading && React.createElement(S.Subheading, null, props.subheading),\r\n            props.cta && (React.createElement(FakeButton, { buttonType: \"secondary\", icon: InterfaceIcon.ArrowRight, iconOnly: true })))) : null));\r\n};\r\nexport default BrandCard;\r\n","import { fluid } from '@helpers/fluid';\r\nimport { Device, from } from '@helpers/media';\r\nimport { paragraphRegular } from '@helpers/typography';\r\nimport ButtonStyles from '@stories/Components/Buttons/Button/Button.styles';\r\nimport BrandCardStyles from '@stories/Components/Cards/BrandCard/BrandCard.styles';\r\nimport FiltersStyles from '@stories/Components/Listings/Filters/Filters.styles';\r\nimport SectionWrapper from '@stories/Components/Misc/SectionWrapper/SectionWrapper';\r\nimport SectionWrapperStyles from '@stories/Components/Misc/SectionWrapper/SectionWrapper.styles';\r\nimport styled from 'styled-components';\r\nconst Container = styled(SectionWrapper) `\r\n  overflow: hidden;\r\n\r\n  ${SectionWrapperStyles.Inner} {\r\n    display: flex;\r\n    flex-direction: column;\r\n\r\n    > ${ButtonStyles.Container} {\r\n      margin: ${fluid(40, 76)} auto 0;\r\n    }\r\n  }\r\n\r\n  ${FiltersStyles.Container} {\r\n    margin: 0 0 ${fluid(28, 58)};\r\n\r\n    @media ${from(Device.TabletLarge)} {\r\n      position: relative;\r\n      z-index: 1;\r\n    }\r\n  }\r\n`;\r\nconst ResultsGrid = styled.div `\r\n  --rowItems: 2;\r\n\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  justify-content: center;\r\n  align-items: stretch;\r\n  gap: var(--gutterWidth);\r\n\r\n  @media ${from(Device.Tablet)} {\r\n    --rowItems: 4;\r\n  }\r\n\r\n  @media ${from(Device.DesktopSmall)} {\r\n    --rowItems: 6;\r\n  }\r\n\r\n  ${BrandCardStyles.Container} {\r\n    flex: 0 0\r\n      calc(\r\n        100% / var(--rowItems) - (var(--gutterWidth) * ((var(--rowItems) - 1) / var(--rowItems)))\r\n      );\r\n  }\r\n`;\r\nconst NoResults = styled.p `\r\n  ${paragraphRegular};\r\n\r\n  grid-column: 1 / -1;\r\n  text-align: center;\r\n`;\r\nconst BrandCardListingStyles = {\r\n    Container,\r\n    ResultsGrid,\r\n    NoResults,\r\n};\r\nexport default BrandCardListingStyles;\r\n","import { rootMargin } from '@helpers/animate';\r\nimport { API_URLS } from '@helpers/api';\r\nimport { InterfaceIcon } from '@helpers/icons';\r\nimport { Device, until } from '@helpers/media';\r\nimport { withMotion } from '@hoc/withMotion';\r\nimport { withQueryParams } from '@hoc/withQueryParams';\r\nimport { useApi } from '@hooks/useApi';\r\nimport { useInView } from '@hooks/useInView';\r\nimport Button from '@stories/Components/Buttons/Button/Button';\r\nimport BrandCard from '@stories/Components/Cards/BrandCard/BrandCard';\r\nimport Filters from '@stories/Components/Listings/Filters/Filters';\r\nimport LoadingIndicator from '@stories/Components/Misc/LoadingIndicator/LoadingIndicator';\r\nimport isEqual from 'lodash/isEqual';\r\nimport qs from 'query-string';\r\nimport * as React from 'react';\r\nimport { ArrayParam, NumberParam, StringParam, useQueryParams, withDefault, } from 'use-query-params';\r\nimport S from './BrandCardListing.styles';\r\nconst BrandCardListing = (props) => {\r\n    const [ref, inView] = useInView({ rootMargin }, false, props.pageContext?.isEditMode);\r\n    const imageSizes = `${until(Device.Tablet)} 50vw, ${until(Device.DesktopSmall)} 25vw, ${until(Device.DesktopLarge)} 17vw, 260px`;\r\n    const [params, setParams] = useQueryParams(Object.assign({\r\n        pageIndex: withDefault(NumberParam, 1),\r\n        pageSize: withDefault(NumberParam, 48),\r\n        sortBy: withDefault(StringParam, ''),\r\n        searchTerm: withDefault(StringParam, ''),\r\n    }, ...props.initialData.filters.map((f) => ({\r\n        [f.name]: withDefault(ArrayParam, []),\r\n    }))));\r\n    const api = useApi({\r\n        initialData: props.initialData,\r\n        url: `${API_URLS.brandCardsListing}?${qs.stringify({\r\n            ...params,\r\n            cultureCode: props.cultureCode,\r\n            categoryGroups: props.categoryGroups,\r\n            docId: props.pageContext?.documentId,\r\n        })}`,\r\n    });\r\n    const [cards, setCards] = React.useState(props.initialData.items);\r\n    const [paramsCache, setParamsCache] = React.useState(undefined);\r\n    React.useEffect(() => {\r\n        if (api.data && api.status === 'complete') {\r\n            // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n            const { pageIndex, ...rest } = params;\r\n            // If the params (minus pageIndex) haven't changed, append the new results to the existing ones\r\n            if (isEqual(rest, paramsCache)) {\r\n                setCards([...cards, ...api.data.items]);\r\n            }\r\n            else {\r\n                setCards(api.data.items);\r\n                setParamsCache(rest);\r\n            }\r\n        }\r\n    }, [api.status]);\r\n    // Cache params (minus page index) to ensure we don't render old results\r\n    React.useEffect(() => {\r\n        if (paramsCache) {\r\n            return;\r\n        }\r\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\r\n        const { pageIndex, ...rest } = params;\r\n        setParamsCache(rest);\r\n    }, [params]);\r\n    const filters = React.useMemo(() => {\r\n        return api.data?.filters\r\n            .filter((f) => f.options.length > 0)\r\n            .map((f) => ({\r\n            ...f,\r\n            value: params[f.name],\r\n            onChange: (value) => {\r\n                if (value === '') {\r\n                    setParams({ [f.name]: [value], pageIndex: 1 }, 'pushIn');\r\n                }\r\n                else {\r\n                    const values = params[f.name];\r\n                    if (values.includes(value)) {\r\n                        setParams({ [f.name]: values.filter((v) => v !== value), pageIndex: 1 }, 'pushIn');\r\n                    }\r\n                    else {\r\n                        setParams({ [f.name]: [...values, value], pageIndex: 1 }, 'pushIn');\r\n                    }\r\n                }\r\n            },\r\n            hideMobile: false,\r\n            type: 'multi',\r\n        }));\r\n    }, [api.data?.filters]);\r\n    return (React.createElement(S.Container, { id: props.anchorId, ref: ref, flush: \"top\", translations: props.translations, \"data-animate\": inView },\r\n        React.createElement(Filters, { filters: filters, sortBy: props.sortBy\r\n                ? {\r\n                    ...props.sortBy,\r\n                    value: params.sortBy,\r\n                    onChange: (value) => setParams({ sortBy: value, pageIndex: 1 }, 'pushIn'),\r\n                }\r\n                : undefined, clearFilters: () => setParams({\r\n                searchTerm: undefined,\r\n                pageSize: params.pageSize,\r\n                sortBy: params.sortBy,\r\n                pageIndex: 1,\r\n            }, 'replace'), searchInput: props.searchInput\r\n                ? {\r\n                    ...props.searchInput,\r\n                    onSubmit: (value) => setParams({ searchTerm: value, pageIndex: 1 }, 'pushIn'),\r\n                    value: params.searchTerm,\r\n                }\r\n                : undefined, translations: props.translations }),\r\n        React.createElement(S.ResultsGrid, null, cards.length > 0 ? (React.createElement(React.Fragment, null, cards.map((item) => (React.createElement(BrandCard, { key: item.id, ...item, headingType: \"h3\", sizes: imageSizes, imageOnly: props.imageOnlyCards }))))) : (React.createElement(S.NoResults, null, props.translations?.['global.listings.noresults']))),\r\n        api?.data && cards.length > 0 ? (React.createElement(React.Fragment, null, api.data?.totalItems > cards.length && (React.createElement(Button, { buttonType: \"tertiary\", onClick: () => setParams({ pageIndex: params.pageIndex + 1 }, 'pushIn'), icon: api.status === 'loading' ? InterfaceIcon.Loader : InterfaceIcon.ArrowDown }, props.translations?.['global.listings.loadmore'])))) : null,\r\n        api.status === 'loading' && (React.createElement(LoadingIndicator, { label: props.translations?.['global.listings.loading'], layout: \"fixed\" }))));\r\n};\r\nexport default withQueryParams(withMotion(BrandCardListing));\r\n"],"names":["imageWrapperPreserveRatio","width","height","css","imageCoverContainer","relative","imageUrl","image","imageParams","params","rxy","focalPoint","top","left","undefined","heightratio","Math","round","widthratio","paramsString","queryString","src","getSrcs","upper","lower","steps","ratio","sizes","increment","Array","fill","map","_","index","ceil","getRange","sizesArr","size","split","srcSet","join","Container","styled","div","withConfig","displayName","componentId","brand","global","white","Image","transition","BrandColours","BlueDark","primary","blue","dark","light","PurpleDark","purple","ImageContainer","from","Device","Tablet","img","fluid","ContentWrapper","ButtonStyles","Heading","h3","fonts","lato","semiBold","Subheading","p","paragraphSmall","props","srcs","type","rmode","React","S","variant","cta","as","href","url","target","imageOnly","heading","alt","altText","loading","getSvgIcon","icon","headingType","subheading","FakeButton","buttonType","InterfaceIcon","ArrowRight","iconOnly","SectionWrapper","SectionWrapperStyles","Inner","FiltersStyles","TabletLarge","ResultsGrid","DesktopSmall","BrandCardStyles","NoResults","paragraphRegular","withQueryParams","withMotion","_props$pageContext","_props$pageContext2","_api$data2","_props$translations","_api$data3","_props$translations2","_props$translations3","ref","inView","useInView","rootMargin","pageContext","isEditMode","imageSizes","until","DesktopLarge","setParams","useQueryParams","Object","assign","pageIndex","withDefault","NumberParam","pageSize","sortBy","StringParam","searchTerm","initialData","filters","f","name","ArrayParam","api","useApi","API_URLS","brandCardsListing","qs","cultureCode","categoryGroups","docId","documentId","cards","setCards","items","paramsCache","setParamsCache","data","status","rest","isEqual","_api$data","filter","options","length","value","onChange","values","includes","v","hideMobile","id","anchorId","flush","translations","Filters","clearFilters","searchInput","onSubmit","item","BrandCard","key","imageOnlyCards","totalItems","Button","onClick","Loader","ArrowDown","LoadingIndicator","label","layout"],"sourceRoot":""}