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

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

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

premium-progressbar.php

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