{"version":3,"file":"SliderEdgeArrows.B8ndhlA5.mjs","names":["useRef","useState","useCallback","_Fragment"],"sources":["https:/framerusercontent.com/modules/JwMXAAXlk5KtfqfEiEVw/BXn8dgAw5Y7FojyNmeTd/SliderEdgeArrows.js"],"sourcesContent":["// Edge arrows for a Framer overflow stack, matching the catalogue rows in\n// StartDesigning exactly.\n//\n// The catalogue puts .sd-row-arrow inside .sd-row-body at left/right 8px, and\n// .sd-row-body is the scroller's content column. The Framer frame that carries\n// these rows has 20px horizontal padding, so the arrow lands 28px from the\n// window edge. To match, measure the target's CONTENT box, not its border box:\n// 8px inside a padding box would sit 20px too far out.\n//\n// The buttons are portalled into the scroller's own parent, so this component\n// can sit anywhere in the section without touching the layout.\nimport{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";import{useCallback,useEffect,useRef,useState}from\"react\";import{createPortal}from\"react-dom\";function Chevron({back=false,size=16}){return /*#__PURE__*/_jsx(\"svg\",{width:size,height:size,viewBox:\"0 0 24 24\",fill:\"none\",stroke:\"currentColor\",strokeWidth:\"2.25\",strokeLinecap:\"round\",strokeLinejoin:\"round\",\"aria-hidden\":\"true\",children:/*#__PURE__*/_jsx(\"path\",{d:back?\"M14 5l-7 7 7 7\":\"M10 5l7 7-7 7\"})});}/**\n * Scroll arrows overlaid on the edges of a horizontal slider.\n *\n * @framerIntrinsicWidth 1\n * @framerIntrinsicHeight 1\n * @framerSupportedLayoutWidth fixed\n * @framerSupportedLayoutHeight fixed\n * @framerDisableUnlink\n */export default function SliderEdgeArrows(props){const{scopeName=\"section_slider_features\",targetName=\"Design Studio Feature Slider\",size=36,inset=8,top=42,buttonColor=\"#ffffff\",iconColor=\"#1d1d1f\",backLabel=\"Scroll back\",nextLabel=\"Scroll forward\",placement=\"edges\"}=props;const isStatic=useIsStaticRenderer();const rootRef=useRef(null);const scrollerRef=useRef(null);const hostRef=useRef(null);const[host,setHost]=useState(null);const[edges,setEdges]=useState({back:false,next:false});const[box,setBox]=useState({left:0,top:0,width:0,height:0});// The content column of the scroller, in the host's coordinate space.\nconst measure=useCallback(()=>{const el=scrollerRef.current;const parent=hostRef.current;if(!el||!parent)return;const max=el.scrollWidth-el.clientWidth;setEdges({back:el.scrollLeft>4,next:max>4&&el.scrollLeft<max-4});const style=getComputedStyle(el);const padLeft=parseFloat(style.paddingLeft)||0;const padRight=parseFloat(style.paddingRight)||0;const padTop=parseFloat(style.paddingTop)||0;const padBottom=parseFloat(style.paddingBottom)||0;const target=el.getBoundingClientRect();const frame=parent.getBoundingClientRect();setBox({left:target.left-frame.left+parent.scrollLeft+padLeft,top:target.top-frame.top+parent.scrollTop+padTop,width:Math.max(0,target.width-padLeft-padRight),height:Math.max(0,target.height-padTop-padBottom)});},[]);useEffect(()=>{if(isStatic||typeof document===\"undefined\")return;const root=rootRef.current;if(!root)return;// Stay inside our own breakpoint copy: the layer name is not unique.\nconst pick=()=>{const scope=scopeName?root.closest(`[data-framer-name=\"${scopeName}\"]`):null;const within=scope??document;return within.querySelector(`[data-framer-name=\"${targetName}\"]`);};let cleanup;let retry=0;let retryTimer=0;let frame1=0;let frame2=0;const attach=()=>{const el=pick();if(!el||!el.parentElement){if(retry++<40)retryTimer=window.setTimeout(attach,100);return;}const parent=el.parentElement;if(getComputedStyle(parent).position===\"static\"){parent.style.position=\"relative\";}scrollerRef.current=el;hostRef.current=parent;setHost(parent);measure();// Layout keeps moving after mount: fonts, images, a hidden tab that\n// only gets a real size later. Measure again instead of trusting the\n// first pass.\nframe1=requestAnimationFrame(()=>{measure();frame2=requestAnimationFrame(measure);});el.addEventListener(\"scroll\",measure,{passive:true});const observer=typeof ResizeObserver!==\"undefined\"?new ResizeObserver(measure):null;observer?.observe(el);observer?.observe(parent);cleanup=()=>{el.removeEventListener(\"scroll\",measure);observer?.disconnect();};};attach();window.addEventListener(\"resize\",measure);window.addEventListener(\"load\",measure);return()=>{window.clearTimeout(retryTimer);cancelAnimationFrame(frame1);cancelAnimationFrame(frame2);window.removeEventListener(\"resize\",measure);window.removeEventListener(\"load\",measure);cleanup?.();};},[isStatic,scopeName,targetName,measure]);function scroll(direction){const el=scrollerRef.current;if(!el)return;el.scrollBy({left:direction*el.clientWidth*.9,behavior:window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches?\"auto\":\"smooth\"});}const overlayStyle={position:\"absolute\",left:box.left,top:box.top,width:box.width,height:box.height,pointerEvents:\"none\",zIndex:5};const buttonStyle={position:\"absolute\",top:`${top}%`,width:size,height:size,borderRadius:\"50%\",background:buttonColor,border:\"1px solid rgba(0,0,0,.06)\",boxShadow:\"0 6px 16px rgba(0,0,0,.14)\",display:\"grid\",placeItems:\"center\",transform:\"translateY(-50%)\",color:iconColor,cursor:\"pointer\",padding:0,pointerEvents:\"auto\"};const ready=box.width>size*2;// Bottom right: the same pair ProductCollection and StartDesigning draw\n// under their rows, so every slider on a page shares one control.\nconst bottom=placement===\"bottom\";const rowStyle={position:\"absolute\",left:box.left,top:box.top+box.height+14,width:box.width,display:\"flex\",justifyContent:\"flex-end\",gap:8,zIndex:5};const pairButton=enabled=>({width:36,height:36,borderRadius:\"50%\",border:0,padding:0,background:\"rgba(0,0,0,.06)\",color:\"rgba(0,0,0,.88)\",display:\"grid\",placeItems:\"center\",cursor:enabled?\"pointer\":\"default\",opacity:enabled?1:.35});return /*#__PURE__*/_jsxs(_Fragment,{children:[/*#__PURE__*/_jsx(\"div\",{ref:rootRef,style:{width:1,height:1,pointerEvents:\"none\"},\"aria-hidden\":\"true\"}),host&&ready&&bottom&&(edges.back||edges.next)&&/*#__PURE__*/createPortal(/*#__PURE__*/_jsxs(\"div\",{style:rowStyle,children:[/*#__PURE__*/_jsx(\"button\",{type:\"button\",\"aria-label\":backLabel,disabled:!edges.back,onClick:()=>scroll(-1),style:pairButton(edges.back),children:/*#__PURE__*/_jsx(Chevron,{back:true,size:16})}),/*#__PURE__*/_jsx(\"button\",{type:\"button\",\"aria-label\":nextLabel,disabled:!edges.next,onClick:()=>scroll(1),style:pairButton(edges.next),children:/*#__PURE__*/_jsx(Chevron,{size:16})})]}),host),host&&ready&&!bottom&&/*#__PURE__*/createPortal(/*#__PURE__*/_jsxs(\"div\",{style:overlayStyle,children:[edges.back&&/*#__PURE__*/_jsx(\"button\",{type:\"button\",\"aria-label\":backLabel,onClick:()=>scroll(-1),style:{...buttonStyle,left:inset},children:/*#__PURE__*/_jsx(Chevron,{back:true,size:Math.round(size*.44)})}),edges.next&&/*#__PURE__*/_jsx(\"button\",{type:\"button\",\"aria-label\":nextLabel,onClick:()=>scroll(1),style:{...buttonStyle,right:inset},children:/*#__PURE__*/_jsx(Chevron,{size:Math.round(size*.44)})})]}),host)]});}addPropertyControls(SliderEdgeArrows,{placement:{type:ControlType.Enum,title:\"Placement\",options:[\"edges\",\"bottom\"],optionTitles:[\"Edges\",\"Bottom right\"],defaultValue:\"edges\",displaySegmentedControl:true},scopeName:{type:ControlType.String,title:\"Section\",description:\"Layer name of the section the slider lives in.\",defaultValue:\"section_slider_features\",preventLocalization:true},targetName:{type:ControlType.String,title:\"Slider\",description:\"Layer name of the scrolling stack.\",defaultValue:\"Design Studio Feature Slider\",preventLocalization:true},size:{type:ControlType.Number,title:\"Size\",defaultValue:36,min:24,max:64,step:2,unit:\"px\"},inset:{type:ControlType.Number,title:\"Inset\",description:\"From the content column, like the catalogue rows.\",defaultValue:8,min:0,max:64,step:1,unit:\"px\"},top:{type:ControlType.Number,title:\"Vertical\",defaultValue:42,min:0,max:100,step:1,unit:\"%\"},buttonColor:{type:ControlType.Color,title:\"Button\",defaultValue:\"#ffffff\"},iconColor:{type:ControlType.Color,title:\"Icon\",defaultValue:\"#1d1d1f\"},backLabel:{type:ControlType.String,title:\"Back label\",defaultValue:\"Scroll back\"},nextLabel:{type:ControlType.String,title:\"Forward label\",defaultValue:\"Scroll forward\"}});\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"SliderEdgeArrows\",\"slots\":[],\"annotations\":{\"framerContractVersion\":\"1\",\"framerIntrinsicWidth\":\"1\",\"framerDisableUnlink\":\"\",\"framerSupportedLayoutHeight\":\"fixed\",\"framerIntrinsicHeight\":\"1\",\"framerSupportedLayoutWidth\":\"fixed\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./SliderEdgeArrows.map"],"mappings":"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"}