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

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

2,294 lines 59.8 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	margin-left: calc(var(--ui-e-content-padding-left) * -1);
838	margin-right: calc(var(--ui-e-content-padding-right) * -1);
839	margin-top: calc(var(--ui-e-content-padding-top) *-1);',
840	],
841	'condition' => [
842	'icon_type' => 'image'
843	]
844	]
845	);
846
847	$this->add_responsive_control(
848	'icon_size',
849	[
850	'label' => esc_html__('Size', 'uicore-elements'),
851	'type' => Controls_Manager::SLIDER,
852	'size_units' => ['px', 'em', 'vh', 'vw'],
853	'range' => [
854	'px' => [
855	'min' => 6,
856	'max' => 300,
857	],
858	],
859	'default' => [
860	'unit' => 'px',
861	'size' => 42,
862	],
863	'selectors' => [
864	'{{WRAPPER}} .ui-e-icon-wrp' => '--ui-e-media-size: {{SIZE}}{{UNIT}};',
865	],
866	'condition' => [
867	'icon_type' => 'icon',
868	],
869	]
870	);
871
872	$this->add_responsive_control(
873	'image_size',
874	[
875	'label' => esc_html__('Size', 'uicore-elements'),
876	'type' => Controls_Manager::SLIDER,
877	'size_units' => ['px', 'em', 'vh', 'vw'],
878	'range' => [
879	'px' => [
880	'min' => 6,
881	'max' => 300,
882	],
883	],
884	'default' => [
885	'unit' => 'px',
886	'size' => 120,
887	],
888	'selectors' => [
889	'{{WRAPPER}} .ui-e-icon-wrp' => '--ui-e-media-size: {{SIZE}}{{UNIT}};',
890	],
891	'conditions' => [
892	'relation' => 'and',
893	'terms' => [
894	[
895	'name' => 'image_fullwidth',
896	'operator' => '==',
897	'value' => ''
898	],
899	[
900	'name' => 'icon_type',
901	'operator' => '==',
902	'value' => 'image'
903	],
904	]
905	]
906	]
907	);
908
909	$this->add_control(
910	'rotate',
911	[
912	'label' => esc_html__('Rotate', 'uicore-elements'),
913	'type' => Controls_Manager::SLIDER,
914	'default' => [
915	'size' => 0,
916	'unit' => 'deg',
917	],
918	'range' => [
919	'deg' => [
920	'max' => 360,
921	'min' => -360,
922	],
923	],
924	'selectors' => [
925	'{{WRAPPER}}' => '--ui-e-ico-box-icon-rotate: {{SIZE}}{{UNIT}};',
926	],
927	]
928	);
929
930	$this->add_control(
931	'icon_background_rotate',
932	[
933	'label' => esc_html__('Background Rotate', 'uicore-elements'),
934	'type' => Controls_Manager::SLIDER,
935	'default' => [
936	'size' => 0,
937	'unit' => 'deg',
938	],
939	'range' => [
940	'deg' => [
941	'max' => 360,
942	'min' => -360,
943	],
944	],
945	'selectors' => [
946	'{{WRAPPER}} .ui-e-icon-wrp' => '--ui-e-ico-box-icon-wrp-rotate: {{SIZE}}{{UNIT}};',
947	],
948	]
949	);
950
951	$this->add_responsive_control(
952	'icon_vertical_offset',
953	[
954	'label' => esc_html__('Icon Vertical Offset', 'uicore-elements'),
955	'type' => Controls_Manager::SLIDER,
956	'range' => [
957	'px' => [
958	'min' => -200,
959	'max' => 200,
960	],
961	],
962	'default' => [
963	'size' => 0,
964	],
965	'selectors' => [
966	'{{WRAPPER}} .ui-e-icon-wrp' => '--ui-e-ico-box-vertical-off: {{SIZE}}px'
967	],
968	]
969	);
970
971	$this->add_responsive_control(
972	'icon_horizontal_offset',
973	[
974	'label' => esc_html__('Icon Horizontal Offset', 'uicore-elements'),
975	'type' => Controls_Manager::SLIDER,
976	'range' => [
977	'px' => [
978	'min' => -200,
979	'max' => 200,
980	],
981	],
982	'default' => [
983	'size' => 0,
984	],
985	'selectors' => [
986	'{{WRAPPER}} .ui-e-icon-wrp' => '--ui-e-ico-box-horizontal-off: {{SIZE}}px'
987	],
988	]
989	);
990
991	$this->add_control(
992	'image_icon_heading',
993	[
994	'label' => esc_html__('Image Effect', 'uicore-elements'),
995	'type' => Controls_Manager::HEADING,
996	'separator' => 'before',
997	'condition' => [
998	'icon_type' => 'image',
999	],
1000	]
1001	);
1002
1003	$this->add_group_control(
1004	Group_Control_Css_Filter::get_type(),
1005	[
1006	'name' => 'css_filters',
1007	'selector' => '{{WRAPPER}} .ui-e-ico-box img',
1008	'condition' => [
1009	'icon_type' => 'image',
1010	],
1011	]
1012	);
1013
1014	$this->add_control(
1015	'image_opacity',
1016	[
1017	'label' => esc_html__('Opacity', 'uicore-elements'),
1018	'type' => Controls_Manager::SLIDER,
1019	'range' => [
1020	'px' => [
1021	'max' => 1,
1022	'min' => 0.10,
1023	'step' => 0.01,
1024	],
1025	],
1026	'selectors' => [
1027	'{{WRAPPER}} .ui-e-ico-box img' => 'opacity: {{SIZE}};',
1028	],
1029	'condition' => [
1030	'icon_type' => 'image',
1031	],
1032	]
1033	);
1034
1035	$this->add_control(
1036	'background_hover_transition',
1037	[
1038	'label' => esc_html__('Transition Duration', 'uicore-elements'),
1039	'type' => Controls_Manager::SLIDER,
1040	'default' => [
1041	'size' => 0.3,
1042	],
1043	'range' => [
1044	'px' => [
1045	'max' => 3,
1046	'step' => 0.1,
1047	],
1048	],
1049	'selectors' => [
1050	'{{WRAPPER}} .ui-e-icon-wrp img' => 'transition-duration: {{SIZE}}s',
1051	'{{WRAPPER}}:hover .ui-e-icon-wrp img' => 'transform: ',
1052	],
1053	'condition' => [
1054	'icon_type' => 'image',
1055	],
1056	]
1057	);
1058
1059	$this->end_controls_tab();
1060
1061	$this->start_controls_tab(
1062	'icon_hover',
1063	[
1064	'label' => esc_html__('Hover', 'uicore-elements'),
1065	]
1066	);
1067
1068	$this->add_control(
1069	'icon_hover_color',
1070	[
1071	'label' => esc_html__('Icon Color', 'uicore-elements'),
1072	'type' => Controls_Manager::COLOR,
1073	'selectors' => [
1074	'{{WRAPPER}}:hover .ui-e-icon-wrp' => 'color: {{VALUE}};',
1075	'{{WRAPPER}}:hover .ui-e-icon-wrp svg' => 'fill: {{VALUE}};',
1076	],
1077	'condition' => [
1078	'icon_type!' => 'image',
1079	],
1080	]
1081	);
1082
1083	$this->add_control(
1084	'svg_icon_hover_fill_color',
1085	[
1086	'label' => esc_html__('Fill Color', 'uicore-elements'),
1087	'type' => Controls_Manager::COLOR,
1088	'selectors' => [
1089	'{{WRAPPER}}:hover .ui-e-icon-wrp svg, {{WRAPPER}}:hover .ui-e-icon-wrp svg *' => 'fill: {{VALUE}};',
1090	],
1091	'condition' => [
1092	'icon_type!' => 'image',
1093	'show_svg_icon_color' => 'yes',
1094	],
1095	]
1096	);
1097
1098	$this->add_control(
1099	'svg_icon_hover_stroke_color',
1100	[
1101	'label' => esc_html__('Stroke Color', 'uicore-elements'),
1102	'type' => Controls_Manager::COLOR,
1103	'selectors' => [
1104	'{{WRAPPER}}:hover .ui-e-icon-wrp svg, {{WRAPPER}}:hover .ui-e-icon-wrp svg *' => 'stroke: {{VALUE}};',
1105	],
1106	'condition' => [
1107	'icon_type!' => 'image',
1108	'show_svg_icon_color' => 'yes',
1109	],
1110	]
1111	);
1112
1113	$this->add_group_control(
1114	Group_Control_Background::get_type(),
1115	[
1116	'name' => 'icon_hover_background',
1117	'separator' => 'before',
1118	'selector' => '{{WRAPPER}}:hover .ui-e-icon-wrp',
1119	]
1120	);
1121
1122	$this->add_control(
1123	'icon_hover_border_color',
1124	[
1125	'label' => esc_html__('Border Color', 'uicore-elements'),
1126	'type' => Controls_Manager::COLOR,
1127	'separator' => 'before',
1128	'selectors' => [
1129	'{{WRAPPER}}:hover .ui-e-icon-wrp' => 'border-color: {{VALUE}};',
1130	],
1131	'condition' => [
1132	'icon_border_border!' => '',
1133	],
1134	]
1135	);
1136
1137	$this->add_responsive_control(
1138	'icon_hover_radius',
1139	[
1140	'label' => esc_html__('Border Radius', 'uicore-elements'),
1141	'type' => Controls_Manager::DIMENSIONS,
1142	'size_units' => ['px', '%'],
1143	'separator' => 'after',
1144	'selectors' => [
1145	'{{WRAPPER}}:hover .ui-e-icon-wrp' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
1146	'{{WRAPPER}}:hover .ui-e-icon-wrp img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;'
1147	]
1148	]
1149	);
1150
1151	$this->add_group_control(
1152	Group_Control_Box_Shadow::get_type(),
1153	[
1154	'name' => 'icon_hover_shadow',
1155	'selector' => '{{WRAPPER}}:hover .ui-e-icon-wrp'
1156	]
1157	);
1158
1159	$this->add_control(
1160	'image_icon_hover_heading',
1161	[
1162	'label' => esc_html__('Image Effect', 'uicore-elements'),
1163	'type' => Controls_Manager::HEADING,
1164	'separator' => 'before',
1165	'condition' => [
1166	'icon_type' => 'image',
1167	],
1168	]
1169	);
1170
1171	$this->add_group_control(
1172	Group_Control_Css_Filter::get_type(),
1173	[
1174	'name' => 'css_filters_hover',
1175	'selector' => '{{WRAPPER}}:hover .ui-e-icon-wrp img',
1176	'condition' => [
1177	'icon_type' => 'image',
1178	],
1179	]
1180	);
1181
1182	$this->add_control(
1183	'image_opacity_hover',
1184	[
1185	'label' => esc_html__('Opacity', 'uicore-elements'),
1186	'type' => Controls_Manager::SLIDER,
1187	'range' => [
1188	'px' => [
1189	'max' => 1,
1190	'min' => 0.10,
1191	'step' => 0.01,
1192	],
1193	],
1194	'selectors' => [
1195	'{{WRAPPER}}:hover .ui-e-icon-wrp img' => 'opacity: {{SIZE}};',
1196	],
1197	'condition' => [
1198	'icon_type' => 'image',
1199	],
1200	]
1201	);
1202
1203	$this->end_controls_tab();
1204
1205	$this->end_controls_tabs();
1206
1207	$this->end_controls_section();
1208
1209	$this->start_controls_section(
1210	'section_style_title',
1211	[
1212	'label' => esc_html__('Title', 'uicore-elements'),
1213	'tab' => Controls_Manager::TAB_STYLE,
1214	]
1215	);
1216
1217	$this->start_controls_tabs('tabs_title_style');
1218
1219	$this->start_controls_tab(
1220	'tab_title_style_normal',
1221	[
1222	'label' => esc_html__('Normal', 'uicore-elements'),
1223	]
1224	);
1225
1226	$this->add_control(
1227	'title_color',
1228	[
1229	'label' => esc_html__('Color', 'uicore-elements'),
1230	'type' => Controls_Manager::COLOR,
1231	'selectors' => [
1232	'{{WRAPPER}} .ui-e-title' => 'color: {{VALUE}};',
1233	],
1234	]
1235	);
1236
1237	$this->end_controls_tab();
1238
1239	$this->start_controls_tab(
1240	'tab_title_style_hover',
1241	[
1242	'label' => esc_html__('Hover', 'uicore-elements'),
1243	]
1244	);
1245
1246	$this->add_control(
1247	'title_color_hover',
1248	[
1249	'label' => esc_html__('Color', 'uicore-elements'),
1250	'type' => Controls_Manager::COLOR,
1251	'selectors' => [
1252	'{{WRAPPER}}:hover .ui-e-title' => 'color: {{VALUE}};',
1253	],
1254	]
1255	);
1256
1257	$this->end_controls_tab();
1258
1259	$this->end_controls_tabs();
1260
1261
1262	$this->add_responsive_control(
1263	'title_bottom_space',
1264	[
1265	'label' => esc_html__('Spacing', 'uicore-elements'),
1266	'type' => Controls_Manager::SLIDER,
1267	'range' => [
1268	'px' => [
1269	'min' => 0,
1270	'max' => 100,
1271	],
1272	],
1273	'separator' => 'before',
1274	'default' => [
1275	'unit' => 'px',
1276	'size' => 0,
1277	],
1278	'selectors' => [
1279	'{{WRAPPER}} .ui-e-title' => 'margin-bottom: {{SIZE}}{{UNIT}} !important;',
1280	],
1281	]
1282	);
1283
1284	$this->add_group_control(
1285	Group_Control_Typography::get_type(),
1286	[
1287	'name' => 'title_typography',
1288	'selector' => '{{WRAPPER}} .ui-e-title',
1289	]
1290	);
1291
1292	$this->end_controls_section();
1293
1294	$this->start_controls_section(
1295	'section_style_sub_title',
1296	[
1297	'label' => esc_html__('Subtitle', 'uicore-elements'),
1298	'tab' => Controls_Manager::TAB_STYLE,
1299	'condition' => [
1300	'sub_title_text!' => '',
1301	],
1302	]
1303	);
1304
1305	$this->start_controls_tabs('tabs_sub_title_style');
1306
1307	$this->start_controls_tab(
1308	'tab_sub_title_style_normal',
1309	[
1310	'label' => esc_html__('Normal', 'uicore-elements'),
1311	]
1312	);
1313
1314	$this->add_control(
1315	'sub_title_color',
1316	[
1317	'label' => esc_html__('Color', 'uicore-elements'),
1318	'type' => Controls_Manager::COLOR,
1319	'selectors' => [
1320	'{{WRAPPER}} .ui-e-subtitle' => 'color: {{VALUE}};',
1321	],
1322	]
1323	);
1324
1325	$this->end_controls_tab();
1326
1327	$this->start_controls_tab(
1328	'tab_sub_title_style_hover',
1329	[
1330	'label' => esc_html__('Hover', 'uicore-elements'),
1331	]
1332	);
1333
1334	$this->add_control(
1335	'sub_title_color_hover',
1336	[
1337	'label' => esc_html__('Color', 'uicore-elements'),
1338	'type' => Controls_Manager::COLOR,
1339	'selectors' => [
1340	'{{WRAPPER}}:hover .ui-e-subtitle' => 'color: {{VALUE}};',
1341	],
1342	]
1343	);
1344
1345	$this->end_controls_tab();
1346
1347	$this->end_controls_tabs();
1348
1349	$this->add_responsive_control(
1350	'sub_title_bottom_space',
1351	[
1352	'label' => esc_html__('Spacing', 'uicore-elements'),
1353	'type' => Controls_Manager::SLIDER,
1354	'range' => [
1355	'px' => [
1356	'min' => 0,
1357	'max' => 100,
1358	],
1359	],
1360	'separator' => 'before',
1361	'default' => [
1362	'unit' => 'px',
1363	'size' => 20,
1364	],
1365	'selectors' => [
1366	'{{WRAPPER}} .ui-e-subtitle' => 'margin-bottom: {{SIZE}}{{UNIT}} !important;',
1367	],
1368	]
1369	);
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_control(
1399	'description_color',
1400	[
1401	'label' => esc_html__('Color', 'uicore-elements'),
1402	'type' => Controls_Manager::COLOR,
1403	'selectors' => [
1404	'{{WRAPPER}} .ui-e-description' => 'color: {{VALUE}};',
1405	],
1406	]
1407	);
1408
1409	$this->end_controls_tab();
1410
1411	$this->start_controls_tab(
1412	'tab_description_style_hover',
1413	[
1414	'label' => esc_html__('Hover', 'uicore-elements'),
1415	]
1416	);
1417
1418	$this->add_control(
1419	'description_color_hover',
1420	[
1421	'label' => esc_html__('Color', 'uicore-elements'),
1422	'type' => Controls_Manager::COLOR,
1423	'selectors' => [
1424	'{{WRAPPER}}:hover .ui-e-description' => 'color: {{VALUE}};',
1425	],
1426	]
1427	);
1428
1429	$this->end_controls_tab();
1430
1431	$this->end_controls_tabs();
1432
1433	$this->add_responsive_control(
1434	'description_bottom_space',
1435	[
1436	'label' => esc_html__('Spacing', 'uicore-elements'),
1437	'type' => Controls_Manager::SLIDER,
1438	'default' => [
1439	'unit' => 'px',
1440	'size' => 0,
1441	],
1442	'separator' => 'before',
1443	'selectors' => [
1444	'{{WRAPPER}} .ui-e-description' => 'margin-bottom: {{SIZE}}{{UNIT}} !important;',
1445	],
1446	]
1447	);
1448
1449	$this->add_group_control(
1450	Group_Control_Typography::get_type(),
1451	[
1452	'name' => 'description_typography',
1453	'selector' => '{{WRAPPER}} .ui-e-description',
1454	]
1455	);
1456
1457	$this->end_controls_section();
1458
1459	$this->start_controls_section(
1460	'section_style_readmore',
1461	[
1462	'label' => esc_html__('Read More', 'uicore-elements'),
1463	'tab' => Controls_Manager::TAB_STYLE,
1464	'condition' => [
1465	'readmore' => 'yes',
1466	],
1467	]
1468	);
1469
1470	$this->start_controls_tabs('tabs_readmore_style');
1471
1472	$this->start_controls_tab(
1473	'tab_readmore_normal',
1474	[
1475	'label' => esc_html__('Normal', 'uicore-elements'),
1476	]
1477	);
1478
1479	$this->add_group_control(
1480	Group_Control_Typography::get_type(),
1481	[
1482	'name' => 'readmore_typography',
1483	'selector' => '{{WRAPPER}} .ui-e-readmore',
1484	]
1485	);
1486
1487	$this->add_control(
1488	'readmore_text_color',
1489	[
1490	'label' => esc_html__('Color', 'uicore-elements'),
1491	'type' => Controls_Manager::COLOR,
1492	'selectors' => [
1493	'{{WRAPPER}} .ui-e-readmore' => 'color: {{VALUE}};',
1494	'{{WRAPPER}} .ui-e-readmore svg' => 'fill: {{VALUE}};',
1495	],
1496	]
1497	);
1498
1499	$this->add_group_control(
1500	Group_Control_Background::get_type(),
1501	[
1502	'name' => 'readmore_background',
1503	'selector' => '{{WRAPPER}} .ui-e-readmore',
1504	]
1505	);
1506
1507	$this->add_group_control(
1508	Group_Control_Border::get_type(),
1509	[
1510	'name' => 'readmore_border',
1511	'placeholder' => '1px',
1512	'default' => '1px',
1513	'selector' => '{{WRAPPER}} .ui-e-readmore'
1514	]
1515	);
1516
1517	$this->add_responsive_control(
1518	'readmore_radius',
1519	[
1520	'label' => esc_html__('Border Radius', 'uicore-elements'),
1521	'type' => Controls_Manager::DIMENSIONS,
1522	'size_units' => ['px', '%'],
1523	'selectors' => [
1524	'{{WRAPPER}} .ui-e-readmore' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1525	],
1526	]
1527	);
1528
1529	$this->add_responsive_control(
1530	'readmore_padding',
1531	[
1532	'label' => esc_html__('Padding', 'uicore-elements'),
1533	'type' => Controls_Manager::DIMENSIONS,
1534	'size_units' => ['px', 'em', '%'],
1535	'selectors' => [
1536	'{{WRAPPER}} .ui-e-readmore' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1537	],
1538	]
1539	);
1540
1541	$this->add_group_control(
1542	Group_Control_Box_Shadow::get_type(),
1543	[
1544	'name' => 'readmore_shadow',
1545	'selector' => '{{WRAPPER}} .ui-e-readmore',
1546	]
1547	);
1548
1549	$this->end_controls_tab();
1550
1551	$this->start_controls_tab(
1552	'tab_readmore_box_hover',
1553	[
1554	'label' => esc_html__('Box hover', 'uicore-elements'),
1555	]
1556	);
1557
1558	$this->add_control(
1559	'readmore_box_hover_text_color',
1560	[
1561	'label' => esc_html__('Color', 'uicore-elements'),
1562	'type' => Controls_Manager::COLOR,
1563	'selectors' => [
1564	'{{WRAPPER}}:hover .ui-e-readmore' => 'color: {{VALUE}};',
1565	'{{WRAPPER}}:hover .ui-e-readmore svg' => 'fill: {{VALUE}};',
1566	],
1567	]
1568	);
1569
1570	$this->add_group_control(
1571	Group_Control_Background::get_type(),
1572	[
1573	'name' => 'readmore_box_hover_background',
1574	'selector' => '{{WRAPPER}}:hover .ui-e-readmore',
1575	]
1576	);
1577
1578	$this->add_control(
1579	'readmore_box_hover_border_color',
1580	[
1581	'label' => esc_html__('Border Color', 'uicore-elements'),
1582	'type' => Controls_Manager::COLOR,
1583	'selectors' => [
1584	'{{WRAPPER}}:hover .ui-e-readmore' => 'border-color: {{VALUE}};',
1585	],
1586	'condition' => [
1587	'readmore_border_border!' => ''
1588	]
1589	]
1590	);
1591
1592	$this->add_group_control(
1593	Group_Control_Box_Shadow::get_type(),
1594	[
1595	'name' => 'readmore_box_hover_shadow',
1596	'selector' => '{{WRAPPER}}:hover .ui-e-readmore',
1597	]
1598	);
1599
1600	$this->end_controls_tab();
1601
1602	$this->start_controls_tab(
1603	'tab_readmore_hover',
1604	[
1605	'label' => esc_html__('Button hover', 'uicore-elements'),
1606	]
1607	);
1608
1609	$this->add_control(
1610	'readmore_hover_text_color',
1611	[
1612	'label' => esc_html__('Color', 'uicore-elements'),
1613	'type' => Controls_Manager::COLOR,
1614	'selectors' => [
1615	'{{WRAPPER}} .ui-e-readmore:hover' => 'color: {{VALUE}};',
1616	'{{WRAPPER}} .ui-e-readmore:hover svg' => 'fill: {{VALUE}};',
1617	],
1618	]
1619	);
1620
1621	$this->add_group_control(
1622	Group_Control_Background::get_type(),
1623	[
1624	'name' => 'readmore_hover_background',
1625	'selector' => '{{WRAPPER}} .ui-e-readmore:hover',
1626	]
1627	);
1628
1629	$this->add_control(
1630	'readmore_hover_border_color',
1631	[
1632	'label' => esc_html__('Border Color', 'uicore-elements'),
1633	'type' => Controls_Manager::COLOR,
1634	'selectors' => [
1635	'{{WRAPPER}} .ui-e-readmore:hover' => 'border-color: {{VALUE}};',
1636	],
1637	'condition' => [
1638	'readmore_border_border!' => ''
1639	]
1640	]
1641	);
1642
1643	$this->add_group_control(
1644	Group_Control_Box_Shadow::get_type(),
1645	[
1646	'name' => 'readmore_hover_shadow',
1647	'selector' => '{{WRAPPER}} .ui-e-readmore:hover',
1648	]
1649	);
1650
1651	$this->add_control(
1652	'readmore_hover_animation',
1653	[
1654	'label' => esc_html__('Hover Animation', 'uicore-elements'),
1655	'type' => Controls_Manager::HOVER_ANIMATION,
1656	]
1657	);
1658
1659	$this->end_controls_tab();
1660
1661	$this->end_controls_tabs();
1662
1663	$this->end_controls_section();
1664
1665	$this->start_controls_section(
1666	'section_style_badge',
1667	[
1668	'label' => esc_html__('Badge', 'uicore-elements'),
1669	'tab' => Controls_Manager::TAB_STYLE,
1670	'condition' => [
1671	'badge' => 'yes',
1672	],
1673	]
1674	);
1675
1676	$this->add_control(
1677	'badge_position',
1678	[
1679	'label' => esc_html__('Position', 'uicore-elements'),
1680	'type' => Controls_Manager::SELECT,
1681	'default' => 'start right',
1682	'options' => [
1683	'start left' => esc_html__('Top Left', 'uicore-elements'),
1684	'start center' => esc_html__('Top Center', 'uicore-elements'),
1685	'start right' => esc_html__('Top Right', 'uicore-elements'),
1686	'center ' => esc_html__('Center', 'uicore-elements'),
1687	'center left' => esc_html__('Center Left', 'uicore-elements'),
1688	'center right' => esc_html__('Center Right', 'uicore-elements'),
1689	'end left' => esc_html__('Bottom Left', 'uicore-elements'),
1690	'end center' => esc_html__('Bottom Center', 'uicore-elements'),
1691	'end right' => esc_html__('Bottom Right', 'uicore-elements'),
1692	],
1693	'selectors' => [
1694	'{{WRAPPER}} .ui-e-badge-wrp' => '--ui-e-badge-position: {{VALUE}}',
1695	]
1696	]
1697	);
1698
1699	$this->add_responsive_control(
1700	'badge_horizontal_offset',
1701	[
1702	'label' => esc_html__('Horizontal Offset', 'uicore-elements'),
1703	'type' => Controls_Manager::SLIDER,
1704	'default' => [
1705	'size' => 0,
1706	],
1707	'tablet_default' => [
1708	'size' => 0,
1709	],
1710	'mobile_default' => [
1711	'size' => 0,
1712	],
1713	'range' => [
1714	'px' => [
1715	'min' => -300,
1716	'step' => 2,
1717	'max' => 300,
1718	],
1719	],
1720	'selectors' => [
1721	'{{WRAPPER}} .ui-e-badge-wrp' => '--ui-e-badge-horizontal-off: {{SIZE}}px;'
1722	],
1723	]
1724	);
1725
1726	$this->add_responsive_control(
1727	'badge_vertical_offset',
1728	[
1729	'label' => esc_html__('Vertical Offset', 'uicore-elements'),
1730	'type' => Controls_Manager::SLIDER,
1731	'default' => [
1732	'size' => 0,
1733	],
1734	'tablet_default' => [
1735	'size' => 0,
1736	],
1737	'mobile_default' => [
1738	'size' => 0,
1739	],
1740	'range' => [
1741	'px' => [
1742	'min' => -300,
1743	'step' => 2,
1744	'max' => 300,
1745	],
1746	],
1747	'selectors' => [
1748	'{{WRAPPER}} .ui-e-badge-wrp' => '--ui-e-badge-vertical-off: {{SIZE}}px;',
1749	],
1750	]
1751	);
1752
1753	$this->add_responsive_control(
1754	'badge_rotate',
1755	[
1756	'label' => esc_html__('Rotate', 'uicore-elements'),
1757	'type' => Controls_Manager::SLIDER,
1758	'devices' => ['desktop', 'tablet', 'mobile'],
1759	'default' => [
1760	'size' => 0,
1761	],
1762	'tablet_default' => [
1763	'size' => 0,
1764	],
1765	'mobile_default' => [
1766	'size' => 0,
1767	],
1768	'range' => [
1769	'px' => [
1770	'min' => -360,
1771	'max' => 360,
1772	'step' => 5,
1773	],
1774	],
1775	'selectors' => [
1776	'{{WRAPPER}} .ui-e-badge' => 'rotate: {{SIZE}}deg;'
1777	],
1778	]
1779	);
1780
1781	$this->start_controls_tabs('tabs_badge');
1782
1783	$this->start_controls_tab(
1784	'tab_badge_style_normal',
1785	[
1786	'label' => esc_html__('Normal', 'uicore-elements'),
1787	]
1788	);
1789
1790	$this->add_group_control(
1791	Group_Control_Typography::get_type(),
1792	[
1793	'name' => 'badge_typography',
1794	'selector' => '{{WRAPPER}} .ui-e-badge',
1795	'fields_options' => [
1796	'font_size' => [
1797	'default' => [
1798	'unit' => 'px',
1799	'size' => 12,
1800	],
1801	],
1802	'line_height' => [
1803	'default' => [
1804	'unit' => 'em',
1805	'size' => 1,
1806	],
1807	],
1808	],
1809	]
1810	);
1811
1812	$this->add_control(
1813	'badge_text_color',
1814	[
1815	'label' => esc_html__('Text Color', 'uicore-elements'),
1816	'type' => Controls_Manager::COLOR,
1817	'selectors' => [
1818	'{{WRAPPER}} .ui-e-badge' => 'color: {{VALUE}};',
1819	],
1820	]
1821	);
1822
1823	$this->add_group_control(
1824	Group_Control_Background::get_type(),
1825	[
1826	'name' => 'badge_background',
1827	'selector' => '{{WRAPPER}} .ui-e-badge',
1828	]
1829	);
1830
1831	$this->add_group_control(
1832	Group_Control_Border::get_type(),
1833	[
1834	'name' => 'badge_border',
1835	'placeholder' => '1px',
1836	'default' => '1px',
1837	'selector' => '{{WRAPPER}} .ui-e-badge'
1838	]
1839	);
1840
1841	$this->add_responsive_control(
1842	'badge_radius',
1843	[
1844	'label' => esc_html__('Border Radius', 'uicore-elements'),
1845	'type' => Controls_Manager::DIMENSIONS,
1846	'size_units' => ['px', '%'],
1847	'default' => [
1848	'top' => 10,
1849	'right' => 10,
1850	'bottom' => 10,
1851	'left' => 10,
1852	'unit' => 'px',
1853	'isLinked' => true,
1854	],
1855	'selectors' => [
1856	'{{WRAPPER}} .ui-e-badge' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1857	],
1858	]
1859	);
1860
1861	$this->add_responsive_control(
1862	'badge_padding',
1863	[
1864	'label' => esc_html__('Padding', 'uicore-elements'),
1865	'type' => Controls_Manager::DIMENSIONS,
1866	'size_units' => ['px', 'em', '%'],
1867	'default' => [
1868	'top' => '8',
1869	'right' => '12',
1870	'bottom' => '8',
1871	'left' => '12',
1872	'unit' => 'px',
1873	'isLinked' => false,
1874	],
1875	'selectors' => [
1876	'{{WRAPPER}} .ui-e-badge' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1877	],
1878	]
1879	);
1880
1881	$this->add_group_control(
1882	Group_Control_Box_Shadow::get_type(),
1883	[
1884	'name' => 'badge_shadow',
1885	'selector' => '{{WRAPPER}} .ui-e-badge',
1886	]
1887	);
1888
1889
1890	$this->end_controls_tab();
1891
1892	$this->start_controls_tab(
1893	'tab_badge_style_hover',
1894	[
1895	'label' => esc_html__('Hover', 'uicore-elements'),
1896	]
1897	);
1898
1899	$this->add_control(
1900	'badge_text_hover_color',
1901	[
1902	'label' => esc_html__('Text Color', 'uicore-elements'),
1903	'type' => Controls_Manager::COLOR,
1904	'selectors' => [
1905	'{{WRAPPER}}:hover .ui-e-badge' => 'color: {{VALUE}};',
1906	],
1907	]
1908	);
1909
1910	$this->add_group_control(
1911	Group_Control_Background::get_type(),
1912	[
1913	'name' => 'badge_hover_background',
1914	'selector' => '{{WRAPPER}}:hover .ui-e-badge',
1915	]
1916	);
1917
1918	$this->add_group_control(
1919	Group_Control_Border::get_type(),
1920	[
1921	'name' => 'badge_hover_border',
1922	'placeholder' => '1px',
1923	'default' => '1px',
1924	'selector' => '{{WRAPPER}}:hover .ui-e-badge'
1925	]
1926	);
1927
1928	$this->add_group_control(
1929	Group_Control_Box_Shadow::get_type(),
1930	[
1931	'name' => 'badge_hover_shadow',
1932	'selector' => '{{WRAPPER}}:hover .ui-e-badge',
1933	]
1934	);
1935
1936	$this->end_controls_tab();
1937
1938	$this->end_controls_tabs();
1939
1940	$this->end_controls_section();
1941
1942	$this->start_controls_section(
1943	'section_animation',
1944	[
1945	'label' => esc_html__('Animations', 'uicore-elements'),
1946	'tab' => Controls_Manager::TAB_STYLE,
1947	]
1948	);
1949
1950	$this->add_control(
1951	'description_animation',
1952	[
1953	'label' => esc_html__( 'Description Hover Animation', 'uicore-elements' ),
1954	'type' => \Elementor\Controls_Manager::SELECT,
1955	'default' => '',
1956	'options' => [
1957	'' => esc_html__( 'None', 'uicore-elements' ),
1958	'ui-e-animation-description-show' => esc_html__( 'Show', 'uicore-elements' ),
1959	],
1960	'prefix_class' => '',
1961	'frontend_available' => true,
1962	'conditions' => [
1963	'relation' => 'or',
1964	'terms' => [
1965	[
1966	'name' => 'position',
1967	'operator' => '==',
1968	'value' => 'top',
1969	],
1970	[
1971	'relation' => 'and',
1972	'terms' => [
1973	[
1974	'name' => 'position',
1975	'operator' => 'in',
1976	'value' => ['left', 'right'],
1977	],
1978	[
1979	'name' => 'icon_inline',
1980	'operator' => '==',
1981	'value' => 'yes',
1982	],
1983	],
1984	],
1985	],
1986	],
1987
1988	]
1989	);
1990
1991	// 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
1992	$this->add_control(
1993	'description_prefix',
1994	[
1995	'label' => esc_html__( 'Prefix Class for Description with Readmore', 'uicore-elements' ),
1996	'type' => \Elementor\Controls_Manager::HIDDEN,
1997	'default' => 'readmore',
1998	'condition' => [
1999	'readmore' => 'yes',
2000	'description_animation' => 'ui-e-animation-description-show',
2001	],
2002	'prefix_class' => 'ui-e-has-',
2003	]
2004	);
2005
2006	$this->add_control(
2007	'readmore_animation',
2008	[
2009	'label' => esc_html__( 'Button Hover Animation', 'uicore-elements' ),
2010	'type' => \Elementor\Controls_Manager::SELECT,
2011	'default' => '',
2012	'options' => [
2013	'' => esc_html__( 'None', 'uicore-elements' ),
2014	'ui-e-animation-rm-show' => esc_html__( 'Show', 'uicore-elements' ),
2015	'ui-e-animation-rm-ico' => esc_html__( 'Icon', 'uicore-elements' ),
2016	],
2017	'prefix_class' => '',
2018	'frontend_available' => true,
2019	'condition' => [
2020	'readmore' => 'yes',
2021	'position!' => 'bottom',
2022	]
2023	]
2024	);
2025
2026	$this->add_control(
2027	'icon_animation',
2028	[
2029	'label' => esc_html__('Icon Hover Animation', 'uicore-elements'),
2030	'type' => Controls_Manager::SELECT,
2031	'prefix_class' => '',
2032	'default' => '',
2033	'options' => [
2034	'' => esc_html__('None', 'uicore-elements'),
2035	'ui-e-animation-ico-float' => esc_html__('Icon Float', 'uicore-elements'),
2036	'ui-e-animation-ico-grow' => esc_html__('Background Circle', 'uicore-elements'),
2037	'ui-e-animation-ico-slide' => esc_html__('Background Slide', 'uicore-elements'),
2038	],
2039	'condition' => [
2040	'icon_type!' => 'none',
2041	]
2042	]
2043	);
2044	$this->add_control(
2045	'icon_animation_background',
2046	[
2047	'label' => esc_html__( 'Color', 'uicore-elements' ),
2048	'type' => Controls_Manager::COLOR,
2049	'condition' => [
2050	'icon_animation' => [
2051	'ui-e-animation-ico-grow',
2052	'ui-e-animation-ico-slide'
2053	]
2054	],
2055	'selectors' => [
2056	'{{WRAPPER}}:hover .ui-e-icon-wrp:after' => 'background-color: {{VALUE}}',
2057	],
2058	]
2059	);
2060
2061	$this->add_control(
2062	'widget_animation',
2063	[
2064	'label' => esc_html__( 'Item Hover Animation', 'uicore-elements' ),
2065	'type' => \Elementor\Controls_Manager::SELECT,
2066	'default' => '',
2067	'options' => [
2068	'' => esc_html__( 'None', 'uicore-elements' ),
2069	'ui-e-animation-widget-zoom' => esc_html__( 'Zoom', 'uicore-elements' ),
2070	'ui-e-animation-widget-translate' => esc_html__( 'Translate', 'uicore-elements' ),
2071	],
2072	'prefix_class' => '',
2073	]
2074	);
2075
2076	$this->add_control(
2077	'widget_animation_zoom',
2078	[
2079	'label' => esc_html__( 'Zoom scale', 'uicore-elements' ),
2080	'type' => \Elementor\Controls_Manager::SLIDER,
2081	'size_units' => ['px'],
2082	'range' => [
2083	'px' => [
2084	'min' => .8,
2085	'max' => 1.3,
2086	'step' => 0.01,
2087	],
2088	],
2089	'default' => [
2090	'unit' => 'px',
2091	'size' => 1.12,
2092	],
2093	'condition' =>[
2094	'widget_animation' => 'ui-e-animation-widget-zoom',
2095	],
2096	'selectors' => [
2097	'{{WRAPPER}}' => '--ui-e-ico-box-widget-zoom: {{SIZE}}',
2098	],
2099	]
2100	);
2101
2102	$this->add_control(
2103	'widget_animation_translate',
2104	[
2105	'label' => esc_html__( 'Translate value', 'uicore-elements' ),
2106	'type' => \Elementor\Controls_Manager::SLIDER,
2107	'size_units' => ['px'],
2108	'range' => [
2109	'px' => [
2110	'min' => -50,
2111	'max' => 50,
2112	'step' => 1,
2113	],
2114	],
2115	'default' => [
2116	'unit' => 'px',
2117	'size' => -36,
2118	],
2119	'condition' =>[
2120	'widget_animation' => 'ui-e-animation-widget-translate',
2121	],
2122	'selectors' => [
2123	'{{WRAPPER}}' => '--ui-e-ico-box-widget-translate: {{SIZE}}{{UNIT}}',
2124	],
2125	]
2126	);
2127
2128	$this->end_controls_section();
2129
2130	$this->start_controls_section(
2131	'section_style_additional',
2132	[
2133	'label' => esc_html__('Additional', 'uicore-elements'),
2134	'tab' => Controls_Manager::TAB_STYLE,
2135	]
2136	);
2137
2138	$this->add_responsive_control(
2139	'content_padding',
2140	[
2141	'label' => esc_html__('Content Inner Padding', 'uicore-elements'),
2142	'type' => Controls_Manager::DIMENSIONS,
2143	'size_units' => ['px', 'em', '%'],
2144	'frontend_available' => true,
2145	'selectors' => [
2146	'{{WRAPPER}} .ui-e-ico-box' => '--ui-e-content-padding-top: {{TOP}}{{UNIT}};
2147	--ui-e-content-padding-right: {{RIGHT}}{{UNIT}};
2148	--ui-e-content-padding-bot: {{BOTTOM}}{{UNIT}};
2149	--ui-e-content-padding-left: {{LEFT}}{{UNIT}};'
2150	]
2151	]
2152	);
2153
2154	$this->end_controls_section();
2155	}
2156	protected function render()
2157	{
2158	$settings = $this->get_settings_for_display();
2159
2160	// Get the proper media
2161	$media_type = $settings['icon_type'];
2162	switch($media_type) {
2163
2164	case 'icon' :
2165	$media = $settings['selected_icon'];
2166	break;
2167
2168	case 'image' :
2169	$media = $settings['image'];
2170	$media_size = isset($settings['image_fullwidth']) ? 'large' : 'medium'; // Gets the proper media size.
2171	break;
2172	}
2173
2174	// Build the title
2175	if (! empty($settings['title_link_url']['url'])){
2176
2177	$hasTitleUrl = true;
2178	$this->add_link_attributes( 'title_link', $settings['title_link_url'] );
2179	$titleUrl = "<a {$this->get_render_attribute_string( 'title_link')}>";
2180
2181	} else { $hasTitleUrl = false;}
2182
2183	$title = '<'.esc_html($settings['title_size']).' class="ui-e-title">';
2184	$title .= $hasTitleUrl ? wp_kses_post($titleUrl) : ''; // url
2185	$title .= esc_html($settings['title_text']);
2186	$title .= $hasTitleUrl ? '</a>' : ''; // url closure
2187	$title .= '</'.esc_html($settings['title_size']).'>';
2188
2189	// Build the global Url
2190	if($settings['global_link'] && $settings['global_link_url']['url'] && !$this->is_edit_mode()){
2191
2192	$global_target = $settings['global_link_url']['is_external'] ? '_blank' : '_self';
2193	$this->add_render_attribute('global_link', 'onclick', "window.open('{$settings['global_link_url']['url']}', '$global_target')");
2194	}
2195
2196	// Build the subtitle
2197	$subtitle = $settings['sub_title_text'] != '' ? "<div class='ui-e-subtitle'> {$settings['sub_title_text']} </div>" : '';
2198
2199	// Build the readmore
2200	$readmore = $settings['readmore'];
2201	if($readmore){
2202
2203	$rmContent = $settings['readmore_text'];
2204	$rmIcon = $settings['readmore_icon']['value'] == '' ? false : true;
2205
2206	if(!empty($settings['readmore_link']['url'])){
2207
2208	$this->add_link_attributes( 'rm_link', $settings['readmore_link']);
2209	}
2210
2211	$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');
2212
2213	if (!empty($settings['button_css_id'])) {
2214	$this->add_render_attribute( 'rm_atts', 'id', esc_attr($settings['button_css_id']) );
2215	}
2216
2217	if ($settings['onclick']) {
2218	$this->add_render_attribute( 'rm_atts', 'onclick', esc_js($settings['onclick_event']) );
2219	}
2220	}
2221
2222	// Check the icon position and sets the inline (true puts title/subtitlte inside flex wrapper, false puts inside content)
2223	switch($settings['position']){
2224
2225	// Always true if top; always false if bottom and left/right checks the user choice
2226	case 'top' :
2227	$inline = true;
2228	break;
2229
2230	case 'bottom' :
2231	$inline = false;
2232	break;
2233
2234	default :
2235	$inline = $settings['icon_inline'] === 'yes' ? true : false;
2236	break;
2237	}
2238
2239	?>
2240
2241	<div class="ui-e-ico-box" <?php $this->print_render_attribute_string('global_link');?>>
2242
2243	<?php if($settings['badge']) : ?>
2244	<span class="ui-e-badge-wrp">
2245	<span class="ui-e-badge ui-e-<?php echo esc_attr($settings['badge_position']);?>"> <?php echo esc_html($settings['badge_text']);?> </span>
2246	</span>
2247	<?php endif; ?>
2248
2249	<div class='ui-e-flex-wrp'>
2250
2251	<?php if($media_type != 'none') : ?>
2252	<div class="ui-e-icon-wrp">
2253
2254	<?php if ($media_type == 'icon') {
2255	Icons_Manager::render_icon( $media, [ 'aria-hidden' => 'true' ] );
2256	} else {
2257	echo wp_get_attachment_image( $media['id'], $media_size );
2258	}
2259	?>
2260
2261	</div>
2262	<?php endif; ?>
2263
2264	<?php echo $inline ? '<div class="ui-e-title-wrp">' . wp_kses_post($title . $subtitle) . '</div>' : '' ;?>
2265
2266	</div>
2267
2268	<div class="ui-e-box-content">
2269	<?php echo $inline ? '' : '<div class="ui-e-title-wrp">' . wp_kses_post($title . $subtitle) . '</div>' ;?>
2270
2271	<div class="ui-e-description">
2272	<?php echo wp_kses_post($settings['description_text']);?>
2273	</div>
2274
2275	<?php if($readmore) : ?>
2276	<a <?php $this->print_render_attribute_string('rm_link'); $this->print_render_attribute_string('rm_atts');?>>
2277
2278	<?php echo esc_html($rmContent);?>
2279	<?php if($rmIcon) : ?>
2280	<span>
2281	<?php Icons_Manager::render_icon( $settings['readmore_icon'], [ 'aria-hidden' => 'true' ] ); ?>
2282	</span>
2283	<?php endif; ?>
2284	</a>
2285	<?php endif; ?>
2286
2287	</div>
2288	</div>
2289	<?php
2290	}
2291
2292	}
2293	\Elementor\Plugin::instance()->widgets_manager->register(new IconBox());
2294