"use strict";
/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
(globalThis["webpackChunkast_block_templates"] = globalThis["webpackChunkast_block_templates"] || []).push([["src_components_reusable_single-block_lazy-single-block_js"],{

/***/ "./src/components/reusable/plugin-required-tooltip/plugin-required-tooltip.js":
/*!************************************************************************************!*\
  !*** ./src/components/reusable/plugin-required-tooltip/plugin-required-tooltip.js ***!
  \************************************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/i18n */ \"./node_modules/@wordpress/i18n/build-module/index.js\");\n/* harmony import */ var _tooltip_tooltip__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../tooltip/tooltip */ \"./src/components/reusable/tooltip/tooltip.js\");\n/* harmony import */ var _utils_plugin_requirements__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../utils/plugin-requirements */ \"./src/utils/plugin-requirements.js\");\n\n\n\n\n/**\n * Rich tooltip shown on the Insert button when the Spectra plugin required to\n * render a pattern's blocks is not installed / active on the site.\n *\n * Spectra requirement is derived client-side (no API call). Renders nothing\n * extra when the requirement is already satisfied or while the pattern is\n * locked behind a license (the locked \"Get Access\" tooltip takes priority).\n *\n * @since x.x.x\n * @param {Object}      props\n * @param {Object}      props.item     Pattern listing item (needs `spectra-ver`).\n * @param {boolean}     props.disabled Skip the tooltip (e.g. locked patterns).\n * @param {JSX.Element} props.children Insert button to wrap.\n * @return {JSX.Element} Wrapped children.\n */\nconst PluginRequiredTooltip = ({\n  item,\n  disabled = false,\n  children\n}) => {\n  const plugin = !disabled ? (0,_utils_plugin_requirements__WEBPACK_IMPORTED_MODULE_2__.getRequiredSpectraPlugin)(item) : null;\n  if (!plugin) {\n    return children;\n  }\n  const content = /*#__PURE__*/React.createElement(\"div\", {\n    className: \"text-left p-3 space-y-3 gt-plugin-required-tooltip\"\n  }, /*#__PURE__*/React.createElement(\"div\", {\n    className: \"space-y-2\"\n  }, /*#__PURE__*/React.createElement(\"h3\", {\n    className: \"m-0 text-base font-semibold text-white\"\n  }, plugin.name), /*#__PURE__*/React.createElement(\"p\", {\n    className: \"m-0 text-sm leading-relaxed text-white/90\"\n  }, plugin.description)), /*#__PURE__*/React.createElement(\"div\", {\n    className: \"space-y-1.5 text-sm\"\n  }, /*#__PURE__*/React.createElement(\"div\", {\n    className: \"flex gap-1.5\"\n  }, /*#__PURE__*/React.createElement(\"span\", {\n    className: \"shrink-0 text-white/60\"\n  }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)('Author', 'ast-block-templates'), \" :\"), /*#__PURE__*/React.createElement(\"span\", {\n    className: \"font-medium text-white\"\n  }, plugin.author)), /*#__PURE__*/React.createElement(\"div\", {\n    className: \"flex gap-1.5\"\n  }, /*#__PURE__*/React.createElement(\"span\", {\n    className: \"shrink-0 text-white/60\"\n  }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)('Source', 'ast-block-templates'), \" :\"), /*#__PURE__*/React.createElement(\"a\", {\n    href: plugin.wporg,\n    target: \"_blank\",\n    rel: \"noreferrer\",\n    className: \"font-medium text-accent-spectra underline\"\n  }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_0__.__)('View on WordPress.org', 'ast-block-templates')))));\n  return /*#__PURE__*/React.createElement(_tooltip_tooltip__WEBPACK_IMPORTED_MODULE_1__[\"default\"], {\n    content: content,\n    placement: \"top-start\",\n    maxWidth: 340,\n    appendTo: () => document.getElementById('ast-block-templates-modal-root') || document.body\n  }, children);\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PluginRequiredTooltip);\n\n//# sourceURL=webpack://ast-block-templates/./src/components/reusable/plugin-required-tooltip/plugin-required-tooltip.js?\n}");

/***/ }),

/***/ "./src/components/reusable/single-block/lazy-single-block.js":
/*!*******************************************************************!*\
  !*** ./src/components/reusable/single-block/lazy-single-block.js ***!
  \*******************************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _wordpress_compose__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/compose */ \"./node_modules/@wordpress/compose/build-module/higher-order/compose.js\");\n/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/i18n */ \"./node_modules/@wordpress/i18n/build-module/index.js\");\n/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/data */ \"./node_modules/@wordpress/data/build-module/components/use-dispatch/use-dispatch.js\");\n/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/data */ \"./node_modules/@wordpress/data/build-module/components/with-select/index.js\");\n/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/data */ \"./node_modules/@wordpress/data/build-module/components/use-select/index.js\");\n/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/element */ \"react\");\n/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _utils_helpers__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../utils/helpers */ \"./src/utils/helpers.js\");\n/* harmony import */ var _import_block_button_import_block_button__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../import-block-button/import-block-button */ \"./src/components/reusable/import-block-button/import-block-button.js\");\n/* harmony import */ var _favorite_single_block__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./favorite-single-block */ \"./src/components/reusable/single-block/favorite-single-block.js\");\n/* harmony import */ var _premium_badge_premium_badge__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../premium-badge/premium-badge */ \"./src/components/reusable/premium-badge/premium-badge.js\");\n/* harmony import */ var _utils_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./utils.js */ \"./src/components/reusable/single-block/utils.js\");\n/* harmony import */ var _utils_easing_functions__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../../utils/easing-functions */ \"./src/utils/easing-functions.js\");\n/* harmony import */ var _fade_in_out_fade_in_out_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../fade-in-out/fade-in-out.js */ \"./src/components/reusable/fade-in-out/fade-in-out.js\");\n/* harmony import */ var _license_license_popup__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../license/license-popup */ \"./src/components/reusable/license/license-popup.js\");\n/* harmony import */ var _tooltip_tooltip_js__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../tooltip/tooltip.js */ \"./src/components/reusable/tooltip/tooltip.js\");\n/* harmony import */ var _plugin_required_tooltip_plugin_required_tooltip__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../plugin-required-tooltip/plugin-required-tooltip */ \"./src/components/reusable/plugin-required-tooltip/plugin-required-tooltip.js\");\n/* harmony import */ var _hooks_use_license_js__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../../../hooks/use-license.js */ \"./src/hooks/use-license.js\");\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nconst {\n  spectra_common_styles,\n  is_rtl\n} = ast_block_template_vars;\nconst visibility = {\n  hidden: 'hidden',\n  visible: 'visible'\n};\nconst SingleBlock = ({\n  item,\n  content,\n  stylesheet,\n  astraCustomizer,\n  globalStylesheet,\n  colorPalette,\n  adaptiveMode,\n  dynamicContent,\n  selectedImages,\n  disableAi,\n  togglePopup,\n  email,\n  phone,\n  address,\n  onClickBlock,\n  isLocked\n}) => {\n  const thumbnailRef = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_5__.useRef)(null);\n  const thumbnailContainerRef = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_5__.useRef)(null);\n  const thumbnail_image_url = item['thumbnail-image-url'] || '';\n  const featured_image_url = item['featured-image-url'] || '';\n  const spectraPluginStatus = (0,_utils_helpers__WEBPACK_IMPORTED_MODULE_6__.getSpectraStatus)();\n  const {\n    licenseStatus\n  } = (0,_hooks_use_license_js__WEBPACK_IMPORTED_MODULE_16__[\"default\"])();\n  let imageCounter = 0;\n  let containerImageCounter = 0;\n  const {\n    importing\n  } = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_4__[\"default\"])(select => {\n    const {\n      getImporting\n    } = select('ast-block-templates');\n    return {\n      importing: getImporting()\n    };\n  });\n  const {\n    setImporting\n  } = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_2__[\"default\"])('ast-block-templates');\n  const [selfState, setSelfState] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_5__.useState)({\n    importing: false\n  });\n  const [imageThumbnailURL, setThumbnailImageURL] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_5__.useState)(`${ast_block_template_vars.uri}dist/placeholder_200_200.png`);\n  const [imageFeaturedlURL, setFeaturedImageURL] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_5__.useState)(`${ast_block_template_vars.uri}dist/placeholder_200_200.png`);\n  const replaceImages = (images, previewImages) => {\n    if (disableAi) {\n      return;\n    }\n    if (Object.keys(dynamicContent).length === 0 || !dynamicContent) {\n      return;\n    }\n    if (!previewImages?.length) {\n      return;\n    }\n    images?.forEach(function (image) {\n      if ((0,_utils_js__WEBPACK_IMPORTED_MODULE_10__.shouldSkipReplacement)(image.src)) {\n        return;\n      }\n      image.onload = () => {\n        // Skip if the image is already replaced.\n        const imageSrc = image.getAttribute('src') || '';\n        if (imageSrc.includes('unsplash') || imageSrc.includes('pexels') || imageSrc.includes('pixabay')) {\n          updateVisibility(image, visibility.visible);\n          return;\n        }\n        const imageUrl = previewImages[imageCounter];\n        if (undefined === imageUrl) {\n          updateVisibility(image, visibility.visible);\n          return;\n        }\n        if (!(imageUrl.url.includes('unsplash') || imageUrl.url.includes('pexels') || imageUrl.url.includes('pixabay'))) {\n          updateVisibility(image, visibility.visible);\n          return;\n        }\n        imageCounter++;\n        if (undefined === previewImages[imageCounter]) {\n          imageCounter = 0;\n        }\n        if ('PICTURE' === image.parentNode.nodeName) {\n          const sourceElements = image.parentNode.querySelectorAll('source');\n          sourceElements.forEach(source => {\n            source.setAttribute('srcset', imageUrl.optimized_url);\n          });\n          const imageElement = image.parentNode.querySelector('img');\n          imageElement.setAttribute('src', imageUrl.optimized_url);\n        } else {\n          const newImage = document.createElement('img');\n          newImage.src = imageUrl.optimized_url;\n          image.parentNode.replaceChild(newImage, image);\n        }\n        updateVisibility(image, visibility.visible);\n      };\n      image.onerror = () => {\n        updateVisibility(image, visibility.visible);\n      };\n    });\n  };\n  (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_5__.useEffect)(() => {\n    // This effect will run whenever the importing state changes\n    if (importing) {\n      // Disable click events on all blocks\n      document.querySelectorAll('.single-block').forEach(block => {\n        block.style.pointerEvents = 'none';\n      });\n    } else {\n      // Re-enable click events on all blocks\n      document.querySelectorAll('.single-block').forEach(block => {\n        block.style.pointerEvents = 'auto';\n      });\n    }\n  }, [importing]);\n  const replaceContactDetails = contentStr => {\n    const emailSrc = 'contact@example.com';\n    const phoneSrc = '202-555-0188';\n    const addressSrc = '2360 Hood Avenue, San Diego, CA, 92123';\n    if (email) {\n      contentStr = contentStr.replace(emailSrc, email);\n    }\n    if (phone) {\n      contentStr = contentStr.replace(phoneSrc, phone);\n    }\n    if (address) {\n      contentStr = contentStr.replace(addressSrc, address);\n    }\n    return contentStr;\n  };\n  const replaceContainerImages = (styleContent, images = []) => {\n    if (disableAi) {\n      return styleContent;\n    }\n    if (Object.keys(dynamicContent).length === 0 || !dynamicContent) {\n      return styleContent;\n    }\n    if (images && images.length === 0) {\n      return styleContent;\n    }\n    const backgroundImageRegex = /background-image\\s*:\\s*url\\(['\"]?([^'\")]+)['\"]?\\)/g;\n    const newStyleContent = styleContent.replace(backgroundImageRegex, function (match, imageUrl) {\n      if ((0,_utils_js__WEBPACK_IMPORTED_MODULE_10__.shouldSkipReplacement)(imageUrl)) {\n        return match;\n      }\n      if (!images[containerImageCounter]?.url) {\n        return '';\n      }\n      const currentImageUrl = images[containerImageCounter]?.url;\n      containerImageCounter++;\n      containerImageCounter %= images.length;\n      return 'background-image: url(\"' + currentImageUrl + '\")';\n    });\n    return newStyleContent;\n  };\n  (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_5__.useLayoutEffect)(() => {\n    let isMounted = true;\n    const previewImages = selectedImages;\n    const imgThumbnail = new Image();\n    imgThumbnail.src = thumbnail_image_url;\n    const imgFeatured = new Image();\n    imgFeatured.src = featured_image_url;\n    const thumbnailContainer = thumbnailContainerRef.current;\n    function handleThumbnailLoad(image, setURL) {\n      if (isMounted) {\n        image.onload = () => {\n          setURL(image.src);\n        };\n      }\n    }\n    handleThumbnailLoad(imgThumbnail, setThumbnailImageURL);\n    handleThumbnailLoad(imgFeatured, setFeaturedImageURL);\n    const astraWpEditorCss = document.getElementById('astra-wp-editor-styles-inline-css')?.textContent.replace(/:root/g, '.block-container').replace(/body/g, '.block-container'),\n      astraBlockEditorCss = document.getElementById('astra-block-editor-styles-inline-css')?.textContent.replace(/:root/g, '.block-container').replace(/body/g, '.block-container');\n    const wpStylesheet = ast_block_template_vars.wp_stylesheet;\n    let markup = ``;\n    if (stylesheet) {\n      stylesheet = replaceContainerImages(stylesheet, previewImages);\n      stylesheet = stylesheet?.replaceAll('--wp--preset--color--ast-global-color-', '--ast-global-color-');\n    }\n    if (astraCustomizer) {\n      // Replace color values in astraCustomizer based on activeBlockPalette and defaultBlockPalette\n      if (astraCustomizer && colorPalette && colorPalette.length > 0) {\n        // Loop through the color palette and replace corresponding color values\n        colorPalette.forEach((color, index) => {\n          const wpPresetColor = `var(--wp--preset--color--ast-global-color-${index})`;\n          const customColorVar = `var(--ast-global-color-${index})`;\n\n          // Replace both the preset and custom variable references\n          astraCustomizer = astraCustomizer.replaceAll(wpPresetColor, customColorVar);\n\n          // Also replace any raw color values that might exist\n          if (color) {\n            astraCustomizer = astraCustomizer.replaceAll(color, customColorVar);\n          }\n        });\n\n        // Replace Website demos customizer button color with the primary color in the color palette.\n        if (!adaptiveMode) {\n          astraCustomizer = astraCustomizer.replaceAll('#ffc300', colorPalette[0]);\n        }\n      }\n\n      // Apply the styles for v2 patterns as v3 patterns has higher specificity rules.\n      if (!adaptiveMode) {\n        astraCustomizer += `\n\t\t\t\t\t.wp-block-button .wp-block-button__link,\n\t\t\t\t\t.wp-block-search .wp-block-search__button,\n\t\t\t\t\t.st-block-container .wp-block-file .wp-block-file__button {\n\t\t\t\t\t\tborder-top-left-radius: 4px;\n\t\t\t\t\t\tborder-bottom-left-radius: 4px;\n\t\t\t\t\t\tborder-top-right-radius: 4px;\n\t\t\t\t\t\tborder-bottom-right-radius: 4px;\n\t\t\t\t\t}\n\t\t\t\t`;\n      }\n    }\n    markup += wpStylesheet ? `<style type=\"text/css\" id=\"wp-includes-styles\">${wpStylesheet}</style>` : '';\n    markup += astraCustomizer ? `<style type=\"text/css\" id=\"gt-astra-customizer\">${astraCustomizer}</style>` : '';\n    markup += `<style type=\"text/css\" id=\"gt-spectra-common-stylesheet\">${spectra_common_styles}</style>`;\n    markup = stylesheet ? `${markup} <style type=\"text/css\" id=\"gt-common-stylesheet\">${stylesheet}</style>` : markup;\n    if (globalStylesheet) {\n      markup = markup + `<style type=\"text/css\" id=\"gt-global-stylesheet\"> ${globalStylesheet} </style>`;\n    }\n    if (astraWpEditorCss) {\n      markup = markup + `<style type=\"text/css\" id=\"gt-wpeditor-css\" > ${astraWpEditorCss} </style>`;\n    }\n    if (astraBlockEditorCss) {\n      markup = markup + `<style type=\"text/css\" id=\"gt-blockeditor-css\"> ${astraBlockEditorCss} </style>`;\n    }\n\n    // Get common WordPress CSS variables from the main document\n    const rootStyles = getComputedStyle(document.documentElement); // eslint-disable-line no-undef\n    const wpCssVariables = {\n      '--wp--style--block-gap': rootStyles.getPropertyValue('--wp--style--block-gap').trim() || '24px'\n      // Easily extendable for other variables\n    };\n\n    // Generate CSS variable definitions\n    let cssVariableDefinitions = '';\n    Object.keys(wpCssVariables).forEach(variable => {\n      cssVariableDefinitions += `\t\t\t\t\t\t${variable}: ${wpCssVariables[variable]};\\n`;\n    });\n    if (thumbnailContainer && content) {\n      let shadow = thumbnailContainer.shadowRoot;\n      if (shadow === null) {\n        shadow = thumbnailContainer.attachShadow({\n          mode: 'open'\n        });\n      }\n      if (shadow === null) {\n        return;\n      }\n      let original_content = (0,_utils_helpers__WEBPACK_IMPORTED_MODULE_6__.decodeHTMLEntities)(content);\n      if (!disableAi) {\n        const dynamic_content = dynamicContent ?? [];\n        if (dynamic_content && Object.keys(dynamic_content)?.length > 0) {\n          Object.keys(dynamic_content).forEach(key => {\n            original_content = dynamic_content[key] !== null ? original_content.replace(key, dynamic_content[key]) : original_content;\n          });\n        }\n        if (!!dynamicContent && Object.keys(dynamicContent).length > 0) {\n          original_content = replaceContactDetails(original_content);\n          original_content = replaceGoogleMapLocation(original_content);\n        }\n      }\n\n      // Add CSS variable definitions to the shadow DOM\n      const cssVariables = `\n\t\t\t\t<style>\n\t\t\t\t\t.st-block-container {\n${cssVariableDefinitions}\t\t\t\t\t}\n\t\t\t\t</style>\n\t\t\t`;\n      shadow.innerHTML = cssVariables + markup + '<div class=\"st-block-container\">' + original_content + '</div>';\n\n      // shadow.innerHTML = markup + '<div class=\"st-block-container\">' + ast_block_template_vars.header_markup + original_content + ast_block_template_vars.footer_markup + '</div>';\n      colorPalette.forEach((color, index) => {\n        shadow?.host.style.setProperty(`--ast-global-color-${index}`, color);\n      });\n      const images = thumbnailContainer.shadowRoot.querySelectorAll('img');\n      if (shadow) {\n        images.forEach(imageItem => {\n          if ((0,_utils_js__WEBPACK_IMPORTED_MODULE_10__.shouldSkipReplacement)(imageItem.src) || disableAi || previewImages?.length === 0 || Object.keys(dynamicContent).length === 0 || !dynamicContent) {\n            return;\n          }\n          updateVisibility(imageItem, visibility.hidden);\n        });\n        updateScaling();\n        replaceImages(images, previewImages);\n      }\n    }\n    return () => {\n      isMounted = false;\n    };\n  }, [item, disableAi, dynamicContent, selectedImages]);\n  (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_5__.useEffect)(() => {\n    const resizeObserver = new ResizeObserver(updateScaling);\n    resizeObserver.observe(document.documentElement);\n\n    // Also observe the thumbnail container for size changes\n    const thumbnailContainer = thumbnailContainerRef.current;\n    if (thumbnailContainer) {\n      resizeObserver.observe(thumbnailContainer);\n    }\n    return () => {\n      if (!resizeObserver) {\n        return;\n      }\n      resizeObserver.disconnect();\n    };\n  }, []);\n  (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_5__.useEffect)(() => {\n    const astPopup = document.querySelector('#ast-block-templates-modal-wrap');\n    if (!astPopup) {\n      return;\n    }\n    const observer = new MutationObserver(updateScaling);\n    observer.observe(astPopup, {\n      childList: true,\n      attributes: true,\n      subtree: true\n    });\n    return () => {\n      if (!observer) {\n        return;\n      }\n      observer.disconnect();\n    };\n  }, []);\n  (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_5__.useEffect)(() => {\n    const thumbnailContainer = thumbnailContainerRef?.current;\n    if (thumbnailContainer) {\n      const shadow = thumbnailContainer.shadowRoot;\n      colorPalette.forEach((color, index) => {\n        if (shadow === null) {\n          return;\n        }\n        shadow.host.style.setProperty(`--ast-global-color-${index}`, color);\n      });\n    }\n  }, [colorPalette]);\n  function updateScaling() {\n    const thumbnail = thumbnailRef?.current;\n    const thumbnailContainer = thumbnailContainerRef?.current;\n    if (!thumbnail || !thumbnailContainer) {\n      return;\n    }\n    const width = thumbnail.parentNode.offsetWidth;\n    const scale = width / 1200;\n    const scaledHeight = scale * thumbnailContainer.offsetHeight;\n    thumbnail.style.transform = `scale(${scale})`;\n    thumbnail.style.height = `${scaledHeight}px`;\n\n    // Ensure the parent container can accommodate the scaled content\n    if (thumbnail.parentNode) {\n      thumbnail.parentNode.style.minHeight = `${scaledHeight}px`;\n    }\n  }\n  const updateVisibility = (element, value) => {\n    if (!element) {\n      return;\n    }\n    element.style.visibility = value;\n  };\n  const replaceGoogleMapLocation = (contentStr = '') => {\n    if (!address) {\n      return contentStr;\n    }\n    const regex = /(src=\"https:\\/\\/maps\\.google\\.com\\/maps\\?q=)([^&]+)(&z=\\d+&hl=en&t=m&output=embed&iwloc=near\")/g;\n    return contentStr.replace(regex, `$1${encodeURIComponent(address)}$3`);\n  };\n  let scrollTimeout = 0;\n  let startScroll = 0;\n  const scrollToPosition = (element, position, duration) => {\n    const start = element.scrollTop;\n    const change = position - start;\n    const increment = 20;\n    let currentTime = 0;\n    const animateScroll = function () {\n      currentTime += increment;\n      const val = _utils_easing_functions__WEBPACK_IMPORTED_MODULE_11__[\"default\"].linearTween(currentTime, start, change, duration);\n      element.scrollTop = val;\n      if (currentTime < duration) {\n        scrollTimeout = setTimeout(animateScroll, increment);\n      }\n    };\n    animateScroll();\n  };\n  const handleScrollDown = () => {\n    if (item.type !== 'page') {\n      return;\n    }\n    const scrollContainer = thumbnailContainerRef.current;\n    if (scrollTimeout) {\n      clearTimeout(scrollTimeout);\n    }\n    startScroll = setTimeout(() => {\n      scrollToPosition(scrollContainer, scrollContainer.scrollHeight, 4000);\n    }, 1000);\n  };\n  const handleScrollUp = () => {\n    if (startScroll) {\n      clearTimeout(startScroll);\n    }\n    const scrollContainer = thumbnailContainerRef.current;\n    if (scrollTimeout) {\n      clearTimeout(scrollTimeout);\n    }\n    scrollToPosition(scrollContainer, 0, 1500);\n  };\n  const getInsertButtonText = () => {\n    if (isLocked && licenseStatus !== 'active') {\n      return /*#__PURE__*/React.createElement(_tooltip_tooltip_js__WEBPACK_IMPORTED_MODULE_14__[\"default\"], {\n        content: !(0,_utils_helpers__WEBPACK_IMPORTED_MODULE_6__.getSpectraStatus)()?.active && (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Unlock all patterns and design kits with the Essentials or Business Toolkit package.', 'ast-block-templates'),\n        placement: \"top\"\n      }, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Get Access', 'ast-block-templates'));\n    }\n    return (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Insert', 'ast-block-templates');\n  };\n  const handleOnClickSingleBlock = (event, blockItem) => {\n    if (importing || !event || event.target.closest('.gt-single-block-action-btns') !== null || typeof onClickBlock !== 'function') {\n      return;\n    }\n    onClickBlock(blockItem);\n  };\n\n  // Reset the counter when the popup is closed.\n  (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_5__.useEffect)(() => {\n    if (!togglePopup) {\n      imageCounter = 0;\n      containerImageCounter = 0;\n    }\n  }, [togglePopup]);\n  const originClass = is_rtl ? 'origin-top-right' : 'origin-top-left';\n  return /*#__PURE__*/React.createElement(_fade_in_out_fade_in_out_js__WEBPACK_IMPORTED_MODULE_12__[\"default\"], {\n    className: (0,_utils_helpers__WEBPACK_IMPORTED_MODULE_6__.classNames)('w-full h-fit', importing ? 'importing' : '')\n  }, /*#__PURE__*/React.createElement(\"div\", {\n    className: (0,_utils_helpers__WEBPACK_IMPORTED_MODULE_6__.classNames)('hover:!min-h-[3.375rem] cursor-pointer relative border border-solid border-border-primary hover:border-accent-spectra transition duration-150 ease-in-out overflow-hidden group', importing && 'border-accent-spectra')\n  }, /*#__PURE__*/React.createElement(\"div\", {\n    className: `thumbnail left-0 m-0 min-h-[auto] overflow-visible text-left top-0 ${originClass} relative pointer-events-none`,\n    ref: thumbnailRef\n  }, /*#__PURE__*/React.createElement(\"div\", {\n    className: \"absolute w-[1200px] pointer-events-none max-h-none overflow-hidden\",\n    ref: thumbnailContainerRef\n  }, !content && /*#__PURE__*/React.createElement(\"img\", {\n    srcSet: `${imageFeaturedlURL}, ${imageThumbnailURL}`,\n    src: imageThumbnailURL,\n    alt: \"Preview\"\n  }), /*#__PURE__*/React.createElement(\"div\", {\n    className: \"preview\"\n  }, /*#__PURE__*/React.createElement(\"span\", {\n    className: \"ast-block-templates-icon ast-block-templates-icon-search\"\n  })))), /*#__PURE__*/React.createElement(\"div\", {\n    className: (0,_utils_helpers__WEBPACK_IMPORTED_MODULE_6__.classNames)('absolute inset-0 grid grid-cols-1 grid-rows-1 place-items-end', importing ? 'pointer-events-none' : ''),\n    onMouseEnter: handleScrollDown,\n    onMouseLeave: handleScrollUp,\n    onClick: e => handleOnClickSingleBlock(e, item),\n    role: \"button\",\n    tabIndex: \"0\",\n    onKeyDown: e => e.key === 'Enter' ? handleOnClickSingleBlock(e, item) : null\n  }, /*#__PURE__*/React.createElement(\"div\", {\n    className: (0,_utils_helpers__WEBPACK_IMPORTED_MODULE_6__.classNames)('gt-single-block-action-btns opacity-100 md:opacity-0 group-hover:opacity-100 w-full flex items-center justify-between px-3 py-2 backdrop-blur-sm bg-white/[0.85] shadow-action-buttons transition-all duration-150 ease-in-out', true === selfState.importing ? 'opacity-100' : '')\n  }, /*#__PURE__*/React.createElement(_plugin_required_tooltip_plugin_required_tooltip__WEBPACK_IMPORTED_MODULE_15__[\"default\"], {\n    item: item,\n    disabled: isLocked && licenseStatus !== 'active'\n  }, /*#__PURE__*/React.createElement(_import_block_button_import_block_button__WEBPACK_IMPORTED_MODULE_7__[\"default\"], {\n    title: getInsertButtonText(),\n    showIcon: spectraPluginStatus.active,\n    liveRequest: true,\n    item: item,\n    importing: selfState.importing,\n    onClick: event => {\n      // If block is locked, redirect to upgrade page\n      if (isLocked && licenseStatus !== 'active') {\n        event?.preventDefault();\n        event?.stopPropagation();\n        if ((0,_utils_helpers__WEBPACK_IMPORTED_MODULE_6__.getSpectraStatus)()?.active) {\n          _license_license_popup__WEBPACK_IMPORTED_MODULE_13__[\"default\"].show();\n          return false;\n        }\n        window.open(ast_block_template_vars.getProURL, '_blank');\n        return false;\n      }\n\n      // Pattern is not locked, proceed with import\n      setSelfState({\n        ...selfState,\n        importing: true\n      });\n      setImporting(true);\n\n      // Return undefined to allow import to proceed\n      return undefined;\n    },\n    onBlockImport: () => {\n      setSelfState({\n        ...selfState,\n        importing: false\n      });\n      setImporting(false);\n    },\n    onImportFail: () => {\n      setSelfState({\n        ...selfState,\n        importing: false\n      });\n      setImporting(false);\n    },\n    isLocked: isLocked\n  })), /*#__PURE__*/React.createElement(_favorite_single_block__WEBPACK_IMPORTED_MODULE_8__[\"default\"], {\n    item: item\n  }))), isLocked && /*#__PURE__*/React.createElement(\"div\", {\n    className: \"absolute top-2 right-2 z-10\"\n  }, /*#__PURE__*/React.createElement(_premium_badge_premium_badge__WEBPACK_IMPORTED_MODULE_9__[\"default\"], {\n    item: item\n  }))));\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((0,_wordpress_compose__WEBPACK_IMPORTED_MODULE_0__[\"default\"])((0,_wordpress_data__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(select => {\n  const {\n    getDisableAi,\n    getDisablePreview,\n    getTogglePopup\n  } = select('ast-block-templates');\n  return {\n    disableAi: getDisableAi(),\n    disablePreview: getDisablePreview(),\n    togglePopup: getTogglePopup()\n  };\n}))((0,_wordpress_element__WEBPACK_IMPORTED_MODULE_5__.memo)(SingleBlock)));\n\n//# sourceURL=webpack://ast-block-templates/./src/components/reusable/single-block/lazy-single-block.js?\n}");

/***/ })

}]);