https://www.aramcotaleed.com/dist/client/assets/AramcoQafilah_HeroCarousel-DBQhkNnf.js

1import{r,j as s}from"./vendor-f5S74Hzf.js";import{q as he,cg as ge,cj as be,ck as ve,A as y,x as se,y as xe,cl as ye,cm as je,cn as we,co as ae,cp as Se,cd as oe}from"./common-CHQtHwBh.js";import{B as i,a3 as ke,F as re,H as Te,k as Ce,T as Ie}from"./@chakra-ui/react-gJ6NaqAj.js";import{A as ze,N as Ee,g as Re,f as $e}from"./swiper-BojwEeCi.js";import"./html-react-parser-xE6q2Esb.js";import"./style-to-js-B6NqiOWy.js";import"./react-markdown-Bs7M-Au_.js";import"./devlop-Cl3hj7Sz.js";import"./micromark-util-decode-numeric-character-reference-CNs1qBpV.js";import"./micromark-util-decode-string-strjl-tx.js";import"./decode-named-character-reference-C3-224fz.js";import"./micromark-util-normalize-identifier-C9ANKk3v.js";import"./micromark-util-subtokenize-BC4BSQ9J.js";import"./micromark-util-chunked-DrRIdSP-.js";import"./micromark-util-combine-extensions-Bka6Sc1c.js";import"./micromark-factory-space-DRnmu9Gw.js";import"./micromark-util-character-hRuAkC1j.js";import"./micromark-core-commonmark-DkU5eqHe.js";import"./micromark-util-classify-character-DzqK33dx.js";import"./micromark-util-resolve-all-PQCKh0dx.js";import"./micromark-factory-destination-Cii3Ukc3.js";import"./micromark-factory-label-pk4cmpdi.js";import"./micromark-factory-title-cwTJpkI9.js";import"./micromark-factory-whitespace-DbSIwM2c.js";import"./mdast-util-to-string-C_aolqmU.js";import"./micromark-util-sanitize-uri-CaPxsR5P.js";import"./unist-util-visit-8_a2MF5S.js";import"./unist-util-visit-parents-B1S0AetN.js";import"./unist-util-is-BPZGFiMU.js";import"./remark-gfm-DBMNSnBZ.js";import"./polished-VDK7He2T.js";import"./@babel/runtime-Bt6Ne3b9.js";import"./tailwind-merge-CPcsbTWB.js";import"./react-calendar-DqgCvrlm.js";import"./hoist-non-react-statics-BjaAnAum.js";import"./use-sidecar-BuciW2qi.js";import"./tslib-De9GV7Vy.js";import"./use-callback-ref-DBc0-MCP.js";import"./react-remove-scroll-BxC6qjtr.js";import"./react-remove-scroll-bar-DSTyrTd8.js";import"./react-style-singleton-76azCXWd.js";import"./aria-hidden-DQ5UC2Eg.js";const yt=({fields:d,rendering:ie})=>{const[o,ne]=r.useState(null),[a,le]=r.useState(0),[j,de]=r.useState(0),[u,w]=r.useState(!1),[m,S]=r.useState(0),n=r.useRef(null),g=r.useMemo(()=>(d==null?void 0:d.selectArticles)||[],[d==null?void 0:d.selectArticles]),k=4,[b,me]=r.useState(new Set),[ue]=he();r.useEffect(()=>{g.forEach(e=>{var l,p,f;const t=(f=(p=(l=e==null?void 0:e.fields)==null?void 0:l.image)==null?void 0:p.value)==null?void 0:f.src;if(t){const c=new Image;c.onload=()=>{me(v=>new Set([...v,t]))},c.src=t}})},[g]);const pe=e=>{o==null||o.slideToLoop(e)},fe=r.useCallback(e=>{const t=(1-e)*100;de(t)},[]),ce=r.useCallback(e=>a>e?100:a===e?j:0,[a,j]);return r.useEffect(()=>{u?m<200&&S(m+k):m>=0&&S(m-k)},[u,m]),r.useEffect(()=>{u?o==null||o.autoplay.pause():o==null||o.autoplay.resume()},[u,o]),s.jsx(i,{"data-rendering":"HeroCarousel",pos:"relative",children:s.jsxs(ge,{children:[s.jsx(be,{onSwiper:ne,modules:[ze,Ee,Re,$e],slidesPerView:1,keyboard:{enabled:!0},loop:!0,speed:500,effect:"fade",autoplay:{delay:4e3,disableOnInteraction:!1},onTransitionStart:()=>{le((o==null?void 0:o.realIndex)??0)},onAutoplayTimeLeft:(e,t,l)=>fe(l),children:g.map((e,t)=>{var l,p,f,c,v,T,C,I,z,E,R,$,B,A,H,M,P,_,L,Y,N,F,W,V,D,O,q,G,U,J,K,Q,X,Z,ee;return s.jsx(ve,{className:"carousel-slide",overflow:"hidden",children:s.jsx(i,{h:"100vh",w:"100vw",pos:"relative",display:"flex",alignItems:"end",children:s.jsxs(i,{pos:"absolute",h:"100%",w:"100%",...a===t&&{_before:{content:'""',position:"absolute",top:["25%",null,null,0],left:["50%",null,null,0],width:["200%",null,null,"150%"],height:["200%",null,null,"150%"],background:"radial-gradient( black 1px, transparent) 0 / 0.7em 0.7em, linear-gradient(90deg, #bbb 20%, #fff 50%, #bbb 100%)",opacity:b.has(((f=(p=(l=e==null?void 0:e.fields)==null?void 0:l.image)==null?void 0:p.value)==null?void 0:f.src)??"")?1:0,zIndex:1,transform:"rotate(-10deg) translate(-25%, -25%)",mixBlendMode:"multiply",backgroundBlendMode:"multiply",transition:"opacity 0.5s ease-in-out",filter:"contrast(100)"},_after:{content:'""',position:"absolute",top:"0",left:"0",width:"100%",height:"100%",background:`url("${(T=(v=(c=e==null?void 0:e.fields)==null?void 0:c.image)==null?void 0:v.value)==null?void 0:T.src}&cw=${y.default.lg.cw}&ch=${y.default.lg.ch}

1") top center / cover`,zIndex:1,mixBlendMode:"darken",opacity:b.has(((z=(I=(C=e==null?void 0:e.fields)==null?void 0:C.image)==null?void 0:I.value)==null?void 0:z.src)??"")?1:0,transition:"opacity 0.5s ease-in-out"}},children:[s.jsx(i,{pos:"absolute",h:"100%",w:"100%",bg:se.overlays.generic,zIndex:3}),a===t&&s.jsx(i,{sx:{"--bubble-size":"1.8em","--bubble-contrast":"100","--before-pattern":"radial-gradient(transparent 1px, #777) 0 / var(--bubble-size) var(--bubble-size)","--before-map":`radial-gradient(circle at ${n.current?n.current.offsetLeft+n.current.offsetWidth/2:0}px ${n.current?n.current.offsetTop+n.current.offsetHeight/2:0}px, black 0%, white ${m}%)`,position:"absolute",top:"50%",left:"50%",width:"100%",height:"100%",zIndex:1,transform:"translate(-50%, -50%)",mixBlendMode:"lighten",_before:{content:'""',position:"absolute",top:"0",left:"0",width:"100%",height:"100%",background:"var(--before-pattern), var(--before-map)",backgroundBlendMode:"difference",filter:"contrast(var(--bubble-contrast))",zIndex:1,mixBlendMode:"lighten"}}}),s.jsx(xe.AdvanceImage,{fields:e.fields,itemId:ie.dataSource,fieldName:"image",alt:(($=(R=(E=e.fields)==null?void 0:E.image)==null?void 0:R.value)==null?void 0:$.alt)??((A=(B=e.fields)==null?void 0:B.title)==null?void 0:A.value)??"",srcSet:[y.default.lg],sx:{height:"100%",width:"100%",objectFit:"cover",objectPosition:"top center",opacity:b.has(((P=(M=(H=e==null?void 0:e.fields)==null?void 0:H.image)==null?void 0:M.value)==null?void 0:P.src)??"")?1:0,transition:"opacity 0.5s ease-in-out",visibility:b.has(((Y=(L=(_=e==null?void 0:e.fields)==null?void 0:_.image)==null?void 0:L.value)==null?void 0:Y.src)??"")?"visible":"hidden"}}),s.jsx(i,{pos:"absolute",top:0,left:0,right:0,bottom:0,zIndex:10,height:"100%",width:"100%",display:"flex",alignItems:"end",children:s.jsxs(ke,{marginBottom:"100px",children:[e.fields.categoryTags?s.jsx(re,{mb:"md",opacity:a===t?1:0,transform:a===t?"translateY(0)":"translateY(50px)",transition:a===t?"all 0.35s ease-in-out 0.35s":"transform 0.35s ease-in 1s, opacity 0.35s ease-in",gap:2,flexWrap:"wrap",children:e.fields.categoryTags.map((h,x)=>{var te;return s.jsx(ye,{variant:"light",children:(te=h.fields.title)==null?void 0:te.value},x)})}):null,s.jsx(i,{opacity:a===t?1:0,transform:a===t?"translateY(0)":"translateY(40px)",transition:a===t?"all 0.45s ease-in-out 0.35s":"transform 0.45s ease-in 1s, opacity 0.45s ease-in",w:["90%",null,"100%","50%"],children:s.jsx(Te,{as:"h2",size:"h2",color:"primary.white",children:(N=e.fields.title)==null?void 0:N.value})}),s.jsx(i,{opacity:a===t?1:0,transform:a===t?"translateY(0)":"translateY(10px)",transition:a===t?"all 0.45s ease-in-out 0.55s":"transform 0.45s ease-in 1s, opacity 0.45s ease-in",mt:"md",children:s.jsx(i,{children:s.jsx(je,{id:`hero_carousel_${e.id}`,params:[(W=(F=e.fields)==null?void 0:F.issueReference)!=null&&W.fields?{id:(D=(V=e.fields)==null?void 0:V.issueReference)==null?void 0:D.id,name:(G=(q=(O=e.fields)==null?void 0:O.issueReference)==null?void 0:q.fields.title)==null?void 0:G.value,url:(J=(U=e.fields)==null?void 0:U.issueReference)==null?void 0:J.url}:void 0,...((K=e.fields.contributors)==null?void 0:K.map(h=>{var x;return{id:h.id,name:(x=h.fields.fullName)==null?void 0:x.value,url:h.url}}))??[],(Q=e.fields.date)!=null&&Q.value?we(e.fields.date.value):void 0,(X=e.fields.readTime)!=null&&X.value?ae(Number(e.fields.readTime.value)):void 0],isDarkBgTheme:!0})})}),s.jsx(i,{ref:n,mt:"lg",display:"inline-block",opacity:a===t?1:0,transform:a===t?"translateY(0)":"translateY(10px)",transition:a===t?"all 0.45s ease-in-out 0.85s":"transform 0.45s ease-in 1s, opacity 0.45s ease-in",children:s.jsx(Se,{fontFamily:"heading",variant:"light",size:"md",to:e.url,onMouseEnter:()=>w(!0),onMouseLeave:()=>

1w(!1),children:(Z=e.fields.readTime)!=null&&Z.value?ae((ee=e.fields.readTime)==null?void 0:ee.value):""})})]})})]})})},`hero_carousel_${e.id}`)})}),o&&s.jsx(re,{justifyContent:"center",mt:4,bg:"transparent",gap:"sm",pos:"absolute",bottom:"3rem",w:"100%",zIndex:1,children:g.map((e,t)=>s.jsxs(Ce,{onClick:()=>pe(t),cursor:"pointer",maxW:oe("74px"),variant:"ghost",p:0,m:0,flexGrow:1,"aria-labelledby":`hero-carousel-page-${t+1}`,minHeight:"44px",minWidth:"44px",display:"flex",justifyContent:"center",alignItems:"center",children:[s.jsx(Ie,{id:`hero-carousel-page-${t+1}`,hidden:!0,children:`${ue("button.carousel.page")} ${t+1}`}),s.jsx(i,{w:"100%",h:oe("2px"),bg:a>t?"white":se.tints.white[30],overflow:"hidden",children:s.jsx(i,{h:"100%",bg:"white",width:`${ce(t)}%`,sx:{animationPlayState:u?"paused":"running"}})})]},t))})]})})};export{yt as default};