JezK

Edit File: Interactive_Circle.php

<?php

namespace Essential_Addons_Elementor\Elements;

// If this file is called directly, abort.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

use \Elementor\Controls_Manager;
use \Elementor\Group_Control_Background;
use \Elementor\Group_Control_Border;
use \Elementor\Group_Control_Box_Shadow;
use \Elementor\Group_Control_Typography;
use \Elementor\Icons_Manager;
use \Elementor\Plugin;
use \Elementor\Repeater;
use Elementor\Modules\DynamicTags\Module as TagsModule;
use \Elementor\Widget_Base;
use \Essential_Addons_Elementor\Classes\Helper;

class Interactive_Circle extends Widget_Base {
	public function get_name() {
		return 'eael-interactive-circle';
	}

public function get_title() {
		return esc_html__( 'Interactive Circle', 'essential-addons-for-elementor-lite' );
	}

public function get_icon() {
		return 'eaicon-interactive-circle';
	}

public function get_categories() {
		return [ 'essential-addons-elementor' ];
	}

public function get_keywords() {
		return [
			'interactive circle',
			'interactive tabs',
			'interactive infobox',
			'ea interactive circle',
			'ea interactive infobox',
			'ea interactive tabs',
			'circle',
			'ea circle',
			'ea',
			'essential addons',
		];
	}

protected function is_dynamic_content():bool {
		if ( Plugin::$instance->editor->is_edit_mode() ) {
			return false;
		}

$settings = $this->get_data( 'settings' );

if ( empty( $settings ) || ! is_array( $settings ) ) {
			return false;
		}

// ACF Repeater pulls per-post data — treat as dynamic so it is not statically cached.
		if ( 'acf_repeater' === ( $settings['eael_ic_data_source'] ?? 'custom' ) ) {
			return true;
		}

return false;
    }

/**
	 * Max items the preset layouts can lay out without breaking.
	 * Mirrors the manual repeater's own documented limit.
	 */
	const EAEL_IC_MAX_ITEMS = 8;

/**
	 * Registers ACF Repeater data-source controls for Interactive Circle (Lite-native).
	 * Minimal field set: Short Title, Tab Content, Link.
	 */
	protected function eael_register_acf_controls() {
		$this->start_controls_section(
			'eael_ic_section_data_source',
			[
				'label' => esc_html__( 'Data Source', 'essential-addons-for-elementor-lite' ),
			]
		);

$this->add_control(
			'eael_ic_data_source',
			[
				'label'   => esc_html__( 'Source', 'essential-addons-for-elementor-lite' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'custom',
				'options' => [
					'custom'       => esc_html__( 'Custom (Manual)', 'essential-addons-for-elementor-lite' ),
					'acf_repeater' => esc_html__( 'ACF Repeater Field', 'essential-addons-for-elementor-lite' ),
				],
			]
		);

$this->add_control(
			'eael_ic_acf_repeater_field',
			[
				'label'     => esc_html__( 'Repeater Field', 'essential-addons-for-elementor-lite' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => '',
				'options'   => Helper::eael_get_acf_repeater_options(),
				'condition' => [ 'eael_ic_data_source' => 'acf_repeater' ],
			]
		);

// ACF inactive notice (no-op when ACF is active).
		Helper::eael_acf_notice_controls( $this, [ 'eael_ic_data_source' => 'acf_repeater' ] );

$this->add_control(
			'eael_ic_acf_limit_notice',
			[
				'type'            => Controls_Manager::RAW_HTML,
				/* translators: %d: maximum number of circle items. */
				'raw'             => sprintf( __( '<strong>Circle Item limit max %d.</strong> Only the first %d rows of the ACF Repeater are used — extra rows are ignored so the preset layout is not broken.', 'essential-addons-for-elementor-lite' ), self::EAEL_IC_MAX_ITEMS, self::EAEL_IC_MAX_ITEMS ),
				'content_classes' => 'eael-warning',
				'condition'       => [ 'eael_ic_data_source' => 'acf_repeater' ],
			]
		);

// Default icon for every item. Per-row icons come from a mapped ACF Image
		// field below; this is the fallback used whenever a row has no image.
		$this->add_control(
			'eael_ic_acf_icon',
			[
				'label'       => esc_html__( 'Default Item Icon', 'essential-addons-for-elementor-lite' ),
				'description' => esc_html__( 'Shown when a row has no mapped Item Icon image. Map an ACF Image field below to give each item its own icon.', 'essential-addons-for-elementor-lite' ),
				'type'        => Controls_Manager::ICONS,
				'default'     => [
					'value'   => 'fas fa-home',
					'library' => 'fa-solid',
				],
				'condition'   => [ 'eael_ic_data_source' => 'acf_repeater' ],
			]
		);

// Per-repeater sub-field mapping.
		$acf_sub_fields_by_repeater = Helper::eael_get_acf_repeater_sub_fields();

foreach ( $acf_sub_fields_by_repeater as $repeater_name => $sub_field_options ) {
			$repeater_condition = [
				'eael_ic_data_source'        => 'acf_repeater',
				'eael_ic_acf_repeater_field' => $repeater_name,
			];

$this->add_control(
				'eael_ic_acf_fields_heading_' . $repeater_name,
				[
					'label'     => esc_html__( 'Field Mapping', 'essential-addons-for-elementor-lite' ),
					'type'      => Controls_Manager::HEADING,
					'separator' => 'before',
					'condition' => $repeater_condition,
				]
			);

$this->add_control(
				'eael_ic_acf_repeater_title_' . $repeater_name,
				[
					'label'     => esc_html__( 'Short Title', 'essential-addons-for-elementor-lite' ),
					'type'      => Controls_Manager::SELECT,
					'default'   => '',
					'options'   => $sub_field_options,
					'condition' => $repeater_condition,
				]
			);

$this->add_control(
				'eael_ic_acf_repeater_content_' . $repeater_name,
				[
					'label'       => esc_html__( 'Tab Content', 'essential-addons-for-elementor-lite' ),
					'description' => esc_html__( 'Map a Text, Textarea, or WYSIWYG ACF field.', 'essential-addons-for-elementor-lite' ),
					'type'        => Controls_Manager::SELECT,
					'default'     => '',
					'options'     => $sub_field_options,
					'condition'   => $repeater_condition,
				]
			);

$this->add_control(
				'eael_ic_acf_repeater_link_' . $repeater_name,
				[
					'label'       => esc_html__( 'Link', 'essential-addons-for-elementor-lite' ),
					'description' => esc_html__( 'Map an ACF URL, Link, or Page Link field. The item links only when the row has a value.', 'essential-addons-for-elementor-lite' ),
					'type'        => Controls_Manager::SELECT,
					'default'     => '',
					'options'     => $sub_field_options,
					'condition'   => $repeater_condition,
				]
			);

$this->add_control(
				'eael_ic_acf_repeater_icon_image_' . $repeater_name,
				[
					'label'       => esc_html__( 'Item Icon (Image)', 'essential-addons-for-elementor-lite' ),
					'description' => esc_html__( 'Map an ACF Image field to give each item its own icon. Rows with no image fall back to the Default Item Icon above.', 'essential-addons-for-elementor-lite' ),
					'type'        => Controls_Manager::SELECT,
					'default'     => '',
					'options'     => $sub_field_options,
					'condition'   => $repeater_condition,
				]
			);

$extra_field_options = $sub_field_options;
			unset( $extra_field_options[''] );
			$this->add_control(
				'eael_ic_acf_repeater_extras_' . $repeater_name,
				[
					'label'       => esc_html__( 'Additional Fields', 'essential-addons-for-elementor-lite' ),
					'description' => esc_html__( 'Select extra sub-fields to display below each item content.', 'essential-addons-for-elementor-lite' ),
					'type'        => Controls_Manager::SELECT2,
					'multiple'    => true,
					'default'     => [],
					'options'     => $extra_field_options,
					'label_block' => true,
					'condition'   => $repeater_condition,
				]
			);
		}

$this->end_controls_section();
	}

/**
	 * Returns the circle items to render.
	 *
	 * Custom mode returns the manual repeater unchanged. ACF mode maps the selected
	 * ACF Repeater field's rows into the item shape both render loops consume, capped
	 * at EAEL_IC_MAX_ITEMS so the preset layouts are not broken.
	 *
	 * @param array $settings Widget settings from get_settings_for_display().
	 * @return array
	 */
	protected function get_interactive_circle_items( $settings ) {
		if ( 'acf_repeater' !== ( $settings['eael_ic_data_source'] ?? 'custom' ) ) {
			return is_array( $settings['eael_interactive_circle_item'] ?? null ) ? $settings['eael_interactive_circle_item'] : [];
		}

$field_name = sanitize_text_field( $settings['eael_ic_acf_repeater_field'] ?? '' );
		if ( empty( $field_name ) || ! function_exists( 'get_field' ) ) {
			return [];
		}

$title_key      = sanitize_text_field( $settings[ 'eael_ic_acf_repeater_title_' . $field_name ] ?? '' );
		$content_key    = sanitize_text_field( $settings[ 'eael_ic_acf_repeater_content_' . $field_name ] ?? '' );
		$link_key       = sanitize_text_field( $settings[ 'eael_ic_acf_repeater_link_' . $field_name ] ?? '' );
		$icon_image_key = sanitize_text_field( $settings[ 'eael_ic_acf_repeater_icon_image_' . $field_name ] ?? '' );
		$extra_keys  = ( isset( $settings[ 'eael_ic_acf_repeater_extras_' . $field_name ] ) && is_array( $settings[ 'eael_ic_acf_repeater_extras_' . $field_name ] ) )
			? $settings[ 'eael_ic_acf_repeater_extras_' . $field_name ]
			: [];

// Widget-level fallback icon — used for any row whose mapped Item Icon image
		// is empty (and for both icon slots).
		$icon = ( isset( $settings['eael_ic_acf_icon'] ) && is_array( $settings['eael_ic_acf_icon'] ) )
			? $settings['eael_ic_acf_icon']
			: [ 'value' => '', 'library' => '' ];

// Resolve sub-field labels once for the selected additional fields.
		$sub_field_labels = [];
		if ( ! empty( $extra_keys ) && function_exists( 'acf_get_field' ) ) {
			$repeater_field = acf_get_field( $field_name );
			if ( ! empty( $repeater_field['sub_fields'] ) ) {
				foreach ( $repeater_field['sub_fields'] as $sf ) {
					$sub_field_labels[ $sf['name'] ] = $sf['label'];
				}
			}
		}

$object_id = get_the_ID() ?: get_queried_object_id();
		$rows      = get_field( $field_name, $object_id );

if ( empty( $rows ) || ! is_array( $rows ) ) {
			return [];
		}

// Preset layouts break beyond 8 items — cap, matching the manual repeater's warning.
		$rows = array_slice( $rows, 0, self::EAEL_IC_MAX_ITEMS );

$items = [];
		$i     = 0;
		foreach ( $rows as $row ) {
			if ( ! is_array( $row ) ) {
				continue;
			}

// Title / content kept raw; render escapes (esc_html / wp_kses + parse_text_editor).
			$title   = ( $title_key && is_scalar( $row[ $title_key ] ?? null ) ) ? (string) $row[ $title_key ] : '';
			$content = ( $content_key && is_scalar( $row[ $content_key ] ?? null ) ) ? (string) $row[ $content_key ] : '';

// Link: ACF Link array, or a plain URL / page-link string.
			$link = [ 'url' => '', 'is_external' => '', 'nofollow' => '' ];
			if ( $link_key ) {
				$raw_link = $row[ $link_key ] ?? '';
				if ( is_array( $raw_link ) ) {
					$link['url']         = $raw_link['url'] ?? '';
					$link['is_external'] = ( ! empty( $raw_link['target'] ) && '_blank' === $raw_link['target'] ) ? 'on' : '';
				} elseif ( is_string( $raw_link ) && '' !== $raw_link ) {
					$link['url'] = $raw_link;
				}
			}

// Per-item icon image: ACF Image array, attachment ID, or URL string.
			// Empty url => the render falls back to the widget-level icon.
			$icon_image = [ 'url' => '', 'id' => 0 ];
			if ( $icon_image_key ) {
				$raw_image = $row[ $icon_image_key ] ?? '';
				if ( is_array( $raw_image ) ) {
					$icon_image['url'] = $raw_image['url'] ?? '';
					$icon_image['id']  = (int) ( $raw_image['ID'] ?? ( $raw_image['id'] ?? 0 ) );
				} elseif ( is_numeric( $raw_image ) ) {
					$icon_image['id']  = (int) $raw_image;
					$icon_image['url'] = (string) wp_get_attachment_url( $icon_image['id'] );
				} elseif ( is_string( $raw_image ) && '' !== $raw_image ) {
					$icon_image['url'] = $raw_image;
				}
			}

// Additional fields: [ [ 'label' => ..., 'value' => ... ], ... ].
			$extras = [];
			foreach ( $extra_keys as $ekey ) {
				$val = $row[ $ekey ] ?? '';
				if ( '' === $val || null === $val || [] === $val ) {
					continue;
				}
				$extras[] = [
					'label' => $sub_field_labels[ $ekey ] ?? $ekey,
					'value' => is_scalar( $val ) ? (string) $val : '',
				];
			}

$items[] = [
				// First item active: an all-inactive circle renders no content panel.
				'eael_interactive_circle_default_active'        => ( 0 === $i ? 'yes' : '' ),
				'eael_interactive_circle_btn_icon'              => $icon,
				'eael_interactive_circle_content_icon'          => $icon,
				'eael_ic_icon_image'                            => $icon_image,
				'eael_interactive_circle_btn_title'             => $title,
				// Only "yes" when the row actually has a URL — the render emits a bare
				// <a> without an href otherwise.
				'eael_interactive_circle_btn_link_on'           => ( '' !== $link['url'] ) ? 'yes' : '',
				'eael_interactive_circle_btn_link'              => $link,
				'eael_interactive_circle_item_content'          => $content,
				'eael_interactive_circle_tab_bgtype_background' => '',
				'eael_ic_extras'                                => $extras,
				'_id'                                           => uniqid( 'ic_', false ),
			];
			$i++;
		}

return $items;
	}

/**
	 * Style controls for the ACF "Additional Fields" output (Style tab).
	 * Only shown when the data source is an ACF Repeater.
	 */
	protected function eael_acf_extra_data_controls_style() {
		$this->start_controls_section(
			'eael_ic_section_extra_data_style',
			[
				'label'     => esc_html__( 'Additional Fields', 'essential-addons-for-elementor-lite' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [
					'eael_ic_data_source' => 'acf_repeater',
				],
			]
		);

$this->add_control(
			'eael_ic_extra_data_text_color',
			[
				'label'     => esc_html__( 'Color', 'essential-addons-for-elementor-lite' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .eael-interactive-circle-extras .eael-interactive-circle-extra-value' => 'color: {{VALUE}}',
				],
			]
		);

$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'eael_ic_extra_data_text_typography',
				'selector' => '{{WRAPPER}} .eael-interactive-circle-extras .eael-interactive-circle-extra-value',
			]
		);

$this->add_control(
			'eael_ic_extra_data_text_margin',
			[
				'label'      => esc_html__( 'Margin', 'essential-addons-for-elementor-lite' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
				'selectors'  => [
					'{{WRAPPER}} .eael-interactive-circle-extras .eael-interactive-circle-extra' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

$this->add_control(
			'eael_ic_extra_data_text_padding',
			[
				'label'      => esc_html__( 'Padding', 'essential-addons-for-elementor-lite' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
				'selectors'  => [
					'{{WRAPPER}} .eael-interactive-circle-extras .eael-interactive-circle-extra' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

$this->end_controls_section();
	}

public function has_widget_inner_wrapper(): bool {
        return ! Helper::eael_e_optimized_markup();
    }

public function get_custom_help_url() {
		return 'https://essential-addons.com/elementor/docs/interactive-circle/';
	}

protected function eael_interactive_circle_general() {
		/**
		 * Advance Tabs Settings
		 */
		$this->start_controls_section(
			'eael_section_interactive_circle_settings',
			[
				'label' => esc_html__( 'General', 'essential-addons-for-elementor-lite' ),
			]
		);
		$this->add_control(
			'eael_interactive_circle_preset',
			[
				'label'       => esc_html__( 'Preset', 'essential-addons-for-elementor-lite' ),
				'type'        => Controls_Manager::SELECT,
				'default'     => 'eael-interactive-circle-preset-1',
				'label_block' => false,
				'options'     => [
					'eael-interactive-circle-preset-1' => esc_html__( 'Preset 1', 'essential-addons-for-elementor-lite' ),
					'eael-interactive-circle-preset-2' => esc_html__( 'Preset 2', 'essential-addons-for-elementor-lite' ),
					'eael-interactive-circle-preset-3' => esc_html__( 'Preset 3', 'essential-addons-for-elementor-lite' ),
					'eael-interactive-circle-preset-4' => esc_html__( 'Preset 4', 'essential-addons-for-elementor-lite' ),
				],
			]
		);

$this->add_control(
			'eael_interactive_circle_btn_settings',
			[
				'label'     => esc_html__( 'Button', 'essential-addons-for-elementor-lite' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

$this->add_control(
			'eael_interactive_circle_btn_icon_show',
			[
				'label'        => esc_html__( 'Show Icon', 'essential-addons-for-elementor-lite' ),
				'type'         => Controls_Manager::SWITCHER,
				'default'      => 'yes',
				'return_value' => 'yes',
			]
		);

$this->add_control(
			'eael_interactive_circle_btn_text_show',
			[
				'label'        => esc_html__( 'Show Text', 'essential-addons-for-elementor-lite' ),
				'type'         => Controls_Manager::SWITCHER,
				'default'      => 'yes',
				'return_value' => 'yes',
			]
		);

$this->add_control(
			'eael_interactive_circle_content_settings',
			[
				'label'     => esc_html__( 'Content', 'essential-addons-for-elementor-lite' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => [
					'eael_interactive_circle_preset'      => 'eael-interactive-circle-preset-2',
				],
			]
		);

$this->add_control(
			'eael_interactive_circle_content_icon_show',
			[
				'label'        => esc_html__( 'Show Icon', 'essential-addons-for-elementor-lite' ),
				'type'         => Controls_Manager::SWITCHER,
				'default'      => '',
				'return_value' => 'yes',
				'condition' => [
					'eael_interactive_circle_preset'      => 'eael-interactive-circle-preset-2',
				],
			]
		);

$this->end_controls_section();
	}

protected function eael_interactive_circle_item() {
		/**
		 * Advance Tabs Content Settings
		 */
		$this->start_controls_section(
			'eael_section_interactive_circle_content_settings',
			[
				'label'     => esc_html__( 'Content', 'essential-addons-for-elementor-lite' ),
				'condition' => [ 'eael_ic_data_source' => 'custom' ],
			]
		);

$this->add_control( 'eael_global_warning_text', [
			'type'            => Controls_Manager::RAW_HTML,
			'raw'             => __( '<strong>Circle Item limit max 8.</strong> If the item is more than 8 it will break the preset layout design.', 'essential-addons-for-elementor-lite' ),
			'content_classes' => 'eael-warning',
		] );

$repeater = new Repeater();

$repeater->add_control(
			'eael_interactive_circle_default_active',
			[
				'label'        => esc_html__( 'Active as Default', 'essential-addons-for-elementor-lite' ),
				'type'         => \Elementor\Controls_Manager::SWITCHER,
				'label_on'     => esc_html__( 'Yes', 'essential-addons-for-elementor-lite' ),
				'label_off'    => esc_html__( 'No', 'essential-addons-for-elementor-lite' ),
				'return_value' => 'yes',
				'default'      => '',
			]
		);

$repeater->start_controls_tabs( 'interactive_circle_tabs' );

$repeater->start_controls_tab( 'interactive_circle_btn_tab', [ 'label' => __( 'Button', 'essential-addons-for-elementor-lite' ) ] );

$repeater->add_control(
			'eael_interactive_circle_btn_icon',
			[
				'label'   => esc_html__( 'Icon', 'essential-addons-for-elementor-lite' ),
				'type'    => Controls_Manager::ICONS,
				'default' => [
					'value'   => 'fas fa-home',
					'library' => 'fa-solid',
				],
			]
		);

$repeater->add_control(
			'eael_interactive_circle_btn_title',
			[
				'name'    => 'eael_interactive_circle_btn_title',
				'label'   => esc_html__( 'Short Title', 'essential-addons-for-elementor-lite' ),
				'type'    => Controls_Manager::TEXT,
				'default' => esc_html__( 'Title', 'essential-addons-for-elementor-lite' ),
				'dynamic' => [ 'active' => true ],
				'ai' => [
					'active' => true,
				],
			]
		);

$repeater->add_control(
			'eael_interactive_circle_btn_link_on',
			[
				'label'        => esc_html__( 'Item Link', 'essential-addons-for-elementor-lite' ),
				'type'         => Controls_Manager::SWITCHER,
				'label_on'     => esc_html__( 'Yes', 'essential-addons-for-elementor-lite' ),
				'label_off'    => esc_html__( 'No', 'essential-addons-for-elementor-lite' ),
				'return_value' => 'yes',
			]
		);

$repeater->add_control( 'eael_interactive_circle_btn_link_mess', [
			'type'            => Controls_Manager::RAW_HTML,
			'raw'             => __( 'To be able to view detailed content, Please go to<strong> > Additional Settings,</strong> then <strong>Mouse Event,</strong> and choose <strong>Hover</strong>', 'essential-addons-for-elementor-lite' ),
			'content_classes' => 'eael-warning',
			'condition' => [
				'eael_interactive_circle_btn_link_on' => 'yes',
			]
		] );

$repeater->add_control(
            'eael_interactive_circle_btn_link',
            [
                'label'           => esc_html__('Link', 'essential-addons-for-elementor-lite'),
                'type'            => Controls_Manager::URL,
                'dynamic'         => [
					'active' => true,
					'categories' => [
						TagsModule::POST_META_CATEGORY,
						TagsModule::URL_CATEGORY,
					],
				],
                'label_block'     => true,
                'default'         => [
                    'url'		  => '#',
                    'is_external' => '',
                ],
                'show_external'   => true,
				'condition' => [
	                'eael_interactive_circle_btn_link_on' => 'yes',
                ]
            ]
        );

$repeater->end_controls_tab();

$repeater->start_controls_tab( 'interactive_circle_content_tab', [ 'label' => __( 'Content', 'essential-addons-for-elementor-lite' ) ] );

$repeater->add_control(
			'eael_interactive_circle_content_icon',
			[
				'name'    => 'eael_interactive_circle_content_icon',
				'label'   => esc_html__( 'Icon', 'essential-addons-for-elementor-lite' ),
				'type'    => Controls_Manager::ICONS,
				'description' => esc_html__( 'Icon will only visible for Preset 2', 'essential-addons-for-elementor-lite' )
			]
		);

$repeater->add_control(
			'eael_interactive_circle_item_content',
			[
				'name'    => 'eael_interactive_circle_item_content',
				'label'   => esc_html__( 'Tab Content', 'essential-addons-for-elementor-lite' ),
				'type'    => Controls_Manager::WYSIWYG,
				'default' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, neque qui velit. Magni dolorum quidem ipsam eligendi, totam, facilis laudantium cum accusamus ullam voluptatibus commodi numquam, error, est. Ea, consequatur.', 'essential-addons-for-elementor-lite' ),
				'dynamic' => [ 'active' => true ],
			]
		);

$repeater->end_controls_tab();

$repeater->start_controls_tab( 'interactive_circle_item_style_tab', [ 'label' => __( 'Style', 'essential-addons-for-elementor-lite' ) ] );

$repeater->add_group_control(
			'eael-background',
			[
				'name'     => 'eael_interactive_circle_tab_bgtype',
				'types'    => [ 'gradient', 'classic' ],
				'exclude'  => [ 'image' ],
				'selector' => '{{WRAPPER}} .eael-circle-wrapper:not(.eael-interactive-circle-preset-4) .eael-circle-info .eael-circle-inner {{CURRENT_ITEM}} .eael-circle-btn-icon, {{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-4 .eael-circle-info .eael-circle-inner {{CURRENT_ITEM}} .eael-circle-icon-shapes',
			]
		);

$repeater->add_control( 'eael_interactive_circle_tab_bgtype_classic_notice', [
			'type'            => Controls_Manager::RAW_HTML,
			'raw'             => __( 'Reload needed on first change', 'essential-addons-for-elementor-lite' ),
			'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
			'condition' => [
				'eael_interactive_circle_tab_bgtype_background' => 'classic',
				'eael_interactive_circle_tab_bgtype_color'      => '',
			],
		] );

$repeater->end_controls_tab();
		$repeater->end_controls_tabs();

$this->add_control(
			'eael_interactive_circle_item',
			[
				'type'        => Controls_Manager::REPEATER,
				'separator'   => 'before',
				'default'     => [
					[
						'eael_interactive_circle_btn_icon'            => [
							'value'   => 'fas fa-leaf',
							'library' => 'fa-solid',
						],
						'eael_interactive_circle_default_active'      => 'yes',
						'eael_interactive_circle_btn_title'           => esc_html__( 'Item 1', 'essential-addons-for-elementor-lite' ),
						'eael_interactive_circle_item_default_active' => __( 'active', 'essential-addons-for-elementor-lite' ),
						'eael_interactive_circle_item_content'        => esc_html__( 'Present your content in an attractive Circle layout item 1. You can highlight key information with click or hover effects and style it as per your preference.', 'essential-addons-for-elementor-lite' ),
					],
					[
						'eael_interactive_circle_btn_icon'     => [
							'value'   => 'fas fa-comment',
							'library' => 'fa-solid',
						],
						'eael_interactive_circle_btn_title'    => esc_html__( 'Item 2', 'essential-addons-for-elementor-lite' ),
						'eael_interactive_circle_item_content' => esc_html__( 'Present your content in an attractive Circle layout item 2. You can highlight key information with click or hover effects and style it as per your preference.', 'essential-addons-for-elementor-lite' ),
					],
					[
						'eael_interactive_circle_btn_icon'     => [
							'value'   => 'fas fa-map-marker-alt',
							'library' => 'fa-solid',
						],
						'eael_interactive_circle_btn_title'    => esc_html__( 'Item 3', 'essential-addons-for-elementor-lite' ),
						'eael_interactive_circle_item_content' => esc_html__( 'Present your content in an attractive Circle layout item 3. You can highlight key information with click or hover effects and style it as per your preference.', 'essential-addons-for-elementor-lite' ),
					],
					[
						'eael_interactive_circle_btn_icon'     => [
							'value'   => 'fas fa-rocket',
							'library' => 'fa-solid',
						],
						'eael_interactive_circle_btn_title'    => esc_html__( 'Item 4', 'essential-addons-for-elementor-lite' ),
						'eael_interactive_circle_item_content' => esc_html__( 'Present your content in an attractive Circle layout item 4. You can highlight key information with click or hover effects and style it as per your preference.', 'essential-addons-for-elementor-lite' ),
					],
					[
						'eael_interactive_circle_btn_icon'     => [
							'value'   => 'fas fa-hourglass-half',
							'library' => 'fa-solid',
						],
						'eael_interactive_circle_btn_title'    => esc_html__( 'Item 5', 'essential-addons-for-elementor-lite' ),
						'eael_interactive_circle_item_content' => esc_html__( 'Present your content in an attractive Circle layout item 5. You can highlight key information with click or hover effects and style it as per your preference.', 'essential-addons-for-elementor-lite' ),
					],
					[
						'eael_interactive_circle_btn_icon'     => [
							'value'   => 'fas fa-tag',
							'library' => 'fa-solid',
						],
						'eael_interactive_circle_btn_title'    => esc_html__( 'Item 6', 'essential-addons-for-elementor-lite' ),
						'eael_interactive_circle_item_content' => esc_html__( 'Present your content in an attractive Circle layout item 6. You can highlight key information with click or hover effects and style it as per your preference.', 'essential-addons-for-elementor-lite' ),
					],
				],
				'fields'      => $repeater->get_controls(),
				'title_field' => '{{eael_interactive_circle_btn_title}}',
			]
		);
		$this->end_controls_section();
	}

protected function eael_interactive_circle_additional() {
		$this->start_controls_section(
			'eael_section_interactive_circle_additional',
			[
				'label' => esc_html__( 'Additional Settings', 'essential-addons-for-elementor-lite' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			]
		);

$this->add_control(
			'eael_interactive_circle_rotation',
			[
				'label'        => esc_html__( 'Rotate Animation', 'essential-addons-for-elementor-lite' ),
				'type'         => Controls_Manager::SWITCHER,
				'default'      => '',
				'return_value' => 'yes',
				'condition' => [
					'eael_interactive_circle_preset!' => 'eael-interactive-circle-preset-2'
				],
			]
		);

$this->add_control(
			'eael_interactive_circle_rotation_speed',
			[
				'label' => esc_html__( 'Rotation Speed', 'essential-addons-for-elementor-lite' ),
				'type' => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 1,
						'max' => 300,
						'step' => .5,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 50,
				],
				'selectors' => [
					'{{WRAPPER}} .eael-interactive-circle-rotate' => 'animation-duration: {{SIZE}}s;',
					'{{WRAPPER}} .eael-interactive-circle-rotate .eael-circle-btn-icon' => 'animation-duration: {{SIZE}}s;',
					'{{WRAPPER}} .eael-interactive-circle-rotate .eael-circle-content' => 'animation-duration: {{SIZE}}s;',
				],
				'condition' => [
					'eael_interactive_circle_rotation' => 'yes'
				],
			]
		);

$this->add_control(
			'eael_interactive_circle_rotation_hover',
			[
				'label'        => esc_html__( 'Pause on hover', 'essential-addons-for-elementor-lite' ),
				'type'         => Controls_Manager::SWITCHER,
				'default'      => '',
				'return_value' => 'yes',
				'condition' => [
					'eael_interactive_circle_rotation' => 'yes'
				],
			]
		);

$this->add_control(
			'eael_interactive_circle_event',
			[
				'label'       => esc_html__( 'Mouse Event', 'essential-addons-for-elementor-lite' ),
				'type'        => Controls_Manager::SELECT,
				'default'     => 'eael-interactive-circle-event-click',
				'label_block' => false,
				'options'     => [
					'eael-interactive-circle-event-click' => esc_html__( 'Click', 'essential-addons-for-elementor-lite' ),
					'eael-interactive-circle-event-hover' => esc_html__( 'Hover', 'essential-addons-for-elementor-lite' ),
				],
				'conditions' => [
                    'relation' => 'or',
                    'terms' => [
                       [
                          'name' => 'eael_interactive_circle_autoplay',
                          'operator' => '!=',
                          'value' => 'yes',
                       ],
					   [
						'name' => 'eael_interactive_circle_preset',
						'operator' => '==',
						'value' => 'eael-interactive-circle-preset-3',
					   ],
					   [
						'name' => 'eael_interactive_circle_preset',
						'operator' => '==',
						'value' => 'eael-interactive-circle-preset-4',
					   ],
                    ],
                ],
			]
		);

$this->add_control(
			'eael_interactive_circle_animation',
			[
				'label'       => esc_html__( 'Animation', 'essential-addons-for-elementor-lite' ),
				'type'        => Controls_Manager::SELECT,
				'default'     => 'eael-interactive-circle-animation-0',
				'label_block' => false,
				'options'     => [
					'eael-interactive-circle-animation-0' => esc_html__( 'None', 'essential-addons-for-elementor-lite' ),
					'eael-interactive-circle-animation-1' => esc_html__( 'Bounce In', 'essential-addons-for-elementor-lite' ),
					'eael-interactive-circle-animation-2' => esc_html__( 'Rotate', 'essential-addons-for-elementor-lite' ),
					'eael-interactive-circle-animation-3' => esc_html__( 'Spinning', 'essential-addons-for-elementor-lite' ),
				],
			]
		);

$this->add_control(
			'eael_interactive_circle_autoplay',
			[
				'label'        => esc_html__( 'Autoplay', 'essential-addons-for-elementor-lite' ),
				'type'         => Controls_Manager::SWITCHER,
				'default'      => '',
				'return_value' => 'yes',
				'condition' => [
					'eael_interactive_circle_preset' => [ 'eael-interactive-circle-preset-1', 'eael-interactive-circle-preset-2' ]
				],
			]
		);

$this->add_control(
			'eael_interactive_circle_autoplay_interval',
			[
				'label'        => esc_html__( 'Interval (Miliseconds)', 'essential-addons-for-elementor-lite' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range'      => [
					'px' => [
						'min'  => 0,
						'max'  => 10000,
						'step' => 500,
					],
				],
				'condition'	=> [
					'eael_interactive_circle_autoplay' => 'yes',
				]
			]
		);

$this->end_controls_section();
	}

protected function eael_interactive_circle_general_style() {
		/**
		 * -------------------------------------------
		 * Tab Style Advance Tabs Generel Style
		 * -------------------------------------------
		 */
		$this->start_controls_section(
			'eael_section_interactive_circle_style_settings',
			[
				'label' => esc_html__( 'General', 'essential-addons-for-elementor-lite' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);

$this->add_responsive_control(
			'eael_interactive_circle_width',
			[
				'label'      => __( 'Circle Width', 'essential-addons-for-elementor-lite' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range'      => [
					'px' => [
						'min'  => 0,
						'max'  => 1000,
						'step' => 1,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .eael-circle-inner'                                         => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .eael-interactive-circle-preset-2 .eael-circle-inner'       => 'width: {{SIZE}}{{UNIT}}; height: calc({{SIZE}}{{UNIT}} / 2);',
					'{{WRAPPER}} .eael-interactive-circle-preset-2 .eael-circle-content'     => 'height: calc({{SIZE}}{{UNIT}} / 2);',
					'{{WRAPPER}} .eael-interactive-circle-preset-2 .eael-circle-btn-content' => 'height: calc({{SIZE}}{{UNIT}} / 2);',
				],
				'devices'   => [ 'desktop', 'tablet' ],
			]
		);

$this->add_responsive_control(
			'eael_interactive_circle_padding',
			[
				'label'      => esc_html__( 'Padding', 'essential-addons-for-elementor-lite' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .eael-circle-inner' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);
		$this->add_responsive_control(
			'eael_interactive_circle_margin',
			[
				'label'      => esc_html__( 'Margin', 'essential-addons-for-elementor-lite' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .eael-circle-inner' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'     => 'eael_interactive_circle_border',
				'label'    => esc_html__( 'Border', 'essential-addons-for-elementor-lite' ),
				'selector' => '{{WRAPPER}} .eael-circle-inner, {{WRAPPER}} .eael-circle-responsive-view .eael-circle-inner .eael-circle-item',
				'exclude'  => [ 'color' ],
			]
		);

$this->add_control(
			'eael_interactive_circle_border_color',
			[
				'label'     => esc_html__( 'Border Color', 'essential-addons-for-elementor-lite' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .eael-circle-inner, {{WRAPPER}} .eael-circle-responsive-view .eael-circle-inner .eael-circle-item' => 'border-color: {{VALUE}}!important;',
				],
			]
		);

$this->add_responsive_control(
			'eael_interactive_circle_connectors',
			[
				'label'     => esc_html__( 'Connectors', 'essential-addons-for-elementor-lite' ),
				'type'      => Controls_Manager::HEADING,
				'condition' => [
					'eael_interactive_circle_preset' => 'eael-interactive-circle-preset-3'
				],
			]
		);
		$this->add_control(
			'eael_interactive_circle_connector_color',
			[
				'label'     => esc_html__( 'Color', 'essential-addons-for-elementor-lite' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .eael-shape-1, {{WRAPPER}} .eael-shape-2' => 'background: {{VALUE}}!important;',
				],
				'condition' => [
					'eael_interactive_circle_preset' => 'eael-interactive-circle-preset-3'
				],
			]
		);

$this->add_control(
			'eael_interactive_circle_desktop_view',
			[
				'label'        	=> esc_html__( 'Desktop view for mobile', 'essential-addons-for-elementor-lite' ),
				'type'         	=> Controls_Manager::SWITCHER,
				'label_on' 		=> esc_html__( 'Enable', 'essential-addons-for-elementor-lite' ),
				'label_off'		=> esc_html__( 'Disable', 'essential-addons-for-elementor-lite' ),
				'default'      	=> '',
				'return_value' 	=> 'yes',
			]
		);

$this->end_controls_section();
	}

protected function eael_interactive_circle_button_style() {
		$this->start_controls_section(
			'eael_section_interactive_circle_tab_style_settings',
			[
				'label' => esc_html__( 'Item', 'essential-addons-for-elementor-lite' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'eael_interactive_circle_btn_typo',
				'selector' => '{{WRAPPER}} .eael-circle-btn-txt',
			]
		);
		$this->add_responsive_control(
			'eael_interactive_circle_btn_width',
			[
				'label'      => __( 'Width', 'essential-addons-for-elementor-lite' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range'      => [
					'px' => [
						'min'  => 0,
						'max'  => 200,
						'step' => 1,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .eael-circle-btn' => 'width: {{SIZE}}px!important; height: {{SIZE}}px!important;',
				],

]
		);
		$this->add_responsive_control(
			'eael_interactive_circle_btn_icon_size',
			[
				'label'      => __( 'Icon Size', 'essential-addons-for-elementor-lite' ),
				'type'       => Controls_Manager::SLIDER,
				'default'    => [
					'size' => 16,
					'unit' => 'px',
				],
				'size_units' => [ 'px' ],
				'range'      => [
					'px' => [
						'min'  => 0,
						'max'  => 50,
						'step' => 1,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .eael-circle-btn-icon i'   => 'font-size: {{SIZE}}{{UNIT}}!important;',
					'{{WRAPPER}} .eael-circle-btn-icon svg' => 'width: {{SIZE}}{{UNIT}}!important; height: {{SIZE}}{{UNIT}}!important; min-width: {{SIZE}}{{UNIT}}!important; min-height: {{SIZE}}{{UNIT}}!important;',
					'{{WRAPPER}} .eael-circle-btn-icon img.eael-circle-acf-icon' => 'width: {{SIZE}}{{UNIT}}!important; height: {{SIZE}}{{UNIT}}!important;',
				],
			]
		);

$this->start_controls_tabs( 'eael_interactive_circle_header_tabs' );
		// Normal State Tab
		$this->start_controls_tab( 'eael_interactive_circle_header_normal', [ 'label' => esc_html__( 'Normal', 'essential-addons-for-elementor-lite' ) ] );
		$this->add_control(
			'eael_interactive_circle_tab_color',
			[
				'label'     => esc_html__( 'Background Color', 'essential-addons-for-elementor-lite' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-1 .eael-circle-item .eael-circle-btn .eael-circle-btn-icon, {{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-item .eael-circle-btn .eael-circle-btn-icon'     => 'background-color: {{VALUE}};',
					'{{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-3 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn .eael-circle-btn-icon .eael-circle-icon-inner, {{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-4 .eael-circle-btn .eael-circle-icon-inner' => 'background-color: {{VALUE}};',
				],
			]
		);
		$this->add_control(
			'eael_interactive_circle_tab_text_color',
			[
				'label'     => esc_html__( 'Text Color', 'essential-addons-for-elementor-lite' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn .eael-circle-btn-icon .eael-circle-icon-inner span.eael-circle-btn-txt' => 'color: {{VALUE}}!important;',
					'{{WRAPPER}} .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn .eael-circle-btn-icon .eael-circle-btn-icon-inner span.eael-circle-btn-txt' => 'color: {{VALUE}}!important;',
				],
			]
		);
		$this->add_control(
			'eael_interactive_circle_tab_icon_color',
			[
				'label'     => esc_html__( 'Icon Color', 'essential-addons-for-elementor-lite' ),
				'type'      => Controls_Manager::COLOR,
				//			    'default' => '#333',
				'selectors' => [
					'{{WRAPPER}} .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn .eael-circle-btn-icon i'   => 'color: {{VALUE}}!important;',
					// '{{WRAPPER}} .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn .eael-circle-btn-icon svg' => 'fill: {{VALUE}}!important;',
					'{{WRAPPER}} .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn .eael-circle-btn-icon svg path' => 'fill: {{VALUE}}!important;',
				],
				'condition' => [
					'eael_interactive_circle_btn_icon_show' => 'yes'
				],
			]
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'     => 'eael_interactive_circle_btn_border',
				'label'    => esc_html__( 'Border', 'essential-addons-for-elementor-lite' ),
				'selector' => '{{WRAPPER}} .eael-circle-wrapper .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn',
			]
		);

$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'eael_interactive_circle_btn_shadow',
				'selector' => '{{WRAPPER}} .eael-circle-wrapper .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn',
			]
		);

$this->end_controls_tab();
		// Hover State Tab
		$this->start_controls_tab( 'eael_interactive_circle_header_hover', [ 'label' => esc_html__( 'Hover', 'essential-addons-for-elementor-lite' ) ] );
		$this->add_control(
			'eael_interactive_circle_tab_color_hover',
			[
				'label'     => esc_html__( 'Background Color', 'essential-addons-for-elementor-lite' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-1 .eael-circle-btn:hover .eael-circle-btn-icon, {{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-btn:hover .eael-circle-btn-icon'                   => 'background-color: {{VALUE}}!important;',
					'{{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-3 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn:hover .eael-circle-btn-icon .eael-circle-icon-inner, {{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-4 .eael-circle-btn:hover .eael-circle-icon-inner'               => 'background-color: {{VALUE}}!important;',
					'{{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-1 .eael-circle-btn.active:hover .eael-circle-btn-icon, {{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-btn.active:hover .eael-circle-btn-icon'     => 'background-color: {{VALUE}}!important;',
					'{{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-3 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn.active:hover .eael-circle-btn-icon .eael-circle-icon-inner, {{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-4 .eael-circle-btn.active:hover .eael-circle-icon-inner' => 'background-color: {{VALUE}}!important;',
				],
			]
		);

$this->add_control(
			'eael_interactive_circle_tab_text_color_hover',
			[
				'label'     => esc_html__( 'Text Color', 'essential-addons-for-elementor-lite' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn:hover .eael-circle-btn-icon .eael-circle-icon-inner span.eael-circle-btn-txt'            => 'color: {{VALUE}}!important;',
					'{{WRAPPER}} .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn:hover .eael-circle-btn-icon .eael-circle-btn-icon-inner span.eael-circle-btn-txt'        => 'color: {{VALUE}}!important;',
					'{{WRAPPER}} .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn.active:hover .eael-circle-btn-icon .eael-circle-icon-inner span.eael-circle-btn-txt'     => 'color: {{VALUE}}!important;',
					'{{WRAPPER}} .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn.active:hover .eael-circle-btn-icon .eael-circle-btn-icon-inner span.eael-circle-btn-txt' => 'color: {{VALUE}}!important;',
				],
			]
		);
		$this->add_control(
			'eael_interactive_circle_tab_icon_color_hover',
			[
				'label'     => esc_html__( 'Icon Color', 'essential-addons-for-elementor-lite' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn:hover .eael-circle-btn-icon i, {{WRAPPER}} .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn.active:hover .eael-circle-btn-icon i'     => 'color: {{VALUE}}!important;',
					'{{WRAPPER}} .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn:hover .eael-circle-btn-icon svg path, {{WRAPPER}} .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn.active:hover .eael-circle-btn-icon svg path' => 'fill: {{VALUE}}!important;',
				],
				'condition' => [
					'eael_interactive_circle_btn_icon_show' => 'yes'
				],
			]
		);

$this->add_control(
			'eael_interactive_circle_btn_border_color_hover',
			[
				'label'     => esc_html__( 'Border Color', 'essential-addons-for-elementor-lite' ),
				'type'      => Controls_Manager::COLOR,
				//			    'default' => '#fff',
				'selectors' => [
					'{{WRAPPER}} .eael-circle-btn:hover, {{WRAPPER}} .eael-circle-btn.active:hover' => 'border-color: {{VALUE}}!important;',
				],
				'condition' => [
					'eael_interactive_circle_btn_border_border!' => ''
				],
			]
		);

$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'eael_interactive_circle_btn_shadow_hover',
				'selector' => '{{WRAPPER}} .eael-circle-wrapper .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn:hover',
			]
		);

$this->end_controls_tab();
		// Active State Tab
		$this->start_controls_tab( 'eael_interactive_circle_header_active', [ 'label' => esc_html__( 'Active', 'essential-addons-for-elementor-lite' ) ] );
		$this->add_control(
			'eael_interactive_circle_tab_color_active',
			[
				'label'     => esc_html__( 'Background Color', 'essential-addons-for-elementor-lite' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-1 .eael-circle-btn.active .eael-circle-btn-icon, {{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-2 .eael-circle-btn.active .eael-circle-btn-icon'     => 'background-color: {{VALUE}}!important;',
					'{{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-3 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn.active .eael-circle-btn-icon .eael-circle-icon-inner, {{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-4 .eael-circle-btn.active .eael-circle-icon-inner' => 'background-color: {{VALUE}}!important;',

'{{WRAPPER}} .eael-circle-btn.active .eael-circle-btn-icon' => 'background-color: {{VALUE}}!important;',
				],
			]
		);

$this->add_control(
			'eael_interactive_circle_tab_text_color_active',
			[
				'label'     => esc_html__( 'Text Color', 'essential-addons-for-elementor-lite' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn.active .eael-circle-btn-icon .eael-circle-icon-inner span.eael-circle-btn-txt'     => 'color: {{VALUE}}!important;',
					'{{WRAPPER}} .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn.active .eael-circle-btn-icon .eael-circle-btn-icon-inner span.eael-circle-btn-txt' => 'color: {{VALUE}}!important;',
				],
			]
		);
		$this->add_control(
			'eael_interactive_circle_tab_icon_color_active',
			[
				'label'     => esc_html__( 'Icon Color', 'essential-addons-for-elementor-lite' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn.active .eael-circle-btn-icon i'   => 'color: {{VALUE}}!important;',
					'{{WRAPPER}} .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn.active .eael-circle-btn-icon svg path' => 'fill: {{VALUE}}!important;',
				],
				'condition' => [
					'eael_interactive_circle_btn_icon_show' => 'yes'
				],
			]
		);
		$this->add_control(
			'eael_interactive_circle_btn_border_color_active',
			[
				'label'     => esc_html__( 'Border Color', 'essential-addons-for-elementor-lite' ),
				'type'      => Controls_Manager::COLOR,
				//			    'default' => '#fff',
				'selectors' => [
					'{{WRAPPER}} .eael-circle-btn.active' => 'border-color: {{VALUE}}!important;',
				],
				'condition' => [
					'eael_interactive_circle_btn_border_border!' => ''
				],
			]
		);

$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'eael_interactive_circle_btn_shadow_active',
				'selector' => '{{WRAPPER}} .eael-circle-wrapper .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn.active',
			]
		);

$this->end_controls_tab();
		$this->end_controls_tabs();

$this->end_controls_section();
	}

protected function eael_interactive_circle_content_style() {

$this->start_controls_section(
			'eael_section_interactive_circle_tab_content_style_settings',
			[
				'label' => esc_html__( 'Content', 'essential-addons-for-elementor-lite' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			]
		);
		$this->add_control(
			'eael_section_interactive_circle_content_bg_color',
			[
				'label'     => esc_html__( 'Background Color', 'essential-addons-for-elementor-lite' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .eael-circle-content'                                                                                                                                       => 'background: {{VALUE}} !important;',
					'{{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-3 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn-content .eael-circle-content' => 'background: {{VALUE}} !important;',
					'{{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-4 .eael-circle-info .eael-circle-item .eael-circle-btn-content .eael-circle-content'                    => 'background: {{VALUE}} !important;',
				],
				'condition' => [
					'eael_interactive_circle_preset!' => 'eael-interactive-circle-preset-2'
				],
			]
		);

$this->add_control(
			'eael_section_interactive_circle_content_text_color',
			[
				'label'     => esc_html__( 'Text Color', 'essential-addons-for-elementor-lite' ),
				'type'      => Controls_Manager::COLOR,
				//			    'default' => '#333',
				'selectors' => [
					'{{WRAPPER}} .eael-circle-content' => 'color: {{VALUE}};',
				],
			]
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'eael_interactive_circle_content_typo',
				'selector' => '{{WRAPPER}} .eael-circle-content',
			]
		);

$this->add_responsive_control(
			'eael_interactive_circle_content_icon_size',
			[
				'label'      => __( 'Icon Size', 'essential-addons-for-elementor-lite' ),
				'type'       => Controls_Manager::SLIDER,
				'default'    => [
					'size' => 50,
					'unit' => 'px',
				],
				'size_units' => [ 'px' ],
				'range'      => [
					'px' => [
						'min'  => 0,
						'max'  => 500,
						'step' => 1,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .eael-circle-content-icon i'   => 'font-size: {{SIZE}}{{UNIT}}!important;',
					'{{WRAPPER}} .eael-circle-content-icon svg' => 'width: {{SIZE}}{{UNIT}}!important; height: {{SIZE}}{{UNIT}}!important; min-width: {{SIZE}}{{UNIT}}!important; min-height: {{SIZE}}{{UNIT}}!important;',
					'{{WRAPPER}} .eael-circle-content-icon img.eael-circle-acf-icon' => 'width: {{SIZE}}{{UNIT}}!important; height: {{SIZE}}{{UNIT}}!important;',
				],
			]
		);

$this->add_control(
			'eael_interactive_circle_content_icon_color',
			[
				'label'     => esc_html__( 'Icon Color', 'essential-addons-for-elementor-lite' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-content .eael-circle-content-icon i'   => 'color: {{VALUE}}!important;',
					'{{WRAPPER}} .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-content .eael-circle-content-icon svg path' => 'fill: {{VALUE}}!important;',
				],
				'condition' => [
					'eael_interactive_circle_content_icon_show' => 'yes'
				],
			]
		);

$this->add_responsive_control(
			'eael_interactive_circle_content_padding',
			[
				'label'      => esc_html__( 'Padding', 'essential-addons-for-elementor-lite' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .eael-circle-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
				],
			]
		);
		$this->add_responsive_control(
			'eael_interactive_circle_content_margin',
			[
				'label'      => esc_html__( 'Margin', 'essential-addons-for-elementor-lite' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .eael-circle-btn-content' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'     => 'eael_interactive_circle_content_border',
				'label'    => esc_html__( 'Border', 'essential-addons-for-elementor-lite' ),
				'selector' => '{{WRAPPER}} .eael-circle-responsive-view .eael-circle-content,
				{{WRAPPER}} .eael-circle-desktop-view.eael-interactive-circle-preset-1 .eael-circle-btn-content,
				{{WRAPPER}} .eael-circle-desktop-view.eael-interactive-circle-preset-2 .eael-circle-btn-content,
				{{WRAPPER}} .eael-interactive-circle-preset-3 .eael-circle-content,
				{{WRAPPER}} .eael-circle-desktop-view.eael-interactive-circle-preset-4 .eael-circle-content',
			]
		);

$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'      => 'eael_interactive_circle_content_shadow',
				'selector'  => '{{WRAPPER}} .eael-circle-wrapper:not(.eael-interactive-circle-preset-1) .eael-circle-content, {{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-3 .eael-circle-info .eael-circle-inner .eael-circle-item .eael-circle-btn-content .eael-circle-content, {{WRAPPER}} .eael-circle-wrapper.eael-interactive-circle-preset-1 .eael-circle-inner',
				'condition' => [
					'eael_interactive_circle_preset!' => 'eael-interactive-circle-preset-2'
				],
			]
		);
		$this->end_controls_section();
	}

protected function register_controls() {
		$this->eael_register_acf_controls();

$this->eael_interactive_circle_general();
		$this->eael_interactive_circle_item();
		$this->eael_interactive_circle_additional();

$this->eael_interactive_circle_general_style();

$this->eael_interactive_circle_button_style();
		$this->eael_interactive_circle_content_style();

$this->eael_acf_extra_data_controls_style();
	}

/**
	 * Renders a single item's icon.
	 *
	 * A per-item ACF image (mapped via "Item Icon (Image)") wins; otherwise the
	 * icon control value is rendered. In custom mode there is no image key, so this
	 * always falls through to Icons_Manager — byte-identical to the old behaviour.
	 *
	 * @param array  $item     Normalized item (from get_interactive_circle_items or the manual repeater).
	 * @param string $icon_key Which icon control key to fall back to (btn / content).
	 * @return void
	 */
	protected function eael_ic_render_item_icon( $item, $icon_key ) {
		if ( ! empty( $item['eael_ic_icon_image']['url'] ) ) {
			printf(
				'<img class="eael-circle-acf-icon" src="%s" alt="%s" />',
				esc_url( $item['eael_ic_icon_image']['url'] ),
				esc_attr( $item['eael_interactive_circle_btn_title'] ?? '' )
			);
			return;
		}

if ( ! empty( $item[ $icon_key ] ) ) {
			Icons_Manager::render_icon( $item[ $icon_key ] );
		}
	}

protected function render() {
		$settings = $this->get_settings_for_display();

// Custom mode returns the manual repeater unchanged; ACF mode swaps in the mapped rows.
		// Done once here — both preset render loops below read the same key.
		$settings['eael_interactive_circle_item'] = $this->get_interactive_circle_items( $settings );

if ( empty( $settings['eael_interactive_circle_item'] ) ) {
			return;
		}

$this->add_render_attribute(
			'eael_interactive_circle_container',
			[
				'id'         => "eael-interactive-circle-{$this->get_id()}",
				'class'      => [ 'eael-interactive-circle', ],
				'data-tabid' => $this->get_id(),
			]
		);

$this->add_render_attribute(
			'eael_circle_wrapper',
			[
				'class' => [
					'eael-circle-wrapper',
					$settings['eael_interactive_circle_preset'],
					! empty( $settings['eael_interactive_circle_event'] ) ? $settings['eael_interactive_circle_event'] : 'eael-interactive-circle-event-click'
				],
			]
		);

$this->add_render_attribute( 'eael_circle_wrapper', 'data-appearance', $settings['eael_interactive_circle_animation'] );
		$this->add_render_attribute( 'eael_circle_wrapper', 'data-autoplay', esc_attr( 'yes' === $settings['eael_interactive_circle_autoplay'] ? 1 : 0 ) );
		$this->add_render_attribute( 'eael_circle_wrapper', 'data-autoplay-interval', esc_attr( ! empty( $settings['eael_interactive_circle_autoplay_interval']['size'] ) ? intval( $settings['eael_interactive_circle_autoplay_interval']['size'] ) : 2000 ) );

$item_count     = count( $settings['eael_interactive_circle_item'] );
		$show_btn_icon  = isset( $settings['eael_interactive_circle_btn_icon_show'] ) && 'yes' === $settings['eael_interactive_circle_btn_icon_show'];
		$show_btn_title = isset( $settings['eael_interactive_circle_btn_text_show'] ) && 'yes' === $settings['eael_interactive_circle_btn_text_show'];
		$mobile_view 	= isset( $settings['eael_interactive_circle_desktop_view'] ) && 'yes' === $settings['eael_interactive_circle_desktop_view'] ? 'eael-circle-desktop-view' : 'eael-circle-responsive-view';
		$show_content_icon  = isset( $settings['eael_interactive_circle_content_icon_show'] ) && 'yes' === $settings['eael_interactive_circle_content_icon_show'];

$this->add_render_attribute( 'eael_circle_wrapper', 'class', $mobile_view );

$this->add_render_attribute( 'eael_circle_info', 'class', 'eael-circle-info');
		$this->add_render_attribute( 'eael_circle_info', 'data-items', $item_count );

if( 'yes' === $settings['eael_interactive_circle_rotation'] ){
			$this->add_render_attribute( 'eael_circle_wrapper', 'class', 'eael-interactive-circle-rotate' );
		}

if( 'yes' === $settings['eael_interactive_circle_rotation_hover'] ){
			$this->add_render_attribute( 'eael_circle_wrapper', 'class', 'pause-rotate');
		}

?>
        <div <?php $this->print_render_attribute_string( 'eael_interactive_circle_container' ); ?>>
			<?php if ( ( $settings['eael_interactive_circle_preset'] != 'eael-interactive-circle-preset-2' ) ) { ?>
                <div <?php $this->print_render_attribute_string( 'eael_circle_wrapper' ); ?>>
                    <div <?php $this->print_render_attribute_string( 'eael_circle_info' ); ?>>
                        <div class="eael-circle-inner">
							<?php
							foreach ( $settings['eael_interactive_circle_item'] as $index => $item ) :
								$item_style_classic = ! empty( $item['eael_interactive_circle_tab_bgtype_background'] ) && 'classic' === $item['eael_interactive_circle_tab_bgtype_background'] ? 'classic' : '';
								$item_count = $index + 1;
								$is_active  = $item['eael_interactive_circle_default_active'] === 'yes' ? 'active' : '';
								?>
                                <div class="eael-circle-item elementor-repeater-item-<?php echo esc_attr( $item['_id'] ); ?>">
                                    <div aria-controls="eael-interactive-<?php echo esc_attr( $item_count ); ?>" tabindex="0" class="eael-circle-btn <?php echo esc_attr( $is_active ); ?>" id="eael-circle-item-<?php echo esc_attr( $item_count ); ?>">
										<?php if ( in_array( $settings['eael_interactive_circle_preset'], [ 'eael-interactive-circle-preset-3', 'eael-interactive-circle-preset-4'] ) ) { ?>
										<div class="eael-circle-icon-shapes <?php echo esc_attr( $item_style_classic ); ?>">
											<div class="eael-shape-1"></div>
											<div class="eael-shape-2"></div>
										</div>
										<?php } ?>

<?php 
											if( 'yes' == $item['eael_interactive_circle_btn_link_on'] ) {
												if ( ! empty( $item['eael_interactive_circle_btn_link']['url'] ) ) {
													$this->add_link_attributes( 'interactive_circle_link_' . $index, $item['eael_interactive_circle_btn_link'] );
												}
											?>
											<a <?php $this->print_render_attribute_string( 'interactive_circle_link_' . $index ); ?>>
												<div class="eael-circle-btn-icon <?php echo esc_attr( $item_style_classic ); ?>">
													<div class="eael-circle-icon-inner">
														<?php
														if ( $show_btn_icon ) {
															$this->eael_ic_render_item_icon( $item, 'eael_interactive_circle_btn_icon' );
														}
														if ( $show_btn_title ) {
															echo '<span class="eael-circle-btn-txt">' . esc_html( $item['eael_interactive_circle_btn_title'] ) . '</span>';
														}
														?>
													</div>
												</div>
											</a>
											<?php
										} else {
											?>
											<div class="eael-circle-btn-icon <?php echo esc_attr( $item_style_classic ); ?>">
												<div class="eael-circle-icon-inner">
													<?php
													if ( $show_btn_icon ) {
														$this->eael_ic_render_item_icon( $item, 'eael_interactive_circle_btn_icon' );
													}
													if ( $show_btn_title ) {
														echo '<span class="eael-circle-btn-txt">' . esc_html( $item['eael_interactive_circle_btn_title'] ) . '</span>';
													}
													?>
												</div>
                                        	</div>
											<?php
										} ?>
										
                                        
                                    </div>
                                    <div id="eael-interactive-<?php echo esc_attr( $item_count ); ?>" aria-labelledby="eael-circle-item-<?php echo esc_attr( $item_count ); ?>" class="eael-circle-btn-content eael-circle-item-<?php echo esc_attr( $item_count . ' ' . $is_active ); ?>">
                                        <div class="eael-circle-content">
											<?php 
											// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
											echo $this->parse_text_editor( wp_kses( $item['eael_interactive_circle_item_content'], Helper::eael_allowed_tags() ) ); ?>
											<?php if ( ! empty( $item['eael_ic_extras'] ) ) : ?>
												<ul class="eael-interactive-circle-extras">
													<?php foreach ( $item['eael_ic_extras'] as $extra ) : ?>
														<li class="eael-interactive-circle-extra"><span class="eael-interactive-circle-extra-value"><?php echo wp_kses_post( $extra['value'] ); ?></span></li>
													<?php endforeach; ?>
												</ul>
											<?php endif; ?>
                                        </div>
                                    </div>
                                </div>

<?php endforeach; ?>

</div>
                    </div>
                </div>

<?php } else { ?>

<div <?php $this->print_render_attribute_string( 'eael_circle_wrapper' ); ?>>
                    <div class="eael-circle-info">
                        <div class="eael-circle-inner" data-items="<?php echo esc_attr( $item_count ); ?>">
							<?php
							foreach ( $settings['eael_interactive_circle_item'] as $index => $item ) :
								$item_count = $index + 1;
								$is_active  = $item['eael_interactive_circle_default_active'] === 'yes' ? 'active' : '';
								?>
                                <div class="eael-circle-item elementor-repeater-item-<?php echo esc_attr( $item['_id'] ); ?>">
                                    <div aria-controls="eael-interactive-<?php echo esc_attr( $item_count ); ?>" tabindex="0" class="eael-circle-btn <?php echo esc_attr( $is_active ); ?>" id="eael-circle-item-<?php echo esc_attr( $item_count ); ?>">
                                        <div class="eael-circle-icon-shapes">
                                            <div class="eael-shape-1"></div>
                                            <div class="eael-shape-2"></div>
                                        </div>

</div>
                                    <div class="eael-circle-btn-content eael-circle-item-<?php echo esc_attr( $item_count . ' ' . $is_active ); ?>">
                                        <div id="eael-interactive<?php echo esc_attr( $item_count ); ?>" aria-labelledby="eael-circle-item-<?php echo esc_attr( $item_count ); ?>" class="eael-circle-content">
											<?php if ( $show_content_icon ) : ?>
												<div class="eael-circle-content-icon">
													<?php $this->eael_ic_render_item_icon( $item, 'eael_interactive_circle_content_icon' ); ?>
												</div>
											<?php endif; ?>
											<?php echo wp_kses( $item['eael_interactive_circle_item_content'], Helper::eael_allowed_tags() ); ?>
											<?php if ( ! empty( $item['eael_ic_extras'] ) ) : ?>
												<ul class="eael-interactive-circle-extras">
													<?php foreach ( $item['eael_ic_extras'] as $extra ) : ?>
														<li class="eael-interactive-circle-extra"><span class="eael-interactive-circle-extra-value"><?php echo wp_kses_post( $extra['value'] ); ?></span></li>
													<?php endforeach; ?>
												</ul>
											<?php endif; ?>
                                        </div>
                                    </div>
                                </div>
							<?php endforeach; ?>

</div>
                    </div>
                </div>
			<?php } ?>

</div>
	<?php }
}

Page not found – Mijikenda Real Estate

Oops! That page can’t be found.

It looks like nothing was found at this location. Maybe try one of the links below or a search?

JezK

Edit File: Interactive_Circle.php

Oops! That page can’t be found.

Latest Listings

Latest Articles

Discover a Place You'll Love to Live

Compare