trAvis - MANAGER

Edit File: tp_carousel_remote.php

<?php 
/*
Widget Name: Carousel Remote
Description: Carousel/Switcher remote button.
Author: Theplus
Author URI: https://posimyth.com
*/
namespace TheplusAddons\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Utils;
use Elementor\Core\Schemes\Color;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Border;
use Elementor\Core\Schemes\Typography;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Image_Size;

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

class ThePlus_Carousel_Remote extends Widget_Base {
		
	public function get_name() {
		return 'tp-carousel-remote';
	}

public function get_title() {
        return esc_html__('Carousel Remote', 'theplus');
    }

public function get_icon() {
        return 'fa fa-bluetooth-b theplus_backend_icon';
    }

public function get_categories() {
        return array('plus-creatives');
    }

protected function _register_controls() {
		
		$this->start_controls_section(
			'content_section',
			[
				'label' => esc_html__( 'Content', 'theplus' ),
				'tab' => Controls_Manager::TAB_CONTENT,
			]
		);
		$this->add_control(
			'carousel_unique_id',
			[
				'label' => esc_html__( 'Unique Connection ID', 'theplus' ),
				'type' => Controls_Manager::TEXT,
				'default' => '',
				'description' => esc_html__('Enter the value of ID of carousel/Switcher, which you want to remotely connect with this.','theplus'),
			]
		);
		$this->add_control(
			'remote_type',
			[
				'label' => esc_html__( 'Remote Type', 'theplus' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'carousel',
				'options' => [
					'carousel'  => esc_html__( 'Carousel', 'theplus' ),
					'switcher' => esc_html__( 'Switcher', 'theplus' ),					
				],
				'separator' => 'before',
			]
		);
		$this->end_controls_section();
		$this->start_controls_section(
			'Nxt_Pre_section',
			[
				'label' => esc_html__( 'Prev/Next', 'theplus' ),
				'tab' => Controls_Manager::TAB_CONTENT,
			]
		);
		$this->add_control(
			'nxtprvbtn',[
				'label'   => esc_html__( 'Next/Prev Button', 'theplus' ),
				'type'    =>  Controls_Manager::SWITCHER,
				'default' => 'yes',
				'label_on' => esc_html__( 'Show', 'theplus' ),
				'label_off' => esc_html__( 'Hide', 'theplus' ),	
			]
		);
		$this->add_control(
			'nav_next_slide',
			[
				'label' => esc_html__( 'Button 1 Text', 'theplus' ),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__( 'Next', 'theplus' ),
				'dynamic' => [
					'active'   => true,
				],
				'condition' => [
					'nxtprvbtn' => 'yes',
				],
			]
		);
		$this->add_control(
			'nav_prev_slide',
			[
				'label' => esc_html__( 'Button 2 Text', 'theplus' ),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__( 'Prev', 'theplus' ),
				'dynamic' => [
					'active'   => true,
				],
				'condition' => [
					'nxtprvbtn' => 'yes',
				],
			]
		);
		$this->add_responsive_control(
			'content_align',
			[
				'label' => esc_html__( 'Alignment', 'theplus' ),
				'type' => Controls_Manager::CHOOSE,
				'options' => [
					'left' => [
						'title' => esc_html__( 'Left', 'theplus' ),
						'icon' => 'eicon-text-align-left',
					],
					'center' => [
						'title' => esc_html__( 'Center', 'theplus' ),
						'icon' => 'eicon-text-align-center',
					],
					'right' => [
						'title' => esc_html__( 'Right', 'theplus' ),
						'icon' => 'eicon-text-align-right',
					],
				],
				'condition' => [
					'nxtprvbtn' => 'yes',
				],
				'default' => 'left',
				'prefix_class' => 'text-%s',
			]
		);
		$this->add_control(
			'nav_icon_style',
			[
				'label'   => esc_html__( 'Icon Style', 'theplus' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'style-1',
				'options' => [
					'none'  => esc_html__( 'None', 'theplus' ),
					'style-1'  => esc_html__( 'Style 1', 'theplus' ),
					'custom' => esc_html__( 'Custom', 'theplus' ),
				],
				'condition' => [
					'nxtprvbtn' => 'yes',
				],
			]
		);
		$this->add_control(
			'nav_prev_icon',
			[
				'label' => esc_html__( 'Custom Icon 1', 'theplus' ),
				'type' => Controls_Manager::MEDIA,
				'default' => [
					'url' => '',
				],
				'dynamic' => [
					'active'   => true,
				],
				'condition' => [
					'nav_icon_style' => 'custom',
				],
			]
		);
		$this->add_control(
			'nav_next_icon',
			[
				'label' => esc_html__( 'Custom Icon 2', 'theplus' ),
				'type' => Controls_Manager::MEDIA,
				'default' => [
					'url' => '',
				],
				'dynamic' => [
					'active'   => true,
				],
				'condition' => [
					'nav_icon_style' => 'custom',
				],
			]
		);
		$this->add_group_control(
			Group_Control_Image_Size::get_type(),
			[
				'name' => 'nav_icon_thumbnail',
				'default' => 'full',
				'separator' => 'none',
				'separator' => 'before',
				'condition' => [
					'nav_icon_style' => 'custom',
				],
			]
		);
		$this->end_controls_section();
		/*Dots Start*/
		$this->start_controls_section(
            'section_dot',
            [
                'label' => esc_html__('Dots', 'theplus'),
                'tab' => Controls_Manager::TAB_CONTENT,
				'condition' => [
					'remote_type' => 'carousel',
				],
            ]
        );
		$this->add_control(
			'dotList',
			[
				'label' => esc_html__( 'Dots', 'theplus' ),
				'type' => \Elementor\Controls_Manager::SWITCHER,
				'label_on' => esc_html__( 'Enable', 'theplus' ),
				'label_off' => esc_html__( 'Disable', 'theplus' ),
				'default' => 'no',
			]
		);
		$repeater = new \Elementor\Repeater();
		$repeater->add_control(
			'label',
			[
				'label' => esc_html__( 'Label', 'theplus' ),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__( 'Label', 'theplus' ),
				'dynamic' => ['active'   => true,],
			]
		);
		$repeater->add_control(
			'iconFonts',
			[
				'label' => esc_html__( 'Select Icon', 'theplus' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'font_awesome',
				'options' => [
					'none'  => esc_html__( 'None', 'theplus' ),
					'font_awesome' => esc_html__( 'Font Awesome', 'theplus' ),
					'image' => esc_html__( 'Image', 'theplus' ),
				],				
			]
		);
		$repeater->add_control(
			'iconName',
			[
				'label' => esc_html__( 'Icon Library', 'theplus' ),
				'type' => Controls_Manager::ICONS,
				'default' => [
					'value' => 'fas fa-plus',
					'library' => 'solid',
				],
				'condition' => [
					'iconFonts' => 'font_awesome',
				],
			]
		);
		$repeater->add_control(
			'iconImage',
			[
				'label' => esc_html__( 'Use Image As icon', 'theplus' ),
				'type' => Controls_Manager::MEDIA,
				'default' => [
					'url' => '',
				],
				'media_type' => 'image',
				'dynamic' => ['active'   => true,],
				'condition' => [
					'iconFonts' => 'image',
				],
			]
		);
		$repeater->add_group_control(
			Group_Control_Image_Size::get_type(),
			[
				'name' => 'iconimageSize',
				'default' => 'full',
				'separator' => 'none',
				'separator' => 'after',
				'condition' => [
					'iconFonts' => 'image',
				],
			]
		);
		$repeater->start_controls_tabs( 'tabs_dot' );
		$repeater->start_controls_tab(
			'tab_dot_normal',
			[
				'label' => esc_html__( 'Normal', 'theplus' ),
				'condition' => [
					'iconFonts!' => 'none',
				],
			]
		);
		$repeater->add_control(
			'doticonColor',
			[
				'label' => esc_html__( 'Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'default' => '',
				'render_type' => 'ui',
				'selectors' => [
					'{{WRAPPER}} .theplus-carousel-remote .tp-carodots-item{{CURRENT_ITEM}}' => 'color: {{VALUE}}',
				],
				'condition' => [
					'iconFonts!' => 'none',
				],
			]
		);
		$repeater->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'dotBgtype',
				'label' => esc_html__( 'Background', 'theplus' ),
				'types' => [ 'classic', 'gradient'],
				'render_type' => 'ui',
				'selector' => '{{WRAPPER}} .theplus-carousel-remote .tp-carodots-item{{CURRENT_ITEM}}',
				'condition' => [
					'iconFonts!' => 'none',
				],
			]
		);
		$repeater->end_controls_tab();
		$repeater->start_controls_tab(
			'tab_dot_active',
			[
				'label' => esc_html__( 'Active', 'theplus' ),
				'condition' => [
					'iconFonts!' => 'none',
				],
			]
		);
		$repeater->add_control(
			'acticonColor',
			[
				'label' => esc_html__( 'Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'default' => '',
				'render_type' => 'ui',
				'selectors' => [
					'{{WRAPPER}} .theplus-carousel-remote .tp-carodots-item{{CURRENT_ITEM}}.active' => 'color: {{VALUE}}',
				],
				'condition' => [
					'iconFonts!' => 'none',
				],
			]
		);
		$repeater->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'actdotBgtype',
				'label' => esc_html__( 'Background', 'theplus' ),
				'types' => [ 'classic', 'gradient'],
				'render_type' => 'ui',
				'selector' => '{{WRAPPER}} .theplus-carousel-remote .tp-carodots-item{{CURRENT_ITEM}}.active',
				'condition' => [
					'iconFonts!' => 'none',
				],
			]
		);
		$repeater->end_controls_tab();
		$repeater->end_controls_tabs();
		$this->add_control(
			'dots_coll',
			[
				'label' => '',
				'type' => Controls_Manager::REPEATER,
				'fields' => $repeater->get_controls(),
				'default' => [
					[
						'label' => esc_html__( 'Dot 1', 'theplus' ),
						'iconName' => 'fas fa-plus',
					],
					[
						'label' => esc_html__( 'Dot 2', 'theplus' ),
						'iconName' => 'fas fa-plus',
					],
					[
						'label' => esc_html__( 'Dot 3', 'theplus' ),
						'iconName' => 'fas fa-plus',
					],
				],
				'title_field' => '{{{ label }}}',
				'condition' => [
					'dotList' => 'yes',
				],
			]
		);
		$this->add_control(
			'dotLayout',
			[
				'label' => esc_html__( 'Layout', 'theplus' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'horizontal',
				'options' => [
					'horizontal'  => esc_html__( 'Horizontal', 'theplus' ),
					'vertical'  => esc_html__( 'Vertical', 'theplus' ),
				],
				'condition' => [
					'dotList' => 'yes',
				],
			]
		);
		$this->add_control(
			'dotstyle',
			[
				'label' => esc_html__( 'Active Dot Style', 'theplus' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'style-1',
				'options' => [
					'style-1'  => esc_html__( 'Style 1', 'theplus' ),
					'style-2'  => esc_html__( 'Style 2', 'theplus' ),
				],
				'condition' => [
					'dotList' => 'yes',
				],
			]
		);
		$this->add_control(
			'AniDuration',
			[
				'label' => esc_html__( 'Duration (milliseconds)', 'theplus' ),
				'type' => Controls_Manager::NUMBER,
				'min' => 1,
				'max' => 10000,
				'step' => 100,
				'selectors' => [
					'{{WRAPPER}} .tp-carousel-dots .style-1.active .active-border .border' => 'animation-duration: {{VALUE}}ms',
				],
				'condition' => [
					'dotList' => 'yes',
					'dotstyle' => 'style-1',
				],
			]
		);
		$this->add_control(
			'AborderColor',
			[
				'label' => esc_html__( 'Border Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'default' => '#000000',
				'condition' => [
					'dotList' => 'yes',
					'dotstyle' => 'style-1',
				],
			]
		);
		$this->add_control(
			'tooltipDir',
			[
				'label' => esc_html__( 'Tooltip Direction', 'theplus' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'top',
				'options' => [
					'top'  => esc_html__( 'Top', 'theplus' ),
					'bottom'  => esc_html__( 'Bottom', 'theplus' ),
				],
				'condition' => [
					'dotList' => 'yes',
					'dotLayout' => 'horizontal',
					'dotstyle' => 'style-2',
				],
			]
		);
		$this->add_control(
			'vtooltipDir',
			[
				'label' => esc_html__( 'Tooltip Direction', 'theplus' ),
				'type' => Controls_Manager::SELECT,
				'default' => 'left',
				'options' => [
					'left'  => esc_html__( 'Left', 'theplus' ),
					'right'  => esc_html__( 'Right', 'theplus' ),
				],
				'condition' => [
					'dotList' => 'yes',
					'dotLayout' => 'vertical',
					'dotstyle' => 'style-2',
				],
			]
		);
		$this->end_controls_section();	
		/*Dots End*/
		/*Prev/Next style start*/
		$this->start_controls_section(
            'section_PrevNext_styling',
            [
                'label' => esc_html__('Prev/Next', 'theplus'),
                'tab' => Controls_Manager::TAB_STYLE,	
            ]
        );
        $this->add_control(
			'section_Icon_styling',
			[
				'label' => esc_html__( 'Icon', 'theplus' ),
				'type' => Controls_Manager::HEADING,
				'condition' => [
					'nxtprvbtn' => 'yes',
					'nav_icon_style!' => 'none',
				],
			]
		);
		$this->add_responsive_control(
            'icon_size',
            [
                'type' => Controls_Manager::SLIDER,
				'label' => esc_html__('Icon Size', 'theplus'),
				'size_units' => ['px'],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 200,
						'step' => 1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 14,
				],
				'render_type' => 'ui',
				'selectors' => [
					'{{WRAPPER}} .theplus-carousel-remote .slider-nav-next-prev a.custom-nav-remote > span.nav-icon' => 'font-size: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .theplus-carousel-remote .slider-nav-next-prev a.custom-nav-remote > span.nav-icon img' => 'max-width: {{SIZE}}{{UNIT}};',
				],
            ]
        );
		$this->add_responsive_control(
            'icon_space',
            [
                'type' => Controls_Manager::SLIDER,
				'label' => esc_html__('Icon Space', 'theplus'),
				'size_units' => ['px'],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 40,
						'step' => 1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 5,
				],
				'render_type' => 'ui',
				'selectors' => [
					'{{WRAPPER}} .theplus-carousel-remote .slider-nav-next-prev a.custom-nav-remote.nav-prev-slide > span.nav-icon' => 'margin-right: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .theplus-carousel-remote .slider-nav-next-prev a.custom-nav-remote.nav-next-slide > span.nav-icon' => 'margin-left: {{SIZE}}{{UNIT}};',					
				],
            ]
        );
		$this->start_controls_tabs( 'tabs_icon_style' );
		$this->start_controls_tab(
			'tab_icon_normal',
			[
				'label' => esc_html__( 'Normal', 'theplus' ),
			]
		);
		$this->add_control(
			'icon_color',
			[
				'label' => esc_html__( 'Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .theplus-carousel-remote .slider-nav-next-prev a.custom-nav-remote > span.nav-icon' => 'color: {{VALUE}};',
				],
			]
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tab_icon_hover',
			[
				'label' => esc_html__( 'Hover/Active', 'theplus' ),
			]
		);
		$this->add_control(
			'icon_hover_color',
			[
				'label' => esc_html__( 'Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .theplus-carousel-remote .slider-nav-next-prev .custom-nav-remote:hover > span.nav-icon,{{WRAPPER}} .theplus-carousel-remote.remote-switcher .slider-nav-next-prev .custom-nav-remote.active  > span.nav-icon' => 'color: {{VALUE}};',
				],
			]
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->add_control(
			'section_styling',
			[
				'label' => esc_html__( 'Button Style', 'theplus' ),
				'type' => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => [
					'nxtprvbtn' => 'yes',
				],
			]
		);
		$this->add_responsive_control(
			'button_between_space',
			[
				'label' => esc_html__( 'Gap/Space', 'theplus' ),
				'type' => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 200,
						'step' => 1,
					],
				],
				'default' => [
					'unit' => 'px',
					'size' => 5,
				],
				'selectors' => [
					'{{WRAPPER}} .theplus-carousel-remote .slider-nav-next-prev a.custom-nav-remote.nav-prev-slide' => 'margin-right: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .theplus-carousel-remote .slider-nav-next-prev a.custom-nav-remote.nav-next-slide' => 'margin-left: {{SIZE}}{{UNIT}};',
				],
			]
		);
		$this->add_responsive_control(
			'nav_inner_padding',
			[
				'label' => esc_html__( 'Padding', 'theplus' ),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em' ],
				'default' =>[
					'top' => '10',
					'right' => '20',
					'bottom' => '10',
					'left' => '20',
				],
				'selectors' => [
					'{{WRAPPER}} .theplus-carousel-remote .slider-nav-next-prev .custom-nav-remote' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);
		$this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'content_typography',
                'label' => esc_html__('Typography', 'theplus'),
				'scheme'   => Typography::TYPOGRAPHY_3,
                'selector' => '{{WRAPPER}} .theplus-carousel-remote .slider-nav-next-prev .custom-nav-remote',
            ]
        );
		$this->start_controls_tabs( 'tabs_nav_style' );
		$this->start_controls_tab(
			'tab_nav_normal',
			[
				'label' => esc_html__( 'Normal', 'theplus' ),
			]
		);
		$this->add_control(
			'nav_color',
			[
				'label' => esc_html__( 'Text Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .theplus-carousel-remote .slider-nav-next-prev .custom-nav-remote' => 'color: {{VALUE}};',
				],
			]
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'      => 'box_background',
				'types'     => [ 'classic', 'gradient' ],
				'selector'  => '{{WRAPPER}} .theplus-carousel-remote .slider-nav-next-prev .custom-nav-remote',
				
			]
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tab_nav_hover',
			[
				'label' => esc_html__( 'Hover/Active', 'theplus' ),
			]
		);
		$this->add_control(
			'nav_hover_color',
			[
				'label' => esc_html__( 'Text Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .theplus-carousel-remote .slider-nav-next-prev .custom-nav-remote:hover,{{WRAPPER}} .theplus-carousel-remote.remote-switcher .slider-nav-next-prev .custom-nav-remote.active' => 'color: {{VALUE}};',
				],
			]
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'      => 'box_hover_background',
				'types'     => [ 'classic', 'gradient' ],
				'selector'  => '{{WRAPPER}} .theplus-carousel-remote .slider-nav-next-prev .custom-nav-remote:hover,{{WRAPPER}} .theplus-carousel-remote.remote-switcher .slider-nav-next-prev .custom-nav-remote.active',
			]
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->add_control(
			'box_border',
			[
				'label' => esc_html__( 'Box Border', 'theplus' ),
				'type' => Controls_Manager::SWITCHER,
				'label_on' => esc_html__( 'Show', 'theplus' ),
				'label_off' => esc_html__( 'Hide', 'theplus' ),
				'default' => 'no',
			]
		);
		$this->add_control(
			'button_border_style',
			[
				'label'   => esc_html__( 'Border Style', 'theplus' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'solid',
				'options' => [
					'none'   => esc_html__( 'None', 'theplus' ),
					'solid'  => esc_html__( 'Solid', 'theplus' ),
					'dotted' => esc_html__( 'Dotted', 'theplus' ),
					'dashed' => esc_html__( 'Dashed', 'theplus' ),
					'groove' => esc_html__( 'Groove', 'theplus' ),
				],
				'selectors'  => [
					'{{WRAPPER}} .theplus-carousel-remote .slider-nav-next-prev .custom-nav-remote' => 'border-style: {{VALUE}};',
				],
				'condition' => [
					'box_border' => 'yes',
				],
			]
		);
		$this->start_controls_tabs( 'tabs_border_style' );
		$this->start_controls_tab(
			'tab_border_normal',
			[
				'label' => esc_html__( 'Normal', 'theplus' ),
			]
		);
		$this->add_control(
			'box_border_color',
			[
				'label' => esc_html__( 'Border Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'default' => '#252525',
				'selectors'  => [
					'{{WRAPPER}} .theplus-carousel-remote .slider-nav-next-prev .custom-nav-remote' => 'border-color: {{VALUE}};',
				],
				'condition' => [
					'box_border' => 'yes',
				],
			]
		);
		$this->add_responsive_control(
			'box_border_width',
			[
				'label' => esc_html__( 'Border Width', 'theplus' ),
				'type'  => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'default' => [
					'top'    => 1,
					'right'  => 1,
					'bottom' => 1,
					'left'   => 1,
				],
				'selectors'  => [
					'{{WRAPPER}} .theplus-carousel-remote .slider-nav-next-prev .custom-nav-remote' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'condition' => [
					'box_border' => 'yes',
				],
			]
		);
		$this->add_responsive_control(
			'border_radius',
			[
				'label'      => esc_html__( 'Border Radius', 'theplus' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .theplus-carousel-remote .slider-nav-next-prev .custom-nav-remote' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'box_shadow',
				'selector' => '{{WRAPPER}} .theplus-carousel-remote .slider-nav-next-prev .custom-nav-remote',
			]
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tab_border_hover',
			[
				'label' => esc_html__( 'Hover/Active', 'theplus' ),
			]
		);
		$this->add_control(
			'box_border_hover_color',
			[
				'label' => esc_html__( 'Border Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'default' => '#252525',
				'selectors'  => [
					'{{WRAPPER}} .theplus-carousel-remote .slider-nav-next-prev .custom-nav-remote:hover,{{WRAPPER}} .theplus-carousel-remote.remote-switcher .slider-nav-next-prev .custom-nav-remote.active' => 'border-color: {{VALUE}};',
				],
				'condition' => [
					'box_border' => 'yes',
				],
			]
		);
		$this->add_responsive_control(
			'border_hover_radius',
			[
				'label'      => esc_html__( 'Border Radius', 'theplus' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .theplus-carousel-remote .slider-nav-next-prev .custom-nav-remote:hover,{{WRAPPER}} .theplus-carousel-remote.remote-switcher .slider-nav-next-prev .custom-nav-remote.active' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'box_hover_shadow',
				'selector' => '{{WRAPPER}} .theplus-carousel-remote .slider-nav-next-prev .custom-nav-remote:hover,{{WRAPPER}} .theplus-carousel-remote.remote-switcher .slider-nav-next-prev .custom-nav-remote.active',
			]
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();	
		$this->end_controls_section();	
		/*Prev/Next style End*/	
		/*General style start*/
		$this->start_controls_section(
            'section_general_styling',
            [
                'label' => esc_html__('Dots', 'theplus'),
                'tab' => Controls_Manager::TAB_STYLE,
            ]
        );
        $this->add_control(
			'section_dots_styling',
			[
				'label' => esc_html__( 'Dots', 'theplus' ),
				'type' => Controls_Manager::HEADING,
				'condition' => [
					'dotList' => 'yes',
				],
			]
		);
		$this->add_responsive_control(
            'dotsSize',
            [
                'type' => Controls_Manager::SLIDER,
				'label' => esc_html__('Size', 'theplus'),
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 1,
						'max' => 100,
						'step' => 1,
					],
				],
				'render_type' => 'ui',
				'selectors' => [
					'{{WRAPPER}} .tp-carousel-dots .tp-carodots-item' => 'width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}}',
				],
            ]
        );
		$this->add_responsive_control(
            'dotsGap',
            [
                'type' => Controls_Manager::SLIDER,
				'label' => esc_html__('Gap', 'theplus'),
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 1,
						'max' => 100,
						'step' => 1,
					],
				],
				'render_type' => 'ui',
				'selectors' => [
					'{{WRAPPER}} .tp-carousel-dots.dot-vertical .tp-carodots-item' => 'margin-bottom: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .tp-carousel-dots.dot-horizontal .tp-carodots-item' => 'margin-right: {{SIZE}}{{UNIT}};',
				],
            ]
        );
		$this->add_responsive_control(
            'dotsIconSize',
            [
                'type' => Controls_Manager::SLIDER,
				'label' => esc_html__('Icon Size', 'theplus'),
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 1,
						'max' => 300,
						'step' => 1,
					],
				],
				'render_type' => 'ui',
				'selectors' => [
					'{{WRAPPER}} .tp-carodots-item .tp-dots i' => 'font-size: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .tp-carousel-dots .tp-carodots-item >div>svg:first-child' => 'width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};',
				],
            ]
        );
		$this->add_responsive_control(
            'dotsImageSize',
            [
                'type' => Controls_Manager::SLIDER,
				'label' => esc_html__('Image Size', 'theplus'),
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 1,
						'max' => 300,
						'step' => 1,
					],
				],
				'render_type' => 'ui',
				'separator' => 'after',
				'selectors' => [
					'{{WRAPPER}} .tp-carodots-item .tp-dots img' => 'width: {{SIZE}}{{UNIT}};',
				],
            ]
        );
		$this->start_controls_tabs( 'tabs_dotsb_style' );
		$this->start_controls_tab(
			'tab_dotsb_normal',
			[
				'label' => esc_html__( 'Normal', 'theplus' ),
			]
		);
		$this->add_responsive_control(
            'dotsbr',
            [
                'type' => Controls_Manager::SLIDER,
				'label' => esc_html__('Border Radius', 'theplus'),
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 1,
						'max' => 50,
						'step' => 1,
					],
				],
				'render_type' => 'ui',
				'selectors' => [
					'{{WRAPPER}} .tp-carousel-dots .tp-carodots-item' => 'border-radius: {{SIZE}}{{UNIT}};',
				],
            ]
        );
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tab_dotsb_hover',
			[
				'label' => esc_html__( 'Active', 'theplus' ),
			]
		);
		$this->add_responsive_control(
            'dotsbra',
            [
                'type' => Controls_Manager::SLIDER,
				'label' => esc_html__('Border Radius', 'theplus'),
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 1,
						'max' => 50,
						'step' => 1,
					],
				],
				'render_type' => 'ui',
				'selectors' => [
					'{{WRAPPER}} .tp-carousel-dots .tp-carodots-item.active' => 'border-radius: {{SIZE}}{{UNIT}};',
				],
            ]
        );
		$this->end_controls_tab();
		$this->end_controls_tabs();	
		$this->add_control(
			'section_tooltip_styling',
			[
				'label' => esc_html__( 'Tooltip Style', 'theplus' ),
				'type' => Controls_Manager::HEADING,
				'separator' => 'before',
				'condition' => [
					'dotList' => 'yes',
					'dotstyle' => 'style-2',
				],
			]
		);
		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'tttypography',
				'selector' => '{{WRAPPER}} .tp-carodots-item .tooltip-txt',
			]
		);
		$this->add_control(
			'ttcolor',
			[
				'label' => esc_html__( 'Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .tp-carodots-item .tooltip-txt' => 'color: {{VALUE}};',
				],
			]
		);
		$this->add_control(
			'ttbgcolor',
			[
				'label' => esc_html__( 'Background Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .tp-carodots-item .tooltip-txt' => 'background-color: {{VALUE}};',
					'{{WRAPPER}} .tp-carodots-item .tooltip-txt:after' => 'border-right-color: {{VALUE}};',
				],
			]
		);
		$this->add_responsive_control(
            'ttwidth',
            [
                'type' => Controls_Manager::SLIDER,
				'label' => esc_html__('Width', 'theplus'),
				'size_units' => [ 'px' ],
				'range' => [
					'px' => [
						'min' => 1,
						'max' => 300,
						'step' => 1,
					],
				],
				'render_type' => 'ui',
				'selectors' => [
					'{{WRAPPER}} .tp-carodots-item .tooltip-txt' => 'width: {{SIZE}}{{UNIT}};',
				],
            ]
        );
		$this->end_controls_section();
		/*General Style end*/
		/*Pagination Start*/
		$this->start_controls_section(
            'section_pagination_style',
            [
                'label' => esc_html__('Paginate', 'theplus'),
                'tab' => Controls_Manager::TAB_STYLE,
				'condition' => [
					'remote_type' => 'carousel',
				],
            ]
        );
		$this->add_control(
			'showpagi',
			[
				'label' => esc_html__( 'Pagination', 'theplus' ),
				'type' => \Elementor\Controls_Manager::SWITCHER,
				'label_on' => esc_html__( 'Enable', 'theplus' ),
				'label_off' => esc_html__( 'Disable', 'theplus' ),
				'default' => 'no',
			]
		);
		$this->add_control(
			'sliderInd',
			[
				'label' => esc_html__( 'Total Slides', 'theplus' ),
				'type' => Controls_Manager::SELECT,
				'default' => '3',
				'options' => [
					'1'  => esc_html__( '1', 'theplus' ),
					'2'  => esc_html__( '2', 'theplus' ),
					'3'  => esc_html__( '3', 'theplus' ),
					'4'  => esc_html__( '4', 'theplus' ),
					'5'  => esc_html__( '5', 'theplus' ),
					'6'  => esc_html__( '6', 'theplus' ),
					'7'  => esc_html__( '7', 'theplus' ),
					'8'  => esc_html__( '8', 'theplus' ),
					'9'  => esc_html__( '9', 'theplus' ),
					'10'  => esc_html__( '10', 'theplus' ),
					'11'  => esc_html__( '11', 'theplus' ),
					'12'  => esc_html__( '12', 'theplus' ),
					'13'  => esc_html__( '13', 'theplus' ),
					'14'  => esc_html__( '14', 'theplus' ),
					'15'  => esc_html__( '15', 'theplus' ),
				],
				'condition' => [
					'showpagi' => 'yes',
				],
			]
		);
		$this->start_controls_tabs( 'tabs_pagination' );
		$this->start_controls_tab(
			'tab_pagination_total',
			[
				'label' => esc_html__( 'Total', 'theplus' ),
				'condition' => [
					'showpagi' => 'yes',
				],
			]
		);
		$this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'noTypo',
                'label' => esc_html__('Typography', 'theplus'),
				'scheme'   => Typography::TYPOGRAPHY_3,
                'selector' => '{{WRAPPER}} .theplus-carousel-remote .carousel-pagination li.pagination-list-in.total,
				{{WRAPPER}} .theplus-carousel-remote .carousel-pagination li.pagination-list-in.separator',
				'condition' => [
					'showpagi' => 'yes',
				],
            ]
        );
		$this->add_control(
			'noColor',
			[
				'label' => esc_html__( 'Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'default' => '',
				'render_type' => 'ui',
				'selectors' => [
					'{{WRAPPER}} .theplus-carousel-remote .carousel-pagination li.pagination-list-in.total,
				{{WRAPPER}} .theplus-carousel-remote .carousel-pagination li.pagination-list-in.separator' => 'color: {{VALUE}}',
				],
				'condition' => [
					'showpagi' => 'yes',
				],
			]
		);
		$this->end_controls_tab();
		$this->start_controls_tab(
			'tab_pagination_active',
			[
				'label' => esc_html__( 'Active', 'theplus' ),
				'condition' => [
					'showpagi' => 'yes',
				],
			]
		);
		$this->add_group_control(
            Group_Control_Typography::get_type(),
            [
                'name' => 'ActnoTypo',
                'label' => esc_html__('Typography', 'theplus'),
				'scheme'   => Typography::TYPOGRAPHY_3,
                'selector' => '{{WRAPPER}} .theplus-carousel-remote .carousel-pagination li.pagination-list-in.active',
				'condition' => [
					'showpagi' => 'yes',
				],
            ]
        );
		$this->add_control(
			'ActnoColor',
			[
				'label' => esc_html__( 'Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'default' => '',
				'render_type' => 'ui',
				'selectors' => [
					'{{WRAPPER}} .theplus-carousel-remote .carousel-pagination li.pagination-list-in.active' => 'color: {{VALUE}}',
				],
				'condition' => [
					'showpagi' => 'yes',
				],
			]
		);
		$this->end_controls_tab();
		$this->end_controls_tabs();
		$this->add_control(
			'sepColor',
			[
				'label' => esc_html__( 'Seprator Color', 'theplus' ),
				'type' => Controls_Manager::COLOR,
				'default' => '',
				'render_type' => 'ui',
				'selectors' => [
					'{{WRAPPER}} .theplus-carousel-remote .carousel-pagination li.pagination-list-in.separator' => 'color: {{VALUE}}',
				],
				'condition' => [
					'showpagi' => 'yes',
				],
			]
		);
		$this->end_controls_section();	
		/*Pagination End*/
		/*Adv tab*/
		$this->start_controls_section(
            'section_plus_extra_adv',
            [
                'label' => esc_html__('Plus Extras', 'theplus'),
                'tab' => Controls_Manager::TAB_ADVANCED,
            ]
        );
		$this->end_controls_section();
		/*Adv tab*/
		
		/*--On Scroll View Animation ---*/
		include THEPLUS_PATH. 'modules/widgets/theplus-widget-animation.php';
	}
	
	 protected function render() {

$settings = $this->get_settings_for_display();
		$remote_type = $settings["remote_type"];
		
			/*--On Scroll View Animation ---*/
				include THEPLUS_PATH. 'modules/widgets/theplus-widget-animation-attr.php';

/*--Plus Extra ---*/
				$PlusExtra_Class = "";
				include THEPLUS_PATH. 'modules/widgets/theplus-widgets-extra.php';
			/*--Plus Extra ---*/

$nav_next =$nav_prev = '';
			$carousel_unique_id=$settings["carousel_unique_id"];
			$nav_next_slide = $settings['nav_next_slide'];
			$nav_prev_slide = $settings['nav_prev_slide'];
			
			$nav_next_text=$nav_prev_text ='';
			if($nav_next_slide!=''){
				$nav_next_text ='<span>'.esc_html($nav_next_slide).'</span>';
			}
			if($nav_prev_slide!=''){
				$nav_prev_text ='<span>'.esc_html($nav_prev_slide).'</span>';
			}
			
			if($settings["nav_icon_style"]=='none'){
				$nav_prev = $nav_prev_text;
				$nav_next = $nav_next_text;
			}else if($settings["nav_icon_style"]=='style-1'){
				$nav_prev = '<span class="nav-icon"><i class="fa fa-angle-left" aria-hidden="true"></i></span>'.$nav_prev_text;
				$nav_next = $nav_next_text.'<span class="nav-icon"><i class="fa fa-angle-right" aria-hidden="true"></i></span>';
			}else if($settings["nav_icon_style"]=='custom'){
				$nav_prev_icon=$nav_next_icon='';
				if(!empty($settings["nav_prev_icon"]["url"])){
					$nav_prev_iconid=$settings["nav_prev_icon"]["id"];				
					$nav_prev_icon= tp_get_image_rander( $nav_prev_iconid,$settings['nav_icon_thumbnail_size']);
				}				
				
				if(!empty($settings["nav_next_icon"]["url"])){
					$nav_next_iconid=$settings["nav_next_icon"]["id"];				
					$nav_next_icon= tp_get_image_rander( $nav_next_iconid,$settings['nav_icon_thumbnail_size']);
				}
				
				$nav_prev = '<span class="nav-icon">'.$nav_prev_icon.'</span>'.$nav_prev_text;
				$nav_next = $nav_next_text.'<span class="nav-icon">'.$nav_next_icon.'</span>';
			}
			
			$active_class='';
			if($remote_type=='switcher'){
				$active_class="active";
			}
			
			$uid=uniqid("remote");
			$da=$daid='';
			if(!empty($settings['dotList']) && $settings['dotList']=='yes'){
				$da='data-connection="tpca_'.esc_attr($carousel_unique_id).'" data-tab-id="tptab_'.esc_attr($carousel_unique_id).'" data-extra-conn="tpex-'.esc_attr($carousel_unique_id).'"';
				$daid='id="tptab_'.esc_attr($carousel_unique_id).'"';
			}
			$carousel_remote ='<div '.$daid.' class="theplus-carousel-remote remote-'.esc_attr($remote_type).' '.$animated_class.' '.esc_attr($uid).'" data-id="'.esc_attr($uid).'" data-remote="'.esc_attr($remote_type).'"  '.$da.' '.$animation_attr.'>';
			
				if(empty($settings['nxtprvbtn']) && $settings['nxtprvbtn'] != 'yes'){
					$carousel_remote .='';
				}else{
					$carousel_remote .='<div class="slider-nav-next-prev">';
					$cnavll = function_exists('tp_has_lazyload') ? tp_bg_lazyLoad($settings['box_background_image'],$settings['box_hover_background_image']) : '';
					$carousel_remote .='<a href="#" class="custom-nav-remote '.$cnavll.' nav-prev-slide '.esc_attr($active_class).'" data-id="tpca_'.esc_attr($carousel_unique_id).'" data-nav="'.esc_attr("prev","theplus").'">'.$nav_prev.'</a>';
					$carousel_remote .='<a href="#" class="custom-nav-remote '.$cnavll.' nav-next-slide" data-id="tpca_'.esc_attr($carousel_unique_id).'" data-nav="'.esc_attr("next","theplus").'">'.$nav_next.'</a>';					
					$carousel_remote .='</div>';
				}
				
				if(!empty($settings['dotList']) && $settings['dotList']=='yes'){
					if(!empty($settings["dots_coll"])) {
						$index=0;	
						$carousel_remote .='<div class="tp-carousel-dots dot-'.$settings['dotLayout'].'">';
						foreach($settings["dots_coll"] as $index => $item) {
							$ps_count = $index;
							$ttpos='';
							if(!empty($settings['dotLayout']) && $settings['dotLayout']=='horizontal'){
								$ttpos = $settings['tooltipDir'];
							}else if(!empty($settings['dotLayout']) && $settings['dotLayout']=='vertical'){
								$ttpos = $settings['vtooltipDir'];
							}
								$ia ='inactive';
								if($index==0){
									$ia ='active';
								}
								$carodots_ll = function_exists('tp_has_lazyload') ? tp_bg_lazyLoad($item['dotBgtype_image'],$item['actdotBgtype_image']) : '';
								$carousel_remote .='<div class="tp-carodots-item elementor-repeater-item-'.esc_attr($item['_id']).' '.esc_attr($settings['dotstyle']).' '.esc_attr($ia).' '.$carodots_ll.'" data-tab="'.esc_attr($ps_count).'">';
									$carousel_remote .='<div class="tp-dots tooltip-'.esc_attr($ttpos).'">';
										$icons='';
										if($item['iconFonts'] && $item['iconFonts']=='font_awesome' && !empty($item['iconName'])){
											ob_start();
											\Elementor\Icons_Manager::render_icon( $item['iconName'], [ 'aria-hidden' => 'true' ]);
											$faicon = ob_get_contents();
											ob_end_clean();
											
											$icons = $faicon;											
										}else if($item['iconFonts'] && $item['iconFonts']=='image' && !empty($item['iconImage'])){
											$iconImage=$item['iconImage']['id'];
											$icons = tp_get_image_rander( $iconImage,$item['iconimageSize_size']);
										}											
										$carousel_remote .=$icons;
										
										if(!empty($item['label'])){
											$carousel_remote .='<span class="tooltip-txt">'.esc_html($item['label']).'</span>';
											$carousel_remote .='<svg height="32" data-v-d3e9c2e8="" width="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" svg-inline="" role="presentation" focusable="false" tabindex="-1" class="active-border">
											 <path data-v-d3e9c2e8="" d="M14.7974701,0 C16.6202545,0 19.3544312,0 23,0 C26.8659932,0 30,3.13400675 30,7 L30,23 C30,26.8659932 26.8659932,30 23,30 L7,30 C3.13400675,30 0,26.8659932 0,23 L0,7 C0,3.13400675 3.13400675,0 7,0 L14.7602345,0" transform="translate(1.000000, 1.000000)" fill="none" stroke="'.esc_attr($settings["AborderColor"]).'" stroke-width="2" class="border"></path>
											</svg>';
										}
									$carousel_remote .='</div>';
								$carousel_remote .='</div>';							
						}			
						$carousel_remote .='</div>';
					}					
				}
				
				if(!empty($settings['showpagi']) && $settings['showpagi']=='yes'){
					$carousel_remote .='<div class="carousel-pagination">';
							$carousel_remote .='<ul class="pagination-list">';
								$carousel_remote .='<li class="pagination-list-in active"> 01 </li>';
								$carousel_remote .='<li class="pagination-list-in separator"> / </li>';
								$carousel_remote .='<li class="pagination-list-in total"> 0'.esc_html($settings['sliderInd']).' </li>';
							$carousel_remote .='</ul>';
					$carousel_remote .='</div>';
				}
				
			$carousel_remote .='</div>';
			
		echo $before_content.$carousel_remote.$after_content;
	}
	
    protected function content_template() {
	
    }
}