easy-elements / widgets / feature-list / feature-list.php

feature-list.php in Easy Elements for Elementor – Addons & Website Templates 1.4.0, at widgets/feature-list/feature-list.php

798 lines 28.2 KB

Raw Download Zip

1	<?php
2	namespace Easyel\EasyElements\Widgets;
3	use Elementor\Utils;
4	use Elementor\Controls_Manager;
5	use Elementor\Responsive_Control;
6
7	defined( 'ABSPATH' ) \|\| die();
8	class Easyel_Feature_List__Widget extends \Elementor\Widget_Base {
9
10	public function get_name() {
11	return 'eel-feature-list';
12	}
13
14	public function get_title() {
15	return esc_html__( 'Feature List', 'easy-elements' );
16	}
17
18	public function get_icon() {
19	return 'easyicon easyelIcon-service-list';
20	}
21
22	public function get_categories() {
23	return [ 'easyelements_category' ];
24	}
25
26	public function get_keywords() {
27	return [ 'feature', 'list', 'icon', 'icon-box', 'text' ];
28	}
29
30	public function get_style_depends() {
31	return [
32	'eel-feature-list',
33	];
34	}
35
36
37	protected function register_controls() {
38
39	$this->start_controls_section(
40	'section_feature_list',
41	[
42	'label' => esc_html__( 'Feature Settings', 'easy-elements' ),
43	'tab' => Controls_Manager::TAB_CONTENT,
44	]
45	);
46
47	$repeater = new \Elementor\Repeater();
48
49	// Icon Type
50	$repeater->add_control(
51	'icon_type',
52	[
53	'label' => esc_html__( 'Select Type', 'easy-elements' ),
54	'type' => \Elementor\Controls_Manager::SELECT,
55	'options' => [
56	'icon' => esc_html__( 'Icon', 'easy-elements' ),
57	'number' => esc_html__( 'Number', 'easy-elements' ),
58	'image' => esc_html__( 'Image', 'easy-elements' ),
59	],
60	'default' => 'icon',
61	'label_block' => true,
62	]
63	);
64
65	// Icon
66	$repeater->add_control(
67	'fea_list_icon',
68	[
69	'label' => esc_html__( 'Icon', 'easy-elements' ),
70	'type' => \Elementor\Controls_Manager::ICONS,
71	'label_block' => true,
72	'default' => [
73	'value' => 'fas fa-star',
74	'library' => 'fa-solid',
75	],
76	'condition' => [
77	'icon_type' => 'icon',
78	],
79	]
80	);
81
82	// Number
83	$repeater->add_control(
84	'fea_list_number_title',
85	[
86	'label' => esc_html__( 'Number', 'easy-elements' ),
87	'type' => \Elementor\Controls_Manager::TEXT,
88	'default' => esc_html__( '01', 'easy-elements' ),
89	'condition' => [
90	'icon_type' => 'number',
91	],
92	'label_block' => true,
93	'dynamic' => [ 'active' => true ],
94	]
95	);
96
97	$repeater->add_control(
98	'fea_list_img',
99	[
100	'label' => esc_html__( 'Image', 'easy-elements' ),
101	'type' => \Elementor\Controls_Manager::MEDIA,
102	'default' => [
103	'url' => \Elementor\Utils::get_placeholder_image_src(),
104	],
105	'condition' => [
106	'icon_type' => 'image',
107	],
108	]
109	);
110
111	// Title
112	$repeater->add_control(
113	'fea_list_title',
114	[
115	'label' => esc_html__( 'Title', 'easy-elements' ),
116	'type' => \Elementor\Controls_Manager::TEXT,
117	'default' => esc_html__( 'Easy Elements', 'easy-elements' ),
118	'label_block' => true,
119	'dynamic' => [ 'active' => true ],
120	]
121	);
122
123	// Description
124	$repeater->add_control(
125	'fea_list_desc',
126	[
127	'label' => esc_html__( 'Description', 'easy-elements' ),
128	'type' => \Elementor\Controls_Manager::TEXTAREA,
129	'default' => esc_html__( 'Feature description goes here...', 'easy-elements' ),
130	'label_block' => true,
131	'dynamic' => [ 'active' => true ],
132	]
133	);
134
135	// Add Repeater to widget
136	$this->add_control(
137	'features_list',
138	[
139	'label' => esc_html__( 'Feature Items', 'easy-elements' ),
140	'type' => \Elementor\Controls_Manager::REPEATER,
141	'fields' => $repeater->get_controls(),
142	'default' => [
143	[
144	'icon_type' => 'icon',
145	'fea_list_icon' => [ 'value' => 'fas fa-clock', 'library' => 'fa-solid' ],
146	'fea_list_title' => 'Lightning Fast',
147	'fea_list_desc' => 'Your site loads in seconds with our highly optimized structure.',
148	],
149	[
150	'icon_type' => 'icon',
151	'fea_list_icon' => [ 'value' => 'far fa-clone', 'library' => 'fa-solid' ],
152	'fea_list_title' => 'Smart & Flexible',
153	'fea_list_desc' => 'Build exactly what you envision with powerful styling controls.',
154	],
155	[
156	'icon_type' => 'icon',
157	'fea_list_icon' => [ 'value' => 'fas fa-star', 'library' => 'fa-solid' ],
158	'fea_list_title' => 'Reliable Support',
159	'fea_list_desc' => 'Our expert team is always ready to assist you with quick, friendly.',
160	]
161	],
162	'title_field' => '{{{ fea_list_title }}}',
163	]
164	);
165
166	$this->add_responsive_control(
167	'fea_dir',
168	[
169	'label' => esc_html__( 'Icon Direction', 'easy-elements' ),
170	'type' => \Elementor\Controls_Manager::CHOOSE,
171	'options' => [
172	'left' => [
173	'title' => esc_html__( 'Left', 'easy-elements' ),
174	'icon' => 'eicon-h-align-left',
175	],
176	'right' => [
177	'title' => esc_html__( 'Right', 'easy-elements' ),
178	'icon' => 'eicon-h-align-right',
179	]
180	],
181	'default' => 'left',
182	'toggle' => true,
183	]
184	);
185
186	$this->add_responsive_control(
187	'fea_vertical_align',
188	[
189	'label' => esc_html__( 'Vertical Alignment', 'easy-elements' ),
190	'type' => \Elementor\Controls_Manager::CHOOSE,
191	'options' => [
192	'flex-start' => [
193	'title' => esc_html__( 'Start', 'easy-elements' ),
194	'icon' => 'eicon-v-align-top',
195	],
196	'center' => [
197	'title' => esc_html__( 'Middle', 'easy-elements' ),
198	'icon' => 'eicon-v-align-middle',
199	],
200	'flex-end' => [
201	'title' => esc_html__( 'Bottom', 'easy-elements' ),
202	'icon' => 'eicon-v-align-bottom',
203	],
204	],
205	'default' => 'center',
206	'toggle' => true,
207	'selectors' => [
208	'{{WRAPPER}} .eel-fea-list' => 'align-items: {{VALUE}};',
209	],
210	]
211	);
212
213	$this->add_control(
214	'fea_list_icon_view',
215	[
216	'label' => esc_html__( 'Icon View', 'easy-elements' ),
217	'type' => \Elementor\Controls_Manager::SELECT,
218	'label_block' => true,
219	'default' => 'stracked',
220	'options' => [
221	'default' => esc_html__( 'Default', 'easy-elements' ),
222	'frame' => esc_html__( 'Frame', 'easy-elements' ),
223	'stracked' => esc_html__( 'Stracked', 'easy-elements' )
224	],
225	'prefix_class' => 'eel-fea-list-icon-view-',
226	]
227	);
228
229	$this->add_control(
230	'fea_list_icon_shape',
231	[
232	'label' => esc_html__( 'Shape', 'easy-elements' ),
233	'type' => \Elementor\Controls_Manager::SELECT,
234	'label_block' => true,
235	'default' => 'rounded',
236	'options' => [
237	'rounded' => esc_html__( 'Rounded', 'easy-elements' ),
238	'square' => esc_html__( 'Square', 'easy-elements' ),
239	'circle' => esc_html__( 'Circle', 'easy-elements' ),
240	'sq_rotate' => esc_html__( 'Square Rotate', 'easy-elements' ),
241	],
242	'prefix_class' => 'eel-fea-list-icon-shape-',
243	'condition' => [
244	'fea_list_icon_view' => ['frame', 'stracked']
245	]
246	]
247	);
248
249	$this->add_control(
250	'title_tag',
251	[
252	'label' => esc_html__('Title HTML Tag', 'easy-elements'),
253	'type' => Controls_Manager::SELECT,
254	'default' => 'h3',
255	'options' => [
256	'h1' => esc_html__('H1', 'easy-elements'),
257	'h2' => esc_html__('H2', 'easy-elements'),
258	'h3' => esc_html__('H3', 'easy-elements'),
259	'h4' => esc_html__('H4', 'easy-elements'),
260	'h5' => esc_html__('H5', 'easy-elements'),
261	'h6' => esc_html__('H6', 'easy-elements'),
262	'p' => esc_html__('P', 'easy-elements'),
263	'div' => esc_html__('div', 'easy-elements'),
264	'span' => esc_html__('span', 'easy-elements'),
265	],
266	]
267	);
268	$this->end_controls_section();
269
270	$this->start_controls_section(
271	'fea_list_styles',
272	[
273	'label' => esc_html__( 'Feature List', 'easy-elements' ),
274	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
275	]
276	);
277
278	$this->add_group_control(
279	\Elementor\Group_Control_Background::get_type(),
280	[
281	'name' => 'list_background',
282	'types' => [ 'classic', 'gradient', 'video' ],
283	'selector' => '{{WRAPPER}} .eel-fea-list',
284	]
285	);
286
287	$this->add_responsive_control(
288	'fea_item_gap',
289	[
290	'label' => esc_html__( 'Item Gap', 'easy-elements' ),
291	'type' => \Elementor\Controls_Manager::SLIDER,
292	'range' => [
293	'px' => [
294	'min' => 0,
295	'max' => 100,
296	],
297	],
298	'selectors' => [
299	'{{WRAPPER}} .eel-fea-list' => 'margin-bottom: {{SIZE}}{{UNIT}};',
300	],
301	]
302	);
303
304	$this->add_responsive_control(
305	'fea_middle_gap',
306	[
307	'label' => esc_html__( 'Middle Gap', 'easy-elements' ),
308	'type' => \Elementor\Controls_Manager::SLIDER,
309	'range' => [
310	'px' => [
311	'min' => 0,
312	'max' => 100,
313	],
314	],
315	'default' => [
316	'size' => 20,
317	'unit' => 'px',
318	],
319	'selectors' => [
320	'{{WRAPPER}} .eel-fea-list' => 'gap: {{SIZE}}{{UNIT}};',
321	],
322	]
323	);
324
325	$this->add_control(
326	'fea_connector',
327	[
328	'label' => esc_html__( 'Connector', 'easy-elements' ),
329	'type' => \Elementor\Controls_Manager::SWITCHER,
330	'label_on' => esc_html__( 'Yes', 'easy-elements' ),
331	'label_off' => esc_html__( 'No', 'easy-elements' ),
332	'return_value' => 'yes',
333	'default' => 'no',
334	]
335	);
336
337	$this->add_control(
338	'fea_connector_left',
339	[
340	'label' => esc_html__( 'Left Connector', 'easy-elements' ),
341	'type' => \Elementor\Controls_Manager::SWITCHER,
342	'label_on' => esc_html__( 'Yes', 'easy-elements' ),
343	'label_off' => esc_html__( 'No', 'easy-elements' ),
344	'return_value' => 'yes',
345	'default' => 'no',
346	'condition' => [
347	'fea_connector' => 'yes'
348	]
349	]
350	);
351
352	$this->add_control(
353	'fea_connector_type',
354	[
355	'label' => esc_html__( 'Type', 'easy-elements' ),
356	'type' => \Elementor\Controls_Manager::SELECT,
357	'label_block' => true,
358	'default' => 'solid',
359	'options' => [
360	'solid' => esc_html__( 'Solid', 'easy-elements' ),
361	'dotted' => esc_html__( 'Dotted', 'easy-elements' ),
362	'dashed' => esc_html__( 'Dashed', 'easy-elements' ),
363	'double' => esc_html__( 'Double', 'easy-elements' ),
364	],
365	'selectors' => [
366	'{{WRAPPER}} .eel-fea-list-wrapper.eel-fea-list-connector::before' => 'border-style: {{VALUE}};',
367	'{{WRAPPER}} .eel-fea-list-icon::after' => 'border-style: {{VALUE}};',
368	],
369	'condition' => [
370	'fea_connector' => 'yes'
371	]
372	]
373	);
374
375	$this->add_responsive_control(
376	'fea_connector_width',
377	[
378	'label' => esc_html__( 'Connector Width', 'easy-elements' ),
379	'type' => \Elementor\Controls_Manager::SLIDER,
380	'selectors' => [
381	'{{WRAPPER}} .eel-fea-list-wrapper.eel-fea-list-connector::before' => 'border-width: {{SIZE}}{{UNIT}};',
382	'{{WRAPPER}} .eel-fea-list-icon::after' => 'border-width: {{SIZE}}{{UNIT}};',
383	],
384	'condition' => [
385	'fea_connector' => 'yes'
386	]
387	]
388	);
389
390	$this->add_responsive_control(
391	'fea_connector_position_x',
392	[
393	'label' => esc_html__( 'Position Horizontal', 'easy-elements' ),
394	'type' => \Elementor\Controls_Manager::SLIDER,
395	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
396	'range' => [
397	'px' => [
398	'min' => -50,
399	'max' => 500,
400	'step' => 1,
401	],
402	'%' => [
403	'min' => -50,
404	'max' => 100,
405	],
406	],
407	'selectors' => [
408	'{{WRAPPER}} .eel-fea-list-wrapper.eel-fea-list-connector::before' => 'left: {{SIZE}}{{UNIT}};',
409	],
410	'condition' => [
411	'fea_connector' => 'yes',
412	'fea_dir' => 'left',
413	]
414
415	]
416	);
417
418	$this->add_responsive_control(
419	'fea_connector_right_position_x',
420	[
421	'label' => esc_html__( 'Position Horizontal', 'easy-elements' ),
422	'type' => \Elementor\Controls_Manager::SLIDER,
423	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
424	'range' => [
425	'px' => [
426	'min' => -50,
427	'max' => 500,
428	'step' => 1,
429	],
430	'%' => [
431	'min' => -50,
432	'max' => 100,
433	],
434	],
435	'selectors' => [
436	'{{WRAPPER}} .eel-fea-list-connector.eel-fea-list-dir-right::before' => 'right: {{SIZE}}{{UNIT}};',
437	],
438	'condition' => [
439	'fea_connector' => 'yes',
440	'fea_dir' => 'right'
441	]
442	]
443	);
444
445	$this->add_control(
446	'fea_connector_color',
447	[
448	'label' => esc_html__( 'Color', 'easy-elements' ),
449	'type' => \Elementor\Controls_Manager::COLOR,
450	'selectors' => [
451	'{{WRAPPER}} .eel-fea-list-wrapper.eel-fea-list-connector::before' => 'border-color: {{VALUE}};',
452	'{{WRAPPER}} .eel-fea-list-icon::after' => 'border-color: {{VALUE}};',
453	],
454	'condition' => [
455	'fea_connector' => 'yes'
456	]
457	]
458	);
459
460	$this->add_group_control(
461	\Elementor\Group_Control_Border::get_type(),
462	[
463	'name' => 'fea_list_border',
464	'selector' => '{{WRAPPER}} .eel-fea-list',
465	'separator' => 'before'
466	]
467	);
468
469	$this->add_responsive_control(
470	'fea_list_border_radius',
471	[
472	'label' => esc_html__( 'Border Radius', 'easy-elements' ),
473	'type' => \Elementor\Controls_Manager::DIMENSIONS,
474	'size_units' => [ 'px', '%' ],
475	'selectors' => [
476	'{{WRAPPER}} .eel-fea-list' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
477	],
478	]
479	);
480
481	$this->add_responsive_control(
482	'fea_list_padding',
483	[
484	'label' => esc_html__( 'Padding', 'easy-elements' ),
485	'type' => \Elementor\Controls_Manager::DIMENSIONS,
486	'size_units' => [ 'px', '%' ],
487	'selectors' => [
488	'{{WRAPPER}} .eel-fea-list' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
489	],
490	]
491	);
492	$this->end_controls_section();
493
494	$this->start_controls_section(
495	'section_style_icon',
496	[
497	'label' => esc_html__( 'Icon', 'easy-elements' ),
498	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
499	]
500	);
501
502	$this->add_control(
503	'icon_color',
504	[
505	'label' => esc_html__( 'Color', 'easy-elements' ),
506	'type' => \Elementor\Controls_Manager::COLOR,
507	'selectors' => [
508	'{{WRAPPER}} .eel-fea-list-icon svg,{{WRAPPER}} .eel-fea-list-icon svg path, {{WRAPPER}} .eel-fea-list-icon i,
509	{{WRAPPER}} .eel-fea-list-number' => 'color: {{VALUE}}; fill: {{VALUE}};',
510	],
511	]
512	);
513
514	$this->add_group_control(
515	\Elementor\Group_Control_Background::get_type(),
516	[
517	'name' => 'icon_bg_color',
518	'types' => [ 'classic', 'gradient', 'video' ],
519	'selector' => '{{WRAPPER}} .eel-fea-list-icon',
520	]
521	);
522
523	$this->add_responsive_control(
524	'icon_size',
525	[
526	'label' => esc_html__( 'Size', 'easy-elements' ),
527	'type' => \Elementor\Controls_Manager::SLIDER,
528	'range' => [
529	'px' => [
530	'min' => 10,
531	'max' => 150,
532	],
533	],
534	'selectors' => [
535	'{{WRAPPER}} .eel-fea-list-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
536	'{{WRAPPER}} .eel-fea-list-image' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
537	'{{WRAPPER}} .eel-fea-list-number' => 'font-size: {{SIZE}}{{UNIT}};',
538	],
539	]
540	);
541
542	$this->add_responsive_control(
543	'icon_box_size',
544	[
545	'label' => esc_html__( 'Box Size', 'easy-elements' ),
546	'type' => \Elementor\Controls_Manager::SLIDER,
547	'range' => [
548	'px' => [
549	'min' => 20,
550	'max' => 150,
551	],
552	],
553	'size_units' => [ 'px' ],
554	'selectors' => [
555	'{{WRAPPER}} .eel-fea-list-icon' => 'min-width: {{SIZE}}{{UNIT}}; min-height: {{SIZE}}{{UNIT}}; line-height: {{SIZE}}{{UNIT}};',
556	],
557	]
558	);
559
560	$this->add_responsive_control(
561	'icon_alignment',
562	[
563	'label' => esc_html__( 'Alignment', 'easy-elements' ),
564	'type' => \Elementor\Controls_Manager::CHOOSE,
565	'options' => [
566	'start' => [
567	'title' => esc_html__( 'Left', 'easy-elements' ),
568	'icon' => 'eicon-text-align-left',
569	],
570	'center' => [
571	'title' => esc_html__( 'Center', 'easy-elements' ),
572	'icon' => 'eicon-text-align-center',
573	],
574	'end' => [
575	'title' => esc_html__( 'Right', 'easy-elements' ),
576	'icon' => 'eicon-text-align-right',
577	],
578	],
579	'default' => 'center',
580	'toggle' => true,
581	'selectors' => [
582	'{{WRAPPER}} .eel-fea-list-icon' => 'justify-content: {{VALUE}};',
583	],
584	]
585	);
586
587	$this->add_group_control(
588	\Elementor\Group_Control_Box_Shadow::get_type(),
589	[
590	'name' => 'icon_shadow',
591	'label' => esc_html__('Box Shadow', 'easy-elements'),
592	'selector' => '{{WRAPPER}} .eel-fea-list-icon',
593	]
594	);
595
596	$this->add_group_control(
597	\Elementor\Group_Control_Text_Stroke::get_type(),
598	[
599	'name' => 'icon_stroke',
600	'selector' => '{{WRAPPER}} .eel-fea-list-number,{{WRAPPER}} .eel-fea-list-icon svg',
601	]
602	);
603
604	$this->add_group_control(
605	\Elementor\Group_Control_Border::get_type(),
606	[
607	'name' => 'icon_border',
608	'selector' => '{{WRAPPER}} .eel-fea-list-icon',
609	]
610	);
611
612	$this->add_responsive_control(
613	'icon_radius',
614	[
615	'label' => esc_html__( 'Border Radius', 'easy-elements' ),
616	'type' => \Elementor\Controls_Manager::DIMENSIONS,
617	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
618	'selectors' => [
619	'{{WRAPPER}} .eel-fea-list-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
620	],
621	]
622	);
623	$this->end_controls_section();
624
625	$this->start_controls_section(
626	'section_style_title',
627	[
628	'label' => esc_html__( 'Title', 'easy-elements' ),
629	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
630	]
631	);
632
633	$this->add_control(
634	'title_color',
635	[
636	'label' => esc_html__( 'Color', 'easy-elements' ),
637	'type' => \Elementor\Controls_Manager::COLOR,
638	'selectors' => [
639	'{{WRAPPER}} .eel-fea-list-title' => 'color: {{VALUE}};',
640	],
641	]
642	);
643
644	$this->add_group_control(
645	\Elementor\Group_Control_Typography::get_type(),
646	[
647	'name' => 'title_typography',
648	'selector' => '{{WRAPPER}} .eel-fea-list-title',
649	]
650	);
651
652	$this->add_group_control(
653	\Elementor\Group_Control_Text_Stroke::get_type(),
654	[
655	'name' => 'title_stroke',
656	'selector' => '{{WRAPPER}} .eel-fea-list-title',
657	]
658	);
659
660	$this->add_responsive_control(
661	'fea_title_padding',
662	[
663	'label' => esc_html__( 'Padding', 'easy-elements' ),
664	'type' => \Elementor\Controls_Manager::DIMENSIONS,
665	'size_units' => [ 'px', '%' ],
666	'selectors' => [
667	'{{WRAPPER}} .eel-fea-list-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
668	],
669	]
670	);
671	$this->end_controls_section();
672
673	$this->start_controls_section(
674	'section_style_desc',
675	[
676	'label' => esc_html__( 'Description', 'easy-elements' ),
677	'tab' => \Elementor\Controls_Manager::TAB_STYLE,
678	]
679	);
680
681	$this->add_control(
682	'desc_color',
683	[
684	'label' => esc_html__( 'Color', 'easy-elements' ),
685	'type' => \Elementor\Controls_Manager::COLOR,
686	'selectors' => [
687	'{{WRAPPER}} .eel-fea-list-desc' => 'color: {{VALUE}};',
688	],
689	]
690	);
691
692	$this->add_group_control(
693	\Elementor\Group_Control_Typography::get_type(),
694	[
695	'name' => 'desc_typography',
696	'selector' => '{{WRAPPER}} .eel-fea-list-desc',
697	]
698	);
699	$this->end_controls_section();
700
701	}
702
703	protected function render() {
704
705	$settings = $this->get_settings_for_display();
706	$connector = ( isset($settings['fea_connector']) && $settings['fea_connector'] === 'yes' ) ? 'eel-fea-list-connector' : '';
707	$connector_left = ( isset($settings['fea_connector_left']) && $settings['fea_connector_left'] === 'yes' ) ? 'eel-fea-list-connector-left' : '';
708	$title_tag = ! empty($settings['title_tag']) ? $settings['title_tag'] : 'h3';
709
710	if ( empty( $settings['features_list'] ) ) {
711	return;
712	}
713
714	echo '<div class="eel-fea-list-wrapper ' . esc_attr($connector) . ' ' . esc_attr($connector_left) . ' eel-fea-list-dir-' . esc_attr($settings['fea_dir']) . '">';
715
716	foreach ( $settings['features_list'] as $item ) {
717
718	echo '<div class="eel-fea-list eel-fea-list-dir-' . esc_attr($settings['fea_dir']) . ' ">';
719
720	/* ------------------------------------
721	ICON / NUMBER / IMAGE WRAPPER
722	------------------------------------- */
723
724	$classes = [
725	'eel-fea-list-icon',
726	'eel-fea-list-type-' . $item['icon_type'],
727	];
728
729	echo '<div class="' . esc_attr( implode( ' ', $classes ) ) . '">';
730
731	// IMAGE
732	if (
733	$item['icon_type'] === 'image' &&
734	! empty( $item['fea_list_img']['url'] )
735	) {
736
737	$alt = ! empty( $item['fea_list_img']['alt'] )
738	? $item['fea_list_img']['alt']
739	: $item['fea_list_title'];
740
741	echo '<img
742	src="' . esc_url( $item['fea_list_img']['url'] ) . '"
743	alt="' . esc_attr( $alt ) . '"
744	class="eel-fea-list-img"
745	>';
746	}
747	// ICON
748	elseif ( $item['icon_type'] === 'icon' && ! empty( $item['fea_list_icon']['value'] ) ) {
749
750	\Elementor\Icons_Manager::render_icon(
751	$item['fea_list_icon'],
752	[ 'aria-hidden' => 'true' ]
753	);
754
755	}
756
757	// NUMBER
758	elseif ( $item['icon_type'] === 'number' && ! empty( $item['fea_list_number_title'] ) ) {
759
760	echo '<span class="eel-fea-list-number">'
761	. esc_html( $item['fea_list_number_title'] ) .
762	'</span>';
763
764	}
765
766	echo '</div>'; // .eel-fea-list-icon end
767
768
769	/* ------------------------------------
770	TEXT CONTENT WRAPPER
771	------------------------------------- */
772
773	if ( ! empty($item['fea_list_title']) \|\| ! empty($item['fea_list_desc']) ) {
774
775	echo '<div class="eel-fea-list-info">';
776
777	// Title
778	if ( ! empty( $item['fea_list_title'] ) ) {
779	echo '<' . esc_attr($title_tag) . ' class="eel-fea-list-title">'
780	. esc_html($item['fea_list_title'])
781	. '</' . esc_attr($title_tag) . '>';
782	}
783
784	// Description
785	if ( ! empty( $item['fea_list_desc'] ) ) {
786	echo '<p class="eel-fea-list-desc">' . esc_html($item['fea_list_desc']) . '</p>';
787	}
788
789	echo '</div>'; // info end
790	}
791
792	echo '</div>'; // single item end
793	}
794
795	echo '</div>'; // wrapper end
796	}
797
798	}