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

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

1,271 lines 40.5 KB

Raw Download Zip

1	<?php
2	namespace UiCoreElements;
3
4	use Elementor\Repeater;
5	use Elementor\Controls_Manager;
6	use Elementor\Icons_Manager;
7	use Elementor\Group_Control_Border;
8	use Elementor\Group_Control_Box_Shadow;
9	use Elementor\Group_Control_Typography;
10	use Elementor\Group_Control_Background;
11	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
12	use UiCoreElements\UiCoreWidget;
13	use UiCoreELements\Helper;
14
15	defined('ABSPATH') \|\| exit();
16
17	/**
18	* Icon List
19	*
20	* @author Lucas Marini Falbo <lucas95@uicore.co>
21	* @since 1.0.0
22	*/
23
24	class IconList extends UiCoreWidget
25	{
26
27	public function get_name()
28	{
29	return 'uicore-icon-list';
30	}
31	public function get_title()
32	{
33	return esc_html__('Icon List', 'uicore-elements');
34	}
35	public function get_icon()
36	{
37	return 'eicon-post-list ui-e-widget';
38	}
39	public function get_categories()
40	{
41	return ['uicore'];
42	}
43	public function get_styles()
44	{
45	return ['icon-list'];
46	}
47	public function get_scripts()
48	{
49	return [];
50	}
51	public function get_keywords()
52	{
53	return ['icon', 'list', 'uicore'];
54	}
55	protected function register_controls()
56	{
57
58	$this->start_controls_section(
59	'section_layout',
60	[
61	'label' => esc_html__('Items', 'uicore-elements'),
62	]
63	);
64
65	$repeater = new Repeater();
66
67	$repeater->add_control(
68	'text',
69	[
70	'label' => esc_html__('Title', 'uicore-elements'),
71	'type' => Controls_Manager::TEXT,
72	'label_block' => true,
73	'placeholder' => esc_html__('List Item', 'uicore-elements'),
74	'default' => esc_html__('List Item', 'uicore-elements'),
75	'dynamic' => [
76	'active' => true,
77	],
78	]
79	);
80
81	$repeater->add_control(
82	'text_details',
83	[
84	'label' => esc_html__('Subtitle', 'uicore-elements'),
85	'type' => Controls_Manager::TEXT,
86	'label_block' => true,
87	'placeholder' => esc_html__('Subtitle', 'uicore-elements'),
88	'dynamic' => [
89	'active' => true,
90	],
91	]
92	);
93
94	$repeater->add_control(
95	'list_icon',
96	[
97	'label' => esc_html__('Icon', 'uicore-elements'),
98	'type' => Controls_Manager::ICONS,
99	'label_block' => false,
100	'skin' => 'inline',
101	'default' => [
102	'value' => 'fas fa-check',
103	'library' => 'fa-solid',
104	],
105	]
106	);
107
108	$repeater->add_control(
109	'img',
110	[
111	'label' => esc_html__('Image', 'uicore-elements'),
112	'type' => Controls_Manager::MEDIA,
113	'dynamic' => [
114	'active' => true,
115	],
116	'label_block' => false,
117
118	]
119	);
120
121	$repeater->add_control(
122	'link',
123	[
124	'label' => esc_html__('Link', 'uicore-elements'),
125	'type' => Controls_Manager::URL,
126	'options' => [ 'url', 'is_external', 'nofollow' ],
127	'default' => [
128	'url' => '',
129	'is_external' => false,
130	'nofollow' => false,
131	],
132	'dynamic' => [
133	'active' => true,
134	],
135	'label_block' => true,
136	]
137	);
138
139	$this->add_control(
140	'icon_list',
141	[
142	'label' => '',
143	'type' => Controls_Manager::REPEATER,
144	'fields' => $repeater->get_controls(),
145	'default' => [
146	[
147	'text' => esc_html__('List Item #1', 'uicore-elements'),
148	],
149	[
150	'text' => esc_html__('List Item #2', 'uicore-elements'),
151	],
152	[
153	'text' => esc_html__('List Item #3', 'uicore-elements'),
154	],
155	],
156	'title_field' => '{{{ elementor.helpers.renderIcon( this, list_icon, {}, "i", "panel" ) \|\| \'<i class="{{ icon }}" aria-hidden="true"></i>\' }}} {{{ text }}}',
157	]
158	);
159
160	$this->add_responsive_control(
161	'columns',
162	[
163	'label' => esc_html__('Columns', 'uicore-elements'),
164	'type' => Controls_Manager::SELECT,
165	'default' => '1',
166	'tablet_default' => '1',
167	'mobile_default' => '1',
168	'options' => [
169	'1' => '1',
170	'2' => '2',
171	'3' => '3',
172	'4' => '4',
173	'5' => '5',
174	'6' => '6',
175	],
176	'render_type' => 'template',
177	'selectors' => [
178	'{{WRAPPER}} ul' => 'grid-template-columns: repeat({{SIZE}}, 1fr);',
179	],
180	'separator' => 'before',
181	]
182	);
183
184	$this->add_responsive_control(
185	'list_item_space_between',
186	[
187	'label' => esc_html__('Grid Gap', 'uicore-elements'),
188	'type' => Controls_Manager::SLIDER,
189	'range' => [
190	'px' => [
191	'min' => 0,
192	'max' => 50,
193	],
194	],
195	'default' => [
196	'unit' => 'px',
197	'size' => 10,
198	],
199	'selectors' => [
200	'{{WRAPPER}} li' => '--ui-e-grid-gap: {{SIZE}}{{UNIT}};',
201	],
202	]
203	);
204
205	$this->add_control(
206	'show_number_icon',
207	[
208	'label' => esc_html__('Show Number Count', 'uicore-elements'),
209	'type' => Controls_Manager::SWITCHER,
210	]
211	);
212
213	$this->add_control(
214	'vertical_alignment_number',
215	[
216	'label' => esc_html__('Number Vertical Alignment', 'uicore-elements'),
217	'type' => Controls_Manager::CHOOSE,
218	'toggle' => false,
219	'default' => 'center',
220	'options' => [
221	'start' => [
222	'title' => esc_html__('Top', 'uicore-elements'),
223	'icon' => 'eicon-v-align-top',
224	],
225	'center' => [
226	'title' => esc_html__('Center', 'uicore-elements'),
227	'icon' => 'eicon-v-align-middle',
228	],
229	'end' => [
230	'title' => esc_html__('Bottom', 'uicore-elements'),
231	'icon' => 'eicon-v-align-bottom',
232	],
233	],
234	'condition' => [
235	'show_number_icon' => 'yes'
236	],
237	'selectors' => [
238	'{{WRAPPER}} .ui-e-number' => 'align-self: {{VALUE}}',
239	],
240	]
241	);
242
243	$this->add_control(
244	'connector_line',
245	[
246	'label' => esc_html__('Connector Line', 'uicore-elements'),
247	'type' => Controls_Manager::SWITCHER,
248	'prefix_class' => 'ui-e-connector-line-'
249	]
250	);
251
252	$this->add_control(
253	'title_tags',
254	[
255	'label' => esc_html__('Title HTML Tag', 'uicore-elements'),
256	'type' => Controls_Manager::SELECT,
257	'default' => 'span',
258	'options' => Helper::get_title_tags(),
259	]
260	);
261
262	$this->add_responsive_control(
263	'icon_position',
264	[
265	'label' => esc_html__('Icon Position', 'uicore-elements'),
266	'type' => Controls_Manager::CHOOSE,
267	'toggle' => false,
268	'options' => [
269	'left' => [
270	'title' => esc_html__('Left', 'uicore-elements'),
271	'icon' => 'eicon-h-align-left',
272	],
273	'right' => [
274	'title' => esc_html__('Right', 'uicore-elements'),
275	'icon' => 'eicon-h-align-right',
276	],
277	],
278	'default' => 'left',
279	'prefix_class' => 'ui-e-icon-',
280	'separator' => 'before'
281	]
282	);
283
284	$this->add_responsive_control(
285	'vertical_alignment',
286	[
287	'label' => esc_html__('Icon Vertical Alignment', 'uicore-elements'),
288	'type' => Controls_Manager::CHOOSE,
289	'toggle' => false,
290	'options' => [
291	'start' => [
292	'title' => esc_html__('Top', 'uicore-elements'),
293	'icon' => 'eicon-v-align-top',
294	],
295	'center' => [
296	'title' => esc_html__('Center', 'uicore-elements'),
297	'icon' => 'eicon-v-align-middle',
298	],
299	'end' => [
300	'title' => esc_html__('Bottom', 'uicore-elements'),
301	'icon' => 'eicon-v-align-bottom',
302	],
303	],
304	'default' => 'center',
305	'selectors' => [
306	'{{WRAPPER}} .ui-e-icon' => 'align-self: {{VALUE}}',
307	],
308	]
309	);
310
311	$this->add_control(
312	'vertical_alignment_offset',
313	[
314	'label' => esc_html__( 'Vertical Alignment Offset', 'uicore-elements' ),
315	'type' => \Elementor\Controls_Manager::SLIDER,
316	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
317	'range' => [
318	'px' => [
319	'min' => -25,
320	'max' => 25,
321	'step' => 1,
322	],
323	'%' => [
324	'min' => -100,
325	'max' => 100,
326	'step' => 5,
327	],
328	],
329	'default' => [
330	'size' => 0,
331	'unit' => 'px',
332	],
333	'selectors' => [
334	'{{WRAPPER}} .ui-e-icon' => 'transform: translate3d(0,{{SIZE}}{{UNIT}},0);',
335	],
336	]
337	);
338
339	$this->add_control(
340	'content_position',
341	[
342	'label' => esc_html__('Content Position', 'uicore-elements'),
343	'type' => Controls_Manager::CHOOSE,
344	'toggle' => false,
345	'options' => [
346	'left' => [
347	'title' => esc_html__('Left', 'uicore-elements'),
348	'icon' => 'eicon-h-align-left',
349	],
350	'right' => [
351	'title' => esc_html__('Right', 'uicore-elements'),
352	'icon' => 'eicon-h-align-right',
353	],
354	],
355	'default' => is_rtl() ? 'right' : 'left',
356	'prefix_class' => 'ui-e-',
357	]
358	);
359
360	$this->add_responsive_control(
361	'list_item_align',
362	[
363	'label' => esc_html__('Alignment', 'uicore-elements'),
364	'type' => Controls_Manager::CHOOSE,
365	'toggle' => false,
366	'options' => [
367	'left' => [
368	'title' => esc_html__('Left', 'uicore-elements'),
369	'icon' => 'eicon-h-align-left',
370	],
371	'center' => [
372	'title' => esc_html__('Center', 'uicore-elements'),
373	'icon' => 'eicon-h-align-center',
374	],
375	'right' => [
376	'title' => esc_html__('Right', 'uicore-elements'),
377	'icon' => 'eicon-h-align-right',
378	],
379	],
380	'default' => is_rtl() ? 'right' : 'left',
381	'prefix_class' => 'elementor%s-align-',
382	]
383	);
384
385	$this->end_controls_section();
386
387	$this->start_controls_section(
388	'section_list_items',
389	[
390	'label' => esc_html__('List Item', 'uicore-elements'),
391	'tab' => Controls_Manager::TAB_STYLE,
392	]
393	);
394
395	$this->start_controls_tabs(
396	'list_item_tabs'
397	);
398
399	$this->start_controls_tab(
400	'list_item_tabs_normal',
401	[
402	'label' => esc_html__('Normal', 'uicore-elements'),
403	]
404	);
405
406	$this->add_group_control(
407	Group_Control_Background::get_type(),
408	[
409	'name' => 'list_item_bg_color',
410	'selector' => '{{WRAPPER}} .ui-e-wrap',
411	]
412	);
413
414	$this->add_group_control(
415	Group_Control_Border::get_type(),
416	[
417	'name' => 'list_item_border',
418	'label' => esc_html__('Border', 'uicore-elements'),
419	'selector' => '{{WRAPPER}} .ui-e-wrap',
420	]
421	);
422
423	$this->add_group_control(
424	Group_Control_Box_Shadow::get_type(),
425	[
426	'name' => 'list_item_box_shadow',
427	'label' => esc_html__('Box Shadow', 'uicore-elements'),
428	'selector' => '{{WRAPPER}} .ui-e-wrap',
429	]
430	);
431
432	$this->end_controls_tab();
433
434	$this->start_controls_tab(
435	'list_item_tabs_hover',
436	[
437	'label' => esc_html__('Hover', 'uicore-elements'),
438	]
439	);
440
441	$this->add_group_control(
442	Group_Control_Background::get_type(),
443	[
444	'name' => 'list_item_hover_bg_color',
445	'selector' => '{{WRAPPER}} .ui-e-wrap:hover',
446	]
447	);
448
449	$this->add_control(
450	'list_item_hover_border',
451	[
452	'label' => esc_html__('Border Color', 'uicore-elements'),
453	'type' => Controls_Manager::COLOR,
454	'selectors' => [
455	'{{WRAPPER}} .ui-e-wrap:hover' => 'border-color: {{VALUE}} !important',
456	],
457	'condition' => [
458	'list_item_border_border!' => ''
459	]
460	]
461	);
462
463	$this->add_group_control(
464	Group_Control_Box_Shadow::get_type(),
465	[
466	'name' => 'list_item_box_shadow_hover',
467	'label' => esc_html__('Box Shadow', 'uicore-elements'),
468	'selector' => '{{WRAPPER}} .ui-e-wrap:hover',
469	]
470	);
471
472	$this->add_responsive_control(
473	'list_item_transition',
474	[
475	'label' => esc_html__('Transition', 'uicore-elements'),
476	'type' => Controls_Manager::SLIDER,
477	'size_units' => ['s'],
478	'range' => [
479	's' => [
480	'min' => 0.01,
481	'max' => 1,
482	],
483	],
484	'default' => [
485	'unit' => 's',
486	'size' => 0.2,
487	],
488	'selectors' => [
489	'{{WRAPPER}} .ui-e-wrap' => '--ui-e-transition: {{SIZE}}{{UNIT}}',
490	],
491	]
492	);
493
494	$this->end_controls_tab();
495
496	$this->end_controls_tabs();
497
498	$this->add_control(
499	'hr',
500	[
501	'type' => \Elementor\Controls_Manager::DIVIDER,
502	]
503	);
504
505	$this->add_responsive_control(
506	'list_item_border_radius',
507	[
508	'label' => esc_html__('Border Radius', 'uicore-elements'),
509	'type' => Controls_Manager::DIMENSIONS,
510	'size_units' => ['px', '%'],
511	'selectors' => [
512	'{{WRAPPER}} .ui-e-wrap' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
513	],
514	]
515	);
516
517	$this->add_responsive_control(
518	'list_item_padding',
519	[
520	'label' => esc_html__('Padding', 'uicore-elements'),
521	'type' => Controls_Manager::DIMENSIONS,
522	'size_units' => ['px', 'em', '%'],
523	'selectors' => [
524	'{{WRAPPER}} .ui-e-wrap' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} ',
525	],
526	]
527	);
528
529	$this->add_responsive_control(
530	'list_item_height',
531	[
532	'label' => esc_html__('Height', 'uicore-elements'),
533	'type' => Controls_Manager::SLIDER,
534	'range' => [
535	'px' => [
536	'min' => 1,
537	'max' => 200,
538	],
539	],
540	'selectors' => [
541	'{{WRAPPER}} .ui-e-wrap' => 'min-height: {{SIZE}}{{UNIT}}',
542	],
543	]
544	);
545
546	$this->add_responsive_control(
547	'list_item_spacing',
548	[
549	'label' => esc_html__('Space between elements', 'uicore-elements'),
550	'type' => Controls_Manager::SLIDER,
551	'range' => [
552	'px' => [
553	'min' => 1,
554	'max' => 80,
555	],
556	],
557	'default' => [
558	'unit' => 'px',
559	'size' => 10,
560	],
561	'selectors' => [
562	'{{WRAPPER}} .ui-e-wrap' => 'gap: {{SIZE}}{{UNIT}}',
563	],
564	]
565	);
566
567	$this->end_controls_section();
568
569	$this->start_controls_section(
570	'section_icon',
571	[
572	'label' => esc_html__('Number Count', 'uicore-elements'),
573	'tab' => Controls_Manager::TAB_STYLE,
574	'condition' => [
575	'show_number_icon' => 'yes',
576	],
577	]
578	);
579
580	$this->start_controls_tabs('tabs_number_icon_style');
581
582	$this->start_controls_tab(
583	'tab_number_icon_normal',
584	[
585	'label' => esc_html__('Normal', 'uicore-elements'),
586	]
587	);
588
589	$this->add_control(
590	'number_icon_color',
591	[
592	'label' => esc_html__('Color', 'uicore-elements'),
593	'type' => Controls_Manager::COLOR,
594	'selectors' => [
595	'{{WRAPPER}} .ui-e-number span' => 'color: {{VALUE}} ',
596	],
597	]
598	);
599
600	$this->add_control(
601	'icon_bg_color',
602	[
603	'label' => esc_html__('Background Color', 'uicore-elements'),
604	'type' => Controls_Manager::COLOR,
605	'selectors' => [
606	'{{WRAPPER}} .ui-e-number' => 'background-color: {{VALUE}}',
607	],
608	]
609	);
610
611	$this->add_group_control(
612	Group_Control_Border::get_type(),
613	[
614	'name' => 'icon_number_border',
615	'label' => esc_html__('Border', 'uicore-elements'),
616	'selector' => '{{WRAPPER}} .ui-e-number',
617	]
618	);
619
620	$this->add_responsive_control(
621	'icon_number_border_radius',
622	[
623	'label' => esc_html__('Border Radius', 'uicore-elements'),
624	'type' => Controls_Manager::DIMENSIONS,
625	'size_units' => ['px', '%'],
626	'selectors' => [
627	'{{WRAPPER}} .ui-e-number' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} ',
628	],
629	]
630	);
631
632	$this->add_responsive_control(
633	'icon_number_padding',
634	[
635	'label' => esc_html__('Padding', 'uicore-elements'),
636	'type' => Controls_Manager::DIMENSIONS,
637	'size_units' => ['px', 'em', '%'],
638	'selectors' => [
639	'{{WRAPPER}} .ui-e-number' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
640	],
641	]
642	);
643
644	$this->add_responsive_control(
645	'icon_number_margin',
646	[
647	'label' => esc_html__('Margin', 'uicore-elements'),
648	'type' => Controls_Manager::DIMENSIONS,
649	'size_units' => ['px', 'em', '%'],
650	'selectors' => [
651	'{{WRAPPER}} .ui-e-number' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
652	],
653	]
654	);
655
656	$this->add_group_control(
657	Group_Control_Typography::get_type(),
658	[
659	'name' => 'number_icon_typography',
660	'selector' => '{{WRAPPER}} .ui-e-number span',
661	]
662	);
663
664	$this->end_controls_tab();
665
666	$this->start_controls_tab(
667	'tab_number_icon_hover',
668	[
669	'label' => esc_html__('Hover', 'uicore-elements'),
670	]
671	);
672
673	$this->add_control(
674	'number_icon_color_hover',
675	[
676	'label' => esc_html__('Color', 'uicore-elements'),
677	'type' => Controls_Manager::COLOR,
678	'selectors' => [
679	'{{WRAPPER}} ul li:hover .ui-e-number span' => 'color: {{VALUE}} ',
680	],
681	]
682	);
683
684	$this->add_control(
685	'number_icon_bg_color_hover',
686	[
687	'label' => esc_html__('Background Color', 'uicore-elements'),
688	'type' => Controls_Manager::COLOR,
689	'selectors' => [
690	'{{WRAPPER}} ul li:hover .ui-e-number' => 'background-color: {{VALUE}}',
691	],
692	]
693	);
694
695	$this->add_control(
696	'number_icon_border_color_hover',
697	[
698	'label' => esc_html__('Border Color', 'uicore-elements'),
699	'type' => Controls_Manager::COLOR,
700	'selectors' => [
701	'{{WRAPPER}} ul li:hover .ui-e-number' => 'border-color: {{VALUE}}',
702	],
703	'condition' => [
704	'icon_number_border_border!' => ''
705	]
706	]
707	);
708
709	$this->end_controls_tab();
710
711	$this->end_controls_tabs();
712
713	$this->end_controls_section();
714
715	$this->start_controls_section(
716	'section_text_style',
717	[
718	'label' => esc_html__('Title / Subtitle', 'uicore-elements'),
719	'tab' => Controls_Manager::TAB_STYLE,
720	]
721	);
722
723	$this->start_controls_tabs('tabs_mode_style');
724	$this->start_controls_tab(
725	'tab_normal_mode_normal',
726	[
727	'label' => esc_html__('Normal', 'uicore-elements'),
728	]
729	);
730
731	$this->add_control(
732	'title_heading',
733	[
734	'label' => esc_html__('Title', 'uicore-elements'),
735	'type' => Controls_Manager::HEADING,
736	]
737	);
738
739	$this->add_control(
740	'title_color',
741	[
742	'label' => esc_html__('Color', 'uicore-elements'),
743	'type' => Controls_Manager::COLOR,
744	'selectors' => [
745	'{{WRAPPER}} .ui-e-title ' => 'color: {{VALUE}} ',
746	],
747	]
748	);
749
750	$this->add_group_control(
751	Group_Control_Typography::get_type(),
752	[
753	'name' => 'title_typography',
754	'selector' => '{{WRAPPER}} .ui-e-title',
755	]
756	);
757
758	$this->add_control(
759	'subtitle_heading',
760	[
761	'label' => esc_html__('Subtitle', 'uicore-elements'),
762	'type' => Controls_Manager::HEADING,
763	'separator' => 'before',
764	]
765	);
766
767	$this->add_control(
768	'subtitle_color',
769	[
770	'label' => esc_html__('Color', 'uicore-elements'),
771	'type' => Controls_Manager::COLOR,
772	'selectors' => [
773	'{{WRAPPER}} .ui-e-text' => 'color: {{VALUE}} ',
774	],
775	]
776	);
777
778	$this->add_group_control(
779	Group_Control_Typography::get_type(),
780	[
781	'name' => 'sub_title_typography',
782	'selector' => '{{WRAPPER}} .ui-e-text',
783	]
784	);
785
786	$this->add_responsive_control(
787	'subtitle_margin',
788	[
789	'label' => esc_html__('Margin', 'uicore-elements'),
790	'type' => Controls_Manager::DIMENSIONS,
791	'size_units' => ['px', 'em', '%'],
792	'selectors' => [
793	'{{WRAPPER}} .ui-e-text' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
794	],
795	]
796	);
797
798	$this->end_controls_tab();
799
800	$this->start_controls_tab(
801	'tab_hover_mode_normal',
802	[
803	'label' => esc_html__('Hover', 'uicore-elements'),
804	]
805	);
806
807	$this->add_control(
808	'title_color_hover',
809	[
810	'label' => esc_html__('Title Color', 'uicore-elements'),
811	'type' => Controls_Manager::COLOR,
812	'selectors' => [
813	'{{WRAPPER}} ul li:hover .ui-e-title' => 'color: {{VALUE}}',
814	],
815	]
816	);
817
818	$this->add_control(
819	'title_link_color',
820	[
821	'label' => esc_html__('Linked Title Color', 'uicore-elements'),
822	'type' => Controls_Manager::COLOR,
823	'selectors' => [
824	'{{WRAPPER}} ul li:hover a .ui-e-title ' => 'color: {{VALUE}} ',
825	],
826	]
827	);
828
829	$this->add_control(
830	'subtitle_color_hover',
831	[
832	'label' => esc_html__('Subtitle Color', 'uicore-elements'),
833	'type' => Controls_Manager::COLOR,
834	'selectors' => [
835	'{{WRAPPER}} ul li:hover .ui-e-text' => 'color: {{VALUE}}',
836	],
837	'separator' => 'before',
838	]
839	);
840
841	$this->add_control(
842	'subtitle_link_color',
843	[
844	'label' => esc_html__('Linked Subtitle Color', 'uicore-elements'),
845	'type' => Controls_Manager::COLOR,
846	'selectors' => [
847	'{{WRAPPER}} ul li:hover a .ui-e-text ' => 'color: {{VALUE}} ',
848	],
849	]
850	);
851
852	$this->end_controls_tab();
853
854	$this->end_controls_tabs();
855
856	$this->end_controls_section();
857
858	$this->start_controls_section(
859	'section_icon_style',
860	[
861	'label' => esc_html__('Icon', 'uicore-elements'),
862	'tab' => Controls_Manager::TAB_STYLE,
863	]
864	);
865
866	$this->add_control(
867	'icon_size',
868	[
869	'label' => esc_html__( 'Icon Size', 'uicore-elements' ),
870	'type' => \Elementor\Controls_Manager::SLIDER,
871	'size_units' => [ 'px'],
872	'range' => [
873	'px' => [
874	'min' => 0,
875	'max' => 80,
876	'step' => 3,
877	],
878	],
879	'default' => [
880	'unit' => 'px',
881	'size' => 15,
882	],
883	'selectors' => [
884	'{{WRAPPER}} .ui-e-icon' => '--ui-e-icon-size: {{SIZE}}{{UNIT}};',
885	],
886	]
887	);
888
889	$this->start_controls_tabs('tabs_mode_style1');
890	$this->start_controls_tab(
891	'tab_normal_mode_normal1',
892	[
893	'label' => esc_html__('Normal', 'uicore-elements'),
894	]
895	);
896
897	$this->add_control(
898	'icon_color',
899	[
900	'label' => esc_html__('Color', 'uicore-elements'),
901	'type' => Controls_Manager::COLOR,
902	'global' => [
903	'default' => Global_Colors::COLOR_PRIMARY,
904	],
905	'selectors' => [
906	'{{WRAPPER}} .ui-e-icon' => '--ui-e-icon-color: {{VALUE}}',
907	],
908	]
909	);
910
911	$this->add_control(
912	'right_icon_bg_color',
913	[
914	'label' => esc_html__('Background Color', 'uicore-elements'),
915	'type' => Controls_Manager::COLOR,
916	'selectors' => [
917	'{{WRAPPER}} .ui-e-icon ' => 'background: {{VALUE}} ;'
918	],
919	]
920	);
921
922	$this->add_group_control(
923	Group_Control_Border::get_type(),
924	[
925	'name' => 'icon_border',
926	'label' => esc_html__('Border', 'uicore-elements'),
927	'selector' => '{{WRAPPER}} .ui-e-icon',
928	]
929	);
930
931	$this->add_responsive_control(
932	'icon_border_radius',
933	[
934	'label' => esc_html__('Border Radius', 'uicore-elements'),
935	'type' => Controls_Manager::DIMENSIONS,
936	'size_units' => ['px', '%'],
937	'selectors' => [
938	'{{WRAPPER}} .ui-e-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} ;',
939	],
940	]
941	);
942
943	$this->add_responsive_control(
944	'icon_padding',
945	[
946	'label' => esc_html__('Padding', 'uicore-elements'),
947	'type' => Controls_Manager::DIMENSIONS,
948	'size_units' => ['px', 'em', '%'],
949	'default' => [
950	'unit' => 'px',
951	'size' => 8,
952	],
953	'selectors' => [
954	'{{WRAPPER}} .ui-e-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
955	],
956	]
957	);
958
959	$this->add_responsive_control(
960	'icon_margin',
961	[
962	'label' => esc_html__('Margin', 'uicore-elements'),
963	'type' => Controls_Manager::DIMENSIONS,
964	'size_units' => ['px', 'em', '%'],
965	'selectors' => [
966	'{{WRAPPER}} .ui-e-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
967	],
968	]
969	);
970
971	$this->end_controls_tab();
972
973	$this->start_controls_tab(
974	'tab_hover_mode_normal1',
975	[
976	'label' => esc_html__('Hover', 'uicore-elements'),
977	]
978	);
979
980	$this->add_control(
981	'icon_color_hover',
982	[
983	'label' => esc_html__('Color', 'uicore-elements'),
984	'type' => Controls_Manager::COLOR,
985	'selectors' => [
986	'{{WRAPPER}} .ui-e-wrap:hover .ui-e-icon' => 'color: {{VALUE}} !important;',
987	'{{WRAPPER}} .ui-e-wrap:hover .ui-e-icon i' => 'color: {{VALUE}} !important;',
988	'{{WRAPPER}} .ui-e-wrap:hover .ui-e-icon svg' => 'fill: {{VALUE}} !important;',
989	],
990	]
991	);
992
993	$this->add_control(
994	'icon_bg_color_hover',
995	[
996	'label' => esc_html__('Background Color', 'uicore-elements'),
997	'type' => Controls_Manager::COLOR,
998	'selectors' => [
999	'{{WRAPPER}} .ui-e-wrap:hover .ui-e-icon' => 'background-color: {{VALUE}} ;',
1000	],
1001	]
1002	);
1003
1004	$this->add_control(
1005	'icon_border_color_hover',
1006	[
1007	'label' => esc_html__('Border Color', 'uicore-elements'),
1008	'type' => Controls_Manager::COLOR,
1009	'condition' => [
1010	'icon_border_border!' => '',
1011	],
1012	'selectors' => [
1013	'{{WRAPPER}} .ui-e-wrap:hover .ui-e-icon' => 'border-color: {{VALUE}} ;',
1014	],
1015	]
1016	);
1017
1018	$this->end_controls_tab();
1019
1020	$this->end_controls_tabs();
1021
1022	$this->end_controls_section();
1023
1024	$this->start_controls_section(
1025	'section_line_style',
1026	[
1027	'label' => esc_html__('Connector Line', 'uicore-elements'),
1028	'tab' => Controls_Manager::TAB_STYLE,
1029	'condition' => [
1030	'connector_line' => 'yes',
1031	],
1032	]
1033	);
1034
1035	$this->add_control(
1036	'line_color',
1037	[
1038	'label' => esc_html__( 'Line Color', 'uicore-elements' ),
1039	'type' => \Elementor\Controls_Manager::COLOR,
1040	'default' => '#333',
1041	'global' => [
1042	'default' => Global_Colors::COLOR_PRIMARY,
1043	],
1044	'selectors' => [
1045	'{{WRAPPER}} li:after' => 'background-color: {{VALUE}}',
1046	],
1047	]
1048	);
1049
1050	$this->add_responsive_control(
1051	'line_thick',
1052	[
1053	'label' => esc_html__( 'Line Thickness', 'uicore-elements' ),
1054	'type' => \Elementor\Controls_Manager::SLIDER,
1055	'size_units' => [ 'px'],
1056	'range' => [
1057	'px' => [
1058	'min' => 1,
1059	'max' => 10,
1060	'step' => 1,
1061	],
1062	],
1063	'default' => [
1064	'unit' => 'px',
1065	'size' => 1,
1066	],
1067	'selectors' => [
1068	'{{WRAPPER}} li:after' => 'width: {{SIZE}}{{UNIT}};',
1069	],
1070	]
1071	);
1072
1073	$this->add_responsive_control(
1074	'line_horizontal_offset',
1075	[
1076	'label' => esc_html__( 'Line Horizontal Offset', 'uicore-elements' ),
1077	'type' => \Elementor\Controls_Manager::SLIDER,
1078	'size_units' => [ 'px'],
1079	'range' => [
1080	'px' => [
1081	'min' => 0,
1082	'max' => 50,
1083	'step' => 1,
1084	],
1085	],
1086	'default' => [
1087	'unit' => 'px',
1088	'size' => 5,
1089	],
1090	'selectors' => [
1091	'{{WRAPPER}} li:after' => '{{icon_position.VALUE}}: {{SIZE}}{{UNIT}};',
1092	],
1093	]
1094	);
1095
1096	$this->add_responsive_control(
1097	'line_vertical_offset',
1098	[
1099	'label' => esc_html__( 'Line Vertical Offset', 'uicore-elements' ),
1100	'type' => \Elementor\Controls_Manager::SLIDER,
1101	'size_units' => [ 'px'],
1102	'range' => [
1103	'px' => [
1104	'min' => 0,
1105	'max' => 100,
1106	'step' => 1,
1107	],
1108	],
1109	'default' => [
1110	'unit' => 'px',
1111	'size' => 15,
1112	],
1113	'selectors' => [
1114	'{{WRAPPER}} li:after' => 'top: {{SIZE}}{{UNIT}};',
1115	],
1116	]
1117	);
1118
1119	$this->end_controls_section();
1120
1121	$this->start_controls_section(
1122	'section_image_style',
1123	[
1124	'label' => esc_html__('Image', 'uicore-elements'),
1125	'tab' => Controls_Manager::TAB_STYLE,
1126	]
1127	);
1128
1129	$this->add_group_control(
1130	Group_Control_Border::get_type(),
1131	[
1132	'name' => 'image_border',
1133	'label' => esc_html__('Border', 'uicore-elements'),
1134	'selector' => '{{WRAPPER}} .ui-e-img img',
1135	]
1136	);
1137
1138	$this->add_responsive_control(
1139	'border_radius',
1140	[
1141	'label' => esc_html__('Border Radius', 'uicore-elements'),
1142	'type' => Controls_Manager::DIMENSIONS,
1143	'size_units' => ['px', '%'],
1144	'selectors' => [
1145	'{{WRAPPER}} .ui-e-img img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} ;',
1146	],
1147	]
1148	);
1149
1150	$this->add_responsive_control(
1151	'image_margin',
1152	[
1153	'label' => esc_html__('Margin', 'uicore-elements'),
1154	'type' => Controls_Manager::DIMENSIONS,
1155	'size_units' => ['px', 'em', '%'],
1156	'selectors' => [
1157	'{{WRAPPER}} .ui-e-img' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1158	],
1159	]
1160	);
1161
1162	//size
1163	$this->add_responsive_control(
1164	'image_size',
1165	[
1166	'label' => esc_html__('Size', 'uicore-elements'),
1167	'type' => Controls_Manager::SLIDER,
1168	'range' => [
1169	'px' => [
1170	'min' => 10,
1171	'max' => 100,
1172	],
1173	],
1174	'default' => [
1175	'unit' => 'px',
1176	'size' => 40,
1177	],
1178	'selectors' => [
1179	'{{WRAPPER}} .ui-e-img img' => 'width: {{SIZE}}{{UNIT}};',
1180	],
1181	]
1182	);
1183
1184	$this->end_controls_section();
1185	}
1186	protected function render()
1187	{
1188
1189	$settings = $this->get_settings_for_display();
1190	$this->add_render_attribute('icon_list', 'class', $settings['show_number_icon'] === 'yes' ? 'ui-e-number' : '');
1191	?>
1192	<ul>
1193
1194	<?php
1195	$i = 1; // counter
1196	foreach ($settings['icon_list'] as $index => $item) :
1197
1198	// Prepare the atts
1199	$repeater_setting_key = $this->get_repeater_setting_key('text', 'icon_list', $index);
1200	$tag = $settings['title_tags'];
1201	$this->add_render_attribute($repeater_setting_key, 'class', 'elementor-icon-list-text');
1202	$this->add_render_attribute('list_title_tags', 'class', 'ui-e-title', true);
1203
1204	// Check if current item has link
1205	if (!empty( $item['link']['url'] ) ) {
1206	$link_key = 'link_' . $index; // creates an unique link key via index
1207	$this->add_link_attributes( $link_key, $item['link'] ); // render links atts
1208
1209	$wrapper = "<a class='ui-e-wrap' {$this->get_render_attribute_string($link_key)}>"; // creates the html
1210	$wrapperClosure = 'a';
1211	} else {
1212	$wrapper = '<div class="ui-e-wrap">'; // if it hasn't, creates basic div wrapper
1213	$wrapperClosure = 'div';
1214	}
1215
1216	// Check if the current item is below another one so we can start apply spacing
1217	if ($i > intval($settings['columns'])) {
1218	$this->add_render_attribute('list_class', 'class', 'ui-e-spacing', true);
1219	}
1220	?>
1221	<li <?php $this->print_render_attribute_string('list_class');?>>
1222
1223	<?php echo wp_kses_post($wrapper); ?>
1224
1225	<?php if($settings['show_number_icon'] == 'yes') : ?>
1226	<div class='ui-e-number'>
1227	<span> <?php echo esc_html($i);?> </span>
1228	</div>
1229	<?php endif; ?>
1230
1231	<?php if (!empty($item['img']['url'])) : ?>
1232	<div class="ui-e-img">
1233	<?php
1234	$thumb_url = $item['img']['url'];
1235	if ($thumb_url) {
1236	echo wp_kses_post(wp_get_attachment_image(
1237	$item['img']['id'],
1238	'medium',
1239	false,
1240	[
1241	'alt' => esc_html($item['text'])
1242	]
1243	));
1244	}
1245	?>
1246	</div>
1247	<?php endif; ?>
1248
1249	<div class="ui-e-content">
1250	<<?php echo esc_html($tag);?> <?php $this->print_render_attribute_string('list_title_tags');?>>
1251	<?php echo wp_kses_post($item['text']); ?>
1252	</<?php echo esc_html($tag);?>>
1253	<p class="ui-e-text"> <?php echo wp_kses_post($item['text_details']);?> </p>
1254	</div>
1255
1256	<?php if (!empty($item['list_icon']['value'])) : ?>
1257	<div class="ui-e-icon">
1258	<?php Icons_Manager::render_icon($item['list_icon'], ['aria-hidden' => 'true']); ?>
1259	</div>
1260	<?php endif; ?>
1261
1262	</<?php echo esc_html($wrapperClosure)?>>
1263	</li>
1264	<?php
1265	$i++; // increase counter
1266	endforeach; ?>
1267	</ul>
1268	<?php
1269	}
1270	}
1271	\Elementor\Plugin::instance()->widgets_manager->register(new IconList());