Feature_List.php — Essential Addons for Elementor – Popular Elementor Templates & Widgets 6.0.10

essential-addons-for-elementor-lite / includes / Elements / Feature_List.php

essential-addons-for-elementor-lite / includes / Elements Last commit date

Adv_Accordion.php 1 year ago Adv_Tabs.php 1 year ago Advanced_Data_Table.php 1 year ago Better_Payment.php 4 years ago Betterdocs_Category_Box.php 1 year ago Betterdocs_Category_Grid.php 1 year ago Betterdocs_Search_Form.php 1 year ago Business_Reviews.php 1 year ago Caldera_Forms.php 1 year ago Career_Page.php 4 years ago Contact_Form_7.php 1 year ago Content_Ticker.php 1 year ago Countdown.php 1 year ago Creative_Button.php 1 year ago Cta_Box.php 1 year ago Data_Table.php 1 year ago Dual_Color_Header.php 1 year ago EmbedPress.php 4 years ago Event_Calendar.php 1 year ago Facebook_Feed.php 1 year ago Fancy_Text.php 1 year ago Feature_List.php 1 year ago Filterable_Gallery.php 1 year ago Flip_Box.php 1 year ago FluentForm.php 1 year ago Formstack.php 1 year ago GravityForms.php 1 year ago Image_Accordion.php 1 year ago Info_Box.php 1 year ago Interactive_Circle.php 1 year ago Login_Register.php 1 year ago NFT_Gallery.php 1 year ago NinjaForms.php 1 year ago Post_Grid.php 1 year ago Post_Timeline.php 1 year ago Pricing_Table.php 1 year ago Product_Grid.php 1 year ago Progress_Bar.php 1 year ago SVG_Draw.php 1 year ago Simple_Menu.php 1 year ago Sticky_Video.php 1 year ago Team_Member.php 1 year ago Testimonial.php 1 year ago Tooltip.php 1 year ago Twitter_Feed.php 1 year ago TypeForm.php 1 year ago WeForms.php 2 years ago Woo_Cart.php 1 year ago Woo_Checkout.php 1 year ago Woo_Product_Carousel.php 1 year ago Woo_Product_Compare.php 2 years ago Woo_Product_Gallery.php 1 year ago Woo_Product_List.php 1 year ago WpForms.php 1 year ago index.php 3 years ago

Feature_List.php

1078 lines

1	<?php
2
3	namespace Essential_Addons_Elementor\Elements;
4
5	// If this file is called directly, abort.
6	if ( !defined( 'ABSPATH' ) ) {
7	exit;
8	}
9
10	use \Elementor\Controls_Manager;
11	use \Elementor\Group_Control_Background;
12	use \Elementor\Group_Control_Typography;
13	use \Elementor\Icons_Manager;
14	use \Elementor\Repeater;
15	use \Elementor\Core\Kits\Documents\Tabs\Global_Typography;
16	use \Elementor\Core\Kits\Documents\Tabs\Global_Colors;
17	use \Elementor\Utils;
18	use \Elementor\Widget_Base;
19
20	use \Essential_Addons_Elementor\Classes\Helper;
21
22	class Feature_List extends Widget_Base {
23	public function get_name() {
24	return 'eael-feature-list';
25	}
26
27	public function get_title() {
28	return esc_html__( 'Feature List', 'essential-addons-for-elementor-lite' );
29	}
30
31	public function get_icon() {
32	return 'eaicon-feature-list';
33	}
34
35	public function get_categories() {
36	return ['essential-addons-elementor'];
37	}
38
39	public function get_keywords() {
40	return [
41	'list',
42	'ea list',
43	'ea feature list',
44	'feature',
45	'icon',
46	'connector',
47	'featured content',
48	'highlights',
49	'ea',
50	'essential addons',
51	];
52	}
53
54	protected function is_dynamic_content():bool {
55	return false;
56	}
57
58	public function get_custom_help_url() {
59	return 'https://essential-addons.com/elementor/docs/ea-feature-list/';
60	}
61
62	protected function register_controls() {
63	/**
64	* Feature List Settings
65	*/
66	$this->start_controls_section(
67	'eael_section_feature_list_content_settings',
68	[
69	'label' => esc_html__( 'Content Settings', 'essential-addons-for-elementor-lite' ),
70	]
71	);
72
73	$repeater = new Repeater();
74
75	$repeater->add_control(
76	'eael_feature_list_icon_type',
77	[
78	'label' => esc_html__( 'Icon Type', 'essential-addons-for-elementor-lite' ),
79	'type' => Controls_Manager::CHOOSE,
80	'options' => [
81	'icon' => [
82	'title' => esc_html__( 'Icon', 'essential-addons-for-elementor-lite' ),
83	'icon' => 'fa fa-star',
84	],
85	'image' => [
86	'title' => esc_html__( 'Image', 'essential-addons-for-elementor-lite' ),
87	'icon' => 'eicon-image-bold',
88	],
89	],
90	'default' => 'icon',
91	'label_block' => false,
92	]
93	);
94
95	$repeater->add_control(
96	'eael_feature_list_icon_new',
97	[
98	'label' => esc_html__( 'Icon', 'essential-addons-for-elementor-lite' ),
99	'type' => Controls_Manager::ICONS,
100	'fa4compatibility' => 'eael_feature_list_icon',
101	'condition' => [
102	'eael_feature_list_icon_type' => 'icon',
103	],
104	]
105	);
106
107	// start icon color option
108	$repeater->add_control(
109	'eael_feature_list_icon_is_individual_style',
110	[
111	'label' => esc_html__( 'Icon Style', 'essential-addons-for-elementor-lite' ),
112	'type' => Controls_Manager::SWITCHER,
113	'label_on' => __( 'ON', 'essential-addons-for-elementor-lite' ),
114	'label_off' => __( 'OFF', 'essential-addons-for-elementor-lite' ),
115	'return_value' => 'on',
116	'default' => '',
117	'fa4compatibility' => 'eael_feature_list_icon',
118	'condition' => [
119	'eael_feature_list_icon_type' => 'icon',
120	],
121	]
122	);
123	$repeater->add_control(
124	'eael_feature_list_icon_individual_color',
125	[
126	'label' => esc_html__( 'Icon Color', 'essential-addons-for-elementor-lite' ),
127	'type' => Controls_Manager::COLOR,
128	'default' => '#fff',
129	'selectors' => [
130	"{{WRAPPER}} {{CURRENT_ITEM}} .eael-feature-list-icon i" => 'color: {{VALUE}};',
131	"{{WRAPPER}} {{CURRENT_ITEM}} .eael-feature-list-icon svg" => 'color: {{VALUE}} !important; fill: {{VALUE}} !important;',
132	],
133	'fa4compatibility' => 'eael_feature_list_icon',
134	'condition' => [
135	'eael_feature_list_icon_is_individual_style' => 'on',
136	],
137	]
138	);
139	$repeater->add_control(
140	'eael_feature_list_icon_individual_bg_color',
141	[
142	'label' => esc_html__( 'Icon Background', 'essential-addons-for-elementor-lite' ),
143	'type' => Controls_Manager::COLOR,
144	'selectors' => [
145	"{{WRAPPER}} {{CURRENT_ITEM}} .eael-feature-list-icon" => 'background-color: {{VALUE}}',
146	],
147	'fa4compatibility' => 'eael_feature_list_icon',
148	'condition' => [
149	'eael_feature_list_icon_is_individual_style' => 'on',
150	],
151	]
152	);
153	$repeater->add_control(
154	'eael_feature_list_icon_individual_box_bg_color',
155	[
156	'label' => esc_html__( 'Icon Box Background', 'essential-addons-for-elementor-lite' ),
157	'type' => Controls_Manager::COLOR,
158	'selectors' => [
159	"{{WRAPPER}} {{CURRENT_ITEM}} .eael-feature-list-icon-inner" => 'background-color: {{VALUE}}',
160	],
161	'fa4compatibility' => 'eael_feature_list_icon',
162	'condition' => [
163	'eael_feature_list_icon_is_individual_style' => 'on',
164	],
165	]
166	);
167	// end icon color option
168
169	$repeater->add_control(
170	'eael_feature_list_img',
171	[
172	'label' => esc_html__( 'Image', 'essential-addons-for-elementor-lite' ),
173	'type' => Controls_Manager::MEDIA,
174	'default' => [
175	'url' => Utils::get_placeholder_image_src(),
176	],
177	'condition' => [
178	'eael_feature_list_icon_type' => 'image',
179	],
180	'ai' => [
181	'active' => false,
182	],
183	]
184	);
185
186	$repeater->add_control(
187	'eael_feature_list_title',
188	[
189	'label' => esc_html__( 'Title', 'essential-addons-for-elementor-lite' ),
190	'type' => Controls_Manager::TEXT,
191	'default' => esc_html__( 'Title', 'essential-addons-for-elementor-lite' ),
192	'dynamic' => ['active' => true],
193	'ai' => [
194	'active' => false,
195	],
196	]
197	);
198
199	$repeater->add_control(
200	'eael_feature_list_content',
201	[
202	'label' => esc_html__( 'Content', 'essential-addons-for-elementor-lite' ),
203	'type' => Controls_Manager::TEXTAREA,
204	'default' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, neque qui velit. Magni dolorum quidem ipsam eligendi, totam, facilis laudantium cum accusamus ullam voluptatibus commodi numquam, error, est. Ea, consequatur.', 'essential-addons-for-elementor-lite' ),
205	'dynamic' => ['active' => true],
206	]
207	);
208
209	$repeater->add_control(
210	'eael_feature_list_link',
211	[
212	'label' => esc_html__( 'Link', 'essential-addons-for-elementor-lite' ),
213	'type' => Controls_Manager::URL,
214	'dynamic' => ['active' => true],
215	'placeholder' => esc_html__( 'https://your-link.com', 'essential-addons-for-elementor-lite' ),
216	'separator' => 'before',
217	]
218	);
219
220	$this->add_control(
221	'eael_feature_list',
222	[
223	'label' => esc_html__( 'Feature Item', 'essential-addons-for-elementor-lite' ),
224	'type' => Controls_Manager::REPEATER,
225	'seperator' => 'before',
226	'default' => [
227	[
228	'eael_feature_list_icon_new' => [
229	'value' => 'fas fa-check',
230	'library' => 'fa-solid',
231	],
232	'eael_feature_list_title' => esc_html__( 'Feature Item 1', 'essential-addons-for-elementor-lite' ),
233	'eael_feature_list_content' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipisi cing elit, sed do eiusmod tempor incididunt ut abore et dolore magna', 'essential-addons-for-elementor-lite' ),
234	],
235	[
236	'eael_feature_list_icon_new' => [
237	'value' => 'fas fa-times',
238	'library' => 'fa-solid',
239	],
240	'eael_feature_list_title' => esc_html__( 'Feature Item 2', 'essential-addons-for-elementor-lite' ),
241	'eael_feature_list_content' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipisi cing elit, sed do eiusmod tempor incididunt ut abore et dolore magna', 'essential-addons-for-elementor-lite' ),
242	],
243	[
244	'eael_feature_list_icon_new' => [
245	'value' => 'fas fa-anchor',
246	'library' => 'fa-solid',
247	],
248	'eael_feature_list_title' => esc_html__( 'Feature Item 3', 'essential-addons-for-elementor-lite' ),
249	'eael_feature_list_content' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipisi cing elit, sed do eiusmod tempor incididunt ut abore et dolore magna', 'essential-addons-for-elementor-lite' ),
250	],
251	],
252	'fields' => $repeater->get_controls(),
253	'title_field' => '{{{ elementor.helpers.renderIcon( this, eael_feature_list_icon_new, {}, "i", "panel" ) \|\| \'<i class="{{ eael_feature_list_icon_new.value }}" aria-hidden="true"></i>\' }}} {{ eael_feature_list_title }}',
254	]
255	);
256
257	$this->add_control(
258	'eael_feature_list_layout',
259	[
260	'label' => esc_html__( 'Layout', 'essential-addons-for-elementor-lite' ),
261	'type' => Controls_Manager::SELECT,
262	'default' => 'vertical',
263	'label_block' => false,
264	'separator' => 'before',
265	'options' => [
266	'vertical' => esc_html__( 'Vertical', 'essential-addons-for-elementor-lite' ),
267	'horizontal' => esc_html__( 'Horizontal', 'essential-addons-for-elementor-lite' ),
268	],
269	]
270	);
271
272	$this->add_control(
273	'eael_feature_list_title_size',
274	[
275	'label' => esc_html__( 'Title HTML Tag', 'essential-addons-for-elementor-lite' ),
276	'type' => Controls_Manager::SELECT,
277	'options' => [
278	'h1' => 'H1',
279	'h2' => 'H2',
280	'h3' => 'H3',
281	'h4' => 'H4',
282	'h5' => 'H5',
283	'h6' => 'H6',
284	'div' => 'div',
285	'span' => 'span',
286	'p' => 'p',
287	],
288	'default' => 'h2',
289	]
290	);
291
292	$this->add_control(
293	'eael_feature_list_icon_shape',
294	[
295	'label' => esc_html__( 'Icon Shape', 'essential-addons-for-elementor-lite' ),
296	'type' => Controls_Manager::SELECT,
297	'default' => 'circle',
298	'label_block' => false,
299	'options' => [
300	'circle' => esc_html__( 'Circle', 'essential-addons-for-elementor-lite' ),
301	'square' => esc_html__( 'Square', 'essential-addons-for-elementor-lite' ),
302	'rhombus' => esc_html__( 'Rhombus', 'essential-addons-for-elementor-lite' ),
303	],
304	]
305	);
306
307	$this->add_control(
308	'eael_feature_list_icon_shape_view',
309	[
310	'label' => esc_html__( 'Shape View', 'essential-addons-for-elementor-lite' ),
311	'type' => Controls_Manager::SELECT,
312	'default' => 'stacked',
313	'label_block' => false,
314	'options' => [
315	'framed' => esc_html__( 'Framed', 'essential-addons-for-elementor-lite' ),
316	'stacked' => esc_html__( 'Stacked', 'essential-addons-for-elementor-lite' ),
317	],
318	]
319	);
320
321	$this->add_responsive_control(
322	'eael_feature_list_icon_position',
323	[
324	'label' => esc_html__( 'Icon Position', 'essential-addons-for-elementor-lite' ),
325	'type' => Controls_Manager::CHOOSE,
326	'options' => [
327	'left' => [
328	'title' => esc_html__( 'Left', 'essential-addons-for-elementor-lite' ),
329	'icon' => 'eicon-text-align-left',
330	],
331	'top' => [
332	'title' => esc_html__( 'Top', 'essential-addons-for-elementor-lite' ),
333	'icon' => 'eicon-text-align-center',
334	],
335	'right' => [
336	'title' => esc_html__( 'Right', 'essential-addons-for-elementor-lite' ),
337	'icon' => 'eicon-text-align-right',
338	],
339	],
340	'default' => 'left',
341	'devices' => ['desktop', 'tablet', 'mobile'],
342	'desktop_default' => 'left',
343	'tablet_default' => 'left',
344	'mobile_default' => 'left',
345	'toggle' => false,
346	]
347	);
348
349	$this->add_control(
350	'eael_feature_list_icon_vertical_position',
351	[
352	'label' => esc_html__( 'Icon Vertical Position', 'essential-addons-for-elementor-lite' ),
353	'type' => Controls_Manager::CHOOSE,
354	'options' => [
355	'start' => [
356	'title' => esc_html__( 'Top', 'essential-addons-for-elementor-lite' ),
357	'icon' => 'eicon-v-align-top',
358	],
359	'center' => [
360	'title' => esc_html__( 'Middle', 'essential-addons-for-elementor-lite' ),
361	'icon' => 'eicon-v-align-middle',
362	],
363	'end' => [
364	'title' => esc_html__( 'Bottom', 'essential-addons-for-elementor-lite' ),
365	'icon' => 'eicon-v-align-bottom',
366	],
367	],
368	'default' => 'start',
369	'toggle' => false,
370	'condition' => [
371	'eael_feature_list_layout' => 'horizontal',
372	'eael_feature_list_icon_position!' => 'top',
373	],
374	'selectors' => [
375	'{{WRAPPER}} .eael-feature-list-items.eael-feature-list-horizontal .eael-feature-list-item' => 'align-items: {{VALUE}};',
376	],
377	]
378	);
379
380	$this->add_responsive_control(
381	'eael_feature_list_icon_right_indicator_position',
382	[
383	'label' => __( 'Arrow Indicator Position', 'essential-addons-for-elementor-lite' ),
384	'type' => Controls_Manager::SLIDER,
385	'size_units' => ['px', '%'],
386	'range' => [
387	'px' => [
388	'min' => 0,
389	'max' => 500,
390	'step' => 5,
391	],
392	'%' => [
393	'min' => 0,
394	'max' => 100,
395	],
396	],
397	'default' => [
398	'unit' => 'px',
399	'size' => 35,
400	],
401	'selectors' => [
402	'{{WRAPPER}} .eael-feature-list-items.connector-type-modern .eael-feature-list-item:after' => 'top: {{SIZE}}{{UNIT}} !important;',
403	],
404	'condition' => [
405	'eael_feature_list_layout' => 'vertical',
406	'eael_feature_list_icon_position' => 'top',
407	],
408	]
409	);
410
411	$this->add_control(
412	'eael_feature_list_connector',
413	[
414	'label' => esc_html__( 'Show Connector', 'essential-addons-for-elementor-lite' ),
415	'type' => Controls_Manager::SWITCHER,
416	'default' => 'no',
417	'label_on' => esc_html__( 'Show', 'essential-addons-for-elementor-lite' ),
418	'label_off' => esc_html__( 'No', 'essential-addons-for-elementor-lite' ),
419	'return_value' => 'yes',
420	'condition' => [
421	'eael_feature_list_layout' => 'vertical'
422	]
423	]
424	);
425
426	$this->end_controls_section();
427
428	/**
429	* -------------------------------------------
430	* Feature List Style
431	* -------------------------------------------
432	*/
433
434	$this->start_controls_section(
435	'eael_section_feature_list_style',
436	[
437	'label' => esc_html__( 'List', 'essential-addons-for-elementor-lite' ),
438	'tab' => Controls_Manager::TAB_STYLE,
439	]
440	);
441
442	$this->add_responsive_control(
443	'eael_feature_list_item_width',
444	[
445	'label' => esc_html__( 'Item Width', 'essential-addons-for-elementor-lite' ),
446	'type' => Controls_Manager::SLIDER,
447	'size_units' => [ 'px', '%' ],
448	'default' => [
449	'unit' => '%',
450	'size' => 40,
451	],
452	'range' => [
453	'px' => [
454	'min' => 0,
455	'max' => 1000,
456	],
457	'%' => [
458	'min' => 0,
459	'max' => 100,
460	],
461	],
462	'selectors' => [
463	'{{WRAPPER}} .eael-feature-list-items.eael-feature-list-horizontal .eael-feature-list-item' => 'width: {{SIZE}}{{UNIT}}',
464	],
465	'condition' => [
466	'eael_feature_list_layout' => 'horizontal',
467	],
468	]
469	);
470
471	$this->add_responsive_control(
472	'eael_feature_list_space_between',
473	[
474	'label' => esc_html__( 'Space Between', 'essential-addons-for-elementor-lite' ),
475	'type' => Controls_Manager::SLIDER,
476	'default' => [
477	'size' => 15,
478	],
479	'range' => [
480	'px' => [
481	'max' => 50,
482	],
483	],
484	'selectors' => [
485	'{{WRAPPER}} .eael-feature-list-items.eael-feature-list-horizontal' => 'gap: {{SIZE}}{{UNIT}}',
486	'{{WRAPPER}} .eael-feature-list-items.eael-feature-list-vertical .eael-feature-list-item:not(:last-child)' => 'padding-bottom: calc({{SIZE}}{{UNIT}}/2)',
487	'{{WRAPPER}} .eael-feature-list-items.eael-feature-list-vertical .eael-feature-list-item:not(:first-child)' => 'padding-top: calc({{SIZE}}{{UNIT}}/2)',
488	'body.rtl {{WRAPPER}} .eael-feature-list-items.eael-feature-list-vertical .eael-feature-list-item:after' => 'left: calc(-{{SIZE}}{{UNIT}}/2)',
489	'{{WRAPPER}} .eael-feature-list-items.eael-feature-list-vertical.connector-type-modern .eael-feature-list-item:not(:last-child):before' => 'height: calc(100% + {{SIZE}}{{UNIT}})',
490	],
491	]
492	);
493
494	$this->add_control(
495	'eael_feature_list_connector_type',
496	[
497	'label' => esc_html__( 'Connector Type', 'essential-addons-for-elementor-lite' ),
498	'type' => Controls_Manager::SELECT,
499	'default' => 'connector-type-classic',
500	'label_block' => false,
501	'options' => [
502	'connector-type-classic' => esc_html__( 'Classic', 'essential-addons-for-elementor-lite' ),
503	'connector-type-modern' => esc_html__( 'Modern', 'essential-addons-for-elementor-lite' ),
504	],
505	'condition' => [
506	'eael_feature_list_connector' => 'yes',
507	'eael_feature_list_icon_position!' => 'top',
508	],
509	'separator' => 'before',
510	]
511	);
512
513	$this->add_control(
514	'eael_feature_list_connector_styles',
515	[
516	'label' => esc_html__( 'Connector Styles', 'essential-addons-for-elementor-lite' ),
517	'type' => Controls_Manager::SELECT,
518	'default' => 'solid',
519	'label_block' => false,
520	'options' => [
521	'solid' => esc_html__( 'Solid', 'essential-addons-for-elementor-lite' ),
522	'dashed' => esc_html__( 'Dashed', 'essential-addons-for-elementor-lite' ),
523	'dotted' => esc_html__( 'Dotted', 'essential-addons-for-elementor-lite' ),
524	],
525	'condition' => [
526	'eael_feature_list_connector' => 'yes',
527	],
528	'selectors' => [
529	'{{WRAPPER}} .connector-type-classic .connector' => 'border-style: {{VALUE}};',
530	'{{WRAPPER}} .connector-type-modern .eael-feature-list-item:before, {{WRAPPER}} .connector-type-modern .eael-feature-list-item:after' => 'border-style: {{VALUE}};',
531	],
532	]
533	);
534
535	$this->add_control(
536	'eael_feature_list_connector_color',
537	[
538	'label' => esc_html__( 'Connector Color', 'essential-addons-for-elementor-lite' ),
539	'type' => Controls_Manager::COLOR,
540	'global' => [
541	'default' => Global_Colors::COLOR_PRIMARY
542	],
543	'default' => '#37368e',
544	'selectors' => [
545	'{{WRAPPER}} .connector-type-classic .connector' => 'border-color: {{VALUE}};',
546	'{{WRAPPER}} .connector-type-modern .eael-feature-list-item:before, {{WRAPPER}} .connector-type-modern .eael-feature-list-item:after' => 'border-color: {{VALUE}};',
547	],
548	'condition' => [
549	'eael_feature_list_connector' => 'yes',
550	],
551	]
552	);
553
554	$this->add_control(
555	'eael_feature_list_connector_width',
556	[
557	'label' => esc_html__( 'Connector Width', 'essential-addons-for-elementor-lite' ),
558	'type' => Controls_Manager::SLIDER,
559	'default' => [
560	'unit' => 'px',
561	'size' => 1,
562	],
563	'range' => [
564	'px' => [
565	'min' => 1,
566	'max' => 5,
567	],
568	],
569	'selectors' => [
570	'{{WRAPPER}} .connector-type-classic .connector' => 'border-width: {{SIZE}}{{UNIT}};',
571	'{{WRAPPER}} .eael-feature-list-items.connector-type-modern .eael-feature-list-item:before, {{WRAPPER}} .eael-feature-list-items.connector-type-modern .eael-feature-list-item:after' => 'border-width: {{SIZE}}{{UNIT}};',
572	'{{WRAPPER}} .-icon-position-left .connector-type-modern .eael-feature-list-item:before, {{WRAPPER}} .-icon-position-left .connector-type-modern .eael-feature-list-item:after' => 'border-width: {{SIZE}}{{UNIT}};',
573	'{{WRAPPER}} .-icon-position-right .connector-type-modern .eael-feature-list-item:before, {{WRAPPER}} .-icon-position-right .connector-type-modern .eael-feature-list-item:after' => 'border-width: {{SIZE}}{{UNIT}};',
574	],
575	'condition' => [
576	'eael_feature_list_connector' => 'yes',
577	],
578	]
579	);
580
581	$this->end_controls_section();
582
583	/**
584	* -------------------------------------------
585	* Feature List Icon Style
586	* -------------------------------------------
587	*/
588	$this->start_controls_section(
589	'eael_section_feature_list_style_icon',
590	[
591	'label' => esc_html__( 'Icon', 'essential-addons-for-elementor-lite' ),
592	'tab' => Controls_Manager::TAB_STYLE,
593	]
594	);
595
596	$this->add_group_control(
597	Group_Control_Background::get_type(),
598	[
599	'name' => 'eael_feature_list_icon_background',
600	'types' => ['classic', 'gradient'],
601	'exclude' => [
602	'image',
603	],
604	'color' => [
605	'default' => '#3858f4',
606	],
607	'selector' => '{{WRAPPER}} .eael-feature-list-items .eael-feature-list-icon-box .eael-feature-list-icon-inner',
608	]
609	);
610
611	$this->add_control(
612	'eael_feature_list_secondary_color',
613	[
614	'label' => esc_html__( 'Secondary Color', 'essential-addons-for-elementor-lite' ),
615	'type' => Controls_Manager::COLOR,
616	'default' => '#07b4eb',
617	'selectors' => [
618	'{{WRAPPER}} .eael-feature-list-items.framed .eael-feature-list-icon' => 'background-color: {{VALUE}};',
619	],
620	'condition' => [
621	'eael_feature_list_icon_shape_view' => 'framed',
622	],
623	'separator' => 'before',
624	]
625	);
626
627	$this->add_control(
628	'eael_feature_list_icon_color',
629	[
630	'label' => esc_html__( 'Color', 'essential-addons-for-elementor-lite' ),
631	'type' => Controls_Manager::COLOR,
632	'default' => '#fff',
633	'selectors' => [
634	'{{WRAPPER}} .eael-feature-list-items .eael-feature-list-icon' => 'color: {{VALUE}};',
635	'{{WRAPPER}} .eael-feature-list-items .eael-feature-list-icon svg' => 'fill: {{VALUE}};',
636	],
637	'separator' => 'before',
638	]
639	);
640
641	$this->add_responsive_control(
642	'eael_feature_list_icon_circle_size',
643	[
644	'label' => esc_html__( 'Size', 'essential-addons-for-elementor-lite' ),
645	'type' => Controls_Manager::SLIDER,
646	'default' => [
647	'size' => 70,
648	],
649	'range' => [
650	'px' => [
651	'min' => 6,
652	'max' => 300,
653	],
654	],
655	'selectors' => [
656	'{{WRAPPER}} .eael-feature-list-icon-box .eael-feature-list-icon' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
657	'{{WRAPPER}} .eael-feature-list-items.connector-type-classic .connector' => 'right: calc(100% - {{SIZE}}{{UNIT}});',
658	],
659	]
660	);
661	$this->add_responsive_control(
662	'eael_feature_list_icon_size',
663	[
664	'label' => esc_html__( 'Icon Size', 'essential-addons-for-elementor-lite' ),
665	'type' => Controls_Manager::SLIDER,
666	'default' => [
667	'size' => 21,
668	],
669	'range' => [
670	'px' => [
671	'min' => 6,
672	'max' => 150,
673	],
674	],
675	'selectors' => [
676	'{{WRAPPER}} .eael-feature-list-icon-box .eael-feature-list-icon' => 'font-size: {{SIZE}}{{UNIT}};',
677	'{{WRAPPER}} .eael-feature-list-icon-box .eael-feature-list-icon img' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
678	'{{WRAPPER}} .eael-feature-list-img' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
679	],
680	]
681	);
682
683	$this->add_responsive_control(
684	'eael_feature_list_icon_padding',
685	[
686	'label' => esc_html__( 'Padding', 'essential-addons-for-elementor-lite' ),
687	'type' => Controls_Manager::DIMENSIONS,
688	'size_units' => ['px', '%', 'em'],
689	'default' => [
690	'top' => 15,
691	'right' => 15,
692	'bottom' => 15,
693	'left' => 15,
694	'isLinked' => true,
695	],
696	'selectors' => [
697	'{{WRAPPER}} .eael-feature-list-icon-box .eael-feature-list-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
698	],
699	]
700	);
701
702	$this->add_control(
703	'eael_feature_list_icon_border_width',
704	[
705	'label' => esc_html__( 'Border Width', 'essential-addons-for-elementor-lite' ),
706	'type' => Controls_Manager::SLIDER,
707	'default' => [
708	'size' => 1,
709	],
710	'range' => [
711	'px' => [
712	'min' => 1,
713	'max' => 50,
714	],
715	],
716	'selectors' => [
717	'{{WRAPPER}} .eael-feature-list-icon-box .eael-feature-list-icon-inner' => 'padding: {{SIZE}}{{UNIT}};',
718
719	],
720	'condition' => [
721	'eael_feature_list_icon_shape_view' => 'framed',
722	],
723	]
724	);
725
726	$this->add_control(
727	'eael_feature_list_icon_border_radius',
728	[
729	'label' => esc_html__( 'Border Radius', 'essential-addons-for-elementor-lite' ),
730	'type' => Controls_Manager::DIMENSIONS,
731	'size_units' => ['px', '%'],
732	'selectors' => [
733	'{{WRAPPER}} .eael-feature-list-icon-box .eael-feature-list-icon-inner' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
734	'{{WRAPPER}} .eael-feature-list-icon-box .eael-feature-list-icon-inner .eael-feature-list-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
735	],
736	'condition' => [
737	'eael_feature_list_icon_shape_view' => 'framed',
738	],
739	]
740	);
741
742	$this->add_responsive_control(
743	'eael_feature_list_icon_space',
744	[
745	'label' => esc_html__( 'Spacing', 'essential-addons-for-elementor-lite' ),
746	'type' => Controls_Manager::SLIDER,
747	'range' => [
748	'px' => [
749	'min' => 0,
750	'max' => 100,
751	],
752	],
753	'devices' => ['desktop', 'tablet', 'mobile'],
754	'desktop_default' => [
755	'size' => 30,
756	'unit' => 'px',
757	],
758	'tablet_default' => [
759	'size' => 20,
760	'unit' => 'px',
761	],
762	'mobile_default' => [
763	'size' => 10,
764	'unit' => 'px',
765	],
766	'selectors' => [
767	'{{WRAPPER}} .-icon-position-left .eael-feature-list-content-box, {{WRAPPER}} .-icon-position-right .eael-feature-list-content-box, {{WRAPPER}} .-icon-position-top .eael-feature-list-content-box' => 'margin: {{SIZE}}{{UNIT}};',
768	'(mobile){{WRAPPER}} .-mobile-icon-position-left .eael-feature-list-content-box' => 'margin: 0 0 0 {{SIZE}}{{UNIT}} !important;',
769	'(mobile){{WRAPPER}} .-mobile-icon-position-right .eael-feature-list-content-box' => 'margin: 0 {{SIZE}}{{UNIT}} 0 0 !important;',
770	],
771	]
772	);
773
774	$this->end_controls_section();
775
776	/**
777	* -------------------------------------------
778	* Feature List Content Style
779	* -------------------------------------------
780	*/
781	$this->start_controls_section(
782	'eael_section_feature_list_style_content',
783	[
784	'label' => esc_html__( 'Content', 'essential-addons-for-elementor-lite' ),
785	'tab' => Controls_Manager::TAB_STYLE,
786	]
787	);
788
789	$this->add_responsive_control(
790	'eael_feature_list_text_align',
791	[
792	'label' => __( 'Alignment', 'essential-addons-for-elementor-lite' ),
793	'type' => Controls_Manager::CHOOSE,
794	'options' => [
795	'left' => [
796	'title' => __( 'Left', 'essential-addons-for-elementor-lite' ),
797	'icon' => 'eicon-text-align-left',
798	],
799	'center' => [
800	'title' => __( 'Center', 'essential-addons-for-elementor-lite' ),
801	'icon' => 'eicon-text-align-center',
802	],
803	'right' => [
804	'title' => __( 'Right', 'essential-addons-for-elementor-lite' ),
805	'icon' => 'eicon-text-align-right',
806	],
807	'justify' => [
808	'title' => __( 'Justified', 'essential-addons-for-elementor-lite' ),
809	'icon' => 'eicon-text-align-justify',
810	],
811	],
812	'condition' => [
813	'eael_feature_list_icon_position' => 'top',
814	],
815	'selectors' => [
816	'{{WRAPPER}} .eael-feature-list-item' => 'text-align: {{VALUE}};',
817	],
818	]
819	);
820
821	$this->add_control(
822	'eael_feature_list_heading_title',
823	[
824	'label' => esc_html__( 'Title', 'essential-addons-for-elementor-lite' ),
825	'type' => Controls_Manager::HEADING,
826	]
827	);
828
829	$this->add_responsive_control(
830	'eael_feature_list_title_bottom_space',
831	[
832	'label' => esc_html__( 'Title Bottom Space', 'essential-addons-for-elementor-lite' ),
833	'type' => Controls_Manager::SLIDER,
834	'default' => [
835	'size' => 10,
836	],
837	'range' => [
838	'px' => [
839	'min' => 0,
840	'max' => 100,
841	],
842	],
843	'selectors' => [
844	'{{WRAPPER}} .eael-feature-list-item .eael-feature-list-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
845	],
846	]
847	);
848
849	$this->add_control(
850	'eael_feature_list_title_color',
851	[
852	'label' => esc_html__( 'Color', 'essential-addons-for-elementor-lite' ),
853	'type' => Controls_Manager::COLOR,
854	'default' => '#414247',
855	'selectors' => [
856	'{{WRAPPER}} .eael-feature-list-content-box .eael-feature-list-title, {{WRAPPER}} .eael-feature-list-content-box .eael-feature-list-title > a, {{WRAPPER}} .eael-feature-list-content-box .eael-feature-list-title:visited' => 'color: {{VALUE}};',
857	],
858	'global' => [
859	'default' => Global_Colors::COLOR_PRIMARY
860	],
861	]
862	);
863
864	$this->add_group_control(
865	Group_Control_Typography::get_type(),
866	[
867	'name' => 'eael_feature_list_title_typography',
868	'selector' => '{{WRAPPER}} .eael-feature-list-content-box .eael-feature-list-title, {{WRAPPER}} .eael-feature-list-content-box .eael-feature-list-title a',
869	'global' => [
870	'default' => Global_Typography::TYPOGRAPHY_PRIMARY
871	],
872	]
873	);
874
875	$this->add_control(
876	'eael_feature_list_description',
877	[
878	'label' => esc_html__( 'Description', 'essential-addons-for-elementor-lite' ),
879	'type' => Controls_Manager::HEADING,
880	'separator' => 'before',
881	]
882	);
883
884	$this->add_control(
885	'eael_feature_list_description_color',
886	[
887	'label' => esc_html__( 'Color', 'essential-addons-for-elementor-lite' ),
888	'type' => Controls_Manager::COLOR,
889	'default' => '',
890	'selectors' => [
891	'{{WRAPPER}} .eael-feature-list-content-box .eael-feature-list-content' => 'color: {{VALUE}};',
892	],
893	'global' => [
894	'default' => Global_Colors::COLOR_TEXT
895	],
896	]
897	);
898
899	$this->add_group_control(
900	Group_Control_Typography::get_type(),
901	[
902	'name' => 'eael_feature_list_description_typography',
903	'selector' => '{{WRAPPER}} .eael-feature-list-content-box .eael-feature-list-content',
904	'global' => [
905	'default' => Global_Typography::TYPOGRAPHY_TEXT
906	],
907	'fields_options' => [
908	'font_size' => ['default' => ['unit' => 'px', 'size' => 14]],
909	],
910	]
911	);
912
913	$this->end_controls_section();
914	}
915
916	protected function render() {
917	$settings = $this->get_settings_for_display();
918	$css_id = 'eael-feature-list-' . esc_attr( $this->get_id() );
919	$layout = ( !empty($settings['eael_feature_list_layout']) && $settings['eael_feature_list_layout'] ) ? $settings['eael_feature_list_layout'] : 'vertical';
920
921	$this->add_render_attribute( 'eael_feature_list', [
922	'id' => $css_id,
923	'class' => [
924	'eael-feature-list-items',
925	$settings['eael_feature_list_icon_shape'],
926	$settings['eael_feature_list_icon_shape_view'],
927	$settings['eael_feature_list_connector_type'],
928	'eael-feature-list-' . $layout,
929	],
930	] );
931	// connector class change by connector type
932	if ( $settings['eael_feature_list_icon_position'] == 'top' && $settings['eael_feature_list_connector'] == 'yes' ) {
933	$this->add_render_attribute( 'eael_feature_list', 'class', 'connector-type-modern' );
934	}
935
936	$this->add_render_attribute( 'eael_feature_list_item', 'class', 'eael-feature-list-item' );
937
938	// $padding = $settings['eael_feature_list_icon_padding']['size'];
939	$circle_size = isset( $settings['eael_feature_list_icon_circle_size']['size'] ) ? intval( $settings['eael_feature_list_icon_circle_size']['size'] ) : 70;
940	$font = isset( $settings['eael_feature_list_icon_size']['size'] ) ? $settings['eael_feature_list_icon_size']['size'] : 21;
941
942	if ( isset( $settings['eael_feature_list_icon_border_width']['right'] ) && isset( $settings['eael_feature_list_icon_border_width']['left'] ) ) {
943	$border = $settings['eael_feature_list_icon_border_width']['right'] + $settings['eael_feature_list_icon_border_width']['left'];
944	}
945
946	if ( !empty($settings['eael_feature_list_icon_shape']) && $settings['eael_feature_list_icon_shape'] == 'rhombus' ) {
947	$margin = 30;
948	$connector_width = intval( $circle_size + $margin + ( !empty( $settings['eael_feature_list_connector_width']['size'] ) ? $settings['eael_feature_list_connector_width']['size'] : 0 ) );
949	} else {
950	$connector_width = intval( $circle_size + ( !empty( $settings['eael_feature_list_connector_width']['size'] ) ? $settings['eael_feature_list_connector_width']['size'] : 0 ) );
951	}
952
953	// connector
954	if ( !empty($settings['eael_feature_list_icon_position']) && $settings['eael_feature_list_icon_position'] == 'right' ) {
955	$connector = 'left: calc(100% - ' . $connector_width . 'px); right: 0;';
956	} else {
957	$connector = 'right: calc(100% - ' . $connector_width . 'px); left: 0;';
958	}
959	// mobile
960	if ( !empty($settings['eael_feature_list_icon_position_tablet']) && $settings['eael_feature_list_icon_position_tablet'] == 'right' ) {
961	$connector_tablet = 'left: calc(100% - ' . $connector_width . 'px); right: 0;';
962	} else {
963	$connector_tablet = 'right: calc(100% - ' . $connector_width . 'px); left: 0;';
964	}
965	// mobile
966	if ( !empty($settings['eael_feature_list_icon_position_mobile']) && $settings['eael_feature_list_icon_position_mobile'] == 'right' ) {
967	$connector_mobile = 'left: calc(100% - ' . $connector_width . 'px); right: 0;';
968	} else {
969	$connector_mobile = 'right: calc(100% - ' . $connector_width . 'px); left: 0;';
970	}
971
972	// icon position for all mode
973	$eael_feature_list_icon_position_setting = ( !empty($settings['eael_feature_list_icon_position']) && $settings['eael_feature_list_icon_position'] ) ? $settings['eael_feature_list_icon_position'] : 'left';
974	$eael_feature_list_icon_position_tablet_setting = ( !empty($settings['eael_feature_list_icon_position_tablet']) && $settings['eael_feature_list_icon_position_tablet'] ) ? $settings['eael_feature_list_icon_position_tablet'] : 'left';
975	$eael_feature_list_icon_position_mobile_setting = ( !empty($settings['eael_feature_list_icon_position_mobile']) && $settings['eael_feature_list_icon_position_mobile'] ) ? $settings['eael_feature_list_icon_position_mobile'] : 'left';
976	$this->add_render_attribute(
977	'eael_feature_list_wrapper',
978	[
979	'class' => [
980	'-icon-position-' . $eael_feature_list_icon_position_setting,
981	'-tablet-icon-position-' . $eael_feature_list_icon_position_tablet_setting,
982	'-mobile-icon-position-' . $eael_feature_list_icon_position_mobile_setting,
983	],
984	]
985	);
986
987	?>
988	<div <?php $this->print_render_attribute_string( 'eael_feature_list_wrapper' ); ?>>
989	<ul <?php $this->print_render_attribute_string( 'eael_feature_list' ); ?>>
990	<?php
991	$individual_icon_color_css = '';
992	foreach ( $settings['eael_feature_list'] as $index => $item ):
993
994	$this->add_render_attribute( 'eael_feature_list_icon' . $index, 'class', 'eael-feature-list-icon fl-icon-'.$index );
995	$this->add_render_attribute( 'eael_feature_list_title' . $index, 'class', 'eael-feature-list-title' );
996	$this->add_render_attribute( 'eael_feature_list_content' . $index, 'class', 'eael-feature-list-content' );
997	// icon color
998	$icon_color = ( $item['eael_feature_list_icon_is_individual_style'] == 'on' && isset($item['eael_feature_list_icon_individual_color']) ) ? esc_attr( $item['eael_feature_list_icon_individual_color'] ) : '' ;
999	$icon_bg = ( ( $item['eael_feature_list_icon_is_individual_style'] == 'on' ) ? ' style="background-color:' . esc_attr( $item['eael_feature_list_icon_individual_bg_color'] ) . '"' : '' );
1000	$icon_box_bg = ( ( $item['eael_feature_list_icon_is_individual_style'] == 'on' ) ? ' style="background-color:' . esc_attr( $item['eael_feature_list_icon_individual_box_bg_color'] ) . '"' : '' );
1001
1002	$feat_title_tag = Helper::eael_validate_html_tag($settings['eael_feature_list_title_size']);
1003
1004	if ( $item['eael_feature_list_link']['url'] ) {
1005	$this->add_link_attributes( 'eael_feature_list_title_anchor_' . $index, $item['eael_feature_list_link'] );
1006	}
1007
1008	$feature_icon_tag = 'span';
1009
1010	$feature_has_icon = ( !empty( $item['eael_feature_list_icon'] ) \|\| !empty( $item['eael_feature_list_icon_new'] ) );
1011
1012	if ( $item['eael_feature_list_link']['url'] ) {
1013	$this->add_link_attributes( 'eael_feature_list_link' . $index, $item['eael_feature_list_link'] );
1014
1015	$feature_icon_tag = 'a';
1016	}
1017	?>
1018	<li class="eael-feature-list-item <?php echo 'elementor-repeater-item-' . esc_attr( $item['_id'] ); ?>">
1019	<?php if ( 'yes' == $settings['eael_feature_list_connector'] ): ?>
1020	<span class="connector" style="<?php echo esc_attr( $connector ); ?>"></span>
1021	<span class="connector connector-tablet" style="<?php echo esc_attr( $connector_tablet ); ?>"></span>
1022	<span class="connector connector-mobile" style="<?php echo esc_attr( $connector_mobile ); ?>"></span>
1023	<?php endif;?>
1024
1025	<div class="eael-feature-list-icon-box">
1026	<div class="eael-feature-list-icon-inner">
1027
1028	<<?php echo esc_html( $feature_icon_tag ) . ' '; $this->print_render_attribute_string( 'eael_feature_list_icon' . $index); $this->print_render_attribute_string( 'eael_feature_list_link' . $index); ?>>
1029
1030	<?php
1031	if ( $item['eael_feature_list_icon_type'] == 'icon' && $feature_has_icon ) {
1032
1033	if ( empty( $item['eael_feature_list_icon'] ) \|\| isset( $item['__fa4_migrated']['eael_feature_list_icon_new'] ) ) {
1034	Icons_Manager::render_icon( $item['eael_feature_list_icon_new'], [ 'aria-hidden' => 'true' ] );
1035	} else {
1036	echo '<i class="' . esc_attr( $item['eael_feature_list_icon'] ) . '" aria-hidden="true"></i>';
1037	}
1038	}
1039
1040
1041	if ( $item['eael_feature_list_icon_type'] == 'image' ) {
1042	$this->add_render_attribute( 'feature_list_image' . $index, [
1043	'src' => esc_url( $item['eael_feature_list_img']['url'] ),
1044	'class' => 'eael-feature-list-img',
1045	'alt' => esc_attr( get_post_meta( $item['eael_feature_list_img']['id'], '_wp_attachment_image_alt', true ) ),
1046	] );
1047
1048	echo '<img '; $this->print_render_attribute_string( 'feature_list_image' . $index); echo '>';
1049
1050	}?>
1051	</<?php echo esc_html( $feature_icon_tag ); ?>>
1052	</div>
1053	</div>
1054	<div class="eael-feature-list-content-box">
1055	<?php
1056	echo '<' . esc_html( $feat_title_tag ) . ' '; $this->print_render_attribute_string( 'eael_feature_list_title' . $index); echo '>';
1057	$is_linked = ! empty( $item['eael_feature_list_link']['url'] );
1058	if( $is_linked ){
1059	echo '<a '; $this->print_render_attribute_string( 'eael_feature_list_title_anchor_' . $index); echo '>';
1060	}
1061	echo wp_kses( $item['eael_feature_list_title'], Helper::eael_allowed_tags() );
1062	echo $is_linked ? '</a>' : '';
1063	echo '</' . esc_html( $feat_title_tag ) . '>';
1064	?>
1065	<p <?php $this->print_render_attribute_string( 'eael_feature_list_content' . $index); ?>><?php echo wp_kses( $item['eael_feature_list_content'], Helper::eael_allowed_tags() ); ?></p>
1066	</div>
1067
1068	</li>
1069	<?php
1070	endforeach;?>
1071	</ul>
1072	</div>
1073	<?php
1074	}
1075
1076	protected function content_template() {}
1077	}
1078