premium-counter.php — Premium Addons for Elementor – Powerful Elementor Templates & Widgets 4.10.30

premium-addons-for-elementor / widgets / premium-counter.php

premium-addons-for-elementor / widgets Last commit date

premium-counter.php

1793 lines

1	<?php
2	/**
3	* Premium Counter.
4	*/
5
6	namespace PremiumAddons\Widgets;
7
8	// Elementor Classes.
9	use Elementor\Widget_Base;
10	use Elementor\Utils;
11	use Elementor\Icons_Manager;
12	use Elementor\Control_Media;
13	use Elementor\Controls_Manager;
14	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
15	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
16	use Elementor\Group_Control_Border;
17	use Elementor\Group_Control_Typography;
18	use Elementor\Group_Control_Text_Shadow;
19
20	// PremiumAddons Classes.
21	use PremiumAddons\Admin\Includes\Admin_Helper;
22	use PremiumAddons\Includes\Helper_Functions;
23
24	if ( ! defined( 'ABSPATH' ) ) {
25	exit; // No access of directly access.
26	}
27
28	/**
29	* Class Premium_Counter
30	*/
31	class Premium_Counter extends Widget_Base {
32
33	/**
34	* Check Icon Draw Option.
35	*
36	* @since 4.9.26
37	* @access public
38	*/
39	public function check_icon_draw() {
40	$is_enabled = Admin_Helper::check_svg_draw( 'premium-counter' );
41	return $is_enabled;
42	}
43
44	/**
45	* Retrieve Widget Name.
46	*
47	* @since 1.0.0
48	* @access public
49	*/
50	public function get_name() {
51	return 'premium-counter';
52	}
53
54	/**
55	* Retrieve Widget Title.
56	*
57	* @since 1.0.0
58	* @access public
59	*/
60	public function get_title() {
61	return __( 'Counter', 'premium-addons-for-elementor' );
62	}
63
64	/**
65	* Retrieve Widget Icon.
66	*
67	* @since 1.0.0
68	* @access public
69	*
70	* @return string widget icon.
71	*/
72	public function get_icon() {
73	return 'pa-counter';
74	}
75
76	/**
77	* Retrieve Widget Dependent CSS.
78	*
79	* @since 1.0.0
80	* @access public
81	*
82	* @return array CSS style handles.
83	*/
84	public function get_style_depends() {
85	return array(
86	'premium-addons',
87	);
88	}
89
90	/**
91	* Retrieve Widget Dependent JS.
92	*
93	* @since 1.0.0
94	* @access public
95	*
96	* @return array JS script handles.
97	*/
98	public function get_script_depends() {
99
100	$draw_scripts = $this->check_icon_draw() ? array(
101	'pa-fontawesome-all',
102	'pa-tweenmax',
103	'pa-motionpath',
104	) : array();
105
106	return array_merge(
107	$draw_scripts,
108	array(
109	'jquery-numerator',
110	'elementor-waypoints',
111	'lottie-js',
112	'premium-addons',
113	)
114	);
115	}
116
117	/**
118	* Retrieve Widget Keywords.
119	*
120	* @since 1.0.0
121	* @access public
122	*
123	* @return string Widget keywords.
124	*/
125	public function get_keywords() {
126	return array( 'pa', 'premium', 'time', 'number' );
127	}
128
129	/**
130	* Retrieve Widget Categories.
131	*
132	* @since 1.5.1
133	* @access public
134	*
135	* @return array Widget categories.
136	*/
137	public function get_categories() {
138	return array( 'premium-elements' );
139	}
140
141	/**
142	* Retrieve Widget Support URL.
143	*
144	* @access public
145	*
146	* @return string support URL.
147	*/
148	public function get_custom_help_url() {
149	return 'https://premiumaddons.com/support/';
150	}
151
152	/**
153	* Register Counter controls.
154	*
155	* @since 1.0.0
156	* @access protected
157	*/
158	protected function register_controls() { // phpcs:ignore PSR2.Methods.MethodDeclaration.Underscore
159
160	$draw_icon = $this->check_icon_draw();
161
162	$this->start_controls_section(
163	'premium_counter_global_settings',
164	array(
165	'label' => __( 'Counter', 'premium-addons-for-elementor' ),
166	)
167	);
168
169	$this->add_control(
170	'premium_counter_title',
171	array(
172	'label' => __( 'Title', 'premium-addons-for-elementor' ),
173	'type' => Controls_Manager::TEXT,
174	'dynamic' => array( 'active' => true ),
175	'description' => __( 'Enter title for stats counter block', 'premium-addons-for-elementor' ),
176	)
177	);
178
179	$this->add_control(
180	'premium_counter_desc',
181	array(
182	'label' => __( 'Description', 'premium-addons-for-elementor' ),
183	'type' => Controls_Manager::TEXTAREA,
184	'rows' => 2,
185	'label_block' => true,
186	'condition' => array(
187	'premium_counter_title!' => '',
188	),
189	)
190	);
191
192	$this->add_control(
193	'premium_counter_start_value',
194	array(
195	'label' => __( 'Starting Number', 'premium-addons-for-elementor' ),
196	'type' => Controls_Manager::NUMBER,
197	'dynamic' => array( 'active' => true ),
198	'default' => 0,
199	)
200	);
201
202	$this->add_control(
203	'premium_counter_end_value',
204	array(
205	'label' => __( 'Final Number', 'premium-addons-for-elementor' ),
206	'type' => Controls_Manager::NUMBER,
207	'dynamic' => array( 'active' => true ),
208	'default' => 500,
209	)
210	);
211
212	$this->add_control(
213	'premium_counter_t_separator',
214	array(
215	'label' => __( 'Thousands Separator', 'premium-addons-for-elementor' ),
216	'type' => Controls_Manager::TEXT,
217	'dynamic' => array( 'active' => true ),
218	'description' => __( 'Separator converts 125000 into 125,000', 'premium-addons-for-elementor' ),
219	'default' => ',',
220	)
221	);
222
223	$this->add_control(
224	'premium_counter_d_after',
225	array(
226	'label' => __( 'Digits After Decimal Point', 'premium-addons-for-elementor' ),
227	'type' => Controls_Manager::NUMBER,
228	'default' => 0,
229	)
230	);
231
232	$this->add_control(
233	'premium_counter_preffix',
234	array(
235	'label' => __( 'Value Prefix', 'premium-addons-for-elementor' ),
236	'type' => Controls_Manager::TEXT,
237	'dynamic' => array( 'active' => true ),
238	'description' => __( 'Enter prefix for counter value', 'premium-addons-for-elementor' ),
239	)
240	);
241
242	$this->add_control(
243	'premium_counter_suffix',
244	array(
245	'label' => __( 'Value Suffix', 'premium-addons-for-elementor' ),
246	'type' => Controls_Manager::TEXT,
247	'dynamic' => array( 'active' => true ),
248	'description' => __( 'Enter suffix for counter value', 'premium-addons-for-elementor' ),
249	)
250	);
251
252	$this->add_control(
253	'premium_counter_speed',
254	array(
255	'label' => __( 'Counting Time', 'premium-addons-for-elementor' ),
256	'type' => Controls_Manager::NUMBER,
257	'description' => __( 'How long should it take to complete the digit?', 'premium-addons-for-elementor' ),
258	'default' => 3,
259	)
260	);
261
262	$this->add_responsive_control(
263	'counter_align',
264	array(
265	'label' => __( 'Alignment', 'premium-addons-for-elementor' ),
266	'type' => Controls_Manager::CHOOSE,
267	'options' => array(
268	'flex-start' => array(
269	'title' => __( 'Left', 'premium-addons-for-elementor' ),
270	'icon' => 'eicon-text-align-left',
271	),
272	'center' => array(
273	'title' => __( 'Center', 'premium-addons-for-elementor' ),
274	'icon' => 'eicon-text-align-center',
275	),
276	'flex-end' => array(
277	'title' => __( 'Right', 'premium-addons-for-elementor' ),
278	'icon' => 'eicon-text-align-right',
279	),
280	),
281	'default' => 'center',
282	'toggle' => false,
283	'selectors' => array(
284	'{{WRAPPER}} .premium-counter:not(.top)' => 'justify-content: {{VALUE}}',
285	'{{WRAPPER}} .premium-counter.top' => 'align-items: {{VALUE}}',
286	),
287	)
288	);
289
290	$this->end_controls_section();
291
292	$this->start_controls_section(
293	'premium_counter_display_options',
294	array(
295	'label' => __( 'Display Options', 'premium-addons-for-elementor' ),
296	)
297	);
298
299	$this->add_control(
300	'icon_switcher',
301	array(
302	'label' => __( 'Icon', 'premium-addons-for-elementor' ),
303	'type' => Controls_Manager::SWITCHER,
304	'default' => 'yes',
305	)
306	);
307
308	$this->add_control(
309	'premium_counter_icon_image',
310	array(
311	'label' => __( 'Icon Type', 'premium-addons-for-elementor' ),
312	'type' => Controls_Manager::SELECT,
313	'description' => __( 'Use a font awesome icon or upload a custom image', 'premium-addons-for-elementor' ),
314	'options' => array(
315	'icon' => __( 'Icon', 'premium-addons-for-elementor' ),
316	'custom' => __( 'Image', 'premium-addons-for-elementor' ),
317	'animation' => __( 'Lottie Animation', 'premium-addons-for-elementor' ),
318	'svg' => __( 'SVG Code', 'premium-addons-for-elementor' ),
319	),
320	'default' => 'icon',
321	'condition' => array(
322	'icon_switcher' => 'yes',
323	),
324	)
325	);
326
327	$common_conditions = array(
328	'icon_switcher' => 'yes',
329	);
330
331	$this->add_control(
332	'premium_counter_icon_updated',
333	array(
334	'label' => __( 'Select an Icon', 'premium-addons-for-elementor' ),
335	'type' => Controls_Manager::ICONS,
336	'fa4compatibility' => 'premium_counter_icon',
337	'default' => array(
338	'value' => 'fas fa-clock',
339	'library' => 'fa-solid',
340	),
341	'condition' => array_merge(
342	$common_conditions,
343	array(
344	'premium_counter_icon_image' => 'icon',
345	)
346	),
347	)
348	);
349
350	$this->add_control(
351	'premium_counter_image_upload',
352	array(
353	'label' => __( 'Upload Image', 'premium-addons-for-elementor' ),
354	'type' => Controls_Manager::MEDIA,
355	'default' => array(
356	'url' => Utils::get_placeholder_image_src(),
357	),
358	'condition' => array(
359	'premium_counter_icon_image' => 'custom',
360	'icon_switcher' => 'yes',
361	),
362	)
363	);
364
365	$this->add_control(
366	'custom_svg',
367	array(
368	'label' => __( 'SVG Code', 'premium-addons-for-elementor' ),
369	'type' => Controls_Manager::TEXTAREA,
370	'description' => 'You can use these sites to create SVGs: <a href="https://danmarshall.github.io/google-font-to-svg-path/" target="_blank">Google Fonts</a> and <a href="https://boxy-svg.com/" target="_blank">Boxy SVG</a>',
371	'condition' => array_merge(
372	$common_conditions,
373	array(
374	'premium_counter_icon_image' => 'svg',
375	)
376	),
377	)
378	);
379
380	$this->add_control(
381	'lottie_url',
382	array(
383	'label' => __( 'Animation JSON URL', 'premium-addons-for-elementor' ),
384	'type' => Controls_Manager::TEXT,
385	'dynamic' => array( 'active' => true ),
386	'description' => 'Get JSON code URL from <a href="https://lottiefiles.com/" target="_blank">here</a>',
387	'label_block' => true,
388	'condition' => array(
389	'premium_counter_icon_image' => 'animation',
390	'icon_switcher' => 'yes',
391	),
392	)
393	);
394
395	$animation_conds = array(
396	'terms' => array(
397	array(
398	'name' => 'icon_switcher',
399	'value' => 'yes',
400	),
401	array(
402	'relation' => 'or',
403	'terms' => array(
404	array(
405	'name' => 'premium_counter_icon_image',
406	'value' => 'animation',
407	),
408	array(
409	'terms' => array(
410	array(
411	'relation' => 'or',
412	'terms' => array(
413	array(
414	'name' => 'premium_counter_icon_image',
415	'value' => 'icon',
416	),
417	array(
418	'name' => 'premium_counter_icon_image',
419	'value' => 'svg',
420	),
421	),
422	),
423	array(
424	'name' => 'draw_svg',
425	'value' => 'yes',
426	),
427	),
428	),
429	),
430	),
431	),
432	);
433
434	$this->add_control(
435	'draw_svg',
436	array(
437	'label' => __( 'Draw Icon', 'premium-addons-for-elementor' ),
438	'type' => Controls_Manager::SWITCHER,
439	'classes' => $draw_icon ? '' : 'editor-pa-control-disabled',
440	'condition' => array_merge(
441	$common_conditions,
442	array(
443	'premium_counter_icon_image' => array( 'icon', 'svg' ),
444	'premium_counter_icon_updated[library]!' => 'svg',
445	)
446	),
447	)
448	);
449
450	if ( $draw_icon ) {
451
452	$this->add_control(
453	'stroke_width',
454	array(
455	'label' => __( 'Path Thickness', 'premium-addons-for-elementor' ),
456	'type' => Controls_Manager::SLIDER,
457	'range' => array(
458	'px' => array(
459	'min' => 0,
460	'max' => 50,
461	'step' => 0.1,
462	),
463	),
464	'condition' => array_merge(
465	$common_conditions,
466	array(
467	'premium_counter_icon_image' => array( 'icon', 'svg' ),
468	)
469	),
470	'selectors' => array(
471	'{{WRAPPER}} .premium-counter-area .premium-counter-icon .icon svg *' => 'stroke-width: {{SIZE}}',
472	),
473	)
474	);
475
476	$this->add_control(
477	'svg_sync',
478	array(
479	'label' => __( 'Draw All Paths Together', 'premium-addons-for-elementor' ),
480	'type' => Controls_Manager::SWITCHER,
481	'condition' => array_merge(
482	$common_conditions,
483	array(
484	'premium_counter_icon_image' => array( 'icon', 'svg' ),
485	'draw_svg' => 'yes',
486	)
487	),
488	)
489	);
490
491	$this->add_control(
492	'frames',
493	array(
494	'label' => __( 'Speed', 'premium-addons-for-elementor' ),
495	'type' => Controls_Manager::NUMBER,
496	'description' => __( 'Larger value means longer animation duration.', 'premium-addons-for-elementor' ),
497	'default' => 5,
498	'min' => 1,
499	'max' => 100,
500	'condition' => array_merge(
501	$common_conditions,
502	array(
503	'premium_counter_icon_image' => array( 'icon', 'svg' ),
504	'draw_svg' => 'yes',
505	)
506	),
507	)
508	);
509
510	} else {
511
512	Helper_Functions::get_draw_svg_notice(
513	$this,
514	'counter',
515	array_merge(
516	$common_conditions,
517	array(
518	'premium_counter_icon_image' => array( 'icon', 'svg' ),
519	'premium_counter_icon_updated[library]!' => 'svg',
520	)
521	)
522	);
523
524	}
525
526	$this->add_control(
527	'lottie_loop',
528	array(
529	'label' => __( 'Loop', 'premium-addons-for-elementor' ),
530	'type' => Controls_Manager::SWITCHER,
531	'return_value' => 'true',
532	'default' => 'true',
533	'conditions' => $animation_conds,
534	)
535	);
536
537	$this->add_control(
538	'lottie_reverse',
539	array(
540	'label' => __( 'Reverse', 'premium-addons-for-elementor' ),
541	'type' => Controls_Manager::SWITCHER,
542	'return_value' => 'true',
543	'conditions' => $animation_conds,
544	)
545	);
546
547	if ( $draw_icon ) {
548
549	$this->add_control(
550	'start_point',
551	array(
552	'label' => __( 'Start Point (%)', 'premium-addons-for-elementor' ),
553	'type' => Controls_Manager::SLIDER,
554	'description' => __( 'Set the point that the SVG should start from.', 'premium-addons-for-elementor' ),
555	'default' => array(
556	'unit' => '%',
557	'size' => 0,
558	),
559	'condition' => array_merge(
560	$common_conditions,
561	array(
562	'premium_counter_icon_image' => array( 'icon', 'svg' ),
563	'draw_svg' => 'yes',
564	'lottie_reverse!' => 'true',
565	)
566	),
567	)
568	);
569
570	$this->add_control(
571	'end_point',
572	array(
573	'label' => __( 'End Point (%)', 'premium-addons-for-elementor' ),
574	'type' => Controls_Manager::SLIDER,
575	'description' => __( 'Set the point that the SVG should end at.', 'premium-addons-for-elementor' ),
576	'default' => array(
577	'unit' => '%',
578	'size' => 0,
579	),
580	'condition' => array_merge(
581	$common_conditions,
582	array(
583	'premium_counter_icon_image' => array( 'icon', 'svg' ),
584	'draw_svg' => 'yes',
585	'lottie_reverse' => 'true',
586	)
587	),
588
589	)
590	);
591
592	$this->add_control(
593	'svg_hover',
594	array(
595	'label' => __( 'Only Play on Hover', 'premium-addons-for-elementor' ),
596	'type' => Controls_Manager::SWITCHER,
597	'return_value' => 'true',
598	'condition' => array_merge(
599	$common_conditions,
600	array(
601	'premium_counter_icon_image' => array( 'icon', 'svg' ),
602	'draw_svg' => 'yes',
603	)
604	),
605	)
606	);
607
608	$this->add_control(
609	'svg_yoyo',
610	array(
611	'label' => __( 'Yoyo Effect', 'premium-addons-for-elementor' ),
612	'type' => Controls_Manager::SWITCHER,
613	'condition' => array_merge(
614	$common_conditions,
615	array(
616	'premium_counter_icon_image' => array( 'icon', 'svg' ),
617	'draw_svg' => 'yes',
618	'lottie_loop' => 'true',
619	)
620	),
621	)
622	);
623
624	}
625
626	$this->add_control(
627	'premium_counter_icon_position',
628	array(
629	'label' => __( 'Icon Position', 'premium-addons-for-elementor' ),
630	'type' => Controls_Manager::SELECT,
631	'description' => __( 'Choose a position for your icon', 'premium-addons-for-elementor' ),
632	'options' => array(
633	'top' => __( 'Top', 'premium-addons-for-elementor' ),
634	'right' => __( 'Right', 'premium-addons-for-elementor' ),
635	'left' => __( 'Left', 'premium-addons-for-elementor' ),
636	),
637	'default' => 'top',
638	'separator' => 'after',
639	'condition' => array(
640	'icon_switcher' => 'yes',
641	),
642	)
643	);
644
645	$this->add_control(
646	'premium_counter_icon_animation',
647	array(
648	'label' => __( 'Animations', 'premium-addons-for-elementor' ),
649	'type' => Controls_Manager::ANIMATION,
650	'render_type' => 'template',
651	)
652	);
653
654	$this->add_responsive_control(
655	'title_display',
656	array(
657	'label' => __( 'Title Display', 'premium-addons-for-elementor' ),
658	'type' => Controls_Manager::SELECT,
659	'options' => array(
660	'row' => __( 'Row', 'premium-addons-for-elementor' ),
661	'column' => __( 'Column', 'premium-addons-for-elementor' ),
662	),
663	'default' => 'column',
664	'toggle' => false,
665	'selectors' => array(
666	'{{WRAPPER}} .premium-init-wrapper' => 'flex-direction: {{VALUE}}',
667	),
668	)
669	);
670
671	$start = is_rtl() ? 'flex-end' : 'flex-start';
672	$end = is_rtl() ? 'flex-start' : 'flex-end';
673
674	$this->add_responsive_control(
675	'value_align',
676	array(
677	'label' => __( 'Value Alignment', 'premium-addons-for-elementor' ),
678	'type' => Controls_Manager::CHOOSE,
679	'options' => array(
680	$start => array(
681	'title' => __( 'Left', 'premium-addons-for-elementor' ),
682	'icon' => 'eicon-text-align-left',
683	),
684	'center' => array(
685	'title' => __( 'Center', 'premium-addons-for-elementor' ),
686	'icon' => 'eicon-text-align-center',
687	),
688	$end => array(
689	'title' => __( 'Right', 'premium-addons-for-elementor' ),
690	'icon' => 'eicon-text-align-right',
691	),
692	),
693	'default' => 'center',
694	'toggle' => false,
695	'selectors' => array(
696	'{{WRAPPER}} .premium-counter-value-wrap' => 'align-self: {{VALUE}}',
697	),
698	'condition' => array(
699	'title_display' => 'column',
700	),
701	)
702	);
703
704	$this->add_responsive_control(
705	'title_align',
706	array(
707	'label' => __( 'Title Alignment', 'premium-addons-for-elementor' ),
708	'type' => Controls_Manager::CHOOSE,
709	'options' => array(
710	'left' => array(
711	'title' => __( 'Left', 'premium-addons-for-elementor' ),
712	'icon' => 'eicon-text-align-left',
713	),
714	'center' => array(
715	'title' => __( 'Center', 'premium-addons-for-elementor' ),
716	'icon' => 'eicon-text-align-center',
717	),
718	'right' => array(
719	'title' => __( 'Right', 'premium-addons-for-elementor' ),
720	'icon' => 'eicon-text-align-right',
721	),
722	),
723	'default' => 'center',
724	'toggle' => false,
725	'selectors' => array(
726	'{{WRAPPER}} .premium-counter-title' => 'text-align: {{VALUE}};',
727	),
728	'condition' => array(
729	'premium_counter_title!' => '',
730	),
731	)
732	);
733
734	$this->end_controls_section();
735
736	$this->start_controls_section(
737	'section_pa_docs',
738	array(
739	'label' => __( 'Helpful Documentations', 'premium-addons-for-elementor' ),
740	)
741	);
742
743	$doc1_url = Helper_Functions::get_campaign_link( 'https://premiumaddons.com/docs/counter-widget-tutorial/', 'editor-page', 'wp-editor', 'get-support' );
744
745	$this->add_control(
746	'doc_1',
747	array(
748	'type' => Controls_Manager::RAW_HTML,
749	'raw' => sprintf( '<a href="%s" target="_blank">%s</a>', $doc1_url, __( 'Gettings started »', 'premium-addons-for-elementor' ) ),
750	'content_classes' => 'editor-pa-doc',
751	)
752	);
753
754	$this->end_controls_section();
755
756	$this->start_controls_section(
757	'premium_counter_icon_style_tab',
758	array(
759	'label' => __( 'Icon', 'premium-addons-for-elementor' ),
760	'tab' => Controls_Manager::TAB_STYLE,
761	'condition' => array(
762	'icon_switcher' => 'yes',
763	),
764	)
765	);
766
767	$this->add_control(
768	'premium_counter_icon_color',
769	array(
770	'label' => __( 'Color', 'premium-addons-for-elementor' ),
771	'type' => Controls_Manager::COLOR,
772	'global' => array(
773	'default' => Global_Colors::COLOR_PRIMARY,
774	),
775	'selectors' => array(
776	'{{WRAPPER}} .premium-counter-area .premium-counter-icon .icon i' => 'color: {{VALUE}}',
777	'{{WRAPPER}} .premium-drawable-icon , {{WRAPPER}} .premium-counter-icon svg:not([class="premium-"])' => 'fill: {{VALUE}};',
778	),
779	'condition' => array(
780	'premium_counter_icon_image' => array( 'icon', 'svg' ),
781	),
782	)
783	);
784
785	if ( $draw_icon ) {
786	$this->add_control(
787	'stroke_color',
788	array(
789	'label' => __( 'Stroke Color', 'premium-addons-for-elementor' ),
790	'type' => Controls_Manager::COLOR,
791	'global' => array(
792	'default' => Global_Colors::COLOR_ACCENT,
793	),
794	'condition' => array(
795	'icon_switcher' => 'yes',
796	'premium_counter_icon_image' => array( 'icon', 'svg' ),
797	),
798	'selectors' => array(
799	'{{WRAPPER}} .premium-drawable-icon , {{WRAPPER}} svg:not([class="premium-"])' => 'stroke: {{VALUE}};',
800	),
801	)
802	);
803
804	$this->add_control(
805	'svg_color',
806	array(
807	'label' => __( 'After Draw Fill Color', 'premium-addons-for-elementor' ),
808	'type' => Controls_Manager::COLOR,
809	'global' => false,
810	'separator' => 'after',
811	'condition' => array(
812	'icon_switcher' => 'yes',
813	'premium_counter_icon_image' => array( 'icon', 'svg' ),
814	'draw_svg' => 'yes',
815	),
816	)
817	);
818	}
819
820	$this->add_responsive_control(
821	'premium_counter_icon_size',
822	array(
823	'label' => __( 'Size', 'premium-addons-for-elementor' ),
824	'type' => Controls_Manager::SLIDER,
825	'size_units' => array( 'px', 'em', '%' ),
826	'default' => array(
827	'size' => 70,
828	),
829	'range' => array(
830	'px' => array(
831	'min' => 10,
832	'max' => 200,
833	),
834	'em' => array(
835	'min' => 1,
836	'max' => 20,
837	),
838	),
839	'selectors' => array(
840	'{{WRAPPER}} .premium-counter-area .premium-counter-icon .icon' => 'font-size: {{SIZE}}{{UNIT}};',
841	'{{WRAPPER}} .premium-counter-area .premium-counter-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}',
842	),
843	'condition' => array(
844	'premium_counter_icon_image' => 'icon',
845	),
846	)
847	);
848
849	$this->add_responsive_control(
850	'svg_icon_width',
851	array(
852	'label' => __( 'Width', 'premium-addons-for-elementor' ),
853	'type' => Controls_Manager::SLIDER,
854	'size_units' => array( 'px', 'em', '%' ),
855	'range' => array(
856	'px' => array(
857	'min' => 1,
858	'max' => 600,
859	),
860	'em' => array(
861	'min' => 1,
862	'max' => 30,
863	),
864	),
865	'default' => array(
866	'size' => 100,
867	'unit' => 'px',
868	),
869	'condition' => array(
870	'premium_counter_icon_image' => 'svg',
871	),
872	'selectors' => array(
873	'{{WRAPPER}} .premium-counter-area .premium-counter-icon svg' => 'width: {{SIZE}}{{UNIT}};',
874	),
875	)
876	);
877
878	$this->add_responsive_control(
879	'svg_icon_height',
880	array(
881	'label' => __( 'Height', 'premium-addons-for-elementor' ),
882	'type' => Controls_Manager::SLIDER,
883	'size_units' => array( 'px', 'em' ),
884	'range' => array(
885	'px' => array(
886	'min' => 1,
887	'max' => 300,
888	),
889	'em' => array(
890	'min' => 1,
891	'max' => 30,
892	),
893	),
894	'condition' => array(
895	'premium_counter_icon_image' => 'svg',
896	),
897	'selectors' => array(
898	'{{WRAPPER}} .premium-counter-area .premium-counter-icon svg' => 'height: {{SIZE}}{{UNIT}}',
899	),
900	)
901	);
902
903	$this->add_responsive_control(
904	'premium_counter_image_size',
905	array(
906	'label' => __( 'Size', 'premium-addons-for-elementor' ),
907	'type' => Controls_Manager::SLIDER,
908	'size_units' => array( 'px', 'em', '%' ),
909	'range' => array(
910	'px' => array(
911	'min' => 1,
912	'max' => 300,
913	),
914	'em' => array(
915	'min' => 1,
916	'max' => 30,
917	),
918	),
919	'selectors' => array(
920	'{{WRAPPER}} .premium-counter-area .premium-counter-icon img.custom-image' => 'width: {{SIZE}}{{UNIT}}',
921	'{{WRAPPER}} .premium-counter-area .premium-counter-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}',
922	),
923	'condition' => array(
924	'premium_counter_icon_image!' => array( 'icon', 'svg' ),
925	),
926	)
927	);
928
929	$this->add_control(
930	'premium_counter_icon_style',
931	array(
932	'label' => __( 'Style', 'premium-addons-for-elementor' ),
933	'type' => Controls_Manager::SELECT,
934	'description' => __( 'We are giving you three quick preset if you are in a hurry. Otherwise, create your own with various options', 'premium-addons-for-elementor' ),
935	'options' => array(
936	'simple' => __( 'Simple', 'premium-addons-for-elementor' ),
937	'circle' => __( 'Circle Background', 'premium-addons-for-elementor' ),
938	'square' => __( 'Square Background', 'premium-addons-for-elementor' ),
939	'design' => __( 'Custom', 'premium-addons-for-elementor' ),
940	),
941	'default' => 'simple',
942	)
943	);
944
945	$this->add_control(
946	'premium_counter_icon_bg',
947	array(
948	'label' => __( 'Background Color', 'premium-addons-for-elementor' ),
949	'type' => Controls_Manager::COLOR,
950	'global' => array(
951	'default' => Global_Colors::COLOR_SECONDARY,
952	),
953	'condition' => array(
954	'premium_counter_icon_style!' => 'simple',
955	),
956	'selectors' => array(
957	'{{WRAPPER}} .premium-counter-area .premium-counter-icon .icon-bg' => 'background: {{VALUE}};',
958	),
959	)
960	);
961
962	$this->add_responsive_control(
963	'premium_counter_icon_bg_size',
964	array(
965	'label' => __( 'Background size', 'premium-addons-for-elementor' ),
966	'type' => Controls_Manager::SLIDER,
967	'default' => array(
968	'size' => 150,
969	),
970	'range' => array(
971	'px' => array(
972	'min' => 1,
973	'max' => 600,
974	),
975	),
976	'condition' => array(
977	'premium_counter_icon_style!' => 'simple',
978	),
979	'selectors' => array(
980	'{{WRAPPER}} .premium-counter-area .premium-counter-icon span.icon' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
981	),
982	)
983	);
984
985	$this->add_responsive_control(
986	'premium_counter_icon_v_align',
987	array(
988	'label' => __( 'Vertical Alignment', 'premium-addons-for-elementor' ),
989	'type' => Controls_Manager::SLIDER,
990	'default' => array(
991	'size' => 150,
992	),
993	'range' => array(
994	'px' => array(
995	'min' => 1,
996	'max' => 600,
997	),
998	),
999	'condition' => array(
1000	'premium_counter_icon_style!' => 'simple',
1001	),
1002	'selectors' => array(
1003	'{{WRAPPER}} .premium-counter-area .premium-counter-icon span.icon' => 'line-height: {{SIZE}}{{UNIT}};',
1004	),
1005	)
1006	);
1007
1008	$this->add_group_control(
1009	Group_Control_Border::get_type(),
1010	array(
1011	'name' => 'premium_icon_border',
1012	'selector' => '{{WRAPPER}} .premium-counter-area .premium-counter-icon .design',
1013	'condition' => array(
1014	'premium_counter_icon_style' => 'design',
1015	),
1016	)
1017	);
1018
1019	$this->add_control(
1020	'premium_icon_border_radius',
1021	array(
1022	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
1023	'type' => Controls_Manager::SLIDER,
1024	'size_units' => array( 'px', '%', 'em' ),
1025	'default' => array(
1026	'unit' => 'px',
1027	'size' => 0,
1028	),
1029	'selectors' => array(
1030	'{{WRAPPER}} .premium-counter-area .premium-counter-icon .design' => 'border-radius: {{SIZE}}{{UNIT}};',
1031	),
1032	'condition' => array(
1033	'premium_counter_icon_style' => 'design',
1034	'icon_adv_radius!' => 'yes',
1035	),
1036	)
1037	);
1038
1039	$this->add_control(
1040	'icon_adv_radius',
1041	array(
1042	'label' => __( 'Advanced Border Radius', 'premium-addons-for-elementor' ),
1043	'type' => Controls_Manager::SWITCHER,
1044	'description' => __( 'Apply custom radius values. Get the radius value from ', 'premium-addons-for-elementor' ) . '<a href="https://9elements.github.io/fancy-border-radius/" target="_blank">here</a>',
1045	'condition' => array(
1046	'premium_counter_icon_style' => 'design',
1047	),
1048	)
1049	);
1050
1051	$this->add_control(
1052	'icon_adv_radius_value',
1053	array(
1054	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
1055	'type' => Controls_Manager::TEXT,
1056	'dynamic' => array( 'active' => true ),
1057	'selectors' => array(
1058	'{{WRAPPER}} .premium-counter-area .premium-counter-icon .design' => 'border-radius: {{VALUE}};',
1059	),
1060	'condition' => array(
1061	'premium_counter_icon_style' => 'design',
1062	'icon_adv_radius' => 'yes',
1063	),
1064	)
1065	);
1066
1067	$this->add_responsive_control(
1068	'icon_margin',
1069	array(
1070	'label' => __( 'Margin', 'premium-addons-for-elementor' ),
1071	'type' => Controls_Manager::DIMENSIONS,
1072	'size_units' => array( 'px', 'em', '%' ),
1073	'selectors' => array(
1074	'{{WRAPPER}} .premium-counter-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1075	),
1076	)
1077	);
1078
1079	$this->end_controls_section();
1080
1081	$this->start_controls_section(
1082	'premium_counter_title_style',
1083	array(
1084	'label' => __( 'Title & Description', 'premium-addons-for-elementor' ),
1085	'tab' => Controls_Manager::TAB_STYLE,
1086	)
1087	);
1088
1089	$this->add_control(
1090	'premium_counter_title_color',
1091	array(
1092	'label' => __( 'Title Color', 'premium-addons-for-elementor' ),
1093	'type' => Controls_Manager::COLOR,
1094	'global' => array(
1095	'default' => Global_Colors::COLOR_PRIMARY,
1096	),
1097	'selectors' => array(
1098	'{{WRAPPER}} .premium-counter-title .premium-counter-title-val' => 'color: {{VALUE}};',
1099	),
1100	)
1101	);
1102
1103	$this->add_group_control(
1104	Group_Control_Typography::get_type(),
1105	array(
1106	'name' => 'premium_counter_title_typho',
1107	'label' => __( 'Title Typography', 'premium-addons-for-elementor' ),
1108	'global' => array(
1109	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
1110	),
1111	'selector' => '{{WRAPPER}} .premium-counter-title .premium-counter-title-val',
1112	)
1113	);
1114
1115	$this->add_control(
1116	'counter_desc_color',
1117	array(
1118	'label' => __( 'Description Color', 'premium-addons-for-elementor' ),
1119	'type' => Controls_Manager::COLOR,
1120	'separator' => 'before',
1121	'global' => array(
1122	'default' => Global_Colors::COLOR_SECONDARY,
1123	),
1124	'selectors' => array(
1125	'{{WRAPPER}} .premium-counter-desc' => 'color: {{VALUE}};',
1126	),
1127	)
1128	);
1129
1130	$this->add_group_control(
1131	Group_Control_Typography::get_type(),
1132	array(
1133	'name' => 'counter_desc_typo',
1134	'label' => __( 'Description Typography', 'premium-addons-for-elementor' ),
1135	'global' => array(
1136	'default' => Global_Typography::TYPOGRAPHY_SECONDARY,
1137	),
1138	'selector' => '{{WRAPPER}} .premium-counter-desc',
1139	)
1140	);
1141
1142	$this->add_control(
1143	'title_background',
1144	array(
1145	'label' => __( 'Background Color', 'premium-addons-for-elementor' ),
1146	'type' => Controls_Manager::COLOR,
1147	'separator' => 'before',
1148	'selectors' => array(
1149	'{{WRAPPER}} .premium-counter-title' => 'background-color: {{VALUE}};',
1150	),
1151	)
1152	);
1153
1154	$this->add_group_control(
1155	Group_Control_Border::get_type(),
1156	array(
1157	'name' => 'title_border',
1158	'selector' => '{{WRAPPER}} .premium-counter-title',
1159	)
1160	);
1161
1162	$this->add_control(
1163	'title_border_radius',
1164	array(
1165	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
1166	'type' => Controls_Manager::SLIDER,
1167	'size_units' => array( 'px', '%', 'em' ),
1168	'selectors' => array(
1169	'{{WRAPPER}} .premium-counter-title' => 'border-radius: {{SIZE}}{{UNIT}};',
1170	),
1171	)
1172	);
1173
1174	$this->add_group_control(
1175	Group_Control_Text_Shadow::get_type(),
1176	array(
1177	'name' => 'premium_counter_title_shadow',
1178	'selector' => '{{WRAPPER}} .premium-counter-area .premium-counter-title',
1179	)
1180	);
1181
1182	$this->add_responsive_control(
1183	'title_margin',
1184	array(
1185	'label' => __( 'Margin', 'premium-addons-for-elementor' ),
1186	'type' => Controls_Manager::DIMENSIONS,
1187	'size_units' => array( 'px', 'em', '%' ),
1188	'selectors' => array(
1189	'{{WRAPPER}} .premium-counter-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1190	),
1191	)
1192	);
1193
1194	$this->add_responsive_control(
1195	'title_padding',
1196	array(
1197	'label' => __( 'Padding', 'premium-addons-for-elementor' ),
1198	'type' => Controls_Manager::DIMENSIONS,
1199	'size_units' => array( 'px', 'em', '%' ),
1200	'selectors' => array(
1201	'{{WRAPPER}} .premium-counter-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1202	),
1203	)
1204	);
1205
1206	$this->end_controls_section();
1207
1208	$this->start_controls_section(
1209	'premium_counter_value_style',
1210	array(
1211	'label' => __( 'Value', 'premium-addons-for-elementor' ),
1212	'tab' => Controls_Manager::TAB_STYLE,
1213	)
1214	);
1215
1216	$this->add_control(
1217	'premium_counter_value_color',
1218	array(
1219	'label' => __( 'Color', 'premium-addons-for-elementor' ),
1220	'type' => Controls_Manager::COLOR,
1221	'global' => array(
1222	'default' => Global_Colors::COLOR_PRIMARY,
1223	),
1224	'selectors' => array(
1225	'{{WRAPPER}} .premium-counter-area .premium-counter-init' => 'color: {{VALUE}};',
1226	),
1227	)
1228	);
1229
1230	$this->add_group_control(
1231	Group_Control_Typography::get_type(),
1232	array(
1233	'name' => 'premium_counter_value_typho',
1234	'global' => array(
1235	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
1236	),
1237	'selector' => '{{WRAPPER}} .premium-counter-area .premium-counter-init',
1238	'separator' => 'after',
1239	)
1240	);
1241
1242	$this->add_control(
1243	'value_background',
1244	array(
1245	'label' => __( 'Background Color', 'premium-addons-for-elementor' ),
1246	'type' => Controls_Manager::COLOR,
1247	'selectors' => array(
1248	'{{WRAPPER}} .premium-counter-init' => 'background-color: {{VALUE}};',
1249	),
1250	)
1251	);
1252
1253	$this->add_group_control(
1254	Group_Control_Border::get_type(),
1255	array(
1256	'name' => 'value_border',
1257	'selector' => '{{WRAPPER}} .premium-counter-init',
1258	)
1259	);
1260
1261	$this->add_control(
1262	'value_border_radius',
1263	array(
1264	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
1265	'type' => Controls_Manager::SLIDER,
1266	'size_units' => array( 'px', '%', 'em' ),
1267	'selectors' => array(
1268	'{{WRAPPER}} .premium-counter-init' => 'border-radius: {{SIZE}}{{UNIT}};',
1269	),
1270	)
1271	);
1272
1273	$this->add_responsive_control(
1274	'value_margin',
1275	array(
1276	'label' => __( 'Margin', 'premium-addons-for-elementor' ),
1277	'type' => Controls_Manager::DIMENSIONS,
1278	'size_units' => array( 'px', 'em', '%' ),
1279	'selectors' => array(
1280	'{{WRAPPER}} .premium-counter-init' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1281	),
1282	)
1283	);
1284
1285	$this->add_responsive_control(
1286	'value_padding',
1287	array(
1288	'label' => __( 'Padding', 'premium-addons-for-elementor' ),
1289	'type' => Controls_Manager::DIMENSIONS,
1290	'size_units' => array( 'px', 'em', '%' ),
1291	'selectors' => array(
1292	'{{WRAPPER}} .premium-counter-init' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1293	),
1294	)
1295	);
1296
1297	$this->end_controls_section();
1298
1299	$this->start_controls_section(
1300	'premium_counter_suffix_prefix_style',
1301	array(
1302	'label' => __( 'Prefix & Suffix', 'premium-addons-for-elementor' ),
1303	'tab' => Controls_Manager::TAB_STYLE,
1304	)
1305	);
1306
1307	$this->add_control(
1308	'premium_counter_prefix_color',
1309	array(
1310	'label' => __( 'Prefix Color', 'premium-addons-for-elementor' ),
1311	'type' => Controls_Manager::COLOR,
1312	'global' => array(
1313	'default' => Global_Colors::COLOR_PRIMARY,
1314	),
1315	'selectors' => array(
1316	'{{WRAPPER}} .premium-counter-area span#prefix' => 'color: {{VALUE}}',
1317	),
1318	)
1319	);
1320
1321	$this->add_group_control(
1322	Group_Control_Typography::get_type(),
1323	array(
1324	'name' => 'premium_counter_prefix_typo',
1325	'global' => array(
1326	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
1327	),
1328	'selector' => '{{WRAPPER}} .premium-counter-area span#prefix',
1329	'separator' => 'after',
1330	)
1331	);
1332
1333	$this->add_control(
1334	'premium_counter_suffix_color',
1335	array(
1336	'label' => __( 'Suffix Color', 'premium-addons-for-elementor' ),
1337	'type' => Controls_Manager::COLOR,
1338	'global' => array(
1339	'default' => Global_Colors::COLOR_PRIMARY,
1340	),
1341	'selectors' => array(
1342	'{{WRAPPER}} .premium-counter-area span#suffix' => 'color: {{VALUE}}',
1343	),
1344	)
1345	);
1346
1347	$this->add_group_control(
1348	Group_Control_Typography::get_type(),
1349	array(
1350	'name' => 'premium_counter_suffix_typo',
1351	'global' => array(
1352	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
1353	),
1354	'selector' => '{{WRAPPER}} .premium-counter-area span#suffix',
1355	'separator' => 'after',
1356	)
1357	);
1358
1359	$this->end_controls_section();
1360	}
1361
1362	/**
1363	* Render Counter Content
1364	*
1365	* Used to render the HTML markup for counter strings
1366	*
1367	* @since 0.0.1
1368	* @access public
1369	*/
1370	public function render_counter_content() {
1371
1372	$settings = $this->get_settings_for_display();
1373
1374	$start_value = $settings['premium_counter_start_value'];
1375
1376	$this->add_render_attribute( 'content_wrapper', 'class', array( 'premium-init-wrapper', $settings['title_display'] ) );
1377
1378	?>
1379
1380	<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'content_wrapper' ) ); ?>>
1381
1382	<div class="premium-counter-value-wrap">
1383	<?php if ( ! empty( $settings['premium_counter_preffix'] ) ) : ?>
1384	<span id="prefix" class="counter-su-pre"><?php echo wp_kses_post( $settings['premium_counter_preffix'] ); ?></span>
1385	<?php endif; ?>
1386
1387	<span class="premium-counter-init" id="counter-<?php echo esc_attr( $this->get_id() ); ?>"><?php echo wp_kses_post( $start_value ); ?></span>
1388
1389	<?php if ( ! empty( $settings['premium_counter_suffix'] ) ) : ?>
1390	<span id="suffix" class="counter-su-pre"><?php echo wp_kses_post( $settings['premium_counter_suffix'] ); ?></span>
1391	<?php endif; ?>
1392	</div>
1393
1394	<?php if ( ! empty( $settings['premium_counter_title'] ) ) : ?>
1395	<div class="premium-counter-title">
1396	<p <?php echo wp_kses_post( $this->get_render_attribute_string( 'premium_counter_title' ) ); ?>>
1397	<?php echo wp_kses_post( $settings['premium_counter_title'] ); ?>
1398	</p>
1399	<?php if ( ! empty( $settings['premium_counter_desc'] ) ) : ?>
1400	<p class="premium-counter-desc"> <?php echo wp_kses_post( $settings['premium_counter_desc'] ); ?></p>
1401	<?php endif; ?>
1402	</div>
1403	<?php endif; ?>
1404	</div>
1405
1406	<?php
1407	}
1408
1409	/**
1410	* Render Counter Icon
1411	*
1412	* Used to render the HTML markup for the counter icon
1413	*
1414	* @since 0.0.1
1415	* @access public
1416	*/
1417	public function render_counter_icon() {
1418
1419	$settings = $this->get_settings_for_display();
1420
1421	$icon_style = 'simple' !== $settings['premium_counter_icon_style'] ? ' icon-bg ' . $settings['premium_counter_icon_style'] : '';
1422
1423	$animation = $settings['premium_counter_icon_animation'];
1424
1425	$icon_type = $settings['premium_counter_icon_image'];
1426
1427	$flex_width = '';
1428
1429	if ( 'icon' === $icon_type \|\| 'svg' === $icon_type ) {
1430
1431	$this->add_render_attribute( 'icon', 'class', 'premium-drawable-icon' );
1432
1433	if ( 'icon' === $icon_type ) {
1434
1435	if ( ! empty( $settings['premium_counter_icon'] ) ) {
1436	$this->add_render_attribute(
1437	'icon',
1438	array(
1439	'class' => $settings['premium_counter_icon'],
1440	'aria-hidden' => 'true',
1441	)
1442	);
1443
1444	}
1445
1446	$migrated = isset( $settings['__fa4_migrated']['premium_counter_icon_updated'] );
1447	$is_new = empty( $settings['premium_counter_icon'] ) && Icons_Manager::is_migration_allowed();
1448
1449	}
1450
1451	if ( 'yes' === $settings['draw_svg'] ) {
1452
1453	if ( 'icon' === $icon_type ) {
1454
1455	$this->add_render_attribute( 'icon', 'class', $settings['premium_counter_icon_updated']['value'] );
1456
1457	}
1458
1459	$this->add_render_attribute(
1460	'icon',
1461	array(
1462	'class' => 'premium-svg-drawer',
1463	'data-svg-reverse' => $settings['lottie_reverse'],
1464	'data-svg-loop' => $settings['lottie_loop'],
1465	'data-svg-sync' => $settings['svg_sync'],
1466	'data-svg-hover' => $settings['svg_hover'],
1467	'data-svg-fill' => $settings['svg_color'],
1468	'data-svg-frames' => $settings['frames'],
1469	'data-svg-yoyo' => $settings['svg_yoyo'],
1470	'data-svg-point' => $settings['lottie_reverse'] ? $settings['end_point']['size'] : $settings['start_point']['size'],
1471	)
1472	);
1473
1474	} else {
1475	$this->add_render_attribute( 'icon', 'class', 'premium-svg-nodraw' );
1476	}
1477	} elseif ( 'custom' === $icon_type ) {
1478	$alt = esc_attr( Control_Media::get_image_alt( $settings['premium_counter_image_upload'] ) );
1479
1480	$this->add_render_attribute(
1481	'image',
1482	array(
1483	'class' => 'custom-image',
1484	'src' => $settings['premium_counter_image_upload']['url'],
1485	'alt' => $alt,
1486	)
1487	);
1488
1489	if ( 'simple' === $settings['premium_counter_icon_style'] ) {
1490	$flex_width = ' flex-width ';
1491	}
1492	} else {
1493
1494	$this->add_render_attribute(
1495	'counter_lottie',
1496	array(
1497	'class' => array(
1498	'premium-counter-animation',
1499	'premium-lottie-animation',
1500	),
1501	'data-lottie-url' => $settings['lottie_url'],
1502	'data-lottie-loop' => $settings['lottie_loop'],
1503	'data-lottie-reverse' => $settings['lottie_reverse'],
1504	)
1505	);
1506
1507	}
1508
1509	?>
1510
1511	<div class="premium-counter-icon">
1512
1513	<span class="icon<?php echo esc_attr( $flex_width ); ?><?php echo esc_attr( $icon_style ); ?>" data-animation="<?php echo esc_attr( $animation ); ?>">
1514
1515	<?php if ( 'icon' === $icon_type && ( ! empty( $settings['premium_counter_icon_updated']['value'] ) \|\| ! empty( $settings['premium_counter_icon'] ) ) ) : ?>
1516	<?php
1517	if ( ( $is_new \|\| $migrated ) && 'yes' !== $settings['draw_svg'] ) :
1518	Icons_Manager::render_icon(
1519	$settings['premium_counter_icon_updated'],
1520	array(
1521	'class' => array( 'premium-svg-nodraw', 'premium-drawable-icon' ),
1522	'aria-hidden' => 'true',
1523	)
1524	);
1525	else :
1526	?>
1527	<i <?php echo wp_kses_post( $this->get_render_attribute_string( 'icon' ) ); ?>></i>
1528	<?php endif; ?>
1529
1530	<?php elseif ( 'svg' === $icon_type ) : ?>
1531	<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'icon' ) ); ?>>
1532	<?php $this->print_unescaped_setting( 'custom_svg' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
1533	</div>
1534	<?php elseif ( 'custom' === $icon_type && ! empty( $settings['premium_counter_image_upload']['url'] ) ) : ?>
1535	<img <?php echo wp_kses_post( $this->get_render_attribute_string( 'image' ) ); ?>>
1536	<?php else : ?>
1537	<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'counter_lottie' ) ); ?>></div>
1538	<?php endif; ?>
1539
1540	</span>
1541	</div>
1542
1543	<?php
1544	}
1545
1546	/**
1547	* Render Counter widget output on the frontend.
1548	*
1549	* Written in PHP and used to generate the final HTML.
1550	*
1551	* @since 1.0.0
1552	* @access protected
1553	*/
1554	protected function render() {
1555
1556	$settings = $this->get_settings_for_display();
1557
1558	$this->add_inline_editing_attributes( 'premium_counter_title' );
1559	$this->add_render_attribute( 'premium_counter_title', 'class', 'premium-counter-title-val' );
1560
1561	$position = $settings['premium_counter_icon_position'];
1562
1563	$this->add_render_attribute(
1564	'counter',
1565	array(
1566	'class' => array( 'premium-counter', 'premium-counter-area', $position ),
1567	'data-duration' => $settings['premium_counter_speed'] * 1000,
1568	'data-from-value' => $settings['premium_counter_start_value'],
1569	'data-to-value' => $settings['premium_counter_end_value'],
1570	'data-delimiter' => $settings['premium_counter_t_separator'],
1571	'data-rounding' => empty( $settings['premium_counter_d_after'] ) ? 0 : $settings['premium_counter_d_after'],
1572	)
1573	);
1574
1575	if ( 'yes' === $settings['draw_svg'] ) {
1576
1577	$this->add_render_attribute(
1578	'counter',
1579	'class',
1580	array(
1581	'elementor-invisible',
1582	'premium-drawer-hover',
1583	)
1584	);
1585
1586	}
1587
1588	?>
1589
1590	<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'counter' ) ); ?>>
1591	<?php
1592	if ( 'yes' === $settings['icon_switcher'] ) {
1593	$this->render_counter_icon();
1594	}
1595	$this->render_counter_content();
1596	?>
1597	</div>
1598
1599	<?php
1600	}
1601
1602	/**
1603	* Render Counter widget output in the editor.
1604	*
1605	* Written as a Backbone JavaScript template and used to generate the live preview.
1606	*
1607	* @since 1.0.0
1608	* @access protected
1609	*/
1610	protected function content_template() {
1611	?>
1612	<#
1613
1614	var iconImage,
1615	position;
1616
1617	view.addInlineEditingAttributes('title');
1618	view.addRenderAttribute('title', 'class', 'premium-counter-title-val');
1619
1620	position = settings.premium_counter_icon_position;
1621
1622	var delimiter = settings.premium_counter_t_separator,
1623	round = '' === settings.premium_counter_d_after ? 0 : settings.premium_counter_d_after;
1624
1625	view.addRenderAttribute( 'counter', {
1626	'class': [ 'premium-counter', 'premium-counter-area', position ],
1627	'data-duration': settings.premium_counter_speed * 1000,
1628	'data-from-value': settings.premium_counter_start_value,
1629	'data-to-value': settings.premium_counter_end_value,
1630	'data-delimiter': delimiter,
1631	'data-rounding': round
1632	});
1633
1634	if ( 'yes' === settings.draw_svg ) {
1635
1636	view.addRenderAttribute( 'counter', 'class', 'premium-drawer-hover' );
1637
1638	}
1639
1640	function getCounterContent() {
1641
1642	var startValue = settings.premium_counter_start_value;
1643
1644	view.addRenderAttribute( 'counter_wrap', 'class', ['premium-init-wrapper', settings.title_display ]);
1645
1646	view.addRenderAttribute( 'value', 'id', 'counter-' + view.getID() );
1647
1648	view.addRenderAttribute( 'value', 'class', 'premium-counter-init' );
1649
1650	#>
1651
1652	<div {{{ view.getRenderAttributeString('counter_wrap') }}}>
1653
1654	<div class="premium-counter-value-wrap">
1655	<# if ( '' !== settings.premium_counter_preffix ) { #>
1656	<span id="prefix" class="counter-su-pre">{{{ settings.premium_counter_preffix }}}</span>
1657	<# } #>
1658
1659	<span {{{ view.getRenderAttributeString('value') }}}>{{{ startValue }}}</span>
1660
1661	<# if ( '' !== settings.premium_counter_suffix ) { #>
1662	<span id="suffix" class="counter-su-pre">{{{ settings.premium_counter_suffix }}}</span>
1663	<# } #>
1664	</div>
1665
1666	<# if ( '' !== settings.premium_counter_title ) { #>
1667	<div class="premium-counter-title">
1668	<p {{{ view.getRenderAttributeString('title') }}}>
1669	{{{ settings.premium_counter_title }}}
1670	</p>
1671	<# if ( '' !== settings.premium_counter_desc ) { #>
1672	<p class="premium-counter-desc"> {{{ settings.premium_counter_desc }}}</p>
1673	<# } #>
1674	</div>
1675	<# } #>
1676	</div>
1677
1678	<#
1679	}
1680
1681	function renderCounterIcon() {
1682
1683	var iconStyle = 'simple' !== settings.premium_counter_icon_style ? ' icon-bg ' + settings.premium_counter_icon_style : '',
1684	animation = settings.premium_counter_icon_animation,
1685	flexWidth = '';
1686
1687	var iconType = settings.premium_counter_icon_image;
1688
1689	if( 'icon' === iconType \|\| 'svg' === iconType ) {
1690
1691	view.addRenderAttribute( 'icon', 'class', 'premium-drawable-icon' );
1692
1693	if( 'icon' === iconType ) {
1694
1695	var iconHTML = 'yes' !== settings.draw_svg ? elementor.helpers.renderIcon( view, settings.premium_counter_icon_updated, { 'class': ['premium-svg-nodraw', 'premium-drawable-icon'], 'aria-hidden': true }, 'i' , 'object' ) : false,
1696	migrated = elementor.helpers.isIconMigrated( settings, 'premium_counter_icon_updated' );
1697
1698	}
1699
1700	if ( 'yes' === settings.draw_svg ) {
1701
1702	if ( 'icon' === iconType ) {
1703
1704	view.addRenderAttribute( 'icon', 'class', settings.premium_counter_icon_updated.value );
1705
1706	}
1707
1708	view.addRenderAttribute(
1709	'icon',
1710	{
1711	'class' : 'premium-svg-drawer',
1712	'data-svg-reverse' : settings.lottie_reverse,
1713	'data-svg-loop' : settings.lottie_loop,
1714	'data-svg-sync' : settings.svg_sync,
1715	'data-svg-hover' : settings.svg_hover,
1716	'data-svg-fill' : settings.svg_color,
1717	'data-svg-frames' : settings.frames,
1718	'data-svg-yoyo' : settings.svg_yoyo,
1719	'data-svg-point' : settings.lottie_reverse ? settings.end_point.size : settings.start_point.size,
1720	}
1721	);
1722
1723	} else {
1724	view.addRenderAttribute( 'icon', 'class', 'premium-svg-nodraw' );
1725	}
1726
1727	} else if( 'custom' === iconType ) {
1728
1729	if( 'simple' === settings.premium_counter_icon_style ) {
1730	flexWidth = ' flex-width ';
1731	}
1732
1733	} else {
1734
1735	view.addRenderAttribute( 'counter_lottie', {
1736	'class': [
1737	'premium-counter-animation',
1738	'premium-lottie-animation'
1739	],
1740	'data-lottie-url': settings.lottie_url,
1741	'data-lottie-loop': settings.lottie_loop,
1742	'data-lottie-reverse': settings.lottie_reverse
1743	});
1744
1745	}
1746
1747	view.addRenderAttribute( 'icon_wrap', 'class', 'premium-counter-icon' );
1748
1749	var iconClass = 'icon' + flexWidth + iconStyle;
1750
1751	#>
1752
1753	<div {{{ view.getRenderAttributeString('icon_wrap') }}}>
1754	<span data-animation="{{ animation }}" class="{{ iconClass }}">
1755	<# if( 'icon' === iconType ) {
1756	if ( iconHTML && iconHTML.rendered && ( ! settings.premium_counter_icon \|\| migrated ) ) { #>
1757	{{{ iconHTML.value }}}
1758	<# } else { #>
1759	<i {{{ view.getRenderAttributeString('icon') }}}></i>
1760	<# }
1761
1762	} else if( 'svg' === iconType ) { #>
1763	<div {{{ view.getRenderAttributeString('icon') }}}>
1764	{{{ settings.custom_svg }}}
1765	</div>
1766	<# } else if( 'custom' === iconType && '' !== settings.premium_counter_image_upload.url ) { #>
1767	<img class="custom-image" src="{{ settings.premium_counter_image_upload.url }}">
1768	<# } else { #>
1769	<div {{{ view.getRenderAttributeString('counter_lottie') }}}></div>
1770	<# } #>
1771	</span>
1772	</div>
1773
1774	<#
1775	}
1776
1777	#>
1778
1779	<div {{{ view.getRenderAttributeString('counter') }}}>
1780	<#
1781
1782	if( 'yes' === settings.icon_switcher ) {
1783	renderCounterIcon();
1784	}
1785
1786	getCounterContent();
1787	#>
1788	</div>
1789
1790	<?php
1791	}
1792	}
1793