class-responsive-testimonials-tabs.php — Responsive Tabs For Elementor trunk

responsive-tabs-for-elementor / widgets / class-responsive-testimonials-tabs.php

responsive-tabs-for-elementor / widgets Last commit date

class-responsive-testimonials-tabs.php

1227 lines

1	<?php
2	/**
3	* Responsive_Testimonials_Tabs class.
4	*
5	* @category Class
6	* @package ResponsiveTabsForElementor
7	* @subpackage WordPress
8	* @author UAPP GROUP
9	* @copyright 2026 UAPP GROUP
10	* @license https://opensource.org/licenses/GPL-3.0 GPL-3.0-only
11	* @link
12	* @since 11.0.1
13	* php version 7.4.1
14	*/
15
16	namespace ResponsiveTabsForElementor\Widgets;
17
18	use ResponsiveTabsForElementor\Responsive_Tabs_Assets;
19	use Elementor\Group_Control_Background;
20	use Elementor\Group_Control_Border;
21	use Elementor\Group_Control_Typography;
22	use Elementor\Icons_Manager;
23	use Elementor\Repeater;
24	use Elementor\Utils;
25	use Elementor\Widget_Base;
26	use Elementor\Controls_Manager;
27
28	// Security Note: Blocks direct access to the plugin PHP files.
29	defined('ABSPATH') \|\| die();
30
31	/**
32	* ResponsiveTestimonialsTabs widget class.
33	*
34	* @since 11.0.1
35	*/
36	class Responsive_Testimonials_Tabs extends Widget_Base
37	{
38	/**
39	* ResponsiveTestimonialsTabs constructor.
40	*
41	* @param array $data
42	* @param null $args
43	*
44	* @throws \Exception
45	*/
46	public function __construct($data = [], $args = null)
47	{
48	parent::__construct($data, $args);
49	wp_register_style('responsive-testimonials-tabs', plugins_url('/assets/css/responsive-testimonials-tabs.min.css', RESPONSIVE_TABS_FOR_ELEMENTOR), [], RESPONSIVE_TABS_VERSION);
50
51	Responsive_Tabs_Assets::register_tabs_handler();
52	}
53
54	/**
55	* Retrieve the widget name.
56	*
57	* @return string Widget name.
58	* @since 11.0.1
59	*
60	* @access public
61	*
62	*/
63	public function get_name()
64	{
65	return 'responsive-testimonials-tabs';
66	}
67
68	/**
69	* Retrieve the widget title.
70	*
71	* @return string Widget title.
72	* @since 11.0.1
73	*
74	* @access public
75	*
76	*/
77	public function get_title()
78	{
79	return __('Responsive Testimonials Tabs', 'responsive-tabs-for-elementor');
80	}
81
82	/**
83	* Retrieve the widget icon.
84	*
85	* @return string Widget icon.
86	* @since 11.0.1
87	*
88	* @access public
89	*
90	*/
91	public function get_icon()
92	{
93	return 'icon-icon-tabs-testimonials-accordion';
94	}
95
96	/**
97	* Retrieve the list of categories the widget belongs to.
98	*
99	* Used to determine where to display the widget in the editor.
100	*
101	* Note that currently Elementor supports only one category.
102	* When multiple categories passed, Elementor uses the first one.
103	*
104	* @return array Widget categories.
105	* @since 11.0.1
106	*
107	* @access public
108	*
109	*/
110	public function get_categories()
111	{
112	return ['responsive_tabs'];
113	}
114
115	/**
116	* Enqueue styles.
117	*/
118	public function get_style_depends()
119	{
120	$styles = ['responsive-testimonials-tabs'];
121
122	return $styles;
123	}
124
125	public function get_script_depends()
126	{
127	$scripts = ['responsive-tabs'];
128
129	return $scripts;
130	}
131
132	/**
133	* Get default tab.
134	*
135	* @return array Default tab.
136	* @since 11.0.1
137	*
138	* @access protected
139	*
140	*/
141	protected function get_default_tab()
142	{
143	return [
144	'tab_image' => [
145	'url' => Utils::get_placeholder_image_src(),
146	],
147	'tab_name' => __('Milton Austin', 'responsive-tabs-for-elementor'),
148	'tab_subtitle' => __('Manager', 'responsive-tabs-for-elementor'),
149	'tab_title_content' => __('Great collaboration', 'responsive-tabs-for-elementor'),
150	'tab_content' => __('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>', 'responsive-tabs-for-elementor'),
151	];
152	}
153
154	/**
155	* Register the widget controls.
156	*
157	* Adds different input fields to allow the user to change and customize the widget settings.
158	*
159	* @since 11.0.1
160	*
161	* @access protected
162	*/
163	protected function register_controls()
164	{
165	// Content Section
166	$this->start_controls_section(
167	'section_content',
168	[
169	'label' => __('Content', 'responsive-tabs-for-elementor'),
170	]
171	);
172	$repeater = new Repeater();
173	$repeater->add_control(
174	'tab_image',
175	[
176	'label' => __('Choose Image', 'responsive-tabs-for-elementor'),
177	'type' => Controls_Manager::MEDIA,
178	'default' => [
179	'url' => Utils::get_placeholder_image_src(),
180	],
181	]
182	);
183	$repeater->add_control(
184	'tab_name',
185	[
186	'label' => __('Name', 'responsive-tabs-for-elementor'),
187	'type' => Controls_Manager::TEXT,
188	'default' => __('Milton Austin', 'responsive-tabs-for-elementor'),
189	'label_block' => true,
190	'frontend_available' => true,
191	'dynamic' => [
192	'active' => true,
193	],
194	]
195	);
196	$repeater->add_control(
197	'tab_subtitle',
198	[
199	'label' => __('Title', 'responsive-tabs-for-elementor'),
200	'type' => Controls_Manager::TEXT,
201	'default' => __('Manager', 'responsive-tabs-for-elementor'),
202	'label_block' => true,
203	'frontend_available' => true,
204	'dynamic' => [
205	'active' => true,
206	],
207	]
208	);
209	$repeater->add_control(
210	'tab_rating_enable',
211	[
212	'label' => __('Rating', 'responsive-tabs-for-elementor'),
213	'type' => Controls_Manager::SWITCHER,
214	'label_on' => __('Show', 'responsive-tabs-for-elementor'),
215	'label_off' => __('Hide', 'responsive-tabs-for-elementor'),
216	'return_value' => 'yes',
217	'default' => 'yes',
218	]
219	);
220	$repeater->add_control(
221	'tab_rating',
222	[
223	'label' => __('Rating', 'responsive-tabs-for-elementor'),
224	'type' => Controls_Manager::NUMBER,
225	'min' => 0,
226	'max' => 5,
227	'step' => 1,
228	'default' => 4,
229	'frontend_available' => true,
230	'condition' => [
231	'tab_rating_enable' => 'yes',
232	],
233	]
234	);
235
236	$repeater->add_control(
237	'tab_title_content',
238	[
239	'label' => __('Title Content', 'responsive-tabs-for-elementor'),
240	'type' => Controls_Manager::TEXT,
241	'default' => __('Great collaboration', 'responsive-tabs-for-elementor'),
242	'label_block' => true,
243	'frontend_available' => true,
244	'dynamic' => [
245	'active' => true,
246	],
247	]
248	);
249
250	$repeater->add_control(
251	'tab_content',
252	[
253	'label' => __('Tab Content', 'responsive-tabs-for-elementor'),
254	'type' => Controls_Manager::WYSIWYG,
255	'default' => __('<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>', 'responsive-tabs-for-elementor'),
256	'rows' => 20,
257	'dynamic' => [
258	'active' => true,
259	],
260	]
261	);
262	$this->add_control(
263	'tab',
264	[
265	'label' => __('Repeater Tab', 'responsive-tabs-for-elementor'),
266	'type' => Controls_Manager::REPEATER,
267	'fields' => $repeater->get_controls(),
268	'title_field' => 'Tab',
269	'default' => [$this->get_default_tab(), $this->get_default_tab(), $this->get_default_tab()],
270	]
271	);
272	$this->end_controls_section();
273
274	// Additional Options Section
275	$this->start_controls_section(
276	'section_additional_options',
277	[
278	'label' => esc_html__('Additional Options', 'responsive-tabs-for-elementor'),
279	]
280	);
281
282	$this->add_responsive_control(
283	'tab_select_position',
284	[
285	'label' => esc_html__('Tab Select Position', 'responsive-tabs-for-elementor'),
286	'type' => Controls_Manager::SELECT,
287	'options' => [
288	'row' => 'Row',
289	'column' => 'Column'
290	],
291	'default' => 'row',
292	'frontend_available' => true,
293	]
294	);
295	$this->add_responsive_control(
296	'tab_row_position',
297	[
298	'label' => esc_html__('Tab Position', 'responsive-tabs-for-elementor'),
299	'type' => Controls_Manager::CHOOSE,
300	'options' => [
301	'row' => [
302	'title' => esc_html__('Row', 'responsive-tabs-for-elementor'),
303	'icon' => 'eicon-order-start',
304	],
305	'row-reverse' => [
306	'title' => esc_html__('Row-Reverse', 'responsive-tabs-for-elementor'),
307	'icon' => 'eicon-order-end',
308	],
309	],
310	'default' => 'row',
311	'selectors' => [
312	'{{WRAPPER}} .testimonials-tabs' => 'flex-direction: {{VALUE}}',
313	],
314	'condition' => [
315	'tab_select_position' => 'row'
316	]
317	]
318	);
319
320	$this->add_responsive_control(
321	'tab_column_position',
322	[
323	'label' => esc_html__('Tab Position', 'responsive-tabs-for-elementor'),
324	'type' => Controls_Manager::CHOOSE,
325	'options' => [
326	'column' => [
327	'title' => esc_html__('Column', 'responsive-tabs-for-elementor'),
328	'icon' => 'eicon-v-align-top',
329	],
330	'column-reverse' => [
331	'title' => esc_html__('Column-Reverse', 'responsive-tabs-for-elementor'),
332	'icon' => 'eicon-v-align-bottom',
333	],
334	],
335	'default' => 'column',
336	'selectors' => [
337	'{{WRAPPER}} .testimonials-tabs' => 'flex-direction: {{VALUE}}',
338	],
339	'condition' => [
340	'tab_select_position' => 'column'
341	]
342	]
343	);
344
345	$this->add_responsive_control(
346	'tab_event_active',
347	[
348	'label' => esc_html__('Tab Event Active', 'responsive-tabs-for-elementor'),
349	'type' => Controls_Manager::SELECT,
350	'options' => [
351	'click' => 'Click',
352	'hover' => 'Hover'
353	],
354	'default' => 'hover',
355	'frontend_available' => true,
356	]
357	);
358	$this->end_controls_section();
359
360	// General styles Section
361	$this->start_controls_section(
362	'general_styles_section',
363	[
364	'label' => esc_html__('General Styles', 'responsive-tabs-for-elementor'),
365	'tab' => Controls_Manager::TAB_STYLE,
366	]
367	);
368	$this->add_responsive_control(
369	'tab_margin',
370	[
371	'label' => esc_html__('Margin', 'responsive-tabs-for-elementor'),
372	'type' => Controls_Manager::DIMENSIONS,
373	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
374	'selectors' => [
375	'{{WRAPPER}} .testimonials-tabs' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
376	],
377	]
378	);
379
380	$this->add_responsive_control(
381	'tab_padding',
382	[
383	'label' => esc_html__('Padding', 'responsive-tabs-for-elementor'),
384	'type' => Controls_Manager::DIMENSIONS,
385	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
386	'selectors' => [
387	'{{WRAPPER}} .testimonials-tabs' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
388	],
389	]
390	);
391	$this->add_group_control(
392	Group_Control_Background::get_type(),
393	[
394	'name' => 'background',
395	'types' => ['classic', 'gradient'],
396	'fields_options' => [
397	'background' => [
398	'label' => 'Background',
399	],
400	],
401	'selector' => '{{WRAPPER}} .testimonials-tabs',
402	]
403	);
404	$this->add_responsive_control(
405	'tab_height',
406	[
407	'label' => esc_html__('Height', 'responsive-tabs-for-elementor'),
408	'type' => Controls_Manager::SLIDER,
409	'size_units' => ['px', 'vh'],
410	'default' => [
411	'unit' => 'px',
412	],
413	'range' => [
414	'px' => [
415	'min' => 0,
416	'max' => 800,
417	],
418	'vh' => [
419	'min' => 0,
420	'max' => 100,
421	],
422	],
423	'selectors' => [
424	"{{WRAPPER}} .testimonials-tabs" => 'height: {{SIZE}}{{UNIT}};',
425	"{{WRAPPER}} .testimonials-tabs .cards" => 'height: {{SIZE}}{{UNIT}};',
426	"{{WRAPPER}} .testimonials-tabs .cards-wrapper" => 'height: {{SIZE}}{{UNIT}};',
427	],
428	]
429	);
430	$this->add_responsive_control(
431	'tab_space',
432	[
433	'label' => esc_html__('Content Spacing', 'responsive-tabs-for-elementor'),
434	'type' => Controls_Manager::SLIDER,
435	'range' => [
436	'px' => [
437	'min' => 0,
438	'max' => 140,
439	],
440	],
441	'selectors' => [
442	'{{WRAPPER}} .testimonials-tabs' => 'gap: {{SIZE}}{{UNIT}}',
443	],
444	]
445	);
446	$this->end_controls_section();
447
448	// Tab styles Section
449	$this->start_controls_section(
450	'tabs_styles_section',
451	[
452	'label' => esc_html__('Tabs Styles', 'responsive-tabs-for-elementor'),
453	'tab' => Controls_Manager::TAB_STYLE,
454	]
455	);
456
457	$this->add_responsive_control(
458	'tabs_margin',
459	[
460	'label' => esc_html__('Margin', 'responsive-tabs-for-elementor'),
461	'type' => Controls_Manager::DIMENSIONS,
462	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
463	'selectors' => [
464	'{{WRAPPER}} .testimonials-tabs .cards .cards-wrapper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
465	],
466	]
467	);
468
469	$this->add_responsive_control(
470	'tabs_padding',
471	[
472	'label' => esc_html__('Padding', 'responsive-tabs-for-elementor'),
473	'type' => Controls_Manager::DIMENSIONS,
474	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
475	'selectors' => [
476	'{{WRAPPER}} .testimonials-tabs .cards .cards-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
477	],
478	]
479	);
480	$this->add_responsive_control(
481	'tabs_justify',
482	[
483	'label' => esc_html__('Justified', 'responsive-tabs-for-elementor'),
484	'type' => Controls_Manager::CHOOSE,
485	'options' => [
486	'flex-start' => [
487	'title' => esc_html__('Flex-Left', 'responsive-tabs-for-elementor'),
488	'icon' => 'eicon-justify-start-h',
489	],
490	'center' => [
491	'title' => esc_html__('Center', 'responsive-tabs-for-elementor'),
492	'icon' => 'eicon-justify-center-h',
493	],
494	'flex-end' => [
495	'title' => esc_html__('Flex-End', 'responsive-tabs-for-elementor'),
496	'icon' => 'eicon-justify-end-h',
497	],
498	'space-between' => [
499	'title' => esc_html__('Space-Between', 'responsive-tabs-for-elementor'),
500	'icon' => 'eicon-justify-space-between-h',
501	],
502	'space-around' => [
503	'title' => esc_html__('Space-Around', 'responsive-tabs-for-elementor'),
504	'icon' => 'eicon-justify-space-around-h',
505	],
506	'space-evenly' => [
507	'title' => esc_html__('Space-Evenly', 'responsive-tabs-for-elementor'),
508	'icon' => 'eicon-justify-space-evenly-h',
509	],
510	],
511	'default' => 'flex-start',
512	'selectors' => [
513	'{{WRAPPER}} .testimonials-tabs .cards .cards-wrapper .card' => 'justify-content: {{VALUE}}',
514	'{{WRAPPER}} .testimonials-tabs .cards .cards-wrapper .card.active' => 'justify-content: {{VALUE}}',
515	],
516	]
517	);
518	$this->add_responsive_control(
519	'tab_width',
520	[
521	'label' => esc_html__('Width', 'responsive-tabs-for-elementor'),
522	'type' => Controls_Manager::SELECT,
523	'default' => '',
524	'options' => [
525	'' => esc_html__('Default', 'responsive-tabs-for-elementor'),
526	'inherit' => esc_html__('Full Width', 'responsive-tabs-for-elementor') . ' (100%)',
527	'initial' => esc_html__('Custom', 'responsive-tabs-for-elementor'),
528	],
529	'selectors_dictionary' => [
530	'inherit' => '100%',
531	],
532	'prefix_class' => 'elementor-widget%s__width-',
533	'selectors' => [
534	'{{WRAPPER}} .testimonials-tabs .cards' => 'width: {{VALUE}};',
535	],
536	]
537	);
538
539	$this->add_responsive_control(
540	'tab_custom_width',
541	[
542	'label' => esc_html__('Width', 'responsive-tabs-for-elementor'),
543	'type' => Controls_Manager::SLIDER,
544	'default' => [
545	'unit' => '%',
546	],
547	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
548	'range' => [
549	'%' => [
550	'min' => 0,
551	'max' => 100,
552	'step' => 1,
553	],
554	'px' => [
555	'min' => 0,
556	'max' => 300,
557	'step' => 1,
558	],
559	],
560	'selectors' => [
561	'{{WRAPPER}} .testimonials-tabs .cards' => '--container-widget-width: {{SIZE}}{{UNIT}}; --container-widget-flex-grow: 0; width: var( --container-widget-width, {{SIZE}}{{UNIT}} );',
562	],
563	'condition' => ['tab_width' => 'initial'],
564	]
565	);
566	$this->add_responsive_control(
567	'tabs_space',
568	[
569	'label' => esc_html__('Tabs Spacing', 'responsive-tabs-for-elementor'),
570	'type' => Controls_Manager::SLIDER,
571	'range' => [
572	'px' => [
573	'min' => 0,
574	'max' => 140,
575	],
576	],
577	'selectors' => [
578	'{{WRAPPER}} .testimonials-tabs .cards .cards-wrapper' => 'gap: {{SIZE}}{{UNIT}}',
579	],
580	]
581	);
582
583	$this->start_controls_tabs('tabs_style');
584
585	$this->start_controls_tab(
586	'tab_normal',
587	[
588	'label' => esc_html__('Normal', 'responsive-tabs-for-elementor'),
589	]
590	);
591
592	$this->add_responsive_control(
593	'tab_normal_margin',
594	[
595	'label' => esc_html__('Margin', 'responsive-tabs-for-elementor'),
596	'type' => Controls_Manager::DIMENSIONS,
597	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
598	'selectors' => [
599	'{{WRAPPER}} .testimonials-tabs .cards .card' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
600	],
601	]
602	);
603
604	$this->add_responsive_control(
605	'tab_normal_padding',
606	[
607	'label' => esc_html__('Padding', 'responsive-tabs-for-elementor'),
608	'type' => Controls_Manager::DIMENSIONS,
609	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
610	'selectors' => [
611	'{{WRAPPER}} .testimonials-tabs .cards .card' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
612	],
613	]
614	);
615
616	$this->add_group_control(
617	Group_Control_Background::get_type(),
618	[
619	'name' => 'background_tab_normal',
620	'types' => ['classic', 'gradient'],
621	'selector' => '{{WRAPPER}} .testimonials-tabs .cards .card',
622	]
623	);
624	$this->add_group_control(
625	Group_Control_Border::get_type(),
626	[
627	'name' => 'tab_normal_border',
628	'selector' => '{{WRAPPER}} .testimonials-tabs .cards .card',
629	]
630	);
631	$this->add_responsive_control(
632	'tab_normal_border_radius',
633	[
634	'label' => esc_html__('Border Radius', 'responsive-tabs-for-elementor'),
635	'type' => Controls_Manager::DIMENSIONS,
636	'size_units' => ['px', '%', 'em', 'rem', 'custom'],
637	'selectors' => [
638	'{{WRAPPER}} .testimonials-tabs .cards .card' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
639	],
640	]
641	);
642	$this->add_control(
643	'tab_name_color',
644	[
645	'label' => esc_html__('Tab Name Color', 'responsive-tabs-for-elementor'),
646	'type' => Controls_Manager::COLOR,
647	'selectors' => [
648	'{{WRAPPER}} .testimonials-tabs .card h3' => 'color: {{VALUE}}',
649	],
650	'separator' => 'before',
651	]
652	);
653	$this->add_group_control(
654	Group_Control_Typography::get_type(),
655	[
656	'name' => 'tab_name_typography',
657	'label' => esc_html__('Tab Name Typography', 'responsive-tabs-for-elementor'),
658	'selector' => '{{WRAPPER}} .testimonials-tabs .card h3',
659	]
660	);
661	$this->add_responsive_control(
662	'tab_name_align',
663	[
664	'label' => esc_html__('Alignment Name', 'responsive-tabs-for-elementor'),
665	'type' => Controls_Manager::CHOOSE,
666	'options' => [
667	'left' => [
668	'title' => esc_html__('Left', 'responsive-tabs-for-elementor'),
669	'icon' => 'eicon-text-align-left',
670	],
671	'center' => [
672	'title' => esc_html__('Center', 'responsive-tabs-for-elementor'),
673	'icon' => 'eicon-text-align-center',
674	],
675	'right' => [
676	'title' => esc_html__('Right', 'responsive-tabs-for-elementor'),
677	'icon' => 'eicon-text-align-right',
678	],
679	],
680	'default' => 'left',
681	'selectors' => [
682	'{{WRAPPER}} .testimonials-tabs .card h3' => 'text-align: {{VALUE}}',
683	],
684	]
685	);
686	$this->add_control(
687	'tab_subtitle_color',
688	[
689	'label' => esc_html__('Tab Position Color', 'responsive-tabs-for-elementor'),
690	'type' => Controls_Manager::COLOR,
691	'selectors' => [
692	'{{WRAPPER}} .testimonials-tabs .card p' => 'color: {{VALUE}}',
693	],
694	'separator' => 'before',
695	]
696	);
697	$this->add_group_control(
698	Group_Control_Typography::get_type(),
699	[
700	'name' => 'tab_subtitle_typography',
701	'label' => esc_html__('Tab Position Typography', 'responsive-tabs-for-elementor'),
702	'selector' => '{{WRAPPER}} .testimonials-tabs .card p',
703	]
704	);
705	$this->add_responsive_control(
706	'tab_subtitle_align',
707	[
708	'label' => esc_html__('Alignment Position', 'responsive-tabs-for-elementor'),
709	'type' => Controls_Manager::CHOOSE,
710	'options' => [
711	'left' => [
712	'title' => esc_html__('Left', 'responsive-tabs-for-elementor'),
713	'icon' => 'eicon-text-align-left',
714	],
715	'center' => [
716	'title' => esc_html__('Center', 'responsive-tabs-for-elementor'),
717	'icon' => 'eicon-text-align-center',
718	],
719	'right' => [
720	'title' => esc_html__('Right', 'responsive-tabs-for-elementor'),
721	'icon' => 'eicon-text-align-right',
722	],
723	],
724	'default' => 'left',
725	'selectors' => [
726	'{{WRAPPER}} .testimonials-tabs .card p' => 'text-align: {{VALUE}}',
727	],
728	]
729	);
730	$this->end_controls_tab();
731
732	$this->start_controls_tab(
733	'tab_active',
734	[
735	'label' => esc_html__('Active', 'responsive-tabs-for-elementor'),
736	]
737	);
738
739	$this->add_responsive_control(
740	'tab_active_margin',
741	[
742	'label' => esc_html__('Margin', 'responsive-tabs-for-elementor'),
743	'type' => Controls_Manager::DIMENSIONS,
744	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
745	'selectors' => [
746	'{{WRAPPER}} .testimonials-tabs .cards .card.active' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
747	],
748	]
749	);
750
751	$this->add_responsive_control(
752	'tab_active_padding',
753	[
754	'label' => esc_html__('Padding', 'responsive-tabs-for-elementor'),
755	'type' => Controls_Manager::DIMENSIONS,
756	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
757	'selectors' => [
758	'{{WRAPPER}} .testimonials-tabs .cards .card.active' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
759	],
760	]
761	);
762
763	$this->add_group_control(
764	Group_Control_Background::get_type(),
765	[
766	'name' => 'background_tab_active',
767	'types' => ['classic', 'gradient'],
768	'selector' => '{{WRAPPER}} .testimonials-tabs .cards .card.active',
769	]
770	);
771	$this->add_group_control(
772	Group_Control_Border::get_type(),
773	[
774	'name' => 'tab_active_border',
775	'selector' => '{{WRAPPER}} .testimonials-tabs .cards .card.active',
776	]
777	);
778	$this->add_responsive_control(
779	'tab_active_border_radius',
780	[
781	'label' => esc_html__('Border Radius', 'responsive-tabs-for-elementor'),
782	'type' => Controls_Manager::DIMENSIONS,
783	'size_units' => ['px', '%', 'em', 'rem', 'custom'],
784	'selectors' => [
785	'{{WRAPPER}} .testimonials-tabs .cards .card.active' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
786	],
787	]
788	);
789	$this->add_control(
790	'active_tab_name_color',
791	[
792	'label' => esc_html__('Active Tab Name Color', 'responsive-tabs-for-elementor'),
793	'type' => Controls_Manager::COLOR,
794	'selectors' => [
795	'{{WRAPPER}} .testimonials-tabs .card.active h3' => 'color: {{VALUE}}',
796	],
797	'separator' => 'before',
798	]
799	);
800	$this->add_group_control(
801	Group_Control_Typography::get_type(),
802	[
803	'name' => 'active_tab_name_typography',
804	'label' => esc_html__('Active Tab Name Typography', 'responsive-tabs-for-elementor'),
805	'selector' => '{{WRAPPER}} .testimonials-tabs .card.active h3',
806	]
807	);
808	$this->add_responsive_control(
809	'tab_name_align_active',
810	[
811	'label' => esc_html__('Alignment Active Name', 'responsive-tabs-for-elementor'),
812	'type' => Controls_Manager::CHOOSE,
813	'options' => [
814	'left' => [
815	'title' => esc_html__('Left', 'responsive-tabs-for-elementor'),
816	'icon' => 'eicon-text-align-left',
817	],
818	'center' => [
819	'title' => esc_html__('Center', 'responsive-tabs-for-elementor'),
820	'icon' => 'eicon-text-align-center',
821	],
822	'right' => [
823	'title' => esc_html__('Right', 'responsive-tabs-for-elementor'),
824	'icon' => 'eicon-text-align-right',
825	],
826	],
827	'default' => 'left',
828	'selectors' => [
829	'{{WRAPPER}} .testimonials-tabs .card.active h3' => 'text-align: {{VALUE}}',
830	],
831	]
832	);
833	$this->add_control(
834	'active_tab_subtitle_color',
835	[
836	'label' => esc_html__('Active Tab Position Color', 'responsive-tabs-for-elementor'),
837	'type' => Controls_Manager::COLOR,
838	'selectors' => [
839	'{{WRAPPER}} .testimonials-tabs .card.active p' => 'color: {{VALUE}}',
840	],
841	'separator' => 'before',
842	]
843	);
844	$this->add_group_control(
845	Group_Control_Typography::get_type(),
846	[
847	'name' => 'active_tab_subtitle_typography',
848	'label' => esc_html__('Active Tab Position Typography', 'responsive-tabs-for-elementor'),
849	'selector' => '{{WRAPPER}} .testimonials-tabs .card.active p',
850	]
851	);
852	$this->add_responsive_control(
853	'tab_subtitle_align_active',
854	[
855	'label' => esc_html__('Alignment Position', 'responsive-tabs-for-elementor'),
856	'type' => Controls_Manager::CHOOSE,
857	'options' => [
858	'left' => [
859	'title' => esc_html__('Left', 'responsive-tabs-for-elementor'),
860	'icon' => 'eicon-text-align-left',
861	],
862	'center' => [
863	'title' => esc_html__('Center', 'responsive-tabs-for-elementor'),
864	'icon' => 'eicon-text-align-center',
865	],
866	'right' => [
867	'title' => esc_html__('Right', 'responsive-tabs-for-elementor'),
868	'icon' => 'eicon-text-align-right',
869	],
870	],
871	'default' => 'left',
872	'selectors' => [
873	'{{WRAPPER}} .testimonials-tabs .card.active p' => 'text-align: {{VALUE}}',
874	],
875	]
876	);
877	$this->end_controls_tab();
878	$this->end_controls_tabs();
879	$this->end_controls_section();
880
881	// Content Styles Section
882	$this->start_controls_section(
883	'content_styles_section',
884	[
885	'label' => esc_html__('Content Styles', 'responsive-tabs-for-elementor'),
886	'tab' => Controls_Manager::TAB_STYLE,
887	]
888	);
889	$this->add_responsive_control(
890	'tab_content_margin',
891	[
892	'label' => esc_html__('Margin', 'responsive-tabs-for-elementor'),
893	'type' => Controls_Manager::DIMENSIONS,
894	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
895	'selectors' => [
896	'{{WRAPPER}} .testimonials-tabs .content' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
897	],
898	]
899	);
900
901	$this->add_responsive_control(
902	'tab_content_padding',
903	[
904	'label' => esc_html__('Padding', 'responsive-tabs-for-elementor'),
905	'type' => Controls_Manager::DIMENSIONS,
906	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
907	'selectors' => [
908	'{{WRAPPER}} .testimonials-tabs .content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
909	],
910	]
911	);
912
913	$this->add_control(
914	'title_color',
915	[
916	'label' => esc_html__('Title Color', 'responsive-tabs-for-elementor'),
917	'type' => Controls_Manager::COLOR,
918	'selectors' => [
919	'{{WRAPPER}} .testimonials-tabs .content .contentBox h2' => 'color: {{VALUE}}',
920	],
921	]
922	);
923	$this->add_group_control(
924	Group_Control_Typography::get_type(),
925	[
926	'name' => 'title_typography',
927	'label' => esc_html__('Title Typography', 'responsive-tabs-for-elementor'),
928	'selector' => '{{WRAPPER}} .testimonials-tabs .content .contentBox h2',
929	]
930	);
931	$this->add_responsive_control(
932	'tab_title_align',
933	[
934	'label' => esc_html__('Alignment Title', 'responsive-tabs-for-elementor'),
935	'type' => Controls_Manager::CHOOSE,
936	'options' => [
937	'left' => [
938	'title' => esc_html__('Left', 'responsive-tabs-for-elementor'),
939	'icon' => 'eicon-text-align-left',
940	],
941	'center' => [
942	'title' => esc_html__('Center', 'responsive-tabs-for-elementor'),
943	'icon' => 'eicon-text-align-center',
944	],
945	'right' => [
946	'title' => esc_html__('Right', 'responsive-tabs-for-elementor'),
947	'icon' => 'eicon-text-align-right',
948	],
949	],
950	'default' => 'left',
951	'selectors' => [
952	'{{WRAPPER}} .testimonials-tabs .content .contentBox h2' => 'text-align: {{VALUE}}',
953	],
954	]
955	);
956
957	$this->add_control(
958	'content_color',
959	[
960	'label' => esc_html__('Content Color', 'responsive-tabs-for-elementor'),
961	'type' => Controls_Manager::COLOR,
962	'selectors' => [
963	'{{WRAPPER}} .testimonials-tabs .content .contentBox .card-content-wrapper p' => 'color: {{VALUE}}',
964	],
965	]
966	);
967	$this->add_group_control(
968	Group_Control_Typography::get_type(),
969	[
970	'name' => 'content_typography',
971	'label' => esc_html__('Content Typography', 'responsive-tabs-for-elementor'),
972	'selector' => '{{WRAPPER}} .testimonials-tabs .content .contentBox .card-content-wrapper p',
973	]
974	);
975	$this->add_responsive_control(
976	'tab_content_align',
977	[
978	'label' => esc_html__('Alignment Content', 'responsive-tabs-for-elementor'),
979	'type' => Controls_Manager::CHOOSE,
980	'options' => [
981	'left' => [
982	'title' => esc_html__('Left', 'responsive-tabs-for-elementor'),
983	'icon' => 'eicon-text-align-left',
984	],
985	'center' => [
986	'title' => esc_html__('Center', 'responsive-tabs-for-elementor'),
987	'icon' => 'eicon-text-align-center',
988	],
989	'right' => [
990	'title' => esc_html__('Right', 'responsive-tabs-for-elementor'),
991	'icon' => 'eicon-text-align-right',
992	],
993	'justify' => [
994	'title' => esc_html__('Justify', 'responsive-tabs-for-elementor'),
995	'icon' => 'eicon-text-align-justify',
996	],
997	],
998	'default' => 'left',
999	'selectors' => [
1000	'{{WRAPPER}} .testimonials-tabs .content .contentBox .card-content-wrapper p' => 'text-align: {{VALUE}}',
1001	],
1002	]
1003	);
1004
1005	$this->add_control(
1006	'tabs_stars_color',
1007	[
1008	'label' => esc_html__('Rating icon color', 'responsive-tabs-for-elementor'),
1009	'type' => Controls_Manager::COLOR,
1010	'selectors' => [
1011	'{{WRAPPER}} .testimonials-tabs .contentBox .text span svg' => 'color: {{VALUE}}',
1012	],
1013	]
1014	);
1015	$this->add_responsive_control(
1016	'tabs_icon_size',
1017	[
1018	'label' => esc_html__('Rating icon size', 'responsive-tabs-for-elementor'),
1019	'type' => Controls_Manager::SLIDER,
1020	'range' => [
1021	'px' => [
1022	'min' => 5,
1023	'max' => 50,
1024	],
1025	],
1026	'selectors' => [
1027	'{{WRAPPER}} .testimonials-tabs .contentBox .text span svg' => 'width: {{SIZE}}{{UNIT}}',
1028	],
1029	]
1030	);
1031	$this->add_responsive_control(
1032	'tabs_icon_space',
1033	[
1034	'label' => esc_html__('Rating icon spacing', 'responsive-tabs-for-elementor'),
1035	'type' => Controls_Manager::SLIDER,
1036	'range' => [
1037	'px' => [
1038	'min' => 0,
1039	'max' => 20,
1040	],
1041	],
1042	'selectors' => [
1043	'{{WRAPPER}} .testimonials-tabs .contentBox .text span' => 'gap: {{SIZE}}{{UNIT}}',
1044	],
1045	]
1046	);
1047	$this->add_responsive_control(
1048	'tab_rating_align',
1049	[
1050	'label' => esc_html__('Alignment Rating', 'responsive-tabs-for-elementor'),
1051	'type' => Controls_Manager::CHOOSE,
1052	'options' => [
1053	'flex-start' => [
1054	'title' => esc_html__('Left', 'responsive-tabs-for-elementor'),
1055	'icon' => 'eicon-text-align-left',
1056	],
1057	'center' => [
1058	'title' => esc_html__('Center', 'responsive-tabs-for-elementor'),
1059	'icon' => 'eicon-text-align-center',
1060	],
1061	'flex-end' => [
1062	'title' => esc_html__('Right', 'responsive-tabs-for-elementor'),
1063	'icon' => 'eicon-text-align-right',
1064	],
1065	],
1066	'default' => 'flex-start',
1067	'selectors' => [
1068	'{{WRAPPER}} .testimonials-tabs .contentBox .text span' => 'justify-content: {{VALUE}}',
1069	],
1070	]
1071	);
1072	$this->end_controls_section();
1073
1074	// Image Styles Section
1075	$this->start_controls_section(
1076	'image_styles_section',
1077	[
1078	'label' => esc_html__('Image Styles', 'responsive-tabs-for-elementor'),
1079	'tab' => Controls_Manager::TAB_STYLE,
1080	]
1081	);
1082	$this->add_responsive_control(
1083	'tab_image_width',
1084	[
1085	'label' => esc_html__('Width', 'responsive-tabs-for-elementor'),
1086	'type' => Controls_Manager::SELECT,
1087	'default' => '',
1088	'options' => [
1089	'' => esc_html__('Default', 'responsive-tabs-for-elementor'),
1090	'inherit' => esc_html__('Full Width', 'responsive-tabs-for-elementor') . ' (100%)',
1091	'initial' => esc_html__('Custom', 'responsive-tabs-for-elementor'),
1092	],
1093	'selectors_dictionary' => [
1094	'inherit' => '100%',
1095	],
1096	'prefix_class' => 'elementor-widget%s__width-',
1097	'selectors' => [
1098	'{{WRAPPER}} .testimonials-tabs .cards .cards-wrapper .card img' => 'width: {{VALUE}}; height: {{VALUE}};',
1099	],
1100	]
1101	);
1102	$this->add_responsive_control(
1103	'tab_image_custom_width',
1104	[
1105	'label' => esc_html__('Width', 'responsive-tabs-for-elementor'),
1106	'type' => Controls_Manager::SLIDER,
1107	'default' => [
1108	'unit' => '%',
1109	],
1110	'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
1111	'range' => [
1112	'%' => [
1113	'min' => 0,
1114	'max' => 100,
1115	'step' => 1,
1116	],
1117	'px' => [
1118	'min' => 0,
1119	'max' => 800,
1120	'step' => 1,
1121	],
1122	],
1123	'selectors' => [
1124	'{{WRAPPER}} .testimonials-tabs .cards .cards-wrapper .card img' => '--container-widget-width: {{SIZE}}{{UNIT}}; --container-widget-flex-grow: 0; width: var( --container-widget-width, {{SIZE}}{{UNIT}} ); --container-widget-height: {{SIZE}}{{UNIT}}; --container-widget-flex-grow: 0; height: var( --container-widget-height, {{SIZE}}{{UNIT}} );',
1125	],
1126	'condition' => ['tab_image_width' => 'initial'],
1127	]
1128	);
1129	$this->add_group_control(
1130	Group_Control_Border::get_type(),
1131	[
1132	'name' => 'tab_image_border',
1133	'selector' => '{{WRAPPER}} .testimonials-tabs .cards .cards-wrapper .card img',
1134	]
1135	);
1136	$this->add_responsive_control(
1137	'tab_image_border_radius',
1138	[
1139	'label' => esc_html__('Border Radius', 'responsive-tabs-for-elementor'),
1140	'type' => Controls_Manager::DIMENSIONS,
1141	'size_units' => ['px', '%', 'em', 'rem', 'custom'],
1142	'selectors' => [
1143	'{{WRAPPER}} .testimonials-tabs .cards .cards-wrapper .card img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1144	],
1145	]
1146	);
1147	$this->end_controls_section();
1148	}
1149
1150	/**
1151	* Render the widget output on the frontend.
1152	*
1153	* Written in PHP and used to generate the final HTML.
1154	*
1155	* @since 11.0.1
1156	*
1157	* @access protected
1158	*/
1159	protected function render()
1160	{
1161	$settings = $this->get_settings_for_display();
1162
1163	if (Responsive_Tabs_Assets::is_legacy_elementor()) {
1164	$this->add_render_attribute(
1165	'responsive_tabs',
1166	[
1167	'class' => ['tabs-params'],
1168	'data-eventactive-tabs' => esc_attr($settings['tab_event_active']),
1169	]
1170	);
1171	}
1172
1173	if ($settings['tab']) {
1174	if (Responsive_Tabs_Assets::is_legacy_elementor()) { ?>
1175	<div <?php echo $this->get_render_attribute_string('responsive_tabs'); ?>></div>
1176	<?php } ?>
1177
1178	<section
1179	class="testimonials-tabs<?= esc_attr($settings['tab_select_position']) == 'column' ? ' testimonials-tabs-column' : ''; ?>">
1180	<div class="cards">
1181	<div class="cards-wrapper">
1182	<?php $counter = 1;
1183	foreach ($settings['tab'] as $item) { ?>
1184	<div class="card <?php if ($counter === 1) { ?>active<?php } ?>"
1185	data-id="content-<?php echo esc_attr($counter); ?>">
1186	<img src="<?php echo esc_url($item['tab_image']['url']) ?>" alt="">
1187	<div>
1188	<h3><?php echo wp_kses_post($item['tab_name']); ?></h3>
1189	<p><?php echo wp_kses($item['tab_subtitle'], []); ?></p>
1190	</div>
1191	</div>
1192	<?php $counter++;
1193	} ?>
1194	</div>
1195	</div>
1196	<div class="content">
1197	<?php $counter = 1;
1198	foreach ($settings['tab'] as $item) { ?>
1199	<div class="contentBox <?php if ($counter === 1) { ?>active<?php } ?>"
1200	id="content-<?php echo esc_attr($counter); ?>">
1201	<div class="text">
1202	<h2><?php echo wp_kses_post($item['tab_title_content']); ?></h2>
1203	<?php if ($item['tab_rating_enable'] === 'yes') { ?>
1204	<span>
1205	<?php
1206	for ($i = 0; $i < $item['tab_rating']; $i++) { ?>
1207	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
1208	<path fill-rule="evenodd"
1209	d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z"
1210	clip-rule="evenodd"/>
1211	</svg>
1212	<?php } ?>
1213	</span>
1214	<?php } ?>
1215	<div class="card-content-wrapper">
1216	<?php echo wp_kses_post($item['tab_content']); ?>
1217	</div>
1218	</div>
1219	</div>
1220	<?php $counter++;
1221	} ?>
1222	</div>
1223	</section>
1224	<?php } ?>
1225	<?php }
1226	}
1227