/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// define getter function for harmony exports
/******/ 	__webpack_require__.d = function(exports, name, getter) {
/******/ 		if(!__webpack_require__.o(exports, name)) {
/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
/******/ 		}
/******/ 	};
/******/
/******/ 	// define __esModule on exports
/******/ 	__webpack_require__.r = function(exports) {
/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 		}
/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
/******/ 	};
/******/
/******/ 	// create a fake namespace object
/******/ 	// mode & 1: value is a module id, require it
/******/ 	// mode & 2: merge all properties of value into the ns
/******/ 	// mode & 4: return value when already ns object
/******/ 	// mode & 8|1: behave like require
/******/ 	__webpack_require__.t = function(value, mode) {
/******/ 		if(mode & 1) value = __webpack_require__(value);
/******/ 		if(mode & 8) return value;
/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
/******/ 		var ns = Object.create(null);
/******/ 		__webpack_require__.r(ns);
/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
/******/ 		return ns;
/******/ 	};
/******/
/******/ 	// getDefaultExport function for compatibility with non-harmony modules
/******/ 	__webpack_require__.n = function(module) {
/******/ 		var getter = module && module.__esModule ?
/******/ 			function getDefault() { return module['default']; } :
/******/ 			function getModuleExports() { return module; };
/******/ 		__webpack_require__.d(getter, 'a', getter);
/******/ 		return getter;
/******/ 	};
/******/
/******/ 	// Object.prototype.hasOwnProperty.call
/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(__webpack_require__.s = "./src/js/edit/image-masking.js");
/******/ })
/************************************************************************/
/******/ ({

/***/ "./src/js/edit/image-masking.js":
/*!**************************************!*\
  !*** ./src/js/edit/image-masking.js ***!
  \**************************************/
/*! no static exports found */
/***/ (function(module, exports) {

eval("var ImageMaskingHandler = function ImageMaskingHandler($scope, $) {\n  var _window$elementor;\n  // Global storage for animation instances to prevent duplicates\n  window.eaelImageMaskingAnimations = window.eaelImageMaskingAnimations || {};\n  function get_clip_path(shape) {\n    var shapes = {\n      'bavel': 'polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%)',\n      'rabbet': 'polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%)',\n      'chevron-left': 'polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%)',\n      'chevron-right': 'polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%)',\n      'star': 'polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)'\n    };\n    return shapes[shape] || '';\n  }\n\n  // Function to clean up existing animations for an element\n  function cleanupExistingAnimations(elementId) {\n    var _window$eaelImageMask;\n    // Check if GSAP is available before attempting cleanup\n    if (typeof gsap === 'undefined') {\n      return;\n    }\n    if ((_window$eaelImageMask = window.eaelImageMaskingAnimations) !== null && _window$eaelImageMask !== void 0 && _window$eaelImageMask[elementId]) {\n      var existingAnimation = window.eaelImageMaskingAnimations[elementId];\n\n      // Kill existing GSAP timeline(s)\n      if (existingAnimation !== null && existingAnimation !== void 0 && existingAnimation.timeline) {\n        // Handle single timeline (old format)\n        existingAnimation.timeline.kill();\n      } else if (existingAnimation !== null && existingAnimation !== void 0 && existingAnimation.timelines) {\n        // Handle multiple timelines (new format)\n        existingAnimation.timelines.forEach(function (timeline) {\n          if (timeline) {\n            timeline.kill();\n          }\n        });\n      }\n\n      // Remove animation reference\n      delete window.eaelImageMaskingAnimations[elementId];\n    }\n\n    // Also clean up any orphaned GSAP animations on the element\n    var element = $(\".elementor-element-\".concat(elementId));\n    if (element !== null && element !== void 0 && element.length) {\n      gsap.killTweensOf(element.find('.eael-clip-path'));\n      gsap.killTweensOf(element.find('.clip-path'));\n    }\n  }\n  function renderImageMasking(model) {\n    var _model$attributes, _model$attributes2;\n    var settings = model === null || model === void 0 || (_model$attributes = model.attributes) === null || _model$attributes === void 0 || (_model$attributes = _model$attributes.settings) === null || _model$attributes === void 0 ? void 0 : _model$attributes.attributes;\n    var elementId = model === null || model === void 0 || (_model$attributes2 = model.attributes) === null || _model$attributes2 === void 0 ? void 0 : _model$attributes2.id,\n      element = $(\".elementor-element-\".concat(elementId));\n    var styleId = 'eael-image-masking-' + elementId;\n    $scope = element;\n\n    // Clean up existing animations before creating new ones\n    cleanupExistingAnimations(elementId);\n\n    // Remove existing style if present\n    $('#' + styleId).remove();\n    if ('yes' === (settings === null || settings === void 0 ? void 0 : settings.eael_enable_image_masking)) {\n      var style = '';\n      if ('clip' === (settings === null || settings === void 0 ? void 0 : settings.eael_image_masking_type)) {\n        var clipPath = '';\n        if ('yes' === (settings === null || settings === void 0 ? void 0 : settings.eael_image_masking_enable_custom_clip_path)) {\n          clipPath = settings === null || settings === void 0 ? void 0 : settings.eael_image_masking_custom_clip_path;\n          clipPath = clipPath.replace('clip-path: ', '');\n        } else {\n          clipPath = get_clip_path(settings === null || settings === void 0 ? void 0 : settings.eael_image_masking_clip_path);\n        }\n        if (clipPath) {\n          style += '.elementor-element-' + elementId + ' img {clip-path: ' + clipPath + ';}';\n        }\n        if ('yes' === (settings === null || settings === void 0 ? void 0 : settings.eael_image_masking_hover_effect)) {\n          var hoverClipPath = '';\n          if ('yes' === (settings === null || settings === void 0 ? void 0 : settings.eael_image_masking_enable_custom_clip_path_hover)) {\n            hoverClipPath = settings === null || settings === void 0 ? void 0 : settings.eael_image_masking_custom_clip_path_hover;\n            hoverClipPath = hoverClipPath.replace('clip-path: ', '');\n          } else {\n            hoverClipPath = get_clip_path(settings === null || settings === void 0 ? void 0 : settings.eael_image_masking_clip_path_hover);\n          }\n          if (hoverClipPath) {\n            var hoverSelector = settings === null || settings === void 0 ? void 0 : settings.eael_image_masking_hover_selector;\n            if (hoverSelector) {\n              hoverSelector = ' ' + hoverSelector.trim();\n            }\n            style += '.elementor-element-' + elementId + hoverSelector + ':hover img {clip-path: ' + hoverClipPath + ';}';\n          }\n        }\n      } else if ('image' === (settings === null || settings === void 0 ? void 0 : settings.eael_image_masking_type)) {\n        var svg_url = settings === null || settings === void 0 ? void 0 : settings.eael_image_masking_svg_url;\n        var image = settings === null || settings === void 0 ? void 0 : settings.eael_image_masking_svg;\n        var mask_url = '';\n        if ('upload' !== image) {\n          mask_url = svg_url + image + '.svg';\n        } else if ('upload' === image) {\n          var _image = settings === null || settings === void 0 ? void 0 : settings.eael_image_masking_image;\n          mask_url = _image === null || _image === void 0 ? void 0 : _image.url;\n        }\n        if (mask_url) {\n          style += '.elementor-element-' + elementId + ' img {mask-image: url(' + mask_url + '); -webkit-mask-image: url(' + mask_url + ');}';\n        }\n        if ('yes' === (settings === null || settings === void 0 ? void 0 : settings.eael_image_masking_hover_effect)) {\n          var hover_mask_url = '';\n          var hoverImage = settings === null || settings === void 0 ? void 0 : settings.eael_image_masking_svg_hover;\n          if ('upload' !== hoverImage) {\n            var _svg_url = settings === null || settings === void 0 ? void 0 : settings.eael_image_masking_svg_url;\n            hover_mask_url = _svg_url + hoverImage + '.svg';\n          } else if ('upload' === hoverImage) {\n            var _settings$eael_image_;\n            hover_mask_url = settings === null || settings === void 0 || (_settings$eael_image_ = settings.eael_image_masking_image_hover) === null || _settings$eael_image_ === void 0 ? void 0 : _settings$eael_image_.url;\n          }\n          if (hover_mask_url) {\n            var hover_selector = settings === null || settings === void 0 ? void 0 : settings.eael_image_masking_hover_selector;\n            if (hover_selector) {\n              hover_selector = ' ' + hover_selector.trim();\n            }\n            style += '.elementor-element-' + elementId + hover_selector + ':hover img {mask-image: url(' + hover_mask_url + '); -webkit-mask-image: url(' + hover_mask_url + ');}';\n          }\n        }\n      } else if ('morphing' === (settings === null || settings === void 0 ? void 0 : settings.eael_image_masking_type)) {\n        // Verify masking is enabled before applying effects\n        if ('yes' !== (settings === null || settings === void 0 ? void 0 : settings.eael_enable_image_masking)) {\n          // console.warn('EAEL Image Masking: Masking is not enabled for element', elementId);\n          return;\n        }\n        var morphingType = settings === null || settings === void 0 ? void 0 : settings.eael_morphing_type;\n        var $images = $(\".elementor-element-\".concat(elementId, \" img\")); // Target only images within this specific element\n        if (settings !== null && settings !== void 0 && settings.eael_image_morphing_exclude_selectors) {\n          $images = $images.not(settings === null || settings === void 0 ? void 0 : settings.eael_image_morphing_exclude_selectors);\n        }\n        if ('clip-path' === morphingType) {\n          var _settings$eael_image_2, _settings$eael_image_4;\n          var clipPaths = settings === null || settings === void 0 ? void 0 : settings.eael_clip_paths;\n          var paths = [];\n          clipPaths.forEach(function (clipPath) {\n            var _clipPath$attributes;\n            paths.push(clipPath === null || clipPath === void 0 || (_clipPath$attributes = clipPath.attributes) === null || _clipPath$attributes === void 0 ? void 0 : _clipPath$attributes.eael_clip_path.replace('clip-path: ', '').replace(';', '').replace('\\n', ''));\n          });\n          var animationData = {\n            polygonShapes: paths\n          };\n          if (settings !== null && settings !== void 0 && (_settings$eael_image_2 = settings.eael_image_morphing_duration) !== null && _settings$eael_image_2 !== void 0 && _settings$eael_image_2.size) {\n            var _settings$eael_image_3;\n            animationData.duration = settings === null || settings === void 0 || (_settings$eael_image_3 = settings.eael_image_morphing_duration) === null || _settings$eael_image_3 === void 0 ? void 0 : _settings$eael_image_3.size;\n          }\n          if (settings !== null && settings !== void 0 && settings.eael_image_morphing_loop) {\n            animationData.loop = 'yes' === (settings === null || settings === void 0 ? void 0 : settings.eael_image_morphing_loop);\n          }\n          if (settings !== null && settings !== void 0 && settings.eael_image_morphing_ease) {\n            animationData.ease = settings === null || settings === void 0 ? void 0 : settings.eael_image_morphing_ease;\n          }\n          if (settings !== null && settings !== void 0 && settings.eael_image_morphing_rotation) {\n            animationData.rotation = 'yes' === (settings === null || settings === void 0 ? void 0 : settings.eael_image_morphing_rotation);\n          }\n          if (settings !== null && settings !== void 0 && (_settings$eael_image_4 = settings.eael_image_morphing_rotation_speed) !== null && _settings$eael_image_4 !== void 0 && _settings$eael_image_4.size) {\n            var _settings$eael_image_5;\n            animationData.rotationSpeed = settings === null || settings === void 0 || (_settings$eael_image_5 = settings.eael_image_morphing_rotation_speed) === null || _settings$eael_image_5 === void 0 ? void 0 : _settings$eael_image_5.size;\n          }\n          if (animationData && typeof PolygonMorphingAnimation !== 'undefined' && $images.length > 0) {\n            // Create animation instance for each image individually\n            $images.each(function (_, imgElement) {\n              new PolygonMorphingAnimation($(imgElement), animationData);\n            });\n          }\n        } else if ('svg' === (settings === null || settings === void 0 ? void 0 : settings.eael_morphing_type)) {\n          var _settings$eael_image_6;\n          // Verify SVG morphing is enabled before applying effects\n          if ('yes' !== (settings === null || settings === void 0 ? void 0 : settings.eael_enable_image_masking) || 'morphing' !== (settings === null || settings === void 0 ? void 0 : settings.eael_image_masking_type)) {\n            // console.warn('EAEL Image Masking: SVG morphing is not properly enabled for element', elementId);\n            return;\n          }\n\n          // Check if animation already exists for this element - prevent duplicates early\n          if (window.eaelImageMaskingAnimations[elementId]) {\n            return; // Animation already running, prevent duplicate\n          }\n\n          // Mark element as being processed to prevent race conditions\n          window.eaelImageMaskingAnimations[elementId] = {\n            timeline: null,\n            type: 'svg-morphing',\n            processing: true\n          };\n          var svgPathsType = settings === null || settings === void 0 ? void 0 : settings.eael_svg_paths;\n          if (!svgPathsType) {\n            // console.warn('EAEL Image Masking: No SVG paths type found for morphing');\n            return;\n          }\n          var svg_html_wrapper = $('#eael-svg-items-' + elementId);\n          var duration = (settings === null || settings === void 0 || (_settings$eael_image_6 = settings.eael_image_morphing_duration) === null || _settings$eael_image_6 === void 0 ? void 0 : _settings$eael_image_6.size) || 6;\n          var loop = 'yes' === (settings === null || settings === void 0 ? void 0 : settings.eael_image_morphing_loop);\n\n          // Process SVG paths asynchronously\n          var svgPromises = [];\n          var svgContents = [];\n          if ('custom' === svgPathsType) {\n            // Handle custom SVG paths (from uploaded files or custom code)\n            var customSvgPaths = settings === null || settings === void 0 ? void 0 : settings.eael_svg_paths_custom;\n            if (!customSvgPaths || !customSvgPaths.length) {\n              // console.warn('EAEL Image Masking: No custom SVG paths found for morphing asfdasfd');\n              return;\n            }\n            customSvgPaths.forEach(function (svgPath, index) {\n              var _svgPath$attributes, _svgPath$attributes3;\n              if ('code' === (svgPath === null || svgPath === void 0 || (_svgPath$attributes = svgPath.attributes) === null || _svgPath$attributes === void 0 ? void 0 : _svgPath$attributes.eael_svg_file_type)) {\n                var _svgPath$attributes2;\n                // Handle inline SVG code\n                svgContents[index] = DOMPurify.sanitize(svgPath === null || svgPath === void 0 || (_svgPath$attributes2 = svgPath.attributes) === null || _svgPath$attributes2 === void 0 ? void 0 : _svgPath$attributes2.eael_svg_code);\n                svgPromises.push(Promise.resolve());\n              } else if ('file' === (svgPath === null || svgPath === void 0 || (_svgPath$attributes3 = svgPath.attributes) === null || _svgPath$attributes3 === void 0 ? void 0 : _svgPath$attributes3.eael_svg_file_type)) {\n                var _svgPath$attributes4;\n                // Handle SVG file URL - check if URL exists\n                var svgFileUrl = svgPath === null || svgPath === void 0 || (_svgPath$attributes4 = svgPath.attributes) === null || _svgPath$attributes4 === void 0 || (_svgPath$attributes4 = _svgPath$attributes4.eael_svg_file) === null || _svgPath$attributes4 === void 0 ? void 0 : _svgPath$attributes4.url;\n                if (!svgFileUrl) {\n                  // console.warn('EAEL Image Masking: SVG file URL not found for path at index:', index);\n                  svgContents[index] = '';\n                  svgPromises.push(Promise.resolve());\n                  return;\n                }\n\n                // Fetch SVG file content\n                var fetchPromise = fetch(svgFileUrl).then(function (response) {\n                  if (!response.ok) {\n                    throw new Error(\"HTTP error! status: \".concat(response.status));\n                  }\n                  return response.text();\n                }).then(function (data) {\n                  svgContents[index] = DOMPurify.sanitize(data);\n                })[\"catch\"](function (error) {\n                  // console.error('EAEL Image Masking: Error fetching SVG file:', error);\n                  svgContents[index] = '';\n                });\n                svgPromises.push(fetchPromise);\n              }\n            });\n          } else {\n            // Handle predefined SVG paths (blob, brush, dimond)\n            // Use the pro plugin URL for morphing assets (matches PHP implementation)\n            var svgPathUrl = (settings === null || settings === void 0 ? void 0 : settings.eael_pro_image_masking_svg_url) + svgPathsType + '-';\n            var _loop = function _loop(i) {\n              var fetchPromise = fetch(svgPathUrl + i + '.svg').then(function (response) {\n                if (!response.ok) {\n                  throw new Error(\"HTTP error! status: \".concat(response.status));\n                }\n                return response.text();\n              }).then(function (data) {\n                svgContents[i - 1] = DOMPurify.sanitize(data);\n              })[\"catch\"](function (error) {\n                // console.error('EAEL Image Masking: Error fetching predefined SVG file:', error);\n                svgContents[i - 1] = '';\n              });\n              svgPromises.push(fetchPromise);\n            };\n            for (var i = 1; i <= 5; i++) {\n              _loop(i);\n            }\n          }\n\n          // Wait for all SVG content to be loaded before proceeding\n          Promise.all(svgPromises).then(function () {\n            var _svg_items$first, _svg_items$first2, _svg_items$first3;\n            // Build the complete SVG HTML\n            var svg_html = '<div id=\"eael-svg-items-' + elementId + '\" style=\"display: none;\">';\n            svgContents.forEach(function (content) {\n              if (content) {\n                svg_html += content;\n              }\n            });\n            svg_html += '</div>';\n            if (svg_html_wrapper.length > 0) {\n              svg_html_wrapper.remove();\n            }\n\n            // Clean up any existing SVG masking elements to prevent accumulation\n            $scope.find('.eael-image-masking-container').each(function () {\n              var $container = $(this);\n              var $img = $container.find('img');\n              var $svg = $container.find('svg');\n              if ($img.length && $svg.length) {\n                // Restore original image visibility and remove SVG\n                $img.css('visibility', 'visible');\n                $svg.remove();\n                // Unwrap the container if it only contains the image\n                if ($container.children().length === 1) {\n                  $img.unwrap();\n                }\n              }\n            });\n            element.append(svg_html);\n            var svg_items = $('#eael-svg-items-' + elementId).find('svg');\n            if (!svg_items.length) {\n              // console.warn('EAEL Image Masking: No SVG items found after loading');\n              return;\n            }\n            var viewBox = (_svg_items$first = svg_items.first()) === null || _svg_items$first === void 0 ? void 0 : _svg_items$first.attr('viewBox');\n            var defaultPath = (_svg_items$first2 = svg_items.first()) === null || _svg_items$first2 === void 0 || (_svg_items$first2 = _svg_items$first2.find('path').first()) === null || _svg_items$first2 === void 0 ? void 0 : _svg_items$first2.attr('d');\n            var transform = ((_svg_items$first3 = svg_items.first()) === null || _svg_items$first3 === void 0 || (_svg_items$first3 = _svg_items$first3.find('path').first()) === null || _svg_items$first3 === void 0 ? void 0 : _svg_items$first3.attr('transform')) || \"\";\n            if (!viewBox || !defaultPath) {\n              // console.warn('EAEL Image Masking: Missing viewBox or defaultPath from SVG');\n              return;\n            }\n\n            // Add CSS for proper centering - inject styles directly\n            if (!$('#eael-morphing-center-fix').length) {\n              $('head').append(\"\\n                                <style id=\\\"eael-morphing-center-fix\\\">\\n                                    .eael-morphing-enabled clipPath,\\n                                    .eael-morphing-enabled .clip-path {\\n                                        transform-origin: center !important;\\n                                        transform-box: view-box !important;\\n                                    }\\n                                    .eael-morphing-enabled svg {\\n                                        overflow: visible !important;\\n                                    }\\n                                </style>\\n                            \");\n            }\n            $images.each(function (index, image) {\n              var _image$parent;\n              image = $(image);\n              var image_src = image.attr('src');\n              var uniqueId = elementId + '-' + index;\n\n              // Wrap image in container for proper positioning\n              if (!((_image$parent = image.parent()) !== null && _image$parent !== void 0 && _image$parent.hasClass('eael-image-masking-container'))) {\n                image.wrap('<div class=\"eael-image-masking-container eael-morphing-enabled\" style=\"position: relative; display: inline-block; overflow: hidden;\"></div>');\n              }\n\n              // Hide original image and add SVG\n              image.css('visibility', 'hidden');\n              var initialTransform = svg_items.first().find('path').first().attr('transform') || '';\n              image.after(createClippedSVG(image_src, uniqueId, viewBox, defaultPath, image[0], initialTransform));\n            });\n\n            // Check if GSAP and required plugins are available\n            if (typeof gsap === 'undefined') {\n              // console.warn('EAEL Image Masking: GSAP is not available for morphing animation');\n              return;\n            }\n\n            // Check if morphSVG plugin is available\n            if (typeof gsap.plugins === 'undefined' || typeof gsap.plugins.morphSVG === 'undefined') {\n              // console.warn('EAEL Image Masking: GSAP morphSVG plugin is not available for animation');\n              return;\n            }\n\n            // Initialize proper centering for all clip paths\n            var clipPaths = $scope.find('.clip-path');\n\n            // Set initial transform origin for all clip paths\n            clipPaths.css({\n              'transform-origin': 'center !important',\n              'transform-box': 'view-box !important'\n            });\n\n            // Store all timelines for cleanup\n            var imageTimelines = [];\n            svg_items.first().appendTo(svg_items.parent());\n            svg_items = $('#eael-svg-items-' + elementId).find('svg');\n\n            // Create separate timeline for each image to ensure independent animations\n            $images.each(function (imageIndex, imageElement) {\n              var imageId = elementId + '-' + imageIndex;\n              // Use global selector instead of $scope to ensure we find the clip-path element\n              var imageClipPath = $(\"#clip-path-\".concat(imageId, \" .clip-path\"));\n              if (!imageClipPath || imageClipPath.length === 0) {\n                // console.warn(`EAEL Image Masking: No clip-path element found for image ${imageIndex} with ID clip-path-${imageId}`);\n                return;\n              }\n\n              // console.log(`Found clip-path element for image ${imageIndex}:`, imageClipPath);\n\n              // Calculate offset for this image to prevent timeline conflicts\n              var imageOffset = imageIndex * 0.1; // Small offset between images\n\n              // Create independent timeline for this specific image with offset\n              var imageTimeline = gsap.timeline({\n                repeat: loop ? -1 : 0,\n                yoyo: false,\n                repeatDelay: 0.001,\n                delay: imageOffset,\n                // Add delay to prevent conflicts\n                onComplete: function onComplete() {\n                  // console.log(`Animation completed for image ${imageIndex}`);\n                }\n              });\n\n              // Store timeline reference\n              imageTimelines.push(imageTimeline);\n\n              // Start animation immediately like frontend - no delays\n              svg_items.each(function (shapeIndex, element) {\n                var _$svg$find, _svg_items;\n                var $svg = $(element);\n                var $path = $svg === null || $svg === void 0 || (_$svg$find = $svg.find('path')) === null || _$svg$find === void 0 ? void 0 : _$svg$find.first();\n\n                // Check if path element exists\n                if (!$path || $path.length === 0) {\n                  // console.warn('EAEL Image Masking: path element not found in SVG at index:', shapeIndex);\n                  return; // Skip this iteration\n                }\n                var transform = $path.attr('transform') || \"translate(0,0)\";\n\n                // Calculate duration per shape for smooth transitions\n                var totalDuration = duration || 6;\n                var durationPerShape = (_svg_items = svg_items) !== null && _svg_items !== void 0 && _svg_items.length ? totalDuration / svg_items.length : 1;\n\n                // Start first animation immediately, others at calculated intervals\n                var startTime = shapeIndex * durationPerShape;\n\n                // Check if morphSVG is available, otherwise fallback to basic animation\n                if (typeof gsap.plugins.morphSVG !== 'undefined') {\n                  imageTimeline.to(imageClipPath, {\n                    morphSVG: {\n                      shape: $path[0]\n                    },\n                    duration: durationPerShape,\n                    ease: (settings === null || settings === void 0 ? void 0 : settings.eael_image_morphing_ease) || \"sine.inOut\",\n                    transformOrigin: \"center center\",\n                    onStart: function onStart() {\n                      // Apply any custom transform\n                      if (transform) {\n                        imageClipPath.attr('transform', transform);\n                      }\n                    }\n                  }, startTime);\n                } else {\n                  // Fallback to basic path morphing\n                  imageTimeline.to(imageClipPath, {\n                    attr: {\n                      d: $path.attr('d')\n                    },\n                    duration: durationPerShape,\n                    ease: (settings === null || settings === void 0 ? void 0 : settings.eael_image_morphing_ease) || \"sine.inOut\",\n                    onStart: function onStart() {\n                      // Apply any custom transform\n                      if (transform) {\n                        imageClipPath.attr('transform', transform);\n                      }\n                    }\n                  }, startTime);\n                }\n              });\n            });\n\n            // Update animation reference with all timelines for cleanup\n            window.eaelImageMaskingAnimations[elementId] = {\n              timelines: imageTimelines,\n              type: 'svg-morphing',\n              processing: false\n            };\n          })[\"catch\"](function (error) {\n            // console.error('EAEL Image Masking: Error loading SVG content:', error);\n            // Clean up animation reference on error\n            delete window.eaelImageMaskingAnimations[elementId];\n          });\n        }\n      }\n      if (style) {\n        element.append('<style id=\"' + styleId + '\">' + style + '</style>');\n      }\n    }\n  }\n\n  // Check if polygon animation is enabled and get settings\n  function createClippedSVG(imageSrc, uniqueId, viewBox, pathD, originalImage, transform) {\n    if ($(\"#eael-morphing-svg-\".concat(uniqueId)).length) {\n      return;\n    }\n    var imgWidth = originalImage.offsetWidth || originalImage.naturalWidth;\n    var imgHeight = originalImage.offsetHeight || originalImage.naturalHeight;\n\n    // Parse viewBox to get the coordinate system dimensions\n    var viewBoxValues = viewBox.split(' ').map(Number);\n    var viewBoxX = viewBoxValues[0] || 0;\n    var viewBoxY = viewBoxValues[1] || 0;\n    var viewBoxWidth = viewBoxValues[2];\n    var viewBoxHeight = viewBoxValues[3];\n\n    // Handle transform attribute if provided\n    var transformAttr = transform ? \"transform=\\\"\".concat(transform, \"\\\"\") : '';\n\n    // Calculate proper scaling to ensure the mask shape is never cropped\n    var imageAspectRatio = imgWidth / imgHeight;\n    var viewBoxAspectRatio = viewBoxWidth / viewBoxHeight;\n\n    // Always scale the image to cover the entire viewBox area\n    var imageDisplayWidth, imageDisplayHeight, imageX, imageY;\n    if (imageAspectRatio > viewBoxAspectRatio) {\n      imageDisplayWidth = viewBoxWidth;\n      imageDisplayHeight = viewBoxWidth / imageAspectRatio;\n      imageX = viewBoxX;\n      imageY = viewBoxY + (viewBoxHeight - imageDisplayHeight) / 2;\n    } else {\n      imageDisplayHeight = viewBoxHeight;\n      imageDisplayWidth = viewBoxHeight * imageAspectRatio;\n      imageX = viewBoxX + (viewBoxWidth - imageDisplayWidth) / 2;\n      imageY = viewBoxY;\n    }\n\n    // Ensure image covers the entire viewBox to prevent mask cropping\n    if (imageDisplayWidth < viewBoxWidth || imageDisplayHeight < viewBoxHeight) {\n      var scaleX = viewBoxWidth / imageDisplayWidth;\n      var scaleY = viewBoxHeight / imageDisplayHeight;\n      var scale = Math.max(scaleX, scaleY);\n      imageDisplayWidth *= scale;\n      imageDisplayHeight *= scale;\n      imageX = viewBoxX + (viewBoxWidth - imageDisplayWidth) / 2;\n      imageY = viewBoxY + (viewBoxHeight - imageDisplayHeight) / 2;\n    }\n    return \"\\n            <svg id=\\\"eael-morphing-svg-\".concat(uniqueId, \"\\\" viewBox=\\\"\").concat(viewBox, \"\\\" width=\\\"\").concat(imgWidth, \"\\\" height=\\\"\").concat(imgHeight, \"\\\" style=\\\"position: absolute; top: 0; left: 0; visibility: visible; display: block;\\\">\\n                <defs>\\n                    <clipPath id=\\\"clip-path-\").concat(uniqueId, \"\\\" clipPathUnits=\\\"userSpaceOnUse\\\" style=\\\"transform-box: view-box; transform-origin: center;\\\">\\n                        <path class=\\\"clip-path\\\" d=\\\"\").concat(pathD, \"\\\" \").concat(transformAttr, \"/>\\n                    </clipPath>\\n                </defs>\\n                <image x=\\\"\").concat(imageX, \"\\\" y=\\\"\").concat(imageY, \"\\\" width=\\\"\").concat(imageDisplayWidth, \"\\\" height=\\\"\").concat(imageDisplayHeight, \"\\\" clip-path=\\\"url(#clip-path-\").concat(uniqueId, \")\\\" href=\\\"\").concat(imageSrc, \"\\\" preserveAspectRatio=\\\"none\\\"/>\\n            </svg>\\n        \");\n  }\n  function getImageMaskingSettingsVal(models) {\n    $.each(models, function (_, model) {\n      var _model$attributes3;\n      // Only process if image masking is enabled for this element\n      var settings = model === null || model === void 0 || (_model$attributes3 = model.attributes) === null || _model$attributes3 === void 0 || (_model$attributes3 = _model$attributes3.settings) === null || _model$attributes3 === void 0 ? void 0 : _model$attributes3.attributes;\n      if (settings && 'yes' === (settings === null || settings === void 0 ? void 0 : settings.eael_enable_image_masking)) {\n        renderImageMasking(model);\n      }\n      if (model.attributes.elType !== 'widget') {\n        getImageMaskingSettingsVal(model.attributes.elements.models);\n      }\n    });\n  }\n  if ((_window$elementor = window.elementor) !== null && _window$elementor !== void 0 && (_window$elementor = _window$elementor.elements) !== null && _window$elementor !== void 0 && _window$elementor.models) {\n    var _window$elementor2;\n    getImageMaskingSettingsVal((_window$elementor2 = window.elementor) === null || _window$elementor2 === void 0 || (_window$elementor2 = _window$elementor2.elements) === null || _window$elementor2 === void 0 ? void 0 : _window$elementor2.models);\n  }\n};\njQuery(window).on(\"elementor/frontend/init\", function () {\n  if (eael.elementStatusCheck('eaelImageMaskingEditor')) {\n    return false;\n  }\n  elementorFrontend.hooks.addAction(\"frontend/element_ready/widget\", ImageMaskingHandler);\n});\n\n//# sourceURL=webpack:///./src/js/edit/image-masking.js?");

/***/ })

/******/ });