easy-elements / widgets / counter / counter.php

counter.php in Easy Elements for Elementor – Addons & Website Templates 1.0.7, at widgets/counter/counter.php

770 lines 20.1 KB

Raw Download Zip

1	<?php
2	use Elementor\Controls_Manager;
3	use Elementor\Group_Control_Typography;
4	use Elementor\Group_Control_Text_Stroke;
5
6	defined('ABSPATH') \|\| die();
7
8	class Easyel_Counter_Widget extends \Elementor\Widget_Base {
9
10	public function get_style_depends() {
11	$handles = [];
12	// Counter CSS
13	$counter_handle = 'eel-counter-style';
14	$counter_css_path = plugin_dir_path( __FILE__ ) . 'css/counter.css';
15	if ( file_exists( $counter_css_path ) && ! wp_style_is( $counter_handle, 'registered' ) ) {
16	wp_register_style(
17	$counter_handle,
18	plugins_url( 'css/counter.css', __FILE__ ),
19	[],
20	defined( 'WP_DEBUG' ) && WP_DEBUG ? filemtime( $counter_css_path ) : EASYELEMENTS_VER
21	);
22	$handles[] = $counter_handle;
23	}
24	return $handles;
25	}
26
27	public function get_script_depends() {
28	$handle = 'eel-cnt-script';
29	$js_path = plugin_dir_path( __FILE__ ) . 'js/counter.js';
30	if ( ! wp_script_is( $handle, 'registered' ) && file_exists( $js_path ) ) {
31	wp_register_script( $handle, plugins_url( 'js/counter.js', __FILE__ ), [ 'jquery' ], filemtime( $js_path ), true );
32	}
33	return [ $handle ];
34	}
35
36	public function get_name() {
37	return 'eel-counter';
38	}
39
40	public function get_title() {
41	return __( 'Counter', 'easy-elements' );
42	}
43
44	public function get_icon() {
45	return 'easyicon eicon-counter';
46	}
47
48	public function get_categories() {
49	return [ 'easyelements_category' ];
50	}
51
52	public function get_keywords() {
53	return [ 'counter', 'funfact', 'Countdown' ];
54	}
55
56	protected function register_controls()
57	{
58	$this->start_controls_section(
59	'section_counter',
60	[
61	'label' => esc_html__('Counter', 'easy-elements'),
62	]
63	);
64
65	$this->add_control(
66	'number',
67	[
68	'label' => esc_html__('Ending Number', 'easy-elements'),
69	'type' => Controls_Manager::NUMBER,
70	'default' => 500,
71	'dynamic' => [
72	'active' => true,
73	],
74	]
75	);
76
77	$this->add_control(
78	'prefix',
79	[
80	'label' => esc_html__('Number Prefix', 'easy-elements'),
81	'type' => Controls_Manager::TEXT,
82	'default' => '',
83	'dynamic' => [
84	'active' => true,
85	],
86	]
87	);
88
89	$this->add_control(
90	'suffix',
91	[
92	'label' => esc_html__('Number Suffix', 'easy-elements'),
93	'type' => Controls_Manager::TEXT,
94	'default' => '',
95	'dynamic' => [
96	'active' => true,
97	],
98	]
99	);
100
101	$this->add_control(
102	'duration',
103	[
104	'label' => esc_html__('Animation Duration (ms)', 'easy-elements'),
105	'type' => Controls_Manager::NUMBER,
106	'default' => 1000,
107	'placeholder' => 'Suffix',
108	]
109	);
110
111	$this->add_control(
112	'format',
113	[
114	'label' => __('Separator', 'easy-elements'),
115	'type' => \Elementor\Controls_Manager::SELECT,
116	'default' => 'default',
117	'options' => [
118	'default' => __('Default', 'easy-elements'),
119	'comma' => __('Comma', 'easy-elements'),
120	'dot' => __('Dot', 'easy-elements'),
121	'space' => __('Space', 'easy-elements'),
122	'underline' => __('Underline', 'easy-elements'),
123	],
124	]
125	);
126
127	$this->add_control(
128	'cnt-icon-enable',
129	[
130	'label' => esc_html__( 'Icon Show', 'easy-elements' ),
131	'type' => Controls_Manager::SWITCHER,
132	'label_on' => esc_html__( 'Yes', 'easy-elements' ),
133	'label_off' => esc_html__( 'No', 'easy-elements' ),
134	'return_value' => 'yes',
135	'default' => 'no',
136	]
137	);
138
139	$this->add_control(
140	'cnt-icon',
141	[
142	'label' => esc_html__( 'Icon', 'easy-elements' ),
143	'type' => \Elementor\Controls_Manager::ICONS,
144	'default' => [
145	'value' => 'fas fa-layer-group',
146	'library' => 'fa-solid',
147	],
148	'condition' => [
149	'cnt-icon-enable' => 'yes',
150	]
151	]
152	);
153
154	$this->add_control(
155	'title',
156	[
157	'label' => esc_html__('Title', 'easy-elements'),
158	'type' => Controls_Manager::TEXT,
159	'placeholder' => esc_html__('Label', 'easy-elements'),
160	'default' => esc_html__('Easy Elements', 'easy-elements'),
161	'label_block' => 'true',
162	'dynamic' => [
163	'active' => true,
164	],
165	]
166	);
167
168	$this->add_control(
169	'title_tag',
170	[
171	'label' => esc_html__('Select Title Tag', 'easy-elements'),
172	'type' => Controls_Manager::SELECT,
173	'default' => 'span',
174	'options' => [
175	'h1' => esc_html__('H1', 'easy-elements'),
176	'h2' => esc_html__('H2', 'easy-elements'),
177	'h3' => esc_html__('H3', 'easy-elements'),
178	'h4' => esc_html__('H4', 'easy-elements'),
179	'h5' => esc_html__('H5', 'easy-elements'),
180	'h6' => esc_html__('H6', 'easy-elements'),
181	'p' => esc_html__('P', 'easy-elements'),
182	'div' => esc_html__('div', 'easy-elements'),
183	'span' => esc_html__('span', 'easy-elements'),
184	],
185	]
186	);
187	$this->end_controls_section();
188
189	$this->start_controls_section(
190	'counter_styles',
191	[
192	'label' => esc_html__('Counter', 'easy-elements'),
193	'tab' => Controls_Manager::TAB_STYLE,
194	]
195	);
196
197	$this->add_responsive_control(
198	'content_align',
199	[
200	'label' => esc_html__( 'Content Alignment', 'easy-elements' ),
201	'type' => \Elementor\Controls_Manager::CHOOSE,
202	'options' => [
203	'left' => [
204	'title' => esc_html__( 'Left', 'easy-elements' ),
205	'icon' => 'eicon-text-align-left',
206	],
207	'center' => [
208	'title' => esc_html__( 'Center', 'easy-elements' ),
209	'icon' => 'eicon-text-align-center',
210	],
211	'right' => [
212	'title' => esc_html__( 'Right', 'easy-elements' ),
213	'icon' => 'eicon-text-align-right',
214	],
215	],
216	'toggle' => true,
217	'selectors' => [
218	'{{WRAPPER}} .eel-cnt-wrap' => 'text-align: {{VALUE}};',
219	'{{WRAPPER}} .eel-cnt-number-wrap' => 'justify-content: {{VALUE}};',
220	],
221	]
222	);
223
224	$this->add_responsive_control(
225	'content_gap',
226	[
227	'label' => esc_html__( 'Content Gap', 'easy-elements' ),
228	'type' => \Elementor\Controls_Manager::SLIDER,
229	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
230	'selectors' => [
231	'{{WRAPPER}} .eel-cnt-title' => 'margin-top: {{SIZE}}{{UNIT}};',
232	],
233	]
234	);
235
236	$this->add_responsive_control(
237	'sub_pre_gap',
238	[
239	'label' => esc_html__( 'Prefix Suffix Gap', 'easy-elements' ),
240	'type' => \Elementor\Controls_Manager::SLIDER,
241	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
242	'selectors' => [
243	'{{WRAPPER}} .eel-cnt-number-wrap' => 'gap: {{SIZE}}{{UNIT}};',
244	],
245	'conditions' => [
246	'relation' => 'or',
247	'terms' => [
248	[
249	'name' => 'prefix',
250	'operator' => '!=',
251	'value' => '',
252	],
253	[
254	'name' => 'suffix',
255	'operator' => '!=',
256	'value' => '',
257	],
258	],
259	],
260	]
261	);
262
263	$this->add_responsive_control(
264	'wrap_df_hrzn_align',
265	[
266	'label' => esc_html__( 'Horizontal Alignment', 'easy-elements' ),
267	'type' => \Elementor\Controls_Manager::CHOOSE,
268	'options' => [
269	'start' => [
270	'title' => esc_html__( 'Start', 'easy-elements' ),
271	'icon' => 'eicon-h-align-left',
272	],
273	'center' => [
274	'title' => esc_html__( 'Center', 'easy-elements' ),
275	'icon' => 'eicon-h-align-center',
276	],
277	'end' => [
278	'title' => esc_html__( 'End', 'easy-elements' ),
279	'icon' => 'eicon-h-align-right',
280	],
281	],
282	'toggle' => true,
283	'selectors' => [
284	'{{WRAPPER}} .eel-cnt-wrap' => 'align-items: {{VALUE}};',
285	],
286	'condition' => [
287	'cnt-icon-enable!' => 'yes',
288	]
289	]
290	);
291
292	$this->add_responsive_control(
293	'icon_position',
294	[
295	'label' => esc_html__( 'Icon Position', 'easy-elements' ),
296	'type' => \Elementor\Controls_Manager::CHOOSE,
297	'separator' => 'before',
298	'default' => 'top',
299	'options' => [
300	'left' => [
301	'title' => esc_html__( 'Left', 'easy-elements' ),
302	'icon' => 'eicon-h-align-left',
303	],
304	'top' => [
305	'title' => esc_html__( 'Top', 'easy-elements' ),
306	'icon' => 'eicon-v-align-top',
307	],
308	'bottom' => [
309	'title' => esc_html__( 'Bottom', 'easy-elements' ),
310	'icon' => 'eicon-v-align-bottom',
311	],
312	'right' => [
313	'title' => esc_html__( 'Right', 'easy-elements' ),
314	'icon' => 'eicon-h-align-right',
315	],
316	],
317	'toggle' => true,
318	'prefix_class' => 'eel-cnt-icon-pos-',
319	'condition' => [
320	'cnt-icon-enable' => 'yes',
321	]
322	]
323	);
324
325	$this->add_responsive_control(
326	'wrap_vrt_lr_align',
327	[
328	'label' => esc_html__( 'Vertical Alignment', 'easy-elements' ),
329	'type' => \Elementor\Controls_Manager::CHOOSE,
330	'options' => [
331	'start' => [
332	'title' => esc_html__( 'Top', 'easy-elements' ),
333	'icon' => 'eicon-h-align-left',
334	],
335	'center' => [
336	'title' => esc_html__( 'Middle', 'easy-elements' ),
337	'icon' => 'eicon-h-align-center',
338	],
339	'end' => [
340	'title' => esc_html__( 'Bottom', 'easy-elements' ),
341	'icon' => 'eicon-h-align-right',
342	],
343	],
344	'toggle' => true,
345	'selectors' => [
346	'{{WRAPPER}} .eel-cnt-wrap' => 'align-items: {{VALUE}};',
347	],
348	'condition' => [
349	'icon_position' => [ 'left', 'right' ],
350	'cnt-icon-enable' => 'yes',
351	],
352	]
353	);
354
355	$this->add_responsive_control(
356	'wrap_hrzn_tb_alig',
357	[
358	'label' => esc_html__( 'Horizontal Alignment', 'easy-elements' ),
359	'type' => \Elementor\Controls_Manager::CHOOSE,
360	'options' => [
361	'start' => [
362	'title' => esc_html__( 'Start', 'easy-elements' ),
363	'icon' => 'eicon-h-align-left',
364	],
365	'center' => [
366	'title' => esc_html__( 'Center', 'easy-elements' ),
367	'icon' => 'eicon-h-align-center',
368	],
369	'end' => [
370	'title' => esc_html__( 'End', 'easy-elements' ),
371	'icon' => 'eicon-h-align-right',
372	],
373	],
374	'toggle' => true,
375	'selectors' => [
376	'{{WRAPPER}} .eel-cnt-wrap' => 'align-items: {{VALUE}};',
377	],
378	'condition' => [
379	'icon_position' => [ 'top', 'bottom' ],
380	'cnt-icon-enable' => 'yes',
381	]
382	]
383	);
384
385	$this->add_responsive_control(
386	'wrap_hrzn_lr_align',
387	[
388	'label' => esc_html__( 'Horizontal Alignment', 'easy-elements' ),
389	'type' => \Elementor\Controls_Manager::CHOOSE,
390	'options' => [
391	'start' => [
392	'title' => esc_html__( 'Start', 'easy-elements' ),
393	'icon' => 'eicon-h-align-left',
394	],
395	'center' => [
396	'title' => esc_html__( 'Center', 'easy-elements' ),
397	'icon' => 'eicon-h-align-center',
398	],
399	'end' => [
400	'title' => esc_html__( 'End', 'easy-elements' ),
401	'icon' => 'eicon-h-align-right',
402	],
403	'space-between' => [
404	'title' => esc_html__( 'Stretch', 'easy-elements' ),
405	'icon' => 'eicon-grow',
406	],
407	],
408	'toggle' => true,
409	'selectors' => [
410	'{{WRAPPER}} .eel-cnt-wrap' => 'justify-content: {{VALUE}};',
411	],
412	'condition' => [
413	'icon_position' => [ 'left', 'right' ],
414	'cnt-icon-enable' => 'yes',
415	],
416	]
417	);
418
419	$this->add_responsive_control(
420	'icon_gap',
421	[
422	'label' => esc_html__( 'Icon Gap', 'easy-elements' ),
423	'type' => \Elementor\Controls_Manager::SLIDER,
424	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
425	'selectors' => [
426	'{{WRAPPER}} .eel-cnt-wrap' => 'gap: {{SIZE}}{{UNIT}};',
427	],
428	'condition' => [
429	'cnt-icon-enable' => 'yes',
430	]
431	]
432	);
433	$this->end_controls_section();
434
435	$this->start_controls_section(
436	'section_number',
437	[
438	'label' => esc_html__('Number', 'easy-elements'),
439	'tab' => Controls_Manager::TAB_STYLE,
440	'condition' => [
441	'number!' => ''
442	]
443	]
444	);
445
446	$this->add_control(
447	'number_color',
448	[
449	'label' => esc_html__('Color', 'easy-elements'),
450	'type' => Controls_Manager::COLOR,
451	'selectors' => [
452	'{{WRAPPER}} .eel-cnt-number-wrap' => 'color: {{VALUE}};',
453	],
454	]
455	);
456
457	$this->add_group_control(
458	Group_Control_Typography::get_type(),
459	[
460	'label' => esc_html__('Typography', 'easy-elements'),
461	'name' => 'number_typography',
462	'selector' => '{{WRAPPER}} .eel-cnt-number-wrap',
463	]
464	);
465
466	$this->add_group_control(
467	\Elementor\Group_Control_Text_Stroke::get_type(),
468	[
469	'name' => 'number_stroke',
470	'selector' => '{{WRAPPER}} .eel-cnt-number',
471	]
472	);
473
474	$this->add_group_control(
475	\Elementor\Group_Control_Text_Shadow::get_type(),
476	[
477	'name' => 'number_text_shadow',
478	'label' => esc_html__('Text Shadow', 'easy-elements'),
479	'selector' => '{{WRAPPER}} .eel-cnt-number',
480	]
481	);
482	$this->end_controls_section();
483
484	$this->start_controls_section(
485	'prefix_styles',
486	[
487	'label' => esc_html__('Prefix', 'easy-elements'),
488	'tab' => Controls_Manager::TAB_STYLE,
489	'condition' => [
490	'prefix!' => '',
491	]
492	]
493	);
494	$this->add_control(
495	'prefix_color',
496	[
497	'label' => esc_html__('Color', 'easy-elements'),
498	'type' => Controls_Manager::COLOR,
499	'selectors' => [
500	'{{WRAPPER}} .eel-cnt-prefix' => 'color: {{VALUE}};',
501	],
502	]
503	);
504	$this->add_group_control(
505	Group_Control_Typography::get_type(),
506	[
507	'label' => esc_html__('Typography', 'easy-elements'),
508	'name' => 'prefix_typography',
509	'selector' => '{{WRAPPER}} .eel-cnt-prefix',
510	]
511	);
512
513	$this->add_group_control(
514	\Elementor\Group_Control_Text_Shadow::get_type(),
515	[
516	'name' => 'prefix_text_shadow',
517	'label' => esc_html__('Text Shadow', 'easy-elements'),
518	'selector' => '{{WRAPPER}} .eel-cnt-prefix',
519	]
520	);
521	$this->end_controls_section();
522
523	$this->start_controls_section(
524	'suffix_styles',
525	[
526	'label' => esc_html__('Suffix', 'easy-elements'),
527	'tab' => Controls_Manager::TAB_STYLE,
528	'condition' => [
529	'suffix!' => '',
530	]
531	]
532	);
533
534	$this->add_control(
535	'suffix_color',
536	[
537	'label' => esc_html__('Color', 'easy-elements'),
538	'type' => Controls_Manager::COLOR,
539	'selectors' => [
540	'{{WRAPPER}} .eel-cnt-suffix' => 'color: {{VALUE}};',
541	],
542	]
543	);
544
545	$this->add_group_control(
546	Group_Control_Typography::get_type(),
547	[
548	'label' => esc_html__('Typography', 'easy-elements'),
549	'name' => 'suffix_typography',
550	'selector' => '{{WRAPPER}} .eel-cnt-suffix',
551	]
552	);
553
554	$this->add_group_control(
555	\Elementor\Group_Control_Text_Shadow::get_type(),
556	[
557	'name' => 'suffix_text_shadow',
558	'label' => esc_html__('Text Shadow', 'easy-elements'),
559	'selector' => '{{WRAPPER}} .eel-cnt-suffix',
560	]
561	);
562	$this->end_controls_section();
563
564	$this->start_controls_section(
565	'title_styles',
566	[
567	'label' => esc_html__('Title', 'easy-elements'),
568	'tab' => Controls_Manager::TAB_STYLE,
569	'condition' => [
570	'title!' => '',
571	]
572	]
573	);
574
575	$this->add_control(
576	'title_color',
577	[
578	'label' => esc_html__('Color', 'easy-elements'),
579	'type' => Controls_Manager::COLOR,
580	'selectors' => [
581	'{{WRAPPER}} .eel-cnt-title' => 'color: {{VALUE}};',
582	],
583	]
584	);
585
586	$this->add_group_control(
587	Group_Control_Typography::get_type(),
588	[
589	'label' => esc_html__('Typography', 'easy-elements'),
590	'name' => 'title_typography',
591	'selector' => '{{WRAPPER}} .eel-cnt-title',
592	]
593	);
594
595	$this->add_group_control(
596	\Elementor\Group_Control_Text_Shadow::get_type(),
597	[
598	'name' => 'title_text_shadow',
599	'label' => esc_html__('Text Shadow', 'easy-elements'),
600	'selector' => '{{WRAPPER}} .eel-cnt-title',
601	]
602	);
603	$this->end_controls_section();
604
605	$this->start_controls_section(
606	'icon_style',
607	[
608	'label' => esc_html__('Icon', 'easy-elements'),
609	'tab' => Controls_Manager::TAB_STYLE,
610	'condition' => [
611	'cnt-icon-enable' => 'yes',
612	]
613	]
614	);
615
616	$this->add_control(
617	'icon_color',
618	[
619	'label' => esc_html__('Color', 'easy-elements'),
620	'type' => Controls_Manager::COLOR,
621	'selectors' => [
622	'{{WRAPPER}} .eel-cnt-icon svg' => 'fill: {{VALUE}};',
623	'{{WRAPPER}} .eel-cnt-icon svg path' => 'fill: {{VALUE}};',
624	'{{WRAPPER}} .eel-cnt-icon i' => 'color: {{VALUE}};',
625	],
626	]
627	);
628
629	$this->add_control(
630	'icon_bgcolor',
631	[
632	'label' => esc_html__('Background', 'easy-elements'),
633	'type' => Controls_Manager::COLOR,
634	'selectors' => [
635	'{{WRAPPER}} .eel-cnt-icon' => 'background: {{VALUE}};',
636	],
637	]
638	);
639
640	$this->add_responsive_control(
641	'icon_box_size',
642	[
643	'label' => esc_html__( 'Size', 'easy-elements' ),
644	'type' => \Elementor\Controls_Manager::SLIDER,
645	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
646	'range' => [
647	'px' => [
648	'min' => 0,
649	'max' => 100,
650	'step' => 0,
651	],
652	'%' => [
653	'min' => 0,
654	'max' => 100,
655	],
656	],
657	'selectors' => [
658	'{{WRAPPER}} .eel-cnt-icon' => 'width: {{SIZE}}{{UNIT}} !important;height: {{SIZE}}{{UNIT}} !important;',
659	],
660	]
661	);
662
663	$this->add_responsive_control(
664	'icon_size',
665	[
666	'label' => esc_html__( 'Icon Size', 'easy-elements' ),
667	'type' => \Elementor\Controls_Manager::SLIDER,
668	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
669	'range' => [
670	'px' => [
671	'min' => 0,
672	'max' => 100,
673	'step' => 0,
674	],
675	'%' => [
676	'min' => 0,
677	'max' => 100,
678	],
679	],
680	'selectors' => [
681	'{{WRAPPER}} .eel-cnt-icon svg' => 'width: {{SIZE}}{{UNIT}} !important;height: {{SIZE}}{{UNIT}} !important;',
682	'{{WRAPPER}} .eel-cnt-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
683	],
684	]
685	);
686
687	$this->add_responsive_control(
688	'icon_border_radius',
689	[
690	'label' => esc_html__( 'Border Radius', 'easy-elements' ),
691	'type' => \Elementor\Controls_Manager::DIMENSIONS,
692	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
693	'selectors' => [
694	'{{WRAPPER}} .eel-cnt-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
695	],
696	]
697	);
698	$this->end_controls_section();
699	}
700
701	protected function render() {
702	$settings = $this->get_settings_for_display();
703	$number = !empty($settings['number']) ? $settings['number'] : 0;
704	$prefix = !empty($settings['prefix']) ? $settings['prefix'] : '';
705	$suffix = !empty($settings['suffix']) ? $settings['suffix'] : '';
706	$title = !empty($settings['title']) ? $settings['title'] : '';
707	$title_tag = !empty($settings['title_tag']) ? $settings['title_tag'] : 'h3';
708
709	$duration = !empty($settings['duration']) ? intval($settings['duration']) : 1000;
710	$format = !empty($settings['format']) ? $settings['format'] : 'default';
711
712	$icon_enabled = !empty($settings['cnt-icon-enable']) && $settings['cnt-icon-enable'] === 'yes';
713	$icon = $icon_enabled && !empty($settings['cnt-icon']['value']) ? $settings['cnt-icon'] : false;
714
715	// Add inline editing
716	$this->add_inline_editing_attributes('prefix', 'basic');
717	$this->add_render_attribute('prefix', 'class', 'eel-cnt-prefix');
718
719	$this->add_inline_editing_attributes('suffix', 'basic');
720	$this->add_render_attribute('suffix', 'class', 'eel-cnt-suffix');
721	?>
722	<div class="eel-cnt-wrap">
723
724	<?php if ($icon) : ?>
725	<div class="eel-cnt-icon">
726	<?php \Elementor\Icons_Manager::render_icon($icon, [ 'aria-hidden' => 'true' ]); ?>
727	</div>
728	<?php endif; ?>
729
730	<div class="eel-cnt-content">
731
732	<?php if ($number !== '') : ?>
733	<div class="eel-cnt-number-wrap">
734
735	<?php if ($prefix !== '') :
736	// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Safe, output contains trusted HTML attributes. ?>
737	<span <?php echo $this->print_render_attribute_string('prefix'); ?>>
738	<?php echo esc_html($prefix); ?>
739	</span>
740	<?php endif; ?>
741
742	<span class="eel-cnt-number eel-counter"
743	data-count="<?php echo esc_attr($number); ?>"
744	data-duration="<?php echo esc_attr($duration); ?>"
745	data-format="<?php echo esc_attr($format); ?>">
746	0
747	</span>
748
749	<?php if ($suffix !== '') :
750	// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Safe, output contains trusted HTML attributes. ?>
751	<span <?php echo $this->print_render_attribute_string('suffix'); ?>>
752	<?php echo esc_html($suffix); ?>
753	</span>
754	<?php endif; ?>
755
756	</div>
757	<?php endif; ?>
758
759	<?php if ($title !== '') : ?>
760	<<?php echo esc_attr($title_tag); ?> class="eel-cnt-title">
761	<?php echo wp_kses_post($title); ?>
762	</<?php echo esc_attr($title_tag); ?>>
763	<?php endif; ?>
764
765	</div>
766	</div>
767	<?php
768	}
769	}
770