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

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

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