elementor / includes / widgets / icon-list.php

icon-list.php in Elementor Website Builder – more than just a page builder 3.31.4, at includes/widgets/icon-list.php

858 lines 22.2 KB

Raw Download Zip

1	<?php
2	namespace Elementor;
3
4	if ( ! defined( 'ABSPATH' ) ) {
5	exit; // Exit if accessed directly.
6	}
7
8	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
9	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
10
11	/**
12	* Elementor icon list widget.
13	*
14	* Elementor widget that displays a bullet list with any chosen icons and texts.
15	*
16	* @since 1.0.0
17	*/
18	class Widget_Icon_List extends Widget_Base {
19
20	/**
21	* Get widget name.
22	*
23	* Retrieve icon list widget name.
24	*
25	* @since 1.0.0
26	* @access public
27	*
28	* @return string Widget name.
29	*/
30	public function get_name() {
31	return 'icon-list';
32	}
33
34	/**
35	* Get widget title.
36	*
37	* Retrieve icon list widget title.
38	*
39	* @since 1.0.0
40	* @access public
41	*
42	* @return string Widget title.
43	*/
44	public function get_title() {
45	return esc_html__( 'Icon List', 'elementor' );
46	}
47
48	/**
49	* Get widget icon.
50	*
51	* Retrieve icon list widget icon.
52	*
53	* @since 1.0.0
54	* @access public
55	*
56	* @return string Widget icon.
57	*/
58	public function get_icon() {
59	return 'eicon-bullet-list';
60	}
61
62	/**
63	* Get widget keywords.
64	*
65	* Retrieve the list of keywords the widget belongs to.
66	*
67	* @since 2.1.0
68	* @access public
69	*
70	* @return array Widget keywords.
71	*/
72	public function get_keywords() {
73	return [ 'icon list', 'icon', 'list' ];
74	}
75
76	protected function is_dynamic_content(): bool {
77	return false;
78	}
79
80	public function has_widget_inner_wrapper(): bool {
81	return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
82	}
83
84	/**
85	* Get style dependencies.
86	*
87	* Retrieve the list of style dependencies the widget requires.
88	*
89	* @since 3.24.0
90	* @access public
91	*
92	* @return array Widget style dependencies.
93	*/
94	public function get_style_depends(): array {
95	return [ 'widget-icon-list' ];
96	}
97
98	/**
99	* Register icon list widget controls.
100	*
101	* Adds different input fields to allow the user to change and customize the widget settings.
102	*
103	* @since 3.1.0
104	* @access protected
105	*/
106	protected function register_controls() {
107	$this->start_controls_section(
108	'section_icon',
109	[
110	'label' => esc_html__( 'Icon List', 'elementor' ),
111	]
112	);
113
114	$this->add_control(
115	'view',
116	[
117	'label' => esc_html__( 'Layout', 'elementor' ),
118	'type' => Controls_Manager::CHOOSE,
119	'default' => 'traditional',
120	'options' => [
121	'traditional' => [
122	'title' => esc_html__( 'Default', 'elementor' ),
123	'icon' => 'eicon-editor-list-ul',
124	],
125	'inline' => [
126	'title' => esc_html__( 'Inline', 'elementor' ),
127	'icon' => 'eicon-ellipsis-h',
128	],
129	],
130	'render_type' => 'template',
131	'classes' => 'elementor-control-start-end',
132	'style_transfer' => true,
133	'prefix_class' => 'elementor-icon-list--layout-',
134	]
135	);
136
137	$repeater = new Repeater();
138
139	$repeater->add_control(
140	'text',
141	[
142	'label' => esc_html__( 'Text', 'elementor' ),
143	'type' => Controls_Manager::TEXT,
144	'label_block' => true,
145	'placeholder' => esc_html__( 'List Item', 'elementor' ),
146	'default' => esc_html__( 'List Item', 'elementor' ),
147	'dynamic' => [
148	'active' => true,
149	],
150	]
151	);
152
153	$repeater->add_control(
154	'selected_icon',
155	[
156	'label' => esc_html__( 'Icon', 'elementor' ),
157	'type' => Controls_Manager::ICONS,
158	'default' => [
159	'value' => 'fas fa-check',
160	'library' => 'fa-solid',
161	],
162	'fa4compatibility' => 'icon',
163	]
164	);
165
166	$repeater->add_control(
167	'link',
168	[
169	'label' => esc_html__( 'Link', 'elementor' ),
170	'type' => Controls_Manager::URL,
171	'dynamic' => [
172	'active' => true,
173	],
174	]
175	);
176
177	$this->add_control(
178	'icon_list',
179	[
180	'label' => esc_html__( 'Items', 'elementor' ),
181	'type' => Controls_Manager::REPEATER,
182	'fields' => $repeater->get_controls(),
183	'default' => [
184	[
185	'text' => esc_html__( 'List Item #1', 'elementor' ),
186	'selected_icon' => [
187	'value' => 'fas fa-check',
188	'library' => 'fa-solid',
189	],
190	],
191	[
192	'text' => esc_html__( 'List Item #2', 'elementor' ),
193	'selected_icon' => [
194	'value' => 'fas fa-times',
195	'library' => 'fa-solid',
196	],
197	],
198	[
199	'text' => esc_html__( 'List Item #3', 'elementor' ),
200	'selected_icon' => [
201	'value' => 'fas fa-dot-circle',
202	'library' => 'fa-solid',
203	],
204	],
205	],
206	'title_field' => '{{{ elementor.helpers.renderIcon( this, selected_icon, {}, "i", "panel" ) \|\| \'<i class="{{ icon }}" aria-hidden="true"></i>\' }}} {{{ text }}}',
207	]
208	);
209
210	$this->add_control(
211	'link_click',
212	[
213	'label' => esc_html__( 'Apply Link On', 'elementor' ),
214	'type' => Controls_Manager::SELECT,
215	'options' => [
216	'full_width' => esc_html__( 'Full Width', 'elementor' ),
217	'inline' => esc_html__( 'Inline', 'elementor' ),
218	],
219	'default' => 'full_width',
220	'separator' => 'before',
221	'prefix_class' => 'elementor-list-item-link-',
222	]
223	);
224
225	$this->end_controls_section();
226
227	$this->start_controls_section(
228	'section_icon_list',
229	[
230	'label' => esc_html__( 'List', 'elementor' ),
231	'tab' => Controls_Manager::TAB_STYLE,
232	]
233	);
234
235	$this->add_responsive_control(
236	'space_between',
237	[
238	'label' => esc_html__( 'Space Between', 'elementor' ),
239	'type' => Controls_Manager::SLIDER,
240	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
241	'range' => [
242	'px' => [
243	'max' => 50,
244	],
245	],
246	'selectors' => [
247	'{{WRAPPER}} .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child)' => 'padding-block-end: calc({{SIZE}}{{UNIT}}/2)',
248	'{{WRAPPER}} .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child)' => 'margin-block-start: calc({{SIZE}}{{UNIT}}/2)',
249	'{{WRAPPER}} .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item' => 'margin-inline: calc({{SIZE}}{{UNIT}}/2)',
250	'{{WRAPPER}} .elementor-icon-list-items.elementor-inline-items' => 'margin-inline: calc(-{{SIZE}}{{UNIT}}/2)',
251	'{{WRAPPER}} .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after' => 'inset-inline-end: calc(-{{SIZE}}{{UNIT}}/2)',
252	],
253	]
254	);
255
256	$this->add_responsive_control(
257	'icon_align',
258	[
259	'label' => esc_html__( 'Alignment', 'elementor' ),
260	'type' => Controls_Manager::CHOOSE,
261	'options' => [
262	'left' => [
263	'title' => esc_html__( 'Left', 'elementor' ),
264	'icon' => 'eicon-h-align-left',
265	],
266	'center' => [
267	'title' => esc_html__( 'Center', 'elementor' ),
268	'icon' => 'eicon-h-align-center',
269	],
270	'right' => [
271	'title' => esc_html__( 'Right', 'elementor' ),
272	'icon' => 'eicon-h-align-right',
273	],
274	],
275	'prefix_class' => 'elementor%s-align-',
276	]
277	);
278
279	$this->add_control(
280	'divider',
281	[
282	'label' => esc_html__( 'Divider', 'elementor' ),
283	'type' => Controls_Manager::SWITCHER,
284	'label_off' => esc_html__( 'Off', 'elementor' ),
285	'label_on' => esc_html__( 'On', 'elementor' ),
286	'selectors' => [
287	'{{WRAPPER}} .elementor-icon-list-item:not(:last-child):after' => 'content: ""',
288	],
289	'separator' => 'before',
290	]
291	);
292
293	$this->add_control(
294	'divider_style',
295	[
296	'label' => esc_html__( 'Style', 'elementor' ),
297	'type' => Controls_Manager::SELECT,
298	'options' => [
299	'solid' => esc_html__( 'Solid', 'elementor' ),
300	'double' => esc_html__( 'Double', 'elementor' ),
301	'dotted' => esc_html__( 'Dotted', 'elementor' ),
302	'dashed' => esc_html__( 'Dashed', 'elementor' ),
303	],
304	'default' => 'solid',
305	'condition' => [
306	'divider' => 'yes',
307	],
308	'selectors' => [
309	'{{WRAPPER}} .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child):after' => 'border-block-start-style: {{VALUE}}',
310	'{{WRAPPER}} .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:not(:last-child):after' => 'border-inline-start-style: {{VALUE}}',
311	],
312	]
313	);
314
315	$this->add_control(
316	'divider_weight',
317	[
318	'label' => esc_html__( 'Weight', 'elementor' ),
319	'type' => Controls_Manager::SLIDER,
320	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
321	'default' => [
322	'size' => 1,
323	],
324	'range' => [
325	'px' => [
326	'min' => 1,
327	'max' => 20,
328	],
329	],
330	'condition' => [
331	'divider' => 'yes',
332	],
333	'selectors' => [
334	'{{WRAPPER}} .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child):after' => 'border-block-start-width: {{SIZE}}{{UNIT}}',
335	'{{WRAPPER}} .elementor-inline-items .elementor-icon-list-item:not(:last-child):after' => 'border-inline-start-width: {{SIZE}}{{UNIT}}',
336	],
337	]
338	);
339
340	$this->add_control(
341	'divider_width',
342	[
343	'label' => esc_html__( 'Width', 'elementor' ),
344	'type' => Controls_Manager::SLIDER,
345	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
346	'default' => [
347	'unit' => '%',
348	],
349	'condition' => [
350	'divider' => 'yes',
351	'view!' => 'inline',
352	],
353	'selectors' => [
354	'{{WRAPPER}} .elementor-icon-list-item:not(:last-child):after' => 'width: {{SIZE}}{{UNIT}}',
355	],
356	]
357	);
358
359	$this->add_control(
360	'divider_height',
361	[
362	'label' => esc_html__( 'Height', 'elementor' ),
363	'type' => Controls_Manager::SLIDER,
364	'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'custom' ],
365	'default' => [
366	'unit' => '%',
367	],
368	'range' => [
369	'px' => [
370	'min' => 1,
371	'max' => 100,
372	],
373	'%' => [
374	'min' => 1,
375	'max' => 100,
376	],
377	'vh' => [
378	'min' => 1,
379	'max' => 100,
380	],
381	],
382	'condition' => [
383	'divider' => 'yes',
384	'view' => 'inline',
385	],
386	'selectors' => [
387	'{{WRAPPER}} .elementor-icon-list-item:not(:last-child):after' => 'height: {{SIZE}}{{UNIT}}',
388	],
389	]
390	);
391
392	$this->add_control(
393	'divider_color',
394	[
395	'label' => esc_html__( 'Color', 'elementor' ),
396	'type' => Controls_Manager::COLOR,
397	'default' => '#ddd',
398	'global' => [
399	'default' => Global_Colors::COLOR_TEXT,
400	],
401	'condition' => [
402	'divider' => 'yes',
403	],
404	'selectors' => [
405	'{{WRAPPER}} .elementor-icon-list-item:not(:last-child):after' => 'border-color: {{VALUE}}',
406	],
407	]
408	);
409
410	$this->end_controls_section();
411
412	$this->start_controls_section(
413	'section_icon_style',
414	[
415	'label' => esc_html__( 'Icon', 'elementor' ),
416	'tab' => Controls_Manager::TAB_STYLE,
417	]
418	);
419
420	$this->start_controls_tabs( 'icon_colors' );
421
422	$this->start_controls_tab(
423	'icon_colors_normal',
424	[
425	'label' => esc_html__( 'Normal', 'elementor' ),
426	]
427	);
428
429	$this->add_control(
430	'icon_color',
431	[
432	'label' => esc_html__( 'Color', 'elementor' ),
433	'type' => Controls_Manager::COLOR,
434	'default' => '',
435	'selectors' => [
436	'{{WRAPPER}} .elementor-icon-list-icon i' => 'color: {{VALUE}};',
437	'{{WRAPPER}} .elementor-icon-list-icon svg' => 'fill: {{VALUE}};',
438	],
439	'global' => [
440	'default' => Global_Colors::COLOR_PRIMARY,
441	],
442	]
443	);
444
445	$this->end_controls_tab();
446
447	$this->start_controls_tab(
448	'icon_colors_hover',
449	[
450	'label' => esc_html__( 'Hover', 'elementor' ),
451	]
452	);
453
454	$this->add_control(
455	'icon_color_hover',
456	[
457	'label' => esc_html__( 'Color', 'elementor' ),
458	'type' => Controls_Manager::COLOR,
459	'default' => '',
460	'selectors' => [
461	'{{WRAPPER}} .elementor-icon-list-item:hover .elementor-icon-list-icon i' => 'color: {{VALUE}};',
462	'{{WRAPPER}} .elementor-icon-list-item:hover .elementor-icon-list-icon svg' => 'fill: {{VALUE}};',
463	],
464	]
465	);
466
467	$this->add_control(
468	'icon_color_hover_transition',
469	[
470	'label' => esc_html__( 'Transition Duration', 'elementor' ),
471	'type' => Controls_Manager::SLIDER,
472	'size_units' => [ 's', 'ms', 'custom' ],
473	'default' => [
474	'unit' => 's',
475	'size' => 0.3,
476	],
477	'selectors' => [
478	'{{WRAPPER}} .elementor-icon-list-icon i' => 'transition: color {{SIZE}}{{UNIT}}',
479	'{{WRAPPER}} .elementor-icon-list-icon svg' => 'transition: fill {{SIZE}}{{UNIT}}',
480	],
481	]
482	);
483
484	$this->end_controls_tab();
485
486	$this->end_controls_tabs();
487
488	$this->add_responsive_control(
489	'icon_size',
490	[
491	'label' => esc_html__( 'Size', 'elementor' ),
492	'type' => Controls_Manager::SLIDER,
493	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
494	'default' => [
495	'size' => 14,
496	],
497	'range' => [
498	'px' => [
499	'min' => 6,
500	],
501	'%' => [
502	'min' => 6,
503	],
504	'vw' => [
505	'min' => 6,
506	],
507	],
508	'separator' => 'before',
509	'selectors' => [
510	'{{WRAPPER}}' => '--e-icon-list-icon-size: {{SIZE}}{{UNIT}};',
511	],
512	]
513	);
514
515	$this->add_control(
516	'text_indent',
517	[
518	'label' => esc_html__( 'Gap', 'elementor' ),
519	'type' => Controls_Manager::SLIDER,
520	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
521	'range' => [
522	'px' => [
523	'max' => 50,
524	],
525	],
526	'separator' => 'after',
527	'selectors' => [
528	'{{WRAPPER}} .elementor-icon-list-icon' => 'padding-inline-end: {{SIZE}}{{UNIT}};',
529	],
530	]
531	);
532
533	$e_icon_list_icon_css_var = 'var(--e-icon-list-icon-size, 1em)';
534	$e_icon_list_icon_align_left = sprintf( '0 calc(%s * 0.25) 0 0', $e_icon_list_icon_css_var );
535	$e_icon_list_icon_align_center = sprintf( '0 calc(%s * 0.125)', $e_icon_list_icon_css_var );
536	$e_icon_list_icon_align_right = sprintf( '0 0 0 calc(%s * 0.25)', $e_icon_list_icon_css_var );
537
538	$this->add_responsive_control(
539	'icon_self_align',
540	[
541	'label' => esc_html__( 'Horizontal Alignment', 'elementor' ),
542	'type' => Controls_Manager::CHOOSE,
543	'options' => [
544	'left' => [
545	'title' => esc_html__( 'Left', 'elementor' ),
546	'icon' => 'eicon-h-align-left',
547	],
548	'center' => [
549	'title' => esc_html__( 'Center', 'elementor' ),
550	'icon' => 'eicon-h-align-center',
551	],
552	'right' => [
553	'title' => esc_html__( 'Right', 'elementor' ),
554	'icon' => 'eicon-h-align-right',
555	],
556	],
557	'default' => '',
558	'selectors_dictionary' => [
559	'left' => sprintf( '--e-icon-list-icon-align: left; --e-icon-list-icon-margin: %s;', $e_icon_list_icon_align_left ),
560	'center' => sprintf( '--e-icon-list-icon-align: center; --e-icon-list-icon-margin: %s;', $e_icon_list_icon_align_center ),
561	'right' => sprintf( '--e-icon-list-icon-align: right; --e-icon-list-icon-margin: %s;', $e_icon_list_icon_align_right ),
562	],
563	'selectors' => [
564	'{{WRAPPER}}' => '{{VALUE}}',
565	],
566	]
567	);
568
569	$this->add_responsive_control(
570	'icon_self_vertical_align',
571	[
572	'label' => esc_html__( 'Vertical Alignment', 'elementor' ),
573	'type' => Controls_Manager::CHOOSE,
574	'options' => [
575	'flex-start' => [
576	'title' => esc_html__( 'Start', 'elementor' ),
577	'icon' => 'eicon-v-align-top',
578	],
579	'center' => [
580	'title' => esc_html__( 'Center', 'elementor' ),
581	'icon' => 'eicon-v-align-middle',
582	],
583	'flex-end' => [
584	'title' => esc_html__( 'End', 'elementor' ),
585	'icon' => 'eicon-v-align-bottom',
586	],
587	],
588	'default' => '',
589	'selectors' => [
590	'{{WRAPPER}}' => '--icon-vertical-align: {{VALUE}};',
591	],
592	]
593	);
594
595	$this->add_responsive_control(
596	'icon_vertical_offset',
597	[
598	'label' => esc_html__( 'Adjust Vertical Position', 'elementor' ),
599	'type' => Controls_Manager::SLIDER,
600	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
601	'default' => [
602	'size' => 0,
603	],
604	'range' => [
605	'px' => [
606	'min' => -15,
607	'max' => 15,
608	],
609	'em' => [
610	'min' => -1,
611	'max' => 1,
612	],
613	],
614	'selectors' => [
615	'{{WRAPPER}}' => '--icon-vertical-offset: {{SIZE}}{{UNIT}};',
616	],
617	]
618	);
619
620	$this->end_controls_section();
621
622	$this->start_controls_section(
623	'section_text_style',
624	[
625	'label' => esc_html__( 'Text', 'elementor' ),
626	'tab' => Controls_Manager::TAB_STYLE,
627	]
628	);
629
630	$this->add_group_control(
631	Group_Control_Typography::get_type(),
632	[
633	'name' => 'icon_typography',
634	'selector' => '{{WRAPPER}} .elementor-icon-list-item > .elementor-icon-list-text, {{WRAPPER}} .elementor-icon-list-item > a',
635	'global' => [
636	'default' => Global_Typography::TYPOGRAPHY_TEXT,
637	],
638	]
639	);
640
641	$this->add_group_control(
642	Group_Control_Text_Shadow::get_type(),
643	[
644	'name' => 'text_shadow',
645	'selector' => '{{WRAPPER}} .elementor-icon-list-text',
646	]
647	);
648
649	$this->start_controls_tabs( 'text_colors' );
650
651	$this->start_controls_tab(
652	'text_colors_normal',
653	[
654	'label' => esc_html__( 'Normal', 'elementor' ),
655	]
656	);
657
658	$this->add_control(
659	'text_color',
660	[
661	'label' => esc_html__( 'Color', 'elementor' ),
662	'type' => Controls_Manager::COLOR,
663	'default' => '',
664	'selectors' => [
665	'{{WRAPPER}} .elementor-icon-list-text' => 'color: {{VALUE}};',
666	],
667	'global' => [
668	'default' => Global_Colors::COLOR_SECONDARY,
669	],
670	]
671	);
672
673	$this->end_controls_tab();
674
675	$this->start_controls_tab(
676	'text_colors_hover',
677	[
678	'label' => esc_html__( 'Hover', 'elementor' ),
679	]
680	);
681
682	$this->add_control(
683	'text_color_hover',
684	[
685	'label' => esc_html__( 'Color', 'elementor' ),
686	'type' => Controls_Manager::COLOR,
687	'default' => '',
688	'selectors' => [
689	'{{WRAPPER}} .elementor-icon-list-item:hover .elementor-icon-list-text' => 'color: {{VALUE}};',
690	],
691	]
692	);
693
694	$this->add_control(
695	'text_color_hover_transition',
696	[
697	'label' => esc_html__( 'Transition Duration', 'elementor' ),
698	'type' => Controls_Manager::SLIDER,
699	'size_units' => [ 's', 'ms', 'custom' ],
700	'default' => [
701	'unit' => 's',
702	'size' => 0.3,
703	],
704	'selectors' => [
705	'{{WRAPPER}} .elementor-icon-list-text' => 'transition: color {{SIZE}}{{UNIT}}',
706	],
707	]
708	);
709
710	$this->end_controls_tab();
711
712	$this->end_controls_tabs();
713
714	$this->end_controls_section();
715	}
716
717	/**
718	* Render icon list widget output on the frontend.
719	*
720	* Written in PHP and used to generate the final HTML.
721	*
722	* @since 1.0.0
723	* @access protected
724	*/
725	protected function render() {
726	$settings = $this->get_settings_for_display();
727	$fallback_defaults = [
728	'fa fa-check',
729	'fa fa-times',
730	'fa fa-dot-circle-o',
731	];
732
733	$this->add_render_attribute( 'icon_list', 'class', 'elementor-icon-list-items' );
734	$this->add_render_attribute( 'list_item', 'class', 'elementor-icon-list-item' );
735
736	if ( 'inline' === $settings['view'] ) {
737	$this->add_render_attribute( 'icon_list', 'class', 'elementor-inline-items' );
738	$this->add_render_attribute( 'list_item', 'class', 'elementor-inline-item' );
739	}
740	?>
741	<ul <?php $this->print_render_attribute_string( 'icon_list' ); ?>>
742	<?php
743	foreach ( $settings['icon_list'] as $index => $item ) :
744	$repeater_setting_key = $this->get_repeater_setting_key( 'text', 'icon_list', $index );
745
746	$this->add_render_attribute( $repeater_setting_key, 'class', 'elementor-icon-list-text' );
747
748	$this->add_inline_editing_attributes( $repeater_setting_key );
749	$migration_allowed = Icons_Manager::is_migration_allowed();
750	?>
751	<li <?php $this->print_render_attribute_string( 'list_item' ); ?>>
752	<?php
753	if ( ! empty( $item['link']['url'] ) ) {
754	$link_key = 'link_' . $index;
755
756	$this->add_link_attributes( $link_key, $item['link'] );
757	?>
758	<a <?php $this->print_render_attribute_string( $link_key ); ?>>
759
760	<?php
761	}
762
763	// add old default
764	if ( ! isset( $item['icon'] ) && ! $migration_allowed ) {
765	$item['icon'] = isset( $fallback_defaults[ $index ] ) ? $fallback_defaults[ $index ] : 'fa fa-check';
766	}
767
768	$migrated = isset( $item['__fa4_migrated']['selected_icon'] );
769	$is_new = ! isset( $item['icon'] ) && $migration_allowed;
770	if ( ! empty( $item['icon'] ) \|\| ( ! empty( $item['selected_icon']['value'] ) && $is_new ) ) :
771	?>
772	<span class="elementor-icon-list-icon">
773	<?php
774	if ( $is_new \|\| $migrated ) {
775	Icons_Manager::render_icon( $item['selected_icon'], [ 'aria-hidden' => 'true' ] );
776	} else { ?>
777	<i class="<?php echo esc_attr( $item['icon'] ); ?>" aria-hidden="true"></i>
778	<?php } ?>
779	</span>
780	<?php endif; ?>
781	<span <?php $this->print_render_attribute_string( $repeater_setting_key ); ?>><?php $this->print_unescaped_setting( 'text', 'icon_list', $index ); ?></span>
782	<?php if ( ! empty( $item['link']['url'] ) ) : ?>
783	</a>
784	<?php endif; ?>
785	</li>
786	<?php
787	endforeach;
788	?>
789	</ul>
790	<?php
791	}
792
793	/**
794	* Render icon list widget output in the editor.
795	*
796	* Written as a Backbone JavaScript template and used to generate the live preview.
797	*
798	* @since 2.9.0
799	* @access protected
800	*/
801	protected function content_template() {
802	?>
803	<#
804	view.addRenderAttribute( 'icon_list', 'class', 'elementor-icon-list-items' );
805	view.addRenderAttribute( 'list_item', 'class', 'elementor-icon-list-item' );
806
807	if ( 'inline' == settings.view ) {
808	view.addRenderAttribute( 'icon_list', 'class', 'elementor-inline-items' );
809	view.addRenderAttribute( 'list_item', 'class', 'elementor-inline-item' );
810	}
811	var iconsHTML = {},
812	migrated = {};
813	#>
814	<# if ( settings.icon_list ) { #>
815	<ul {{{ view.getRenderAttributeString( 'icon_list' ) }}}>
816	<# _.each( settings.icon_list, function( item, index ) {
817
818	var iconTextKey = view.getRepeaterSettingKey( 'text', 'icon_list', index );
819
820	view.addRenderAttribute( iconTextKey, 'class', 'elementor-icon-list-text' );
821
822	view.addInlineEditingAttributes( iconTextKey ); #>
823
824	<li {{{ view.getRenderAttributeString( 'list_item' ) }}}>
825	<# if ( item.link && item.link.url ) { #>
826	<a href="{{ elementor.helpers.sanitizeUrl( item.link.url ) }}">
827	<# } #>
828	<# if ( item.icon \|\| item.selected_icon.value ) { #>
829	<span class="elementor-icon-list-icon">
830	<#
831	iconsHTML[ index ] = elementor.helpers.renderIcon( view, item.selected_icon, { 'aria-hidden': true }, 'i', 'object' );
832	migrated[ index ] = elementor.helpers.isIconMigrated( item, 'selected_icon' );
833	if ( iconsHTML[ index ] && iconsHTML[ index ].rendered && ( ! item.icon \|\| migrated[ index ] ) ) { #>
834	{{{ iconsHTML[ index ].value }}}
835	<# } else { #>
836	<i class="{{ item.icon }}" aria-hidden="true"></i>
837	<# }
838	#>
839	</span>
840	<# } #>
841	<span {{{ view.getRenderAttributeString( iconTextKey ) }}}>{{{ item.text }}}</span>
842	<# if ( item.link && item.link.url ) { #>
843	</a>
844	<# } #>
845	</li>
846	<#
847	} ); #>
848	</ul>
849	<# } #>
850
851	<?php
852	}
853
854	public function on_import( $element ) {
855	return Icons_Manager::on_import_migration( $element, 'icon', 'selected_icon', true );
856	}
857	}
858