Flip_Box.php — Essential Addons for Elementor – Popular Elementor Templates & Widgets 5.1.4

essential-addons-for-elementor-lite / includes / Elements / Flip_Box.php

essential-addons-for-elementor-lite / includes / Elements Last commit date

Adv_Accordion.php 4 years ago Adv_Tabs.php 4 years ago Advanced_Data_Table.php 4 years ago Better_Payment.php 4 years ago Betterdocs_Category_Box.php 4 years ago Betterdocs_Category_Grid.php 4 years ago Betterdocs_Search_Form.php 4 years ago Caldera_Forms.php 4 years ago Career_Page.php 4 years ago Contact_Form_7.php 4 years ago Content_Ticker.php 4 years ago Countdown.php 4 years ago Creative_Button.php 4 years ago Crowdfundly_All_Campaign.php 4 years ago Crowdfundly_Organization.php 4 years ago Crowdfundly_Single_Campaign.php 4 years ago Cta_Box.php 4 years ago Data_Table.php 4 years ago Dual_Color_Header.php 4 years ago EmbedPress.php 4 years ago Event_Calendar.php 4 years ago Facebook_Feed.php 4 years ago Fancy_Text.php 4 years ago Feature_List.php 4 years ago Filterable_Gallery.php 4 years ago Flip_Box.php 4 years ago FluentForm.php 4 years ago Formstack.php 4 years ago GravityForms.php 4 years ago Image_Accordion.php 4 years ago Info_Box.php 4 years ago Interactive_Circle.php 4 years ago Login_Register.php 4 years ago NinjaForms.php 4 years ago Post_Grid.php 4 years ago Post_Timeline.php 4 years ago Pricing_Table.php 4 years ago Product_Grid.php 4 years ago Progress_Bar.php 4 years ago Simple_Menu.php 4 years ago Sticky_Video.php 4 years ago Team_Member.php 4 years ago Testimonial.php 4 years ago Tooltip.php 4 years ago Twitter_Feed.php 4 years ago TypeForm.php 4 years ago WeForms.php 4 years ago Woo_Cart.php 4 years ago Woo_Checkout.php 4 years ago Woo_Product_Carousel.php 4 years ago Woo_Product_Compare.php 4 years ago Woo_Product_Gallery.php 4 years ago Woocommerce_Review.php 4 years ago WpForms.php 4 years ago

Flip_Box.php

1642 lines

1	<?php
2
3	namespace Essential_Addons_Elementor\Elements;
4
5	// If this file is called directly, abort.
6	if (!defined('ABSPATH')) {
7	exit;
8	}
9
10	use \Elementor\Controls_Manager;
11	use \Elementor\Group_Control_Background;
12	use \Elementor\Group_Control_Border;
13	use \Elementor\Group_Control_Box_Shadow;
14	use \Elementor\Group_Control_Image_Size;
15	use \Elementor\Group_Control_Typography;
16	use Elementor\Icons_Manager;
17	use \Elementor\Modules\DynamicTags\Module as TagsModule;
18	use \Elementor\Plugin;
19	use \Elementor\Utils;
20	use \Elementor\Widget_Base;
21	use \Essential_Addons_Elementor\Classes\Helper;
22
23	class Flip_Box extends Widget_Base
24	{
25
26	public function get_name()
27	{
28	return 'eael-flip-box';
29	}
30
31	public function get_title()
32	{
33	return esc_html__('Flip Box', 'essential-addons-for-elementor-lite');
34	}
35
36	public function get_icon()
37	{
38	return 'eaicon-flip-box';
39	}
40
41	public function get_categories()
42	{
43	return ['essential-addons-elementor'];
44	}
45
46	public function get_keywords()
47	{
48	return [
49	'flip',
50	'ea flipbox',
51	'ea flip box',
52	'box',
53	'flip box',
54	'card',
55	'flip card',
56	'ea flip card',
57	'rotate',
58	'ea',
59	'essential addons',
60	];
61	}
62
63	public function get_custom_help_url()
64	{
65	return 'https://essential-addons.com/elementor/docs/flip-box/';
66	}
67
68	protected function register_controls()
69	{
70
71	/**
72	* Flipbox Image Settings
73	*/
74	$this->start_controls_section(
75	'eael_section_flipbox_content_settings',
76	[
77	'label' => esc_html__('Settings', 'essential-addons-for-elementor-lite'),
78	]
79	);
80
81	$this->add_control(
82	'eael_flipbox_type',
83	[
84	'label' => esc_html__('Flipbox Type', 'essential-addons-for-elementor-lite'),
85	'type' => Controls_Manager::SELECT,
86	'default' => 'animate-left',
87	'label_block' => false,
88	'options' => [
89	'animate-left' => esc_html__('Flip Left', 'essential-addons-for-elementor-lite'),
90	'animate-right' => esc_html__('Flip Right', 'essential-addons-for-elementor-lite'),
91	'animate-up' => esc_html__('Flip Top', 'essential-addons-for-elementor-lite'),
92	'animate-down' => esc_html__('Flip Bottom', 'essential-addons-for-elementor-lite'),
93	'animate-zoom-in' => esc_html__('Zoom In', 'essential-addons-for-elementor-lite'),
94	'animate-zoom-out' => esc_html__('Zoom Out', 'essential-addons-for-elementor-lite'),
95	'animate-fade-in' => esc_html__('Fade In', 'essential-addons-for-elementor-lite'),
96	],
97	]
98	);
99	$this->add_control(
100	'eael_flipbox_3d',
101	[
102	'label' => __( '3D Depth', 'essential-addons-for-elementor-lite' ),
103	'type' => Controls_Manager::SWITCHER,
104	'label_on' => __( 'On', 'essential-addons-for-elementor-lite' ),
105	'label_off' => __( 'Off', 'essential-addons-for-elementor-lite' ),
106	'return_value' => 'eael-flip-box--3d',
107	'default' => '',
108	'prefix_class' => '',
109	'condition' => [
110	'eael_flipbox_type' => [
111	'animate-left',
112	'animate-right',
113	'animate-up',
114	'animate-down',
115	]
116	],
117	]
118	);
119
120	$this->add_responsive_control(
121	'eael_flipbox_height',
122	[
123	'label' => esc_html__('Height', 'essential-addons-for-elementor-lite'),
124	'type' => Controls_Manager::SLIDER,
125	'size_units' => ['px', '%'],
126	'range' => [
127	'px' => [
128	'min' => 0,
129	'step' => 1,
130	'max' => 1000,
131	],
132	'%' => [
133	'min' => 0,
134	'step' => 3,
135	'max' => 100,
136	],
137	],
138	'default' => [
139	'unit' => 'px',
140	'size' => 300,
141	],
142	'selectors' => [
143	'{{WRAPPER}} .eael-elements-flip-box-container:not(.eael-template)' => 'height: {{SIZE}}{{UNIT}};',
144	'{{WRAPPER}} .eael-elements-flip-box-container.eael-template' => 'min-height: {{SIZE}}{{UNIT}};',
145	],
146	]
147	);
148
149	$this->end_controls_section();
150
151	/**
152	* Flipbox Content
153	*/
154	$this->start_controls_section(
155	'eael_flipbox_content',
156	[
157	'label' => esc_html__('Content', 'essential-addons-for-elementor-lite'),
158	]
159	);
160
161	$this->start_controls_tabs('eael_flipbox_content_tabs');
162
163	$this->start_controls_tab(
164	'eael_flipbox_content_front',
165	[
166	'label' => __('Front', 'essential-addons-for-elementor-lite'),
167	]
168	);
169	$this->add_control(
170	'eael_flipbox_front_content_type',
171	[
172	'label' => __( 'Content Type', 'essential-addons-elementor' ),
173	'type' => Controls_Manager::SELECT,
174	'options' => [
175	'content' => __( 'Content', 'essential-addons-elementor' ),
176	'template' => __( 'Saved Templates', 'essential-addons-elementor' ),
177	],
178	'default' => 'content',
179	]
180	);
181
182	$this->add_control(
183	'eael_flipbox_front_templates',
184	[
185	'label' => __( 'Choose Template', 'essential-addons-elementor' ),
186	'type' => 'eael-select2',
187	'source_name' => 'post_type',
188	'source_type' => 'elementor_library',
189	'label_block' => true,
190	'condition' => [
191	'eael_flipbox_front_content_type' => 'template',
192	],
193	]
194	);
195
196
197
198	$this->add_control(
199	'eael_flipbox_img_or_icon',
200	[
201	'label' => esc_html__('Icon Type', 'essential-addons-for-elementor-lite'),
202	'type' => Controls_Manager::SELECT,
203	'options' => [
204	'none' => __('None', 'essential-addons-for-elementor-lite'),
205	'img' => __('Image', 'essential-addons-for-elementor-lite'),
206	'icon' => __('Icon', 'essential-addons-for-elementor-lite'),
207	],
208	'default' => 'icon',
209	'condition' => [
210	'eael_flipbox_front_content_type' => 'content',
211	],
212	]
213	);
214
215	$this->add_control(
216	'eael_flipbox_image',
217	[
218	'label' => esc_html__('Flipbox Image', 'essential-addons-for-elementor-lite'),
219	'type' => Controls_Manager::MEDIA,
220	'default' => [
221	'url' => Utils::get_placeholder_image_src(),
222	],
223	'condition' => [
224	'eael_flipbox_img_or_icon' => 'img',
225	],
226	]
227	);
228
229	$this->add_control(
230	'eael_flipbox_icon_new',
231	[
232	'label' => esc_html__('Icon', 'essential-addons-for-elementor-lite'),
233	'type' => Controls_Manager::ICONS,
234	'fa4compatibility' => 'eael_flipbox_icon',
235	'default' => [
236	'value' => 'fas fa-snowflake',
237	'library' => 'fa-solid',
238	],
239	'condition' => [
240	'eael_flipbox_img_or_icon' => 'icon',
241	],
242	]
243	);
244
245	$this->add_responsive_control(
246	'eael_flipbox_image_resizer',
247	[
248	'label' => esc_html__('Image Resizer', 'essential-addons-for-elementor-lite'),
249	'type' => Controls_Manager::SLIDER,
250	'default' => [
251	'size' => '100',
252	],
253	'range' => [
254	'px' => [
255	'max' => 500,
256	],
257	],
258	'selectors' => [
259	'{{WRAPPER}} .eael-elements-flip-box-front-container .eael-elements-flip-box-icon-image > img.eael-flipbox-image-as-icon' => 'width: {{SIZE}}{{UNIT}};',
260	],
261	'condition' => [
262	'eael_flipbox_img_or_icon' => 'img',
263	],
264	]
265	);
266
267	$this->add_group_control(
268	Group_Control_Image_Size::get_type(),
269	[
270	'name' => 'thumbnail',
271	'default' => 'full',
272	'condition' => [
273	'eael_flipbox_image[url]!' => '',
274	'eael_flipbox_img_or_icon' => 'img',
275	],
276	]
277	);
278
279	$this->add_control(
280	'eael_flipbox_front_title',
281	[
282	'label' => esc_html__('Front Title', 'essential-addons-for-elementor-lite'),
283	'type' => Controls_Manager::TEXT,
284	'dynamic' => [
285	'active' => true,
286	],
287	'label_block' => true,
288	'default' => esc_html__('Front Title', 'essential-addons-for-elementor-lite'),
289	'condition' => [
290	'eael_flipbox_front_content_type' => 'content',
291	],
292	]
293	);
294
295	$this->add_control(
296	'eael_flipbox_front_title_tag',
297	[
298	'label' => __('Select Front Title Tag', 'essential-addons-for-elementor-lite'),
299	'type' => Controls_Manager::SELECT,
300	'default' => 'h2',
301	'options' => [
302	'h1' => __('H1', 'essential-addons-for-elementor-lite'),
303	'h2' => __('H2', 'essential-addons-for-elementor-lite'),
304	'h3' => __('H3', 'essential-addons-for-elementor-lite'),
305	'h4' => __('H4', 'essential-addons-for-elementor-lite'),
306	'h5' => __('H5', 'essential-addons-for-elementor-lite'),
307	'h6' => __('H6', 'essential-addons-for-elementor-lite'),
308	'span' => __('Span', 'essential-addons-for-elementor-lite'),
309	'p' => __('P', 'essential-addons-for-elementor-lite'),
310	'div' => __('Div', 'essential-addons-for-elementor-lite'),
311	],
312	'condition' => [
313	'eael_flipbox_front_content_type' => 'content',
314	],
315	]
316	);
317
318	$this->add_control(
319	'eael_flipbox_front_text',
320	[
321	'label' => esc_html__('Front Content', 'essential-addons-for-elementor-lite'),
322	'type' => Controls_Manager::WYSIWYG,
323	'label_block' => true,
324	'default' => __('This is front side content.', 'essential-addons-for-elementor-lite'),
325	'condition' => [
326	'eael_flipbox_front_content_type' => 'content',
327	],
328	]
329	);
330
331	$this->add_control(
332	'eael_flipbox_front_vertical_position',
333	[
334	'label' => __( 'Vertical Position', 'essential-addons-for-elementor-lite' ),
335	'type' => Controls_Manager::CHOOSE,
336	'options' => [
337	'top' => [
338	'title' => __( 'Top', 'essential-addons-for-elementor-lite' ),
339	'icon' => 'eicon-v-align-top',
340	],
341	'middle' => [
342	'title' => __( 'Middle', 'essential-addons-for-elementor-lite' ),
343	'icon' => 'eicon-v-align-middle',
344	],
345	'bottom' => [
346	'title' => __( 'Bottom', 'essential-addons-for-elementor-lite' ),
347	'icon' => 'eicon-v-align-bottom',
348	],
349	],
350	'default' => 'middle',
351	'selectors_dictionary' => [
352	'top' => 'flex-start',
353	'middle' => 'center',
354	'bottom' => 'flex-end',
355	],
356	'selectors' => [
357	'{{WRAPPER}} .eael-elements-flip-box-front-container' => 'align-items: {{VALUE}}',
358	],
359	'condition' => [
360	'eael_flipbox_front_content_type' => 'content',
361	],
362	]
363	);
364
365	$this->add_control(
366	'eael_flipbox_content_alignment',
367	[
368	'label' => esc_html__('Content Alignment', 'essential-addons-for-elementor-lite'),
369	'type' => Controls_Manager::CHOOSE,
370	'label_block' => true,
371	'options' => [
372	'left' => [
373	'title' => esc_html__('Left', 'essential-addons-for-elementor-lite'),
374	'icon' => 'eicon-text-align-left',
375	],
376	'center' => [
377	'title' => esc_html__('Center', 'essential-addons-for-elementor-lite'),
378	'icon' => 'eicon-text-align-center',
379	],
380	'right' => [
381	'title' => esc_html__('Right', 'essential-addons-for-elementor-lite'),
382	'icon' => 'eicon-text-align-right',
383	],
384	],
385	'default' => 'center',
386	'prefix_class' => 'eael-flipbox-content-align-',
387	'condition' => [
388	'eael_flipbox_front_content_type' => 'content',
389	],
390	]
391	);
392
393	$this->end_controls_tab();
394
395	$this->start_controls_tab(
396	'eael_flipbox_content_back',
397	[
398	'label' => __('Back', 'essential-addons-for-elementor-lite'),
399	]
400	);
401
402	$this->add_control(
403	'eael_flipbox_back_content_type',
404	[
405	'label' => __( 'Content Type', 'essential-addons-elementor' ),
406	'type' => Controls_Manager::SELECT,
407	'options' => [
408	'content' => __( 'Content', 'essential-addons-elementor' ),
409	'template' => __( 'Saved Templates', 'essential-addons-elementor' ),
410	],
411	'default' => 'content',
412	]
413	);
414
415	$this->add_control(
416	'eael_flipbox_back_templates',
417	[
418	'label' => __( 'Choose Template', 'essential-addons-elementor' ),
419	'type' => 'eael-select2',
420	'source_name' => 'post_type',
421	'source_type' => 'elementor_library',
422	'label_block' => true,
423	'condition' => [
424	'eael_flipbox_back_content_type' => 'template',
425	],
426	]
427	);
428
429	$this->add_control(
430	'eael_flipbox_img_or_icon_back',
431	[
432	'label' => esc_html__('Icon Type', 'essential-addons-for-elementor-lite'),
433	'type' => Controls_Manager::SELECT,
434	'options' => [
435	'none' => __('None', 'essential-addons-for-elementor-lite'),
436	'img' => __('Image', 'essential-addons-for-elementor-lite'),
437	'icon' => __('Icon', 'essential-addons-for-elementor-lite'),
438	],
439	'default' => 'icon',
440	'condition' => [
441	'eael_flipbox_back_content_type' => 'content',
442	],
443	]
444	);
445
446	$this->add_control(
447	'eael_flipbox_image_back',
448	[
449	'label' => esc_html__('Flipbox Image', 'essential-addons-for-elementor-lite'),
450	'type' => Controls_Manager::MEDIA,
451	'default' => [
452	'url' => Utils::get_placeholder_image_src(),
453	],
454	'condition' => [
455	'eael_flipbox_img_or_icon_back' => 'img',
456	],
457	]
458	);
459
460	$this->add_control(
461	'eael_flipbox_icon_back_new',
462	[
463	'label' => esc_html__('Icon', 'essential-addons-for-elementor-lite'),
464	'type' => Controls_Manager::ICONS,
465	'fa4compatibility' => 'eael_flipbox_icon_back',
466	'default' => [
467	'value' => 'fas fa-snowflake',
468	'library' => 'fa-solid',
469	],
470	'condition' => [
471	'eael_flipbox_img_or_icon_back' => 'icon',
472	],
473	]
474	);
475
476	$this->add_responsive_control(
477	'eael_flipbox_image_resizer_back',
478	[
479	'label' => esc_html__('Image Resizer', 'essential-addons-for-elementor-lite'),
480	'type' => Controls_Manager::SLIDER,
481	'default' => [
482	'size' => '100',
483	],
484	'range' => [
485	'px' => [
486	'max' => 500,
487	],
488	],
489	'selectors' => [
490	'{{WRAPPER}} .eael-elements-flip-box-rear-container .eael-elements-flip-box-icon-image > img.eael-flipbox-image-as-icon' => 'width: {{SIZE}}{{UNIT}};',
491	],
492	'condition' => [
493	'eael_flipbox_img_or_icon_back' => 'img',
494	],
495	]
496	);
497
498	$this->add_group_control(
499	Group_Control_Image_Size::get_type(),
500	[
501	'name' => 'thumbnail_back',
502	'default' => 'full',
503	'condition' => [
504	'eael_flipbox_image[url]!' => '',
505	'eael_flipbox_img_or_icon_back' => 'img',
506	],
507	]
508	);
509
510	$this->add_control(
511	'eael_flipbox_back_title',
512	[
513	'label' => esc_html__('Back Title', 'essential-addons-for-elementor-lite'),
514	'type' => Controls_Manager::TEXT,
515	'dynamic' => [
516	'active' => true,
517	],
518	'label_block' => true,
519	'default' => esc_html__('Back Title', 'essential-addons-for-elementor-lite'),
520	'condition' => [
521	'eael_flipbox_back_content_type' => 'content',
522	],
523	]
524	);
525
526	$this->add_control(
527	'eael_flipbox_back_title_tag',
528	[
529	'label' => __('Select Back Title Tag', 'essential-addons-for-elementor-lite'),
530	'type' => Controls_Manager::SELECT,
531	'default' => 'h2',
532	'options' => [
533	'h1' => __('H1', 'essential-addons-for-elementor-lite'),
534	'h2' => __('H2', 'essential-addons-for-elementor-lite'),
535	'h3' => __('H3', 'essential-addons-for-elementor-lite'),
536	'h4' => __('H4', 'essential-addons-for-elementor-lite'),
537	'h5' => __('H5', 'essential-addons-for-elementor-lite'),
538	'h6' => __('H6', 'essential-addons-for-elementor-lite'),
539	'span' => __('Span', 'essential-addons-for-elementor-lite'),
540	'p' => __('P', 'essential-addons-for-elementor-lite'),
541	'div' => __('Div', 'essential-addons-for-elementor-lite'),
542	],
543	'condition' => [
544	'eael_flipbox_back_content_type' => 'content',
545	],
546	]
547	);
548
549	$this->add_control(
550	'eael_flipbox_back_text',
551	[
552	'label' => esc_html__('Back Content', 'essential-addons-for-elementor-lite'),
553	'type' => Controls_Manager::WYSIWYG,
554	'label_block' => true,
555	'default' => __('This is back side content.', 'essential-addons-for-elementor-lite'),
556	'condition' => [
557	'eael_flipbox_back_content_type' => 'content',
558	],
559	]
560	);
561
562	$this->add_control(
563	'eael_flipbox_back_vertical_position',
564	[
565	'label' => __( 'Vertical Position', 'essential-addons-for-elementor-lite' ),
566	'type' => Controls_Manager::CHOOSE,
567	'options' => [
568	'top' => [
569	'title' => __( 'Top', 'essential-addons-for-elementor-lite' ),
570	'icon' => 'eicon-v-align-top',
571	],
572	'middle' => [
573	'title' => __( 'Middle', 'essential-addons-for-elementor-lite' ),
574	'icon' => 'eicon-v-align-middle',
575	],
576	'bottom' => [
577	'title' => __( 'Bottom', 'essential-addons-for-elementor-lite' ),
578	'icon' => 'eicon-v-align-bottom',
579	],
580	],
581	'default' => 'middle',
582	'selectors_dictionary' => [
583	'top' => 'flex-start',
584	'middle' => 'center',
585	'bottom' => 'flex-end',
586	],
587	'selectors' => [
588	'{{WRAPPER}} .eael-elements-flip-box-rear-container' => 'align-items: {{VALUE}}',
589	],
590	'condition' => [
591	'eael_flipbox_back_content_type' => 'content',
592	],
593	]
594	);
595
596	$this->add_control(
597	'eael_flipbox_back_content_alignment',
598	[
599	'label' => esc_html__('Content Alignment', 'essential-addons-for-elementor-lite'),
600	'type' => Controls_Manager::CHOOSE,
601	'label_block' => true,
602	'options' => [
603	'left' => [
604	'title' => esc_html__('Left', 'essential-addons-for-elementor-lite'),
605	'icon' => 'eicon-text-align-left',
606	],
607	'center' => [
608	'title' => esc_html__('Center', 'essential-addons-for-elementor-lite'),
609	'icon' => 'eicon-text-align-center',
610	],
611	'right' => [
612	'title' => esc_html__('Right', 'essential-addons-for-elementor-lite'),
613	'icon' => 'eicon-text-align-right',
614	],
615	],
616	'default' => 'center',
617	'selectors' => [
618	'{{WRAPPER}} .eael-elements-flip-box-rear-container .eael-elements-flip-box-padding' => 'text-align: {{VALUE}}',
619	],
620	'condition' => [
621	'eael_flipbox_back_content_type' => 'content',
622	],
623	]
624	);
625
626	$this->end_controls_tab();
627
628	$this->end_controls_tabs();
629
630	$this->end_controls_section();
631
632	/**
633	* ----------------------------------------------
634	* Flipbox Link
635	* ----------------------------------------------
636	*/
637	$this->start_controls_section(
638	'eael_flixbox_link_section',
639	[
640	'label' => esc_html__('Link', 'essential-addons-for-elementor-lite'),
641	'condition' => [
642	'eael_flipbox_back_content_type' => 'content',
643	],
644	]
645	);
646
647	$this->add_control(
648	'flipbox_link_type',
649	[
650	'label' => __('Link Type', 'essential-addons-for-elementor-lite'),
651	'type' => Controls_Manager::SELECT,
652	'default' => 'none',
653	'options' => [
654	'none' => __('None', 'essential-addons-for-elementor-lite'),
655	'box' => __('Box', 'essential-addons-for-elementor-lite'),
656	'title' => __('Title', 'essential-addons-for-elementor-lite'),
657	'button' => __('Button', 'essential-addons-for-elementor-lite'),
658	],
659	]
660	);
661
662	$this->add_control(
663	'flipbox_link',
664	[
665	'label' => __('Link', 'essential-addons-for-elementor-lite'),
666	'type' => Controls_Manager::URL,
667	'dynamic' => [
668	'active' => true,
669	'categories' => [
670	TagsModule::POST_META_CATEGORY,
671	TagsModule::URL_CATEGORY,
672	],
673	],
674	'placeholder' => 'https://www.your-link.com',
675	'default' => [
676	'url' => '#',
677	],
678	'condition' => [
679	'flipbox_link_type!' => 'none',
680	],
681	]
682	);
683
684	$this->add_control(
685	'flipbox_button_text',
686	[
687	'label' => __('Button Text', 'essential-addons-for-elementor-lite'),
688	'type' => Controls_Manager::TEXT,
689	'dynamic' => [
690	'active' => true,
691	],
692	'default' => __('Get Started', 'essential-addons-for-elementor-lite'),
693	'condition' => [
694	'flipbox_link_type' => 'button',
695	],
696	]
697	);
698
699	$this->add_control(
700	'button_icon_new',
701	[
702	'label' => __('Button Icon', 'essential-addons-for-elementor-lite'),
703	'type' => Controls_Manager::ICONS,
704	'fa4compatibility' => 'button_icon',
705	'condition' => [
706	'flipbox_link_type' => 'button',
707	],
708	]
709	);
710
711	$this->add_control(
712	'button_icon_position',
713	[
714	'label' => __('Icon Position', 'essential-addons-for-elementor-lite'),
715	'type' => Controls_Manager::SELECT,
716	'default' => 'after',
717	'options' => [
718	'after' => __('After', 'essential-addons-for-elementor-lite'),
719	'before' => __('Before', 'essential-addons-for-elementor-lite'),
720	],
721	'condition' => [
722	'flipbox_link_type' => 'button',
723	],
724	]
725	);
726
727	$this->end_controls_section();
728
729	if (!apply_filters('eael/pro_enabled', false)) {
730	$this->start_controls_section(
731	'eael_section_pro',
732	[
733	'label' => __('Go Premium for More Features', 'essential-addons-for-elementor-lite'),
734	]
735	);
736
737	$this->add_control(
738	'eael_control_get_pro',
739	[
740	'label' => __('Unlock more possibilities', 'essential-addons-for-elementor-lite'),
741	'type' => Controls_Manager::CHOOSE,
742	'options' => [
743	'1' => [
744	'title' => '',
745	'icon' => 'fa fa-unlock-alt',
746	],
747	],
748	'default' => '1',
749	'description' => '<span class="pro-feature"> Get the <a href="https://wpdeveloper.com/upgrade/ea-pro" target="_blank">Pro version</a> for more stunning elements and customization options.</span>',
750	]
751	);
752
753	$this->end_controls_section();
754	}
755
756	/**
757	* -------------------------------------------
758	* Tab Style (Flipbox Style)
759	* -------------------------------------------
760	*/
761	$this->start_controls_section(
762	'eael_section_flipbox_style_settings',
763	[
764	'label' => esc_html__('Filp Box Style', 'essential-addons-for-elementor-lite'),
765	'tab' => Controls_Manager::TAB_STYLE,
766	]
767	);
768
769	$this->add_control(
770	'eael_flipbox_front_bg_heading',
771	[
772	'label' => __('Front Background Color', 'essential-addons-for-elementor-lite'),
773	'type' => Controls_Manager::HEADING,
774	]
775	);
776
777	$this->add_group_control(
778	Group_Control_Background::get_type(),
779	[
780	'name' => 'eael_flipbox_front_bg_color',
781	'label' => __('Front Background Color', 'essential-addons-for-elementor-lite'),
782	'types' => ['classic', 'gradient'],
783	'selector' => '{{WRAPPER}} .eael-elements-flip-box-front-container',
784	]
785	);
786
787	$this->add_control(
788	'eael_flipbox_back_bg_heading',
789	[
790	'label' => __('Back Background Color', 'essential-addons-for-elementor-lite'),
791	'type' => Controls_Manager::HEADING,
792	'separator' => 'before',
793	]
794	);
795
796	$this->add_group_control(
797	Group_Control_Background::get_type(),
798	[
799	'name' => 'eael_flipbox_back_bg_color',
800	'label' => __('Back Background Color', 'essential-addons-for-elementor-lite'),
801	'types' => ['classic', 'gradient'],
802	'selector' => '{{WRAPPER}} .eael-elements-flip-box-rear-container',
803	'separator' => 'after',
804	]
805	);
806
807	$this->add_responsive_control(
808	'eael_flipbox_front_back_padding',
809	[
810	'label' => esc_html__('Content Padding', 'essential-addons-for-elementor-lite'),
811	'type' => Controls_Manager::DIMENSIONS,
812	'size_units' => ['px', 'em', '%'],
813	'selectors' => [
814	'{{WRAPPER}} .eael-elements-flip-box-front-container' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
815	'{{WRAPPER}} .eael-elements-flip-box-rear-container' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
816	],
817	]
818	);
819
820	$this->add_group_control(
821	Group_Control_Border::get_type(),
822	[
823	'name' => 'eael_filbpox_border',
824	'label' => esc_html__('Border Style', 'essential-addons-for-elementor-lite'),
825	'selector' => '{{WRAPPER}} .eael-elements-flip-box-front-container, {{WRAPPER}} .eael-elements-flip-box-rear-container',
826	]
827	);
828
829	$this->add_control(
830	'eael_flipbox_border_radius',
831	[
832	'label' => esc_html__('Border Radius', 'essential-addons-for-elementor-lite'),
833	'type' => Controls_Manager::DIMENSIONS,
834	'size_units' => ['px', '%', 'em'],
835	'selectors' => [
836	'{{WRAPPER}} .eael-elements-flip-box-front-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
837	'{{WRAPPER}} .eael-elements-flip-box-rear-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
838	],
839	]
840	);
841
842	$this->add_group_control(
843	Group_Control_Box_Shadow::get_type(),
844	[
845	'name' => 'eael_flipbox_shadow',
846	'selector' => '{{WRAPPER}} .eael-elements-flip-box-front-container, {{WRAPPER}} .eael-elements-flip-box-rear-container',
847	]
848	);
849
850	$this->end_controls_section();
851
852	/**
853	* -------------------------------------------
854	* Tab Style (Flip Box Image)
855	* -------------------------------------------
856	*/
857	$this->start_controls_section(
858	'eael_section_flipbox_imgae_style_settings',
859	[
860	'label' => esc_html__('Image Style', 'essential-addons-for-elementor-lite'),
861	'tab' => Controls_Manager::TAB_STYLE,
862	'condition' => [
863	'eael_flipbox_img_or_icon' => 'img',
864	],
865	]
866	);
867
868	$this->add_control(
869	'eael_flipbox_img_type',
870	[
871	'label' => esc_html__('Image Type', 'essential-addons-for-elementor-lite'),
872	'type' => Controls_Manager::SELECT,
873	'default' => 'default',
874	'label_block' => false,
875	'options' => [
876	'circle' => esc_html__('Circle', 'essential-addons-for-elementor-lite'),
877	'radius' => esc_html__('Radius', 'essential-addons-for-elementor-lite'),
878	'default' => esc_html__('Default', 'essential-addons-for-elementor-lite'),
879	],
880	'prefix_class' => 'eael-flipbox-img-',
881	'condition' => [
882	'eael_flipbox_img_or_icon' => 'img',
883	],
884	]
885	);
886
887	/**
888	* Condition: 'eael_flipbox_img_type' => 'radius'
889	*/
890	$this->add_control(
891	'eael_filpbox_img_border_radius',
892	[
893	'label' => esc_html__('Border Radius', 'essential-addons-for-elementor-lite'),
894	'type' => Controls_Manager::SLIDER,
895	'range' => [
896	'px' => [
897	'max' => 100,
898	],
899	],
900	'selectors' => [
901	'{{WRAPPER}} .eael-elements-flip-box-icon-image img' => 'border-radius: {{SIZE}}px;',
902	'{{WRAPPER}} .eael-elements-flip-box-icon-image img' => 'border-radius: {{SIZE}}px;',
903	],
904	'condition' => [
905	'eael_flipbox_img_or_icon' => 'img',
906	'eael_flipbox_img_type' => 'radius',
907	],
908	]
909	);
910
911	$this->end_controls_section();
912
913	/**
914	* -------------------------------------------
915	* Tab Style (Flip Box Icon Style)
916	* -------------------------------------------
917	*/
918	$this->start_controls_section(
919	'eael_section_flipbox_icon_style_settings',
920	[
921	'label' => esc_html__('Icon Style', 'essential-addons-for-elementor-lite'),
922	'tab' => Controls_Manager::TAB_STYLE,
923	'condition' => [
924	'eael_flipbox_img_or_icon' => 'icon',
925	],
926	]
927	);
928
929	$this->start_controls_tabs('eael_section_icon_style_settings');
930	$this->start_controls_tab('eael_section_icon_front_style_settings', [
931	'label' => esc_html__('Front', 'essential-addons-for-elementor-lite'),
932	]);
933
934	/**
935	* Icon
936	*/
937	$this->add_control(
938	'eael_flipbox_front_icon_heading',
939	[
940	'label' => esc_html__('Icon Style', 'essential-addons-for-elementor-lite'),
941	'type' => Controls_Manager::HEADING,
942	'condition' => [
943	'eael_flipbox_img_or_icon' => 'icon',
944	],
945	]
946	);
947
948	$this->add_control(
949	'eael_flipbox_front_icon_color',
950	[
951	'label' => esc_html__('Color', 'essential-addons-for-elementor-lite'),
952	'type' => Controls_Manager::COLOR,
953	'default' => '#fff',
954	'selectors' => [
955	'{{WRAPPER}} .eael-elements-flip-box-front-container .eael-elements-flip-box-icon-image .ea-flipbox-icon' => 'color: {{VALUE}};',
956	'{{WRAPPER}} .eael-elements-flip-box-front-container .eael-elements-flip-box-icon-image svg' => 'color: {{VALUE}}; fill: {{VALUE}};',
957	],
958	'condition' => [
959	'eael_flipbox_img_or_icon' => 'icon',
960	],
961	]
962	);
963
964	$this->add_control(
965	'eael_flipbox_front_icon_typography',
966	[
967	'label' => esc_html__('Icon Size', 'essential-addons-for-elementor-lite'),
968	'type' => Controls_Manager::SLIDER,
969	'size_units' => ['px'],
970	'default' => [
971	'size' => 40,
972	'unit' => 'px',
973	],
974	'range' => [
975	'px' => [
976	'min' => 0,
977	'step' => 1,
978	'max' => 150,
979	],
980	],
981	'selectors' => [
982	'{{WRAPPER}} .eael-elements-flip-box-front-container .eael-elements-flip-box-icon-image .ea-flipbox-icon' => 'font-size: {{SIZE}}{{UNIT}};',
983	],
984	'condition' => [
985	'eael_flipbox_img_or_icon' => 'icon',
986	],
987	]
988	);
989
990	$this->add_group_control(
991	Group_Control_Border::get_type(),
992	[
993	'name' => 'eael_flipbox_icon_front_border',
994	'label' => esc_html__('Border', 'essential-addons-for-elementor-lite'),
995	'selector' => '{{WRAPPER}} .eael-elements-flip-box-front-container .eael-elements-flip-box-icon-image',
996	'condition' => [
997	'eael_flipbox_img_or_icon' => 'icon',
998	],
999	]
1000	);
1001
1002	$this->add_responsive_control(
1003	'eael_flipbox_icon_front_padding',
1004	[
1005	'label' => esc_html__('Padding', 'essential-addons-for-elementor-lite'),
1006	'type' => Controls_Manager::DIMENSIONS,
1007	'size_units' => ['px', 'em'],
1008	'selectors' => [
1009	'{{WRAPPER}} .eael-elements-flip-box-front-container .eael-elements-flip-box-icon-image' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1010	],
1011	]
1012	);
1013
1014	$this->add_control(
1015	'eael_flipbox_icon_front_border_radius',
1016	[
1017	'label' => esc_html__('Border Radius', 'essential-addons-for-elementor-lite'),
1018	'type' => Controls_Manager::SLIDER,
1019	'size_units' => ['px', '%'],
1020	'range' => [
1021	'px' => [
1022	'min' => 0,
1023	'step' => 1,
1024	'max' => 500,
1025	],
1026	'%' => [
1027	'min' => 0,
1028	'step' => 3,
1029	'max' => 100,
1030	],
1031	],
1032	'selectors' => [
1033	'{{WRAPPER}} .eael-elements-flip-box-front-container .eael-elements-flip-box-icon-image' => 'border-radius: {{SIZE}}{{UNIT}};',
1034	],
1035	'condition' => [
1036	'eael_flipbox_img_or_icon' => 'icon',
1037	],
1038	]
1039	);
1040
1041	$this->end_controls_tab();
1042
1043	$this->start_controls_tab('eael_section_icon_back_style_settings', [
1044	'label' => esc_html__('Back', 'essential-addons-for-elementor-lite'),
1045	]);
1046
1047	/**
1048	* Icon
1049	*/
1050	$this->add_control(
1051	'eael_flipbox_back_icon_heading',
1052	[
1053	'label' => esc_html__('Icon Style', 'essential-addons-for-elementor-lite'),
1054	'type' => Controls_Manager::HEADING,
1055	'condition' => [
1056	'eael_flipbox_img_or_icon_back' => 'icon',
1057	],
1058	]
1059	);
1060
1061	$this->add_control(
1062	'eael_flipbox_back_icon_color',
1063	[
1064	'label' => esc_html__('Color', 'essential-addons-for-elementor-lite'),
1065	'type' => Controls_Manager::COLOR,
1066	'default' => '#fff',
1067	'selectors' => [
1068	'{{WRAPPER}} .eael-elements-flip-box-rear-container .eael-elements-flip-box-icon-image .ea-flipbox-icon' => 'color: {{VALUE}};',
1069	'{{WRAPPER}} .eael-elements-flip-box-rear-container .eael-elements-flip-box-icon-image .ea-flipbox-icon svg' => 'color: {{VALUE}}; fill: {{VALUE}};',
1070	],
1071	'condition' => [
1072	'eael_flipbox_img_or_icon_back' => 'icon',
1073	],
1074	]
1075	);
1076
1077	$this->add_control(
1078	'eael_flipbox_back_icon_typography',
1079	[
1080	'label' => esc_html__('Icon Size', 'essential-addons-for-elementor-lite'),
1081	'type' => Controls_Manager::SLIDER,
1082	'size_units' => ['px'],
1083	'default' => [
1084	'size' => 40,
1085	'unit' => 'px',
1086	],
1087	'range' => [
1088	'px' => [
1089	'min' => 0,
1090	'step' => 1,
1091	'max' => 150,
1092	],
1093	],
1094	'selectors' => [
1095	'{{WRAPPER}} .eael-elements-flip-box-rear-container .eael-elements-flip-box-icon-image .ea-flipbox-icon' => 'font-size: {{SIZE}}{{UNIT}};',
1096	],
1097	'condition' => [
1098	'eael_flipbox_img_or_icon_back' => 'icon',
1099	],
1100	]
1101	);
1102
1103	$this->add_group_control(
1104	Group_Control_Border::get_type(),
1105	[
1106	'name' => 'eael_flipbox_icon_back_border',
1107	'label' => esc_html__('Border', 'essential-addons-for-elementor-lite'),
1108	'selector' => '{{WRAPPER}} .eael-elements-flip-box-rear-container .eael-elements-flip-box-icon-image',
1109	'condition' => [
1110	'eael_flipbox_img_or_icon' => 'icon',
1111	],
1112	]
1113	);
1114
1115	$this->add_responsive_control(
1116	'eael_flipbox_icon_back_padding',
1117	[
1118	'label' => esc_html__('Padding', 'essential-addons-for-elementor-lite'),
1119	'type' => Controls_Manager::DIMENSIONS,
1120	'size_units' => ['px', 'em'],
1121	'selectors' => [
1122	'{{WRAPPER}} .eael-elements-flip-box-rear-container .eael-elements-flip-box-icon-image' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1123	],
1124	]
1125	);
1126
1127	$this->add_control(
1128	'eael_flipbox_icon_back_border_radius',
1129	[
1130	'label' => esc_html__('Border Radius', 'essential-addons-for-elementor-lite'),
1131	'type' => Controls_Manager::SLIDER,
1132	'size_units' => ['px', '%'],
1133	'range' => [
1134	'px' => [
1135	'min' => 0,
1136	'step' => 1,
1137	'max' => 500,
1138	],
1139	'%' => [
1140	'min' => 0,
1141	'step' => 3,
1142	'max' => 100,
1143	],
1144	],
1145	'selectors' => [
1146	'{{WRAPPER}} .eael-elements-flip-box-rear-container .eael-elements-flip-box-icon-image' => 'border-radius: {{SIZE}}{{UNIT}};',
1147	],
1148	'condition' => [
1149	'eael_flipbox_img_or_icon' => 'icon',
1150	],
1151	]
1152	);
1153
1154	$this->end_controls_tab();
1155	$this->end_controls_tabs();
1156
1157	$this->end_controls_section();
1158
1159	/**
1160	* -------------------------------------------
1161	* Tab Style (Flip Box Title Style)
1162	* -------------------------------------------
1163	*/
1164	$this->start_controls_section(
1165	'eael_section_flipbox_title_style_settings',
1166	[
1167	'label' => esc_html__('Color & Typography', 'essential-addons-for-elementor-lite'),
1168	'tab' => Controls_Manager::TAB_STYLE,
1169	]
1170	);
1171
1172	$this->start_controls_tabs('eael_section_flipbox_typo_style_settings');
1173	$this->start_controls_tab('eael_section_flipbox_typo_style_front_settings', [
1174	'label' => esc_html__('Front', 'essential-addons-for-elementor-lite'),
1175	]);
1176
1177	/**
1178	* Title
1179	*/
1180	$this->add_control(
1181	'eael_flipbox_front_title_heading',
1182	[
1183	'label' => esc_html__('Title Style', 'essential-addons-for-elementor-lite'),
1184	'type' => Controls_Manager::HEADING,
1185	]
1186	);
1187
1188	$this->add_control(
1189	'eael_flipbox_front_title_color',
1190	[
1191	'label' => esc_html__('Color', 'essential-addons-for-elementor-lite'),
1192	'type' => Controls_Manager::COLOR,
1193	'default' => '#fff',
1194	'selectors' => [
1195	'{{WRAPPER}} .eael-elements-flip-box-front-container .eael-elements-flip-box-heading' => 'color: {{VALUE}};',
1196	],
1197	]
1198	);
1199
1200	$this->add_group_control(
1201	Group_Control_Typography::get_type(),
1202	[
1203	'name' => 'eael_flipbox_front_title_typography',
1204	'selector' => '{{WRAPPER}} .eael-elements-flip-box-front-container .eael-elements-flip-box-heading',
1205	]
1206	);
1207
1208	/**
1209	* Content
1210	*/
1211	$this->add_control(
1212	'eael_flipbox_front_content_heading',
1213	[
1214	'label' => esc_html__('Content Style', 'essential-addons-for-elementor-lite'),
1215	'type' => Controls_Manager::HEADING,
1216	]
1217	);
1218
1219	$this->add_control(
1220	'eael_flipbox_front_content_color',
1221	[
1222	'label' => esc_html__('Color', 'essential-addons-for-elementor-lite'),
1223	'type' => Controls_Manager::COLOR,
1224	'default' => '#fff',
1225	'selectors' => [
1226	'{{WRAPPER}} .eael-elements-flip-box-front-container .eael-elements-flip-box-content' => 'color: {{VALUE}};',
1227	],
1228	]
1229	);
1230
1231	$this->add_group_control(
1232	Group_Control_Typography::get_type(),
1233	[
1234	'name' => 'eael_flipbox_front_content_typography',
1235	'selector' => '{{WRAPPER}} .eael-elements-flip-box-front-container .eael-elements-flip-box-content',
1236	]
1237	);
1238
1239	$this->end_controls_tab();
1240
1241	$this->start_controls_tab('eael_section_flipbox_typo_style_back_settings', [
1242	'label' => esc_html__('Back', 'essential-addons-for-elementor-lite'),
1243	]);
1244
1245	/**
1246	* Title
1247	*/
1248	$this->add_control(
1249	'eael_flipbox_back_title_heading',
1250	[
1251	'label' => esc_html__('Title Style', 'essential-addons-for-elementor-lite'),
1252	'type' => Controls_Manager::HEADING,
1253	'separator' => 'before',
1254	]
1255	);
1256
1257	$this->add_control(
1258	'eael_flipbox_back_title_color',
1259	[
1260	'label' => esc_html__('Color', 'essential-addons-for-elementor-lite'),
1261	'type' => Controls_Manager::COLOR,
1262	'default' => '#fff',
1263	'selectors' => [
1264	'{{WRAPPER}} .eael-elements-flip-box-rear-container .eael-elements-flip-box-heading' => 'color: {{VALUE}};',
1265	],
1266	]
1267	);
1268
1269	$this->add_group_control(
1270	Group_Control_Typography::get_type(),
1271	[
1272	'name' => 'eael_flipbox_back_title_typography',
1273	'selector' => '{{WRAPPER}} .eael-elements-flip-box-rear-container .eael-elements-flip-box-heading',
1274	]
1275	);
1276
1277	/**
1278	* Content
1279	*/
1280	$this->add_control(
1281	'eael_flipbox_back_content_heading',
1282	[
1283	'label' => esc_html__('Content Style', 'essential-addons-for-elementor-lite'),
1284	'type' => Controls_Manager::HEADING,
1285	'separator' => 'before',
1286	]
1287	);
1288
1289	$this->add_control(
1290	'eael_flipbox_back_content_color',
1291	[
1292	'label' => esc_html__('Color', 'essential-addons-for-elementor-lite'),
1293	'type' => Controls_Manager::COLOR,
1294	'default' => '#fff',
1295	'selectors' => [
1296	'{{WRAPPER}} .eael-elements-flip-box-rear-container .eael-elements-flip-box-content' => 'color: {{VALUE}};',
1297	],
1298	]
1299	);
1300
1301	$this->add_group_control(
1302	Group_Control_Typography::get_type(),
1303	[
1304	'name' => 'eael_flipbox_back_content_typography',
1305	'selector' => '{{WRAPPER}} .eael-elements-flip-box-rear-container .eael-elements-flip-box-content',
1306	]
1307	);
1308
1309	$this->end_controls_tab();
1310	$this->end_controls_tabs();
1311
1312	$this->end_controls_section();
1313
1314	/**
1315	* -------------------------------------------
1316	* Tab Style (Flip Box Button Style)
1317	* -------------------------------------------
1318	*/
1319	$this->start_controls_section(
1320	'eael_section_flipbox_button_style_settings',
1321	[
1322	'label' => esc_html__('Button Style', 'essential-addons-for-elementor-lite'),
1323	'tab' => Controls_Manager::TAB_STYLE,
1324	'condition' => [
1325	'flipbox_link_type' => 'button',
1326	'eael_flipbox_back_content_type' => 'content',
1327	],
1328	]
1329	);
1330
1331	$this->start_controls_tabs('flipbox_button_style_settings');
1332
1333	$this->start_controls_tab(
1334	'flipbox_button_normal_style',
1335	[
1336	'label' => __('Normal', 'essential-addons-for-elementor-lite'),
1337	]
1338	);
1339	$this->add_responsive_control(
1340	'eael_flipbox_button_margin',
1341	[
1342	'label' => esc_html__('Margin', 'essential-addons-for-elementor-lite'),
1343	'type' => Controls_Manager::DIMENSIONS,
1344	'size_units' => ['px', 'em'],
1345	'selectors' => [
1346	'{{WRAPPER}} .eael-elements-flip-box-container .flipbox-button' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1347	],
1348	]
1349	);
1350
1351	$this->add_responsive_control(
1352	'eael_flipbox_button_padding',
1353	[
1354	'label' => esc_html__('Padding', 'essential-addons-for-elementor-lite'),
1355	'type' => Controls_Manager::DIMENSIONS,
1356	'size_units' => ['px', 'em'],
1357	'selectors' => [
1358	'{{WRAPPER}} .eael-elements-flip-box-container .flipbox-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1359	],
1360	]
1361	);
1362
1363	$this->add_control(
1364	'eael_flipbox_button_color',
1365	[
1366	'label' => esc_html__('Color', 'essential-addons-for-elementor-lite'),
1367	'type' => Controls_Manager::COLOR,
1368	'default' => '#ffffff',
1369	'selectors' => [
1370	'{{WRAPPER}} .eael-elements-flip-box-container .flipbox-button, {{WRAPPER}} .eael-elements-flip-box-container .flipbox-button .ea-flipbox-icon' => 'color: {{VALUE}};',
1371	'{{WRAPPER}} .eael-elements-flip-box-container .flipbox-button .ea-flipbox-icon svg' => 'color: {{VALUE}}; fill: {{VALUE}}',
1372	],
1373	]
1374	);
1375
1376	$this->add_control(
1377	'eael_flipbox_button_bg_color',
1378	[
1379	'label' => esc_html__('Background', 'essential-addons-for-elementor-lite'),
1380	'type' => Controls_Manager::COLOR,
1381	'default' => '#7048ff',
1382	'selectors' => [
1383	'{{WRAPPER}} .eael-elements-flip-box-container .flipbox-button' => 'background: {{VALUE}};',
1384	],
1385	]
1386	);
1387
1388	$this->add_control(
1389	'eael_flipbox_button_border_radius',
1390	[
1391	'label' => esc_html__('Border Radius', 'essential-addons-for-elementor-lite'),
1392	'type' => Controls_Manager::SLIDER,
1393	'size_units' => ['px'],
1394	'range' => [
1395	'px' => [
1396	'min' => 0,
1397	'step' => 1,
1398	'max' => 100,
1399	],
1400	],
1401	'selectors' => [
1402	'{{WRAPPER}} .eael-elements-flip-box-container .flipbox-button' => 'border-radius: {{SIZE}}{{UNIT}};',
1403	],
1404	]
1405	);
1406
1407	$this->add_group_control(
1408	Group_Control_Typography::get_type(),
1409	[
1410	'name' => 'eael_flipbox_button_typography',
1411	'selector' => '{{WRAPPER}} .eael-elements-flip-box-container .flipbox-button',
1412	]
1413	);
1414	$this->end_controls_tab();
1415
1416	$this->start_controls_tab(
1417	'flipbox_button_hover_style',
1418	[
1419	'label' => __('Hover', 'essential-addons-for-elementor-lite'),
1420	]
1421	);
1422	$this->add_control(
1423	'eael_flipbox_button_hover_color',
1424	[
1425	'label' => esc_html__('Color', 'essential-addons-for-elementor-lite'),
1426	'type' => Controls_Manager::COLOR,
1427	'default' => '#ffffff',
1428	'selectors' => [
1429	'{{WRAPPER}} .eael-elements-flip-box-container .flipbox-button:hover' => 'color: {{VALUE}};',
1430	'{{WRAPPER}} .eael-elements-flip-box-container .flipbox-button:hover .ea-flipbox-icon' => 'color: {{VALUE}};',
1431	'{{WRAPPER}} .eael-elements-flip-box-container .flipbox-button:hover .ea-flipbox-icon svg' => 'color: {{VALUE}}; fill: {{VALUE}};',
1432	],
1433	]
1434	);
1435
1436	$this->add_control(
1437	'eael_flipbox_button_hover_bg_color',
1438	[
1439	'label' => esc_html__('Background', 'essential-addons-for-elementor-lite'),
1440	'type' => Controls_Manager::COLOR,
1441	'default' => '#000000',
1442	'selectors' => [
1443	'{{WRAPPER}} .eael-elements-flip-box-container .flipbox-button:hover' => 'background: {{VALUE}};',
1444	],
1445	]
1446	);
1447	$this->end_controls_tab();
1448
1449	$this->end_controls_tabs();
1450
1451	$this->end_controls_section();
1452	}
1453
1454	protected function render()
1455	{
1456
1457	$settings = $this->get_settings_for_display();
1458	$flipbox_image = $this->get_settings('eael_flipbox_image');
1459	$flipbox_image_url = Group_Control_Image_Size::get_attachment_image_src($flipbox_image['id'], 'thumbnail', $settings);
1460
1461	if (empty($flipbox_image_url) && !empty($flipbox_image['url'])) {
1462	$flipbox_image_url = $flipbox_image['url'];
1463	}
1464
1465	$flipbox_if_html_tag = 'div';
1466	$flipbox_if_html_title_tag = Helper::eael_validate_html_tag($settings['eael_flipbox_back_title_tag']);
1467	$this->add_render_attribute('flipbox-container', 'class', 'eael-elements-flip-box-flip-card');
1468	$this->add_render_attribute('flipbox-title-container', 'class', 'eael-elements-flip-box-heading');
1469
1470
1471	if ($settings['flipbox_link_type'] != 'none') {
1472	if (!empty($settings['flipbox_link']['url'])) {
1473	if ($settings['flipbox_link_type'] == 'box') {
1474	$flipbox_if_html_tag = 'a';
1475
1476	$this->add_link_attributes( 'flipbox-container', $settings['flipbox_link'] );
1477	} elseif ($settings['flipbox_link_type'] == 'title') {
1478	$flipbox_if_html_title_tag = 'a';
1479
1480	$this->add_render_attribute(
1481	'flipbox-title-container',
1482	[
1483	'class' => 'flipbox-linked-title',
1484	]
1485	);
1486
1487	$this->add_link_attributes( 'flipbox-title-container', $settings['flipbox_link'] );
1488	} elseif ($settings['flipbox_link_type'] == 'button') {
1489	$this->add_render_attribute(
1490	'flipbox-button-container',
1491	[
1492	'class' => 'flipbox-button',
1493	]
1494	);
1495
1496	$this->add_link_attributes( 'flipbox-button-container', $settings['flipbox_link'] );
1497	}
1498	}
1499	}
1500
1501	$flipbox_image_back = $this->get_settings('eael_flipbox_image_back');
1502	$flipbox_back_image_url = Group_Control_Image_Size::get_attachment_image_src($flipbox_image_back['id'], 'thumbnail_back', $settings);
1503	$flipbox_back_image_url = empty($flipbox_back_image_url) ? $flipbox_back_image_url : $flipbox_back_image_url;
1504	if ('img' == $settings['eael_flipbox_img_or_icon_back']) {
1505	$this->add_render_attribute(
1506	'flipbox-back-icon-image-container',
1507	[
1508	'src' => $flipbox_back_image_url,
1509	'alt' => esc_attr(get_post_meta($flipbox_image_back['id'], '_wp_attachment_image_alt', true)),
1510	]
1511	);
1512	}
1513
1514	$this->add_render_attribute(
1515	'eael_flipbox_main_wrap',
1516	[
1517	'class' => [
1518	'eael-elements-flip-box-container',
1519	'eael-animate-flip',
1520	'eael-' . esc_attr($settings['eael_flipbox_type']),
1521	'eael-' . esc_attr($settings['eael_flipbox_front_content_type']),
1522	],
1523	]
1524	);
1525
1526	?>
1527
1528	<div <?php echo $this->get_render_attribute_string('eael_flipbox_main_wrap'); ?>>
1529
1530	<<?php echo $flipbox_if_html_tag, ' ', $this->get_render_attribute_string('flipbox-container'); ?>>
1531	<div class="eael-elements-flip-box-front-container">
1532
1533	<?php
1534	if ( $settings['eael_flipbox_front_content_type'] == 'template' ) {
1535	if ( !empty( $settings['eael_flipbox_front_templates'] ) ) {
1536	echo Plugin::$instance->frontend->get_builder_content($settings['eael_flipbox_front_templates'], true);
1537	}
1538	} else { ?>
1539
1540	<div class="eael-elements-slider-display-table">
1541	<div class="eael-elements-flip-box-vertical-align">
1542	<div class="eael-elements-flip-box-padding">
1543	<div class="eael-elements-flip-box-icon-image">
1544	<?php if ('icon' === $settings['eael_flipbox_img_or_icon']) : ?>
1545	<?php $this->render_icon($settings); ?>
1546	<?php elseif ('img' === $settings['eael_flipbox_img_or_icon']) : ?>
1547	<img class="eael-flipbox-image-as-icon" src="<?php echo esc_url($flipbox_image_url); ?>" alt="<?php echo esc_attr(get_post_meta($flipbox_image['id'], '_wp_attachment_image_alt', true)); ?>">
1548	<?php endif; ?>
1549	</div>
1550	<<?php echo Helper::eael_validate_html_tag($settings['eael_flipbox_front_title_tag']); ?> class="eael-elements-flip-box-heading"><?php echo esc_html__($settings['eael_flipbox_front_title'], 'essential-addons-for-elementor-lite'); ?></<?php echo Helper::eael_validate_html_tag($settings['eael_flipbox_front_title_tag']); ?>>
1551	<div class="eael-elements-flip-box-content">
1552	<p><?php echo __($settings['eael_flipbox_front_text'], 'essential-addons-for-elementor-lite'); ?></p>
1553	</div>
1554	</div>
1555	</div>
1556	</div>
1557	<?php } ?>
1558	</div>
1559
1560	<div class="eael-elements-flip-box-rear-container">
1561
1562	<?php
1563	if ( $settings['eael_flipbox_back_content_type'] == 'template' ) {
1564	if ( !empty( $settings['eael_flipbox_back_templates'] ) ) {
1565	echo Plugin::$instance->frontend->get_builder_content($settings['eael_flipbox_back_templates'], true);
1566	}
1567	} else { ?>
1568	<div class="eael-elements-slider-display-table">
1569	<div class="eael-elements-flip-box-vertical-align">
1570	<div class="eael-elements-flip-box-padding">
1571	<?php if ('none' != $settings['eael_flipbox_img_or_icon_back']) { ?>
1572	<div class="eael-elements-flip-box-icon-image">
1573	<?php if ('img' == $settings['eael_flipbox_img_or_icon_back']) { ?>
1574	<img class="eael-flipbox-image-as-icon" <?php $this->print_render_attribute_string('flipbox-back-icon-image-container'); ?>>
1575	<?php } elseif ('icon' == $settings['eael_flipbox_img_or_icon_back']) {
1576	$this->render_icon($settings, 'back');
1577	} ?>
1578	</div>
1579	<?php } ?>
1580
1581	<<?php echo $flipbox_if_html_title_tag, ' ', $this->get_render_attribute_string('flipbox-title-container'); ?>><?php echo esc_html__($settings['eael_flipbox_back_title'], 'essential-addons-for-elementor-lite'); ?></<?php echo $flipbox_if_html_title_tag; ?>>
1582	<div class="eael-elements-flip-box-content">
1583	<p><?php echo __($settings['eael_flipbox_back_text'], 'essential-addons-for-elementor-lite'); ?></p>
1584	</div>
1585
1586	<?php if ($settings['flipbox_link_type'] == 'button' && !empty($settings['flipbox_button_text'])) : ?>
1587	<a <?php echo $this->get_render_attribute_string('flipbox-button-container'); ?>>
1588	<?php if ('before' == $settings['button_icon_position']) {
1589	$this->render_icon($settings, 'button');
1590	} ?>
1591	<?php echo Helper::eael_wp_kses($settings['flipbox_button_text']); ?>
1592	<?php if ('after' == $settings['button_icon_position']) {
1593	$this->render_icon($settings, 'button');
1594	} ?>
1595	</a>
1596	<?php endif; ?>
1597	</div>
1598	</div>
1599	</div>
1600	<?php } ?>
1601	</div>
1602	</<?php echo $flipbox_if_html_tag; ?>>
1603	</div>
1604
1605	<?php
1606	}
1607
1608	protected function render_icon($settings, $icon_location = 'front')
1609	{
1610	$new_icon_key = $old_icon_key = '';
1611	switch ($icon_location){
1612	case 'front':
1613	$new_icon_key = 'eael_flipbox_icon_new';
1614	$old_icon_key = 'eael_flipbox_icon';
1615	break;
1616	case 'back':
1617	$new_icon_key = 'eael_flipbox_icon_back_new';
1618	$old_icon_key = 'eael_flipbox_icon_back';
1619	break;
1620	case 'button':
1621	$new_icon_key = 'button_icon_new';
1622	$old_icon_key = 'button_icon';
1623	break;
1624	}
1625
1626	$is_migrated = isset($settings['__fa4_migrated'][$new_icon_key]);
1627	$is_new_icon = empty($settings[$old_icon_key]);
1628	if ($is_new_icon \|\| $is_migrated) {
1629	if ( 'svg' === $settings[$new_icon_key]['library'] ) {
1630	echo "<span class='ea-flipbox-icon eael-flipbox-svg-icon eaa-svg'>";
1631	Icons_Manager::render_icon( $settings[$new_icon_key] );
1632	echo '</span>';
1633	}else{
1634	Icons_Manager::render_icon( $settings[$new_icon_key], [ 'aria-hidden' => 'true', 'class' => "ea-flipbox-icon" ] );
1635	}
1636	?>
1637	<?php } else { ?>
1638	<i class="<?php echo esc_attr($settings[$old_icon_key]); ?> ea-flipbox-icon "></i>
1639	<?php }
1640	}
1641	}
1642