king-addons / includes / widgets / Tabs / Tabs.php

Tabs.php in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.37, at includes/widgets/Tabs/Tabs.php

1,565 lines 59.6 KB

Raw Download Zip

1	<?php
2
3	namespace King_Addons;
4
5	use Elementor;
6	use Elementor\Controls_Manager;
7	use Elementor\Group_Control_Typography;
8	use Elementor\Group_Control_Image_Size;
9	use Elementor\Group_Control_Box_Shadow;
10	use Elementor\Plugin;
11	use Elementor\Repeater;
12	use Elementor\Widget_Base;
13
14	if (!defined('ABSPATH')) {
15	exit;
16	}
17
18	class Tabs extends Widget_Base
19	{
20
21
22
23	public function get_name()
24	{
25	return 'king-addons-tabs';
26	}
27
28	public function get_title()
29	{
30	return esc_html__('Tabs', 'king-addons');
31	}
32
33	public function get_icon()
34	{
35	return 'king-addons-icon king-addons-tabs';
36	}
37
38	public function get_categories()
39	{
40	return ['king-addons'];
41	}
42
43	public function get_keywords()
44	{
45	return ['king addons', 'king', 'addons', 'kingaddons', 'king-addons', 'vertical',
46	'horizontal', 'accor', 'tab', 'tabs', 'vertical tabs', 'horizontal tabs', 'accordion'];
47	}
48
49	public function get_script_depends()
50	{
51	return [
52	KING_ADDONS_ASSETS_UNIQUE_KEY . '-tabs-script'
53	];
54	}
55
56	public function get_style_depends()
57	{
58	return [
59	KING_ADDONS_ASSETS_UNIQUE_KEY . '-animation-button',
60	KING_ADDONS_ASSETS_UNIQUE_KEY . '-animation-general',
61	KING_ADDONS_ASSETS_UNIQUE_KEY . '-animation-timing',
62	KING_ADDONS_ASSETS_UNIQUE_KEY . '-animation-loading',
63	KING_ADDONS_ASSETS_UNIQUE_KEY . '-tabs-style'
64	];
65	}
66
67	public function get_custom_help_url()
68	{
69	return 'mailto:bug@kingaddons.com?subject=Bug Report - King Addons&body=Please describe the issue';
70	}
71
72	public function has_widget_inner_wrapper(): bool {
73	return true;
74	}
75
76	public function add_repeater_args_tab_custom_color()
77	{
78	return [
79	'label' => sprintf(__('Use custom colors for this tab %s', 'king-addons'), '<i class="eicon-pro-icon"></i>'),
80	'type' => Controls_Manager::SWITCHER,
81	'separator' => 'before',
82	'classes' => 'king-addons-pro-control'
83	];
84	}
85
86	public function add_repeater_args_tab_content_type()
87	{
88	return [
89	'label' => esc_html__('Content Type', 'king-addons'),
90	'type' => Controls_Manager::SELECT,
91	'default' => 'editor',
92	'options' => [
93	'editor' => esc_html__('Editor', 'king-addons'),
94	'pro-cf' => esc_html__('Custom Field (Pro)', 'king-addons'),
95	'pro-tmp' => esc_html__('Elementor Template (Pro)', 'king-addons'),
96	],
97	'separator' => 'before',
98	];
99	}
100
101	public function add_control_tabs_hr_position()
102	{
103	$this->add_control(
104	'tabs_hr_position',
105	[
106	'label' => esc_html__('Horizontal Align', 'king-addons'),
107	'type' => Controls_Manager::CHOOSE,
108	'label_block' => false,
109	'default' => 'justify',
110	'options' => [
111	'pro-lt' => [
112	'title' => esc_html__('Left (Pro)', 'king-addons'),
113	'icon' => 'eicon-h-align-left',
114	],
115	'pro-ct' => [
116	'title' => esc_html__('Center (Pro)', 'king-addons'),
117	'icon' => 'eicon-h-align-center',
118	],
119	'pro-rt' => [
120	'title' => esc_html__('Right (Pro)', 'king-addons'),
121	'icon' => 'eicon-h-align-right',
122	],
123	'justify' => [
124	'title' => esc_html__('Stretch', 'king-addons'),
125	'icon' => 'eicon-h-align-stretch',
126	],
127	],
128	'prefix_class' => 'king-addons-tabs-hr-position-',
129	'render_type' => 'template',
130	'condition' => [
131	'tabs_position' => 'above',
132	],
133	]
134	);
135	}
136
137	public function add_section_settings()
138	{
139	}
140
141	protected function register_controls()
142	{
143
144
145	$css_selector = [
146	'general' => '> .elementor-widget-container > .king-addons-tabs',
147	'control_list' => '> .elementor-widget-container > .king-addons-tabs > .king-addons-tabs-wrap > .king-addons-tab',
148	'content_wrap' => '> .elementor-widget-container > .king-addons-tabs > .king-addons-tabs-content-wrap',
149	'content_list' => '> .elementor-widget-container > .king-addons-tabs > .king-addons-tabs-content-wrap > .king-addons-tab-content',
150	'control_icon' => '.king-addons-tab-icon',
151	'control_image' => '.king-addons-tab-image',
152	];
153
154
155	$this->start_controls_section(
156	'section_tabs',
157	[
158	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Tabs', 'king-addons'),
159	]
160	);
161
162
163	$repeater = new Repeater();
164
165	$repeater->add_control(
166	'tab_title',
167	[
168	'label' => esc_html__('Label', 'king-addons'),
169	'type' => Controls_Manager::TEXT,
170	'dynamic' => [
171	'active' => true,
172	],
173	'default' => 'Tab 1',
174	]
175	);
176
177	$repeater->add_control(
178	'tab_icon_type',
179	[
180	'label' => esc_html__('Icon Type', 'king-addons'),
181	'type' => Controls_Manager::SELECT,
182	'default' => 'none',
183	'options' => [
184	'none' => esc_html__('None', 'king-addons'),
185	'icon' => esc_html__('Icon', 'king-addons'),
186	'image' => esc_html__('Image', 'king-addons'),
187	],
188	'separator' => 'before',
189	]
190	);
191
192	$repeater->add_control(
193	'tab_image',
194	[
195	'label' => esc_html__('Upload Image', 'king-addons'),
196	'type' => Controls_Manager::MEDIA,
197	'dynamic' => [
198	'active' => true,
199	],
200	'condition' => [
201	'tab_icon_type' => 'image',
202	],
203	]
204	);
205
206	$repeater->add_control(
207	'tab_icon',
208	[
209	'label' => esc_html__('Select Icon', 'king-addons'),
210	'type' => Controls_Manager::ICONS,
211	'skin' => 'inline',
212	'label_block' => false,
213	'default' => [
214	'value' => 'far fa-star',
215	'library' => 'fa-regular',
216	],
217	'condition' => [
218	'tab_icon_type' => 'icon',
219	],
220	]
221	);
222
223	$repeater->add_control('tab_content_type', $this->add_repeater_args_tab_content_type());
224
225	Core::renderUpgradeProNotice($repeater, Controls_Manager::RAW_HTML, 'tabs', 'tab_content_type', ['pro-tmp']);
226	Core::renderUpgradeProNotice($repeater, Controls_Manager::RAW_HTML, 'tabs', 'tab_content_type', ['pro-cf']);
227
228	if (king_addons_freemius()->can_use_premium_code__premium_only()) {
229	$repeater->add_control(
230	'tab_custom_field',
231	[
232	'label' => esc_html__('Select Custom Field', 'king-addons'),
233	'type' => 'king-addons-ajax-select2',
234	'label_block' => true,
235	'default' => 'default',
236	'description' => '<strong>Note:</strong> This option only accepts String(Text) or Numeric Custom Field Values.',
237	'options' => 'ajaxselect2/getCustomMetaKeys',
238	'condition' => [
239	'tab_content_type' => 'acf'
240	],
241	]
242	);
243	}
244
245	$repeater->add_control(
246	'select_template',
247	[
248	'label' => esc_html__('Select Template', 'king-addons'),
249	'type' => 'king-addons-ajax-select2',
250	'options' => 'ajaxselect2/getElementorTemplates',
251	'label_block' => true,
252	'condition' => [
253	'tab_content_type' => 'template',
254	],
255	]
256	);
257
258	$repeater->add_control('tab_custom_color', $this->add_repeater_args_tab_custom_color());
259
260	$repeater->add_control(
261	'tab_custom_text_color',
262	[
263	'label' => esc_html__('Text Color', 'king-addons'),
264	'type' => Controls_Manager::COLOR,
265	'default' => '#ffffff',
266	'selectors' => [
267	'{{WRAPPER}} ' . $css_selector['control_list'] . '{{CURRENT_ITEM}} .king-addons-tab-title' => 'color: {{VALUE}} !important;',
268	'{{WRAPPER}} ' . $css_selector['control_list'] . '{{CURRENT_ITEM}} .king-addons-tab-icon' => 'color: {{VALUE}} !important;',
269	'{{WRAPPER}} ' . $css_selector['content_list'] . '{{CURRENT_ITEM}}' => 'color: {{VALUE}} !important;',
270	'{{WRAPPER}} ' . $css_selector['control_list'] . '{{CURRENT_ITEM}}:before' => 'display: none !important;',
271	],
272	'condition' => [
273	'tab_custom_color' => 'yes',
274	],
275	]
276	);
277
278	$repeater->add_control(
279	'tab_custom_bg_color',
280	[
281	'label' => esc_html__('Background Color', 'king-addons'),
282	'type' => Controls_Manager::COLOR,
283	'default' => '#61ce70',
284	'selectors' => [
285	'{{WRAPPER}} ' . $css_selector['control_list'] . '{{CURRENT_ITEM}}' => 'background-color: {{VALUE}} !important;',
286	'{{WRAPPER}} ' . $css_selector['content_list'] . '{{CURRENT_ITEM}}' => 'background-color: {{VALUE}} !important;',
287	],
288	'condition' => [
289	'tab_custom_color' => 'yes',
290	],
291	]
292	);
293
294	$repeater->add_control(
295	'tab_content',
296	[
297	'label' => esc_html__('Content', 'king-addons'),
298	'type' => Controls_Manager::WYSIWYG,
299	'placeholder' => esc_html__('Tab Content', 'king-addons'),
300	'separator' => 'before',
301	'default' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima incidunt voluptates nemo, dolor optio quia architecto quis delectus perspiciatis. Nobis atque id hic neque possimus voluptatum voluptatibus tenetur, perspiciatis consequuntur.',
302	'condition' => [
303	'tab_content_type' => 'editor',
304	],
305	]
306	);
307
308	$this->add_control(
309	'tabs',
310	[
311	'type' => Controls_Manager::REPEATER,
312	'fields' => $repeater->get_controls(),
313	'default' => [
314	[
315	'tab_title' => 'Tab 1',
316	'tab_custom_bg_color' => '#000000',
317	'tab_content' => 'Tab 1 content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima incidunt voluptates nemo, dolor optio quia architecto quis delectus perspiciatis. Nobis atque id hic neque possimus voluptatum voluptatibus tenetur, perspiciatis consequuntur.',
318	],
319	[
320	'tab_title' => 'Tab 2',
321	'tab_custom_bg_color' => '#FF3F62',
322	'tab_content' => 'Tab two. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima incidunt voluptates nemo, dolor optio quia architecto quis delectus perspiciatis. Nobis atque id hic neque possimus voluptatum voluptatibus tenetur, perspiciatis consequuntur.',
323	],
324	[
325	'tab_title' => 'Tab 3',
326	'tab_custom_bg_color' => '#384FFF',
327	'tab_content' => 'Tab three content. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima incidunt voluptates nemo, dolor optio quia architecto quis delectus perspiciatis. Nobis atque id hic neque possimus voluptatum voluptatibus tenetur, perspiciatis consequuntur.',
328	]
329	],
330	'title_field' => '{{{ tab_title }}}',
331	]
332	);
333
334
335	if (!king_addons_freemius()->can_use_premium_code__premium_only()) {
336	$this->add_control(
337	'tabs_repeater_pro_notice',
338	[
339	'type' => Controls_Manager::RAW_HTML,
340	'raw' => 'More than 3 Tabs are available<br> in the <strong><a href="https://kingaddons.com/pricing/?utm_source=kng-module-tabs-settings-upgrade-pro&utm_medium=plugin&utm_campaign=kng" target="_blank">Pro version</a></strong>',
341
342	'content_classes' => 'king-addons-pro-notice',
343	]
344	);
345	}
346
347	$this->add_control(
348	'tabs_position',
349	[
350	'type' => Controls_Manager::SELECT,
351	'label' => esc_html__('Label Position', 'king-addons'),
352	'default' => 'above',
353	'options' => [
354	'above' => esc_html__('Default', 'king-addons'),
355	'left' => esc_html__('Left', 'king-addons'),
356	'right' => esc_html__('Right', 'king-addons'),
357	],
358	'prefix_class' => 'king-addons-tabs-position-',
359	'separator' => 'before',
360	]
361	);
362
363	$this->add_control(
364	'tabs_invert_responsive',
365	[
366	'label' => esc_html__('Invert on Mobile', 'king-addons'),
367	'type' => Controls_Manager::SWITCHER,
368	'prefix_class' => 'king-addons-tabs-responsive-',
369	]
370	);
371
372	$this->add_control_tabs_hr_position();
373
374	if (!king_addons_freemius()->can_use_premium_code__premium_only()) {
375	$this->add_control(
376	'tabs_align_pro_notice',
377	[
378	'raw' => 'Horizontal Align option is fully supported in the <strong><a href="https://kingaddons.com/pricing/?utm_source=kng-module-tabs-settings-upgrade-pro&utm_medium=plugin&utm_campaign=kng" target="_blank">Pro version</a></strong>',
379	'type' => Controls_Manager::RAW_HTML,
380	'content_classes' => 'king-addons-pro-notice',
381	'condition' => [
382	'tabs_hr_position!' => 'justify',
383	],
384	]
385	);
386	}
387
388	$this->add_control(
389	'tabs_vr_position',
390	[
391	'label' => esc_html__('Vertical Align', 'king-addons'),
392	'type' => Controls_Manager::CHOOSE,
393	'label_block' => false,
394	'default' => 'top',
395	'options' => [
396	'top' => [
397	'title' => esc_html__('Top', 'king-addons'),
398	'icon' => 'eicon-v-align-top',
399	],
400	'middle' => [
401	'title' => esc_html__('Middle', 'king-addons'),
402	'icon' => 'eicon-v-align-middle',
403	],
404	'bottom' => [
405	'title' => esc_html__('Bottom', 'king-addons'),
406	'icon' => 'eicon-v-align-bottom',
407	],
408	],
409	'selectors_dictionary' => [
410	'top' => 'flex-start',
411	'middle' => 'center',
412	'bottom' => 'flex-end'
413	],
414	'selectors' => [
415	'{{WRAPPER}} ' . $css_selector['general'] => '-webkit-align-items: {{VALUE}};align-items: {{VALUE}};',
416	],
417	'condition' => [
418	'tabs_position!' => 'above',
419	],
420	]
421	);
422
423	$this->add_control(
424	'text_align',
425	[
426	'label' => esc_html__('Label Alignment', 'king-addons'),
427	'type' => Controls_Manager::CHOOSE,
428	'default' => 'center',
429	'label_block' => false,
430	'options' => [
431	'left' => [
432	'title' => esc_html__('Left', 'king-addons'),
433	'icon' => 'eicon-text-align-left',
434	],
435	'center' => [
436	'title' => esc_html__('Center', 'king-addons'),
437	'icon' => 'eicon-text-align-center',
438	],
439	'right' => [
440	'title' => esc_html__('Right', 'king-addons'),
441	'icon' => 'eicon-text-align-right',
442	],
443	],
444	'selectors_dictionary' => [
445	'left' => 'flex-start',
446	'center' => 'center',
447	'right' => 'flex-end'
448	],
449	'selectors' => [
450	'{{WRAPPER}}.king-addons-tabs-icon-position-left ' . $css_selector['control_list'] => '-webkit-justify-content: {{VALUE}};justify-content: {{VALUE}};',
451	'{{WRAPPER}}.king-addons-tabs-icon-position-center ' . $css_selector['control_list'] => '-webkit-align-items: {{VALUE}};align-items: {{VALUE}};',
452	'{{WRAPPER}}.king-addons-tabs-icon-position-right ' . $css_selector['control_list'] => '-webkit-justify-content: {{VALUE}};justify-content: {{VALUE}};',
453	],
454	'separator' => 'before',
455	]
456	);
457
458	$this->add_responsive_control(
459	'tabs_width',
460	[
461	'label' => esc_html__('Label Width', 'king-addons'),
462	'type' => Controls_Manager::SLIDER,
463	'size_units' => ['px', '%'],
464	'range' => [
465	'px' => [
466	'min' => 0,
467	'max' => 600,
468	],
469	'%' => [
470	'min' => 10,
471	'max' => 100
472	]
473	],
474	'default' => [
475	'unit' => 'px',
476	'size' => 70,
477	],
478	'selectors' => [
479	'{{WRAPPER}} ' . $css_selector['control_list'] => 'min-width: {{SIZE}}{{UNIT}};',
480	],
481	'separator' => 'before'
482	]
483	);
484
485	$this->add_control(
486	'tabs_icon_section',
487	[
488	'label' => esc_html__('Icon', 'king-addons'),
489	'type' => Controls_Manager::HEADING,
490	'separator' => 'before',
491	]
492	);
493
494	$this->add_control(
495	'tabs_icon_position',
496	[
497	'label' => esc_html__('Position', 'king-addons'),
498	'type' => Controls_Manager::CHOOSE,
499	'label_block' => false,
500	'default' => 'left',
501	'options' => [
502	'left' => [
503	'title' => esc_html__('Left', 'king-addons'),
504	'icon' => 'eicon-h-align-left',
505	],
506	'center' => [
507	'title' => esc_html__('Center', 'king-addons'),
508	'icon' => 'eicon-h-align-center',
509	],
510	'right' => [
511	'title' => esc_html__('Right', 'king-addons'),
512	'icon' => 'eicon-h-align-right',
513	],
514	],
515	'prefix_class' => 'king-addons-tabs-icon-position-',
516	]
517	);
518
519	$this->add_responsive_control(
520	'tabs_icon_distance',
521	[
522	'label' => esc_html__('Distance', 'king-addons'),
523	'type' => Controls_Manager::SLIDER,
524	'size_units' => ['px'],
525	'range' => [
526	'px' => [
527	'min' => 0,
528	'max' => 100,
529	],
530	],
531	'default' => [
532	'unit' => 'px',
533	'size' => 5,
534	],
535	'selectors' => [
536	'{{WRAPPER}}.king-addons-tabs-icon-position-left ' . $css_selector['control_list'] . ' ' . $css_selector['control_icon'] => 'margin-right: {{SIZE}}{{UNIT}};',
537	'{{WRAPPER}}.king-addons-tabs-icon-position-right ' . $css_selector['control_list'] . ' ' . $css_selector['control_icon'] => 'margin-left: {{SIZE}}{{UNIT}};',
538	'{{WRAPPER}}.king-addons-tabs-icon-position-center ' . $css_selector['control_list'] . ' ' . $css_selector['control_icon'] => 'margin-bottom: {{SIZE}}{{UNIT}};',
539	'{{WRAPPER}}.king-addons-tabs-icon-position-left ' . $css_selector['control_list'] . ' ' . $css_selector['control_image'] => 'margin-right: {{SIZE}}{{UNIT}};',
540	'{{WRAPPER}}.king-addons-tabs-icon-position-right ' . $css_selector['control_list'] . ' ' . $css_selector['control_image'] => 'margin-left: {{SIZE}}{{UNIT}};',
541	'{{WRAPPER}}.king-addons-tabs-icon-position-center ' . $css_selector['control_list'] . ' ' . $css_selector['control_image'] => 'margin-bottom: {{SIZE}}{{UNIT}};',
542	],
543	]
544	);
545
546	$this->add_group_control(
547	Group_Control_Image_Size::get_type(),
548	[
549	'name' => 'tabs_image_size',
550	'default' => 'full',
551	'separator' => 'before'
552	]
553	);
554
555	$this->end_controls_section();
556
557
558	$this->add_section_settings();
559
560
561	Core::renderProFeaturesSection($this, '', Controls_Manager::RAW_HTML, 'tabs', [
562	'Add Unlimited Tabs',
563	'Tab Content Type - Elementor Template',
564	'Tab Content Type - Custom Fields',
565	'Set Active Tab by Default',
566	'Switch Tabs on Hover Option',
567	'Tabs Autoplay Option',
568	'Custom Tab Colors',
569	'Tab Label Align',
570	'Advanced Tab Content Animations'
571	]);
572
573
574	$this->start_controls_section(
575	'section_style_tabs',
576	[
577	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Labels', 'king-addons'),
578	'tab' => Controls_Manager::TAB_STYLE,
579	]
580	);
581
582	$this->start_controls_tabs('tab_style');
583
584	$this->start_controls_tab(
585	'tab_normal_style',
586	[
587	'label' => esc_html__('Normal', 'king-addons'),
588	]
589	);
590
591	$this->add_control(
592	'tab_color',
593	[
594	'label' => esc_html__('Color', 'king-addons'),
595	'type' => Controls_Manager::COLOR,
596	'default' => '#7a7a7a',
597	'selectors' => [
598	'{{WRAPPER}} ' . $css_selector['control_list'] . ' .king-addons-tab-title' => 'color: {{VALUE}}',
599	],
600	]
601	);
602
603	$this->add_control(
604	'tab_icon_color',
605	[
606	'label' => esc_html__('Icon Color', 'king-addons'),
607	'type' => Controls_Manager::COLOR,
608	'default' => '#7a7a7a',
609	'selectors' => [
610	'{{WRAPPER}} ' . $css_selector['control_list'] . ' ' . $css_selector['control_icon'] => 'color: {{VALUE}}',
611	],
612	]
613	);
614
615	$this->add_control(
616	'tab_bg_color',
617	[
618	'label' => esc_html__('Background Color', 'king-addons'),
619	'type' => Controls_Manager::COLOR,
620	'default' => '#ffffff',
621	'selectors' => [
622	'{{WRAPPER}} ' . $css_selector['control_list'] => 'background-color: {{VALUE}}',
623	],
624	]
625	);
626
627	$this->add_control(
628	'tab_border_color',
629	[
630	'label' => esc_html__('Border Color', 'king-addons'),
631	'type' => Controls_Manager::COLOR,
632	'default' => '#ffffff',
633	'selectors' => [
634	'{{WRAPPER}} ' . $css_selector['control_list'] => 'border-color: {{VALUE}}',
635	],
636	]
637	);
638
639	$this->add_group_control(
640	Group_Control_Box_Shadow::get_type(),
641	[
642	'name' => 'tab_box_shadow',
643	'selector' => '{{WRAPPER}} ' . $css_selector['control_list'],
644	]
645	);
646
647	$this->add_control(
648	'tab_typography_divider',
649	[
650	'type' => Controls_Manager::DIVIDER,
651	'style' => 'thick',
652	]
653	);
654
655	$this->add_group_control(
656	Group_Control_Typography::get_type(),
657	[
658	'name' => 'tab_typography',
659	'selector' => '{{WRAPPER}} ' . $css_selector['control_list'] . ' .king-addons-tab-title',
660	]
661	);
662
663	$this->add_responsive_control(
664	'tab_icon_size',
665	[
666	'label' => esc_html__('Icon Size', 'king-addons'),
667	'type' => Controls_Manager::SLIDER,
668	'size_units' => ['px'],
669	'range' => [
670	'px' => [
671	'min' => 0,
672	'max' => 100,
673	],
674	],
675	'default' => [
676	'unit' => 'px',
677	'size' => 15,
678	],
679	'selectors' => [
680	'{{WRAPPER}} ' . $css_selector['control_list'] . ' .king-addons-tab-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
681	'{{WRAPPER}} ' . $css_selector['control_list'] . ' .king-addons-tab-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
682	'{{WRAPPER}} ' . $css_selector['control_list'] . ' .king-addons-tab-image' => 'width: {{SIZE}}{{UNIT}};',
683	],
684	'separator' => 'before',
685	]
686	);
687
688	$this->add_responsive_control(
689	'tab_padding',
690	[
691	'label' => esc_html__('Padding', 'king-addons'),
692	'type' => Controls_Manager::DIMENSIONS,
693	'size_units' => ['px'],
694	'default' => [
695	'top' => 10,
696	'right' => 10,
697	'bottom' => 10,
698	'left' => 10,
699	],
700	'selectors' => [
701	'{{WRAPPER}} ' . $css_selector['control_list'] => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
702	],
703	'separator' => 'before',
704	]
705	);
706
707	$this->add_responsive_control(
708	'tab_margin',
709	[
710	'label' => esc_html__('Margin', 'king-addons'),
711	'type' => Controls_Manager::DIMENSIONS,
712	'size_units' => ['px',],
713	'default' => [
714	'top' => 0,
715	'right' => 0,
716	'bottom' => 0,
717	'left' => 0,
718	],
719	'selectors' => [
720	'{{WRAPPER}} ' . $css_selector['control_list'] => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
721	],
722	'separator' => 'before',
723	]
724	);
725
726	$this->add_control(
727	'tab_border_type',
728	[
729	'label' => esc_html__('Border Type', 'king-addons'),
730	'type' => Controls_Manager::SELECT,
731	'options' => [
732	'none' => esc_html__('None', 'king-addons'),
733	'solid' => esc_html__('Solid', 'king-addons'),
734	'double' => esc_html__('Double', 'king-addons'),
735	'dotted' => esc_html__('Dotted', 'king-addons'),
736	'dashed' => esc_html__('Dashed', 'king-addons'),
737	'groove' => esc_html__('Groove', 'king-addons'),
738	],
739	'default' => 'solid',
740	'selectors' => [
741	'{{WRAPPER}} ' . $css_selector['control_list'] => 'border-style: {{VALUE}};',
742	],
743	'separator' => 'before',
744	]
745	);
746
747	$this->add_responsive_control(
748	'tab_border_width',
749	[
750	'label' => esc_html__('Border Width', 'king-addons'),
751	'type' => Controls_Manager::DIMENSIONS,
752	'size_units' => ['px'],
753	'default' => [
754	'top' => 1,
755	'right' => 1,
756	'bottom' => 0,
757	'left' => 1,
758	],
759	'selectors' => [
760	'{{WRAPPER}} ' . $css_selector['control_list'] => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
761	],
762	'condition' => [
763	'tab_border_type!' => 'none',
764	],
765	]
766	);
767
768	$this->add_responsive_control(
769	'tab_border_radius',
770	[
771	'label' => esc_html__('Border Radius', 'king-addons'),
772	'type' => Controls_Manager::DIMENSIONS,
773	'size_units' => ['px', '%'],
774	'default' => [
775	'top' => 0,
776	'right' => 0,
777	'bottom' => 0,
778	'left' => 0,
779	],
780	'selectors' => [
781	'{{WRAPPER}} ' . $css_selector['control_list'] => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
782	],
783	'separator' => 'before',
784	]
785	);
786
787	$this->end_controls_tab();
788
789	$this->start_controls_tab(
790	'tab_hover_style',
791	[
792	'label' => esc_html__('Hover', 'king-addons'),
793	]
794	);
795
796	$this->add_control(
797	'tab_hover_color',
798	[
799	'label' => esc_html__('Color', 'king-addons'),
800	'type' => Controls_Manager::COLOR,
801	'default' => '#333333',
802	'selectors' => [
803	'{{WRAPPER}} ' . $css_selector['control_list'] . ':hover .king-addons-tab-title' => 'color: {{VALUE}}',
804	],
805	]
806	);
807
808	$this->add_control(
809	'tab_hover_icon_color',
810	[
811	'label' => esc_html__('Icon Color', 'king-addons'),
812	'type' => Controls_Manager::COLOR,
813	'default' => '#333333',
814	'selectors' => [
815	'{{WRAPPER}} ' . $css_selector['control_list'] . ':hover .king-addons-tab-icon' => 'color: {{VALUE}}',
816	],
817	]
818	);
819
820	$this->add_control(
821	'tab_hover_bg_color',
822	[
823	'label' => esc_html__('Background Color', 'king-addons'),
824	'type' => Controls_Manager::COLOR,
825	'default' => '#ffffff',
826	'selectors' => [
827	'{{WRAPPER}} ' . $css_selector['control_list'] . ':hover' => 'background-color: {{VALUE}}',
828	],
829	]
830	);
831
832	$this->add_control(
833	'tab_hover_border_color',
834	[
835	'label' => esc_html__('Border Color', 'king-addons'),
836	'type' => Controls_Manager::COLOR,
837	'default' => '#ffffff',
838	'selectors' => [
839	'{{WRAPPER}} ' . $css_selector['control_list'] . ':hover' => 'border-color: {{VALUE}}',
840	],
841	]
842	);
843
844	$this->add_group_control(
845	Group_Control_Box_Shadow::get_type(),
846	[
847	'name' => 'tab_hover_box_shadow',
848	'selector' => '{{WRAPPER}} ' . $css_selector['control_list'] . ':hover',
849	]
850	);
851
852	$this->add_control(
853	'tab_hover_typography_divider',
854	[
855	'type' => Controls_Manager::DIVIDER,
856	'style' => 'thick',
857	]
858	);
859
860	$this->add_group_control(
861	Group_Control_Typography::get_type(),
862	[
863	'name' => 'tab_hover_typography',
864	'selector' => '{{WRAPPER}} ' . $css_selector['control_list'] . ':hover .king-addons-tab-title',
865	]
866	);
867
868	$this->add_responsive_control(
869	'tab_hover_icon_size',
870	[
871	'label' => esc_html__('Icon Size', 'king-addons'),
872	'type' => Controls_Manager::SLIDER,
873	'size_units' => ['px'],
874	'range' => [
875	'px' => [
876	'min' => 0,
877	'max' => 100,
878	],
879	],
880	'default' => [
881	'unit' => 'px',
882	'size' => 15,
883	],
884	'selectors' => [
885	'{{WRAPPER}} ' . $css_selector['control_list'] . ':hover .king-addons-tab-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
886	'{{WRAPPER}} ' . $css_selector['control_list'] . ':hover .king-addons-tab-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
887	'{{WRAPPER}} ' . $css_selector['control_list'] . ':hover .king-addons-tab-image' => 'width: {{SIZE}}{{UNIT}};',
888	],
889	'separator' => 'before',
890	]
891	);
892
893	$this->add_responsive_control(
894	'tab_hover_padding',
895	[
896	'label' => esc_html__('Padding', 'king-addons'),
897	'type' => Controls_Manager::DIMENSIONS,
898	'size_units' => ['px',],
899	'default' => [
900	'top' => 10,
901	'right' => 10,
902	'bottom' => 10,
903	'left' => 10,
904	],
905	'selectors' => [
906	'{{WRAPPER}} ' . $css_selector['control_list'] . ':hover' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
907	],
908	'separator' => 'before',
909	]
910	);
911
912	$this->add_responsive_control(
913	'tab_hover_margin',
914	[
915	'label' => esc_html__('Margin', 'king-addons'),
916	'type' => Controls_Manager::DIMENSIONS,
917	'size_units' => ['px',],
918	'default' => [
919	'top' => 0,
920	'right' => 0,
921	'bottom' => 0,
922	'left' => 0,
923	],
924	'selectors' => [
925	'{{WRAPPER}} ' . $css_selector['control_list'] . ':hover' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
926	],
927	'separator' => 'before',
928	]
929	);
930
931	$this->add_control(
932	'tab_hover_border_type',
933	[
934	'label' => esc_html__('Border Type', 'king-addons'),
935	'type' => Controls_Manager::SELECT,
936	'options' => [
937	'none' => esc_html__('None', 'king-addons'),
938	'solid' => esc_html__('Solid', 'king-addons'),
939	'double' => esc_html__('Double', 'king-addons'),
940	'dotted' => esc_html__('Dotted', 'king-addons'),
941	'dashed' => esc_html__('Dashed', 'king-addons'),
942	'groove' => esc_html__('Groove', 'king-addons'),
943	],
944	'default' => 'solid',
945	'selectors' => [
946	'{{WRAPPER}} ' . $css_selector['control_list'] . ':hover' => 'border-style: {{VALUE}};',
947	],
948	'separator' => 'before',
949	]
950	);
951
952	$this->add_responsive_control(
953	'tab_hover_border_width',
954	[
955	'label' => esc_html__('Border Width', 'king-addons'),
956	'type' => Controls_Manager::DIMENSIONS,
957	'size_units' => ['px'],
958	'default' => [
959	'top' => 1,
960	'right' => 1,
961	'bottom' => 0,
962	'left' => 1,
963	],
964	'selectors' => [
965	'{{WRAPPER}} ' . $css_selector['control_list'] . ':hover' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
966	],
967	'condition' => [
968	'tab_hover_border_type!' => 'none',
969	],
970	]
971	);
972
973	$this->add_responsive_control(
974	'tab_hover_border_radius',
975	[
976	'label' => esc_html__('Border Radius', 'king-addons'),
977	'type' => Controls_Manager::DIMENSIONS,
978	'size_units' => ['px', '%'],
979	'default' => [
980	'top' => 0,
981	'right' => 0,
982	'bottom' => 0,
983	'left' => 0,
984	],
985	'selectors' => [
986	'{{WRAPPER}} ' . $css_selector['control_list'] . ':hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
987	],
988	'separator' => 'before',
989	]
990	);
991
992	$this->end_controls_tab();
993
994	$this->start_controls_tab(
995	'tab_active_style',
996	[
997	'label' => esc_html__('Active', 'king-addons'),
998	]
999	);
1000
1001	$this->add_control(
1002	'tab_active_color',
1003	[
1004	'label' => esc_html__('Color', 'king-addons'),
1005	'type' => Controls_Manager::COLOR,
1006	'default' => '#5B03FF',
1007	'selectors' => [
1008	'{{WRAPPER}} ' . $css_selector['control_list'] . '.king-addons-tab-active .king-addons-tab-title' => 'color: {{VALUE}}',
1009	],
1010	]
1011	);
1012
1013	$this->add_control(
1014	'tab_active_icon_color',
1015	[
1016	'label' => esc_html__('Icon Color', 'king-addons'),
1017	'type' => Controls_Manager::COLOR,
1018	'default' => '#333333',
1019	'selectors' => [
1020	'{{WRAPPER}} ' . $css_selector['control_list'] . '.king-addons-tab-active .king-addons-tab-icon' => 'color: {{VALUE}}',
1021	],
1022	]
1023	);
1024
1025	$this->add_control(
1026	'tab_active_bg_color',
1027	[
1028	'label' => esc_html__('Background Color', 'king-addons'),
1029	'type' => Controls_Manager::COLOR,
1030	'default' => '#ffffff',
1031	'selectors' => [
1032	'{{WRAPPER}} ' . $css_selector['control_list'] . '.king-addons-tab-active' => 'background-color: {{VALUE}}',
1033	'{{WRAPPER}}.king-addons-tabs-position-above.king-addons-tabs-triangle-type-outer ' . $css_selector['control_list'] . ':before' => 'border-top-color: {{VALUE}}',
1034
1035
1036	],
1037	]
1038	);
1039
1040	$this->add_control(
1041	'tab_active_border_color',
1042	[
1043	'label' => esc_html__('Border Color', 'king-addons'),
1044	'type' => Controls_Manager::COLOR,
1045	'default' => '#e5e5e5',
1046	'selectors' => [
1047	'{{WRAPPER}} ' . $css_selector['control_list'] . '.king-addons-tab-active' => 'border-color: {{VALUE}}',
1048	],
1049	]
1050	);
1051
1052	$this->add_group_control(
1053	Group_Control_Box_Shadow::get_type(),
1054	[
1055	'name' => 'tab_active_box_shadow',
1056	'selector' => '{{WRAPPER}} ' . $css_selector['control_list'] . '.king-addons-tab-active',
1057	]
1058	);
1059
1060	$this->add_control(
1061	'tab_active_typography_divider',
1062	[
1063	'type' => Controls_Manager::DIVIDER,
1064	'style' => 'thick',
1065	]
1066	);
1067
1068	$this->add_group_control(
1069	Group_Control_Typography::get_type(),
1070	[
1071	'name' => 'tab_active_typography',
1072	'selector' => '{{WRAPPER}} ' . $css_selector['control_list'] . '.king-addons-tab-active .king-addons-tab-title',
1073	]
1074	);
1075
1076	$this->add_responsive_control(
1077	'tab_active_icon_size',
1078	[
1079	'label' => esc_html__('Icon Size', 'king-addons'),
1080	'type' => Controls_Manager::SLIDER,
1081	'size_units' => ['px'],
1082	'range' => [
1083	'px' => [
1084	'min' => 0,
1085	'max' => 100,
1086	],
1087	],
1088	'default' => [
1089	'unit' => 'px',
1090	'size' => 15,
1091	],
1092	'selectors' => [
1093	'{{WRAPPER}} ' . $css_selector['control_list'] . '.king-addons-tab-active .king-addons-tab-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
1094	'{{WRAPPER}} ' . $css_selector['control_list'] . '.king-addons-tab-active .king-addons-tab-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
1095	'{{WRAPPER}} ' . $css_selector['control_list'] . '.king-addons-tab-active .king-addons-tab-image' => 'width: {{SIZE}}{{UNIT}};',
1096	],
1097	'separator' => 'before',
1098	]
1099	);
1100
1101	$this->add_responsive_control(
1102	'tab_active_padding',
1103	[
1104	'label' => esc_html__('Padding', 'king-addons'),
1105	'type' => Controls_Manager::DIMENSIONS,
1106	'size_units' => ['px',],
1107	'default' => [
1108	'top' => 10,
1109	'right' => 10,
1110	'bottom' => 10,
1111	'left' => 10,
1112	],
1113	'selectors' => [
1114	'{{WRAPPER}} ' . $css_selector['control_list'] . '.king-addons-tab-active' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1115	],
1116	'separator' => 'before',
1117	]
1118	);
1119
1120	$this->add_responsive_control(
1121	'tab_active_margin',
1122	[
1123	'label' => esc_html__('Margin', 'king-addons'),
1124	'type' => Controls_Manager::DIMENSIONS,
1125	'size_units' => ['px',],
1126	'default' => [
1127	'top' => 0,
1128	'right' => 0,
1129	'bottom' => -1,
1130	'left' => 0,
1131	],
1132	'selectors' => [
1133	'{{WRAPPER}} ' . $css_selector['control_list'] . '.king-addons-tab-active' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1134	],
1135	'separator' => 'before',
1136	]
1137	);
1138
1139	$this->add_control(
1140	'tab_active_border_type',
1141	[
1142	'label' => esc_html__('Border Type', 'king-addons'),
1143	'type' => Controls_Manager::SELECT,
1144	'options' => [
1145	'none' => esc_html__('None', 'king-addons'),
1146	'solid' => esc_html__('Solid', 'king-addons'),
1147	'double' => esc_html__('Double', 'king-addons'),
1148	'dotted' => esc_html__('Dotted', 'king-addons'),
1149	'dashed' => esc_html__('Dashed', 'king-addons'),
1150	'groove' => esc_html__('Groove', 'king-addons'),
1151	],
1152	'default' => 'solid',
1153	'selectors' => [
1154	'{{WRAPPER}} ' . $css_selector['control_list'] . '.king-addons-tab-active' => 'border-style: {{VALUE}};',
1155	],
1156	'separator' => 'before',
1157	]
1158	);
1159
1160	$this->add_responsive_control(
1161	'tab_active_border_width',
1162	[
1163	'label' => esc_html__('Border Width', 'king-addons'),
1164	'type' => Controls_Manager::DIMENSIONS,
1165	'size_units' => ['px',],
1166	'default' => [
1167	'top' => 1,
1168	'right' => 1,
1169	'bottom' => 0,
1170	'left' => 1,
1171	],
1172	'selectors' => [
1173	'{{WRAPPER}} ' . $css_selector['control_list'] . '.king-addons-tab-active' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1174	],
1175	'condition' => [
1176	'tab_active_border_type!' => 'none',
1177	],
1178	]
1179	);
1180
1181	$this->add_responsive_control(
1182	'tab_active_border_radius',
1183	[
1184	'label' => esc_html__('Border Radius', 'king-addons'),
1185	'type' => Controls_Manager::DIMENSIONS,
1186	'size_units' => ['px', '%'],
1187	'default' => [
1188	'top' => 0,
1189	'right' => 0,
1190	'bottom' => 0,
1191	'left' => 0,
1192	],
1193	'selectors' => [
1194	'{{WRAPPER}} ' . $css_selector['control_list'] . '.king-addons-tab-active' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1195	],
1196	'separator' => 'before',
1197	]
1198	);
1199
1200	$this->end_controls_tab();
1201
1202	$this->end_controls_tabs();
1203
1204	$this->add_control(
1205	'tab_transition_duration',
1206	[
1207	'label' => esc_html__('Transition Duration (seconds)', 'king-addons'),
1208	'type' => Controls_Manager::NUMBER,
1209	'default' => 0.1,
1210	'min' => 0,
1211	'max' => 5,
1212	'step' => 0.1,
1213	'frontend_available' => true,
1214	'selectors' => [
1215	'{{WRAPPER}} ' . $css_selector['control_list'] => '-webkit-transition-duration: {{VALUE}}s; transition-duration: {{VALUE}}s',
1216	'{{WRAPPER}}.king-addons-tabs-triangle-type-outer ' . $css_selector['control_list'] . ':before' => '-webkit-transition-duration: {{VALUE}}s; transition-duration: {{VALUE}}s',
1217	],
1218	'separator' => 'after',
1219	]
1220	);
1221
1222
1223	$this->end_controls_section();
1224
1225
1226	$this->start_controls_section(
1227	'section_style_content',
1228	[
1229	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Content', 'king-addons'),
1230	'tab' => Controls_Manager::TAB_STYLE,
1231	]
1232	);
1233
1234	$this->add_control(
1235	'content_color',
1236	[
1237	'label' => esc_html__('Color', 'king-addons'),
1238	'type' => Controls_Manager::COLOR,
1239	'default' => '#5B03FF',
1240	'selectors' => [
1241	'{{WRAPPER}} ' . $css_selector['content_list'] => 'color: {{VALUE}};',
1242	],
1243	]
1244	);
1245
1246	$this->add_control(
1247	'content_bg_color',
1248	[
1249	'label' => esc_html__('Background Color', 'king-addons'),
1250	'type' => Controls_Manager::COLOR,
1251	'default' => '#ffffff',
1252	'selectors' => [
1253	'{{WRAPPER}} ' . $css_selector['content_wrap'] => 'background-color: {{VALUE}}',
1254	'{{WRAPPER}}.king-addons-tabs-position-above.king-addons-tabs-triangle-type-inner ' . $css_selector['control_list'] . ':before' => 'border-top-color: {{VALUE}}',
1255	'{{WRAPPER}}.king-addons-tabs-position-right.king-addons-tabs-triangle-type-inner ' . $css_selector['control_list'] . ':before' => 'border-right-color: {{VALUE}}',
1256	'{{WRAPPER}}.king-addons-tabs-position-left.king-addons-tabs-triangle-type-inner ' . $css_selector['control_list'] . ':before' => 'border-right-color: {{VALUE}}',
1257	],
1258	'separator' => 'after',
1259	]
1260	);
1261
1262	$this->add_group_control(
1263	Group_Control_Box_Shadow::get_type(),
1264	[
1265	'name' => 'content_box_shadow',
1266	'selector' => '{{WRAPPER}} ' . $css_selector['content_wrap'],
1267	]
1268	);
1269
1270	$this->add_control(
1271	'content_box_shadow_divider',
1272	[
1273	'type' => Controls_Manager::DIVIDER,
1274	'style' => 'thick',
1275	]
1276	);
1277
1278	$this->add_group_control(
1279	Group_Control_Typography::get_type(),
1280	[
1281	'name' => 'content_typography',
1282	'selector' => '{{WRAPPER}} ' . $css_selector['content_list'] . ', {{WRAPPER}} ' . $css_selector['content_list'] . ' ul',
1283	]
1284	);
1285
1286	$this->add_responsive_control(
1287	'content_padding',
1288	[
1289	'label' => esc_html__('Padding', 'king-addons'),
1290	'type' => Controls_Manager::DIMENSIONS,
1291	'default' => [
1292	'top' => 25,
1293	'right' => 25,
1294	'bottom' => 25,
1295	'left' => 25,
1296	],
1297	'size_units' => ['px'],
1298	'selectors' => [
1299	'{{WRAPPER}} ' . $css_selector['content_list'] => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1300	],
1301	'separator' => 'before',
1302	]
1303	);
1304
1305	$this->add_control(
1306	'content_border_type',
1307	[
1308	'label' => esc_html__('Border Type', 'king-addons'),
1309	'type' => Controls_Manager::SELECT,
1310	'options' => [
1311	'none' => esc_html__('None', 'king-addons'),
1312	'solid' => esc_html__('Solid', 'king-addons'),
1313	'double' => esc_html__('Double', 'king-addons'),
1314	'dotted' => esc_html__('Dotted', 'king-addons'),
1315	'dashed' => esc_html__('Dashed', 'king-addons'),
1316	'groove' => esc_html__('Groove', 'king-addons'),
1317	],
1318	'default' => 'solid',
1319	'selectors' => [
1320	'{{WRAPPER}} ' . $css_selector['content_wrap'] => 'border-style: {{VALUE}};',
1321	],
1322	'separator' => 'before',
1323	]
1324	);
1325
1326	$this->add_responsive_control(
1327	'content_border_width',
1328	[
1329	'label' => esc_html__('Border Width', 'king-addons'),
1330	'type' => Controls_Manager::DIMENSIONS,
1331	'size_units' => ['px',],
1332	'default' => [
1333	'top' => 1,
1334	'right' => 1,
1335	'bottom' => 1,
1336	'left' => 1,
1337	],
1338	'selectors' => [
1339	'{{WRAPPER}} ' . $css_selector['content_wrap'] => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1340	],
1341	'condition' => [
1342	'content_border_type!' => 'none',
1343	],
1344	]
1345	);
1346
1347	$this->add_control(
1348	'content_border_color',
1349	[
1350	'label' => esc_html__('Border Color', 'king-addons'),
1351	'type' => Controls_Manager::COLOR,
1352	'default' => '#E8E8E8',
1353	'selectors' => [
1354	'{{WRAPPER}} ' . $css_selector['content_wrap'] => 'border-color: {{VALUE}}',
1355	],
1356	'condition' => [
1357	'content_border_type!' => 'none',
1358	],
1359	]
1360	);
1361
1362	$this->add_responsive_control(
1363	'content_border_radius',
1364	[
1365	'label' => esc_html__('Border Radius', 'king-addons'),
1366	'type' => Controls_Manager::DIMENSIONS,
1367	'size_units' => ['px', '%'],
1368	'default' => [
1369	'top' => 0,
1370	'right' => 0,
1371	'bottom' => 0,
1372	'left' => 0,
1373	],
1374	'selectors' => [
1375	'{{WRAPPER}} ' . $css_selector['content_wrap'] => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1376	],
1377	'separator' => 'before',
1378	]
1379	);
1380
1381	$this->end_controls_section();
1382
1383	$this->start_controls_section(
1384	'section_style_triangle',
1385	[
1386	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Triangle', 'king-addons'),
1387	'tab' => Controls_Manager::TAB_STYLE,
1388	]
1389	);
1390
1391	$this->add_control(
1392	'tab_triangle',
1393	[
1394	'label' => esc_html__('Triangle', 'king-addons'),
1395	'type' => Controls_Manager::SWITCHER,
1396	'default' => 'yes',
1397	'prefix_class' => 'king-addons-tabs-triangle-',
1398	'separator' => 'before',
1399	]
1400	);
1401
1402	$this->add_control(
1403	'tab_triangle_type',
1404	[
1405	'label' => esc_html__('Triangle Points to', 'king-addons'),
1406	'type' => Controls_Manager::SELECT,
1407	'default' => 'outer',
1408	'options' => [
1409	'inner' => esc_html__('Tab', 'king-addons'),
1410	'outer' => esc_html__('Content', 'king-addons'),
1411	],
1412	'prefix_class' => 'king-addons-tabs-triangle-type-',
1413	'render_type' => 'template',
1414	'condition' => [
1415	'tab_triangle' => 'yes',
1416	],
1417	]
1418	);
1419
1420	$this->add_responsive_control(
1421	'tab_triangle_size',
1422	[
1423	'type' => Controls_Manager::SLIDER,
1424	'label' => esc_html__('Size', 'king-addons'),
1425	'size_units' => ['px'],
1426	'range' => [
1427	'px' => [
1428	'min' => 0,
1429	'max' => 30,
1430	]
1431	],
1432	'default' => [
1433	'unit' => 'px',
1434	'size' => 7,
1435	],
1436	'selectors' => [
1437	'{{WRAPPER}} ' . $css_selector['control_list'] . ':before' => 'border-width: {{SIZE}}{{UNIT}};',
1438	'{{WRAPPER}}.king-addons-tabs-position-above.king-addons-tabs-triangle-type-outer ' . $css_selector['control_list'] . ':before' => 'bottom: -{{SIZE}}{{UNIT}};',
1439	'{{WRAPPER}}.king-addons-tabs-position-right.king-addons-tabs-triangle-type-outer ' . $css_selector['control_list'] . ':before' => 'left: -{{SIZE}}{{UNIT}};',
1440	'{{WRAPPER}}.king-addons-tabs-position-left.king-addons-tabs-triangle-type-outer ' . $css_selector['control_list'] . ':before' => 'right: -{{SIZE}}{{UNIT}};',
1441	],
1442	'condition' => [
1443	'tab_triangle' => 'yes',
1444	],
1445	]
1446	);
1447
1448
1449
1450
1451	$this->end_controls_section();
1452
1453
1454
1455	}
1456
1457	public function king_addons_tabs_template($id)
1458	{
1459	if (empty($id)) return '';
1460	if (defined('ICL_LANGUAGE_CODE')) {
1461	$default_language_code = apply_filters('wpml_default_language', null);
1462	/** @noinspection PhpUndefinedConstantInspection */
1463	if (ICL_LANGUAGE_CODE !== $default_language_code) {
1464	/** @noinspection PhpUndefinedConstantInspection */
1465	/** @noinspection PhpUndefinedFunctionInspection */
1466	$id = icl_object_id($id, 'elementor_library', false, ICL_LANGUAGE_CODE);
1467	}
1468	}
1469	$type = get_post_meta(get_the_ID(), '_king_addons_template_type', true);
1470	$has_css = ('internal' === get_option('elementor_css_print_method') \|\| '' !== $type);
1471	return Plugin::instance()->frontend->get_builder_content_for_display($id, $has_css);
1472	}
1473
1474	protected function render()
1475	{
1476	$settings = $this->get_settings();
1477
1478	// Force fallback settings if premium code isn't available
1479	if (!king_addons_freemius()->can_use_premium_code__premium_only()) {
1480	$settings['active_tab'] = 1;
1481	$settings['tabs_trigger'] = 'click';
1482	$settings['autoplay'] = '';
1483	$settings['autoplay_duration'] = 0;
1484	$settings['content_animation'] = 'fade-in';
1485	$settings['content_anim_size'] = 'large';
1486	}
1487
1488	$tabs = $this->get_settings_for_display('tabs');
1489	$id_int = substr($this->get_id_int(), 0, 3);
1490	$options = [
1491	'activeTab' => $settings['active_tab'],
1492	'trigger' => $settings['tabs_trigger'],
1493	'autoplay' => $settings['autoplay'] ?? '',
1494	'autoplaySpeed' => absint($settings['autoplay_duration'] * 1000),
1495	];
1496
1497	$this->add_render_attribute('tabs-attribute', [
1498	'class' => 'king-addons-tabs',
1499	'data-options' => wp_json_encode($options),
1500	]);
1501
1502	echo '<div ' . $this->get_render_attribute_string('tabs-attribute') . '>';
1503	echo '<div class="king-addons-tabs-wrap">';
1504
1505	foreach ($tabs as $index => $item):
1506	if (!king_addons_freemius()->can_use_premium_code__premium_only()) {
1507	// Switch 'pro-tmp' to 'editor' in free version and limit tabs
1508	$item['tab_content_type'] = ('pro-tmp' === $item['tab_content_type']) ? 'editor' : $item['tab_content_type'];
1509	if ($index === 3) break;
1510	}
1511	$tab_count = $index + 1;
1512	$tab_setting_key = $this->get_repeater_setting_key('tab_control', 'tabs', $index);
1513	$tab_image_src = !empty($item['tab_image']['id'])
1514	? Group_Control_Image_Size::get_attachment_image_src($item['tab_image']['id'], 'tabs_image_size', $settings)
1515	: false;
1516	if (!$tab_image_src && !empty($item['tab_image']['url'])) {
1517	$tab_image_src = $item['tab_image']['url'];
1518	}
1519
1520	$this->add_render_attribute($tab_setting_key, [
1521	'id' => 'king-addons-tab-' . $id_int . $tab_count,
1522	'class' => ['king-addons-tab', 'elementor-repeater-item-' . $item['_id']],
1523	'data-tab' => $tab_count,
1524	]);
1525
1526	echo '<div ' . $this->get_render_attribute_string($tab_setting_key) . '>';
1527	if (!empty($item['tab_title'])) {
1528	echo '<div class="king-addons-tab-title">' . esc_html($item['tab_title']) . '</div>';
1529	}
1530	if ('icon' === $item['tab_icon_type'] && !empty($item['tab_icon']['value'])) {
1531	echo '<div class="king-addons-tab-icon"><i class="' . esc_attr($item['tab_icon']['value']) . '"></i></div>';
1532	} elseif ('image' === $item['tab_icon_type'] && $tab_image_src) {
1533	echo '<div class="king-addons-tab-image"><img alt="' . esc_attr($item['tab_image']['alt'] ?? '') . '" src="' . esc_url($tab_image_src) . '"></div>';
1534	}
1535	echo '</div>';
1536	endforeach;
1537
1538	echo '</div><div class="king-addons-tabs-content-wrap">';
1539
1540	foreach ($tabs as $index => $item):
1541	$tab_count = $index + 1;
1542	$content_key = $this->get_repeater_setting_key('tab_content', 'tabs', $index);
1543	$this->add_render_attribute($content_key, [
1544	'id' => 'king-addons-tab-content-' . $id_int . $tab_count,
1545	'class' => ['king-addons-tab-content', 'elementor-repeater-item-' . $item['_id']],
1546	'data-tab' => $tab_count,
1547	]);
1548
1549	echo '<div ' . $this->get_render_attribute_string($content_key) . '>';
1550	echo '<div class="king-addons-tab-content-inner elementor-clearfix king-addons-anim-size-' . esc_attr($settings['content_anim_size']) . ' king-addons-overlay-' . esc_attr($settings['content_animation']) . '">';
1551
1552	if ('template' === $item['tab_content_type']) {
1553	echo $this->king_addons_tabs_template($item['select_template']);
1554	} elseif ('editor' === $item['tab_content_type']) {
1555	echo wp_kses_post($item['tab_content']);
1556	} elseif ('acf' === $item['tab_content_type']) {
1557	echo wp_kses_post(get_post_meta(get_the_ID(), $item['tab_custom_field'], true));
1558	}
1559
1560	echo '</div></div>';
1561	endforeach;
1562
1563	echo '</div></div>';
1564	}
1565	}