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

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

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

Adv_Accordion.php 2 years ago Adv_Tabs.php 2 years ago Advanced_Data_Table.php 2 years ago Better_Payment.php 4 years ago Betterdocs_Category_Box.php 2 years ago Betterdocs_Category_Grid.php 2 years ago Betterdocs_Search_Form.php 2 years ago Business_Reviews.php 2 years ago Caldera_Forms.php 2 years ago Career_Page.php 4 years ago Contact_Form_7.php 2 years ago Content_Ticker.php 2 years ago Countdown.php 2 years ago Creative_Button.php 2 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 2 years ago Data_Table.php 2 years ago Dual_Color_Header.php 2 years ago EmbedPress.php 4 years ago Event_Calendar.php 2 years ago Facebook_Feed.php 2 years ago Fancy_Text.php 2 years ago Feature_List.php 2 years ago Filterable_Gallery.php 2 years ago Flip_Box.php 2 years ago FluentForm.php 2 years ago Formstack.php 2 years ago GravityForms.php 2 years ago Image_Accordion.php 2 years ago Info_Box.php 2 years ago Interactive_Circle.php 2 years ago Login_Register.php 2 years ago NFT_Gallery.php 2 years ago NinjaForms.php 2 years ago Post_Grid.php 2 years ago Post_Timeline.php 2 years ago Pricing_Table.php 2 years ago Product_Grid.php 2 years ago Progress_Bar.php 2 years ago SVG_Draw.php 3 years ago Simple_Menu.php 2 years ago Sticky_Video.php 2 years ago Team_Member.php 2 years ago Testimonial.php 2 years ago Tooltip.php 2 years ago Twitter_Feed.php 2 years ago TypeForm.php 2 years ago WeForms.php 2 years ago Woo_Cart.php 2 years ago Woo_Checkout.php 2 years ago Woo_Product_Carousel.php 2 years ago Woo_Product_Compare.php 4 years ago Woo_Product_Gallery.php 2 years ago Woocommerce_Review.php 4 years ago WpForms.php 2 years ago index.php 3 years ago

Flip_Box.php

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