{"version":3,"file":"FilterDOM.CMTWHit2.mjs","names":["useState"],"sources":["https:/framerusercontent.com/modules/v4vlZ21dGxhYdhHjps9h/91Qjuz1E2o8BVQJSL6LY/FilterDOM.js"],"sourcesContent":["// Welcome to Code in Framer\n// Get Started: https://www.framer.com/developers/\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import{useState,useEffect}from\"react\";import{addPropertyControls,ControlType}from\"framer\";/**\n * These annotations control how your component sizes\n * Learn more: https://www.framer.com/developers/components/auto-sizing\n *\n * @framerSupportedLayoutWidth auto\n * @framerSupportedLayoutHeight auto\n */export default function FilterDOM(props){const[value,setValue]=useState(\"\");const cardCount=4;const[isFocused,setIsFocused]=useState(false);function hideChildrenCardWhenExceedsTheCount(){const filterElements=document.querySelectorAll(\".filter-cms-content-resource\");filterElements.forEach(parentNode=>{if(!parentNode)return;const children=Array.from(parentNode.children).length===1?Array.from(parentNode.children[0].children).filter(child=>!child.classList.contains(\"no-results-message\")):Array.from(parentNode.children).filter(child=>!child.classList.contains(\"no-results-message\"));children.forEach((filterElement,index)=>{filterElement.style.display=index<cardCount?\"\":\"none\";});});}useEffect(()=>{if(props.hideElements)hideChildrenCardWhenExceedsTheCount();},[props.hideElements]);function filterElements(substring){const filterElements=document.querySelectorAll(\".filter-cms-content-resource\");filterElements.forEach(parentNode=>{if(!parentNode)return;let hasVisibleChild=false;let visibleCount=0// Track visible elements count\n;const children=(Array.from(parentNode.children).length===1?Array.from(parentNode.children[0].children):Array.from(parentNode.children)).filter(child=>!child.classList.contains(\"no-results-message\"))// Ignore previous \"No results\" div\n;children.forEach(filterElement=>{const searchTextContainers=filterElement.querySelectorAll(\".search-text-resource\");if(searchTextContainers.length===0){filterElement.style.display=\"none\";return;}const searchText=Array.from(searchTextContainers).map(container=>Array.from(container.children).map(child=>child.innerText.trim()).join(\" \")).join(\" \");if(searchText.toLowerCase().includes(substring.toLowerCase())&&visibleCount<cardCount){filterElement.style.display=\"\"// Make it visible\n;props.hideElements&&visibleCount++;hasVisibleChild=true;}else{filterElement.style.display=\"none\"// Hide extra elements or non-matching elements\n;}});let noResultsMessage=parentNode.querySelector(\".no-results-message\");if(!hasVisibleChild){if(!noResultsMessage){noResultsMessage=document.createElement(\"div\");noResultsMessage.style.cssText=`height: 324px; display: flex; justify-content: center; align-items: center; font-family: Inter, Inter Placeholder, sans-serif; grid-column: 1/-1; font-size: 16px; color: #616786;`;noResultsMessage.className=\"no-results-message\";noResultsMessage.textContent=\"No results found\";parentNode.appendChild(noResultsMessage);}}else if(noResultsMessage){noResultsMessage.remove();}});}function filterAndHideElements(substring){// Step 1: Get all elements with the class name 'filter-cms-content-resource'\nconst filterElements=document.querySelectorAll(\".filter-cms-content-resource>div\");console.log(\"All filters\",filterElements);console.log(\"category filter\",document.querySelectorAll(\".filter-cms-content-resource\"));Array.from(filterElements).forEach(filterElement=>{if(filterElement){// Step 3: Find all '.search-text-resource' elements inside the immediate child\nconst searchTextContainers=filterElement.querySelectorAll(\".search-text-resource\");if(searchTextContainers.length>0){// Collect text from all '.search-text-resource' elements and their children\nconst searchText=Array.from(searchTextContainers).map(container=>Array.from(container.children).map(child=>child.innerText.trim())// Extract text from each child\n    .join(\" \")// Combine text from each child\n).join(\" \")// Combine text from all '.search-text-resource' elements\n;// Step 4: Check if the combined text contains the specified substring\nif(!searchText.toLowerCase().includes(substring.toLowerCase())){// Hide the immediate child if the substring is not found\nfilterElement.style.display=\"none\";}else{// Ensure the immediate child is visible if the substring is found\nfilterElement.style.display=\"\"// Reset display to default\n;}}}});}// This is a React component containing an Example component\n// Replace <Example /> with your own code\nconst onValueChange=e=>{setValue(e.target.value);filterElements(e.target.value);};const containerStyle={display:\"flex\",fontSize:\"14px\",alignItems:\"center\",backgroundColor:isFocused&&props.changeActiveColor?\"#f6f7f8\":\"#ffffff\",borderRadius:\"100px\",padding:\"8px 12px\",border:\"1px solid #ddd\",width:\"fit-content\",height:\"36px\",color:\"#616786\",fontWeight:400,fontFamily:'Inter, \"Inter Placeholder\", sans-serif'};return /*#__PURE__*/_jsxs(\"div\",{style:containerStyle,children:[/*#__PURE__*/_jsx(\"input\",{placeholder:isFocused?\"\":\"Search our library...\",style:inputStyle,value:value,onChange:onValueChange,onFocus:()=>setIsFocused(true),onBlur:()=>setIsFocused(false)}),/*#__PURE__*/_jsx(\"span\",{style:iconStyle,children:/*#__PURE__*/_jsx(\"svg\",{xmlns:\"http://www.w3.org/2000/svg\",viewBox:\"0 0 256 256\",width:\"20\",height:\"20\",children:/*#__PURE__*/_jsx(\"path\",{d:\"M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z\",fill:\"#616786\"})})})]});}const inputStyle={border:\"none\",outline:\"none\",backgroundColor:\"#F6F7F8\",background:\"transparent\",fontSize:\"16px\",color:\"#616786\",padding:\"8px\",width:\"200px\",flex:1};const iconStyle={display:\"flex\",alignItems:\"center\",color:\"#2a2a5e\"};addPropertyControls(FilterDOM,{hideElements:{defaultValue:false,type:ControlType.Boolean,title:\"Hide Elements\"},changeActiveColor:{defaultValue:true,type:ControlType.Boolean,title:\"Change Active Color\"}});FilterDOM.displayName=\"Filter/DOM\";\nexport const __FramerMetadata__ = {\"exports\":{\"default\":{\"type\":\"reactComponent\",\"name\":\"FilterDOM\",\"slots\":[],\"annotations\":{\"framerSupportedLayoutWidth\":\"auto\",\"framerContractVersion\":\"1\",\"framerSupportedLayoutHeight\":\"auto\"}},\"__FramerMetadata__\":{\"type\":\"variable\"}}}\n//# sourceMappingURL=./FilterDOM.map"],"mappings":"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"}