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

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

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

premium-counter.php

1670 lines

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