elementor / includes / widgets / icon-box.php

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

841 lines 21.0 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 box widget.
13	*
14	* Elementor widget that displays an icon, a headline and a text.
15	*
16	* @since 1.0.0
17	*/
18	class Widget_Icon_Box extends Widget_Base {
19
20	/**
21	* Get widget name.
22	*
23	* Retrieve icon box 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-box';
32	}
33
34	/**
35	* Get widget title.
36	*
37	* Retrieve icon box 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 Box', 'elementor' );
46	}
47
48	/**
49	* Get widget icon.
50	*
51	* Retrieve icon box 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-icon-box';
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 box', 'icon' ];
74	}
75
76	protected function is_dynamic_content(): bool {
77	return false;
78	}
79
80	/**
81	* Register icon box widget controls.
82	*
83	* Adds different input fields to allow the user to change and customize the widget settings.
84	*
85	* @since 3.1.0
86	* @access protected
87	*/
88	protected function register_controls() {
89	$this->start_controls_section(
90	'section_icon',
91	[
92	'label' => esc_html__( 'Icon Box', 'elementor' ),
93	]
94	);
95
96	$this->add_control(
97	'selected_icon',
98	[
99	'label' => esc_html__( 'Icon', 'elementor' ),
100	'type' => Controls_Manager::ICONS,
101	'fa4compatibility' => 'icon',
102	'default' => [
103	'value' => 'fas fa-star',
104	'library' => 'fa-solid',
105	],
106	]
107	);
108
109	$this->add_control(
110	'view',
111	[
112	'label' => esc_html__( 'View', 'elementor' ),
113	'type' => Controls_Manager::SELECT,
114	'options' => [
115	'default' => esc_html__( 'Default', 'elementor' ),
116	'stacked' => esc_html__( 'Stacked', 'elementor' ),
117	'framed' => esc_html__( 'Framed', 'elementor' ),
118	],
119	'default' => 'default',
120	'prefix_class' => 'elementor-view-',
121	'condition' => [
122	'selected_icon[value]!' => '',
123	],
124	]
125	);
126
127	$this->add_control(
128	'shape',
129	[
130	'label' => esc_html__( 'Shape', 'elementor' ),
131	'type' => Controls_Manager::SELECT,
132	'options' => [
133	'circle' => esc_html__( 'Circle', 'elementor' ),
134	'square' => esc_html__( 'Square', 'elementor' ),
135	],
136	'default' => 'circle',
137	'condition' => [
138	'view!' => 'default',
139	'selected_icon[value]!' => '',
140	],
141	'prefix_class' => 'elementor-shape-',
142	]
143	);
144
145	$this->add_control(
146	'title_text',
147	[
148	'label' => esc_html__( 'Title', 'elementor' ),
149	'type' => Controls_Manager::TEXT,
150	'dynamic' => [
151	'active' => true,
152	],
153	'default' => esc_html__( 'This is the heading', 'elementor' ),
154	'placeholder' => esc_html__( 'Enter your title', 'elementor' ),
155	'label_block' => true,
156	]
157	);
158
159	$this->add_control(
160	'description_text',
161	[
162	'label' => esc_html__( 'Description', 'elementor' ),
163	'type' => Controls_Manager::TEXTAREA,
164	'dynamic' => [
165	'active' => true,
166	],
167	'default' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
168	'placeholder' => esc_html__( 'Enter your description', 'elementor' ),
169	'rows' => 10,
170	]
171	);
172
173	$this->add_control(
174	'link',
175	[
176	'label' => esc_html__( 'Link', 'elementor' ),
177	'type' => Controls_Manager::URL,
178	'dynamic' => [
179	'active' => true,
180	],
181	'separator' => 'before',
182	]
183	);
184
185	$this->add_control(
186	'title_size',
187	[
188	'label' => esc_html__( 'Title HTML Tag', 'elementor' ),
189	'type' => Controls_Manager::SELECT,
190	'options' => [
191	'h1' => 'H1',
192	'h2' => 'H2',
193	'h3' => 'H3',
194	'h4' => 'H4',
195	'h5' => 'H5',
196	'h6' => 'H6',
197	'div' => 'div',
198	'span' => 'span',
199	'p' => 'p',
200	],
201	'default' => 'h3',
202	]
203	);
204
205	$this->end_controls_section();
206
207	$this->start_controls_section(
208	'section_style_box',
209	[
210	'label' => esc_html__( 'Box', 'elementor' ),
211	'tab' => Controls_Manager::TAB_STYLE,
212	]
213	);
214
215	$this->add_responsive_control(
216	'position',
217	[
218	'label' => esc_html__( 'Icon Position', 'elementor' ),
219	'type' => Controls_Manager::CHOOSE,
220	'default' => 'top',
221	'mobile_default' => 'top',
222	'options' => [
223	'left' => [
224	'title' => esc_html__( 'Left', 'elementor' ),
225	'icon' => 'eicon-h-align-left',
226	],
227	'top' => [
228	'title' => esc_html__( 'Top', 'elementor' ),
229	'icon' => 'eicon-v-align-top',
230	],
231	'right' => [
232	'title' => esc_html__( 'Right', 'elementor' ),
233	'icon' => 'eicon-h-align-right',
234	],
235	],
236	'prefix_class' => 'elementor%s-position-',
237	'condition' => [
238	'selected_icon[value]!' => '',
239	],
240	]
241	);
242
243	$this->add_responsive_control(
244	'content_vertical_alignment',
245	[
246	'label' => esc_html__( 'Vertical Alignment', 'elementor' ),
247	'type' => Controls_Manager::CHOOSE,
248	'options' => [
249	'top' => [
250	'title' => esc_html__( 'Top', 'elementor' ),
251	'icon' => 'eicon-v-align-top',
252	],
253	'middle' => [
254	'title' => esc_html__( 'Middle', 'elementor' ),
255	'icon' => 'eicon-v-align-middle',
256	],
257	'bottom' => [
258	'title' => esc_html__( 'Bottom', 'elementor' ),
259	'icon' => 'eicon-v-align-bottom',
260	],
261	],
262	'default' => 'top',
263	'toggle' => false,
264	'prefix_class' => 'elementor-vertical-align-',
265	'condition' => [
266	'position!' => 'top',
267	],
268	]
269	);
270
271	$this->add_responsive_control(
272	'text_align',
273	[
274	'label' => esc_html__( 'Alignment', 'elementor' ),
275	'type' => Controls_Manager::CHOOSE,
276	'options' => [
277	'left' => [
278	'title' => esc_html__( 'Left', 'elementor' ),
279	'icon' => 'eicon-text-align-left',
280	],
281	'center' => [
282	'title' => esc_html__( 'Center', 'elementor' ),
283	'icon' => 'eicon-text-align-center',
284	],
285	'right' => [
286	'title' => esc_html__( 'Right', 'elementor' ),
287	'icon' => 'eicon-text-align-right',
288	],
289	'justify' => [
290	'title' => esc_html__( 'Justified', 'elementor' ),
291	'icon' => 'eicon-text-align-justify',
292	],
293	],
294	'selectors' => [
295	'{{WRAPPER}} .elementor-icon-box-wrapper' => 'text-align: {{VALUE}};',
296	],
297	'separator' => 'after',
298	]
299	);
300
301	$this->add_responsive_control(
302	'icon_space',
303	[
304	'label' => esc_html__( 'Icon Spacing', 'elementor' ),
305	'type' => Controls_Manager::SLIDER,
306	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
307	'default' => [
308	'size' => 15,
309	],
310	'range' => [
311	'px' => [
312	'max' => 100,
313	],
314	'em' => [
315	'max' => 10,
316	],
317	'rem' => [
318	'max' => 10,
319	],
320	],
321	'selectors' => [
322	'{{WRAPPER}}' => '--icon-box-icon-margin: {{SIZE}}{{UNIT}}',
323	],
324	'condition' => [
325	'selected_icon[value]!' => '',
326	],
327	]
328	);
329
330	$this->add_responsive_control(
331	'title_bottom_space',
332	[
333	'label' => esc_html__( 'Content Spacing', 'elementor' ),
334	'type' => Controls_Manager::SLIDER,
335	'size_units' => [ 'px', 'em', 'rem', 'custom' ],
336	'range' => [
337	'px' => [
338	'max' => 100,
339	],
340	'em' => [
341	'min' => 0,
342	'max' => 10,
343	],
344	'rem' => [
345	'min' => 0,
346	'max' => 10,
347	],
348	],
349	'selectors' => [
350	'{{WRAPPER}} .elementor-icon-box-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
351	],
352	]
353	);
354
355	$this->end_controls_section();
356
357	$this->start_controls_section(
358	'section_style_icon',
359	[
360	'label' => esc_html__( 'Icon', 'elementor' ),
361	'tab' => Controls_Manager::TAB_STYLE,
362	'condition' => [
363	'selected_icon[value]!' => '',
364	],
365	]
366	);
367
368	$this->start_controls_tabs( 'icon_colors' );
369
370	$this->start_controls_tab(
371	'icon_colors_normal',
372	[
373	'label' => esc_html__( 'Normal', 'elementor' ),
374	]
375	);
376
377	$this->add_control(
378	'primary_color',
379	[
380	'label' => esc_html__( 'Primary Color', 'elementor' ),
381	'type' => Controls_Manager::COLOR,
382	'global' => [
383	'default' => Global_Colors::COLOR_PRIMARY,
384	],
385	'default' => '',
386	'selectors' => [
387	'{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'background-color: {{VALUE}};',
388	'{{WRAPPER}}.elementor-view-framed .elementor-icon, {{WRAPPER}}.elementor-view-default .elementor-icon' => 'fill: {{VALUE}}; color: {{VALUE}}; border-color: {{VALUE}};',
389	],
390	]
391	);
392
393	$this->add_control(
394	'secondary_color',
395	[
396	'label' => esc_html__( 'Secondary Color', 'elementor' ),
397	'type' => Controls_Manager::COLOR,
398	'default' => '',
399	'condition' => [
400	'view!' => 'default',
401	],
402	'selectors' => [
403	'{{WRAPPER}}.elementor-view-framed .elementor-icon' => 'background-color: {{VALUE}};',
404	'{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'fill: {{VALUE}}; color: {{VALUE}};',
405	],
406	]
407	);
408
409	$this->end_controls_tab();
410
411	$this->start_controls_tab(
412	'icon_colors_hover',
413	[
414	'label' => esc_html__( 'Hover', 'elementor' ),
415	]
416	);
417
418	$this->add_control(
419	'hover_primary_color',
420	[
421	'label' => esc_html__( 'Primary Color', 'elementor' ),
422	'type' => Controls_Manager::COLOR,
423	'default' => '',
424	'selectors' => [
425	'{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'background-color: {{VALUE}};',
426	'{{WRAPPER}}.elementor-view-framed .elementor-icon:hover, {{WRAPPER}}.elementor-view-default .elementor-icon:hover' => 'fill: {{VALUE}}; color: {{VALUE}}; border-color: {{VALUE}};',
427	],
428	]
429	);
430
431	$this->add_control(
432	'hover_secondary_color',
433	[
434	'label' => esc_html__( 'Secondary Color', 'elementor' ),
435	'type' => Controls_Manager::COLOR,
436	'default' => '',
437	'condition' => [
438	'view!' => 'default',
439	],
440	'selectors' => [
441	'{{WRAPPER}}.elementor-view-framed .elementor-icon:hover' => 'background-color: {{VALUE}};',
442	'{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'fill: {{VALUE}}; color: {{VALUE}};',
443	],
444	]
445	);
446
447	$this->add_control(
448	'hover_animation',
449	[
450	'label' => esc_html__( 'Hover Animation', 'elementor' ),
451	'type' => Controls_Manager::HOVER_ANIMATION,
452	]
453	);
454
455	$this->end_controls_tab();
456
457	$this->end_controls_tabs();
458
459	$this->add_responsive_control(
460	'icon_size',
461	[
462	'label' => esc_html__( 'Size', 'elementor' ),
463	'type' => Controls_Manager::SLIDER,
464	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
465	'range' => [
466	'px' => [
467	'min' => 6,
468	'max' => 300,
469	],
470	],
471	'selectors' => [
472	'{{WRAPPER}} .elementor-icon' => 'font-size: {{SIZE}}{{UNIT}};',
473	],
474	]
475	);
476
477	$this->add_responsive_control(
478	'icon_padding',
479	[
480	'label' => esc_html__( 'Padding', 'elementor' ),
481	'type' => Controls_Manager::SLIDER,
482	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
483	'selectors' => [
484	'{{WRAPPER}} .elementor-icon' => 'padding: {{SIZE}}{{UNIT}};',
485	],
486	'range' => [
487	'px' => [
488	'max' => 50,
489	],
490	'em' => [
491	'min' => 0,
492	'max' => 5,
493	],
494	'rem' => [
495	'min' => 0,
496	'max' => 5,
497	],
498	],
499	'condition' => [
500	'view!' => 'default',
501	],
502	]
503	);
504
505	$active_breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
506
507	$rotate_device_args = [];
508
509	$rotate_device_settings = [
510	'default' => [
511	'unit' => 'deg',
512	],
513	];
514
515	foreach ( $active_breakpoints as $breakpoint_name => $breakpoint ) {
516	$rotate_device_args[ $breakpoint_name ] = $rotate_device_settings;
517	}
518
519	$this->add_responsive_control(
520	'rotate',
521	[
522	'label' => esc_html__( 'Rotate', 'elementor' ),
523	'type' => Controls_Manager::SLIDER,
524	'size_units' => [ 'deg', 'grad', 'rad', 'turn', 'custom' ],
525	'default' => [
526	'unit' => 'deg',
527	],
528	'tablet_default' => [
529	'unit' => 'deg',
530	],
531	'mobile_default' => [
532	'unit' => 'deg',
533	],
534	'device_args' => $rotate_device_args,
535	'selectors' => [
536	'{{WRAPPER}} .elementor-icon i' => 'transform: rotate({{SIZE}}{{UNIT}});',
537	],
538	]
539	);
540
541	$this->add_responsive_control(
542	'border_width',
543	[
544	'label' => esc_html__( 'Border Width', 'elementor' ),
545	'type' => Controls_Manager::DIMENSIONS,
546	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
547	'selectors' => [
548	'{{WRAPPER}} .elementor-icon' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
549	],
550	'condition' => [
551	'view' => 'framed',
552	],
553	]
554	);
555
556	$this->add_responsive_control(
557	'border_radius',
558	[
559	'label' => esc_html__( 'Border Radius', 'elementor' ),
560	'type' => Controls_Manager::DIMENSIONS,
561	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
562	'selectors' => [
563	'{{WRAPPER}} .elementor-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
564	],
565	'condition' => [
566	'view!' => 'default',
567	],
568	'separator' => 'before',
569	]
570	);
571
572	$this->end_controls_section();
573
574	$this->start_controls_section(
575	'section_style_content',
576	[
577	'label' => esc_html__( 'Content', 'elementor' ),
578	'tab' => Controls_Manager::TAB_STYLE,
579	]
580	);
581
582	$this->add_control(
583	'heading_title',
584	[
585	'label' => esc_html__( 'Title', 'elementor' ),
586	'type' => Controls_Manager::HEADING,
587	'separator' => 'before',
588	]
589	);
590
591	$this->add_control(
592	'title_color',
593	[
594	'label' => esc_html__( 'Color', 'elementor' ),
595	'type' => Controls_Manager::COLOR,
596	'default' => '',
597	'selectors' => [
598	'{{WRAPPER}} .elementor-icon-box-title' => 'color: {{VALUE}};',
599	],
600	'global' => [
601	'default' => Global_Colors::COLOR_PRIMARY,
602	],
603	]
604	);
605
606	$this->add_group_control(
607	Group_Control_Typography::get_type(),
608	[
609	'name' => 'title_typography',
610	'selector' => '{{WRAPPER}} .elementor-icon-box-title, {{WRAPPER}} .elementor-icon-box-title a',
611	'global' => [
612	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
613	],
614	]
615	);
616
617	$this->add_group_control(
618	Group_Control_Text_Stroke::get_type(),
619	[
620	'name' => 'text_stroke',
621	'selector' => '{{WRAPPER}} .elementor-icon-box-title',
622	]
623	);
624
625	$this->add_group_control(
626	Group_Control_Text_Shadow::get_type(),
627	[
628	'name' => 'title_shadow',
629	'selector' => '{{WRAPPER}} .elementor-icon-box-title',
630	]
631	);
632
633	$this->add_control(
634	'heading_description',
635	[
636	'label' => esc_html__( 'Description', 'elementor' ),
637	'type' => Controls_Manager::HEADING,
638	'separator' => 'before',
639	]
640	);
641
642	$this->add_control(
643	'description_color',
644	[
645	'label' => esc_html__( 'Color', 'elementor' ),
646	'type' => Controls_Manager::COLOR,
647	'default' => '',
648	'selectors' => [
649	'{{WRAPPER}} .elementor-icon-box-description' => 'color: {{VALUE}};',
650	],
651	'global' => [
652	'default' => Global_Colors::COLOR_TEXT,
653	],
654	]
655	);
656
657	$this->add_group_control(
658	Group_Control_Typography::get_type(),
659	[
660	'name' => 'description_typography',
661	'selector' => '{{WRAPPER}} .elementor-icon-box-description',
662	'global' => [
663	'default' => Global_Typography::TYPOGRAPHY_TEXT,
664	],
665	]
666	);
667
668	$this->add_group_control(
669	Group_Control_Text_Shadow::get_type(),
670	[
671	'name' => 'description_shadow',
672	'selector' => '{{WRAPPER}} .elementor-icon-box-description',
673	]
674	);
675
676	$this->end_controls_section();
677	}
678
679	/**
680	* Render icon box widget output on the frontend.
681	*
682	* Written in PHP and used to generate the final HTML.
683	*
684	* @since 1.0.0
685	* @access protected
686	*/
687	protected function render() {
688	$settings = $this->get_settings_for_display();
689	$has_link = ! empty( $settings['link']['url'] );
690	$html_tag = $has_link ? 'a' : 'span';
691
692	$this->add_render_attribute( 'icon', 'class', [ 'elementor-icon', 'elementor-animation-' . $settings['hover_animation'] ] );
693
694	$has_icon = ! empty( $settings['selected_icon']['value'] );
695	$has_content = ! Utils::is_empty( $settings['title_text'] ) \|\| ! Utils::is_empty( $settings['description_text'] );
696
697	if ( ! $has_icon && ! $has_content ) {
698	return;
699	}
700
701	if ( $has_link ) {
702	$this->add_link_attributes( 'link', $settings['link'] );
703	$this->add_render_attribute( 'icon', 'tabindex', '-1' );
704	}
705
706	if ( ! isset( $settings['icon'] ) && ! Icons_Manager::is_migration_allowed() ) {
707	// add old default
708	$settings['icon'] = 'fa fa-star';
709	}
710
711	if ( ! empty( $settings['icon'] ) ) {
712	$this->add_render_attribute( 'i', 'class', $settings['icon'] );
713	$this->add_render_attribute( 'i', 'aria-hidden', 'true' );
714	}
715
716	$this->add_render_attribute( 'description_text', 'class', 'elementor-icon-box-description' );
717
718	$this->add_inline_editing_attributes( 'title_text', 'none' );
719	$this->add_inline_editing_attributes( 'description_text' );
720
721	$migrated = isset( $settings['__fa4_migrated']['selected_icon'] );
722	$is_new = ! isset( $settings['icon'] ) && Icons_Manager::is_migration_allowed();
723	?>
724	<div class="elementor-icon-box-wrapper">
725
726	<?php if ( $has_icon ) : ?>
727	<div class="elementor-icon-box-icon">
728	<<?php Utils::print_validated_html_tag( $html_tag ); ?> <?php $this->print_render_attribute_string( 'link' ); ?> <?php $this->print_render_attribute_string( 'icon' ); ?>>
729	<?php
730	if ( $is_new \|\| $migrated ) {
731	Icons_Manager::render_icon( $settings['selected_icon'], [ 'aria-hidden' => 'true' ] );
732	} elseif ( ! empty( $settings['icon'] ) ) {
733	?><i <?php $this->print_render_attribute_string( 'i' ); ?>></i><?php
734	}
735	?>
736	</<?php Utils::print_validated_html_tag( $html_tag ); ?>>
737	</div>
738	<?php endif; ?>
739
740	<?php if ( $has_content ) : ?>
741	<div class="elementor-icon-box-content">
742
743	<?php if ( ! Utils::is_empty( $settings['title_text'] ) ) : ?>
744	<<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?> class="elementor-icon-box-title">
745	<<?php Utils::print_validated_html_tag( $html_tag ); ?> <?php $this->print_render_attribute_string( 'link' ); ?> <?php $this->print_render_attribute_string( 'title_text' ); ?>>
746	<?php $this->print_unescaped_setting( 'title_text' ); ?>
747	</<?php Utils::print_validated_html_tag( $html_tag ); ?>>
748	</<?php Utils::print_validated_html_tag( $settings['title_size'] ); ?>>
749	<?php endif; ?>
750
751	<?php if ( ! Utils::is_empty( $settings['description_text'] ) ) : ?>
752	<p <?php $this->print_render_attribute_string( 'description_text' ); ?>>
753	<?php $this->print_unescaped_setting( 'description_text' ); ?>
754	</p>
755	<?php endif; ?>
756
757	</div>
758	<?php endif; ?>
759
760	</div>
761	<?php
762	}
763
764	/**
765	* Render icon box widget output in the editor.
766	*
767	* Written as a Backbone JavaScript template and used to generate the live preview.
768	*
769	* @since 2.9.0
770	* @access protected
771	*/
772	protected function content_template() {
773	?>
774	<#
775	// For older version `settings.icon` is needed.
776	var hasIcon = settings.icon \|\| settings.selected_icon.value;
777	var hasContent = settings.title_text \|\| settings.description_text;
778
779	if ( ! hasIcon && ! hasContent ) {
780	return;
781	}
782
783	var hasLink = settings.link.url,
784	htmlTag = hasLink ? 'a' : 'span',
785	iconHTML = elementor.helpers.renderIcon( view, settings.selected_icon, { 'aria-hidden': true }, 'i' , 'object' ),
786	migrated = elementor.helpers.isIconMigrated( settings, 'selected_icon' ),
787	titleSizeTag = elementor.helpers.validateHTMLTag( settings.title_size );
788
789	view.addRenderAttribute( 'icon', 'class', 'elementor-icon elementor-animation-' + settings.hover_animation );
790
791	if ( hasLink ) {
792	view.addRenderAttribute( 'link', 'href', settings.link.url );
793	view.addRenderAttribute( 'icon', 'tabindex', '-1' );
794	}
795
796	view.addRenderAttribute( 'description_text', 'class', 'elementor-icon-box-description' );
797
798	view.addInlineEditingAttributes( 'title_text', 'none' );
799	view.addInlineEditingAttributes( 'description_text' );
800	#>
801	<div class="elementor-icon-box-wrapper">
802
803	<# if ( hasIcon ) { #>
804	<div class="elementor-icon-box-icon">
805	<{{{ htmlTag }}} {{{ view.getRenderAttributeString( 'link' ) }}} {{{ view.getRenderAttributeString( 'icon' ) }}}>
806	<# if ( iconHTML && iconHTML.rendered && ( ! settings.icon \|\| migrated ) ) { #>
807	{{{ elementor.helpers.sanitize( iconHTML.value ) }}}
808	<# } else { #>
809	<i class="{{ _.escape( settings.icon ) }}" aria-hidden="true"></i>
810	<# } #>
811	</{{{ htmlTag }}}>
812	</div>
813	<# } #>
814
815	<# if ( hasContent ) { #>
816	<div class="elementor-icon-box-content">
817
818	<# if ( settings.title_text ) { #>
819	<{{{ titleSizeTag }}} class="elementor-icon-box-title">
820	<{{{ htmlTag }}} {{{ view.getRenderAttributeString( 'link' ) }}} {{{ view.getRenderAttributeString( 'title_text' ) }}}>
821	{{{ elementor.helpers.sanitize( settings.title_text ) }}}
822	</{{{ htmlTag }}}>
823	</{{{ titleSizeTag }}}>
824	<# } #>
825
826	<# if ( settings.description_text ) { #>
827	<p {{{ view.getRenderAttributeString( 'description_text' ) }}}>{{{ elementor.helpers.sanitize( settings.description_text ) }}}</p>
828	<# } #>
829
830	</div>
831	<# } #>
832
833	</div>
834	<?php
835	}
836
837	public function on_import( $element ) {
838	return Icons_Manager::on_import_migration( $element, 'icon', 'selected_icon', true );
839	}
840	}
841