{"version":3,"file":"EmblaNavigationButton.CP_x7q26.mjs","names":["useState","useCallback"],"sources":["https:/framerusercontent.com/modules/Puo3ZO7bCrj0OpyNBdCB/5OdSo1MgVCXB9wV73Ji1/EmblaNavigationButton.js"],"sourcesContent":["// Get Started: https://www.framer.com/developers\nimport{jsx as _jsx}from\"react/jsx-runtime\";import{addPropertyControls,ControlType,RenderTarget}from\"framer\";import{isValidElement,useState,useCallback,useEffect,cloneElement}from\"react\";import{useEmblaStore}from\"https://framer.com/m/emblaStore-y8Nj.js@4f4w4z5R8hLcqBAYxioy\";/**\n * @framerSupportedLayoutWidth any\n * @framerSupportedLayoutHeight any\n * @framerIntrinsicHeight 200\n * @framerIntrinsicWidth 200\n */export default function EmblaNavigationButton(props){const{carouselID,action,componentSlot,inactiveOpacity}=props;const[isDisabled,setIsDisabled]=useState(false);const isCanvas=RenderTarget.current()==RenderTarget.canvas;const component=componentSlot?.[0];const emblaApi=useEmblaStore(state=>state.emblaInstances.get(carouselID));const handleClick=useCallback(event=>{if(emblaApi){if(action==\"Next\"){emblaApi.scrollNext();}else{emblaApi.scrollPrev();}}else{console.warn(`Embla instance with ID \"${carouselID}\" not found.`);}},[emblaApi,action]);const onButtonAutoplayClick=useCallback(callback=>{const autoScroll=emblaApi?.plugins()?.autoScroll;const autoPlay=emblaApi?.plugins()?.autoplay;const autoMove=autoPlay||autoScroll;if(autoMove){const resetOrStop=autoMove.options.stopOnInteraction===false?autoMove.reset:autoMove.stop;resetOrStop();}callback();},[emblaApi]);const onSelect=useCallback(emblaApi=>{if(isCanvas)return;if(action==\"Next\"){setIsDisabled(!emblaApi.canScrollNext());}else{setIsDisabled(!emblaApi.canScrollPrev());}},[action,emblaApi]);useEffect(()=>{if(!emblaApi)return;onSelect(emblaApi);emblaApi.on(\"reInit\",onSelect).on(\"select\",onSelect);},[emblaApi,onSelect]);const styleObj={background:component?\"transparent\":\"lavender\",padding:component?0:\"8px 16px\",color:component?undefined:\"RebeccaPurple\",border:component?\"none\":\"1px solid RebeccaPurple\",opacity:isDisabled?inactiveOpacity:undefined,pointerEvents:isDisabled?\"none\":\"all\",userSelect:\"none\",cursor:isDisabled?\"not-allowed\":\"pointer\",width:\"100%\",height:\"100%\"};return /*#__PURE__*/_jsx(DivButton,{style:styleObj,onActivate:e=>{onButtonAutoplayClick(handleClick);},children:component?/*#__PURE__*/cloneElement(component,{...component.props,tabIndex:-1,style:{...component.props.style,maxWidth:\"100%\",maxHeight:\"100%\"}}):action});}const DivButton=({onActivate,onClick,children,...rest})=>/*#__PURE__*/_jsx(\"button\",{onClick:e=>{onClick?.(e);onActivate?.(e);},type:\"button\",...rest,children:children});function sanitizeInteractiveElement(element){if(!/*#__PURE__*/isValidElement(element))return element;const{type,props}=element;console.log(type,props,/*#__PURE__*/isValidElement(element));const isInteractive=type===\"a\"||type===\"button\"||typeof props.onClick===\"function\"||props.role===\"button\"||props.tabIndex===0;if(isInteractive){// Replace interactive element with span\nreturn /*#__PURE__*/_jsx(\"span\",{style:props.style,className:props.className,children:props.children});}// Recurse into children (in case of nested /