elementor / includes / widgets / icon-box.php

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

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