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

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

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