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

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

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