uicore-elements / includes / widgets / icon-box.php

icon-box.php in UiCore Elements – Free widgets and templates for Elementor 1.2.0, at includes/widgets/icon-box.php

2,296 lines 60.1 KB

Raw Download Zip

1	<?php
2	namespace UiCoreElements;
3
4	use Elementor\Controls_Manager;
5	use Elementor\Group_Control_Border;
6	use Elementor\Group_Control_Typography;
7	use Elementor\Group_Control_Box_Shadow;
8	use Elementor\Group_Control_Background;
9	use Elementor\Group_Control_Css_Filter;
10	use Elementor\Icons_Manager;
11	use Elementor\Utils;
12	use UiCoreElements\UiCoreWidget;
13
14	defined('ABSPATH') \|\| exit();
15
16	/**
17	* Icon Box
18	*
19	* @author Lucas Marini Falbo <lucas@uicore.co>
20	* @since 1.0.0
21	*/
22
23	class IconBox extends UiCoreWidget
24	{
25
26	public function get_name()
27	{
28	return 'uicore-icon-box';
29	}
30	public function get_title()
31	{
32	return __('Icon Box', 'uicore-elements');
33	}
34	public function get_icon()
35	{
36	return 'eicon-icon-box ui-e-widget';
37	}
38	public function get_categories()
39	{
40	return ['uicore'];
41	}
42	public function get_keywords()
43	{
44	return ['icon', 'features', 'info', 'box'];
45	}
46	public function get_styles()
47	{
48	return ['icon-box'];
49	}
50	public function get_scripts()
51	{
52	return [
53	'icon-box' => [
54	'conditions' => [
55	'relation' => 'or',
56	'terms' => [
57	[
58	'name' => 'description_animation',
59	'operator' => '==',
60	'value' => 'ui-e-animation-description-show',
61	],
62	[
63	'name' => 'readmore_animation',
64	'operator' => '==',
65	'value' => 'ui-e-animation-rm-show',
66	],
67	],
68	],
69	]
70	];
71	}
72	protected function register_controls()
73	{
74
75	$this->start_controls_section(
76	'section_content_icon_box',
77	[
78	'label' => esc_html__('Icon Box', 'uicore-elements'),
79	]
80	);
81
82	$this->add_control(
83	'icon_type',
84	[
85	'label' => esc_html__('Icon Type', 'uicore-elements'),
86	'type' => Controls_Manager::CHOOSE,
87	'toggle' => false,
88	'default' => 'icon',
89	'render_type' => 'template',
90	'options' => [
91	'none' => [
92	'title' => esc_html__('None', 'uicore-elements'),
93	'icon' => 'eicon-editor-close'
94	],
95	'icon' => [
96	'title' => esc_html__('Icon', 'uicore-elements'),
97	'icon' => 'fas fa-star'
98	],
99	'image' => [
100	'title' => esc_html__('Image', 'uicore-elements'),
101	'icon' => 'far fa-image'
102	]
103	]
104	]
105	);
106
107	$this->add_control(
108	'selected_icon',
109	[
110	'label' => esc_html__('Icon', 'uicore-elements'),
111	'type' => Controls_Manager::ICONS,
112	'default' => [
113	'value' => 'fas fa-star',
114	'library' => 'fa-solid',
115	],
116	'render_type' => 'template',
117	'condition' => [
118	'icon_type' => 'icon',
119	],
120	]
121	);
122
123	$this->add_control(
124	'image',
125	[
126	'label' => esc_html__('Image Icon', 'uicore-elements'),
127	'type' => Controls_Manager::MEDIA,
128	'render_type' => 'template',
129	'default' => [
130	'url' => Utils::get_placeholder_image_src(),
131	],
132	'condition' => [
133	'icon_type' => 'image'
134	]
135	]
136	);
137
138	$this->add_control(
139	'title_text',
140	[
141	'label' => esc_html__('Title', 'uicore-elements'),
142	'type' => Controls_Manager::TEXT,
143	'dynamic' => [
144	'active' => true,
145	],
146	'default' => esc_html__('Icon Box Title', 'uicore-elements'),
147	'placeholder' => esc_html__('Enter your title', 'uicore-elements'),
148	'label_block' => true,
149	]
150	);
151
152	$this->add_control(
153	'title_link_url',
154	[
155	'label' => esc_html__('Title Link URL', 'uicore-elements'),
156	'type' => Controls_Manager::URL,
157	'dynamic' => ['active' => true],
158	]
159	);
160
161	$this->add_control(
162	'sub_title_text',
163	[
164	'label' => esc_html__('Subtitle', 'uicore-elements'),
165	'type' => Controls_Manager::TEXT,
166	'dynamic' => [
167	'active' => true,
168	],
169	'default' => esc_html__('Icon Box Subtitle', 'uicore-elements'),
170	'placeholder' => esc_html__('Enter your sub title', 'uicore-elements'),
171	'label_block' => true,
172	]
173	);
174
175	$this->add_control(
176	'description_text',
177	[
178	'label' => esc_html__('Description', 'uicore-elements'),
179	'type' => Controls_Manager::WYSIWYG,
180	'dynamic' => [
181	'active' => true,
182	],
183	'default' => esc_html__("This serves as the explanatory text for the icon box. Use it to provide additional context or details that elaborate on the title's content.", "uicore-elements"),
184	'placeholder' => esc_html__('Enter your description', 'uicore-elements'),
185	'rows' => 10,
186	]
187	);
188
189	$this->add_control(
190	'position',
191	[
192	'label' => esc_html__('Icon Position', 'uicore-elements'),
193	'type' => Controls_Manager::CHOOSE,
194	'separator' => 'before',
195	'default' => 'top',
196	'options' => [
197	'left' => [
198	'title' => esc_html__('Left', 'uicore-elements'),
199	'icon' => 'eicon-h-align-left',
200	],
201	'top' => [
202	'title' => esc_html__('Top', 'uicore-elements'),
203	'icon' => 'eicon-v-align-top',
204	],
205	'right' => [
206	'title' => esc_html__('Right', 'uicore-elements'),
207	'icon' => 'eicon-h-align-right',
208	],
209	'bottom' => [
210	'title' => esc_html__('Bottom', 'uicore-elements'),
211	'icon' => 'eicon-v-align-bottom',
212	],
213	],
214	'frontend_available' => true,
215	'prefix_class' => 'ui-e-',
216	'toggle' => false,
217	'render_type' => 'template',
218	'conditions' => [
219	'relation' => 'or',
220	'terms' => [
221	[
222	'name' => 'selected_icon[value]',
223	'operator' => '!=',
224	'value' => ''
225	],
226	[
227	'name' => 'image[url]',
228	'operator' => '!=',
229	'value' => ''
230	],
231	]
232	]
233	]
234	);
235
236	$this->add_control(
237	'icon_inline',
238	[
239	'label' => esc_html__('Icon Inline', 'uicore-elements'),
240	'type' => Controls_Manager::SWITCHER,
241	'prefix_class' => 'ui-e-inline-',
242	'render_type' => 'template',
243	'frontend_available' => true,
244	'condition' => [
245	'position' => ['left', 'right']
246	],
247	]
248	);
249
250	$this->add_responsive_control(
251	'icon_vertical_alignment',
252	[
253	'label' => esc_html__('Icon Vertical Alignment', 'uicore-elements'),
254	'type' => Controls_Manager::CHOOSE,
255	'options' => [
256	'start' => [
257	'title' => esc_html__('Top', 'uicore-elements'),
258	'icon' => 'eicon-v-align-top',
259	],
260	'center' => [
261	'title' => esc_html__('Middle', 'uicore-elements'),
262	'icon' => 'eicon-v-align-middle',
263	],
264	'end' => [
265	'title' => esc_html__('Bottom', 'uicore-elements'),
266	'icon' => 'eicon-v-align-bottom',
267	],
268	],
269	'default' => 'start',
270	'toggle' => false,
271	'selectors' => [
272	'{{WRAPPER}} .ui-e-flex-wrp' => 'align-items: {{VALUE}};',
273	],
274	'condition' => [
275	'position' => ['left', 'right'],
276	'icon_inline' => '',
277	],
278	]
279	);
280
281	$this->add_responsive_control(
282	'text_align',
283	[
284	'label' => esc_html__('Alignment', 'uicore-elements'),
285	'type' => Controls_Manager::CHOOSE,
286	'options' => [
287	'left' => [
288	'title' => esc_html__('Left', 'uicore-elements'),
289	'icon' => 'eicon-text-align-left',
290	],
291	'center' => [
292	'title' => esc_html__('Center', 'uicore-elements'),
293	'icon' => 'eicon-text-align-center',
294	],
295	'right' => [
296	'title' => esc_html__('Right', 'uicore-elements'),
297	'icon' => 'eicon-text-align-right',
298	],
299	'justify' => [
300	'title' => esc_html__('Justified', 'uicore-elements'),
301	'icon' => 'eicon-text-align-justify',
302	],
303	],
304	'default' => 'center',
305	'tablet_default' => 'center',
306	'mobile_default' => 'center',
307	'toggle' => false,
308	'prefix_class' => 'ui-e-align%s-',
309	'selectors' => [
310	'{{WRAPPER}}' => '--ui-e-ico-box-text-align: {{VALUE}};',
311	],
312	]
313	);
314
315	// Responsible for using 'text_align' value as css property instead of css value on the readmore, if animated and left/right positioned without inline.
316	// In this case, the readmore with show animation is absolute with margin:auto, text-align stops working.
317	$this->add_control(
318	'text_align_readmore',
319	[
320	'label' => esc_html__( 'Readmore Animation Alignment', 'uicore-elements' ),
321	'type' => \Elementor\Controls_Manager::HIDDEN,
322	'default' => '0',
323	'condition' => [
324	'text_align' => ['left', 'right'],
325	'icon_inline' => '',
326	'readmore_animation' => 'ui-e-animation-rm-show',
327	],
328	'selectors' => [
329	'{{WRAPPER}} .ui-e-readmore' => 'margin-{{text_align.VALUE}}: {{VALUE}} !important;',
330	],
331	]
332	);
333
334	$this->end_controls_section();
335
336	$this->start_controls_section(
337	'section_content_readmore',
338	[
339	'label' => esc_html__('Read More', 'uicore-elements'),
340	'condition' => [
341	'readmore' => 'yes',
342	],
343	]
344	);
345
346	$this->add_control(
347	'readmore_text',
348	[
349	'label' => esc_html__('Text', 'uicore-elements'),
350	'type' => Controls_Manager::TEXT,
351	'dynamic' => ['active' => true],
352	'default' => esc_html__('Read More', 'uicore-elements'),
353	'placeholder' => esc_html__('Read More', 'uicore-elements'),
354	]
355	);
356
357	$this->add_control(
358	'readmore_link',
359	[
360	'label' => esc_html__('Link to', 'uicore-elements'),
361	'type' => Controls_Manager::URL,
362	'dynamic' => [
363	'active' => true,
364	],
365	'placeholder' => esc_html__('https://your-link.com', 'uicore-elements'),
366	'default' => [
367	'url' => '#',
368	],
369	'condition' => [
370	'readmore' => 'yes',
371	]
372	]
373	);
374
375	// TODO: disabled due to a security complain from Wordfence team in name of Wordpress.
376	// $this->add_control(
377	// 'onclick',
378	// [
379	// 'label' => esc_html__('OnClick', 'uicore-elements'),
380	// 'type' => Controls_Manager::SWITCHER,
381	// 'condition' => [
382	// 'readmore' => 'yes',
383	// ]
384	// ]
385	// );
386
387	// $this->add_control(
388	// 'onclick_event',
389	// [
390	// 'label' => esc_html__('OnClick Event', 'uicore-elements'),
391	// 'type' => Controls_Manager::TEXT,
392	// 'placeholder' => 'myFunction()',
393	// 'condition' => [
394	// 'readmore' => 'yes',
395	// 'onclick' => 'yes'
396	// ]
397	// ]
398	// );
399
400	$this->add_control(
401	'readmore_icon',
402	[
403	'label' => esc_html__('Icon', 'uicore-elements'),
404	'type' => Controls_Manager::ICONS,
405	'condition' => [
406	'readmore' => 'yes'
407	],
408	'label_block' => false,
409	'skin' => 'inline'
410	]
411	);
412
413	$this->add_control(
414	'readmore_icon_align',
415	[
416	'label' => esc_html__('Icon Position', 'uicore-elements'),
417	'type' => Controls_Manager::SELECT,
418	'default' => 'right',
419	'options' => [
420	'left' => esc_html__('Left', 'uicore-elements'),
421	'right' => esc_html__('Right', 'uicore-elements'),
422	],
423	'selectors_dictionary' => [
424	'left' => 'flex-direction: row-reverse;',
425	'right' => 'flex-direction: row;',
426	],
427	'selectors' => [
428	'{{WRAPPER}} .ui-e-readmore' => '{{VALUE}};',
429	],
430	'condition' => [
431	'readmore_icon[value]!' => '',
432	],
433	]
434	);
435
436	$this->add_control(
437	'readmore_icon_indent',
438	[
439	'label' => esc_html__('Icon Spacing', 'uicore-elements'),
440	'type' => Controls_Manager::SLIDER,
441	'range' => [
442	'px' => [
443	'max' => 100,
444	],
445	],
446	'default' => [
447	'size' => 8,
448	],
449	'condition' => [
450	'readmore_icon[value]!' => '',
451	'readmore_text!' => '',
452	'text_align!' => 'justify'
453	],
454	'selectors' => [
455	'{{WRAPPER}} .ui-e-readmore' => 'gap: {{SIZE}}px;',
456	],
457	]
458	);
459
460	$this->add_responsive_control(
461	'readmore_horizontal_offset',
462	[
463	'label' => esc_html__('Horizontal Offset', 'uicore-elements'),
464	'type' => Controls_Manager::SLIDER,
465	'default' => [
466	'size' => 0,
467	],
468	'tablet_default' => [
469	'size' => 0,
470	],
471	'mobile_default' => [
472	'size' => 0,
473	],
474	'range' => [
475	'px' => [
476	'min' => -200,
477	'max' => 200,
478	],
479	],
480	'condition' => [
481	'readmore_on_hover' => 'yes',
482	],
483	]
484	);
485
486	$this->add_responsive_control(
487	'readmore_vertical_offset',
488	[
489	'label' => esc_html__('Vertical Offset', 'uicore-elements'),
490	'type' => Controls_Manager::SLIDER,
491	'default' => [
492	'size' => 0,
493	],
494	'tablet_default' => [
495	'size' => 0,
496	],
497	'mobile_default' => [
498	'size' => 0,
499	],
500	'range' => [
501	'px' => [
502	'min' => -200,
503	'max' => 200,
504	],
505	],
506	'selectors' => [
507	'{{WRAPPER}} .ui-e-readmore' => 'translate: {{readmore_horizontal_offset.SIZE}}px {{SIZE}}px;'
508	],
509	'condition' => [
510	'readmore_on_hover' => 'yes',
511	],
512	]
513	);
514
515	$this->add_control(
516	'button_css_id',
517	[
518	'label' => esc_html__('Button ID', 'uicore-elements'),
519	'type' => Controls_Manager::TEXT,
520	'dynamic' => [
521	'active' => true,
522	],
523	'default' => '',
524	'title' => esc_html__('Add your custom id WITHOUT hash (#) key. e.g: my-id', 'uicore-elements'),
525	'separator' => 'before',
526	]
527	);
528
529	$this->end_controls_section();
530
531	$this->start_controls_section(
532	'section_content_badge',
533	[
534	'label' => esc_html__('Badge', 'uicore-elements'),
535	'condition' => [
536	'badge' => 'yes',
537	],
538	]
539	);
540
541	$this->add_control(
542	'badge_text',
543	[
544	'label' => esc_html__('Badge Text', 'uicore-elements'),
545	'type' => Controls_Manager::TEXT,
546	'default' => 'POPULAR',
547	'placeholder' => 'Type Badge Title',
548	'dynamic' => [
549	'active' => true,
550	],
551	]
552	);
553
554	$this->end_controls_section();
555
556	$this->start_controls_section(
557	'section_content_additional',
558	[
559	'label' => esc_html__('Additional Options', 'uicore-elements'),
560	]
561	);
562
563	$this->add_control(
564	'title_size',
565	[
566	'label' => esc_html__('Title HTML Tag', 'uicore-elements'),
567	'type' => Controls_Manager::SELECT,
568	'default' => 'h4',
569	'options' => Helper::get_title_tags(),
570	]
571	);
572
573	$this->add_control(
574	'readmore',
575	[
576	'label' => esc_html__('Read More Button', 'uicore-elements'),
577	'type' => Controls_Manager::SWITCHER,
578	'separator' => 'before',
579	'frontend_available' => true,
580	'default' => 'yes',
581	]
582	);
583
584	$this->add_control(
585	'badge',
586	[
587	'label' => esc_html__('Badge', 'uicore-elements'),
588	'type' => Controls_Manager::SWITCHER,
589	]
590	);
591
592	$this->add_control(
593	'global_link',
594	[
595	'label' => esc_html__('Global Link', 'uicore-elements'),
596	'type' => Controls_Manager::SWITCHER,
597	]
598	);
599
600	$this->add_control(
601	'global_link_url',
602	[
603	'label' => esc_html__('Global Link URL', 'uicore-elements'),
604	'type' => Controls_Manager::URL,
605	'dynamic' => ['active' => true],
606	'placeholder' => 'http://your-link.com',
607	'condition' => [
608	'global_link' => 'yes'
609	]
610	]
611	);
612
613	$this->end_controls_section();
614
615	$this->start_controls_section(
616	'section_style_icon_box',
617	[
618	'label' => esc_html__('Icon/Image', 'uicore-elements'),
619	'tab' => Controls_Manager::TAB_STYLE,
620	'condition' => [
621	'icon_type!' => 'none',
622	],
623	]
624	);
625
626	$this->start_controls_tabs('icon_colors');
627
628	$this->start_controls_tab(
629	'icon_colors_normal',
630	[
631	'label' => esc_html__('Normal', 'uicore-elements'),
632	]
633	);
634
635	$this->add_control(
636	'icon_color',
637	[
638	'label' => esc_html__('Icon Color', 'uicore-elements'),
639	'type' => Controls_Manager::COLOR,
640	'selectors' => [
641	'{{WRAPPER}} .ui-e-icon-wrp i' => 'color: {{VALUE}};',
642	'{{WRAPPER}} .ui-e-icon-wrp svg' => 'fill: {{VALUE}};',
643	],
644	'condition' => [
645	'icon_type!' => 'image',
646	],
647	]
648	);
649
650	$this->add_control(
651	'show_svg_icon_color',
652	[
653	'label' => esc_html__('Svg Icon Color', 'uicore-elements'),
654	'type' => Controls_Manager::SWITCHER,
655	'condition' => [
656	'icon_type!' => 'image',
657	],
658	]
659	);
660
661	$this->add_control(
662	'svg_icon_fill_color',
663	[
664	'label' => esc_html__('Fill Color', 'uicore-elements'),
665	'type' => Controls_Manager::COLOR,
666	'selectors' => [
667	'{{WRAPPER}} .ui-e-icon-wrp svg, {{WRAPPER}} .ui-e-icon-wrp svg *' => 'fill: {{VALUE}};',
668	],
669	'condition' => [
670	'icon_type!' => 'image',
671	'show_svg_icon_color' => 'yes',
672	],
673	]
674	);
675
676	$this->add_control(
677	'svg_icon_stroke_color',
678	[
679	'label' => esc_html__('Stroke Color', 'uicore-elements'),
680	'type' => Controls_Manager::COLOR,
681	'selectors' => [
682	'{{WRAPPER}} .ui-e-icon-wrp svg, {{WRAPPER}} .ui-e-icon-wrp svg *' => 'stroke: {{VALUE}};',
683	],
684	'condition' => [
685	'icon_type!' => 'image',
686	'show_svg_icon_color' => 'yes',
687	],
688	]
689	);
690
691	$this->add_control(
692	'blur_effect',
693	[
694	'label' => esc_html__('Blur Filter', 'uicore-elements'),
695	'type' => Controls_Manager::SWITCHER,
696	]
697	);
698
699	$this->add_control(
700	'blur_level',
701	[
702	'label' => esc_html__('Blur Level', 'uicore-elements'),
703	'type' => Controls_Manager::SLIDER,
704	'range' => [
705	'px' => [
706	'min' => 0,
707	'step' => 1,
708	'max' => 50,
709	]
710	],
711	'default' => [
712	'size' => 5
713	],
714	'selectors' => [
715	'{{WRAPPER}} .ui-e-icon-wrp' => 'backdrop-filter: blur({{SIZE}}px); -webkit-backdrop-filter: blur({{SIZE}}px);'
716	],
717	'condition' => [
718	'blur_effect' => 'yes',
719	]
720	]
721	);
722
723	$this->add_group_control(
724	Group_Control_Background::get_type(),
725	[
726	'name' => 'icon_background',
727	'selector' => '{{WRAPPER}} .ui-e-icon-wrp',
728	]
729	);
730
731	$this->add_group_control(
732	Group_Control_Border::get_type(),
733	[
734	'name' => 'icon_border',
735	'placeholder' => '1px',
736	'default' => '1px',
737	'selector' => '{{WRAPPER}} .ui-e-icon-wrp'
738	]
739	);
740
741	$this->add_responsive_control(
742	'icon_radius',
743	[
744	'label' => esc_html__('Border Radius', 'uicore-elements'),
745	'type' => Controls_Manager::DIMENSIONS,
746	'size_units' => ['px', '%'],
747	'selectors' => [
748	'{{WRAPPER}} .ui-e-icon-wrp' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
749	],
750	'condition' => [
751	'icon_radius_advanced_show!' => 'yes',
752	],
753	]
754	);
755
756	$this->add_control(
757	'icon_radius_advanced_show',
758	[
759	'label' => esc_html__('Advanced Radius', 'uicore-elements'),
760	'type' => Controls_Manager::SWITCHER,''
761	]
762	);
763
764	$this->add_control(
765	'icon_radius_advanced',
766	[
767	'label' => esc_html__('Radius', 'uicore-elements'),
768	'description' => sprintf('Generate the advanced border radius on https://9elements.github.io/fancy-border-radius/', 'uicore-elements'),
769	'type' => Controls_Manager::TEXT,
770	'size_units' => ['px', '%'],
771	'default' => '75% 25% 43% 57% / 46% 29% 71% 54%',
772	'selectors' => [
773	'{{WRAPPER}} .ui-e-icon-wrp' => 'border-radius: {{VALUE}}; overflow: hidden;',
774	'{{WRAPPER}} .ui-e-icon-wrp img' => 'border-radius: {{VALUE}}; overflow: hidden;'
775	],
776	'condition' => [
777	'icon_radius_advanced_show' => 'yes',
778	],
779	]
780	);
781
782	$this->add_responsive_control(
783	'icon_padding',
784	[
785	'label' => esc_html__('Padding', 'uicore-elements'),
786	'type' => Controls_Manager::DIMENSIONS,
787	'size_units' => ['px', 'em', '%'],
788	'default' => [
789	'top' => 10,
790	'right' => 10,
791	'bottom' => 10,
792	'left' => 10,
793	'unit' => 'px',
794	'isLinked' => true,
795	],
796	'selectors' => [
797	'{{WRAPPER}} .ui-e-icon-wrp' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
798	]
799	]
800	);
801
802	$this->add_group_control(
803	Group_Control_Box_Shadow::get_type(),
804	[
805	'name' => 'icon_shadow',
806	'selector' => '{{WRAPPER}} .ui-e-icon-wrp'
807	]
808	);
809
810	$this->add_responsive_control(
811	'icon_space',
812	[
813	'label' => esc_html__('Spacing', 'uicore-elements'),
814	'type' => Controls_Manager::SLIDER,
815	'separator' => 'before',
816	'default' => [
817	'size' => 15,
818	],
819	'range' => [
820	'px' => [
821	'min' => 0,
822	'max' => 100,
823	],
824	],
825	'selectors' => [
826	'{{WRAPPER}}' => '--ui-e-ico-box-icon-spacing: {{SIZE}}{{UNIT}} !important;',
827	],
828	]
829	);
830
831	$this->add_control(
832	'image_fullwidth',
833	[
834	'label' => esc_html__('Image Fullwidth', 'uicore-elements'),
835	'type' => Controls_Manager::SWITCHER,
836	'selectors' => [
837	'{{WRAPPER}} .ui-e-icon-wrp' => 'width: 100%; box-sizing: border-box;
838	margin-left: calc(var(--ui-e-content-padding-left) * -1);
839	margin-right: calc(var(--ui-e-content-padding-right) * -1);
840	margin-top: calc(var(--ui-e-content-padding-top) *-1);',
841	],
842	'condition' => [
843	'icon_type' => 'image'
844	]
845	]
846	);
847
848	$this->add_responsive_control(
849	'icon_size',
850	[
851	'label' => esc_html__('Size', 'uicore-elements'),
852	'type' => Controls_Manager::SLIDER,
853	'size_units' => ['px', 'em', 'vh', 'vw'],
854	'range' => [
855	'px' => [
856	'min' => 6,
857	'max' => 300,
858	],
859	],
860	'default' => [
861	'unit' => 'px',
862	'size' => 42,
863	],
864	'selectors' => [
865	'{{WRAPPER}} .ui-e-icon-wrp' => '--ui-e-media-size: {{SIZE}}{{UNIT}};',
866	],
867	'condition' => [
868	'icon_type' => 'icon',
869	],
870	]
871	);
872
873	$this->add_responsive_control(
874	'image_size',
875	[
876	'label' => esc_html__('Size', 'uicore-elements'),
877	'type' => Controls_Manager::SLIDER,
878	'size_units' => ['px', 'em', 'vh', 'vw'],
879	'range' => [
880	'px' => [
881	'min' => 6,
882	'max' => 300,
883	],
884	],
885	'default' => [
886	'unit' => 'px',
887	'size' => 120,
888	],
889	'selectors' => [
890	'{{WRAPPER}} .ui-e-icon-wrp' => '--ui-e-media-size: {{SIZE}}{{UNIT}};',
891	],
892	'conditions' => [
893	'relation' => 'and',
894	'terms' => [
895	[
896	'name' => 'image_fullwidth',
897	'operator' => '==',
898	'value' => ''
899	],
900	[
901	'name' => 'icon_type',
902	'operator' => '==',
903	'value' => 'image'
904	],
905	]
906	]
907	]
908	);
909
910	$this->add_control(
911	'rotate',
912	[
913	'label' => esc_html__('Rotate', 'uicore-elements'),
914	'type' => Controls_Manager::SLIDER,
915	'default' => [
916	'size' => 0,
917	'unit' => 'deg',
918	],
919	'range' => [
920	'deg' => [
921	'max' => 360,
922	'min' => -360,
923	],
924	],
925	'selectors' => [
926	'{{WRAPPER}}' => '--ui-e-ico-box-icon-rotate: {{SIZE}}{{UNIT}};',
927	],
928	]
929	);
930
931	$this->add_control(
932	'icon_background_rotate',
933	[
934	'label' => esc_html__('Background Rotate', 'uicore-elements'),
935	'type' => Controls_Manager::SLIDER,
936	'default' => [
937	'size' => 0,
938	'unit' => 'deg',
939	],
940	'range' => [
941	'deg' => [
942	'max' => 360,
943	'min' => -360,
944	],
945	],
946	'selectors' => [
947	'{{WRAPPER}} .ui-e-icon-wrp' => '--ui-e-ico-box-icon-wrp-rotate: {{SIZE}}{{UNIT}};',
948	],
949	]
950	);
951
952	$this->add_responsive_control(
953	'icon_vertical_offset',
954	[
955	'label' => esc_html__('Icon Vertical Offset', 'uicore-elements'),
956	'type' => Controls_Manager::SLIDER,
957	'range' => [
958	'px' => [
959	'min' => -200,
960	'max' => 200,
961	],
962	],
963	'default' => [
964	'size' => 0,
965	],
966	'selectors' => [
967	'{{WRAPPER}} .ui-e-icon-wrp' => '--ui-e-ico-box-vertical-off: {{SIZE}}px'
968	],
969	]
970	);
971
972	$this->add_responsive_control(
973	'icon_horizontal_offset',
974	[
975	'label' => esc_html__('Icon Horizontal Offset', 'uicore-elements'),
976	'type' => Controls_Manager::SLIDER,
977	'range' => [
978	'px' => [
979	'min' => -200,
980	'max' => 200,
981	],
982	],
983	'default' => [
984	'size' => 0,
985	],
986	'selectors' => [
987	'{{WRAPPER}} .ui-e-icon-wrp' => '--ui-e-ico-box-horizontal-off: {{SIZE}}px'
988	],
989	]
990	);
991
992	$this->add_control(
993	'image_icon_heading',
994	[
995	'label' => esc_html__('Image Effect', 'uicore-elements'),
996	'type' => Controls_Manager::HEADING,
997	'separator' => 'before',
998	'condition' => [
999	'icon_type' => 'image',
1000	],
1001	]
1002	);
1003
1004	$this->add_group_control(
1005	Group_Control_Css_Filter::get_type(),
1006	[
1007	'name' => 'css_filters',
1008	'selector' => '{{WRAPPER}} .ui-e-ico-box img',
1009	'condition' => [
1010	'icon_type' => 'image',
1011	],
1012	]
1013	);
1014
1015	$this->add_control(
1016	'image_opacity',
1017	[
1018	'label' => esc_html__('Opacity', 'uicore-elements'),
1019	'type' => Controls_Manager::SLIDER,
1020	'range' => [
1021	'px' => [
1022	'max' => 1,
1023	'min' => 0.10,
1024	'step' => 0.01,
1025	],
1026	],
1027	'selectors' => [
1028	'{{WRAPPER}} .ui-e-ico-box img' => 'opacity: {{SIZE}};',
1029	],
1030	'condition' => [
1031	'icon_type' => 'image',
1032	],
1033	]
1034	);
1035
1036	$this->add_control(
1037	'background_hover_transition',
1038	[
1039	'label' => esc_html__('Transition Duration', 'uicore-elements'),
1040	'type' => Controls_Manager::SLIDER,
1041	'default' => [
1042	'size' => 0.3,
1043	],
1044	'range' => [
1045	'px' => [
1046	'max' => 3,
1047	'step' => 0.1,
1048	],
1049	],
1050	'selectors' => [
1051	'{{WRAPPER}} .ui-e-icon-wrp img' => 'transition-duration: {{SIZE}}s',
1052	'{{WRAPPER}}:hover .ui-e-icon-wrp img' => 'transform: ',
1053	],
1054	'condition' => [
1055	'icon_type' => 'image',
1056	],
1057	]
1058	);
1059
1060	$this->end_controls_tab();
1061
1062	$this->start_controls_tab(
1063	'icon_hover',
1064	[
1065	'label' => esc_html__('Hover', 'uicore-elements'),
1066	]
1067	);
1068
1069	$this->add_control(
1070	'icon_hover_color',
1071	[
1072	'label' => esc_html__('Icon Color', 'uicore-elements'),
1073	'type' => Controls_Manager::COLOR,
1074	'selectors' => [
1075	'{{WRAPPER}}:hover .ui-e-icon-wrp' => 'color: {{VALUE}};',
1076	'{{WRAPPER}}:hover .ui-e-icon-wrp i' => 'color: {{VALUE}};',
1077	'{{WRAPPER}}:hover .ui-e-icon-wrp svg' => 'fill: {{VALUE}};',
1078	],
1079	'condition' => [
1080	'icon_type!' => 'image',
1081	],
1082	]
1083	);
1084
1085	$this->add_control(
1086	'svg_icon_hover_fill_color',
1087	[
1088	'label' => esc_html__('Fill Color', 'uicore-elements'),
1089	'type' => Controls_Manager::COLOR,
1090	'selectors' => [
1091	'{{WRAPPER}}:hover .ui-e-icon-wrp svg, {{WRAPPER}}:hover .ui-e-icon-wrp svg *' => 'fill: {{VALUE}};',
1092	],
1093	'condition' => [
1094	'icon_type!' => 'image',
1095	'show_svg_icon_color' => 'yes',
1096	],
1097	]
1098	);
1099
1100	$this->add_control(
1101	'svg_icon_hover_stroke_color',
1102	[
1103	'label' => esc_html__('Stroke Color', 'uicore-elements'),
1104	'type' => Controls_Manager::COLOR,
1105	'selectors' => [
1106	'{{WRAPPER}}:hover .ui-e-icon-wrp svg, {{WRAPPER}}:hover .ui-e-icon-wrp svg *' => 'stroke: {{VALUE}};',
1107	],
1108	'condition' => [
1109	'icon_type!' => 'image',
1110	'show_svg_icon_color' => 'yes',
1111	],
1112	]
1113	);
1114
1115	$this->add_group_control(
1116	Group_Control_Background::get_type(),
1117	[
1118	'name' => 'icon_hover_background',
1119	'separator' => 'before',
1120	'selector' => '{{WRAPPER}}:hover .ui-e-icon-wrp',
1121	]
1122	);
1123
1124	$this->add_control(
1125	'icon_hover_border_color',
1126	[
1127	'label' => esc_html__('Border Color', 'uicore-elements'),
1128	'type' => Controls_Manager::COLOR,
1129	'separator' => 'before',
1130	'selectors' => [
1131	'{{WRAPPER}}:hover .ui-e-icon-wrp' => 'border-color: {{VALUE}};',
1132	],
1133	'condition' => [
1134	'icon_border_border!' => '',
1135	],
1136	]
1137	);
1138
1139	$this->add_responsive_control(
1140	'icon_hover_radius',
1141	[
1142	'label' => esc_html__('Border Radius', 'uicore-elements'),
1143	'type' => Controls_Manager::DIMENSIONS,
1144	'size_units' => ['px', '%'],
1145	'separator' => 'after',
1146	'selectors' => [
1147	'{{WRAPPER}}:hover .ui-e-icon-wrp' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
1148	'{{WRAPPER}}:hover .ui-e-icon-wrp img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;'
1149	]
1150	]
1151	);
1152
1153	$this->add_group_control(
1154	Group_Control_Box_Shadow::get_type(),
1155	[
1156	'name' => 'icon_hover_shadow',
1157	'selector' => '{{WRAPPER}}:hover .ui-e-icon-wrp'
1158	]
1159	);
1160
1161	$this->add_control(
1162	'image_icon_hover_heading',
1163	[
1164	'label' => esc_html__('Image Effect', 'uicore-elements'),
1165	'type' => Controls_Manager::HEADING,
1166	'separator' => 'before',
1167	'condition' => [
1168	'icon_type' => 'image',
1169	],
1170	]
1171	);
1172
1173	$this->add_group_control(
1174	Group_Control_Css_Filter::get_type(),
1175	[
1176	'name' => 'css_filters_hover',
1177	'selector' => '{{WRAPPER}}:hover .ui-e-icon-wrp img',
1178	'condition' => [
1179	'icon_type' => 'image',
1180	],
1181	]
1182	);
1183
1184	$this->add_control(
1185	'image_opacity_hover',
1186	[
1187	'label' => esc_html__('Opacity', 'uicore-elements'),
1188	'type' => Controls_Manager::SLIDER,
1189	'range' => [
1190	'px' => [
1191	'max' => 1,
1192	'min' => 0.10,
1193	'step' => 0.01,
1194	],
1195	],
1196	'selectors' => [
1197	'{{WRAPPER}}:hover .ui-e-icon-wrp img' => 'opacity: {{SIZE}};',
1198	],
1199	'condition' => [
1200	'icon_type' => 'image',
1201	],
1202	]
1203	);
1204
1205	$this->end_controls_tab();
1206
1207	$this->end_controls_tabs();
1208
1209	$this->end_controls_section();
1210
1211	$this->start_controls_section(
1212	'section_style_title',
1213	[
1214	'label' => esc_html__('Title', 'uicore-elements'),
1215	'tab' => Controls_Manager::TAB_STYLE,
1216	]
1217	);
1218
1219	$this->start_controls_tabs('tabs_title_style');
1220
1221	$this->start_controls_tab(
1222	'tab_title_style_normal',
1223	[
1224	'label' => esc_html__('Normal', 'uicore-elements'),
1225	]
1226	);
1227
1228	$this->add_control(
1229	'title_color',
1230	[
1231	'label' => esc_html__('Color', 'uicore-elements'),
1232	'type' => Controls_Manager::COLOR,
1233	'selectors' => [
1234	'{{WRAPPER}} .ui-e-title' => 'color: {{VALUE}};',
1235	],
1236	]
1237	);
1238
1239	$this->end_controls_tab();
1240
1241	$this->start_controls_tab(
1242	'tab_title_style_hover',
1243	[
1244	'label' => esc_html__('Hover', 'uicore-elements'),
1245	]
1246	);
1247
1248	$this->add_control(
1249	'title_color_hover',
1250	[
1251	'label' => esc_html__('Color', 'uicore-elements'),
1252	'type' => Controls_Manager::COLOR,
1253	'selectors' => [
1254	'{{WRAPPER}}:hover .ui-e-title' => 'color: {{VALUE}};',
1255	],
1256	]
1257	);
1258
1259	$this->end_controls_tab();
1260
1261	$this->end_controls_tabs();
1262
1263
1264	$this->add_responsive_control(
1265	'title_bottom_space',
1266	[
1267	'label' => esc_html__('Spacing', 'uicore-elements'),
1268	'type' => Controls_Manager::SLIDER,
1269	'range' => [
1270	'px' => [
1271	'min' => 0,
1272	'max' => 100,
1273	],
1274	],
1275	'separator' => 'before',
1276	'default' => [
1277	'unit' => 'px',
1278	'size' => 0,
1279	],
1280	'selectors' => [
1281	'{{WRAPPER}} .ui-e-title' => 'margin-bottom: {{SIZE}}{{UNIT}} !important;',
1282	],
1283	]
1284	);
1285
1286	$this->add_group_control(
1287	Group_Control_Typography::get_type(),
1288	[
1289	'name' => 'title_typography',
1290	'selector' => '{{WRAPPER}} .ui-e-title',
1291	]
1292	);
1293
1294	$this->end_controls_section();
1295
1296	$this->start_controls_section(
1297	'section_style_sub_title',
1298	[
1299	'label' => esc_html__('Subtitle', 'uicore-elements'),
1300	'tab' => Controls_Manager::TAB_STYLE,
1301	'condition' => [
1302	'sub_title_text!' => '',
1303	],
1304	]
1305	);
1306
1307	$this->start_controls_tabs('tabs_sub_title_style');
1308
1309	$this->start_controls_tab(
1310	'tab_sub_title_style_normal',
1311	[
1312	'label' => esc_html__('Normal', 'uicore-elements'),
1313	]
1314	);
1315
1316	$this->add_control(
1317	'sub_title_color',
1318	[
1319	'label' => esc_html__('Color', 'uicore-elements'),
1320	'type' => Controls_Manager::COLOR,
1321	'selectors' => [
1322	'{{WRAPPER}} .ui-e-subtitle' => 'color: {{VALUE}};',
1323	],
1324	]
1325	);
1326
1327	$this->end_controls_tab();
1328
1329	$this->start_controls_tab(
1330	'tab_sub_title_style_hover',
1331	[
1332	'label' => esc_html__('Hover', 'uicore-elements'),
1333	]
1334	);
1335
1336	$this->add_control(
1337	'sub_title_color_hover',
1338	[
1339	'label' => esc_html__('Color', 'uicore-elements'),
1340	'type' => Controls_Manager::COLOR,
1341	'selectors' => [
1342	'{{WRAPPER}}:hover .ui-e-subtitle' => 'color: {{VALUE}};',
1343	],
1344	]
1345	);
1346
1347	$this->end_controls_tab();
1348
1349	$this->end_controls_tabs();
1350
1351	$this->add_responsive_control(
1352	'sub_title_bottom_space',
1353	[
1354	'label' => esc_html__('Spacing', 'uicore-elements'),
1355	'type' => Controls_Manager::SLIDER,
1356	'range' => [
1357	'px' => [
1358	'min' => 0,
1359	'max' => 100,
1360	],
1361	],
1362	'separator' => 'before',
1363	'default' => [
1364	'unit' => 'px',
1365	'size' => 20,
1366	],
1367	'selectors' => [
1368	'{{WRAPPER}} .ui-e-subtitle' => 'margin-bottom: {{SIZE}}{{UNIT}} !important;',
1369	],
1370	]
1371	);
1372
1373	$this->add_group_control(
1374	Group_Control_Typography::get_type(),
1375	[
1376	'name' => 'sub_title_typography',
1377	'selector' => '{{WRAPPER}} .ui-e-subtitle',
1378	]
1379	);
1380
1381	$this->end_controls_section();
1382
1383	$this->start_controls_section(
1384	'section_style_description',
1385	[
1386	'label' => esc_html__('Description', 'uicore-elements'),
1387	'tab' => Controls_Manager::TAB_STYLE,
1388	]
1389	);
1390
1391	$this->start_controls_tabs('tabs_description_style');
1392
1393	$this->start_controls_tab(
1394	'tab_description_style_normal',
1395	[
1396	'label' => esc_html__('Normal', 'uicore-elements'),
1397	]
1398	);
1399
1400	$this->add_control(
1401	'description_color',
1402	[
1403	'label' => esc_html__('Color', 'uicore-elements'),
1404	'type' => Controls_Manager::COLOR,
1405	'selectors' => [
1406	'{{WRAPPER}} .ui-e-description' => 'color: {{VALUE}};',
1407	],
1408	]
1409	);
1410
1411	$this->end_controls_tab();
1412
1413	$this->start_controls_tab(
1414	'tab_description_style_hover',
1415	[
1416	'label' => esc_html__('Hover', 'uicore-elements'),
1417	]
1418	);
1419
1420	$this->add_control(
1421	'description_color_hover',
1422	[
1423	'label' => esc_html__('Color', 'uicore-elements'),
1424	'type' => Controls_Manager::COLOR,
1425	'selectors' => [
1426	'{{WRAPPER}}:hover .ui-e-description' => 'color: {{VALUE}};',
1427	],
1428	]
1429	);
1430
1431	$this->end_controls_tab();
1432
1433	$this->end_controls_tabs();
1434
1435	$this->add_responsive_control(
1436	'description_bottom_space',
1437	[
1438	'label' => esc_html__('Spacing', 'uicore-elements'),
1439	'type' => Controls_Manager::SLIDER,
1440	'default' => [
1441	'unit' => 'px',
1442	'size' => 0,
1443	],
1444	'separator' => 'before',
1445	'selectors' => [
1446	'{{WRAPPER}} .ui-e-description' => 'margin-bottom: {{SIZE}}{{UNIT}} !important;',
1447	],
1448	]
1449	);
1450
1451	$this->add_group_control(
1452	Group_Control_Typography::get_type(),
1453	[
1454	'name' => 'description_typography',
1455	'selector' => '{{WRAPPER}} .ui-e-description',
1456	]
1457	);
1458
1459	$this->end_controls_section();
1460
1461	$this->start_controls_section(
1462	'section_style_readmore',
1463	[
1464	'label' => esc_html__('Read More', 'uicore-elements'),
1465	'tab' => Controls_Manager::TAB_STYLE,
1466	'condition' => [
1467	'readmore' => 'yes',
1468	],
1469	]
1470	);
1471
1472	$this->start_controls_tabs('tabs_readmore_style');
1473
1474	$this->start_controls_tab(
1475	'tab_readmore_normal',
1476	[
1477	'label' => esc_html__('Normal', 'uicore-elements'),
1478	]
1479	);
1480
1481	$this->add_group_control(
1482	Group_Control_Typography::get_type(),
1483	[
1484	'name' => 'readmore_typography',
1485	'selector' => '{{WRAPPER}} .ui-e-readmore',
1486	]
1487	);
1488
1489	$this->add_control(
1490	'readmore_text_color',
1491	[
1492	'label' => esc_html__('Color', 'uicore-elements'),
1493	'type' => Controls_Manager::COLOR,
1494	'selectors' => [
1495	'{{WRAPPER}} .ui-e-readmore' => 'color: {{VALUE}};',
1496	'{{WRAPPER}} .ui-e-readmore svg' => 'fill: {{VALUE}};',
1497	],
1498	]
1499	);
1500
1501	$this->add_group_control(
1502	Group_Control_Background::get_type(),
1503	[
1504	'name' => 'readmore_background',
1505	'selector' => '{{WRAPPER}} .ui-e-readmore',
1506	]
1507	);
1508
1509	$this->add_group_control(
1510	Group_Control_Border::get_type(),
1511	[
1512	'name' => 'readmore_border',
1513	'placeholder' => '1px',
1514	'default' => '1px',
1515	'selector' => '{{WRAPPER}} .ui-e-readmore'
1516	]
1517	);
1518
1519	$this->add_responsive_control(
1520	'readmore_radius',
1521	[
1522	'label' => esc_html__('Border Radius', 'uicore-elements'),
1523	'type' => Controls_Manager::DIMENSIONS,
1524	'size_units' => ['px', '%'],
1525	'selectors' => [
1526	'{{WRAPPER}} .ui-e-readmore' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1527	],
1528	]
1529	);
1530
1531	$this->add_responsive_control(
1532	'readmore_padding',
1533	[
1534	'label' => esc_html__('Padding', 'uicore-elements'),
1535	'type' => Controls_Manager::DIMENSIONS,
1536	'size_units' => ['px', 'em', '%'],
1537	'selectors' => [
1538	'{{WRAPPER}} .ui-e-readmore' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1539	],
1540	]
1541	);
1542
1543	$this->add_group_control(
1544	Group_Control_Box_Shadow::get_type(),
1545	[
1546	'name' => 'readmore_shadow',
1547	'selector' => '{{WRAPPER}} .ui-e-readmore',
1548	]
1549	);
1550
1551	$this->end_controls_tab();
1552
1553	$this->start_controls_tab(
1554	'tab_readmore_box_hover',
1555	[
1556	'label' => esc_html__('Box hover', 'uicore-elements'),
1557	]
1558	);
1559
1560	$this->add_control(
1561	'readmore_box_hover_text_color',
1562	[
1563	'label' => esc_html__('Color', 'uicore-elements'),
1564	'type' => Controls_Manager::COLOR,
1565	'selectors' => [
1566	'{{WRAPPER}}:hover .ui-e-readmore' => 'color: {{VALUE}};',
1567	'{{WRAPPER}}:hover .ui-e-readmore svg' => 'fill: {{VALUE}};',
1568	],
1569	]
1570	);
1571
1572	$this->add_group_control(
1573	Group_Control_Background::get_type(),
1574	[
1575	'name' => 'readmore_box_hover_background',
1576	'selector' => '{{WRAPPER}}:hover .ui-e-readmore',
1577	]
1578	);
1579
1580	$this->add_control(
1581	'readmore_box_hover_border_color',
1582	[
1583	'label' => esc_html__('Border Color', 'uicore-elements'),
1584	'type' => Controls_Manager::COLOR,
1585	'selectors' => [
1586	'{{WRAPPER}}:hover .ui-e-readmore' => 'border-color: {{VALUE}};',
1587	],
1588	'condition' => [
1589	'readmore_border_border!' => ''
1590	]
1591	]
1592	);
1593
1594	$this->add_group_control(
1595	Group_Control_Box_Shadow::get_type(),
1596	[
1597	'name' => 'readmore_box_hover_shadow',
1598	'selector' => '{{WRAPPER}}:hover .ui-e-readmore',
1599	]
1600	);
1601
1602	$this->end_controls_tab();
1603
1604	$this->start_controls_tab(
1605	'tab_readmore_hover',
1606	[
1607	'label' => esc_html__('Button hover', 'uicore-elements'),
1608	]
1609	);
1610
1611	$this->add_control(
1612	'readmore_hover_text_color',
1613	[
1614	'label' => esc_html__('Color', 'uicore-elements'),
1615	'type' => Controls_Manager::COLOR,
1616	'selectors' => [
1617	'{{WRAPPER}} .ui-e-readmore:hover' => 'color: {{VALUE}};',
1618	'{{WRAPPER}} .ui-e-readmore:hover svg' => 'fill: {{VALUE}};',
1619	],
1620	]
1621	);
1622
1623	$this->add_group_control(
1624	Group_Control_Background::get_type(),
1625	[
1626	'name' => 'readmore_hover_background',
1627	'selector' => '{{WRAPPER}} .ui-e-readmore:hover',
1628	]
1629	);
1630
1631	$this->add_control(
1632	'readmore_hover_border_color',
1633	[
1634	'label' => esc_html__('Border Color', 'uicore-elements'),
1635	'type' => Controls_Manager::COLOR,
1636	'selectors' => [
1637	'{{WRAPPER}} .ui-e-readmore:hover' => 'border-color: {{VALUE}};',
1638	],
1639	'condition' => [
1640	'readmore_border_border!' => ''
1641	]
1642	]
1643	);
1644
1645	$this->add_group_control(
1646	Group_Control_Box_Shadow::get_type(),
1647	[
1648	'name' => 'readmore_hover_shadow',
1649	'selector' => '{{WRAPPER}} .ui-e-readmore:hover',
1650	]
1651	);
1652
1653	$this->add_control(
1654	'readmore_hover_animation',
1655	[
1656	'label' => esc_html__('Hover Animation', 'uicore-elements'),
1657	'type' => Controls_Manager::HOVER_ANIMATION,
1658	]
1659	);
1660
1661	$this->end_controls_tab();
1662
1663	$this->end_controls_tabs();
1664
1665	$this->end_controls_section();
1666
1667	$this->start_controls_section(
1668	'section_style_badge',
1669	[
1670	'label' => esc_html__('Badge', 'uicore-elements'),
1671	'tab' => Controls_Manager::TAB_STYLE,
1672	'condition' => [
1673	'badge' => 'yes',
1674	],
1675	]
1676	);
1677
1678	$this->add_control(
1679	'badge_position',
1680	[
1681	'label' => esc_html__('Position', 'uicore-elements'),
1682	'type' => Controls_Manager::SELECT,
1683	'default' => 'start right',
1684	'options' => [
1685	'start left' => esc_html__('Top Left', 'uicore-elements'),
1686	'start center' => esc_html__('Top Center', 'uicore-elements'),
1687	'start right' => esc_html__('Top Right', 'uicore-elements'),
1688	'center ' => esc_html__('Center', 'uicore-elements'),
1689	'center left' => esc_html__('Center Left', 'uicore-elements'),
1690	'center right' => esc_html__('Center Right', 'uicore-elements'),
1691	'end left' => esc_html__('Bottom Left', 'uicore-elements'),
1692	'end center' => esc_html__('Bottom Center', 'uicore-elements'),
1693	'end right' => esc_html__('Bottom Right', 'uicore-elements'),
1694	],
1695	'selectors' => [
1696	'{{WRAPPER}} .ui-e-badge-wrp' => '--ui-e-badge-position: {{VALUE}}',
1697	]
1698	]
1699	);
1700
1701	$this->add_responsive_control(
1702	'badge_horizontal_offset',
1703	[
1704	'label' => esc_html__('Horizontal Offset', 'uicore-elements'),
1705	'type' => Controls_Manager::SLIDER,
1706	'default' => [
1707	'size' => 0,
1708	],
1709	'tablet_default' => [
1710	'size' => 0,
1711	],
1712	'mobile_default' => [
1713	'size' => 0,
1714	],
1715	'range' => [
1716	'px' => [
1717	'min' => -300,
1718	'step' => 2,
1719	'max' => 300,
1720	],
1721	],
1722	'selectors' => [
1723	'{{WRAPPER}} .ui-e-badge-wrp' => '--ui-e-badge-horizontal-off: {{SIZE}}px;'
1724	],
1725	]
1726	);
1727
1728	$this->add_responsive_control(
1729	'badge_vertical_offset',
1730	[
1731	'label' => esc_html__('Vertical Offset', 'uicore-elements'),
1732	'type' => Controls_Manager::SLIDER,
1733	'default' => [
1734	'size' => 0,
1735	],
1736	'tablet_default' => [
1737	'size' => 0,
1738	],
1739	'mobile_default' => [
1740	'size' => 0,
1741	],
1742	'range' => [
1743	'px' => [
1744	'min' => -300,
1745	'step' => 2,
1746	'max' => 300,
1747	],
1748	],
1749	'selectors' => [
1750	'{{WRAPPER}} .ui-e-badge-wrp' => '--ui-e-badge-vertical-off: {{SIZE}}px;',
1751	],
1752	]
1753	);
1754
1755	$this->add_responsive_control(
1756	'badge_rotate',
1757	[
1758	'label' => esc_html__('Rotate', 'uicore-elements'),
1759	'type' => Controls_Manager::SLIDER,
1760	'devices' => ['desktop', 'tablet', 'mobile'],
1761	'default' => [
1762	'size' => 0,
1763	],
1764	'tablet_default' => [
1765	'size' => 0,
1766	],
1767	'mobile_default' => [
1768	'size' => 0,
1769	],
1770	'range' => [
1771	'px' => [
1772	'min' => -360,
1773	'max' => 360,
1774	'step' => 5,
1775	],
1776	],
1777	'selectors' => [
1778	'{{WRAPPER}} .ui-e-badge' => 'rotate: {{SIZE}}deg;'
1779	],
1780	]
1781	);
1782
1783	$this->start_controls_tabs('tabs_badge');
1784
1785	$this->start_controls_tab(
1786	'tab_badge_style_normal',
1787	[
1788	'label' => esc_html__('Normal', 'uicore-elements'),
1789	]
1790	);
1791
1792	$this->add_group_control(
1793	Group_Control_Typography::get_type(),
1794	[
1795	'name' => 'badge_typography',
1796	'selector' => '{{WRAPPER}} .ui-e-badge',
1797	'fields_options' => [
1798	'font_size' => [
1799	'default' => [
1800	'unit' => 'px',
1801	'size' => 12,
1802	],
1803	],
1804	'line_height' => [
1805	'default' => [
1806	'unit' => 'em',
1807	'size' => 1,
1808	],
1809	],
1810	],
1811	]
1812	);
1813
1814	$this->add_control(
1815	'badge_text_color',
1816	[
1817	'label' => esc_html__('Text Color', 'uicore-elements'),
1818	'type' => Controls_Manager::COLOR,
1819	'selectors' => [
1820	'{{WRAPPER}} .ui-e-badge' => 'color: {{VALUE}};',
1821	],
1822	]
1823	);
1824
1825	$this->add_group_control(
1826	Group_Control_Background::get_type(),
1827	[
1828	'name' => 'badge_background',
1829	'selector' => '{{WRAPPER}} .ui-e-badge',
1830	]
1831	);
1832
1833	$this->add_group_control(
1834	Group_Control_Border::get_type(),
1835	[
1836	'name' => 'badge_border',
1837	'placeholder' => '1px',
1838	'default' => '1px',
1839	'selector' => '{{WRAPPER}} .ui-e-badge'
1840	]
1841	);
1842
1843	$this->add_responsive_control(
1844	'badge_radius',
1845	[
1846	'label' => esc_html__('Border Radius', 'uicore-elements'),
1847	'type' => Controls_Manager::DIMENSIONS,
1848	'size_units' => ['px', '%'],
1849	'default' => [
1850	'top' => 10,
1851	'right' => 10,
1852	'bottom' => 10,
1853	'left' => 10,
1854	'unit' => 'px',
1855	'isLinked' => true,
1856	],
1857	'selectors' => [
1858	'{{WRAPPER}} .ui-e-badge' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1859	],
1860	]
1861	);
1862
1863	$this->add_responsive_control(
1864	'badge_padding',
1865	[
1866	'label' => esc_html__('Padding', 'uicore-elements'),
1867	'type' => Controls_Manager::DIMENSIONS,
1868	'size_units' => ['px', 'em', '%'],
1869	'default' => [
1870	'top' => '8',
1871	'right' => '12',
1872	'bottom' => '8',
1873	'left' => '12',
1874	'unit' => 'px',
1875	'isLinked' => false,
1876	],
1877	'selectors' => [
1878	'{{WRAPPER}} .ui-e-badge' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1879	],
1880	]
1881	);
1882
1883	$this->add_group_control(
1884	Group_Control_Box_Shadow::get_type(),
1885	[
1886	'name' => 'badge_shadow',
1887	'selector' => '{{WRAPPER}} .ui-e-badge',
1888	]
1889	);
1890
1891
1892	$this->end_controls_tab();
1893
1894	$this->start_controls_tab(
1895	'tab_badge_style_hover',
1896	[
1897	'label' => esc_html__('Hover', 'uicore-elements'),
1898	]
1899	);
1900
1901	$this->add_control(
1902	'badge_text_hover_color',
1903	[
1904	'label' => esc_html__('Text Color', 'uicore-elements'),
1905	'type' => Controls_Manager::COLOR,
1906	'selectors' => [
1907	'{{WRAPPER}}:hover .ui-e-badge' => 'color: {{VALUE}};',
1908	],
1909	]
1910	);
1911
1912	$this->add_group_control(
1913	Group_Control_Background::get_type(),
1914	[
1915	'name' => 'badge_hover_background',
1916	'selector' => '{{WRAPPER}}:hover .ui-e-badge',
1917	]
1918	);
1919
1920	$this->add_group_control(
1921	Group_Control_Border::get_type(),
1922	[
1923	'name' => 'badge_hover_border',
1924	'placeholder' => '1px',
1925	'default' => '1px',
1926	'selector' => '{{WRAPPER}}:hover .ui-e-badge'
1927	]
1928	);
1929
1930	$this->add_group_control(
1931	Group_Control_Box_Shadow::get_type(),
1932	[
1933	'name' => 'badge_hover_shadow',
1934	'selector' => '{{WRAPPER}}:hover .ui-e-badge',
1935	]
1936	);
1937
1938	$this->end_controls_tab();
1939
1940	$this->end_controls_tabs();
1941
1942	$this->end_controls_section();
1943
1944	$this->start_controls_section(
1945	'section_animation',
1946	[
1947	'label' => esc_html__('Animations', 'uicore-elements'),
1948	'tab' => Controls_Manager::TAB_STYLE,
1949	]
1950	);
1951
1952	$this->add_control(
1953	'description_animation',
1954	[
1955	'label' => esc_html__( 'Description Hover Animation', 'uicore-elements' ),
1956	'type' => \Elementor\Controls_Manager::SELECT,
1957	'default' => '',
1958	'options' => [
1959	'' => esc_html__( 'None', 'uicore-elements' ),
1960	'ui-e-animation-description-show' => esc_html__( 'Show', 'uicore-elements' ),
1961	],
1962	'prefix_class' => '',
1963	'frontend_available' => true,
1964	'conditions' => [
1965	'relation' => 'or',
1966	'terms' => [
1967	[
1968	'name' => 'position',
1969	'operator' => '==',
1970	'value' => 'top',
1971	],
1972	[
1973	'relation' => 'and',
1974	'terms' => [
1975	[
1976	'name' => 'position',
1977	'operator' => 'in',
1978	'value' => ['left', 'right'],
1979	],
1980	[
1981	'name' => 'icon_inline',
1982	'operator' => '==',
1983	'value' => 'yes',
1984	],
1985	],
1986	],
1987	],
1988	],
1989
1990	]
1991	);
1992
1993	// Creates a prefix if has readmore button AND description animation. This allows us to apply some bottom space to the absolute flex-wrapper, keeping it above readmore
1994	$this->add_control(
1995	'description_prefix',
1996	[
1997	'label' => esc_html__( 'Prefix Class for Description with Readmore', 'uicore-elements' ),
1998	'type' => \Elementor\Controls_Manager::HIDDEN,
1999	'default' => 'readmore',
2000	'condition' => [
2001	'readmore' => 'yes',
2002	'description_animation' => 'ui-e-animation-description-show',
2003	],
2004	'prefix_class' => 'ui-e-has-',
2005	]
2006	);
2007
2008	$this->add_control(
2009	'readmore_animation',
2010	[
2011	'label' => esc_html__( 'Button Hover Animation', 'uicore-elements' ),
2012	'type' => \Elementor\Controls_Manager::SELECT,
2013	'default' => '',
2014	'options' => [
2015	'' => esc_html__( 'None', 'uicore-elements' ),
2016	'ui-e-animation-rm-show' => esc_html__( 'Show', 'uicore-elements' ),
2017	'ui-e-animation-rm-ico' => esc_html__( 'Icon', 'uicore-elements' ),
2018	],
2019	'prefix_class' => '',
2020	'frontend_available' => true,
2021	'condition' => [
2022	'readmore' => 'yes',
2023	'position!' => 'bottom',
2024	]
2025	]
2026	);
2027
2028	$this->add_control(
2029	'icon_animation',
2030	[
2031	'label' => esc_html__('Icon Hover Animation', 'uicore-elements'),
2032	'type' => Controls_Manager::SELECT,
2033	'prefix_class' => '',
2034	'default' => '',
2035	'options' => [
2036	'' => esc_html__('None', 'uicore-elements'),
2037	'ui-e-animation-ico-float' => esc_html__('Icon Float', 'uicore-elements'),
2038	'ui-e-animation-ico-grow' => esc_html__('Background Circle', 'uicore-elements'),
2039	'ui-e-animation-ico-slide' => esc_html__('Background Slide', 'uicore-elements'),
2040	],
2041	'condition' => [
2042	'icon_type!' => 'none',
2043	]
2044	]
2045	);
2046	$this->add_control(
2047	'icon_animation_background',
2048	[
2049	'label' => esc_html__( 'Color', 'uicore-elements' ),
2050	'type' => Controls_Manager::COLOR,
2051	'condition' => [
2052	'icon_animation' => [
2053	'ui-e-animation-ico-grow',
2054	'ui-e-animation-ico-slide'
2055	]
2056	],
2057	'selectors' => [
2058	'{{WRAPPER}}:hover .ui-e-icon-wrp:after' => 'background-color: {{VALUE}}',
2059	],
2060	]
2061	);
2062
2063	$this->add_control(
2064	'widget_animation',
2065	[
2066	'label' => esc_html__( 'Item Hover Animation', 'uicore-elements' ),
2067	'type' => \Elementor\Controls_Manager::SELECT,
2068	'default' => '',
2069	'options' => [
2070	'' => esc_html__( 'None', 'uicore-elements' ),
2071	'ui-e-animation-widget-zoom' => esc_html__( 'Zoom', 'uicore-elements' ),
2072	'ui-e-animation-widget-translate' => esc_html__( 'Translate', 'uicore-elements' ),
2073	],
2074	'prefix_class' => '',
2075	]
2076	);
2077
2078	$this->add_control(
2079	'widget_animation_zoom',
2080	[
2081	'label' => esc_html__( 'Zoom scale', 'uicore-elements' ),
2082	'type' => \Elementor\Controls_Manager::SLIDER,
2083	'size_units' => ['px'],
2084	'range' => [
2085	'px' => [
2086	'min' => .8,
2087	'max' => 1.3,
2088	'step' => 0.01,
2089	],
2090	],
2091	'default' => [
2092	'unit' => 'px',
2093	'size' => 1.12,
2094	],
2095	'condition' =>[
2096	'widget_animation' => 'ui-e-animation-widget-zoom',
2097	],
2098	'selectors' => [
2099	'{{WRAPPER}}' => '--ui-e-ico-box-widget-zoom: {{SIZE}}',
2100	],
2101	]
2102	);
2103
2104	$this->add_control(
2105	'widget_animation_translate',
2106	[
2107	'label' => esc_html__( 'Translate value', 'uicore-elements' ),
2108	'type' => \Elementor\Controls_Manager::SLIDER,
2109	'size_units' => ['px'],
2110	'range' => [
2111	'px' => [
2112	'min' => -50,
2113	'max' => 50,
2114	'step' => 1,
2115	],
2116	],
2117	'default' => [
2118	'unit' => 'px',
2119	'size' => -36,
2120	],
2121	'condition' =>[
2122	'widget_animation' => 'ui-e-animation-widget-translate',
2123	],
2124	'selectors' => [
2125	'{{WRAPPER}}' => '--ui-e-ico-box-widget-translate: {{SIZE}}{{UNIT}}',
2126	],
2127	]
2128	);
2129
2130	$this->end_controls_section();
2131
2132	$this->start_controls_section(
2133	'section_style_additional',
2134	[
2135	'label' => esc_html__('Additional', 'uicore-elements'),
2136	'tab' => Controls_Manager::TAB_STYLE,
2137	]
2138	);
2139
2140	$this->add_responsive_control(
2141	'content_padding',
2142	[
2143	'label' => esc_html__('Content Inner Padding', 'uicore-elements'),
2144	'type' => Controls_Manager::DIMENSIONS,
2145	'size_units' => ['px', 'em', '%'],
2146	'frontend_available' => true,
2147	'selectors' => [
2148	'{{WRAPPER}} .ui-e-ico-box' => '--ui-e-content-padding-top: {{TOP}}{{UNIT}};
2149	--ui-e-content-padding-right: {{RIGHT}}{{UNIT}};
2150	--ui-e-content-padding-bot: {{BOTTOM}}{{UNIT}};
2151	--ui-e-content-padding-left: {{LEFT}}{{UNIT}};'
2152	]
2153	]
2154	);
2155
2156	$this->end_controls_section();
2157	}
2158	protected function render()
2159	{
2160	$settings = $this->get_settings_for_display();
2161
2162	// Get the proper media
2163	$media_type = $settings['icon_type'];
2164	switch($media_type) {
2165
2166	case 'icon' :
2167	$media = $settings['selected_icon'];
2168	break;
2169
2170	case 'image' :
2171	$media = $settings['image'];
2172	$media_size = isset($settings['image_fullwidth']) ? 'large' : 'medium'; // Gets the proper media size.
2173	break;
2174	}
2175
2176	// Build the title
2177	if (! empty($settings['title_link_url']['url'])){
2178
2179	$hasTitleUrl = true;
2180	$this->add_link_attributes( 'title_link', $settings['title_link_url'] );
2181	$titleUrl = "<a {$this->get_render_attribute_string( 'title_link')}>";
2182
2183	} else { $hasTitleUrl = false;}
2184
2185	$title = '<'.esc_html($settings['title_size']).' class="ui-e-title">';
2186	$title .= $hasTitleUrl ? wp_kses_post($titleUrl) : ''; // url
2187	$title .= esc_html($settings['title_text']);
2188	$title .= $hasTitleUrl ? '</a>' : ''; // url closure
2189	$title .= '</'.esc_html($settings['title_size']).'>';
2190
2191	// Build the global Url
2192	if($settings['global_link'] && $settings['global_link_url']['url'] && !$this->is_edit_mode()){
2193
2194	$global_target = $settings['global_link_url']['is_external'] ? '_blank' : '_self';
2195	$this->add_render_attribute('global_link', 'onclick', "window.open('{$settings['global_link_url']['url']}', '$global_target')");
2196	}
2197
2198	// Build the subtitle
2199	$subtitle = $settings['sub_title_text'] != '' ? "<div class='ui-e-subtitle'> {$settings['sub_title_text']} </div>" : '';
2200
2201	// Build the readmore
2202	$readmore = $settings['readmore'];
2203	if($readmore){
2204
2205	$rmContent = $settings['readmore_text'];
2206	$rmIcon = $settings['readmore_icon']['value'] == '' ? false : true;
2207
2208	if(!empty($settings['readmore_link']['url'])){
2209
2210	$this->add_link_attributes( 'rm_link', $settings['readmore_link']);
2211	}
2212
2213	$this->add_render_attribute('rm_atts', 'class', $settings['readmore_hover_animation'] ? 'ui-e-readmore elementor-animation-'.esc_attr($settings['readmore_hover_animation']) : 'ui-e-readmore');
2214
2215	if (!empty($settings['button_css_id'])) {
2216	$this->add_render_attribute( 'rm_atts', 'id', esc_attr($settings['button_css_id']) );
2217	}
2218
2219	// if ($settings['onclick']) {
2220	// $this->add_render_attribute( 'rm_atts', 'onclick', esc_js($settings['onclick_event']) );
2221	// }
2222	}
2223
2224	// Check the icon position and sets the inline (true puts title/subtitlte inside flex wrapper, false puts inside content)
2225	switch($settings['position']){
2226
2227	// Always true if top; always false if bottom and left/right checks the user choice
2228	case 'top' :
2229	$inline = true;
2230	break;
2231
2232	case 'bottom' :
2233	$inline = false;
2234	break;
2235
2236	default :
2237	$inline = $settings['icon_inline'] === 'yes' ? true : false;
2238	break;
2239	}
2240
2241	?>
2242
2243	<div class="ui-e-ico-box" <?php $this->print_render_attribute_string('global_link');?>>
2244
2245	<?php if($settings['badge']) : ?>
2246	<span class="ui-e-badge-wrp">
2247	<span class="ui-e-badge ui-e-<?php echo esc_attr($settings['badge_position']);?>"> <?php echo esc_html($settings['badge_text']);?> </span>
2248	</span>
2249	<?php endif; ?>
2250
2251	<div class='ui-e-flex-wrp'>
2252
2253	<?php if($media_type != 'none') : ?>
2254	<div class="ui-e-icon-wrp">
2255
2256	<?php if ($media_type == 'icon') {
2257	Icons_Manager::render_icon( $media, [ 'aria-hidden' => 'true' ] );
2258	} else {
2259	echo wp_get_attachment_image( $media['id'], $media_size );
2260	}
2261	?>
2262
2263	</div>
2264	<?php endif; ?>
2265
2266	<?php echo $inline ? '<div class="ui-e-title-wrp">' . wp_kses_post($title . $subtitle) . '</div>' : '' ;?>
2267
2268	</div>
2269
2270	<div class="ui-e-box-content">
2271	<?php echo $inline ? '' : '<div class="ui-e-title-wrp">' . wp_kses_post($title . $subtitle) . '</div>' ;?>
2272
2273	<div class="ui-e-description">
2274	<?php echo wp_kses_post($settings['description_text']);?>
2275	</div>
2276
2277	<?php if($readmore) : ?>
2278	<a <?php $this->print_render_attribute_string('rm_link'); $this->print_render_attribute_string('rm_atts');?>>
2279
2280	<?php echo esc_html($rmContent);?>
2281	<?php if($rmIcon) : ?>
2282	<span>
2283	<?php Icons_Manager::render_icon( $settings['readmore_icon'], [ 'aria-hidden' => 'true' ] ); ?>
2284	</span>
2285	<?php endif; ?>
2286	</a>
2287	<?php endif; ?>
2288
2289	</div>
2290	</div>
2291	<?php
2292	}
2293
2294	}
2295	\Elementor\Plugin::instance()->widgets_manager->register(new IconBox());
2296