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

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

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

premium-progressbar.php

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