FM / Preview

/home/techb158/public_html/wp-content/plugins/kirki/includes/Frontend/Preview/

/home/techb158/public_html/wp-content/plugins/kirki/includes/Frontend/Preview

Name	Size	Mode	Actions
templates/	-	0755	rm
DataHelper.php	7514	0644	edit dl rm
ExceptionalElements.php	52807	0644	edit dl rm
Preview.php	84092	0644	edit dl rm
Utils.php	15457	0644	edit dl rm

Edit: /home/techb158/public_html/wp-content/plugins/kirki/includes/Frontend/Preview/Preview.php (84092B)

<?php
/**
 * Preview script for html markup generator
 *
 * @package kirki
 */

namespace Kirki\Frontend\Preview;

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

use Kirki\Ajax\Symbol;
use Kirki\Frontend\Preview\ExceptionalElements;
use Kirki\Ajax\UserData;
use Kirki\Ajax\WpAdmin;
use Kirki\API\ContentManager\ContentManagerHelper;
use Kirki\HelperFunctions;

use function Kirki\Framework\dd;

/**
 * Preview class
 */
class Preview extends ExceptionalElements {

/**
	 * $root for entry id or parent element id.
	 */
	protected $root = null;
	/**
	 * $data is for all element data array.
	 */
	protected $data = array();
	/**
	 * $symbol_id if preview is generate for symbol then it has symbol_id for maintain class-prefix.
	 */
	protected $symbol_id = null;
	protected $prefix    = false;

/**
	 * Whether component binding metadata should be included in preview markup.
	 *
	 * This is enabled for builder symbol previews only. Public frontend markup
	 * continues to render without the editor-only metadata.
	 *
	 * @var bool
	 */
	protected $include_component_field_metadata = false;
	/**
	 * $style_blocks for all style blocks merged array. like=> global, migrated, symbols. etc.
	 */
	protected $style_blocks = array();
	/**
	 * $only_used_style_blocks only used style blocks.
	 */
	private $only_used_style_blocks = array();
	/**
	 * $only_used_popup_id_array only used popup post ids.
	 */
	public static $only_used_popup_id_array = array();
	/**
	 * $printed_font_family_tracker for tracking already printed font family markup.
	 */
	private static $printed_font_family_tracker = array();
	private static $printed_variable_tracker    = array();
	private static $section_id_tracker_for_href = array(); // ['section_id' => 'Section-2', 'section_id_1' => 'section-2-1' ]
	/**
	 * $view_ports user all viewports data.
	 */
	private $view_ports = array();

/**
	 * Initialize some variables for element related data. Like: custom codes, lightbox, map, slider etc.
	 * START
	 */
	/**
	 * $sliders for collect slider elements data.
	 */
	private $sliders = array();
	/**
	 * $navigation for collect navigation elements data.
	 */
	private $navigations = array();

/**
	 * $navigation item for collect navigation item elements data.
	 */
	private $navigation_item = array();

/**
	 * $inputs for collect inputs elements data.
	 */
	private $inputs = array();
	/**
	 * $maps for collect map elements data.
	 */
	private $maps = array();
	/**
	 * $lotties for collect lottie elements data.
	 */
	private $lotties = array();
	/**
	 * $popups for collect popup elements data.
	 */
	private $popups = array();
	/**
	 * $tabs for collect tab elements data.
	 */
	private $tabs = array();
	/**
	 * $lightboxes for collect lightbox elements data.
	 */
	private $lightboxes = array();
	/**
	 * $re_captchas for collect reCaptcha elements data.
	 */
	private $re_captchas = array();
	/**
	 * $videos for collect video elements data.
	 */
	private $videos = array();
	/**
	 * $interactions for collect interaction elements data.
	 */
	private $interactions = array();

/**
	 * $interaction library for collect interaction library elements data.
	 */
	private $interaction_library = array();
	/**
	 * $collections for collect collection elements data.
	 */
	private $collections = array();
	/**
	 * $forms for collect form elements data.
	 */
	private $forms = array();

/**
	 * $liquid_glass for liquid glass effect
	 */
	private $liquid_glass = array();

/**
	 * $custom_codes for collect customCode elements data.
	 */
	public $custom_codes = '';

/**
	 * $dropdown for collect dropdown elements data.
	 */
	private $dropdown = array();
	/**
	 * Initialize some variables for element related data. Like: custom codes, lightbox, map, slider etc.
	 * END
	 */

/**
	  * elements wise variable modes array.
	  */
	private $ele_variable_modes = array();

/**
	 * interaction ['scroll-into-ele'] & ['scroll-out-ele'] tracker
	 */
	private $interaction_preset_and_text_animation_tracker = array();

private $interaction_library_text_animation_tracker = array();

private $scroll_into_custom_interaction_tracker = '';

private $track_animation_for_elements_with_this_class = '';

private $track_animation_for_children_with_this_class = '';

private $track_animation_for_sibling_with_this_class = '';

private $track_animation_for_trigger_sibling_with_this_class = '';

private $track_animation_for_trigger_with_this_class = '';

/**
	 * END
	 */

/**
	 * List of exceptional elements.
	 */
	private $exceptional_elements = array(
		'custom-code',
		'map',
		'svg',
		'svg-icon',
		'textarea',
		'select',
		'video',
		'radio-group',
		'checkbox-element',
		'radio-button',
		'image',
		'collection',
		'loading', // collection loading element
		'items',
		'collection-wrapper',
		'users',
		'pagination',
		'pagination-item',
		'pagination-number',
		'terms',
		'menus',
		'symbol',
		'link-block',
		'form',
		'button',
		'popup-body',
		'navigation',
		'navigation-item',
		'navigation-items',
		'section',
		'common',
		'slider',
		'slider_mask',
		'slider_nav',
		'tabs',
		'tab_menu',
		'tab',
		'tab_content',
		'tab_pane'
	);

/**
	 * List of dynamic content element.
	 */
	private $exceptional_elements_contains_dyn_content = array( 'collection' );
	/**
	 * List of inline elements.
	 */
	private $inline_elements = array( 'button', 'link-block', 'link-text' );

/**
	 * List of anchor elements.
	 */
	private $prevent_anchor_elements = array( 'heading', 'image', 'paragraph' );
	/**
	 * List anchor attrs.
	 */
	private $anchor_attrs = array( 'href', 'target', 'rel' );

/**
	 * Preview script initilizer
	 *
	 * @param array  $data elments data array.
	 * @param array  $style_blocks elments style_blocks array.
	 * @param string $root root element id.
	 * @param string $symbol_id if preview script is initiate for symbol element generation.
	 *
	 * @return void
	 */
	public function __construct( $data, $style_blocks, $root = null, $symbol_id = null, $prefix = false ) {
		if ( $root ) {
			$this->root = $root;
		} else {
			$this->root = 'root';
		}
		$this->data         = $data;
		$this->style_blocks = $style_blocks;
		$this->view_ports   = UserData::get_view_port_list();
		if ( $symbol_id ) {
			$this->symbol_id = $symbol_id;
		}
		$this->prefix = $prefix;
	}

/**
	 * Get the html string
	 *
	 * @return string
	 */
	public function getHTML( $options = array() ) {
		$this->include_component_field_metadata = ! empty( $options['include_component_field_metadata'] );
		// TODO: need to fix this code
		// if(!isset($options['user']) && get_current_user_id() > 0){
		// $options['user'] = Users::get_user_by_id(get_current_user_id());
		// }
		return $this->recGenHTML( $this->root, $options );
	}

/**
	 * Get the style blocks that are used in the html
	 * this method is called after getHtml() method call and from the same instance
	 *
	 * @return string
	 */
	public function get_only_used_style_blocks() {
		return $this->only_used_style_blocks;
	}

public function add_to_only_used_style_blocks( $style_block ) {
		$this->only_used_style_blocks[ $style_block['id'] ] = $style_block;
		if ( isset( $style_block['liquid-glass'] ) ) {
			$this->liquid_glass[ $style_block['id'] ] = array(
				'id'           => $style_block['id'],
				'name'         => $style_block['name'],
				'liquid-glass' => $style_block['liquid-glass'],
				'type'         => $style_block['type'],
				'prefix'       => $this->prefix,
			);
		}
	}

private function updateTranslateCSSString( $end ) {
		$transforms = array();

if ( ! empty( $end['x']['unit'] ) && $end['x']['unit'] !== 'auto' ) {
			$transforms[] = 'translateX(' . $this->addUnit( $end['x'] ) . ')';
		}
		if ( ! empty( $end['y']['unit'] ) && $end['y']['unit'] !== 'auto' ) {
			$transforms[] = 'translateY(' . $this->addUnit( $end['y'] ) . ')';
		}
		if ( ! empty( $end['z']['unit'] ) && $end['z']['unit'] !== 'auto' ) {
			$transforms[] = 'translateZ(' . $this->addUnit( $end['z'] ) . ')';
		}

return implode( ' ', $transforms ); // Return only the transform part
	}

private function updateRotateCSSString( $end ) {
		$rotateProperties = array();

if ( $end['x']['unit'] !== 'auto' ) {
			$rotateProperties[] = 'rotateX(' . $this->addUnit( $end['x'] ) . ')';
		}
		if ( $end['y']['unit'] !== 'auto' ) {
			$rotateProperties[] = 'rotateY(' . $this->addUnit( $end['y'] ) . ')';
		}
		if ( $end['z']['unit'] !== 'auto' ) {
			$rotateProperties[] = 'rotateZ(' . $this->addUnit( $end['z'] ) . ')';
		}

return implode( ' ', $rotateProperties );
	}

private function updateSkewCSSString( $end ) {
		$skewProperties = array();

if ( $end['x']['unit'] !== 'auto' ) {
			$skewProperties[] = 'skewX(' . $this->addUnit( $end['x'] ) . ')';
		}
		if ( $end['y']['unit'] !== 'auto' ) {
			$skewProperties[] = 'skewY(' . $this->addUnit( $end['y'] ) . ')';
		}

return implode( ' ', $skewProperties );
	}

private function updateScaleCSSString( $end ) {
		$scaleProperties = array();

if ( $end['x']['unit'] !== 'none' ) {
			$scaleProperties[] = 'scaleX(' . $end['x']['value'] . ')';
		}
		if ( $end['y']['unit'] !== 'none' ) {
			$scaleProperties[] = 'scaleY(' . $end['y']['value'] . ')';
		}

return implode( ' ', $scaleProperties );
	}

private function addUnit( $valueObj ) {
			$specialValues = array( 'auto', 'fit-content', 'min-content', 'max-content', 'none', 'scrollHeight', 'scrollWidth' );

// Check if the unit is in specialValues, if so, don't append it
			$unit = in_array( $valueObj['unit'], $specialValues ) ? '' : $valueObj['unit'];

return $valueObj['value'] . $unit;
	}

private function updateCssStringForAnimation( $property, $end ) {
			$css                 = '';
			$transformProperties = array(); // Store all transform values

switch ( $property ) {
			case 'move':
					$transformProperties[] = $this->updateTranslateCSSString( $end );
				break;
			case 'rotate':
					$transformProperties[] = $this->updateRotateCSSString( $end );
				break;
			case 'scale':
					$transformProperties[] = $this->updateScaleCSSString( $end );
				break;
			case 'size':
				$css .= 'width: ' . ( $end['width']['value'] === 'scrollWidth' ? 'auto' : $this->addUnit( $end['width'] ) ) . ';';
				$css .= 'height: ' . ( $end['height']['value'] === 'scrollHeight' ? 'auto' : $this->addUnit( $end['height'] ) ) . ';';
				break;
			case 'skew':
					$transformProperties[] = $this->updateSkewCSSString( $end );
				break;
			case 'fade':
					$css .= 'opacity: ' . $end['value'] . ';';
				break;
			case 'color':
					$css .= 'color: ' . $end['value'] . '; fill: ' . $end['value'] . ';';
				break;
			case 'border-color':
					$css .= 'border-color: ' . $end['value'] . ';';
				break;
			case 'border-radius':
					$css .= 'border-top-left-radius: ' . $this->addUnit( $end['border-top-left-radius'] ) . ';';
					$css .= 'border-top-right-radius: ' . $this->addUnit( $end['border-top-right-radius'] ) . ';';
					$css .= 'border-bottom-right-radius: ' . $this->addUnit( $end['border-bottom-right-radius'] ) . ';';
					$css .= 'border-bottom-left-radius: ' . $this->addUnit( $end['border-bottom-left-radius'] ) . ';';
				break;
			case 'background-color':
					$css .= 'background: ' . $end['value'] . ';';
				break;
			case 'background-size-position':
					$css .= 'background-size: ' . $this->addUnit( $end['sizeWidth'] ) . ' ' . $this->addUnit( $end['sizeHeight'] ) . ';';
					$css .= 'background-position-x: ' . $this->addUnit( $end['positionX'] ) . ';';
					$css .= 'background-position-y: ' . $this->addUnit( $end['positionY'] ) . ';';
				break;
			case 'background-size':
					$css .= 'background-size: ' . $this->addUnit( $end['sizeWidth'] ) . ' ' . $this->addUnit( $end['sizeHeight'] ) . ';';
				break;
			case 'background-position':
					$css .= 'background-position-x: ' . $this->addUnit( $end['positionX'] ) . ';';
					$css .= 'background-position-y: ' . $this->addUnit( $end['positionY'] ) . ';';
				break;
			case 'filter':
					$filters = array();
				foreach ( $end as $key => $value ) {
						$filters[] = "$key(" . $this->addUnit( $value ) . ')';
				}
					$css .= 'filter: ' . implode( ' ', $filters ) . ';';
				break;

default:
				break;
		}

if ( ! empty( $transformProperties ) ) {
			$css                .= implode( ' ', array_unique( $transformProperties ) );
			$transformProperties = array(); // Reset for the next element
		}

return $css;
	}

/**
	 * Get the style tag string
	 *
	 * @param  array|bool $blocks all styleblocks.
	 * @return string
	 */
	public function getStyleTag( $blocks = false ) {
		if ( ! $blocks ) {
			$blocks = $this->style_blocks;
		}

$s = '';

if ( count( $this->ele_variable_modes ) > 0 ) {
			$s .= $this->getElementWiseVariableCssCodes();
		}

if ( $blocks ) {
			foreach ( $this->view_ports as $key => $vp ) {
				$css = '';
				foreach ( $blocks as $style_block ) {
					$css .= $this->getRawCssDeviceWise( $style_block, $vp );
				}
				if ( $css ) {
					$s .= "<style data='" .'kirki-element-styles-' . $key . "'>";
					$s .= $css;
					$s .= '</style>';
				}
			}
		}
		return $s;
	}

public function get_interaction_set_as_initial_css() {
		$s = '';
		if ( count( $this->interaction_preset_and_text_animation_tracker ) > 0 || count( $this->interaction_library_text_animation_tracker ) > 0 ) {
			$animation_css = '';
			foreach ( $this->interaction_preset_and_text_animation_tracker as $ele_id => $bool ) {
					$animation_css .= "[data-kirki='" . $ele_id . "'] { visibility: hidden; }";
			}

foreach ( $this->interaction_library_text_animation_tracker as $ele_id => $devices ) {
			$css_value     = "[data-kirki='" . $ele_id . "'] { visibility: hidden; }";
			$media_queries = ! empty( $devices ) ? $this->setMediaQuery( $css_value, $devices ) : '';
			$animation_css .= ! empty( $media_queries ) ? $media_queries : $css_value;
		}

if ( $animation_css ) {
					$s .= "<style data='kirki-element-animation-visibility'>";
					$s .= $animation_css;
					$s .= '</style>';
			}
		}

if ( $this->scroll_into_custom_interaction_tracker ) {
			$s .= "<style data='kirki-scroll-into-custom-animation'>";
			$s .= $this->scroll_into_custom_interaction_tracker;
			$s .= '</style>';
		}

if ( $this->track_animation_for_elements_with_this_class ) {
			$s .= "<style data='kirki-custom-animation-for-all-elements-with-same-class'>";
			$s .= $this->track_animation_for_elements_with_this_class;
			$s .= '</style>';
		}

if ( $this->track_animation_for_children_with_this_class ) {
			$s .= "<style data='kirki-custom-animation-for-all-children-with-same-class'>";
			$s .= $this->track_animation_for_children_with_this_class;
			$s .= '</style>';
		}

if ( $this->track_animation_for_sibling_with_this_class ) {
			$s .= "<style data='kirki-custom-animation-for-all-sibling-with-same-class'>";
			$s .= $this->track_animation_for_sibling_with_this_class;
			$s .= '</style>';
		}

if ( $this->track_animation_for_trigger_sibling_with_this_class ) {
			$s .= "<style data='kirki-custom-animation-for-trigger-sibling-with-same-class'>";
			$s .= $this->track_animation_for_trigger_sibling_with_this_class;
			$s .= '</style>';
		}

if ( $this->track_animation_for_trigger_with_this_class ) {
			$s .= "<style data='kirki-custom-animation-for-trigger-with-same-class'>";
			$s .= $this->track_animation_for_trigger_with_this_class;
			$s .= '</style>';
		}

return $s;
	}

private function setInitialAnimation( $ele_id, $animations, $single_res_value ) {
		$elementStyleValues = array();
		$hasClassName       = false;
		$css                = '';
		$media_queries      = '';

foreach ( $animations as $ani_key => $animation ) {
			if ( ! empty( $animation['setAsInitial'] ) && $animation['setAsInitial'] ) {

foreach ( $this->processElementStyles( $ele_id, $animation ) as $key => $value ) {
					if ( ! isset( $elementStyleValues[ $key ] ) ) {
							$elementStyleValues[ $key ] = array(
								'transform' => $value['transform'] ?? array(),
								'other'     => $value['other'] ?? array(),
							);
					} else {
							$elementStyleValues[ $key ]['transform'] = array_merge(
								$elementStyleValues[ $key ]['transform'] ?? array(),
								$value['transform'] ?? array()
							);
							$elementStyleValues[ $key ]['other']     = array_merge(
								$elementStyleValues[ $key ]['other'] ?? array(),
								$value['other'] ?? array()
							);
					}
				}
			}
		}

if ( ! empty( $elementStyleValues ) ) {
			$css          .= $this->setAnimationStyles( $elementStyleValues, $hasClassName );
			$media_queries = $this->getMediaQuery( $css, $single_res_value );
			$this->scroll_into_custom_interaction_tracker .= ! empty( $media_queries ) ? $media_queries : $css;
		}
	}

private function setAnimationStyles( $elementStyleValues, $hasClassName ) {
		$s = '';
		foreach ( $elementStyleValues as $ele_id => $styles ) {
			if ( empty( $styles['transform'] ) && empty( $styles['other'] ) ) {
				continue;
			}

$css  = $hasClassName ? '' : "[data-kirki='$ele_id'] { ";
			$css .= ! empty( $styles['transform'] ) ? 'transform: ' . implode( ' ', $styles['transform'] ) . '; ' : '';
			$css .= ! empty( $styles['other'] ) ? implode( ' ', $styles['other'] ) : '';
			$css .= $hasClassName ? '' : ' }';

$s .= $css;
		}
		return $s;
	}

private function processElementStyles( $ele_id, $animation ) {
		$elementStyles = array(); // Ensure the array is initialized properly

if ( ! isset( $elementStyles[ $ele_id ] ) ) {
			$elementStyles[ $ele_id ] = array(
				'transform' => array(),
				'other'     => array(),
			);
		}

if ( ! isset( $animation['property'] ) || ! isset( $animation['end'] ) ) {
				return array(); // Skip invalid animations
		}

$cssValue = $this->updateCssStringForAnimation( $animation['property'], $animation['end'] );
		if ( ! empty( $cssValue ) ) {

switch ( $animation['property'] ) {
				case 'move':
				case 'rotate':
				case 'scale':
				case 'skew':
						$elementStyles[ $ele_id ]['transform'][] = $cssValue;
					break;
				default:
						$elementStyles[ $ele_id ]['other'][] = $cssValue;
					break;
			}
		}
		return $elementStyles;
	}

/**
	 * Get the html string
	 *
	 * @param array $block single style block.
	 * @param array $vp viewport.
	 *
	 * @return string
	 */
	private function getRawCssDeviceWise( $block, $vp ) {
		$css_string = '';
		$selector   = $this->getSelectorFromBlock( $block );
		$variants   = $block['variant'];

$global_css = "";
		$local_css = "";

foreach ( $variants as $key => $value ) {
			$variant = explode( '_', $key );
			if ( $variant[0] === $vp['id'] ) {
				if( $block && isset($block['isGlobalStyle']) && $block['isGlobalStyle'] === true){
					$global_css .= $this->createMediaQueryString( $selector, $key, $value, $vp );
				}else{
					$local_css .= $this->createMediaQueryString( $selector, $key, $value, $vp );
				}
			}
		}
		return $global_css . $local_css;
	}

/**
	 * Create Media Query String
	 *
	 * @param string $selector calss/tag selector like => .class-name.
	 * @param string $device_name media query key like => md.
	 * @param string $css_text css text like => color:red.
	 * @param object $vp current viewport object.
	 *
	 * @return string
	 */
	private function createMediaQueryString( $selector, $device_name, $css_text, $vp ) {
		if ( $css_text === '' ) {
			return '';
		}
		$css_string = '';
		$variant    = explode( '_', $device_name );
		$type       = $vp['type'];
		if ( count( $variant ) === 1 ) {
			// default class or sub class for devices.
			if ( $variant[0] === 'md' ) {
				$css_string .= $selector . '{' . $css_text . '}';
			} elseif ( isset( $this->view_ports[ $variant[0] ] ) ) {
				$css_string .= '@media only screen and (' . $type . '-width: ' . $this->view_ports[ $variant[0] ][ $type . 'Width' ] . 'px) {' . $selector . '{' . $css_text . '}}';
			}
		} elseif ( count( $variant ) === 2 ) {
			// active, hover, focus or pseudo class.
			$psuedo_class = $this->checkIfHasPsuedoClassValue( $variant[1] );
			if ( $variant[0] === 'md' ) {
				$css_string .= $selector . $psuedo_class . '{' . $css_text . '}';
			} elseif ( isset( $this->view_ports[ $variant[0] ] ) ) {
				$css_string .= '@media only screen and (' . $type . '-width: ' . $this->view_ports[ $variant[0] ][ $type . 'Width' ] . 'px) {';
				$css_string .= $selector . $psuedo_class . '{' . $css_text . '}';
				$css_string .= '}';
			}
		} elseif ( count( $variant ) === 3 ) {
			// active, hover, focus + pseudo class.
			$psuedo_class1 = $this->checkIfHasPsuedoClassValue( $variant[1] );
			$psuedo_class2 = $this->checkIfHasPsuedoClassValue( $variant[2] );

if ( $variant[0] === 'md' ) {
				$css_string .= $selector . $psuedo_class1 . $psuedo_class2 . '{' . $css_text . '}';
			} elseif ( isset( $this->view_ports[ $variant[0] ] ) ) {
				$css_string .= '@media only screen and (' . $type . '-width: ' . $this->view_ports[ $variant[0] ][ $type . 'Width' ] . 'px) {';
				$css_string .= $selector . $psuedo_class1 . $psuedo_class2 . '{' . $css_text . '}';
				$css_string .= '}';
			}
		}
		return $css_string;
	}

/**
	 * Get the script tag string
	 *
	 * @return string
	 */
	public function getScriptTag( $should_take_app_script = true ) {
		$s           = '';
		$empty_vars  = $this->getVariableString( 'Sliders', $this->sliders );
		$empty_vars .= $this->getVariableString( 'Maps', $this->maps );
		$empty_vars .= $this->getVariableString( 'Lotties', $this->lotties );
		$empty_vars .= $this->getVariableString( 'Popups', $this->popups );
		$empty_vars .= $this->getVariableString( 'Lightboxes', $this->lightboxes );
		$empty_vars .= $this->getVariableString( 'ReCaptchas', $this->re_captchas );
		$empty_vars .= $this->getVariableString( 'Videos', $this->videos );
		$empty_vars .= $this->getVariableString( 'Tabs', $this->tabs );
		$empty_vars .= $this->getVariableString( 'Interactions', $this->interactions );
		$empty_vars .= $this->getVariableString( 'InteractionLibrary', $this->interaction_library );
		$empty_vars .= $this->getVariableString( 'Collections', $this->collections );
		$empty_vars .= $this->getVariableString( 'Forms', $this->forms );
		$empty_vars .= $this->getVariableString( 'Dropdown', $this->dropdown );
		$empty_vars .= $this->getVariableString( 'Navigations', $this->navigations );
		$empty_vars .= $this->getVariableString( 'NavigationItem', $this->navigation_item );
		$empty_vars .= $this->getVariableString( 'Inputs', $this->inputs );
		$empty_vars .= $this->getVariableString( 'LiquidGlass', $this->liquid_glass );

if ( $empty_vars ) {
			$s .= "<script data='kirki-elements-property-vars'>";
			$s .= $empty_vars;
			$s .= '</script>';
		}

if ( $this->custom_codes ) {
			$s .= "<script data='kirki-elements-property-dev-mode'>";
			$s .= $this->custom_codes;
			$s .= '</script>';
		}

$updatedScriptTags = false;
		if ( $should_take_app_script ) {
			$updatedScriptTags = apply_filters('kirki_add_script_tags', $s );
		}

if ( $updatedScriptTags ) {
			$s = $updatedScriptTags;
		}

return $s;
	}

private function getVariableString( $name, $value ) {
		if ( count( $value ) === 0 ) {
			return '';
		}
		$prefix = 'kirki';
		$value  = wp_json_encode( $value );
		// SECURITY (prototype-pollution guard): only merge a PRE-EXISTING value when it is
		// an OWN property of window. `window.kirkiX === undefined` is false when
		// `Object.prototype.kirkiX` has been polluted (crafted query params / third-party
		// gadget), and `{...kirkiX, ...}` would then launder attacker-controlled keys into a
		// real own property that downstream scripts trust. Starting from `{}` unless window
		// truly owns the value keeps inherited (attacker) data out.
		$s = "var $prefix$name = Object.assign({}, (Object.prototype.hasOwnProperty.call(window, '$prefix$name') && window.$prefix$name) || {}, $value);";
		return $s;
	}

/**
	 * Returns the JS code with `<script>` tag user put into `Page settings`
	 *
	 * @return string
	 */
	public static function getBodyCustomCode() {
		$post_id     = HelperFunctions::get_post_id_if_possible_from_url();
		$custom_code = get_post_meta( $post_id, KIRKI_PAGE_CUSTOM_CODE, true );
		$code        = "<div data-kirki-code='custom-code'>";

if ( isset( $custom_code['body'], $custom_code['body']['value'] ) ) {
			$code .= $custom_code['body']['value'];
		}
		$code .= '</div>';
		return $code;
	}

/**
	 * Returns the css code with `<style>` tag user put into `Page settings`
	 *
	 * @return string
	 */
	public static function getHeadCustomCode() {
		$post_id     = HelperFunctions::get_post_id_if_possible_from_url();
		$custom_code = get_post_meta( $post_id, KIRKI_PAGE_CUSTOM_CODE, true );
		$code        = '';
		if ( isset( $custom_code['head'], $custom_code['head']['value'] ) ) {
			$code .= "<meta data-kirki-code='start' />";
			$code .= $custom_code['head']['value'];
			$code .= "<meta data-kirki-code='end' />";
		}
		return $code;
	}

public function getElementWiseVariableCssCodes() {
		$s = '';
		foreach ( $this->ele_variable_modes as $ele_id => $modes ) {
			// if ( $mode === 'inherit' ) {
			// 	continue;
			// }
			$s .= self::getVariableCssCode( $ele_id, '[data-kirki="' . $ele_id . '"]', $modes );
		}
		return $s;
	}

public static function getVariableCssCode( $key = 'global', $selector = ':root', $modes = [], $style_tag = true ) {
		$modes = HelperFunctions::normalize_variable_mode( $modes );
		$s = '';
		foreach ( $modes as $mode_type => $mode ) {
			$s .= self::generateSingleVariableModeCssCode($mode_type, $key, $selector, $mode, $style_tag );
		}
		return $s;
	}

private static function generateSingleVariableModeCssCode($mode_type,$key = 'global', $selector = ':root', $mode=false, $style_tag = true){
		$k = "$key-$selector-$mode";
		$variables = UserData::get_kirki_variable_data();

if ( ! $mode || $mode === 'inherit' ) {
				$mode = 'default';
		}

$s = $style_tag ? "<style id='kirki-variables-" . $key . "'>".$selector."{" : $selector."{";
		$view_ports     = UserData::get_view_port_list();

$text_style_css = "";

foreach ($variables['data'] as $key2 => $group) {
			if($group['key'] !== $mode_type) {
				continue;
			}
			foreach ( $group['variables'] as $key3 => $variable) {
				if ( ! isset( $variable['value'][ $mode ] ) ) {
					continue;
				}

$name = '--' . $variable['id'];

switch ( $variable['type']  ) {
					case 'size':
						$s .= "$name:" . $variable['value'][$mode]['value'] . $variable['value'][$mode]['unit'] . ";";
						break;
					case 'font-family':
						$font_value = $variable['value'][$mode];
						if (strpos($font_value, '"') === 0 || strpos($font_value, "'") === 0) {
							$s .= "$name:" . $font_value . ";";
						} else {
							$s .= "$name:\"" . $font_value . "\";";
						}
						// $s .= "$name:\"" . $variable['value'][$mode] . "\";";
						break;
					case 'color':
						$s .= "$name:" . $variable['value'][$mode] . ";";
						break;
					case 'text-style':
						$text_style_css .= self::buildTextStyleCss( $variable, $mode, $view_ports );
						break;
				}
			}
		}

if($selector && $selector !== ':root'){
			$text_style_css = "$selector{$text_style_css}";
		}

$s .= $style_tag ? "}$text_style_css</style>" : "}$text_style_css";

self::$printed_variable_tracker[ $k ] = true;
		return $s;
	}

/**
	 * Build CSS rules for a single text-style variable.
	 *
	 * @param array  $variable   The text-style variable data.
	 * @param string $mode       The active mode key.
	 * @param array  $view_ports The viewport configuration list.
	 *
	 * @return string
	 */
	private static function buildTextStyleCss( $variable, $mode, $view_ports ) {
		$css         = '';
		$mode_data   = $variable['value'][ $mode ];
		$var_id      = $variable['id'];
		$font_family = isset( $mode_data['font-family'] ) ? $mode_data['font-family'] : '';
		$styles      = isset( $mode_data['styles'] ) ? $mode_data['styles'] : array();
		$ts_selector = '[data-text_style="' . $var_id . '"]';

foreach ( $styles as $device => $props ) {
			$css_declarations = '';

if ( $device === 'md' && $font_family ) {
				$css_declarations .= 'font-family:' . $font_family . ';';
			}

foreach ( $props as $prop_name => $prop_value ) {

// font-feature-settings
				if (
					$prop_name === 'font-feature-settings' &&
					is_array( $prop_value ) &&
					isset( $prop_value['value'] ) &&
					is_array( $prop_value['value'] )
				) {
					$css_string = implode(
						', ',
						array_map(
							function( $key ) {
								return '"' . $key . '"';
							},
							array_keys( $prop_value['value'] )
						)
					);
			
					$css_declarations .= $prop_name . ':' . $css_string . ';';
					continue;
				}
			
				// value + unit object
				if (
					is_array( $prop_value ) &&
					isset( $prop_value['value'], $prop_value['unit'] )
				) {
			
					// font-size clamp
					if (
						$prop_name === 'font-size' &&
						isset( $prop_value['type'] ) &&
						str_contains( $prop_value['type'], 'clamp-' )
					) {
			
						$min_value = isset($prop_value['min'], $prop_value['min']['value'] ) ? $prop_value['min']['value'] : 0;
						$min_unit  = isset($prop_value['min'], $prop_value['min']['unit'] ) ? $prop_value['min']['unit'] : 'px';
			
						$base_value = isset($prop_value['base'], $prop_value['base']['value'] ) ? $prop_value['base']['value'] : 0;
						$base_unit  = isset($prop_value['base'], $prop_value['base']['unit'] ) ? $prop_value['base']['unit'] : 'px';
			
						$max_value = isset($prop_value['max'], $prop_value['max']['value'] ) ? $prop_value['max']['value'] : 0;
						$max_unit  = isset($prop_value['max'], $prop_value['max']['unit'] ) ? $prop_value['max']['unit'] : 'px';
			
						$css_declarations .= "{$prop_name}:clamp({$min_value}{$min_unit}, {$base_value}{$base_unit}, {$max_value}{$max_unit});";
			
					// special max-width values
					} elseif (
						$prop_name === 'max-width' &&
						in_array( $prop_value['value'], array(  'none', 'fit-content', 'max-content', 'min-content' ), true )
					) {
			
						$css_declarations .= $prop_name . ':' . $prop_value['value'] . ';';
			
					} else {
			
						$css_declarations .= $prop_name . ':' . $prop_value['value'] . $prop_value['unit'] . ';';
					}
			
				// string or number
				} elseif (
					( is_string( $prop_value ) && $prop_value !== '' ) ||
					is_numeric( $prop_value )
				) {
			
					$css_declarations .= $prop_name . ':' . $prop_value . ';';
				}
			}

if ( empty( $css_declarations ) ) {
				continue;
			}

$rule = $ts_selector . '{' . $css_declarations . '}';

if ( $device === 'md' ) {
				$css .= $rule;
			} elseif ( isset( $view_ports[ $device ] ) ) {
				$max_width = $view_ports[ $device ]['maxWidth'];
				$css .= '@media only screen and (max-width:' . $max_width . 'px){' . $rule . '}';
			}
		}

return $css;
	}

/**
	 * Returns `<meta>` tag with provided content
	 *
	 * @param string $name The meta name.
	 * @param string $content The meta description.
	 * @return string The `<meta />` tag.
	 */
	private static function getMeta( $name, $content ) {
		// Replace &nbsp; and \u00a0 with a space
		$content = preg_replace( '/(?:&nbsp;|\x{00a0})/u', ' ', $content );

// Escape double quotes in the content to avoid breaking the HTML attribute
		$content = htmlspecialchars( $content, ENT_QUOTES, 'UTF-8' );

return "<meta name=\"{$name}\" content=\"{$content}\" />";
	}

/**
	 * All meta tags
	 *
	 * @return string
	 */
	public static function getSeoMetaTags( $post_id = null ) {
		$post_id      = $post_id ? $post_id : HelperFunctions::get_post_id_if_possible_from_url();
		$seo_settings = false;

// get set settings from template if current page is kirki template
		$template_data = HelperFunctions::get_template_data_if_current_page_is_kirki_template();
		if ( $template_data ) {
			$seo_settings = get_post_meta( $template_data['template_id'], KIRKI_PAGE_SEO_SETTINGS_META_KEY, true );
		} else {
			$seo_settings = get_post_meta( $post_id, KIRKI_PAGE_SEO_SETTINGS_META_KEY, true );
		}

// $title = esc_html(get_the_title());
		$meta_tags = '';

// if ( $seo_settings && $seo_settings['seoSettings'] && $seo_settings['seoSettings']['seoTitleTag'] && $seo_settings['seoSettings']['seoTitleTag']['value'] ) {
		// $seo_title = self::getSeoValue($post_id, $seo_settings['seoSettings']['seoTitleTag']['value']);
		// $title = $seo_title;
		// $meta_tags .= self::getMeta('title', $seo_title);
		// }

// $meta_tags .= '<title>' . $title . '</title>';

if ( $seo_settings && $seo_settings['seoSettings'] && $seo_settings['seoSettings']['seoMetaDesc'] && $seo_settings['seoSettings']['seoMetaDesc']['value'] ) {
			$seo_meta_desc = self::getSeoValue( $post_id, $seo_settings['seoSettings']['seoMetaDesc']['value'] );
			$meta_tags    .= self::getMeta( 'description', $seo_meta_desc );
		}

if ( $seo_settings && $seo_settings['openGraph'] && $seo_settings['openGraph']['openGraphImage'] && $seo_settings['openGraph']['openGraphImage']['value'] ) {
			$seo_open_graph_image = self::getSeoValue( $post_id, $seo_settings['openGraph']['openGraphImage']['value'] );

$meta_tags .= self::getMeta( 'og:image', $seo_open_graph_image );
			$meta_tags .= self::getMeta( 'twitter:card', 'summary_large_image' );
			$meta_tags .= self::getMeta( 'twitter:image', $seo_open_graph_image );
		}

if ( $seo_settings && $seo_settings['openGraph'] && $seo_settings['openGraph']['openGraphTitle'] ) {
			// If og:title is sameAsSeoTitle.
			if (
			$seo_settings['openGraph']['openGraphTitle']['sameAsSeoTitle'] &&
			$seo_settings && $seo_settings['seoSettings'] && $seo_settings['seoSettings']['seoTitleTag'] && $seo_settings['seoSettings']['seoTitleTag']['value']
			) {
				$seo_title = self::getSeoValue( $post_id, $seo_settings['seoSettings']['seoTitleTag']['value'] );

$meta_tags .= self::getMeta( 'og:title', $seo_title );
				$meta_tags .= self::getMeta( 'twitter:title', $seo_title );
			} elseif ( $seo_settings['openGraph']['openGraphTitle']['value'] ) {

$og_title = self::getSeoValue( $post_id, $seo_settings['openGraph']['openGraphTitle']['value'] );

$meta_tags .= self::getMeta( 'og:title', $og_title );
				$meta_tags .= self::getMeta( 'twitter:title', $og_title );
			}
		}

if ( $seo_settings && $seo_settings['openGraph'] && $seo_settings['openGraph']['openGraphDesc'] ) {
			// If og:description is sameAsSeoMeta.
			if (
			$seo_settings['openGraph']['openGraphDesc']['sameAsSeoMeta'] &&
			$seo_settings && $seo_settings['seoSettings'] && $seo_settings['seoSettings']['seoMetaDesc'] && $seo_settings['seoSettings']['seoMetaDesc']['value']
			) {
				$seo_meta_desc = self::getSeoValue( $post_id, $seo_settings['seoSettings']['seoMetaDesc']['value'] );

$meta_tags .= self::getMeta( 'og:description', $seo_meta_desc );
				$meta_tags .= self::getMeta( 'twitter:description', $seo_meta_desc );
			} elseif ( $seo_settings['openGraph']['openGraphDesc']['value'] ) {

$og_meta_des = self::getSeoValue( $post_id, $seo_settings['openGraph']['openGraphDesc']['value'] );

$meta_tags .= self::getMeta( 'og:description', $og_meta_des );
				$meta_tags .= self::getMeta( 'twitter:description', $og_meta_des );
			}
		}

$meta_tags .= self::getMeta( 'og:url', get_permalink( $post_id ) );
		return $meta_tags;
	}

/**
	 * Get the seo title
	 *
	 * @param int          $post_id post id.
	 * @param string|array $value seo title tag value.
	 *
	 * @return string
	 */

public static function getSeoValue( $post_id, $value ) {
		$seo_value = '';

if ( is_array( $value ) ) {
			$post           = get_post( $post_id );
			$post_parent_id = null;
			// if template preview open
			if ( $post->post_type && str_contains( $post->post_type,'kirki_template' ) ) {
				// get post condition
				$post_conditions = get_post_meta( $post->ID,'kirki_template_conditions', true ); // kirki_cm_parentId
				$condition       = $post_conditions[0];
				if (
					isset( $condition['post_type'] ) &&
					! empty( $condition['post_type'] )
				) {
					if ( strpos( $condition['post_type'], KIRKI_CONTENT_MANAGER_PREFIX ) !== false ) {
						// content manager related post
						$post_parent_id = str_replace( KIRKI_CONTENT_MANAGER_PREFIX . '_', '', $condition['post_type'] );

$args = array(
							'post_parent'    => $post_parent_id,
							'page'           => 1,
							'posts_per_page' => 1,
						);

$res = ContentManagerHelper::get_all_child_items( $args );

if ( $res && $res[0] ) {
							$post = (object) $res[0];
						}
					}
				}
			}

foreach ( $value as $key => $val ) {
				$option_type  = $val['type'];
				$option_value = $val['value'];

if ( $option_type === 'text' ) {
					$seo_value .= $option_value;
				} elseif ( $option_type === 'post' ) {
					// post author
					if ( isset( $post->$option_value ) && $option_value === 'post_author' ) {
						$seo_value .= get_the_author_meta( 'display_name', $post->post_author );
					} elseif ( $option_value === 'post_id' ) {
						$seo_value .= isset( $post->ID ) ? $post->ID : '';
					} else {
						$seo_value .= isset( $post->$option_value ) ? $post->$option_value : '';
					}
				} elseif ( $option_type === KIRKI_CONTENT_MANAGER_PREFIX . '_field' ) {
					$meta_key = ContentManagerHelper::get_child_post_meta_key_using_field_id( $post->post_parent, $option_value );

$post_meta_value = get_post_meta( $post->ID, $meta_key, true );

// for image field
					if ( $post_meta_value && isset( $post_meta_value['url'] ) ) {
						$post_meta_value = $post_meta_value['url'];
					}

$seo_value .= wp_strip_all_tags( $post_meta_value );
				} elseif ( $option_type === 'featured_image' ) {
					$seo_value .= get_the_post_thumbnail_url( $post->ID );
				} elseif ( $option_type === 'user' ) {
					$user_id = HelperFunctions::get_user_id_if_possible_from_url();

if ( $option_value === 'user_id' ) {
						$seo_value .= $user_id;
					} elseif ( $option_value === 'user_name' ) {
						$seo_value .= get_the_author_meta( 'display_name', $user_id );
					} else {
						$seo_value .= get_the_author_meta( $option_value, $user_id );
					}
				} elseif ( $option_type === 'term' ) {
					$term_id = HelperFunctions::get_term_id_if_possible_from_url();
					if ( $term_id ) {
						$term = get_term( $term_id );

if ( $option_value === 'term_id' ) {
							$seo_value .= $term->term_id;
						} elseif ( $option_value === 'term_name' ) {
							$seo_value .= $term->name;
						} elseif ( $option_value === 'term_slug' ) {
							$seo_value .= $term->slug;
						}
					}
				}
			}
		} else {
			$seo_value = $value;
		}

$seo_value = do_shortcode( $seo_value );

return $seo_value;
	}

/**
	 * Check if has pseudo class value
	 *
	 * @param string $s pseudo class name like => active, hover, focus, child(5th).
	 *
	 * @return string
	 */
	private function checkIfHasPsuedoClassValue( $s ) {
		if ( strpos( $s, '-----' ) !== false ) {
			$s_arr = explode( '-----', $s );
			$s     = $s_arr[0] . '(' . $s_arr[1] . ')';
		}
		if(in_array($s, KIRKI_PRESERVED_CLASS_LIST)){
				return ".$s";
		}
		$pseudoClass = str_contains( $s, 'before' ) || str_contains( $s, 'after' ) || str_contains( $s, 'placeholder' ) ? '::' . $s : ':' . $s;
		return $pseudoClass;
	}

/**
	 * Get the selector from block
	 *
	 * @param array $block single style block.
	 *
	 * @return string
	 */
	private function getSelectorFromBlock( $block ) {
		$selector = '';
		if ( isset( $block['type'] ) && $block['type'] === 'class' ) {
			$block['name'] = HelperFunctions::add_prefix_to_class_name( $this->prefix, $block['name'] );
			if ( is_array( $block['name'] ) ) {
				$selector = '.' . str_replace( ' ', '.', $this->makeClassStringFromArray( $block['name'] ) );
			} else {
				$selector = '.' . $this->makeClassStringFromArray( array( $block['name'] ) );
			}
		} elseif ( isset( $block['type'] ) && $block['type'] === 'tag' ) {
			$selector = isset( $block['tag'] ) ? $block['tag'] : ( isset( $block['name'] ) ? $block['name'] : '' );
		}
		return $selector;
	}

/**
	 * Insert element related data if needed
	 *
	 * @param array $element single element data.
	 * @return void
	 */
	private function insertElementRelatedConfig( $element, $options = array() ) {
		if ( ! $element || !isset( $element['id'] ) ) {
			return;
		}
		$id = $element['id'];
		if ( isset( $element['properties'] ) ) {
			$properties = $element['properties'];

if ( isset( $properties['interactions'] ) ) {
				$this->interactions[ $id ] = $this->updateClassListForInteractionFromStyleBlockId( $properties['interactions'], $element );
			}
			if(isset($properties['interactionLibrary'])) {
				$this->interaction_library[ $id ] = $this->updateStylesForInteractionLibrary( $properties['interactionLibrary'], $element );
			}
			if ( isset( $properties['code'], $properties['code']['javascript'] ) ) {
				$this->custom_codes .= str_replace( 'KIRKI_TARGET_ELEMENT_ID', $id, $properties['code']['javascript'] );
			}

if ( isset( $properties['variableMode'] ) ) {
				$this->ele_variable_modes[ $id ] = $properties['variableMode'];
			}

// Store slider properties.
			if ( $element['name'] === 'slider' ) {
				$this->sliders[ $id ] = $properties['slider'];
			}

if ( $element['name'] === 'popup' ) {
				$this->popups[ $id ] = $properties['popup'];
			}

if ( $element['name'] === 'map' || $element['name'] === 'google-map' ) {
				$this->maps[ $id ] = $properties['map'];
			}

if ( $element['name'] === 'video' ) {
				$this->videos[ $id ] = $properties['attributes'];
			}
			// Store Lottie properties.
			if ( $element['name'] === 'lottie' ) {
				$this->lotties[ $id ] = $properties['lottie'];
			}
			// Store Lottie properties.
			if ( $element['name'] === 'dropdown' ) {
				$this->dropdown[ $id ] = $properties['dropdown'];
			}

if ( $element['name'] === 'tabs' ) {
				$this->tabs[ $id ]['active_tab']    = $properties['active_tab'];
				$this->tabs[ $id ]['animationName'] = $properties['animationName'];
				$this->tabs[ $id ]['easing']        = isset( $properties['easing'] ) ? $properties['easing'] : 'ease';
				$this->tabs[ $id ]['duration']      = isset( $properties['duration'] ) ? $properties['duration'] : 100;
			}

if ( $element['name'] === 'lightbox' ) {
				$this->lightboxes[ $id ] = $properties['lightbox'];
			}

if ( $element['name'] === 'collection' ) {
				$this->collections[$id] = array_merge(
					$properties['dynamicContent'],
					array(
						'isSearchableCollection' => isset($options['search_related_collection_ids'][$id]) ? true : false,
					)
				);
			}

// navigation properties.
			if ( $element['name'] === 'navigation' ) {
				$this->navigations[ $id ] = $properties['navigation'];
			}

// navigation item properties.
			if ( $element['name'] === 'navigation-item' ) {
				$this->navigation_item[ $id ] = isset( $properties['navigationItem'] ) ? $properties['navigationItem'] : array(); // TODO: 
			}

// input properties.
			if ( $element['name'] === 'input' ) {
				$this->inputs[ $id ] = $properties;
			}

if (
				$element['name'] === 'input' ||
				$element['name'] === 'textarea' ||
				$element['name'] === 'select' ||
				$element['name'] === 'checkbox-element' ||
				$element['name'] === 'radio-group'
			) {
				$parent_form_id = $options['form']['id'] ?? '';
				$session_data   = HelperFunctions::get_session_data( $parent_form_id );

$type              = $element['properties']['attributes']['type'] ?? '';
				$others_attributes = array();

if ( $session_data && isset( $element['properties']['attributes']['name'] ) ) {
					if ( ! isset( $session_data['fields'] ) ) {
						$session_data['fields'] = array(
							$element['properties']['attributes']['name'] => array_merge(
								array(
									'type'     => $type,
									'required' => $element['properties']['attributes']['required'] ?? false,
								),
								$element['properties']['attributes'],
								$others_attributes,
							),
						);
					} else {
						$session_data['fields'][ $element['properties']['attributes']['name'] ] = array_merge(
							array(
								'type'     => $type,
								'required' => $element['properties']['attributes']['required'] ?? false,
							),
							$element['properties']['attributes'],
							$others_attributes,
						);
					}

HelperFunctions::set_session_data( $parent_form_id, $session_data );
				}
			}
			if ( $element['name'] === 'form' ) {
				$this->forms[ $id ] = array_merge( $properties['form'], $properties['attributes'] );
				$this->check_popup_inside_form( $properties['form'] );
				HelperFunctions::set_session_data( $id, array_merge( array( 'id' => $id ), $this->forms[ $id ] ) );
			}

if ( $element['name'] === 'button' ) {
				$this->check_popup_inside_button( $properties );
			}

if ( $element['name'] === 'button' || $element['name'] === 'link-text' || $element['name'] === 'link-block' ) {
				$this->check_popup_inside_button( $properties );
			}

if ( $element['name'] === 'recaptcha' ) {
				if (!isset($properties['recaptcha'], $properties['recaptcha']['GRC_version'])) {
					return;
				}

$parent_form_id = $options['form']['id'] ?? '';
				$session_data = HelperFunctions::get_session_data($parent_form_id);

$version = $properties['recaptcha']['GRC_version'];
				$grc_site_key = $properties['recaptcha']['GRC_site_key'];

$this->re_captchas[$id]['data-version'] = $version;
				$this->re_captchas[$id]['data-sitekey'] = $grc_site_key;

// set recaptcha version and site key at form session data
				if ($session_data) {
					$session_data['recaptcha'] = array(
						'GRC_version' => $properties['recaptcha']['GRC_version'],
						'GRC_site_key' => $properties['recaptcha']['GRC_site_key'],
						'GRC_secret_key' => $properties['recaptcha']['GRC_secret_key'],
					);

HelperFunctions::set_session_data($parent_form_id, $session_data);
				}
			}
		}
	}

private function getClassNameAndAnimationStyle( $animations, $styleBlockId ) {
		if ( ! empty( $this->style_blocks[ $styleBlockId ] ) ) {
			$className = $this->style_blocks[ $styleBlockId ]['name'];

if ( $className ) {
				// If className is an array, join all values with a dot separator
				$classSelector    = HelperFunctions::get_selector_from_sb_name( $className );
						$innerCSS = '';
				foreach ( $animations as $animation ) {
					if ( ! empty( $animation['setAsInitial'] ) && $animation['setAsInitial'] ) {
						$temp      = $this->processElementStyles( $classSelector, $animation );
						$innerCSS .= $this->setAnimationStyles( $temp, $hasClassName = true );
					}
				}
				if ( $innerCSS ) {
					return "$classSelector { $innerCSS }";
				}
			}
		}

return ''; // Return an empty string if no className is found
	}

private function setMediaQuery( $cssValue, $deviceList ) {
		$media_queries = '';
		$viewPorts     = $this->view_ports;

// Sort viewports by value ascending
		uasort(
			$viewPorts,
			function( $a, $b ) {
				return $a['value'] <=> $b['value'];
			}
		);

// Get sorted keys
		$orderedKeys   = array_keys( $viewPorts );
		$ranges        = array();
		$prev_viewport = null;
		$count         = 0;

foreach ( $viewPorts as $key => $vp ) {
			if ( in_array( $key, $deviceList ) ) {
				if ( $count === 0 && $vp['value'] < 1200 ) {
					$ranges[] = array(
						'min' => null,
						'max' => $vp['value'],
					);
				} elseif ( $vp['value'] < 1200 ) {
					$ranges[] = array(
						'min' => $prev_viewport['value'] + 1,
						'max' => $vp['value'],
					);
				} elseif ( $count === count( $viewPorts ) - 1 && $vp['value'] > 1200 ) {
					$ranges[] = array(
						'min' => $vp['value'],
						'max' => null,
					);
				} elseif ( $vp['value'] > 1200 ) {
					$ranges[] = array(
						'min' => $prev_viewport['value'] + 1,
						'max' => $vp['value'],
					);
				} else {
					// this is md device
					if ( $count === count( $viewPorts ) - 1 ) {
						// thats means: no md upper device like: 1600
						$ranges[] = array(
							'min' => $prev_viewport['value'] + 1,
							'max' => null,
						);
					} else {
						// next viewport
						$next_viewport = $viewPorts[ $orderedKeys[ $count + 1 ] ];
						$ranges[]      = array(
							'min' => $prev_viewport['value'] + 1,
							'max' => $next_viewport['value'] - 1,
						);
					}
				}
			}
			$count++;
			$prev_viewport = $vp;
		}
		foreach ( $ranges as $key => $value ) {
			$min = $value['min'];
			$max = $value['max'];
			if ( $min !== null && $max !== null ) {
				$media_queries .= "@media (min-width: {$min}px) and (max-width: {$max}px) { $cssValue } ";
			} elseif ( $min !== null ) {
				$media_queries .= "@media (min-width: {$min}px) { $cssValue } ";
			} elseif ( $max !== null ) {
				$media_queries .= "@media (max-width: {$max}px) { $cssValue } ";
			}
		}

return $media_queries;
	}

private function getMediaQuery( $cssValue, $single_res_value ) {
		return isset( $single_res_value['deviceAndClassList']['devices'] ) && count( $single_res_value['deviceAndClassList']['devices'] ) > 0
				? $this->setMediaQuery( $cssValue, $single_res_value['deviceAndClassList']['devices'] )
				: '';
	}

private function setInteractionCssValueToTracker( $classApplyTo, $element, $ele_id, $animations, $styleBlockId, $single_res_value ) {
		$parent_selector = false;
		if ( isset( $single_res_value['deviceAndClassList'], $single_res_value['deviceAndClassList']['applyToClass'], $single_res_value['deviceAndClassList']['styleBlockId'] ) && $single_res_value['deviceAndClassList']['applyToClass'] ) {
			if ( isset( $this->style_blocks[ $single_res_value['deviceAndClassList']['styleBlockId'] ] ) ) {
				$sb              = $this->style_blocks[ $single_res_value['deviceAndClassList']['styleBlockId'] ];
				$parent_selector = HelperFunctions::get_selector_from_sb_name( $sb['name'] );
			}
		}

$cssValue = $this->getClassNameAndAnimationStyle( $animations, $styleBlockId );

if ( ! $cssValue ) {
			return;
		}

switch ( $classApplyTo ) {

case 'childrens':
					$parentID = $element['id'];

if ( ! $parent_selector ) {
					$parent_selector = "[data-kirki='" . $parentID . "']";
				}
						$animation_css = $parent_selector . ' ' . $cssValue;
						$media_queries = $this->getMediaQuery( $animation_css, $single_res_value );

$finalCss = ! empty( $media_queries ) ? $media_queries : $animation_css;
						$this->track_animation_for_children_with_this_class .= $finalCss;

break;

case 'siblings':
				if ( $cssValue ) {
					$child_sb       = $this->style_blocks[ $styleBlockId ];
					$child_selector = HelperFunctions::get_selector_from_sb_name( $child_sb['name'] );
					if ( $parent_selector ) {
						$animation_css = "$parent_selector $child_selector ~ $cssValue";
					} else {
						// $animation_css = "$child_selector ~ $cssValue";
						$animation_css = "[data-kirki='" . $ele_id . "'] ~" . ' ' . $cssValue;
					}

$media_queries = $this->getMediaQuery( $animation_css, $single_res_value );
					$finalCss      = ! empty( $media_queries ) ? $media_queries : $animation_css;
					$this->track_animation_for_sibling_with_this_class .= $finalCss;
				}
				break;

case 'trigger-siblings':
					$parentID = $element['parentId'];

if ( ! $parent_selector ) {
					$parent_selector = "[data-kirki='" . $parentID . "']";
				}
						$animation_css = "$parent_selector > " . $cssValue;
						$media_queries = $this->getMediaQuery( $animation_css, $single_res_value );
				$finalCss              = ! empty( $media_queries ) ? $media_queries : $animation_css;
				$this->track_animation_for_trigger_sibling_with_this_class .= $finalCss;

break;

case 'trigger':
						$media_queries = $this->getMediaQuery( $cssValue, $single_res_value );
				$finalCss              = ! empty( $media_queries ) ? $media_queries : $cssValue;
				$this->track_animation_for_trigger_with_this_class .= $finalCss;

break;

default:
						$media_queries = $this->getMediaQuery( $cssValue, $single_res_value );
						$finalCss      = ! empty( $media_queries ) ? $media_queries : $cssValue;
						$this->track_animation_for_elements_with_this_class .= $finalCss;
				break;

}
	}

private function updateClassListForInteractionFromStyleBlockId( $interactionData, $element ) {
		$id = $element['id'];
		foreach ( $interactionData as $el_as_target_key => $el_as_target_value ) {
			if ( $el_as_target_key === 'deviceAndClassList' ) {
				if ( isset( $interactionData['deviceAndClassList']['styleBlockId'] ) ) {
					$this_block = isset( $this->style_blocks[ $interactionData['deviceAndClassList']['styleBlockId'] ] ) ? $this->style_blocks[ $interactionData['deviceAndClassList']['styleBlockId'] ] : false;
					if ( $this_block ) {
						$class_names = array();
						if ( is_array( $this_block['name'] ) ) {
							$class_names = HelperFunctions::add_prefix_to_class_name( $this->prefix, $this_block['name'] );
						} else {
							$class_names[] = HelperFunctions::add_prefix_to_class_name( $this->prefix, $this_block['name'] );
						}
						$interactionData['deviceAndClassList']['classList'] = $class_names;
						$this->add_to_only_used_style_blocks( $this_block );
					}
				}
			} elseif ( $el_as_target_key === 'elementAsTrigger' ) {
				foreach ( $el_as_target_value as $event_key => $event_value ) {
					foreach ( $event_value as $custom_or_preset_key => $custom_or_preset_value ) {
						foreach ( $custom_or_preset_value as $single_res_key => $single_res_value ) {
							$new_data = array();
							foreach ( $single_res_value['data'] as $ele_id => $animations ) {
								if ( strpos( $ele_id, '____info' ) !== false ) {
									continue;
								}

if ( ( $custom_or_preset_key === 'preset' || $custom_or_preset_key === 'textAnimation' ) && ! empty( $animations ) && count( $animations ) > 0 ) {
									if ( $event_key === 'scroll-into-ele' || $event_key === 'scroll-out-ele' ) {
										$this->interaction_preset_and_text_animation_tracker[ $ele_id ] = true;
									}
								}
								// set initial value for custom interaction
								$this->setInitialAnimation( $ele_id, $animations, $single_res_value );

foreach ( $animations as $ani_key => $animation ) {

if ( isset( $animation['property'] ) && $animation['property'] === 'class-change' ) {
										if ( isset( $animation['end'], $animation['end']['className'], $animation['end']['className']['id'] ) ) {
											$this_block = isset( $this->style_blocks[ $animation['end']['className']['id'] ] ) ? $this->style_blocks[ $animation['end']['className']['id'] ] : false;
											if ( $this_block ) {

$class_names = array();
												if ( is_array( $this_block['name'] ) ) {
													$class_names = HelperFunctions::add_prefix_to_class_name( $this->prefix, $this_block['name'] );
												} else {
													$class_names[] = HelperFunctions::add_prefix_to_class_name( $this->prefix, $this_block['name'] );
												}

$animation['end']['className']['name'] = $class_names;
												$this->add_to_only_used_style_blocks( $this_block );
											}
										}
									}
									$animations[ $ani_key ] = $animation;
								}
								$new_data[ $ele_id ] = $animations;
								if ( isset( $single_res_value['data'][ $ele_id . '____info' ] ) ) {

if ( isset( $single_res_value['data'][ $ele_id . '____info' ]['styleBlockId'] ) ) {
										$classApplyTo = isset( $single_res_value['data'][ $ele_id . '____info' ]['classApplyOnly'] ) ? $single_res_value['data'][ $ele_id . '____info' ]['classApplyOnly'] : '*';
										$applyToClass = isset( $single_res_value['data'][ $ele_id . '____info' ]['applyToClass'] ) ? $single_res_value['data'][ $ele_id . '____info' ]['applyToClass'] : false;
										$styleBlockId = $single_res_value['data'][ $ele_id . '____info' ]['styleBlockId'];

if ( $applyToClass ) {
											$this->setInteractionCssValueToTracker( $classApplyTo, $element, $ele_id, $animations, $styleBlockId, $single_res_value );
										}

$this_block = isset( $this->style_blocks[ $single_res_value['data'][ $ele_id . '____info' ]['styleBlockId'] ] ) ? $this->style_blocks[ $single_res_value['data'][ $ele_id . '____info' ]['styleBlockId'] ] : false;
										if ( $this_block ) {

$class_names = array();
											if ( is_array( $this_block['name'] ) ) {
												$class_names = HelperFunctions::add_prefix_to_class_name( $this->prefix, $this_block['name'] );
											} else {
												$class_names[] = HelperFunctions::add_prefix_to_class_name( $this->prefix, $this_block['name'] );
											}

$single_res_value['data'][ $ele_id . '____info' ]['classList'] = $class_names;

$new_data[ $ele_id . '____info' ] = $single_res_value['data'][ $ele_id . '____info' ];

$this->add_to_only_used_style_blocks( $this_block );
										}
									} else {
										// legecy code support
										$new_data[ $ele_id . '____info' ] = $single_res_value['data'][ $ele_id . '____info' ];
									}
								}
							}
							$interactionData[ $el_as_target_key ][ $event_key ][ $custom_or_preset_key ][ $single_res_key ]['data'] = $new_data;
						}
					}
				}
			}
		}
		return $interactionData;
	}

private function updateStylesForInteractionLibrary( $interactionLibraryData, $element ) {
		$id = $element['id'];
		foreach ( $interactionLibraryData as $interactionLibrary ) {
			if ( isset( $interactionLibrary['type'] ) && $interactionLibrary['type'] === 'textAnimation'  ) {
				if( isset($interactionLibrary['trigger']) && $interactionLibrary['trigger'] === 'scrollIntoView' ) {
						$devices = isset( $interactionLibrary['deviceAndClassList']['devices'] ) ? $interactionLibrary['deviceAndClassList']['devices'] : array();
						$this->interaction_library_text_animation_tracker[ $id ] = $devices;
						break;	
				}
			}
		}
		return $interactionLibraryData;
	}

/**
	 * Get element related config
	 *
	 * @return array
	 */
	public function get_element_related_config() {
		return array(
			'interactions' => $this->interactions,
			'sliders'      => $this->sliders,
			'popups'       => $this->popups,
			'maps'         => $this->maps,
			'lotties'      => $this->lotties,
			'tabs'         => $this->tabs,
			'lightboxes'   => $this->lightboxes,
			'collections'  => $this->collections,
			'forms'        => $this->forms,
			'reCaptchas'   => $this->re_captchas,
			'dropdown'     => $this->dropdown,
		);
	}

/**
	 * Merge element related config.
	 *
	 * Set/merge all element releted cofig.
	 *
	 * @param array $configs element congiguration.
	 *
	 * @return void
	 */
	public function merge_element_related_config( $configs ) {
		$this->interactions = array_merge( $this->interactions, $configs['interactions'] );
		$this->sliders      = array_merge( $this->sliders, $configs['sliders'] );
		$this->popups       = array_merge( $this->popups, $configs['popups'] );
		$this->maps         = array_merge( $this->maps, $configs['maps'] );
		$this->lotties      = array_merge( $this->lotties, $configs['lotties'] );
		$this->tabs         = array_merge( $this->tabs, $configs['tabs'] );
		$this->lightboxes   = array_merge( $this->lightboxes, $configs['lightboxes'] );
		$this->collections  = array_merge( $this->collections, $configs['collections'] );
		$this->forms        = array_merge( $this->forms, $configs['forms'] );
		$this->re_captchas  = array_merge( $this->re_captchas, $configs['reCaptchas'] );
		$this->dropdown     = array_merge( $this->dropdown, $configs['dropdown'] );
	}

/**
	 * Check popup inside button element. Insert the popup inside data.
	 *
	 * @param array $button_properties button properties.
	 *
	 * @return void
	 */
	private function check_popup_inside_button( $button_properties ) {
		// Search for popups.
		$type = isset( $button_properties['type'] ) ? $button_properties['type'] : '';

if ( $type === 'popup' ) {
			$popup_id = (int) $button_properties['attributes']['popup'];
			if ( is_numeric( $popup_id ) ) {
				$this->insert_popup_into_data( $popup_id );
			}
		}
	}

/**
	 * Check popup inside form element. then insert the popup data.
	 *
	 * @param array $form_properties form properties.
	 * @return void
	 */
	private function check_popup_inside_form( $form_properties ) {
		// Search for popups.
		$action_on_submit = isset( $form_properties['onSubmit']['type'] ) ? $form_properties['onSubmit']['type'] : '';

$action_on_submit_success = isset( $form_properties['onSubmit']['value']['success'] ) ? $form_properties['onSubmit']['value']['success'] : '';

$action_on_submit_fail = isset( $form_properties['onSubmit']['value']['fail'] ) ? $form_properties['onSubmit']['value']['fail'] : '';

if ( $action_on_submit === 'popup' ) {
			if ( is_numeric( $action_on_submit_success ) ) {
				$this->insert_popup_into_data( $action_on_submit_success );
			}

if ( is_numeric( $action_on_submit_fail ) ) {
				$this->insert_popup_into_data( $action_on_submit_fail );
			}
		}
	}

/**
	 * Insert popup into data
	 *
	 * @param int $popup_id popup post id.
	 *
	 * @return void
	 */
	private function insert_popup_into_data( $popup_id ) {
		if ( in_array( $popup_id, self::$only_used_popup_id_array, true ) ) {
			return;
		}
		self::$only_used_popup_id_array[] = $popup_id;
	}

/**
	 * Recursive function to generate html string
	 *
	 * @param int   $id root id.
	 * @param array $options elements option.
	 *
	 * @return string
	 */
	public function recGenHTML( $id, $options = array() ) {
		if ( ! isset( $this->data[ $id ] ) ) {
			return '';
		}
		$this_data = $this->data[ $id ];
		if ( isset( $this_data['hide'] ) && $this_data['hide'] === true ) {
			return '';
		}

if ( isset( $this_data['properties'], $this_data['properties']['access'] ) ) {
			if ( ! ( isset( $options['check_access'] ) && $options['check_access'] === false ) && ! HelperFunctions::is_element_accessible( $this_data['properties']['access'] ) ) {
				return '';
			}
		}

if ( isset( $this_data['properties'], $this_data['properties']['visibilityConditions'] ) ) {
			if ( ! HelperFunctions::checkVisibilityConditions( $this_data, $options ) ) {
				return '';
			}
		}

$options = array_merge(
			$options,
			['element_id' => $id]
		);

$this->insertElementRelatedConfig( $this_data, $options );

if ( isset( $this_data['source'] ) && $this_data['source'] !== 'kirki' ) {
			// if souce is not equal kirki then the element came from external plugin
			return $this->external_element_apply_filter_hook( $this_data['source'], $this_data, $options );
		} else {
			if(isset($this_data['name'])){
				$html = $this->external_element_apply_filter_hook( $this_data['name'], $this_data, $options );
				if ( $html ) {
					return $html;
					}
			}
		}
		return $this->generateSingleElement( $this_data, $options );
	}

public function generateSingleElement( $this_data, $options ) {
		if (isset( $this_data['name'] ) && in_array( $this_data['name'], $this->exceptional_elements, true ) ) {
			if ( ! in_array( $this_data['name'], $this->exceptional_elements_contains_dyn_content, true ) || isset( $this_data['properties']['dynamicContent'] ) ) {
				return $this->get_this_exceptional_element( $this_data, $this->getAllAttributes( $this_data ), $options );
			}
		}
		$html = '';
		if ( isset( $this_data['properties'], $this_data['properties']['noEndTag'] ) ) {
			$html = $this->noEndTagElements( $this_data, $options );
		} else {
			$html = $this->hasEndTagElements( $this_data, $options );
		}
		return $html;
	}

public function external_element_apply_filter_hook( $source, $this_data, $options ) {
		return apply_filters(
			'kirki_element_generator_' . $source,
			false,
			array(
				'element'                            => $this_data,
				'elements'                           => $this->data,
				'style_blocks'                       => $this->style_blocks,
				'attributes'                         => $this->getAllAttributes( $this_data ),
				'options'                            => $options,
				'generate_child_element'             => array( $this, 'recGenHTML' ),
				'generate_element'                   => array( $this, 'generateSingleElement' ),
				'generate_child_element_with_new_id' => array( new HelperFunctions(), 'rec_update_data_id_then_return_new_html' ),
				'get_data_and_styles_from_root'      => array( new DataHelper(), 'get_data_and_styles_from_root' ),
				'get_collection_info'                => array( $this, 'get_collection_info' ),
			)
		);
	}

/**
	 * Elements for has end tag
	 *
	 * @param array $this_data single element data.
	 * @param array $options element options data.
	 *
	 * @return string html markup.
	 */
	private function hasEndTagElements( $this_data, $options ) {
		$tag          = isset( $this_data['properties'], $this_data['properties']['tag'] ) ? $this_data['properties']['tag'] : 'div';
		$attributes   = $this->getAllAttributes( $this_data );
		$preload_link = '';

if ( isset($this_data['name']) && $this_data['name'] == 'link-text' ) {
			$href = $this->get_href_value( $this_data, $options );

if ( $href ) {
				// replace href.
				$attributes = preg_replace( '/href="([^"]+")/i', "href='$href'", $attributes );

// check if the link is active.
				$attributes = $this->add_link_active_class( $href, $attributes );

$preload_link = $this->get_preload_link( $href, $this_data );
			}

if ( isset( $this_data['properties']['dynamicContent'] ) ) {
				unset( $this_data['properties']['dynamicContent'] );
			}
		}

$child_content_or_html = $this->get_child_content_or_childrens( $this_data, $options );

$nested_not_allowed_tags = array( 'a', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' );
		if ( in_array( $tag, $nested_not_allowed_tags ) && HelperFunctions::check_string_has_this_tags( $child_content_or_html, $tag ) ) {
			$tag = 'div';
		}
		// Start Tag <div>.
		$html      = '<' . $tag . ' ' . $attributes . '>';
			$html .= $child_content_or_html;
		$html     .= '</' . $tag . '>';
		$html     .= $preload_link;
		// End Tag </div>.
		return $html;
	}

public function get_child_content_or_childrens( $this_data, $options ) {
		$html = '';
		if ( ! isset( $this_data['children'] ) ) {
			$html .= $this->print_content( $this_data, $options );
		} else {
			// Check if the current element has children
			if ( isset( $this_data['id'], $this->data[ $this_data['id'] ], $this->data[ $this_data['id'] ]['children'] ) ) {
				$child_count = count( $this->data[ $this_data['id'] ]['children'] );
				for ( $i = 0; $i < $child_count; $i++ ) {
					// Position of the child inside its parent. Kept separate from `item_index`,
					// which carries the collection item index down the whole item markup.
					$merged_options    = array_merge(
							$options,
							array(
								'child_index' => $i,
							)
						);
					$html .= $this->recGenHTML( $this->data[ $this_data['id'] ]['children'][ $i ], $merged_options );
				}
			}
		}
		return $html;
	}

/**
	 * Print richtext content.
	 *
	 * @param array $this_data single element data.
	 * @param array $options single element options/dynamic data.
	 * @return string html markup.
	 */
	private function print_content( $this_data, $options ) {
		$html            = '';
		$properties      = $this_data['properties'];
		$content         = isset( $properties['contents'] ) ? $properties['contents'] : '';
		$dynamic_content = isset( $properties['dynamicContent'] ) ? $properties['dynamicContent'] : false;
		$tag             = isset( $this_data['properties'], $this_data['properties']['tag'] ) ? $this_data['properties']['tag'] : 'div';

if ( $dynamic_content ) {
			$html = Utils::getDynamicRichTextValue( $dynamic_content, $options );
		} else {
			if ( is_array( $content ) ) {
				$content_count = count( $content );
				for ( $i = 0; $i < $content_count; $i++ ) {
					if ( is_array( $content[ $i ] ) ) {
						if( isset($content[ $i ]['id']) ){
							$html .= $this->recGenHTML( $content[ $i ]['id'], $options );
						}
					} else {
						$html .= htmlspecialchars( $content[ $i ] );
					}
				}
			} else {
				$html .= htmlspecialchars( $content );
			}
		}

$href = $this->get_href_value( $this_data, $options );

if ( $tag !== 'a' && $href ) {
			$target = isset( $properties['attributes'], $properties['attributes']['target'] ) ? "target={$properties['attributes']['target']}" : '';
			$rel = '';

// check if rel is array and convert to string
			if (isset($properties['attributes'], $properties['attributes']['rel'])) {
				$rel_value = $properties['attributes']['rel'];

if (is_array($rel_value)) {
					$rel_value = implode(' ', $rel_value);
				}

$rel = "rel='{$rel_value}'";
			}

if ( isset( $properties['type'] ) ) {
				$html = "<a href='{$href}' {$target} {$rel}>{$html}</a>";
			}
		}

return $html;
	}

public function get_href_value( $this_data, $options = array() ) {
		$name            = $this_data['name'];
		$properties      = $this_data['properties'];
		$dynamic_content = isset( $properties['dynamicContent'] ) ? $properties['dynamicContent'] : false;
		$href            = isset( $properties['attributes']['href'] ) ? $properties['attributes']['href'] : false;

switch ( $name ) {
			case 'link-block':
			case 'link-text':
			case 'navigation-item':
			case 'paragraph':
			case 'heading':
			case 'button': {
				if ( $dynamic_content ) {

$contentInfo = array(
						'dynamicContent' => $dynamic_content,
						'options'        => $options,
					);
					if ( isset( $options['itemType'], $options[ $options['itemType'] ], $options[ $options['itemType'] ]->ID ) ) {
						$contentInfo['collectionItem'] = array(
							'ID' => $options[ $options['itemType'] ]->ID,
						);
					}
					$content = apply_filters( 'kirki_dynamic_content', false, $contentInfo );
					if ( $content ) {
						// Plain-text dynamic values (comment fields) are visitor supplied,
						// so they are never trusted as a URL here.
						if ( is_string( $content ) && in_array( $dynamic_content['type'] ?? '', Utils::get_plain_text_dynamic_content_types(), true ) ) {
							return esc_url( html_entity_decode( $content, ENT_QUOTES | ENT_HTML5, 'UTF-8' ) );
						}
						return $content;
					}

if ( $dynamic_content['type'] === 'post' ) {
						if ( isset( $options['post'], $dynamic_content['value'] ) && isset( $options['post']->{$dynamic_content['value']} ) ) {
							$href = $options['post']->{$dynamic_content['value']};
						} else {
							$href = HelperFunctions::get_post_dynamic_content( isset($dynamic_content['value']) ? $dynamic_content['value'] : false, isset( $options['post'] ) ? $options['post'] : null );
						}
					} elseif ( $dynamic_content['type'] === 'term' && isset( $options['term'], $options['term']['term_id'] ) ) {

// $href = get_tag_link($options['term']['term_id']);

$term     = $options['term'];
						$taxonomy = isset( $term['taxonomy'] ) ? $term['taxonomy'] : 'post_tag';

$href = get_term_link( $term['term_id'], $taxonomy );
						if ( is_wp_error( $href ) ) {
								error_log( 'get_term_link error: ' . $href->get_error_message() );
								$href = '';
						}
						// $href = $options['post']->{$dynamic_content['value']};
					} elseif ( $dynamic_content['type'] === 'menu' && isset( $options['menu'], $options['menu']->{$dynamic_content['value']} ) ) {
						$href = $options['menu']->{$dynamic_content['value']};
					} elseif ( $dynamic_content['type'] === 'user' && isset( $options['user'], $options['user'][ $dynamic_content['value'] ] ) ) {
						$href = $options['user'][ $dynamic_content['value'] ];
						// $href = $options['post']->{$dynamic_content['value']};
					} else {
						$itemType = $dynamic_content['type'];
						if ( isset( $options[ $itemType ] ) ) {
							$data  = $options[ $itemType ] ?? array();
							$value = isset( $data[ $dynamic_content['value'] ] ) ? $data[ $dynamic_content['value'] ] : '';
							$href  = $value;
						}
					}
				} elseif ( $dynamic_content && isset( $options['itemType'], $dynamic_content['value'] ) && $options['itemType'] === 'term' ) {
					$term     = $options['term'];
					$property = $dynamic_content['value'];
					// Check if 'term' and the dynamic property are set
					if ( isset( $term ) && isset( $term->$property ) ) {
						// Use the dynamic property's value as the href
						$href = $term->$property;
					} else {
						// Use the fallback link generated by get_tag_link
						$href = get_tag_link( $term['term_id'] );
					}
					$href = HelperFunctions::content_manager_link_filter( $dynamic_content, $href );
				} else {
					if ( isset( $properties['type'] ) ) {
						if ( $properties['type'] === 'popup' ) {
							// $href = 'javascript:void(0);';
						} elseif ( $properties['type'] === 'page' ) {
							$href = isset( $properties['attributes']['href'] ) ? $properties['attributes']['href'] : false;
							if ( is_numeric( $href ) && intval( $href ) == $href ) {
								// thats means its a page id
								$href = get_permalink( $href );
							}
						} elseif ( $properties['type'] === 'section' ) {
							$cleaned_id = ltrim( $href, '#' );
							$href       = '#' . self::get_unique_section_id_from_title( $cleaned_id );
						}
					}
				}
				return $href;
			}
			default: {
				return $href;
			}
		}
	}

public function get_unique_section_id_from_title( $current_id ) {
		if ( isset( self::$section_id_tracker_for_href[ $current_id ] ) ) {
			return self::$section_id_tracker_for_href[ $current_id ];
		}

$section_title = isset( $this->data[ $current_id ]['title'] ) ? $this->data[ $current_id ]['title'] : $current_id;
		$base_slug     = strtolower( preg_replace( '/\s+/', '-', $section_title ) );
		$href          = $base_slug;
		$suffix        = 1;

while ( in_array( $href, self::$section_id_tracker_for_href ) ) {
			$href = $base_slug . '-' . $suffix++;
		}

self::$section_id_tracker_for_href[ $current_id ] = $href;
		return $href;
	}

/**
	 * Get preload link
	 *
	 * @param string $href value
	 * @param array  $this_data single element data.
	 *
	 * @return string preload link
	 */
	public function get_preload_link( $href, $this_data ) {
		$properties = $this_data['properties'];

if ( isset( $properties['preload'] ) && $properties['preload'] !== 'default' ) {
			return '<link rel="' . $properties['preload'] . '" href="' . $href . '">';
		}

return '';
	}

/**
	 * Get class names
	 *
	 * @param string $href value
	 * @param array  $this_data single element data.
	 * @param string $attributes
	 *
	 * @return string updated attributes
	 */
	public function add_link_active_class( $href, $attributes, $this_data = null, $options = null ) {

if ( ! $href ) {
			return $attributes;
		}

// Resolve $href to a post ID
		$targetId = null;
		$is_home  = false;

// 1. If it's a plain permalink like ?page_id=437
		if ( strpos( $href, 'page_id=' ) !== false ) {
			$url_parts = wp_parse_url( $href );
			if ( ! empty( $url_parts['query'] ) ) {
				parse_str( $url_parts['query'], $params );
				if ( ! empty( $params['page_id'] ) ) {
					$targetId = (int) $params['page_id'];
				}
			}
		} else {
			// 2. If it's a relative or full pretty permalink
			if ( strpos( $href, 'http' ) !== 0 ) {
				$href = home_url( $href );
			}

$href     = rtrim( $href, '/' );
			$home_url = rtrim( home_url(), '/' );

if ( $href === $home_url ) {
				$is_home = true;
			} else {
				$post = get_page_by_path( ltrim( (string) wp_parse_url( $href, PHP_URL_PATH ), '/' ) );

if ( $post ) {
					$targetId = $post->ID;
				}
			}
		}

$currentId       = HelperFunctions::get_post_id_if_possible_from_url();
		$home_page_id    = get_option( 'page_on_front' );
		$current_term_id = HelperFunctions::get_term_id_if_possible_from_url();
		$current_url     = strtok( home_url( add_query_arg( null, null ) ), '?' );
		$current_url     = rtrim( $current_url, '/' );
		$term_id         = null;

if ( $this_data && $options && isset( $this_data['properties']['dynamicContent'] ) && $this_data['properties']['dynamicContent']['type'] && $this_data['properties']['dynamicContent']['type'] === 'term' && $this_data['properties']['dynamicContent']['value'] === 'link' ) {
			$term_id = $options['term']['term_id'];
		}

$is_match = (
		( $targetId && $currentId && $targetId === $currentId ) ||
		( $is_home && $currentId && $currentId === intval( $home_page_id ) ) ||
		( $term_id && $current_term_id && $term_id === $current_term_id ) ||
		( $current_url === $href )
		);

if ( $is_match ) {
			if ( preg_match( '/class="/i', $attributes ) ) {
				$attributes = preg_replace(
					'/class="([^"]*)"/i',
					'class="$1 ' . 'kirki-active-link"',
					$attributes
				);
			} else {
				$attributes .= ' class="' . 'kirki-active-link"';
			}
		}

return $attributes;
	}

/**
	 * Elements for no end tag
	 *
	 * @param array $this_data element single data.
	 * @param array $options element single option data.
	 *
	 * @return string html markup.
	 */
	private function noEndTagElements( $this_data, $options ) {
		$html = '<' . $this_data['properties']['tag'] . ' ' . $this->getAllAttributes( $this_data ) . '/>';
		return $html;
	}

/**
	 * Get elements all attributes
	 *
	 * @param array $this_element single element data.
	 * @param array $filter_condition Attribute filter condition. Empty array returns all attributes.
	 *
	 * @return string attributes string.
	 */
	public function getAllAttributes( $this_element, $filter_condition = array() ) {
		if ( ! isset( $this_element['properties'] ) ) {
			return '';
		}

$attr_str    = '';
		$class_names = trim( $this->getClassNames( $this_element ) );
		if ( $class_names ) {
			$attr_str .= 'class="' . $class_names . '"';
		}

$others_attributes = '';
		if ( isset( $this_element['properties']['attributes'] ) ) {
			$attributes   = $this_element['properties']['attributes'];
			$element_name = $this_element['name'];

if ( $this_element['name'] === 'image' && isset( $attributes['width'] ) ) {
				unset( $attributes['width'] );
			}

$others_attributes = array_map(
				function ( $value, $key ) use ( $element_name ) {
					if ( in_array( $element_name, $this->prevent_anchor_elements, true ) && in_array( $key, $this->anchor_attrs, true ) ) {
						return '';
					}

if ( ! $this->attribute_validation( $key, $value ) ) {
						return '';
					}

if ( is_array( $value ) ) {
						$value = implode( ' ', $value );
					}

return $key . '="' . $value . '"';
				},
				array_values( $attributes ),
				array_keys( $attributes )
			);

$others_attributes = ' ' . implode( ' ', $others_attributes );
		}

$custom_attributes = '';
		if ( isset( $this_element['properties']['customAttributes'] ) ) {
			// phpcs:ignore WordPress.PHP.DisallowShortTernary.Found
			$attributes        = $this_element['properties']['customAttributes'] ?: array();
			$custom_attributes = array_map(
				function ( $value, $key ) {
					return $key . '="' . $value . '"';
				},
				array_values( $attributes ),
				array_keys( $attributes )
			);
			$custom_attributes = ' ' . implode( ' ', $custom_attributes );
		}

if ( count( $filter_condition ) > 0 ) {
			$merged_attributes = array_merge( $this_element['properties']['attributes'], $attributes );
			// Merge attributes from other sources.
			$merged_attributes['class']      = $class_names;
			$merged_attributes['data-kirki'] = $this_element['id'];

if ( isset( $filter_condition['rest'] ) && false === $filter_condition['rest'] ) {
				// `rest => false` will pick only the `true` filter attributes.
				$filtered_attributes = array_filter(
					$merged_attributes,
					function ( $at ) use ( $filter_condition ) {
						return array_key_exists( $at, $filter_condition ) && true === $filter_condition[ $at ];
					},
					ARRAY_FILTER_USE_KEY
				);
			} else {
				// By default `rest` will be avaluted to `true`, so it will only remove the `false` attributes.
				$filtered_attributes = array_filter(
					$merged_attributes,
					function ( $at ) use ( $filter_condition ) {
						return ! ( array_key_exists( $at, $filter_condition ) && false === $filter_condition[ $at ] );
					},
					ARRAY_FILTER_USE_KEY
				);
			}

$attr_str = array_reduce(
				array_keys( $filtered_attributes ),
				function ( $carry, $key ) use ( $filtered_attributes ) {
					return $carry . ' ' . $key . '=' . wp_json_encode( $filtered_attributes[ $key ] );
				},
				'',
			);

} else {
			$attr_str .= ' data-kirki="' . $this_element['id'] . '"' . $others_attributes . $custom_attributes;
		}

if(!empty($this_element['properties']['textStyleId'])) {
			$attr_str .= ' data-text_style="' . $this_element['properties']['textStyleId'] . '"';
		}

if ( $this->include_component_field_metadata ) {
			$properties = $this_element['properties'];

if ( ! empty( $properties['symbolElPropId'] ) ) {
				$attr_str .= ' data-kirki-symbol-el-prop-id="' . esc_attr( $properties['symbolElPropId'] ) . '"';
			}

if ( ! empty( $properties['componentFieldBindings'] ) ) {
				$bindings = base64_encode( wp_json_encode( $properties['componentFieldBindings'] ) );
				$attr_str .= ' data-kirki-component-field-bindings="' . esc_attr( $bindings ) . '"';
			}

if ( 'symbol' === $this_element['name'] && ! empty( $properties['symbolId'] ) ) {
				$attr_str .= ' data-kirki-component-symbol-id="' . esc_attr( $properties['symbolId'] ) . '"';
			}
		}

// $attr_str .= ' data-kirki_name="' . $this_element['name'] . '"';

return $attr_str;
	}

/**
	 * Attribute validation form different element attributes.
	 *
	 * @param string $attr name of the attribute.
	 * @param string $value value of the attribute.
	 *
	 * @return bool
	 */
	private function attribute_validation( $attr, $value ) {
		if ( $attr === 'multiple' && ! $value ) {
			return false;
		} elseif ( $attr === 'required' && ! $value ) {
			return false;
		} elseif ( $attr === 'src' && ! $value ) {
			return false;
		} elseif ( $attr === 'href' && ! $value ) {
			return false;
		} elseif ( $attr === 'checked' && ! $value ) {
			return false;
		}
		return true;
	}

/**
	 * Get element class names
	 *
	 * @param array $this_element element data.
	 *
	 * @return string
	 */
	private function getClassNames( $this_element ) {
		$class_array = array();

$style_ids = isset( $this_element['styleIds'] ) ? $this_element['styleIds'] : array();

$manageble_style_ids = isset( $this_element['properties'], $this_element['properties']['classesIds'] ) ? $this_element['properties']['classesIds'] : array();
		// add in first in styleids
		$style_ids = array_merge($manageble_style_ids, $style_ids);

if ( ! empty( $style_ids ) ) {
			$style_ids_count = count( $style_ids );
			for ( $i = 0; $i < $style_ids_count; $i++ ) {
				$style_id = $style_ids[ $i ];
				$s_block  = isset( $this->style_blocks[ $style_id ] ) ? $this->style_blocks[ $style_id ] : null;
				if ( ! isset( $s_block ) ) {
					continue;
				}
				$this->add_to_only_used_style_blocks( $s_block );
				$c_name = $s_block['name'];
				if ( is_array( $c_name ) ) {
					$c_name      = HelperFunctions::add_prefix_to_class_name( $this->prefix, $c_name );
					$class_array = array_merge( $class_array, $c_name );
				} else {
					$class_array[] = HelperFunctions::add_prefix_to_class_name( $this->prefix, $c_name );
				}
			}
		}

$ele_class_names = isset( $this_element['className'] ) ? explode( ' ', $this_element['className'] ) : array();
		$class_array     = array_merge( $ele_class_names, $class_array );

if ( in_array( $this_element['name'], $this->inline_elements, true ) ) {
			array_push( $class_array, 'kirki-inline-element' );
		}

// Check if 'kirki-active-link' class is already added then remove it
		$class_array = array_filter(
			$class_array,
			function ( $class ) {
				return $class !== 'kirki-active-link';
			}
		);

return $this->makeClassStringFromArray( $class_array );
	}

/**
	 * Make class string from array
	 *
	 * @param array $arr class array.
	 *
	 * @return string
	 */
	private function makeClassStringFromArray( $arr ) {
		$arr = array_unique( $arr );
		$arr = array_map(
			function ( $c ) {
				return HelperFunctions::get_class_name_from_string( $c );
			},
			$arr
		);
		return join( ' ', $arr );
	}
}

global, migrated, symbols. etc. */ protected $style_blocks = array(); /** * $only_used_style_blocks only used style blocks. */ private $only_used_style_blocks = array(); /** * $only_used_popup_id_array only used popup post ids. */ public static $only_used_popup_id_array = array(); /** * $printed_font_family_tracker for tracking already printed font family markup. */ private static $printed_font_family_tracker = array(); private static $printed_variable_tracker = array(); private static $section_id_tracker_for_href = array(); // ['section_id' => 'Section-2', 'section_id_1' => 'section-2-1' ] /** * $view_ports user all viewports data. */ private $view_ports = array(); /** * Initialize some variables for element related data. Like: custom codes, lightbox, map, slider etc. * START */ /** * $sliders for collect slider elements data. */ private $sliders = array(); /** * $navigation for collect navigation elements data. */ private $navigations = array(); /** * $navigation item for collect navigation item elements data. */ private $navigation_item = array(); /** * $inputs for collect inputs elements data. */ private $inputs = array(); /** * $maps for collect map elements data. */ private $maps = array(); /** * $lotties for collect lottie elements data. */ private $lotties = array(); /** * $popups for collect popup elements data. */ private $popups = array(); /** * $tabs for collect tab elements data. */ private $tabs = array(); /** * $lightboxes for collect lightbox elements data. */ private $lightboxes = array(); /** * $re_captchas for collect reCaptcha elements data. */ private $re_captchas = array(); /** * $videos for collect video elements data. */ private $videos = array(); /** * $interactions for collect interaction elements data. */ private $interactions = array(); /** * $interaction library for collect interaction library elements data. */ private $interaction_library = array(); /** * $collections for collect collection elements data. */ private $collections = array(); /** * $forms for collect form elements data. */ private $forms = array(); /** * $liquid_glass for liquid glass effect */ private $liquid_glass = array(); /** * $custom_codes for collect customCode elements data. */ public $custom_codes = ''; /** * $dropdown for collect dropdown elements data. */ private $dropdown = array(); /** * Initialize some variables for element related data. Like: custom codes, lightbox, map, slider etc. * END */ /** * elements wise variable modes array. */ private $ele_variable_modes = array(); /** * interaction ['scroll-into-ele'] & ['scroll-out-ele'] tracker */ private $interaction_preset_and_text_animation_tracker = array(); private $interaction_library_text_animation_tracker = array(); private $scroll_into_custom_interaction_tracker = ''; private $track_animation_for_elements_with_this_class = ''; private $track_animation_for_children_with_this_class = ''; private $track_animation_for_sibling_with_this_class = ''; private $track_animation_for_trigger_sibling_with_this_class = ''; private $track_animation_for_trigger_with_this_class = ''; /** * END */ /** * List of exceptional elements. */ private $exceptional_elements = array( 'custom-code', 'map', 'svg', 'svg-icon', 'textarea', 'select', 'video', 'radio-group', 'checkbox-element', 'radio-button', 'image', 'collection', 'loading', // collection loading element 'items', 'collection-wrapper', 'users', 'pagination', 'pagination-item', 'pagination-number', 'terms', 'menus', 'symbol', 'link-block', 'form', 'button', 'popup-body', 'navigation', 'navigation-item', 'navigation-items', 'section', 'common', 'slider', 'slider_mask', 'slider_nav', 'tabs', 'tab_menu', 'tab', 'tab_content', 'tab_pane' ); /** * List of dynamic content element. */ private $exceptional_elements_contains_dyn_content = array( 'collection' ); /** * List of inline elements. */ private $inline_elements = array( 'button', 'link-block', 'link-text' ); /** * List of anchor elements. */ private $prevent_anchor_elements = array( 'heading', 'image', 'paragraph' ); /** * List anchor attrs. */ private $anchor_attrs = array( 'href', 'target', 'rel' ); /** * Preview script initilizer * * @param array $data elments data array. * @param array $style_blocks elments style_blocks array. * @param string $root root element id. * @param string $symbol_id if preview script is initiate for symbol element generation. * * @return void */ public function __construct( $data, $style_blocks, $root = null, $symbol_id = null, $prefix = false ) { if ( $root ) { $this->root = $root; } else { $this->root = 'root'; } $this->data = $data; $this->style_blocks = $style_blocks; $this->view_ports = UserData::get_view_port_list(); if ( $symbol_id ) { $this->symbol_id = $symbol_id; } $this->prefix = $prefix; } /** * Get the html string * * @return string */ public function getHTML( $options = array() ) { $this->include_component_field_metadata = ! empty( $options['include_component_field_metadata'] ); // TODO: need to fix this code // if(!isset($options['user']) && get_current_user_id() > 0){ // $options['user'] = Users::get_user_by_id(get_current_user_id()); // } return $this->recGenHTML( $this->root, $options ); } /** * Get the style blocks that are used in the html * this method is called after getHtml() method call and from the same instance * * @return string */ public function get_only_used_style_blocks() { return $this->only_used_style_blocks; } public function add_to_only_used_style_blocks( $style_block ) { $this->only_used_style_blocks[ $style_block['id'] ] = $style_block; if ( isset( $style_block['liquid-glass'] ) ) { $this->liquid_glass[ $style_block['id'] ] = array( 'id' => $style_block['id'], 'name' => $style_block['name'], 'liquid-glass' => $style_block['liquid-glass'], 'type' => $style_block['type'], 'prefix' => $this->prefix, ); } } private function updateTranslateCSSString( $end ) { $transforms = array(); if ( ! empty( $end['x']['unit'] ) && $end['x']['unit'] !== 'auto' ) { $transforms[] = 'translateX(' . $this->addUnit( $end['x'] ) . ')'; } if ( ! empty( $end['y']['unit'] ) && $end['y']['unit'] !== 'auto' ) { $transforms[] = 'translateY(' . $this->addUnit( $end['y'] ) . ')'; } if ( ! empty( $end['z']['unit'] ) && $end['z']['unit'] !== 'auto' ) { $transforms[] = 'translateZ(' . $this->addUnit( $end['z'] ) . ')'; } return implode( ' ', $transforms ); // Return only the transform part } private function updateRotateCSSString( $end ) { $rotateProperties = array(); if ( $end['x']['unit'] !== 'auto' ) { $rotateProperties[] = 'rotateX(' . $this->addUnit( $end['x'] ) . ')'; } if ( $end['y']['unit'] !== 'auto' ) { $rotateProperties[] = 'rotateY(' . $this->addUnit( $end['y'] ) . ')'; } if ( $end['z']['unit'] !== 'auto' ) { $rotateProperties[] = 'rotateZ(' . $this->addUnit( $end['z'] ) . ')'; } return implode( ' ', $rotateProperties ); } private function updateSkewCSSString( $end ) { $skewProperties = array(); if ( $end['x']['unit'] !== 'auto' ) { $skewProperties[] = 'skewX(' . $this->addUnit( $end['x'] ) . ')'; } if ( $end['y']['unit'] !== 'auto' ) { $skewProperties[] = 'skewY(' . $this->addUnit( $end['y'] ) . ')'; } return implode( ' ', $skewProperties ); } private function updateScaleCSSString( $end ) { $scaleProperties = array(); if ( $end['x']['unit'] !== 'none' ) { $scaleProperties[] = 'scaleX(' . $end['x']['value'] . ')'; } if ( $end['y']['unit'] !== 'none' ) { $scaleProperties[] = 'scaleY(' . $end['y']['value'] . ')'; } return implode( ' ', $scaleProperties ); } private function addUnit( $valueObj ) { $specialValues = array( 'auto', 'fit-content', 'min-content', 'max-content', 'none', 'scrollHeight', 'scrollWidth' ); // Check if the unit is in specialValues, if so, don't append it $unit = in_array( $valueObj['unit'], $specialValues ) ? '' : $valueObj['unit']; return $valueObj['value'] . $unit; } private function updateCssStringForAnimation( $property, $end ) { $css = ''; $transformProperties = array(); // Store all transform values switch ( $property ) { case 'move': $transformProperties[] = $this->updateTranslateCSSString( $end ); break; case 'rotate': $transformProperties[] = $this->updateRotateCSSString( $end ); break; case 'scale': $transformProperties[] = $this->updateScaleCSSString( $end ); break; case 'size': $css .= 'width: ' . ( $end['width']['value'] === 'scrollWidth' ? 'auto' : $this->addUnit( $end['width'] ) ) . ';'; $css .= 'height: ' . ( $end['height']['value'] === 'scrollHeight' ? 'auto' : $this->addUnit( $end['height'] ) ) . ';'; break; case 'skew': $transformProperties[] = $this->updateSkewCSSString( $end ); break; case 'fade': $css .= 'opacity: ' . $end['value'] . ';'; break; case 'color': $css .= 'color: ' . $end['value'] . '; fill: ' . $end['value'] . ';'; break; case 'border-color': $css .= 'border-color: ' . $end['value'] . ';'; break; case 'border-radius': $css .= 'border-top-left-radius: ' . $this->addUnit( $end['border-top-left-radius'] ) . ';'; $css .= 'border-top-right-radius: ' . $this->addUnit( $end['border-top-right-radius'] ) . ';'; $css .= 'border-bottom-right-radius: ' . $this->addUnit( $end['border-bottom-right-radius'] ) . ';'; $css .= 'border-bottom-left-radius: ' . $this->addUnit( $end['border-bottom-left-radius'] ) . ';'; break; case 'background-color': $css .= 'background: ' . $end['value'] . ';'; break; case 'background-size-position': $css .= 'background-size: ' . $this->addUnit( $end['sizeWidth'] ) . ' ' . $this->addUnit( $end['sizeHeight'] ) . ';'; $css .= 'background-position-x: ' . $this->addUnit( $end['positionX'] ) . ';'; $css .= 'background-position-y: ' . $this->addUnit( $end['positionY'] ) . ';'; break; case 'background-size': $css .= 'background-size: ' . $this->addUnit( $end['sizeWidth'] ) . ' ' . $this->addUnit( $end['sizeHeight'] ) . ';'; break; case 'background-position': $css .= 'background-position-x: ' . $this->addUnit( $end['positionX'] ) . ';'; $css .= 'background-position-y: ' . $this->addUnit( $end['positionY'] ) . ';'; break; case 'filter': $filters = array(); foreach ( $end as $key => $value ) { $filters[] = "$key(" . $this->addUnit( $value ) . ')'; } $css .= 'filter: ' . implode( ' ', $filters ) . ';'; break; default: break; } if ( ! empty( $transformProperties ) ) { $css .= implode( ' ', array_unique( $transformProperties ) ); $transformProperties = array(); // Reset for the next element } return $css; } /** * Get the style tag string * * @param array|bool $blocks all styleblocks. * @return string */ public function getStyleTag( $blocks = false ) { if ( ! $blocks ) { $blocks = $this->style_blocks; } $s = ''; if ( count( $this->ele_variable_modes ) > 0 ) { $s .= $this->getElementWiseVariableCssCodes(); } if ( $blocks ) { foreach ( $this->view_ports as $key => $vp ) { $css = ''; foreach ( $blocks as $style_block ) { $css .= $this->getRawCssDeviceWise( $style_block, $vp ); } if ( $css ) { $s .= "'; } } } return $s; } public function get_interaction_set_as_initial_css() { $s = ''; if ( count( $this->interaction_preset_and_text_animation_tracker ) > 0 || count( $this->interaction_library_text_animation_tracker ) > 0 ) { $animation_css = ''; foreach ( $this->interaction_preset_and_text_animation_tracker as $ele_id => $bool ) { $animation_css .= "[data-kirki='" . $ele_id . "'] { visibility: hidden; }"; } foreach ( $this->interaction_library_text_animation_tracker as $ele_id => $devices ) { $css_value = "[data-kirki='" . $ele_id . "'] { visibility: hidden; }"; $media_queries = ! empty( $devices ) ? $this->setMediaQuery( $css_value, $devices ) : ''; $animation_css .= ! empty( $media_queries ) ? $media_queries : $css_value; } if ( $animation_css ) { $s .= "'; } } if ( $this->scroll_into_custom_interaction_tracker ) { $s .= "'; } if ( $this->track_animation_for_elements_with_this_class ) { $s .= "'; } if ( $this->track_animation_for_children_with_this_class ) { $s .= "'; } if ( $this->track_animation_for_sibling_with_this_class ) { $s .= "'; } if ( $this->track_animation_for_trigger_sibling_with_this_class ) { $s .= "'; } if ( $this->track_animation_for_trigger_with_this_class ) { $s .= "'; } return $s; } private function setInitialAnimation( $ele_id, $animations, $single_res_value ) { $elementStyleValues = array(); $hasClassName = false; $css = ''; $media_queries = ''; foreach ( $animations as $ani_key => $animation ) { if ( ! empty( $animation['setAsInitial'] ) && $animation['setAsInitial'] ) { foreach ( $this->processElementStyles( $ele_id, $animation ) as $key => $value ) { if ( ! isset( $elementStyleValues[ $key ] ) ) { $elementStyleValues[ $key ] = array( 'transform' => $value['transform'] ?? array(), 'other' => $value['other'] ?? array(), ); } else { $elementStyleValues[ $key ]['transform'] = array_merge( $elementStyleValues[ $key ]['transform'] ?? array(), $value['transform'] ?? array() ); $elementStyleValues[ $key ]['other'] = array_merge( $elementStyleValues[ $key ]['other'] ?? array(), $value['other'] ?? array() ); } } } } if ( ! empty( $elementStyleValues ) ) { $css .= $this->setAnimationStyles( $elementStyleValues, $hasClassName ); $media_queries = $this->getMediaQuery( $css, $single_res_value ); $this->scroll_into_custom_interaction_tracker .= ! empty( $media_queries ) ? $media_queries : $css; } } private function setAnimationStyles( $elementStyleValues, $hasClassName ) { $s = ''; foreach ( $elementStyleValues as $ele_id => $styles ) { if ( empty( $styles['transform'] ) && empty( $styles['other'] ) ) { continue; } $css = $hasClassName ? '' : "[data-kirki='$ele_id'] { "; $css .= ! empty( $styles['transform'] ) ? 'transform: ' . implode( ' ', $styles['transform'] ) . '; ' : ''; $css .= ! empty( $styles['other'] ) ? implode( ' ', $styles['other'] ) : ''; $css .= $hasClassName ? '' : ' }'; $s .= $css; } return $s; } private function processElementStyles( $ele_id, $animation ) { $elementStyles = array(); // Ensure the array is initialized properly if ( ! isset( $elementStyles[ $ele_id ] ) ) { $elementStyles[ $ele_id ] = array( 'transform' => array(), 'other' => array(), ); } if ( ! isset( $animation['property'] ) || ! isset( $animation['end'] ) ) { return array(); // Skip invalid animations } $cssValue = $this->updateCssStringForAnimation( $animation['property'], $animation['end'] ); if ( ! empty( $cssValue ) ) { switch ( $animation['property'] ) { case 'move': case 'rotate': case 'scale': case 'skew': $elementStyles[ $ele_id ]['transform'][] = $cssValue; break; default: $elementStyles[ $ele_id ]['other'][] = $cssValue; break; } } return $elementStyles; } /** * Get the html string * * @param array $block single style block. * @param array $vp viewport. * * @return string */ private function getRawCssDeviceWise( $block, $vp ) { $css_string = ''; $selector = $this->getSelectorFromBlock( $block ); $variants = $block['variant']; $global_css = ""; $local_css = ""; foreach ( $variants as $key => $value ) { $variant = explode( '_', $key ); if ( $variant[0] === $vp['id'] ) { if( $block && isset($block['isGlobalStyle']) && $block['isGlobalStyle'] === true){ $global_css .= $this->createMediaQueryString( $selector, $key, $value, $vp ); }else{ $local_css .= $this->createMediaQueryString( $selector, $key, $value, $vp ); } } } return $global_css . $local_css; } /** * Create Media Query String * * @param string $selector calss/tag selector like => .class-name. * @param string $device_name media query key like => md. * @param string $css_text css text like => color:red. * @param object $vp current viewport object. * * @return string */ private function createMediaQueryString( $selector, $device_name, $css_text, $vp ) { if ( $css_text === '' ) { return ''; } $css_string = ''; $variant = explode( '_', $device_name ); $type = $vp['type']; if ( count( $variant ) === 1 ) { // default class or sub class for devices. if ( $variant[0] === 'md' ) { $css_string .= $selector . '{' . $css_text . '}'; } elseif ( isset( $this->view_ports[ $variant[0] ] ) ) { $css_string .= '@media only screen and (' . $type . '-width: ' . $this->view_ports[ $variant[0] ][ $type . 'Width' ] . 'px) {' . $selector . '{' . $css_text . '}}'; } } elseif ( count( $variant ) === 2 ) { // active, hover, focus or pseudo class. $psuedo_class = $this->checkIfHasPsuedoClassValue( $variant[1] ); if ( $variant[0] === 'md' ) { $css_string .= $selector . $psuedo_class . '{' . $css_text . '}'; } elseif ( isset( $this->view_ports[ $variant[0] ] ) ) { $css_string .= '@media only screen and (' . $type . '-width: ' . $this->view_ports[ $variant[0] ][ $type . 'Width' ] . 'px) {'; $css_string .= $selector . $psuedo_class . '{' . $css_text . '}'; $css_string .= '}'; } } elseif ( count( $variant ) === 3 ) { // active, hover, focus + pseudo class. $psuedo_class1 = $this->checkIfHasPsuedoClassValue( $variant[1] ); $psuedo_class2 = $this->checkIfHasPsuedoClassValue( $variant[2] ); if ( $variant[0] === 'md' ) { $css_string .= $selector . $psuedo_class1 . $psuedo_class2 . '{' . $css_text . '}'; } elseif ( isset( $this->view_ports[ $variant[0] ] ) ) { $css_string .= '@media only screen and (' . $type . '-width: ' . $this->view_ports[ $variant[0] ][ $type . 'Width' ] . 'px) {'; $css_string .= $selector . $psuedo_class1 . $psuedo_class2 . '{' . $css_text . '}'; $css_string .= '}'; } } return $css_string; } /** * Get the script tag string * * @return string */ public function getScriptTag( $should_take_app_script = true ) { $s = ''; $empty_vars = $this->getVariableString( 'Sliders', $this->sliders ); $empty_vars .= $this->getVariableString( 'Maps', $this->maps ); $empty_vars .= $this->getVariableString( 'Lotties', $this->lotties ); $empty_vars .= $this->getVariableString( 'Popups', $this->popups ); $empty_vars .= $this->getVariableString( 'Lightboxes', $this->lightboxes ); $empty_vars .= $this->getVariableString( 'ReCaptchas', $this->re_captchas ); $empty_vars .= $this->getVariableString( 'Videos', $this->videos ); $empty_vars .= $this->getVariableString( 'Tabs', $this->tabs ); $empty_vars .= $this->getVariableString( 'Interactions', $this->interactions ); $empty_vars .= $this->getVariableString( 'InteractionLibrary', $this->interaction_library ); $empty_vars .= $this->getVariableString( 'Collections', $this->collections ); $empty_vars .= $this->getVariableString( 'Forms', $this->forms ); $empty_vars .= $this->getVariableString( 'Dropdown', $this->dropdown ); $empty_vars .= $this->getVariableString( 'Navigations', $this->navigations ); $empty_vars .= $this->getVariableString( 'NavigationItem', $this->navigation_item ); $empty_vars .= $this->getVariableString( 'Inputs', $this->inputs ); $empty_vars .= $this->getVariableString( 'LiquidGlass', $this->liquid_glass ); if ( $empty_vars ) { $s .= "'; } if ( $this->custom_codes ) { $s .= "'; } $updatedScriptTags = false; if ( $should_take_app_script ) { $updatedScriptTags = apply_filters('kirki_add_script_tags', $s ); } if ( $updatedScriptTags ) { $s = $updatedScriptTags; } return $s; } private function getVariableString( $name, $value ) { if ( count( $value ) === 0 ) { return ''; } $prefix = 'kirki'; $value = wp_json_encode( $value ); // SECURITY (prototype-pollution guard): only merge a PRE-EXISTING value when it is // an OWN property of window. `window.kirkiX === undefined` is false when // `Object.prototype.kirkiX` has been polluted (crafted query params / third-party // gadget), and `{...kirkiX, ...}` would then launder attacker-controlled keys into a // real own property that downstream scripts trust. Starting from `{}` unless window // truly owns the value keeps inherited (attacker) data out. $s = "var $prefix$name = Object.assign({}, (Object.prototype.hasOwnProperty.call(window, '$prefix$name') && window.$prefix$name) || {}, $value);"; return $s; } /** * Returns the JS code with `