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

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

2,288 lines 59.2 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',
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_group_control(
1477	Group_Control_Typography::get_type(),
1478	[
1479	'name' => 'readmore_typography',
1480	'selector' => '{{WRAPPER}} .ui-e-readmore',
1481	]
1482	);
1483
1484	$this->add_control(
1485	'readmore_text_color',
1486	[
1487	'label' => esc_html__('Color', 'uicore-elements'),
1488	'type' => Controls_Manager::COLOR,
1489	'selectors' => [
1490	'{{WRAPPER}} .ui-e-readmore' => 'color: {{VALUE}};',
1491	'{{WRAPPER}} .ui-e-readmore svg' => 'fill: {{VALUE}};',
1492	],
1493	]
1494	);
1495
1496	$this->add_group_control(
1497	Group_Control_Background::get_type(),
1498	[
1499	'name' => 'readmore_background',
1500	'selector' => '{{WRAPPER}} .ui-e-readmore',
1501	]
1502	);
1503
1504	$this->add_group_control(
1505	Group_Control_Border::get_type(),
1506	[
1507	'name' => 'readmore_border',
1508	'placeholder' => '1px',
1509	'default' => '1px',
1510	'selector' => '{{WRAPPER}} .ui-e-readmore'
1511	]
1512	);
1513
1514	$this->add_responsive_control(
1515	'readmore_radius',
1516	[
1517	'label' => esc_html__('Border Radius', 'uicore-elements'),
1518	'type' => Controls_Manager::DIMENSIONS,
1519	'size_units' => ['px', '%'],
1520	'selectors' => [
1521	'{{WRAPPER}} .ui-e-readmore' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1522	],
1523	]
1524	);
1525
1526	$this->add_responsive_control(
1527	'readmore_padding',
1528	[
1529	'label' => esc_html__('Padding', 'uicore-elements'),
1530	'type' => Controls_Manager::DIMENSIONS,
1531	'size_units' => ['px', 'em', '%'],
1532	'selectors' => [
1533	'{{WRAPPER}} .ui-e-readmore' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1534	],
1535	]
1536	);
1537
1538	$this->add_group_control(
1539	Group_Control_Box_Shadow::get_type(),
1540	[
1541	'name' => 'readmore_shadow',
1542	'selector' => '{{WRAPPER}} .ui-e-readmore',
1543	]
1544	);
1545
1546	$this->end_controls_tab();
1547
1548	$this->start_controls_tab(
1549	'tab_readmore_box_hover',
1550	[
1551	'label' => esc_html__('Box hover', 'uicore-elements'),
1552	]
1553	);
1554
1555	$this->add_control(
1556	'readmore_box_hover_text_color',
1557	[
1558	'label' => esc_html__('Color', 'uicore-elements'),
1559	'type' => Controls_Manager::COLOR,
1560	'selectors' => [
1561	'{{WRAPPER}}:hover .ui-e-readmore' => 'color: {{VALUE}};',
1562	'{{WRAPPER}}:hover .ui-e-readmore svg' => 'fill: {{VALUE}};',
1563	],
1564	]
1565	);
1566
1567	$this->add_group_control(
1568	Group_Control_Background::get_type(),
1569	[
1570	'name' => 'readmore_box_hover_background',
1571	'selector' => '{{WRAPPER}}:hover .ui-e-readmore',
1572	]
1573	);
1574
1575	$this->add_control(
1576	'readmore_box_hover_border_color',
1577	[
1578	'label' => esc_html__('Border Color', 'uicore-elements'),
1579	'type' => Controls_Manager::COLOR,
1580	'selectors' => [
1581	'{{WRAPPER}}:hover .ui-e-readmore' => 'border-color: {{VALUE}};',
1582	],
1583	'condition' => [
1584	'readmore_border_border!' => ''
1585	]
1586	]
1587	);
1588
1589	$this->add_group_control(
1590	Group_Control_Box_Shadow::get_type(),
1591	[
1592	'name' => 'readmore_box_hover_shadow',
1593	'selector' => '{{WRAPPER}}:hover .ui-e-readmore',
1594	]
1595	);
1596
1597	$this->end_controls_tab();
1598
1599	$this->start_controls_tab(
1600	'tab_readmore_hover',
1601	[
1602	'label' => esc_html__('Button hover', 'uicore-elements'),
1603	]
1604	);
1605
1606	$this->add_control(
1607	'readmore_hover_text_color',
1608	[
1609	'label' => esc_html__('Color', 'uicore-elements'),
1610	'type' => Controls_Manager::COLOR,
1611	'selectors' => [
1612	'{{WRAPPER}} .ui-e-readmore:hover' => 'color: {{VALUE}};',
1613	'{{WRAPPER}} .ui-e-readmore:hover svg' => 'fill: {{VALUE}};',
1614	],
1615	]
1616	);
1617
1618	$this->add_group_control(
1619	Group_Control_Background::get_type(),
1620	[
1621	'name' => 'readmore_hover_background',
1622	'selector' => '{{WRAPPER}} .ui-e-readmore:hover',
1623	]
1624	);
1625
1626	$this->add_control(
1627	'readmore_hover_border_color',
1628	[
1629	'label' => esc_html__('Border Color', 'uicore-elements'),
1630	'type' => Controls_Manager::COLOR,
1631	'selectors' => [
1632	'{{WRAPPER}} .ui-e-readmore:hover' => 'border-color: {{VALUE}};',
1633	],
1634	'condition' => [
1635	'readmore_border_border!' => ''
1636	]
1637	]
1638	);
1639
1640	$this->add_group_control(
1641	Group_Control_Box_Shadow::get_type(),
1642	[
1643	'name' => 'readmore_hover_shadow',
1644	'selector' => '{{WRAPPER}} .ui-e-readmore:hover',
1645	]
1646	);
1647
1648	$this->add_control(
1649	'readmore_hover_animation',
1650	[
1651	'label' => esc_html__('Hover Animation', 'uicore-elements'),
1652	'type' => Controls_Manager::HOVER_ANIMATION,
1653	]
1654	);
1655
1656	$this->end_controls_tab();
1657
1658	$this->end_controls_tabs();
1659
1660	$this->end_controls_section();
1661
1662	$this->start_controls_section(
1663	'section_style_badge',
1664	[
1665	'label' => esc_html__('Badge', 'uicore-elements'),
1666	'tab' => Controls_Manager::TAB_STYLE,
1667	'condition' => [
1668	'badge' => 'yes',
1669	],
1670	]
1671	);
1672
1673	$this->add_control(
1674	'badge_position',
1675	[
1676	'label' => esc_html__('Position', 'uicore-elements'),
1677	'type' => Controls_Manager::SELECT,
1678	'default' => 'start right',
1679	'options' => [
1680	'start left' => esc_html__('Top Left', 'uicore-elements'),
1681	'start center' => esc_html__('Top Center', 'uicore-elements'),
1682	'start right' => esc_html__('Top Right', 'uicore-elements'),
1683	'center ' => esc_html__('Center', 'uicore-elements'),
1684	'center left' => esc_html__('Center Left', 'uicore-elements'),
1685	'center right' => esc_html__('Center Right', 'uicore-elements'),
1686	'end left' => esc_html__('Bottom Left', 'uicore-elements'),
1687	'end center' => esc_html__('Bottom Center', 'uicore-elements'),
1688	'end right' => esc_html__('Bottom Right', 'uicore-elements'),
1689	],
1690	'selectors' => [
1691	'{{WRAPPER}} .ui-e-badge-wrp' => '--ui-e-badge-position: {{VALUE}}',
1692	]
1693	]
1694	);
1695
1696	$this->add_responsive_control(
1697	'badge_horizontal_offset',
1698	[
1699	'label' => esc_html__('Horizontal Offset', 'uicore-elements'),
1700	'type' => Controls_Manager::SLIDER,
1701	'default' => [
1702	'size' => 0,
1703	],
1704	'tablet_default' => [
1705	'size' => 0,
1706	],
1707	'mobile_default' => [
1708	'size' => 0,
1709	],
1710	'range' => [
1711	'px' => [
1712	'min' => -300,
1713	'step' => 2,
1714	'max' => 300,
1715	],
1716	],
1717	'selectors' => [
1718	'{{WRAPPER}} .ui-e-badge-wrp' => '--ui-e-badge-horizontal-off: {{SIZE}}px;'
1719	],
1720	]
1721	);
1722
1723	$this->add_responsive_control(
1724	'badge_vertical_offset',
1725	[
1726	'label' => esc_html__('Vertical Offset', 'uicore-elements'),
1727	'type' => Controls_Manager::SLIDER,
1728	'default' => [
1729	'size' => 0,
1730	],
1731	'tablet_default' => [
1732	'size' => 0,
1733	],
1734	'mobile_default' => [
1735	'size' => 0,
1736	],
1737	'range' => [
1738	'px' => [
1739	'min' => -300,
1740	'step' => 2,
1741	'max' => 300,
1742	],
1743	],
1744	'selectors' => [
1745	'{{WRAPPER}} .ui-e-badge-wrp' => '--ui-e-badge-vertical-off: {{SIZE}}px;',
1746	],
1747	]
1748	);
1749
1750	$this->add_responsive_control(
1751	'badge_rotate',
1752	[
1753	'label' => esc_html__('Rotate', 'uicore-elements'),
1754	'type' => Controls_Manager::SLIDER,
1755	'devices' => ['desktop', 'tablet', 'mobile'],
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' => -360,
1768	'max' => 360,
1769	'step' => 5,
1770	],
1771	],
1772	'selectors' => [
1773	'{{WRAPPER}} .ui-e-badge' => 'rotate: {{SIZE}}deg;'
1774	],
1775	]
1776	);
1777
1778	$this->start_controls_tabs('tabs_badge');
1779
1780	$this->start_controls_tab(
1781	'tab_badge_style_normal',
1782	[
1783	'label' => esc_html__('Normal', 'uicore-elements'),
1784	]
1785	);
1786
1787	$this->add_group_control(
1788	Group_Control_Typography::get_type(),
1789	[
1790	'name' => 'badge_typography',
1791	'selector' => '{{WRAPPER}} .ui-e-badge',
1792	'fields_options' => [
1793	'font_size' => [
1794	'default' => [
1795	'unit' => 'px',
1796	'size' => 12,
1797	],
1798	],
1799	'line_height' => [
1800	'default' => [
1801	'unit' => 'em',
1802	'size' => 1,
1803	],
1804	],
1805	],
1806	]
1807	);
1808
1809	$this->add_control(
1810	'badge_text_color',
1811	[
1812	'label' => esc_html__('Text Color', 'uicore-elements'),
1813	'type' => Controls_Manager::COLOR,
1814	'selectors' => [
1815	'{{WRAPPER}} .ui-e-badge' => 'color: {{VALUE}};',
1816	],
1817	]
1818	);
1819
1820	$this->add_group_control(
1821	Group_Control_Background::get_type(),
1822	[
1823	'name' => 'badge_background',
1824	'selector' => '{{WRAPPER}} .ui-e-badge',
1825	]
1826	);
1827
1828	$this->add_group_control(
1829	Group_Control_Border::get_type(),
1830	[
1831	'name' => 'badge_border',
1832	'placeholder' => '1px',
1833	'default' => '1px',
1834	'selector' => '{{WRAPPER}} .ui-e-badge'
1835	]
1836	);
1837
1838	$this->add_responsive_control(
1839	'badge_radius',
1840	[
1841	'label' => esc_html__('Border Radius', 'uicore-elements'),
1842	'type' => Controls_Manager::DIMENSIONS,
1843	'size_units' => ['px', '%'],
1844	'default' => [
1845	'top' => 10,
1846	'right' => 10,
1847	'bottom' => 10,
1848	'left' => 10,
1849	'unit' => 'px',
1850	'isLinked' => true,
1851	],
1852	'selectors' => [
1853	'{{WRAPPER}} .ui-e-badge' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1854	],
1855	]
1856	);
1857
1858	$this->add_responsive_control(
1859	'badge_padding',
1860	[
1861	'label' => esc_html__('Padding', 'uicore-elements'),
1862	'type' => Controls_Manager::DIMENSIONS,
1863	'size_units' => ['px', 'em', '%'],
1864	'default' => [
1865	'top' => '8',
1866	'right' => '12',
1867	'bottom' => '8',
1868	'left' => '12',
1869	'unit' => 'px',
1870	'isLinked' => false,
1871	],
1872	'selectors' => [
1873	'{{WRAPPER}} .ui-e-badge' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1874	],
1875	]
1876	);
1877
1878	$this->add_group_control(
1879	Group_Control_Box_Shadow::get_type(),
1880	[
1881	'name' => 'badge_shadow',
1882	'selector' => '{{WRAPPER}} .ui-e-badge',
1883	]
1884	);
1885
1886
1887	$this->end_controls_tab();
1888
1889	$this->start_controls_tab(
1890	'tab_badge_style_hover',
1891	[
1892	'label' => esc_html__('Hover', 'uicore-elements'),
1893	]
1894	);
1895
1896	$this->add_control(
1897	'badge_text_hover_color',
1898	[
1899	'label' => esc_html__('Text Color', 'uicore-elements'),
1900	'type' => Controls_Manager::COLOR,
1901	'selectors' => [
1902	'{{WRAPPER}}:hover .ui-e-badge' => 'color: {{VALUE}};',
1903	],
1904	]
1905	);
1906
1907	$this->add_group_control(
1908	Group_Control_Background::get_type(),
1909	[
1910	'name' => 'badge_hover_background',
1911	'selector' => '{{WRAPPER}}:hover .ui-e-badge',
1912	]
1913	);
1914
1915	$this->add_group_control(
1916	Group_Control_Border::get_type(),
1917	[
1918	'name' => 'badge_hover_border',
1919	'placeholder' => '1px',
1920	'default' => '1px',
1921	'selector' => '{{WRAPPER}}:hover .ui-e-badge'
1922	]
1923	);
1924
1925	$this->add_group_control(
1926	Group_Control_Box_Shadow::get_type(),
1927	[
1928	'name' => 'badge_hover_shadow',
1929	'selector' => '{{WRAPPER}}:hover .ui-e-badge',
1930	]
1931	);
1932
1933	$this->end_controls_tab();
1934
1935	$this->end_controls_tabs();
1936
1937	$this->end_controls_section();
1938
1939	$this->start_controls_section(
1940	'section_animation',
1941	[
1942	'label' => esc_html__('Animations', 'uicore-elements'),
1943	'tab' => Controls_Manager::TAB_STYLE,
1944	]
1945	);
1946
1947	$this->add_control(
1948	'description_animation',
1949	[
1950	'label' => esc_html__( 'Description Hover Animation', 'uicore-elements' ),
1951	'type' => \Elementor\Controls_Manager::SELECT,
1952	'default' => '',
1953	'options' => [
1954	'' => esc_html__( 'None', 'uicore-elements' ),
1955	'ui-e-animation-description-show' => esc_html__( 'Show', 'uicore-elements' ),
1956	],
1957	'prefix_class' => '',
1958	'frontend_available' => true,
1959	'conditions' => [
1960	'relation' => 'or',
1961	'terms' => [
1962	[
1963	'name' => 'position',
1964	'operator' => '==',
1965	'value' => 'top',
1966	],
1967	[
1968	'relation' => 'and',
1969	'terms' => [
1970	[
1971	'name' => 'position',
1972	'operator' => 'in',
1973	'value' => ['left', 'right'],
1974	],
1975	[
1976	'name' => 'icon_inline',
1977	'operator' => '==',
1978	'value' => 'yes',
1979	],
1980	],
1981	],
1982	],
1983	],
1984
1985	]
1986	);
1987
1988	// 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
1989	$this->add_control(
1990	'description_prefix',
1991	[
1992	'label' => esc_html__( 'Prefix Class for Description with Readmore', 'uicore-elements' ),
1993	'type' => \Elementor\Controls_Manager::HIDDEN,
1994	'default' => 'readmore',
1995	'condition' => [
1996	'readmore' => 'yes',
1997	'description_animation' => 'ui-e-animation-description-show',
1998	],
1999	'prefix_class' => 'ui-e-has-',
2000	]
2001	);
2002
2003	$this->add_control(
2004	'readmore_animation',
2005	[
2006	'label' => esc_html__( 'Button Hover Animation', 'uicore-elements' ),
2007	'type' => \Elementor\Controls_Manager::SELECT,
2008	'default' => '',
2009	'options' => [
2010	'' => esc_html__( 'None', 'uicore-elements' ),
2011	'ui-e-animation-rm-show' => esc_html__( 'Show', 'uicore-elements' ),
2012	'ui-e-animation-rm-ico' => esc_html__( 'Icon', 'uicore-elements' ),
2013	],
2014	'prefix_class' => '',
2015	'frontend_available' => true,
2016	'condition' => [
2017	'readmore' => 'yes',
2018	'position!' => 'bottom',
2019	]
2020	]
2021	);
2022
2023	$this->add_control(
2024	'icon_animation',
2025	[
2026	'label' => esc_html__('Icon Hover Animation', 'uicore-elements'),
2027	'type' => Controls_Manager::SELECT,
2028	'prefix_class' => '',
2029	'default' => '',
2030	'options' => [
2031	'' => esc_html__('None', 'uicore-elements'),
2032	'ui-e-animation-ico-float' => esc_html__('Icon Float', 'uicore-elements'),
2033	'ui-e-animation-ico-grow' => esc_html__('Background Circle', 'uicore-elements'),
2034	'ui-e-animation-ico-slide' => esc_html__('Background Slide', 'uicore-elements'),
2035	],
2036	'condition' => [
2037	'icon_type!' => 'none',
2038	]
2039	]
2040	);
2041	$this->add_control(
2042	'icon_animation_background',
2043	[
2044	'label' => esc_html__( 'Color', 'uicore-elements' ),
2045	'type' => Controls_Manager::COLOR,
2046	'condition' => [
2047	'icon_animation' => [
2048	'ui-e-animation-ico-grow',
2049	'ui-e-animation-ico-slide'
2050	]
2051	],
2052	'selectors' => [
2053	'{{WRAPPER}}:hover .ui-e-icon-wrp:after' => 'background-color: {{VALUE}}',
2054	],
2055	]
2056	);
2057
2058	$this->add_control(
2059	'widget_animation',
2060	[
2061	'label' => esc_html__( 'Item Hover Animation', 'uicore-elements' ),
2062	'type' => \Elementor\Controls_Manager::SELECT,
2063	'default' => '',
2064	'options' => [
2065	'' => esc_html__( 'None', 'uicore-elements' ),
2066	'ui-e-animation-widget-zoom' => esc_html__( 'Zoom', 'uicore-elements' ),
2067	'ui-e-animation-widget-translate' => esc_html__( 'Translate', 'uicore-elements' ),
2068	],
2069	'prefix_class' => '',
2070	]
2071	);
2072
2073	$this->add_control(
2074	'widget_animation_zoom',
2075	[
2076	'label' => esc_html__( 'Zoom scale', 'uicore-elements' ),
2077	'type' => \Elementor\Controls_Manager::SLIDER,
2078	'size_units' => ['px'],
2079	'range' => [
2080	'px' => [
2081	'min' => .8,
2082	'max' => 1.3,
2083	'step' => 0.01,
2084	],
2085	],
2086	'default' => [
2087	'unit' => 'px',
2088	'size' => 1.12,
2089	],
2090	'condition' =>[
2091	'widget_animation' => 'ui-e-animation-widget-zoom',
2092	],
2093	'selectors' => [
2094	'{{WRAPPER}}' => '--ui-e-ico-box-widget-zoom: {{SIZE}}',
2095	],
2096	]
2097	);
2098
2099	$this->add_control(
2100	'widget_animation_translate',
2101	[
2102	'label' => esc_html__( 'Translate value', 'uicore-elements' ),
2103	'type' => \Elementor\Controls_Manager::SLIDER,
2104	'size_units' => ['px'],
2105	'range' => [
2106	'px' => [
2107	'min' => -50,
2108	'max' => 50,
2109	'step' => 1,
2110	],
2111	],
2112	'default' => [
2113	'unit' => 'px',
2114	'size' => -36,
2115	],
2116	'condition' =>[
2117	'widget_animation' => 'ui-e-animation-widget-translate',
2118	],
2119	'selectors' => [
2120	'{{WRAPPER}}' => '--ui-e-ico-box-widget-translate: {{SIZE}}{{UNIT}}',
2121	],
2122	]
2123	);
2124
2125	$this->end_controls_section();
2126
2127	$this->start_controls_section(
2128	'section_style_additional',
2129	[
2130	'label' => esc_html__('Additional', 'uicore-elements'),
2131	'tab' => Controls_Manager::TAB_STYLE,
2132	]
2133	);
2134
2135	$this->add_responsive_control(
2136	'content_padding',
2137	[
2138	'label' => esc_html__('Content Inner Padding', 'uicore-elements'),
2139	'type' => Controls_Manager::DIMENSIONS,
2140	'size_units' => ['px', 'em', '%'],
2141	'frontend_available' => true,
2142	'selectors' => [
2143	'{{WRAPPER}} .ui-e-ico-box' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
2144	]
2145	]
2146	);
2147
2148	$this->end_controls_section();
2149	}
2150	protected function render()
2151	{
2152	$settings = $this->get_settings_for_display();
2153
2154	// Get the proper media
2155	$media_type = $settings['icon_type'];
2156	switch($media_type) {
2157
2158	case 'icon' :
2159	$media = $settings['selected_icon'];
2160	break;
2161
2162	case 'image' :
2163	$media = $settings['image'];
2164	$media_size = isset($settings['image_fullwidth']) ? 'large' : 'medium'; // Gets the proper media size.
2165	break;
2166	}
2167
2168	// Build the title
2169	if (! empty($settings['title_link_url']['url'])){
2170
2171	$hasTitleUrl = true;
2172	$this->add_link_attributes( 'title_link', $settings['title_link_url'] );
2173	$titleUrl = "<a {$this->get_render_attribute_string( 'title_link')}>";
2174
2175	} else { $hasTitleUrl = false;}
2176
2177	$title = '<'.esc_html($settings['title_size']).' class="ui-e-title">';
2178	$title .= $hasTitleUrl ? wp_kses_post($titleUrl) : ''; // url
2179	$title .= esc_html($settings['title_text']);
2180	$title .= $hasTitleUrl ? '</a>' : ''; // url closure
2181	$title .= '</'.esc_html($settings['title_size']).'>';
2182
2183	// Build the global Url
2184	if($settings['global_link'] && $settings['global_link_url']['url'] && !$this->is_edit_mode()){
2185
2186	$global_target = $settings['global_link_url']['is_external'] ? '_blank' : '_self';
2187	$this->add_render_attribute('global_link', 'onclick', "window.open('{$settings['global_link_url']['url']}', '$global_target')");
2188	}
2189
2190	// Build the subtitle
2191	$subtitle = $settings['sub_title_text'] != '' ? "<div class='ui-e-subtitle'> {$settings['sub_title_text']} </div>" : '';
2192
2193	// Build the readmore
2194	$readmore = $settings['readmore'];
2195	if($readmore){
2196
2197	$rmContent = $settings['readmore_text'];
2198	$rmIcon = $settings['readmore_icon']['value'] == '' ? false : true;
2199
2200	if(!empty($settings['readmore_link']['url'])){
2201
2202	$this->add_link_attributes( 'rm_link', $settings['readmore_link']);
2203	}
2204
2205	$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');
2206
2207	if (!empty($settings['button_css_id'])) {
2208	$this->add_render_attribute( 'rm_atts', 'id', esc_attr($settings['button_css_id']) );
2209	}
2210
2211	if ($settings['onclick']) {
2212	$this->add_render_attribute( 'rm_atts', 'onclick', esc_js($settings['onclick_event']) );
2213	}
2214	}
2215
2216	// Check the icon position and sets the inline (true puts title/subtitlte inside flex wrapper, false puts inside content)
2217	switch($settings['position']){
2218
2219	// Always true if top; always false if bottom and left/right checks the user choice
2220	case 'top' :
2221	$inline = true;
2222	break;
2223
2224	case 'bottom' :
2225	$inline = false;
2226	break;
2227
2228	default :
2229	$inline = $settings['icon_inline'] === 'yes' ? true : false;
2230	break;
2231	}
2232
2233	?>
2234
2235	<div class="ui-e-ico-box" <?php $this->print_render_attribute_string('global_link');?>>
2236
2237	<?php if($settings['badge']) : ?>
2238	<span class="ui-e-badge-wrp">
2239	<span class="ui-e-badge ui-e-<?php echo esc_attr($settings['badge_position']);?>"> <?php echo esc_html($settings['badge_text']);?> </span>
2240	</span>
2241	<?php endif; ?>
2242
2243	<div class='ui-e-flex-wrp'>
2244
2245	<?php if($media_type != 'none') : ?>
2246	<div class="ui-e-icon-wrp">
2247
2248	<?php if ($media_type == 'icon') {
2249	Icons_Manager::render_icon( $media, [ 'aria-hidden' => 'true' ] );
2250	} else {
2251	echo wp_get_attachment_image( $media['id'], $media_size );
2252	}
2253	?>
2254
2255	</div>
2256	<?php endif; ?>
2257
2258	<?php echo $inline ? '<div class="ui-e-title-wrp">' . wp_kses_post($title . $subtitle) . '</div>' : '' ;?>
2259
2260	</div>
2261
2262	<div class="ui-e-box-content">
2263	<?php echo $inline ? '' : '<div class="ui-e-title-wrp">' . wp_kses_post($title . $subtitle) . '</div>' ;?>
2264
2265	<div class="ui-e-description">
2266	<?php echo wp_kses_post($settings['description_text']);?>
2267	</div>
2268
2269	<?php if($readmore) : ?>
2270	<a <?php $this->print_render_attribute_string('rm_link'); $this->print_render_attribute_string('rm_atts');?>>
2271
2272	<?php echo esc_html($rmContent);?>
2273	<?php if($rmIcon) : ?>
2274	<span>
2275	<?php Icons_Manager::render_icon( $settings['readmore_icon'], [ 'aria-hidden' => 'true' ] ); ?>
2276	</span>
2277	<?php endif; ?>
2278	</a>
2279	<?php endif; ?>
2280
2281	</div>
2282	</div>
2283	<?php
2284	}
2285
2286	}
2287	\Elementor\Plugin::instance()->widgets_manager->register(new IconBox());
2288