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

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

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

premium-counter.php

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