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

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

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