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

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

2,318 lines 77.7 KB

Raw Download Zip

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