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

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

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