1"use strict";(self.__LOADABLE_LOADED_CHUNKS__=self.__LOADABLE_LOADED_CHUNKS__||[]).push([[9302],{64107(a,e,r){r.d(e,{E:()=>u});var t=r(64180),l=r(77810),i=r(43497),o=r(26307);const n={small:i.AH` 2 font-size: var(--typography-label-x-small-font-size); 3 font-weight: var(--typography-label-x-small-font-weight); 4 line-height: var(--typography-label-x-small-line-height); 5 `,large:i.AH` 6 font-size: var(--typography-link-label-small-font-size); 7 font-weight: var(--typography-link-label-small-font-weight); 8 line-height: var(--typography-link-label-small-line-height); 9 `,responsive:i.AH` 10 font-size: var(--typography-link-label-small-font-size); 11 font-weight: var(--typography-link-label-small-font-weight); 12 line-height: var(--typography-link-label-small-line-height); 13 14 ${o.H.maxMobile} { 15 font-size: var(--typography-label-x-small-font-size); 16 font-weight: var(--typography-label-x-small-font-weight); 17 line-height: var(--typography-label-x-small-line-height); 18 } 19 `},d={default:i.AH` 20 border-radius: var(--space-corner-radius-small) 0 var(--space-corner-radius-small) 0; 21 `,rounded:i.AH` 22 border-radius: var(--border-radius-full); 23 `,square:i.AH` 24 border-radius: 0; 25 `,custom:i.AH` 26 /* No default styles for custom shape, will be overridden by custom properties */ 27 `,circle:i.AH` 28 border-radius: 50%; 29 padding: var(--space-small-8); 30 aspect-ratio: 1 / 1; 31 display: inline-flex; 32 align-items: center; 33 justify-content: center; 34 `},s={small:i.AH` 35 width: var(--space-medium-24); 36 height: var(--space-medium-24); 37 `,large:i.AH` 38 width: var(--space-large-46); 39 height: var(--space-large-46); 40 `},c={root:i.AH` 41 display: inline-flex; 42 align-items: center; 43 justify-content: center; 44 padding: var(--space-small-2) var(--space-small-6); 45 width: max-content; 46 letter-spacing: var(--space-small-1); 47 text-transform: uppercase; 48 text-align: center; 49 `,sale:i.AH` 50 background-color: var(--color-brand-sale); 51 color: var(--color-brand-on-sale); 52 `,brandDefault:i.AH` 53 background-color: var(--color-brand-secondary); 54 color: var(--color-brand-on-secondary); 55 `,brandSecondary:i.AH` 56 background-color: var(--color-brand-primary); 57 color: var(--color-brand-on-primary); 58 `,brandTertiary:i.AH` 59 background-color: var(--color-surface-surface-dimmest); 60 color: var(--color-surface-on-surface); 61 `},u=({children:a,className:e,variant:r="brandDefault",size:o="small",shape:u="default",dataTestIdPrefix:m="halfords",isAccessibleWithTabNavigation:v=!1,customBackgroundColor:g,customTextColor:p,customFontSize:h,customBorderRadius:f,customClipPath:b,secondaryBackgroundColor:y,ariaLabel:x})=>{const w=(({className:a="",variant:e="brandDefault",size:r="small",shape:t="default",customBackgroundColor:l,customTextColor:o,customFontSize:u,customBorderRadius:m,customClipPath:v,secondaryBackgroundColor:g})=>{const p=((a,e,r,t,l)=>{if(!(a||e||r||t||a&&l))return"";let o="";return a&&l?o=`background: linear-gradient(108.47deg, ${a}, ${l});`:a&&(o=`background: ${a};`),i.AH` 62 ${o} 63 ${e?`color: ${e};`:""} 64 ${r?`font-size: ${r};`:""} 65 ${t?`border-radius: ${t};`:""} 66 `})(l,o,u,m,g);return(0,i.cx)(c.root,l||o||l&&g?"":c[e],u?"":n[r],m||v?"":d[t],((a,e,r,t)=>"circle"!==a||r||t?"":"small"===e?s.small:s.large)(t,r,m,v),p,a)})({className:e,variant:r,size:o,shape:u,customBackgroundColor:g,customTextColor:p,customFontSize:h,customBorderRadius:f,customClipPath:b,secondaryBackgroundColor:y}),A={};return b&&(A.clipPath=b),l.createElement("span",(0,t.A)({className:w,"data-testid":`${m}-badge-${r}-${o}${"default"===u?"":`-${u}`}`},v?{tabIndex:0}:{},{style:Object.keys(A).length>0?A:void 0},x?{"aria-label":x,role:"status"}:{}),a)}},48557(a,e,r){r.d(e,{E:()=>t.E});var t=r(64107)},81448(a,e,r){r.d(e,{_:()=>d});var t=r(77810),l=r(43497);const i={layoutContainer:l.AH` 67 &:not(.fluid) { 68 margin-left: auto; 69 margin-right: auto; 70 max-width: var(--body-max-width); 71 } 72 `,fluid:l.AH` 73 width: 100%; 74 `,outer:l.AH` 75 width: 100%; 76 padding-block: var(--space-parent-vertical-padding); 77 78 &[data-fill='surface'] { 79 background-color: var(--color-surface-surface); 80 color: var(--color-surface-on-surface); 81 } 82 83 &[data-fill='surface-dim'] { 84 background-color: var(--color-surface-surface-dim); 85 color: var(--color-surface-on-surface); 86 } 87 88 &[data-fill='surface-dimmest'] { 89 background-color: var(--color-surface-surface-dimmest); 90 color: var(--color-surface-on-surface); 91 } 92 93 &[data-fill='primary'] { 94 background-color: var(--color-brand-primary); 95 color: var(--color-brand-on-primary); 96 } 97 98 // Override padding for accordion container items as we can't control LayoutContainer 99 .accordion-container-item-content & { 100 --space-parent-horizontal-padding: 0; 101 padding-block: var(--space-small-8); 102 } 103 `,verticalPaddingSnug:l.AH` 104 padding-block: var(--space-child-vertical-padding); 105 `,verticalPaddingNone:l.AH` 106 padding-block: 0; 107 `,inner:l.AH` 108 margin-left: auto; 109 margin-right: auto; 110 max-width: var(--body-max-width); 111 padding: 0; 112 `},o=({className:a=[],fluid:e=!1}={})=>(0,l.cx)("halfords-layout-container",i.layoutContainer,e&&[i.fluid,"halfords-layout-container-fluid"],a),n=({className:a=[],verticalPadding:e="default"}={})=>(0,l.cx)("halfords-layout-container-outer",i.outer,"snug"===e&&i.verticalPaddingSnug,"none"===e&&i.verticalPaddingNone,a),d=({fluid:a=!1,className:e,children:r,customStyle:d,dataTestIdPrefix:s,as:c,fullBleed:u=!1,fill:m,verticalPadding:v="default"})=>{const g=s?`${s}-layout-container`:"halfords-layout-container",p=c??"div";return u?t.createElement(p,{className:n({className:e,verticalPadding:v}),"data-testid":g,"data-fill":m,"data-full-bleed":"true",style:d},t.createElement("div",{className:(0,l.cx)("halfords-layout-container-inner",i.inner)},r)):t.createElement(p,{className:o({className:e,fluid:a}),"data-testid":g,style:d},r)}},74817(a,e,r){r.r(e),r.d(e,{ContentGridLifestylePageDesigner:()=>f,default:()=>f});var t=r(77810),l=r(81448),i=r(64180),o=r(43497),n=r(34407),d=r(28439),s=r(26307),c=r(48557),u=r(49542),m=r(28918);const v={root:o.AH` 113 position: relative; 114 overflow: hidden; 115 display: flex; 116 flex-direction: column; 117 justify-content: flex-end; 118 align-items: flex-start; 119 padding: var(--space-medium-16); 120 gap: var(--space-small-4); 121 aspect-ratio: 343 / 354; 122 123 border-radius: var(--space-corner-radius-default); 124 border: var(--space-stroke-default) solid var(--color-outline-outline-medium); 125 box-shadow: ${"\n var(--shadows-medium-shadow-1-x-position) var(--shadows-medium-shadow-1-y-position)\n var(--shadows-medium-shadow-1-blur) var(--shadows-medium-shadow-1-spread)\n var(--shadows-medium-shadow-1-color),\n var(--shadows-medium-shadow-2-x-position) var(--shadows-medium-shadow-2-y-position)\n var(--shadows-medium-shadow-2-blur) var(--shadows-medium-shadow-2-spread)\n var(--shadows-medium-shadow-2-color),\n var(--shadows-medium-shadow-3-x-position) var(--shadows-medium-shadow-3-y-position)\n var(--shadows-medium-shadow-3-blur) var(--shadows-medium-shadow-3-spread)\n var(--shadows-medium-shadow-3-color)\n"}; 126 background-color: var(--color-outline-outline-medium); 127 color: var(--color-brand-on-primary); 128 129 ${s.H.minTablet} { 130 border-radius: var(--space-corner-radius-large); 131 } 132 133 ${s.H.minDesktop} { 134 padding: var(--space-medium-24); 135 } 136 `,imageWrapper:o.AH` 137 position: absolute; 138 inset: 0; 139 z-index: 0; 140 aspect-ratio: auto; 141 `,imagePicture:o.AH` 142 width: 100%; 143 height: 100%; 144 145 img { 146 width: 100%; 147 height: 100%; 148 object-fit: cover; 149 display: block; 150 } 151 `,imageTag:o.AH` 152 width: 100%; 153 height: 100%; 154 object-fit: cover; 155 display: block; 156 `,scrim:o.AH` 157 position: absolute; 158 inset: 0; 159 background: linear-gradient(180deg, rgba(36, 36, 36, 0.14) 0%, rgba(36, 36, 36, 0.7) 100%); 160 pointer-events: none; 161 z-index: 1; 162 `,badgeContainer:o.AH` 163 position: absolute; 164 left: var(--space-medium-16); 165 top: var(--space-medium-16); 166 z-index: 2; 167 `,contentAreaRegular:o.AH` 168 position: relative; 169 z-index: 2; 170 display: flex; 171 flex-direction: column; 172 justify-content: flex-end; 173 align-items: flex-start; 174 gap: var(--space-medium-24); 175 flex: 1 0 0; 176 width: 100%; 177 `,contentAreaChevron:o.AH` 178 position: relative; 179 z-index: 2; 180 display: flex; 181 justify-content: flex-end; 182 align-items: flex-end; 183 gap: var(--space-medium-24); 184 flex: 1 0 0; 185 width: 100%; 186 `,textColumn:o.AH` 187 display: flex; 188 flex-direction: column; 189 align-items: flex-start; 190 gap: var(--space-small-4); 191 min-width: 0; 192 `,textColumnGrow:o.AH` 193 flex: 1 0 0; 194 `,chevronButton:o.AH` 195 && { 196 width: var(--space-large-40); 197 height: var(--space-large-40); 198 padding: 0; 199 min-width: unset; 200 flex-shrink: 0; 201 } 202 `,stretchedLink:o.AH` 203 position: static; 204 205 &::after { 206 content: ''; 207 position: absolute; 208 top: 0; 209 left: 0; 210 right: 0; 211 bottom: 0; 212 z-index: 3; 213 } 214 215 &::before { 216 display: none; 217 } 218 `},g=({srcMobile:a,srcTablet:e,srcDesktop:r,altText:l,badgeText:i,heading:g,subheading:p,cta:h,showOverlay:f=!0,className:b,dataTestId:y="content-grid-lifestyle-tile"})=>{const x=t.useId(),w=r||e||a||"",A=[...a?[{srcSet:a,media:`(max-width: ${s.f.sm-1}px)`}]:[],...e?[{srcSet:e,media:`(min-width: ${s.f.sm}px) and (max-width: ${s.f.md-1}px)`}]:[],...r?[{srcSet:r,media:`(min-width: ${s.f.md}px)`}]:[]],H="regular"===(null==h?void 0:h.variant)&&Boolean(h.label),k=Boolean(null==h?void 0:h.url),$=Boolean(g||p),N=a=>
218$?t.createElement("div",{id:x,className:(0,o.cx)(v.textColumn,a&&v.textColumnGrow)},g&&t.createElement(n.o,{variant:"headingSmall",as:"h3",dataTestIdPrefix:`${y}-heading`},g),p&&t.createElement(n.o,{variant:"bodyMedium",as:"p",dataTestIdPrefix:`${y}-subheading`},p)):null;return t.createElement("article",{className:(0,o.cx)(v.root,b),"data-testid":y},t.createElement(d._,{src:w,alt:l,sources:A,className:v.imageWrapper,pictureClassName:v.imagePicture,imageClassName:v.imageTag,imageErrorHandling:"product",loading:"lazy"}),f&&t.createElement("div",{className:v.scrim,"aria-hidden":"true"}),i&&t.createElement("div",{className:v.badgeContainer},t.createElement(c.E,{variant:"brandSecondary",size:"large",shape:"default",dataTestIdPrefix:`${y}`},i)),(()=>{if(!$&&!k)return null;const a=Boolean((null==h?void 0:h.stretched)&&(null==h?void 0:h.url));return H?t.createElement("div",{className:v.contentAreaRegular},N(!1),(null==h?void 0:h.url)&&(null==h?void 0:h.label)&&t.createElement(u.$,{variant:"brandSecondary",href:h.url,size:"small",className:(0,o.cx)(a&&v.stretchedLink),dataTestIdPrefix:`${y}-cta`,"aria-describedby":$?x:void 0},h.label)):t.createElement("div",{className:v.contentAreaChevron},N(!0),(null==h?void 0:h.url)&&t.createElement(m.K0,{variant:"secondary",format:"circle",buttonSize:"medium",iconSize:"small",href:h.url,icon:"chevron-right",className:(0,o.cx)(v.chevronButton,a&&v.stretchedLink),dataTestIdPrefix:`${y}-cta`,ariaLabel:g||"Read more"}))})())},p={container:o.AH` 219 display: flex; 220 flex-direction: column; 221 gap: var(--space-child-gap-large); 222 padding-inline: var(--space-parent-horizontal-padding); 223 `,grid:(a="4x1")=>o.AH` 224 display: grid; 225 grid-template-columns: 1fr; 226 gap: var(--space-child-gap-large); 227 list-style: none; 228 margin: 0; 229 padding: 0; 230 231 ${s.H.minTablet} { 232 grid-template-columns: repeat(2, 1fr); 233 } 234 235 ${s.H.minDesktop} { 236 grid-template-columns: ${"4x1"===a?"repeat(4, 1fr)":"repeat(2, 1fr)"}; 237 } 238 `,tileItem:(a="4x1")=>o.AH` 239 min-width: 0; 240 aspect-ratio: 343 / 354; 241 242 ${s.H.minTablet} { 243 aspect-ratio: 4 / 3; 244 } 245 246 ${s.H.minDesktop} { 247 ${"4x1"===a?"aspect-ratio: 7 / 6;":"aspect-ratio: 5 / 2;"} 248 } 249 `,tileInGrid:o.AH` 250 height: 100%; 251 aspect-ratio: auto; 252 `,tileBorderDark:o.AH` 253 border-color: var(--color-outline-outline-default); 254 background-color: var(--color-outline-outline-default); 255 `},h=({heading:a,grid:e="4x1",fill:r,tiles:l=[],className:d,dataTestId:s="content-grid-lifestyle"})=>{if(!l.length)return null;const c="primary"===r;return t.createElement("div",{className:(0,o.cx)(p.container,d),"data-testid":s},a&&t.createElement(n.o,{as:"h2",variant:"headingMedium",dataTestIdPrefix:`${s}-heading`},a),t.createElement("ul",{className:p.grid(e),"data-testid":`${s}-grid`},l.map((a,r)=>{var l;return t.createElement("li",{key:(null===(l=a.cta)||void 0===l?void 0:l.url)||r,className:p.tileItem(e)},t.createElement(g,(0,i.A)({},a,{className:(0,o.cx)(p.tileInGrid,c&&p.tileBorderDark),dataTestId:`${s}-tile-${r}`})))})))},f=({heading:a,fill:e="surface",grid:r="4x1",regions:i,className:o,dataTestId:n="content-grid-lifestyle"})=>{var d;const s=((null==i||null===(d=i[0])||void 0===d?void 0:d.components)??[]).filter(a=>{var e,r,t;return"commerce_assets.contentGridLifestyleTile"===(null==a?void 0:a.typeId)&&((null==a||null===(e=a.data)||void 0===e?void 0:e.srcMobile)||(null==a||null===(r=a.data)||void 0===r?void 0:r.srcTablet)||(null==a||null===(t=a.data)||void 0===t?void 0:t.srcDesktop))}).map(a=>{var e,r,t,l,i,o,n,d,s,c,u,m;return{srcMobile:null==a||null===(e=a.data)||void 0===e?void 0:e.srcMobile,srcTablet:null==a||null===(r=a.data)||void 0===r?void 0:r.srcTablet,srcDesktop:null==a||null===(t=a.data)||void 0===t?void 0:t.srcDesktop,altText:(null==a||null===(l=a.data)||void 0===l?void 0:l.altText)??"",badgeText:null==a||null===(i=a.data)||void 0===i?void 0:i.badgeText,heading:null==a||null===(o=a.data)||void 0===o?void 0:o.heading,subheading:null==a||null===(n=a.data)||void 0===n?void 0:n.subheading,showOverlay:null==a||null===(d=a.data)||void 0===d?void 0:d.showOverlay,cta:null!=a&&null!==(s=a.data)&&void 0!==s&&s.ctaUrl?{label:null==a||null===(c=a.data)||void 0===c?void 0:c.ctaLabel,url:a.data.ctaUrl,variant:(null==a||null===(u=a.data)||void 0===u?void 0:u.ctaVariant)??"chevron",stretched:(null==a||null===(m=a.data)||void 0===m?void 0:m.ctaStretched)??!0}:void 0}});return t.createElement(l._,{as:"section",fullBleed:!0,fill:e,dataTestIdPrefix:n},t.createElement(h,{heading:a,grid:r,tiles:s,fill:e,className:o,dataTestId:n}))}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.