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

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

2,168 lines 51.3 KB

Raw Download Zip

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