premium-progressbar.php — Premium Addons for Elementor – Powerful Elementor Templates & Widgets 4.11.84

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

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

premium-progressbar.php

2125 lines

1	<?php
2	/**
3	* Premium Progress Bar.
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\Controls_Manager;
13	use Elementor\Icons_Manager;
14	use Elementor\Repeater;
15	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
16	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
17	use Elementor\Group_Control_Typography;
18	use PremiumAddons\Includes\Controls\Premium_Background;
19	use Elementor\Group_Control_Border;
20
21	// PremiumAddons Classes.
22	use PremiumAddons\Admin\Includes\Admin_Helper;
23	use PremiumAddons\Includes\Helper_Functions;
24
25	if ( ! defined( 'ABSPATH' ) ) {
26	exit; // If this file is called directly, abort.
27	}
28
29	/**
30	* Class Premium_Progressbar
31	*/
32	class Premium_Progressbar 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-progressbar' );
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-addon-progressbar';
67	}
68
69	/**
70	* Retrieve Widget Title.
71	*
72	* @since 1.0.0
73	* @access public
74	*/
75	public function get_title() {
76	return __( 'Progress Bar', '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-progress-bar';
89	}
90
91	/**
92	* Retrieve Widget Categories.
93	*
94	* @since 1.5.1
95	* @access public
96	*
97	* @return array Widget categories.
98	*/
99	public function get_categories() {
100	return array( 'premium-elements' );
101	}
102
103	/**
104	* Retrieve Widget Dependent CSS.
105	*
106	* @since 1.0.0
107	* @access public
108	*
109	* @return array CSS style handles.
110	*/
111	public function get_style_depends() {
112	return array(
113	'premium-addons',
114	);
115	}
116
117	/**
118	* Retrieve Widget Dependent JS.
119	*
120	* @since 1.0.0
121	* @access public
122	*
123	* @return array JS script handles.
124	*/
125	public function get_script_depends() {
126
127	$is_edit = Helper_Functions::is_edit_mode();
128
129	$scripts = array();
130
131	if ( $is_edit ) {
132
133	$draw_scripts = $this->check_icon_draw() ? array( 'pa-tweenmax', 'pa-motionpath' ) : array();
134
135	$scripts = array_merge( $draw_scripts, array( 'lottie-js' ) );
136
137	} else {
138	$settings = $this->get_settings();
139
140	if ( 'yes' === $settings['draw_svg'] ) {
141	$scripts[] = 'pa-tweenmax';
142	$scripts[] = 'pa-motionpath';
143	}
144
145	if ( 'animation' === $settings['icon_type'] ) {
146	$scripts[] = 'lottie-js';
147	}
148	}
149
150	$scripts[] = 'premium-addons';
151
152	return $scripts;
153	}
154
155	/**
156	* Retrieve Widget Keywords.
157	*
158	* @since 1.0.0
159	* @access public
160	*
161	* @return array Widget keywords.
162	*/
163	public function get_keywords() {
164	return array( 'pa', 'premium', 'premium progress bar', 'circle', 'chart', 'line', 'graph', 'percent' );
165	}
166
167	protected function is_dynamic_content(): bool {
168	return false;
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 Progress Bar 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_progressbar_labels',
198	array(
199	'label' => __( 'Progress Bar Settings', 'premium-addons-for-elementor' ),
200	)
201	);
202
203	$this->add_control(
204	'layout_type',
205	array(
206	'label' => __( 'Type', 'premium-addons-for-elementor' ),
207	'type' => Controls_Manager::SELECT,
208	'options' => array(
209	'line' => __( 'Line', 'premium-addons-for-elementor' ),
210	'half-circle' => __( 'Half Circle', 'premium-addons-for-elementor' ),
211	'circle' => __( 'Circle', 'premium-addons-for-elementor' ),
212	'dots' => __( 'Dots', 'premium-addons-for-elementor' ),
213	),
214	'default' => 'line',
215	'label_block' => true,
216	)
217	);
218
219	$this->add_responsive_control(
220	'dot_size',
221	array(
222	'label' => __( 'Dot Size', 'premium-addons-for-elementor' ),
223	'type' => Controls_Manager::SLIDER,
224	'range' => array(
225	'px' => array(
226	'min' => 1,
227	'max' => 60,
228	),
229	),
230	'default' => array(
231	'size' => 25,
232	'unit' => 'px',
233	),
234	'condition' => array(
235	'layout_type' => 'dots',
236	),
237	'render_type' => 'template',
238	'selectors' => array(
239	'{{WRAPPER}} .progress-segment' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}',
240	),
241	)
242	);
243
244	$this->add_responsive_control(
245	'dot_spacing',
246	array(
247	'label' => __( 'Spacing', 'premium-addons-for-elementor' ),
248	'type' => Controls_Manager::SLIDER,
249	'range' => array(
250	'px' => array(
251	'min' => 1,
252	'max' => 10,
253	),
254	),
255	'default' => array(
256	'size' => 8,
257	'unit' => 'px',
258	),
259	'condition' => array(
260	'layout_type' => 'dots',
261	),
262	'render_type' => 'template',
263	'selectors' => array(
264	'{{WRAPPER}} .progress-segment:not(:first-child):not(:last-child)' => 'margin-right: calc( {{SIZE}}{{UNIT}}/2 ); margin-left: calc( {{SIZE}}{{UNIT}}/2 )',
265	'{{WRAPPER}} .progress-segment:first-child' => 'margin-right: calc( {{SIZE}}{{UNIT}}/2 )',
266	'{{WRAPPER}} .progress-segment:last-child' => 'margin-left: calc( {{SIZE}}{{UNIT}}/2 )',
267	),
268	)
269	);
270
271	$this->add_responsive_control(
272	'circle_size',
273	array(
274	'label' => __( 'Size', 'premium-addons-for-elementor' ),
275	'type' => Controls_Manager::SLIDER,
276	'range' => array(
277	'px' => array(
278	'min' => 50,
279	'max' => 500,
280	'step' => 1,
281	),
282	),
283	'default' => array(
284	'size' => 200,
285	),
286	'selectors' => array(
287	'{{WRAPPER}} .premium-progressbar-circle-wrap, {{WRAPPER}} .premium-progressbar-hf-container' => 'width: {{SIZE}}px; height: {{SIZE}}px',
288	'{{WRAPPER}} .premium-progressbar-hf-circle-wrap' => 'width: {{SIZE}}{{UNIT}}; height: calc({{SIZE}} / 2 * 1{{UNIT}});',
289	'{{WRAPPER}} .premium-progressbar-hf-labels' => 'width: {{SIZE}}{{UNIT}};',
290	),
291	'condition' => array(
292	'layout_type' => array( 'half-circle', 'circle' ),
293	),
294	)
295	);
296
297	$this->add_control(
298	'premium_progressbar_select_label',
299	array(
300	'label' => __( 'Labels', 'premium-addons-for-elementor' ),
301	'type' => Controls_Manager::SELECT,
302	'default' => 'left_right_labels',
303	'options' => array(
304	'left_right_labels' => __( 'Left & Right Labels', 'premium-addons-for-elementor' ),
305	'more_labels' => __( 'Multiple Labels', 'premium-addons-for-elementor' ),
306	),
307	'label_block' => true,
308	'condition' => array(
309	'layout_type!' => array( 'half-circle', 'circle' ),
310	),
311	)
312	);
313
314	$this->add_control(
315	'premium_progressbar_left_label',
316	array(
317	'label' => __( 'Left Label', 'premium-addons-for-elementor' ),
318	'type' => Controls_Manager::TEXT,
319	'dynamic' => array( 'active' => true ),
320	'default' => __( 'My Skill', 'premium-addons-for-elementor' ),
321	'label_block' => true,
322	'condition' => array(
323	'premium_progressbar_select_label' => 'left_right_labels',
324	),
325	)
326	);
327
328	$this->add_responsive_control(
329	'title_width',
330	array(
331	'label' => __( 'Title Max Width', 'premium-addons-for-elementor' ),
332	'type' => Controls_Manager::SLIDER,
333	'size_units' => array( 'px', '%', 'em' ),
334	'selectors' => array(
335	'{{WRAPPER}} .premium-progressbar-left-label' => 'max-width: {{SIZE}}{{UNIT}}',
336	),
337	'condition' => array(
338	'layout_type' => array( 'half-circle', 'circle' ),
339	),
340	)
341	);
342
343	$this->add_control(
344	'premium_progressbar_right_label',
345	array(
346	'label' => __( 'Right Label', 'premium-addons-for-elementor' ),
347	'type' => Controls_Manager::TEXT,
348	'dynamic' => array( 'active' => true ),
349	'default' => __( '50%', 'premium-addons-for-elementor' ),
350	'label_block' => true,
351	'condition' => array(
352	'premium_progressbar_select_label' => 'left_right_labels',
353	'layout_type!' => array( 'half-circle', 'circle' ),
354	),
355	)
356	);
357
358	$common_conditions = array(
359	'layout_type' => array( 'half-circle', 'circle' ),
360	);
361
362	$this->add_control(
363	'icon_type',
364	array(
365	'label' => __( 'Icon Type', 'premium-addons-for-elementor' ),
366	'type' => Controls_Manager::SELECT,
367	'options' => array(
368	'icon' => __( 'Icon', 'premium-addons-for-elementor' ),
369	'image' => __( 'Custom Image', 'premium-addons-for-elementor' ),
370	'animation' => __( 'Lottie Animation', 'premium-addons-for-elementor' ),
371	'svg' => __( 'SVG Code', 'premium-addons-for-elementor' ),
372	),
373	'default' => 'icon',
374	'separator' => 'before',
375	'condition' => $common_conditions,
376	)
377	);
378
379	$this->add_control(
380	'icon_select',
381	array(
382	'label' => __( 'Select an Icon', 'premium-addons-for-elementor' ),
383	'type' => Controls_Manager::ICONS,
384	'condition' => array_merge(
385	$common_conditions,
386	array(
387	'icon_type' => 'icon',
388	)
389	),
390	)
391	);
392
393	$this->add_control(
394	'image_upload',
395	array(
396	'label' => __( 'Upload Image', 'premium-addons-for-elementor' ),
397	'type' => Controls_Manager::MEDIA,
398	'default' => array(
399	'url' => Utils::get_placeholder_image_src(),
400	),
401	'condition' => array_merge(
402	$common_conditions,
403	array(
404	'icon_type' => 'image',
405	)
406	),
407	)
408	);
409
410	$this->add_control(
411	'custom_svg',
412	array(
413	'label' => __( 'SVG Code', 'premium-addons-for-elementor' ),
414	'type' => Controls_Manager::TEXTAREA,
415	'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>',
416	'condition' => array_merge(
417	$common_conditions,
418	array(
419	'icon_type' => 'svg',
420	)
421	),
422	'ai' => array(
423	'active' => false,
424	),
425	)
426	);
427
428	$this->add_control(
429	'lottie_source',
430	array(
431	'label' => __( 'File Source', 'premium-addons-for-elementor' ),
432	'type' => Controls_Manager::SELECT,
433	'options' => array(
434	'url' => __( 'External URL', 'premium-addons-for-elementor' ),
435	'file' => __( 'Media File', 'premium-addons-for-elementor' ),
436	),
437	'default' => 'url',
438	'condition' => array_merge(
439	$common_conditions,
440	array(
441	'icon_type' => 'animation',
442	)
443	),
444	)
445	);
446
447	$this->add_control(
448	'lottie_url',
449	array(
450	'label' => __( 'Animation JSON URL', 'premium-addons-for-elementor' ),
451	'type' => Controls_Manager::TEXT,
452	'dynamic' => array( 'active' => true ),
453	'description' => 'Get JSON code URL from <a href="https://lottiefiles.com/" target="_blank">here</a>',
454	'label_block' => true,
455	'condition' => array_merge(
456	$common_conditions,
457	array(
458	'icon_type' => 'animation',
459	'lottie_source' => 'url',
460	)
461	),
462	'ai' => array(
463	'active' => false,
464	),
465	)
466	);
467
468	$this->add_control(
469	'lottie_file',
470	array(
471	'label' => __( 'Upload JSON File', 'premium-addons-for-elementor' ),
472	'type' => Controls_Manager::MEDIA,
473	'media_type' => 'application/json',
474	'condition' => array_merge(
475	$common_conditions,
476	array(
477	'icon_type' => 'animation',
478	'lottie_source' => 'file',
479	)
480	),
481	)
482	);
483
484	$this->add_control(
485	'draw_svg',
486	array(
487	'label' => __( 'Draw Icon', 'premium-addons-for-elementor' ),
488	'type' => Controls_Manager::SWITCHER,
489	'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>',
490	'classes' => $draw_icon ? '' : 'editor-pa-control-disabled',
491	'condition' => array_merge(
492	$common_conditions,
493	array(
494	'icon_type' => array( 'icon', 'svg' ),
495	'icon_select[library]!' => 'svg',
496	)
497	),
498	)
499	);
500
501	$animation_conds = array(
502	'terms' => array(
503	array(
504	'relation' => 'or',
505	'terms' => array(
506	array(
507	'name' => 'layout_type',
508	'value' => 'half-circle',
509	),
510	array(
511	'name' => 'layout_type',
512	'value' => 'circle',
513	),
514	),
515	),
516	array(
517	'relation' => 'or',
518	'terms' => array(
519	array(
520	'name' => 'icon_type',
521	'value' => 'animation',
522	),
523	array(
524	'terms' => array(
525	array(
526	'relation' => 'or',
527	'terms' => array(
528	array(
529	'name' => 'icon_type',
530	'value' => 'icon',
531	),
532	array(
533	'name' => 'icon_type',
534	'value' => 'svg',
535	),
536	),
537	),
538	array(
539	'name' => 'draw_svg',
540	'value' => 'yes',
541	),
542	),
543	),
544	),
545	),
546	),
547	);
548
549	if ( $draw_icon ) {
550	$this->add_control(
551	'path_width',
552	array(
553	'label' => __( 'Path Thickness', 'premium-addons-for-elementor' ),
554	'type' => Controls_Manager::SLIDER,
555	'range' => array(
556	'px' => array(
557	'min' => 0,
558	'max' => 50,
559	'step' => 0.1,
560	),
561	),
562	'condition' => array_merge(
563	$common_conditions,
564	array(
565	'icon_type' => array( 'icon', 'svg' ),
566	)
567	),
568	'selectors' => array(
569	'{{WRAPPER}} .premium-progressbar-circle-content svg *' => 'stroke-width: {{SIZE}}',
570	),
571	)
572	);
573
574	$this->add_control(
575	'svg_sync',
576	array(
577	'label' => __( 'Draw All Paths Together', 'premium-addons-for-elementor' ),
578	'type' => Controls_Manager::SWITCHER,
579	'condition' => array_merge(
580	$common_conditions,
581	array(
582	'icon_type' => array( 'icon', 'svg' ),
583	'draw_svg' => 'yes',
584	)
585	),
586	)
587	);
588
589	$this->add_control(
590	'frames',
591	array(
592	'label' => __( 'Speed', 'premium-addons-for-elementor' ),
593	'type' => Controls_Manager::NUMBER,
594	'description' => __( 'Larger value means longer animation duration.', 'premium-addons-for-elementor' ),
595	'default' => 5,
596	'min' => 1,
597	'max' => 100,
598	'condition' => array_merge(
599	$common_conditions,
600	array(
601	'icon_type' => array( 'icon', 'svg' ),
602	'draw_svg' => 'yes',
603	)
604	),
605	)
606	);
607	} else {
608
609	Helper_Functions::get_draw_svg_notice(
610	$this,
611	'bar',
612	array_merge(
613	$common_conditions,
614	array(
615	'icon_type' => array( 'icon', 'svg' ),
616	'icon_select[library]!' => 'svg',
617	)
618	)
619	);
620
621	}
622
623	$this->add_control(
624	'lottie_loop',
625	array(
626	'label' => __( 'Loop', 'premium-addons-for-elementor' ),
627	'type' => Controls_Manager::SWITCHER,
628	'return_value' => 'true',
629	'default' => 'true',
630	'conditions' => $animation_conds,
631	)
632	);
633
634	$this->add_control(
635	'lottie_reverse',
636	array(
637	'label' => __( 'Reverse', 'premium-addons-for-elementor' ),
638	'type' => Controls_Manager::SWITCHER,
639	'return_value' => 'true',
640	'conditions' => $animation_conds,
641	)
642	);
643
644	if ( $draw_icon ) {
645	$this->add_control(
646	'start_point',
647	array(
648	'label' => __( 'Start Point (%)', 'premium-addons-for-elementor' ),
649	'type' => Controls_Manager::SLIDER,
650	'description' => __( 'Set the point that the SVG should start from.', 'premium-addons-for-elementor' ),
651	'default' => array(
652	'unit' => '%',
653	'size' => 0,
654	),
655	'condition' => array_merge(
656	$common_conditions,
657	array(
658	'icon_type' => array( 'icon', 'svg' ),
659	'draw_svg' => 'yes',
660	'lottie_reverse!' => 'true',
661	)
662	),
663	)
664	);
665
666	$this->add_control(
667	'end_point',
668	array(
669	'label' => __( 'End Point (%)', 'premium-addons-for-elementor' ),
670	'type' => Controls_Manager::SLIDER,
671	'description' => __( 'Set the point that the SVG should end at.', 'premium-addons-for-elementor' ),
672	'default' => array(
673	'unit' => '%',
674	'size' => 0,
675	),
676	'condition' => array_merge(
677	$common_conditions,
678	array(
679	'icon_type' => array( 'icon', 'svg' ),
680	'draw_svg' => 'yes',
681	'lottie_reverse' => 'true',
682	)
683	),
684
685	)
686	);
687
688	$this->add_control(
689	'svg_hover',
690	array(
691	'label' => __( 'Only Play on Hover', 'premium-addons-for-elementor' ),
692	'type' => Controls_Manager::SWITCHER,
693	'return_value' => 'true',
694	'condition' => array_merge(
695	$common_conditions,
696	array(
697	'icon_type' => array( 'icon', 'svg' ),
698	'draw_svg' => 'yes',
699	)
700	),
701	)
702	);
703
704	$this->add_control(
705	'svg_yoyo',
706	array(
707	'label' => __( 'Yoyo Effect', 'premium-addons-for-elementor' ),
708	'type' => Controls_Manager::SWITCHER,
709	'condition' => array_merge(
710	$common_conditions,
711	array(
712	'icon_type' => array( 'icon', 'svg' ),
713	'draw_svg' => 'yes',
714	'lottie_loop' => 'true',
715	)
716	),
717	)
718	);
719	}
720
721	$this->add_responsive_control(
722	'icon_size',
723	array(
724	'label' => __( 'Icon Size', 'premium-addons-for-elementor' ),
725	'type' => Controls_Manager::SLIDER,
726	'condition' => array_merge(
727	$common_conditions,
728	array(
729	'icon_type!' => 'svg',
730	)
731	),
732	'default' => array(
733	'unit' => 'px',
734	'size' => 30,
735	),
736	'selectors' => array(
737	'{{WRAPPER}} .premium-progressbar-circle-content i' => 'font-size: {{SIZE}}px',
738	'{{WRAPPER}} .premium-progressbar-circle-content svg, {{WRAPPER}} .premium-progressbar-circle-content img' => 'width: {{SIZE}}px !important; height: {{SIZE}}px !important',
739	),
740	)
741	);
742
743	$this->add_responsive_control(
744	'svg_icon_width',
745	array(
746	'label' => __( 'Width', 'premium-addons-for-elementor' ),
747	'type' => Controls_Manager::SLIDER,
748	'size_units' => array( 'px', 'em', '%' ),
749	'range' => array(
750	'px' => array(
751	'min' => 1,
752	'max' => 600,
753	),
754	'em' => array(
755	'min' => 1,
756	'max' => 30,
757	),
758	),
759	'default' => array(
760	'size' => 100,
761	'unit' => 'px',
762	),
763	'condition' => array_merge(
764	$common_conditions,
765	array(
766	'icon_type' => 'svg',
767	)
768	),
769	'selectors' => array(
770	'{{WRAPPER}} .premium-progressbar-circle-content svg' => 'width: {{SIZE}}{{UNIT}};',
771	),
772	)
773	);
774
775	$this->add_responsive_control(
776	'svg_icon_height',
777	array(
778	'label' => __( 'Height', 'premium-addons-for-elementor' ),
779	'type' => Controls_Manager::SLIDER,
780	'size_units' => array( 'px', 'em' ),
781	'range' => array(
782	'px' => array(
783	'min' => 1,
784	'max' => 300,
785	),
786	'em' => array(
787	'min' => 1,
788	'max' => 30,
789	),
790	),
791	'condition' => array_merge(
792	$common_conditions,
793	array(
794	'icon_type' => 'svg',
795	)
796	),
797	'selectors' => array(
798	'{{WRAPPER}} .premium-progressbar-circle-content svg' => 'height: {{SIZE}}{{UNIT}}',
799	),
800	)
801	);
802
803	$this->add_control(
804	'show_percentage_value',
805	array(
806	'label' => __( 'Show Progress Value', 'premium-addons-for-elementor' ),
807	'type' => Controls_Manager::SWITCHER,
808	'default' => 'yes',
809	'separator' => 'before',
810	'condition' => array(
811	'layout_type' => array( 'half-circle', 'circle' ),
812	),
813	)
814	);
815
816	$repeater = new REPEATER();
817
818	$repeater->add_control(
819	'text',
820	array(
821	'label' => __( 'Label', 'premium-addons-for-elementor' ),
822	'type' => Controls_Manager::TEXT,
823	'dynamic' => array( 'active' => true ),
824	'label_block' => true,
825	'placeholder' => __( 'label', 'premium-addons-for-elementor' ),
826	'default' => __( 'label', 'premium-addons-for-elementor' ),
827	)
828	);
829
830	$repeater->add_control(
831	'number',
832	array(
833	'label' => __( 'Percentage', 'premium-addons-for-elementor' ),
834	'dynamic' => array( 'active' => true ),
835	'type' => Controls_Manager::TEXT,
836	'default' => 50,
837	'ai' => array(
838	'active' => false,
839	),
840	)
841	);
842
843	$this->add_control(
844	'premium_progressbar_multiple_label',
845	array(
846	'label' => __( 'Label', 'premium-addons-for-elementor' ),
847	'type' => Controls_Manager::REPEATER,
848	'default' => array(
849	array(
850	'text' => __( 'Label', 'premium-addons-for-elementor' ),
851	'number' => 50,
852	),
853	),
854	'fields' => $repeater->get_controls(),
855	'condition' => array(
856	'premium_progressbar_select_label' => 'more_labels',
857	'layout_type' => array( 'line', 'dots' ),
858	),
859	)
860	);
861
862	$this->add_control(
863	'premium_progress_bar_space_percentage_switcher',
864	array(
865	'label' => __( 'Enable Percentage', 'premium-addons-for-elementor' ),
866	'type' => Controls_Manager::SWITCHER,
867	'default' => 'yes',
868	'description' => __( 'Enable percentage for labels', 'premium-addons-for-elementor' ),
869	'condition' => array(
870	'premium_progressbar_select_label' => 'more_labels',
871	'layout_type' => array( 'line', 'dots' ),
872	),
873	)
874	);
875
876	$this->add_control(
877	'premium_progressbar_select_label_icon',
878	array(
879	'label' => __( 'Labels Indicator', 'premium-addons-for-elementor' ),
880	'type' => Controls_Manager::SELECT,
881	'default' => 'line_pin',
882	'options' => array(
883	'' => __( 'None', 'premium-addons-for-elementor' ),
884	'line_pin' => __( 'Pin', 'premium-addons-for-elementor' ),
885	'arrow' => __( 'Arrow', 'premium-addons-for-elementor' ),
886	),
887	'condition' => array(
888	'premium_progressbar_select_label' => 'more_labels',
889	'layout_type' => array( 'line', 'dots' ),
890	),
891	)
892	);
893
894	$this->add_control(
895	'premium_progressbar_more_labels_align',
896	array(
897	'label' => __( 'Labels Alignment', 'premium-addons-for-elementor' ),
898	'type' => Controls_Manager::CHOOSE,
899	'options' => array(
900	'left' => array(
901	'title' => __( 'Left', 'premium-addons-for-elementor' ),
902	'icon' => 'eicon-text-align-left',
903	),
904	'center' => array(
905	'title' => __( 'Center', 'premium-addons-for-elementor' ),
906	'icon' => 'eicon-text-align-center',
907	),
908	'right' => array(
909	'title' => __( 'Right', 'premium-addons-for-elementor' ),
910	'icon' => 'eicon-text-align-right',
911	),
912	),
913	'default' => 'center',
914	'condition' => array(
915	'premium_progressbar_select_label' => 'more_labels',
916	'layout_type' => array( 'line', 'dots' ),
917	),
918	)
919	);
920
921	$this->add_control(
922	'premium_progressbar_progress_percentage',
923	array(
924	'label' => __( 'Value', 'premium-addons-for-elementor' ),
925	'type' => Controls_Manager::TEXT,
926	'dynamic' => array( 'active' => true ),
927	'default' => 50,
928	'ai' => array(
929	'active' => false,
930	),
931	)
932	);
933
934	$this->add_control(
935	'premium_progressbar_max_value',
936	array(
937	'label' => __( 'Max Value', 'premium-addons-for-elementor' ),
938	'type' => Controls_Manager::NUMBER,
939	'dynamic' => array( 'active' => true ),
940	'min' => 1,
941	'description' => __( 'Leave empty to treat Value as a percentage. Set a maximum to fill the bar as Value ÷ Max Value.', 'premium-addons-for-elementor' ),
942	'ai' => array( 'active' => false ),
943	)
944	);
945
946	$this->add_control(
947	'premium_progressbar_display_format',
948	array(
949	'label' => __( 'Display Format', 'premium-addons-for-elementor' ),
950	'type' => Controls_Manager::SELECT,
951	'default' => 'value',
952	'options' => array(
953	'percentage' => __( 'Percentage', 'premium-addons-for-elementor' ),
954	'value' => __( 'Value', 'premium-addons-for-elementor' ),
955	'value_max' => __( 'Value / Max', 'premium-addons-for-elementor' ),
956	),
957	'conditions' => array(
958	'terms' => array(
959	array(
960	'name' => 'premium_progressbar_max_value',
961	'operator' => '!==',
962	'value' => '',
963	),
964	array(
965	'relation' => 'or',
966	'terms' => array(
967	array(
968	'name' => 'premium_progressbar_select_label',
969	'value' => 'more_labels',
970	),
971	array(
972	'name' => 'layout_type',
973	'value' => 'half-circle',
974	),
975	array(
976	'name' => 'layout_type',
977	'value' => 'circle',
978	),
979	),
980	),
981	),
982	),
983	)
984	);
985
986	$this->add_control(
987	'premium_progressbar_progress_style',
988	array(
989	'label' => __( 'Style', 'premium-addons-for-elementor' ),
990	'type' => Controls_Manager::SELECT,
991	'default' => 'solid',
992	'options' => array(
993	'solid' => __( 'Solid', 'premium-addons-for-elementor' ),
994	'stripped' => __( 'Striped', 'premium-addons-for-elementor' ),
995	'gradient' => __( 'Animated Gradient', 'premium-addons-for-elementor' ),
996	),
997	'condition' => array(
998	'layout_type' => 'line',
999	),
1000	)
1001	);
1002
1003	$this->add_control(
1004	'premium_progressbar_speed',
1005	array(
1006	'label' => __( 'Speed (milliseconds)', 'premium-addons-for-elementor' ),
1007	'type' => Controls_Manager::NUMBER,
1008	'render_type' => 'template',
1009	'selectors' => array(
1010	'{{WRAPPER}} .premium-progressbar-hf-circle-progress' => 'transition-duration: {{VALUE}}ms',
1011	),
1012	)
1013	);
1014
1015	$this->add_control(
1016	'premium_progressbar_progress_animation',
1017	array(
1018	'label' => __( 'Animated', 'premium-addons-for-elementor' ),
1019	'type' => Controls_Manager::SWITCHER,
1020	'condition' => array(
1021	'premium_progressbar_progress_style' => 'stripped',
1022	'layout_type' => 'line',
1023	),
1024	)
1025	);
1026
1027	$this->add_control(
1028	'gradient_colors',
1029	array(
1030	'label' => __( 'Gradient Colors', 'premium-addons-for-elementor' ),
1031	'type' => Controls_Manager::TEXT,
1032	'description' => __( 'Enter Colors separated with \' , \'.', 'premium-addons-for-elementor' ),
1033	'default' => '#6EC1E4,#54595F',
1034	'label_block' => true,
1035	'condition' => array(
1036	'layout_type' => 'line',
1037	'premium_progressbar_progress_style' => 'gradient',
1038	),
1039	'ai' => array(
1040	'active' => false,
1041	),
1042	)
1043	);
1044
1045	$this->add_control(
1046	'half_prefix_label',
1047	array(
1048	'label' => __( 'Prefix Label', 'premium-addons-for-elementor' ),
1049	'type' => Controls_Manager::TEXT,
1050	'dynamic' => array( 'active' => true ),
1051	'default' => '0',
1052	'condition' => array(
1053	'layout_type' => 'half-circle',
1054	),
1055	'separator' => 'before',
1056	)
1057	);
1058
1059	$this->add_control(
1060	'half_suffix_label',
1061	array(
1062	'label' => __( 'Suffix Label', 'premium-addons-for-elementor' ),
1063	'type' => Controls_Manager::TEXT,
1064	'dynamic' => array( 'active' => true ),
1065	'default' => __( '100%', 'premium-addons-for-elementor' ),
1066	'condition' => array(
1067	'layout_type' => 'half-circle',
1068	),
1069	)
1070	);
1071
1072	$this->add_control(
1073	'magic_scroll',
1074	array(
1075	'label' => __( 'Use With Magic Scroll', 'premium-addons-for-elementor' ),
1076	'type' => Controls_Manager::SWITCHER,
1077	'description' => __( 'Enable this option if you want to animate the progress bar using ', 'premium-addons-for-elementor' ) . '<a href="https://premiumaddons.com/elementor-magic-scroll-global-addon/" target="_blank">Magic Scroll addon.</a>',
1078	'condition' => array(
1079	'layout_type!' => 'dots',
1080	),
1081	)
1082	);
1083
1084	$this->end_controls_section();
1085
1086	$this->start_controls_section(
1087	'section_pa_docs',
1088	array(
1089	'label' => __( 'Help & Docs', 'premium-addons-for-elementor' ),
1090	)
1091	);
1092
1093	$doc1_url = Helper_Functions::get_campaign_link( 'https://premiumaddons.com/docs/premium-progress-bar-widget/', 'progress-widget', 'wp-editor', 'get-support' );
1094
1095	$this->add_control(
1096	'doc_1',
1097	array(
1098	'type' => Controls_Manager::RAW_HTML,
1099	'raw' => sprintf( '<a href="%s" target="_blank">%s</a>', $doc1_url, __( 'Getting started »', 'premium-addons-for-elementor' ) ),
1100	'content_classes' => 'editor-pa-doc',
1101	)
1102	);
1103
1104	Helper_Functions::register_element_feedback_controls( $this );
1105
1106	$this->end_controls_section();
1107
1108	$this->start_controls_section(
1109	'premium_progressbar_progress_bar_settings',
1110	array(
1111	'label' => __( 'Progress Bar', 'premium-addons-for-elementor' ),
1112	'tab' => Controls_Manager::TAB_STYLE,
1113	)
1114	);
1115
1116	$this->add_control(
1117	'premium_progressbar_progress_bar_height',
1118	array(
1119	'label' => __( 'Height', 'premium-addons-for-elementor' ),
1120	'type' => Controls_Manager::SLIDER,
1121	'default' => array(
1122	'size' => 25,
1123	),
1124	'label_block' => true,
1125	'selectors' => array(
1126	'{{WRAPPER}} .premium-progressbar-bar-wrap, {{WRAPPER}} .premium-progressbar-bar' => 'height: {{SIZE}}px;',
1127	),
1128	'condition' => array(
1129	'layout_type' => 'line',
1130	),
1131	)
1132	);
1133
1134	$this->add_control(
1135	'premium_progressbar_progress_bar_radius',
1136	array(
1137	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
1138	'type' => Controls_Manager::SLIDER,
1139	'size_units' => array( 'px', '%', 'em' ),
1140	'range' => array(
1141	'px' => array(
1142	'min' => 0,
1143	'max' => 60,
1144	),
1145	),
1146	'selectors' => array(
1147	'{{WRAPPER}} .premium-progressbar-bar-wrap, {{WRAPPER}} .premium-progressbar-bar, {{WRAPPER}} .progress-segment' => 'border-radius: {{SIZE}}{{UNIT}};',
1148	),
1149	'condition' => array(
1150	'layout_type!' => array( 'half-circle', 'circle' ),
1151	),
1152	)
1153	);
1154
1155	$this->add_control(
1156	'circle_border_width',
1157	array(
1158	'label' => __( 'Border Width', 'premium-addons-for-elementor' ),
1159	'type' => Controls_Manager::SLIDER,
1160	'selectors' => array(
1161	'{{WRAPPER}} .premium-progressbar-circle-base, {{WRAPPER}} .premium-progressbar-circle div, {{WRAPPER}} .premium-progressbar-circle-inner, {{WRAPPER}} .premium-progressbar-hf-circle-progress' => 'border-width: {{SIZE}}{{UNIT}}',
1162	'{{WRAPPER}} .premium-progressbar-hf-label-left' => 'transform: translateX( calc( {{SIZE}} / 4 * 1{{UNIT}} ) )',
1163	),
1164	'condition' => array(
1165	'layout_type' => array( 'half-circle', 'circle' ),
1166	),
1167	)
1168	);
1169
1170	$this->add_control(
1171	'circle_base_border_color',
1172	array(
1173	'label' => __( 'Border Color', 'premium-addons-for-elementor' ),
1174	'type' => Controls_Manager::COLOR,
1175	'global' => array(
1176	'default' => Global_Colors::COLOR_PRIMARY,
1177	),
1178	'selectors' => array(
1179	'{{WRAPPER}} .premium-progressbar-circle-base, {{WRAPPER}} .premium-progressbar-circle-inner' => 'border-color: {{VALUE}};',
1180	),
1181	'condition' => array(
1182	'layout_type' => array( 'half-circle', 'circle' ),
1183	),
1184	)
1185	);
1186
1187	$this->add_control(
1188	'fill_colors_title',
1189	array(
1190	'label' => __( 'Fill', 'premium-addons-for-elementor' ),
1191	'type' => Controls_Manager::HEADING,
1192	)
1193	);
1194
1195	$this->add_group_control(
1196	Premium_Background::get_type(),
1197	array(
1198	'name' => 'premium_progressbar_progress_color',
1199	'types' => array( 'classic', 'gradient' ),
1200	'selector' => '{{WRAPPER}} .premium-progressbar-bar, {{WRAPPER}} .segment-inner',
1201	'condition' => array(
1202	'layout_type!' => array( 'half-circle', 'circle' ),
1203	),
1204	)
1205	);
1206
1207	$this->add_control(
1208	'circle_fill_color',
1209	array(
1210	'label' => __( 'Select Color', 'premium-addons-for-elementor' ),
1211	'type' => Controls_Manager::COLOR,
1212	'global' => array(
1213	'default' => Global_Colors::COLOR_SECONDARY,
1214	),
1215	'condition' => array(
1216	'layout_type' => array( 'half-circle', 'circle' ),
1217	),
1218	'selectors' => array(
1219	'{{WRAPPER}} .premium-progressbar-circle div, {{WRAPPER}} .premium-progressbar-hf-circle-progress' => 'border-color: {{VALUE}};',
1220	),
1221	)
1222	);
1223
1224	$this->add_control(
1225	'base_colors_title',
1226	array(
1227	'label' => __( 'Base', 'premium-addons-for-elementor' ),
1228	'type' => Controls_Manager::HEADING,
1229	)
1230	);
1231
1232	$this->add_group_control(
1233	Premium_Background::get_type(),
1234	array(
1235	'name' => 'premium_progressbar_background',
1236	'types' => array( 'classic', 'gradient' ),
1237	'selector' => '{{WRAPPER}} .premium-progressbar-bar-wrap:not(.premium-progressbar-dots), {{WRAPPER}} .premium-progressbar-circle-base, {{WRAPPER}} .progress-segment, {{WRAPPER}} .premium-progressbar-circle-inner',
1238	)
1239	);
1240
1241	$this->add_responsive_control(
1242	'premium_progressbar_container_margin',
1243	array(
1244	'label' => __( 'Margin', 'premium-addons-for-elementor' ),
1245	'type' => Controls_Manager::DIMENSIONS,
1246	'size_units' => array( 'px', 'em', '%' ),
1247	'selectors' => array(
1248	'{{WRAPPER}} .premium-progressbar-bar-wrap' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1249	),
1250	'condition' => array(
1251	'layout_type!' => array( 'half-circle', 'circle' ),
1252	),
1253	)
1254	);
1255
1256	$this->end_controls_section();
1257
1258	$this->start_controls_section(
1259	'premium_progressbar_labels_section',
1260	array(
1261	'label' => __( 'Labels', 'premium-addons-for-elementor' ),
1262	'tab' => Controls_Manager::TAB_STYLE,
1263	'condition' => array(
1264	'premium_progressbar_select_label' => 'left_right_labels',
1265	),
1266	)
1267	);
1268
1269	$this->add_control(
1270	'premium_progressbar_left_label_hint',
1271	array(
1272	'label' => __( 'Title', 'premium-addons-for-elementor' ),
1273	'type' => Controls_Manager::HEADING,
1274	)
1275	);
1276
1277	$this->add_control(
1278	'premium_progressbar_left_label_color',
1279	array(
1280	'label' => __( 'Color', 'premium-addons-for-elementor' ),
1281	'type' => Controls_Manager::COLOR,
1282	'global' => array(
1283	'default' => Global_Colors::COLOR_PRIMARY,
1284	),
1285	'selectors' => array(
1286	'{{WRAPPER}} .premium-progressbar-left-label' => 'color: {{VALUE}};',
1287	),
1288	)
1289	);
1290
1291	$this->add_group_control(
1292	Group_Control_Typography::get_type(),
1293	array(
1294	'name' => 'left_label_typography',
1295	'global' => array(
1296	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
1297	),
1298	'selector' => '{{WRAPPER}} .premium-progressbar-left-label',
1299	)
1300	);
1301
1302	$this->add_responsive_control(
1303	'premium_progressbar_left_label_margin',
1304	array(
1305	'label' => __( 'Margin', 'premium-addons-for-elementor' ),
1306	'type' => Controls_Manager::DIMENSIONS,
1307	'size_units' => array( 'px', 'em', '%' ),
1308	'selectors' => array(
1309	'{{WRAPPER}} .premium-progressbar-left-label' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1310	),
1311	)
1312	);
1313
1314	$this->add_control(
1315	'premium_progressbar_right_label_hint',
1316	array(
1317	'label' => __( 'Percentage', 'premium-addons-for-elementor' ),
1318	'type' => Controls_Manager::HEADING,
1319	'separator' => 'before',
1320	)
1321	);
1322
1323	$this->add_control(
1324	'premium_progressbar_right_label_color',
1325	array(
1326	'label' => __( 'Color', 'premium-addons-for-elementor' ),
1327	'type' => Controls_Manager::COLOR,
1328	'global' => array(
1329	'default' => Global_Colors::COLOR_PRIMARY,
1330	),
1331	'selectors' => array(
1332	'{{WRAPPER}} .premium-progressbar-right-label' => 'color: {{VALUE}};',
1333	),
1334	)
1335	);
1336
1337	$this->add_group_control(
1338	Group_Control_Typography::get_type(),
1339	array(
1340	'name' => 'right_label_typography',
1341	'global' => array(
1342	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
1343	),
1344	'selector' => '{{WRAPPER}} .premium-progressbar-right-label',
1345	)
1346	);
1347
1348	$this->add_responsive_control(
1349	'premium_progressbar_right_label_margin',
1350	array(
1351	'label' => __( 'Margin', 'premium-addons-for-elementor' ),
1352	'type' => Controls_Manager::DIMENSIONS,
1353	'size_units' => array( 'px', 'em', '%' ),
1354	'selectors' => array(
1355	'{{WRAPPER}} .premium-progressbar-right-label' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1356	),
1357	)
1358	);
1359
1360	$this->end_controls_section();
1361
1362	$this->start_controls_section(
1363	'icon_style',
1364	array(
1365	'label' => __( 'Icon', 'premium-addons-for-elementor' ),
1366	'tab' => Controls_Manager::TAB_STYLE,
1367	'condition' => array(
1368	'layout_type' => array( 'half-circle', 'circle' ),
1369	),
1370	)
1371	);
1372
1373	$this->add_control(
1374	'icon_color',
1375	array(
1376	'label' => __( 'Color', 'premium-addons-for-elementor' ),
1377	'type' => Controls_Manager::COLOR,
1378	'global' => array(
1379	'default' => Global_Colors::COLOR_PRIMARY,
1380	),
1381	'selectors' => array(
1382	'{{WRAPPER}} .premium-progressbar-circle-icon' => 'color: {{VALUE}}',
1383	'{{WRAPPER}} .premium-drawable-icon , {{WRAPPER}} svg:not([class="premium-"])' => 'fill: {{VALUE}};',
1384	),
1385	'condition' => array(
1386	'icon_type' => array( 'icon', 'svg' ),
1387	),
1388	)
1389	);
1390
1391	if ( $draw_icon ) {
1392	$this->add_control(
1393	'stroke_color',
1394	array(
1395	'label' => __( 'Stroke Color', 'premium-addons-for-elementor' ),
1396	'type' => Controls_Manager::COLOR,
1397	'global' => array(
1398	'default' => Global_Colors::COLOR_ACCENT,
1399	),
1400	'condition' => array(
1401	'icon_type' => array( 'icon', 'svg' ),
1402	),
1403	'selectors' => array(
1404	'{{WRAPPER}} .premium-drawable-icon , {{WRAPPER}} svg:not([class="premium-"])' => 'stroke: {{VALUE}};',
1405	),
1406	)
1407	);
1408	}
1409
1410	$this->add_control(
1411	'svg_color',
1412	array(
1413	'label' => __( 'After Draw Fill Color', 'premium-addons-for-elementor' ),
1414	'type' => Controls_Manager::COLOR,
1415	'global' => false,
1416	'separator' => 'after',
1417	'condition' => array(
1418	'icon_type' => array( 'icon', 'svg' ),
1419	'draw_svg' => 'yes',
1420	),
1421	)
1422	);
1423
1424	$this->add_control(
1425	'icon_background_color',
1426	array(
1427	'label' => __( 'Background Color', 'premium-addons-for-elementor' ),
1428	'type' => Controls_Manager::COLOR,
1429	'selectors' => array(
1430	'{{WRAPPER}} .premium-progressbar-circle-icon, {{WRAPPER}} .premium-progressbar-circle-content svg' => 'background-color: {{VALUE}};',
1431	),
1432	'condition' => array(
1433	'icon_type!' => 'image',
1434	),
1435	)
1436	);
1437
1438	$this->add_group_control(
1439	Group_Control_Border::get_type(),
1440	array(
1441	'name' => 'icon_border',
1442	'selector' => '{{WRAPPER}} .premium-progressbar-circle-icon, {{WRAPPER}} .premium-progressbar-circle-content svg',
1443	)
1444	);
1445
1446	$this->add_responsive_control(
1447	'icon_border_radius',
1448	array(
1449	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
1450	'type' => Controls_Manager::DIMENSIONS,
1451	'size_units' => array( 'px', 'em', '%' ),
1452	'selectors' => array(
1453	'{{WRAPPER}} .premium-progressbar-circle-icon, {{WRAPPER}} .premium-progressbar-circle-content svg' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}',
1454	),
1455	)
1456	);
1457
1458	$this->add_responsive_control(
1459	'icon_margin',
1460	array(
1461	'label' => __( 'Margin', 'premium-addons-for-elementor' ),
1462	'type' => Controls_Manager::DIMENSIONS,
1463	'size_units' => array( 'px', 'em', '%' ),
1464	'selectors' => array(
1465	'{{WRAPPER}} .premium-progressbar-circle-icon' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1466	),
1467	)
1468	);
1469
1470	$this->add_responsive_control(
1471	'icon_padding',
1472	array(
1473	'label' => __( 'Padding', 'premium-addons-for-elementor' ),
1474	'type' => Controls_Manager::DIMENSIONS,
1475	'size_units' => array( 'px', 'em', '%' ),
1476	'selectors' => array(
1477	'{{WRAPPER}} .premium-progressbar-circle-icon, {{WRAPPER}} .premium-progressbar-circle-content svg' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1478	),
1479	)
1480	);
1481
1482	$this->end_controls_section();
1483
1484	$this->start_controls_section(
1485	'premium_progressbar_multiple_labels_section',
1486	array(
1487	'label' => __( 'Multiple Labels', 'premium-addons-for-elementor' ),
1488	'tab' => Controls_Manager::TAB_STYLE,
1489	'condition' => array(
1490	'premium_progressbar_select_label' => 'more_labels',
1491	'layout_type' => array( 'line', 'dots' ),
1492	),
1493	)
1494	);
1495
1496	$this->add_control(
1497	'premium_progressbar_multiple_label_color',
1498	array(
1499	'label' => __( 'Labels\' Color', 'premium-addons-for-elementor' ),
1500	'type' => Controls_Manager::COLOR,
1501	'global' => array(
1502	'default' => Global_Colors::COLOR_PRIMARY,
1503	),
1504	'selectors' => array(
1505	'{{WRAPPER}} .premium-progressbar-center-label' => 'color: {{VALUE}};',
1506	),
1507	)
1508	);
1509
1510	$this->add_group_control(
1511	Group_Control_Typography::get_type(),
1512	array(
1513	'label' => __( 'Labels\' Typography', 'premium-addons-for-elementor' ),
1514	'name' => 'more_label_typography',
1515	'global' => array(
1516	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
1517	),
1518	'selector' => '{{WRAPPER}} .premium-progressbar-center-label',
1519	)
1520	);
1521
1522	$this->add_control(
1523	'premium_progressbar_value_label_color',
1524	array(
1525	'label' => __( 'Percentage Color', 'premium-addons-for-elementor' ),
1526	'type' => Controls_Manager::COLOR,
1527	'global' => array(
1528	'default' => Global_Colors::COLOR_PRIMARY,
1529	),
1530	'condition' => array(
1531	'premium_progress_bar_space_percentage_switcher' => 'yes',
1532	),
1533	'selectors' => array(
1534	'{{WRAPPER}} .premium-progressbar-percentage' => 'color: {{VALUE}};',
1535	),
1536	)
1537	);
1538
1539	$this->add_group_control(
1540	Group_Control_Typography::get_type(),
1541	array(
1542	'label' => __( 'Percentage Typography', 'premium-addons-for-elementor' ),
1543	'name' => 'percentage_typography',
1544	'condition' => array(
1545	'premium_progress_bar_space_percentage_switcher' => 'yes',
1546	),
1547	'global' => array(
1548	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
1549	),
1550	'selector' => '{{WRAPPER}} .premium-progressbar-percentage',
1551	)
1552	);
1553
1554	$this->end_controls_section();
1555
1556	$this->start_controls_section(
1557	'premium_progressbar_multiple_labels_arrow_section',
1558	array(
1559	'label' => __( 'Arrow', 'premium-addons-for-elementor' ),
1560	'tab' => Controls_Manager::TAB_STYLE,
1561	'condition' => array(
1562	'premium_progressbar_select_label' => 'more_labels',
1563	'premium_progressbar_select_label_icon' => 'arrow',
1564	'layout_type' => array( 'line', 'dots' ),
1565	),
1566	)
1567	);
1568
1569	$this->add_control(
1570	'premium_progressbar_arrow_color',
1571	array(
1572	'label' => __( 'Color', 'premium-addons-for-elementor' ),
1573	'type' => Controls_Manager::COLOR,
1574	'global' => array(
1575	'default' => Global_Colors::COLOR_PRIMARY,
1576	),
1577	'condition' => array(
1578	'premium_progressbar_select_label_icon' => 'arrow',
1579	),
1580	'selectors' => array(
1581	'{{WRAPPER}} .premium-progressbar-arrow' => 'color: {{VALUE}}',
1582	),
1583	)
1584	);
1585
1586	$this->add_responsive_control(
1587	'premium_arrow_size',
1588	array(
1589	'label' => __( 'Size', 'premium-addons-for-elementor' ),
1590	'type' => Controls_Manager::SLIDER,
1591	'size_units' => array( 'px', 'em' ),
1592	'condition' => array(
1593	'premium_progressbar_select_label_icon' => 'arrow',
1594	),
1595	'selectors' => array(
1596	'{{WRAPPER}} .premium-progressbar-arrow' => 'border-width: {{SIZE}}{{UNIT}};',
1597	),
1598	)
1599	);
1600
1601	$this->end_controls_section();
1602
1603	$this->start_controls_section(
1604	'premium_progressbar_multiple_labels_pin_section',
1605	array(
1606	'label' => __( 'Indicator', 'premium-addons-for-elementor' ),
1607	'tab' => Controls_Manager::TAB_STYLE,
1608	'condition' => array(
1609	'premium_progressbar_select_label' => 'more_labels',
1610	'premium_progressbar_select_label_icon' => 'line_pin',
1611	'layout_type' => array( 'line', 'dots' ),
1612	),
1613	)
1614	);
1615
1616	$this->add_control(
1617	'premium_progressbar_line_pin_color',
1618	array(
1619	'label' => __( 'Color', 'premium-addons-for-elementor' ),
1620	'type' => Controls_Manager::COLOR,
1621	'global' => array(
1622	'default' => Global_Colors::COLOR_SECONDARY,
1623	),
1624	'condition' => array(
1625	'premium_progressbar_select_label_icon' => 'line_pin',
1626	),
1627	'selectors' => array(
1628	'{{WRAPPER}} .premium-progressbar-pin' => 'border-color: {{VALUE}};',
1629	),
1630	)
1631	);
1632
1633	$this->add_responsive_control(
1634	'premium_pin_size',
1635	array(
1636	'label' => __( 'Size', 'premium-addons-for-elementor' ),
1637	'type' => Controls_Manager::SLIDER,
1638	'size_units' => array( 'px', 'em' ),
1639	'condition' => array(
1640	'premium_progressbar_select_label_icon' => 'line_pin',
1641	),
1642	'selectors' => array(
1643	'{{WRAPPER}} .premium-progressbar-pin' => 'border-left-width: {{SIZE}}{{UNIT}};',
1644	),
1645	)
1646	);
1647
1648	$this->add_responsive_control(
1649	'premium_pin_height',
1650	array(
1651	'label' => __( 'Height', 'premium-addons-for-elementor' ),
1652	'type' => Controls_Manager::SLIDER,
1653	'size_units' => array( 'px', 'em' ),
1654	'condition' => array(
1655	'premium_progressbar_select_label_icon' => 'line_pin',
1656	),
1657	'selectors' => array(
1658	'{{WRAPPER}} .premium-progressbar-pin' => 'height: {{SIZE}}{{UNIT}};',
1659	),
1660	)
1661	);
1662
1663	$this->end_controls_section();
1664
1665	$this->start_controls_section(
1666	'prefix_suffix_style',
1667	array(
1668	'label' => __( 'Prefix & Suffix', 'premium-addons-for-elementor' ),
1669	'tab' => Controls_Manager::TAB_STYLE,
1670	'condition' => array(
1671	'layout_type' => 'half-circle',
1672	),
1673	)
1674	);
1675
1676	$this->add_responsive_control(
1677	'labels_top_spacing',
1678	array(
1679	'label' => __( 'Top Spacing', 'premium-addons-for-elementor' ),
1680	'type' => Controls_Manager::SLIDER,
1681	'range' => array(
1682	'px' => array(
1683	'min' => 1,
1684	'max' => 300,
1685	),
1686	),
1687	'selectors' => array(
1688	'{{WRAPPER}} .premium-progressbar-hf-labels' => 'margin-top: {{SIZE}}px;',
1689	),
1690	)
1691	);
1692
1693	$this->add_control(
1694	'prefix_title',
1695	array(
1696	'label' => __( 'Prefix', 'premium-addons-for-elementor' ),
1697	'type' => Controls_Manager::HEADING,
1698	)
1699	);
1700
1701	$this->add_control(
1702	'prefix_label_color',
1703	array(
1704	'label' => __( 'Color', 'premium-addons-for-elementor' ),
1705	'type' => Controls_Manager::COLOR,
1706	'global' => array(
1707	'default' => Global_Colors::COLOR_PRIMARY,
1708	),
1709	'selectors' => array(
1710	'{{WRAPPER}} .premium-progressbar-hf-label-left' => 'color: {{VALUE}};',
1711	),
1712	)
1713	);
1714
1715	$this->add_group_control(
1716	Group_Control_Typography::get_type(),
1717	array(
1718	'name' => 'prefix_label_typo',
1719	'global' => array(
1720	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
1721	),
1722	'selector' => '{{WRAPPER}} .premium-progressbar-hf-label-left',
1723	)
1724	);
1725
1726	$pfx_direction = is_rtl() ? 'right' : 'left';
1727	$sfx_direction = is_rtl() ? 'left' : 'right';
1728
1729	$this->add_responsive_control(
1730	'prefix_spacing',
1731	array(
1732	'label' => __( 'Spacing', 'premium-addons-for-elementor' ),
1733	'type' => Controls_Manager::SLIDER,
1734	'selectors' => array(
1735	'{{WRAPPER}} .premium-progressbar-hf-label-left' => 'margin-' . $pfx_direction . ': {{SIZE}}px;',
1736	),
1737	)
1738	);
1739
1740	$this->add_control(
1741	'suffix_title',
1742	array(
1743	'label' => __( 'Suffix', 'premium-addons-for-elementor' ),
1744	'type' => Controls_Manager::HEADING,
1745	)
1746	);
1747
1748	$this->add_control(
1749	'suffix_label_color',
1750	array(
1751	'label' => __( 'Color', 'premium-addons-for-elementor' ),
1752	'type' => Controls_Manager::COLOR,
1753	'separator' => 'before',
1754	'global' => array(
1755	'default' => Global_Colors::COLOR_PRIMARY,
1756	),
1757	'selectors' => array(
1758	'{{WRAPPER}} .premium-progressbar-hf-label-right' => 'color: {{VALUE}};',
1759	),
1760	)
1761	);
1762
1763	$this->add_group_control(
1764	Group_Control_Typography::get_type(),
1765	array(
1766	'name' => 'suffix_label_typo',
1767	'global' => array(
1768	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
1769	),
1770	'selector' => '{{WRAPPER}} .premium-progressbar-hf-label-right',
1771	)
1772	);
1773
1774	$this->add_responsive_control(
1775	'suffix_spacing',
1776	array(
1777	'label' => __( 'Spacing', 'premium-addons-for-elementor' ),
1778	'type' => Controls_Manager::SLIDER,
1779	'selectors' => array(
1780	'{{WRAPPER}} .premium-progressbar-hf-label-right' => 'margin-' . $sfx_direction . ': {{SIZE}}px;',
1781	),
1782	)
1783	);
1784
1785	$this->end_controls_section();
1786	}
1787
1788	/**
1789	* Render Progress Bar widget output on the frontend.
1790	*
1791	* Written in PHP and used to generate the final HTML.
1792	*
1793	* @since 1.0.0
1794	* @access protected
1795	*/
1796	protected function render() {
1797
1798	$settings = $this->get_settings_for_display();
1799
1800	$this->add_inline_editing_attributes( 'premium_progressbar_left_label' );
1801	$this->add_render_attribute( 'premium_progressbar_left_label', 'class', 'premium-progressbar-left-label' );
1802
1803	$this->add_inline_editing_attributes( 'premium_progressbar_right_label' );
1804	$this->add_render_attribute( 'premium_progressbar_right_label', 'class', 'premium-progressbar-right-label' );
1805
1806	$raw_value = isset( $settings['premium_progressbar_progress_percentage']['size'] ) ? $settings['premium_progressbar_progress_percentage']['size'] : $settings['premium_progressbar_progress_percentage'];
1807
1808	$max_raw = $settings['premium_progressbar_max_value'];
1809	$display_format = $settings['premium_progressbar_display_format'];
1810
1811	if ( $max_raw ) {
1812	$length = min( 100, ( $raw_value / $max_raw ) * 100 );
1813	} else {
1814	$length = $raw_value;
1815	}
1816
1817	$style = $settings['premium_progressbar_progress_style'];
1818	$type = $settings['layout_type'];
1819
1820	$progressbar_settings = array(
1821	'progress_length' => $length,
1822	'speed' => ! empty( $settings['premium_progressbar_speed'] ) ? $settings['premium_progressbar_speed'] : 1000,
1823	'type' => $type,
1824	'mScroll' => $settings['magic_scroll'],
1825	'maxVal' => $max_raw,
1826	'displayFormat' => $display_format,
1827	);
1828
1829	if ( 'dots' === $type ) {
1830	$progressbar_settings['dot'] = $settings['dot_size']['size'];
1831	$progressbar_settings['spacing'] = $settings['dot_spacing']['size'];
1832	}
1833
1834	$this->add_render_attribute( 'progressbar', 'class', 'premium-progressbar-container' );
1835
1836	if ( 'stripped' === $style ) {
1837	$this->add_render_attribute( 'progressbar', 'class', 'premium-progressbar-striped' );
1838	} elseif ( 'gradient' === $style ) {
1839	$this->add_render_attribute( 'progressbar', 'class', 'premium-progressbar-gradient' );
1840	$progressbar_settings['gradient'] = $settings['gradient_colors'];
1841	}
1842
1843	if ( 'yes' === $settings['premium_progressbar_progress_animation'] ) {
1844	$this->add_render_attribute( 'progressbar', 'class', 'premium-progressbar-active' );
1845	}
1846
1847	$this->add_render_attribute( 'progressbar', 'data-settings', wp_json_encode( $progressbar_settings ) );
1848
1849	// Accessibility: expose progressbar semantics on the container for every layout.
1850	$progressbar_aria_label = ( 'more_labels' !== $settings['premium_progressbar_select_label'] && '' !== trim( $settings['premium_progressbar_left_label'] ) )
1851	? wp_strip_all_tags( $settings['premium_progressbar_left_label'] )
1852	: __( 'Progress', 'premium-addons-for-elementor' );
1853
1854	$this->add_render_attribute(
1855	'progressbar',
1856	array(
1857	'role' => 'progressbar',
1858	'aria-valuemin' => '0',
1859	'aria-valuemax' => $max_raw ? $max_raw : '100',
1860	'aria-valuenow' => $max_raw ? $raw_value : $length,
1861	'aria-label' => $progressbar_aria_label,
1862	)
1863	);
1864
1865	if ( 'circle' !== $type && 'half-circle' !== $type ) {
1866	$this->add_render_attribute( 'wrap', 'class', 'premium-progressbar-bar-wrap' );
1867
1868	if ( 'dots' === $type ) {
1869	$this->add_render_attribute( 'wrap', 'class', 'premium-progressbar-dots' );
1870	}
1871	} else {
1872
1873	$class = 'half-circle' === $type ? '-hf' : '';
1874
1875	$this->add_render_attribute( 'wrap', 'class', 'premium-progressbar' . $class . '-circle-wrap' );
1876
1877	}
1878
1879	if ( 'yes' === $settings['draw_svg'] ) {
1880
1881	$this->add_render_attribute(
1882	'progressbar',
1883	'class',
1884	array(
1885	'elementor-invisible',
1886	'premium-drawer-hover',
1887	)
1888	);
1889	}
1890
1891	?>
1892
1893	<div <?php $this->print_render_attribute_string( 'progressbar' ); ?>>
1894
1895	<?php if ( 'left_right_labels' === $settings['premium_progressbar_select_label'] ) : ?>
1896	<p <?php $this->print_render_attribute_string( 'premium_progressbar_left_label' ); ?>>
1897	<?php echo wp_kses_post( $settings['premium_progressbar_left_label'] ); ?>
1898	</p>
1899	<p <?php $this->print_render_attribute_string( 'premium_progressbar_right_label' ); ?>>
1900	<?php echo wp_kses_post( 'yes' !== $settings['magic_scroll'] ? $settings['premium_progressbar_right_label'] : '0%' ); ?>
1901	</p>
1902	<?php endif; ?>
1903
1904	<?php if ( 'more_labels' === $settings['premium_progressbar_select_label'] ) : ?>
1905	<div class="premium-progressbar-container-label" style="position:relative;">
1906	<?php
1907	$direction = is_rtl() ? 'right' : 'left';
1908
1909	foreach ( $settings['premium_progressbar_multiple_label'] as $item ) {
1910
1911	$item_number = $item['number'];
1912
1913	if ( $max_raw ) {
1914	$label_pos = min( 100, ( $item_number / $max_raw ) * 100 );
1915	switch ( $display_format ) {
1916	case 'percentage':
1917	$label_value = round( $label_pos ) . '%';
1918	break;
1919	case 'value_max':
1920	$label_value = $item_number . '/' . $max_raw;
1921	break;
1922	default:
1923	$label_value = $item_number;
1924	break;
1925	}
1926	} else {
1927	$label_pos = $item_number;
1928	$label_value = $item_number . '%';
1929	}
1930
1931	$align = $this->get_settings( 'premium_progressbar_more_labels_align' );
1932	$icon = $settings['premium_progressbar_select_label_icon'];
1933	$has_perc = 'yes' === $settings['premium_progress_bar_space_percentage_switcher'];
1934
1935	// translateX offset applied to the center label, tuned per alignment + indicator.
1936	if ( 'center' === $align ) {
1937	$translate = '-45%';
1938	} elseif ( 'left' === $align ) {
1939	$translate = 'arrow' === $icon ? '-10%' : '-2%';
1940	} elseif ( 'arrow' === $icon ) {
1941	$translate = $has_perc ? '-82%' : '-71%';
1942	} elseif ( 'line_pin' === $icon ) {
1943	$translate = $has_perc ? '-95%' : '-97%';
1944	} else {
1945	$translate = '-96%';
1946	}
1947
1948	$position = $direction . ':' . $label_pos . '%;';
1949	?>
1950	<div class="premium-progressbar-multiple-label" style="<?php echo esc_attr( $position ); ?>">
1951	<p class="premium-progressbar-center-label" style="transform:translateX(<?php echo esc_attr( $translate ); ?>);">
1952	<?php
1953	echo esc_html( $item['text'] );
1954	if ( $has_perc ) :
1955	?>
1956	<span class="premium-progressbar-percentage"><?php echo esc_html( $label_value ); ?></span>
1957	<?php
1958	endif;
1959	?>
1960	</p>
1961	<?php if ( 'arrow' === $icon ) : ?>
1962	<p class="premium-progressbar-arrow" style="<?php echo esc_attr( $position ); ?> transform:translateX(50%);"></p>
1963	<?php elseif ( 'line_pin' === $icon ) : ?>
1964	<p class="premium-progressbar-pin" style="<?php echo esc_attr( $position ); ?> transform:translateX(50%);"></p>
1965	<?php endif; ?>
1966	</div>
1967	<?php
1968	}
1969	?>
1970	</div>
1971	<?php endif; ?>
1972
1973	<?php if ( 'circle' !== $type ) : ?>
1974	<div class="clearfix"></div>
1975	<?php endif; ?>
1976
1977	<div <?php $this->print_render_attribute_string( 'wrap' ); ?>>
1978	<?php if ( 'line' === $type ) : ?>
1979	<div class="premium-progressbar-bar"></div>
1980	<?php elseif ( 'circle' === $type ) : ?>
1981
1982	<div class="premium-progressbar-circle-base"></div>
1983	<div class="premium-progressbar-circle">
1984	<div class="premium-progressbar-circle-left"></div>
1985	<div class="premium-progressbar-circle-right"></div>
1986	</div>
1987
1988	<?php $this->render_progressbar_content(); ?>
1989
1990	<?php elseif ( 'half-circle' === $type ) : ?>
1991
1992	<div class="premium-progressbar-hf-container">
1993	<div class="premium-progressbar-hf-circle">
1994	<div class="premium-progressbar-hf-circle-progress"></div>
1995	</div>
1996
1997	<div class="premium-progressbar-circle-inner"></div>
1998	</div>
1999
2000	<?php $this->render_progressbar_content(); ?>
2001
2002	<?php endif; ?>
2003	</div>
2004
2005	<?php if ( 'half-circle' === $type ) : ?>
2006	<div class="premium-progressbar-hf-labels">
2007	<span class="premium-progressbar-hf-label-left">
2008	<?php echo wp_kses_post( $settings['half_prefix_label'] ); ?>
2009	</span>
2010	<span class="premium-progressbar-hf-label-right">
2011	<?php echo wp_kses_post( $settings['half_suffix_label'] ); ?>
2012	</span>
2013	</div>
2014	<?php endif; ?>
2015
2016	</div>
2017
2018	<?php
2019	}
2020
2021	/**
2022	* Get Progressbar Content
2023	*
2024	* @since 4.9.13
2025	* @access private
2026	*/
2027	private function render_progressbar_content() {
2028
2029	$settings = $this->get_settings_for_display();
2030
2031	$icon_type = $settings['icon_type'];
2032
2033	if ( 'icon' === $icon_type \|\| 'svg' === $icon_type ) {
2034
2035	$this->add_render_attribute( 'icon', 'class', 'premium-drawable-icon' );
2036
2037	// Accessibility: the center icon/SVG is decorative — the value is exposed on the container.
2038	$this->add_render_attribute( 'icon', 'aria-hidden', 'true' );
2039
2040	if ( ( 'yes' === $settings['draw_svg'] && 'icon' === $icon_type ) \|\| 'svg' === $icon_type ) {
2041	$this->add_render_attribute( 'icon', 'class', 'premium-progressbar-circle-icon' );
2042	}
2043
2044	if ( 'yes' === $settings['draw_svg'] ) {
2045
2046	$this->add_render_attribute(
2047	'icon',
2048	array(
2049	'class' => 'premium-svg-drawer',
2050	'data-svg-reverse' => $settings['lottie_reverse'],
2051	'data-svg-loop' => $settings['lottie_loop'],
2052	'data-svg-sync' => $settings['svg_sync'],
2053	'data-svg-hover' => $settings['svg_hover'],
2054	'data-svg-fill' => $settings['svg_color'],
2055	'data-svg-frames' => $settings['frames'],
2056	'data-svg-yoyo' => $settings['svg_yoyo'],
2057	'data-svg-point' => $settings['lottie_reverse'] ? $settings['end_point']['size'] : $settings['start_point']['size'],
2058	)
2059	);
2060
2061	} else {
2062	$this->add_render_attribute( 'icon', 'class', 'premium-svg-nodraw' );
2063	}
2064	} elseif ( 'animation' === $icon_type ) {
2065
2066	$lottie_url = 'file' === $settings['lottie_source'] ? $settings['lottie_file']['url'] : $settings['lottie_url'];
2067
2068	$this->add_render_attribute(
2069	'progress_lottie',
2070	array(
2071	'class' => array(
2072	'premium-progressbar-circle-icon',
2073	'premium-lottie-animation',
2074	),
2075	'data-lottie-url' => $lottie_url,
2076	'data-lottie-loop' => $settings['lottie_loop'],
2077	'data-lottie-reverse' => $settings['lottie_reverse'],
2078	'aria-hidden' => 'true',
2079	)
2080	);
2081	}
2082
2083	?>
2084
2085	<div class="premium-progressbar-circle-content">
2086
2087	<?php
2088	if ( 'icon' === $icon_type ) :
2089	if ( 'yes' !== $settings['draw_svg'] ) :
2090	Icons_Manager::render_icon(
2091	$settings['icon_select'],
2092	array(
2093	'class' => array( 'premium-progressbar-circle-icon', 'premium-svg-nodraw', 'premium-drawable-icon' ),
2094	'aria-hidden' => 'true',
2095	)
2096	);
2097	else :
2098	echo Helper_Functions::get_svg_by_icon( $settings['icon_select'], $this->get_render_attribute_string( 'icon' ) ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- get_svg_by_icon() returns sanitized inline SVG/icon markup.
2099	endif;
2100
2101	elseif ( 'svg' === $icon_type ) :
2102	?>
2103	<div <?php $this->print_render_attribute_string( 'icon' ); ?>>
2104	<?php echo Helper_Functions::sanitize_svg( $this->get_settings_for_display( 'custom_svg' ) ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- sanitize_svg() passes through wp_kses with a strict SVG allowlist. ?>
2105	</div>
2106	<?php
2107	elseif ( 'image' === $icon_type ) :
2108	?>
2109	<img class="premium-progressbar-circle-icon" src="<?php echo esc_url( $settings['image_upload']['url'] ); ?>" alt="" aria-hidden="true">
2110	<?php else : ?>
2111	<div <?php $this->print_render_attribute_string( 'progress_lottie' ); ?>></div>
2112	<?php endif; ?>
2113
2114	<p <?php $this->print_render_attribute_string( 'premium_progressbar_left_label' ); ?>>
2115	<?php echo wp_kses_post( $settings['premium_progressbar_left_label'] ); ?>
2116	</p>
2117	<?php if ( 'yes' === $settings['show_percentage_value'] ) : ?>
2118	<p <?php $this->print_render_attribute_string( 'premium_progressbar_right_label' ); ?>>0%</p>
2119	<?php endif; ?>
2120	</div>
2121
2122	<?php
2123	}
2124	}
2125