premium-image-button.php — Premium Addons for Elementor – Powerful Elementor Templates & Widgets 4.10.30

premium-addons-for-elementor / widgets / premium-image-button.php

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

premium-image-button.php

2119 lines

1	<?php
2	/**
3	* Premium Image Button.
4	*/
5
6	namespace PremiumAddons\Widgets;
7
8	// Elementor Classes.
9	use Elementor\Icons_Manager;
10	use Elementor\Widget_Base;
11	use Elementor\Controls_Manager;
12	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
13	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
14	use Elementor\Group_Control_Border;
15	use Elementor\Group_Control_Typography;
16	use Elementor\Group_Control_Text_Shadow;
17	use Elementor\Group_Control_Box_Shadow;
18	use Elementor\Group_Control_Background;
19
20	// PremiumAddons Classes.
21	use PremiumAddons\Admin\Includes\Admin_Helper;
22	use PremiumAddons\Includes\Helper_Functions;
23	use PremiumAddons\Includes\Premium_Template_Tags;
24
25	if ( ! defined( 'ABSPATH' ) ) {
26	exit; // If this file is called directly, abort.
27	}
28
29	/**
30	* Class Premium_Image_Button
31	*/
32	class Premium_Image_Button extends Widget_Base {
33
34	/**
35	* Check Icon Draw Option.
36	*
37	* @since 4.9.26
38	* @access public
39	*/
40	public function check_icon_draw() {
41	$is_enabled = Admin_Helper::check_svg_draw( 'premium-image-button' );
42	return $is_enabled;
43	}
44
45	/**
46	* Template Instance
47	*
48	* @var template_instance
49	*/
50	protected $template_instance;
51
52	/**
53	* Get Elementor Helper Instance.
54	*
55	* @since 1.0.0
56	* @access public
57	*/
58	public function getTemplateInstance() {
59	return $this->template_instance = Premium_Template_Tags::getInstance();
60	}
61
62	/**
63	* Retrieve Widget Name.
64	*
65	* @since 1.0.0
66	* @access public
67	*/
68	public function get_name() {
69	return 'premium-addon-image-button';
70	}
71
72	/**
73	* Retrieve Widget Title.
74	*
75	* @since 1.0.0
76	* @access public
77	*/
78	public function get_title() {
79	return __( 'Image Button', 'premium-addons-for-elementor' );
80	}
81
82	/**
83	* Retrieve Widget Dependent CSS.
84	*
85	* @since 1.0.0
86	* @access public
87	*
88	* @return array CSS style handles.
89	*/
90	public function get_style_depends() {
91	return array(
92	'premium-addons',
93	);
94	}
95
96	/**
97	* Retrieve Widget Dependent JS.
98	*
99	* @since 1.0.0
100	* @access public
101	*
102	* @return array JS script handles.
103	*/
104	public function get_script_depends() {
105
106	$draw_scripts = $this->check_icon_draw() ? array(
107	'pa-fontawesome-all',
108	'pa-tweenmax',
109	'pa-motionpath',
110	) : array();
111
112	return array_merge(
113	$draw_scripts,
114	array(
115	'lottie-js',
116	'premium-addons',
117	)
118	);
119	}
120
121	/**
122	* Retrieve Widget Icon.
123	*
124	* @since 1.0.0
125	* @access public
126	*
127	* @return string widget icon.
128	*/
129	public function get_icon() {
130	return 'pa-image-button';
131	}
132
133	/**
134	* Retrieve Widget Keywords.
135	*
136	* @since 1.0.0
137	* @access public
138	*
139	* @return string Widget keywords.
140	*/
141	public function get_keywords() {
142	return array( 'pa', 'premium', 'cta', 'call', 'link', 'btn' );
143	}
144
145	/**
146	* Retrieve Widget Categories.
147	*
148	* @since 1.5.1
149	* @access public
150	*
151	* @return array Widget categories.
152	*/
153	public function get_categories() {
154	return array( 'premium-elements' );
155	}
156
157	/**
158	* Retrieve Widget Support URL.
159	*
160	* @access public
161	*
162	* @return string support URL.
163	*/
164	public function get_custom_help_url() {
165	return 'https://premiumaddons.com/support/';
166	}
167
168	/**
169	* Register Image Button controls.
170	*
171	* @since 1.0.0
172	* @access protected
173	*/
174	protected function register_controls() { // phpcs:ignore PSR2.Methods.MethodDeclaration.Underscore
175
176	$draw_icon = $this->check_icon_draw();
177
178	$this->start_controls_section(
179	'premium_image_button_general_section',
180	array(
181	'label' => __( 'Button', 'premium-addons-for-elementor' ),
182	)
183	);
184
185	$this->add_control(
186	'premium_image_button_text',
187	array(
188	'label' => __( 'Text', 'premium-addons-for-elementor' ),
189	'type' => Controls_Manager::TEXT,
190	'dynamic' => array( 'active' => true ),
191	'default' => __( 'Premium Addons', 'premium-addons-for-elementor' ),
192	'label_block' => true,
193	)
194	);
195
196	$this->add_control(
197	'premium_image_button_link_selection',
198	array(
199	'label' => __( 'Link Type', 'premium-addons-for-elementor' ),
200	'type' => Controls_Manager::SELECT,
201	'options' => array(
202	'url' => __( 'URL', 'premium-addons-for-elementor' ),
203	'link' => __( 'Existing Page', 'premium-addons-for-elementor' ),
204	),
205	'default' => 'url',
206	'label_block' => true,
207	)
208	);
209
210	$this->add_control(
211	'premium_image_button_link',
212	array(
213	'label' => __( 'Link', 'premium-addons-for-elementor' ),
214	'type' => Controls_Manager::URL,
215	'dynamic' => array( 'active' => true ),
216	'default' => array(
217	'url' => '#',
218	),
219	'placeholder' => 'https://premiumaddons.com/',
220	'label_block' => true,
221	'condition' => array(
222	'premium_image_button_link_selection' => 'url',
223	),
224	)
225	);
226
227	$this->add_control(
228	'premium_image_button_existing_link',
229	array(
230	'label' => __( 'Existing Page', 'premium-addons-for-elementor' ),
231	'type' => Controls_Manager::SELECT2,
232	'options' => $this->getTemplateInstance()->get_all_posts(),
233	'condition' => array(
234	'premium_image_button_link_selection' => 'link',
235	),
236	'multiple' => false,
237	'label_block' => true,
238	)
239	);
240
241	$this->add_control(
242	'premium_image_button_hover_effect',
243	array(
244	'label' => __( 'Hover Effect', 'premium-addons-for-elementor' ),
245	'type' => Controls_Manager::SELECT,
246	'default' => 'none',
247	'options' => array(
248	'none' => __( 'None', 'premium-addons-for-elementor' ),
249	'style1' => __( 'Background Slide', 'premium-addons-for-elementor' ),
250	'style3' => __( 'Diagonal Slide', 'premium-addons-for-elementor' ),
251	'style4' => __( 'Icon Slide', 'premium-addons-for-elementor' ),
252	'style5' => __( 'Overlap', 'premium-addons-for-elementor' ),
253	'style6' => __( 'Grow', 'premium-addons-for-elementor' ),
254	'style8' => __( 'Animated Underline', 'premium-addons-for-elementor' ),
255	),
256	'separator' => 'before',
257	'label_block' => true,
258	)
259	);
260
261	$this->add_control(
262	'underline_style',
263	array(
264	'label' => __( 'Underline Style', 'premium-addons-for-elementor' ),
265	'type' => Controls_Manager::SELECT,
266	'default' => 'line1',
267	'options' => array(
268	'line1' => __( 'Style 1', 'premium-addons-for-elementor' ),
269	'line2' => __( 'Style 2', 'premium-addons-for-elementor' ),
270	'line3' => __( 'Style 3', 'premium-addons-for-elementor' ),
271	'line4' => __( 'Style 4', 'premium-addons-for-elementor' ),
272	'line5' => __( 'Style 5', 'premium-addons-for-elementor' ),
273	'line6' => __( 'Style 6', 'premium-addons-for-elementor' ),
274	'line7' => __( 'Style 7', 'premium-addons-for-elementor' ),
275	),
276	'condition' => array(
277	'premium_image_button_hover_effect' => 'style8',
278	),
279	'label_block' => true,
280	)
281	);
282
283	$this->add_responsive_control(
284	'line_width',
285	array(
286	'label' => __( 'Line Width (%)', 'premium-addons-for-elementor' ),
287	'type' => Controls_Manager::SLIDER,
288	'condition' => array(
289	'premium_image_button_hover_effect' => 'style8',
290	'underline_style' => array( 'line1', 'line3', 'line5' ),
291	),
292	'default' => array(
293	'size' => 100,
294	),
295	'selectors' => array(
296	'{{WRAPPER}} .premium-btn-svg, {{WRAPPER}} .premium-button-line5::before, {{WRAPPER}} .premium-button-line5::after' => 'width: {{SIZE}}%',
297	),
298	)
299	);
300
301	$this->add_responsive_control(
302	'line_height',
303	array(
304	'label' => __( 'Line Height (PX)', 'premium-addons-for-elementor' ),
305	'type' => Controls_Manager::SLIDER,
306	'condition' => array(
307	'premium_image_button_hover_effect' => 'style8',
308	'underline_style!' => array( 'line1', 'line3', 'line4' ),
309	),
310	'selectors' => array(
311	'{{WRAPPER}} .premium-button-line2::before, {{WRAPPER}} .premium-button-line5::before, {{WRAPPER}} .premium-button-line5::after, {{WRAPPER}} .premium-button-line6::before, {{WRAPPER}} .premium-button-line7::before' => 'height: {{SIZE}}px',
312	),
313	)
314	);
315
316	$this->add_responsive_control(
317	'line_h_position',
318	array(
319	'label' => __( 'Line Horizontal Position (%)', 'premium-addons-for-elementor' ),
320	'type' => Controls_Manager::SLIDER,
321	'condition' => array(
322	'premium_image_button_hover_effect' => 'style8',
323	'underline_style' => array( 'line3', 'line5' ),
324	),
325	'selectors' => array(
326	'{{WRAPPER}} .premium-btn-line-wrap, {{WRAPPER}} .premium-button-line5::before, {{WRAPPER}} .premium-button-line5::after' => 'left: {{SIZE}}%',
327	),
328	)
329	);
330
331	$this->add_responsive_control(
332	'line_v_position',
333	array(
334	'label' => __( 'Line Vertical Position (%)', 'premium-addons-for-elementor' ),
335	'type' => Controls_Manager::SLIDER,
336	'condition' => array(
337	'premium_image_button_hover_effect' => 'style8',
338	),
339	'selectors' => array(
340	'{{WRAPPER}} .premium-btn-line-wrap, {{WRAPPER}} .premium-button-line2::before, {{WRAPPER}} .premium-button-line5::before, {{WRAPPER}} .premium-button-line6::before, {{WRAPPER}} .premium-button-line7::before' => 'top: {{SIZE}}%',
341	'{{WRAPPER}} .premium-button-line5::after' => 'top: calc( ( {{SIZE}}% + 2px ) + {{line_height.SIZE}}px )',
342	),
343	)
344	);
345
346	$this->add_control(
347	'premium_image_button_style1_dir',
348	array(
349	'label' => __( 'Slide Direction', 'premium-addons-for-elementor' ),
350	'type' => Controls_Manager::SELECT,
351	'default' => 'bottom',
352	'options' => array(
353	'bottom' => __( 'Top to Bottom', 'premium-addons-for-elementor' ),
354	'top' => __( 'Bottom to Top', 'premium-addons-for-elementor' ),
355	'left' => __( 'Right to Left', 'premium-addons-for-elementor' ),
356	'right' => __( 'Left to Right', 'premium-addons-for-elementor' ),
357	),
358	'label_block' => true,
359	'condition' => array(
360	'premium_image_button_hover_effect' => 'style1',
361	),
362	)
363	);
364
365	$this->add_control(
366	'premium_image_button_style3_dir',
367	array(
368	'label' => __( 'Slide Direction', 'premium-addons-for-elementor' ),
369	'type' => Controls_Manager::SELECT,
370	'default' => 'bottom',
371	'options' => array(
372	'top' => __( 'Bottom Left to Top Right', 'premium-addons-for-elementor' ),
373	'bottom' => __( 'Top Right to Bottom Left', 'premium-addons-for-elementor' ),
374	'left' => __( 'Top Left to Bottom Right', 'premium-addons-for-elementor' ),
375	'right' => __( 'Bottom Right to Top Left', 'premium-addons-for-elementor' ),
376	),
377	'condition' => array(
378	'premium_image_button_hover_effect' => 'style3',
379	),
380	'label_block' => true,
381	)
382	);
383
384	$this->add_control(
385	'premium_image_button_style4_dir',
386	array(
387	'label' => __( 'Slide Direction', 'premium-addons-for-elementor' ),
388	'type' => Controls_Manager::SELECT,
389	'default' => 'bottom',
390	'options' => array(
391	'top' => __( 'Bottom to Top', 'premium-addons-for-elementor' ),
392	'bottom' => __( 'Top to Bottom', 'premium-addons-for-elementor' ),
393	'left' => __( 'Left to Right', 'premium-addons-for-elementor' ),
394	'right' => __( 'Right to Left', 'premium-addons-for-elementor' ),
395	),
396	'label_block' => true,
397	'condition' => array(
398	'premium_image_button_hover_effect' => 'style4',
399	),
400	)
401	);
402
403	$this->add_control(
404	'premium_image_button_style5_dir',
405	array(
406	'label' => __( 'Overlap Direction', 'premium-addons-for-elementor' ),
407	'type' => Controls_Manager::SELECT,
408	'default' => 'horizontal',
409	'options' => array(
410	'horizontal' => __( 'Horizontal', 'premium-addons-for-elementor' ),
411	'vertical' => __( 'Vertical', 'premium-addons-for-elementor' ),
412	),
413	'label_block' => true,
414	'condition' => array(
415	'premium_image_button_hover_effect' => 'style5',
416	),
417	)
418	);
419
420	$this->add_responsive_control(
421	'grow_size',
422	array(
423	'label' => __( 'Grow Layer Size', 'premium-addons-for-elementor' ),
424	'type' => Controls_Manager::SLIDER,
425	'range' => array(
426	'px' => array(
427	'min' => 0,
428	'max' => 500,
429	),
430	),
431	'condition' => array(
432	'premium_image_button_hover_effect' => 'style6',
433	'mouse_detect!' => 'yes',
434	),
435	'selectors' => array(
436	'{{WRAPPER}} .premium-image-button.premium-button-style6:before' => 'width: {{SIZE}}px; height: {{SIZE}}px',
437	),
438	)
439	);
440
441	$this->add_responsive_control(
442	'grow_speed',
443	array(
444	'label' => __( 'Grow Animation Speed (Sec)', 'premium-addons-for-elementor' ),
445	'type' => Controls_Manager::SLIDER,
446	'range' => array(
447	'px' => array(
448	'min' => 0,
449	'max' => 3,
450	'step' => 0.1,
451	),
452	),
453	'condition' => array(
454	'premium_image_button_hover_effect' => 'style6',
455	'mouse_detect!' => 'yes',
456	),
457	'selectors' => array(
458	'{{WRAPPER}} .premium-image-button.premium-button-style6:before' => 'transition-duration: {{SIZE}}s',
459	),
460	)
461	);
462
463	$this->add_control(
464	'mouse_detect',
465	array(
466	'label' => __( 'Detect Mouse Position', 'premium-addons-for-elementor' ),
467	'type' => Controls_Manager::SWITCHER,
468	'prefix_class' => 'premium-mouse-detect-',
469	'render_type' => 'template',
470	'separator' => 'after',
471	'condition' => array(
472	'premium_image_button_hover_effect' => 'style6',
473	),
474	)
475	);
476
477	$this->add_control(
478	'premium_image_button_icon_switcher',
479	array(
480	'label' => __( 'Icon', 'premium-addons-for-elementor' ),
481	'type' => Controls_Manager::SWITCHER,
482	'description' => __( 'Enable or disable button icon', 'premium-addons-for-elementor' ),
483	'condition' => array(
484	'premium_image_button_hover_effect!' => 'style4',
485	),
486	)
487	);
488
489	$common_conditions = array(
490	'premium_image_button_icon_switcher' => 'yes',
491	'premium_image_button_hover_effect!' => 'style4',
492	);
493
494	$this->add_control(
495	'icon_type',
496	array(
497	'label' => __( 'Icon Type', 'premium-addons-for-elementor' ),
498	'type' => Controls_Manager::SELECT,
499	'options' => array(
500	'icon' => __( 'Icon', 'premium-addons-for-elementor' ),
501	'animation' => __( 'Lottie Animation', 'premium-addons-for-elementor' ),
502	'svg' => __( 'SVG Code', 'premium-addons-for-elementor' ),
503	),
504	'default' => 'icon',
505	'label_block' => true,
506	'condition' => $common_conditions,
507	)
508	);
509
510	$this->add_control(
511	'premium_image_button_icon_selection_updated',
512	array(
513	'label' => __( 'Icon', 'premium-addons-for-elementor' ),
514	'type' => Controls_Manager::ICONS,
515	'fa4compatibility' => 'premium_image_button_icon_selection',
516	'default' => array(
517	'value' => 'fas fa-star',
518	'library' => 'fa-solid',
519	),
520	'condition' => array_merge(
521	$common_conditions,
522	array(
523	'icon_type' => 'icon',
524	)
525	),
526	'label_block' => true,
527	)
528	);
529
530	$this->add_control(
531	'custom_svg',
532	array(
533	'label' => __( 'SVG Code', 'premium-addons-for-elementor' ),
534	'type' => Controls_Manager::TEXTAREA,
535	'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>',
536	'condition' => array_merge(
537	$common_conditions,
538	array(
539	'icon_type' => 'svg',
540	)
541	),
542	)
543	);
544
545	$this->add_control(
546	'lottie_url',
547	array(
548	'label' => __( 'Animation JSON URL', 'premium-addons-for-elementor' ),
549	'type' => Controls_Manager::TEXT,
550	'dynamic' => array( 'active' => true ),
551	'description' => 'Get JSON code URL from <a href="https://lottiefiles.com/" target="_blank">here</a>',
552	'label_block' => true,
553	'condition' => array_merge(
554	$common_conditions,
555	array(
556	'icon_type' => 'animation',
557	)
558	),
559	)
560	);
561
562	$animation_conds = array(
563	'terms' => array(
564	array(
565	'name' => 'premium_image_button_icon_switcher',
566	'value' => 'yes',
567	),
568	array(
569	'name' => 'premium_image_button_hover_effect',
570	'operator' => '!==',
571	'value' => 'style4',
572	),
573	array(
574	'relation' => 'or',
575	'terms' => array(
576	array(
577	'name' => 'icon_type',
578	'value' => 'animation',
579	),
580	array(
581	'terms' => array(
582	array(
583	'relation' => 'or',
584	'terms' => array(
585	array(
586	'name' => 'icon_type',
587	'value' => 'icon',
588	),
589	array(
590	'name' => 'icon_type',
591	'value' => 'svg',
592	),
593	),
594	),
595	array(
596	'name' => 'draw_svg',
597	'value' => 'yes',
598	),
599	),
600	),
601	),
602	),
603	),
604	);
605
606	$this->add_control(
607	'draw_svg',
608	array(
609	'label' => __( 'Draw Icon', 'premium-addons-for-elementor' ),
610	'type' => Controls_Manager::SWITCHER,
611	'classes' => $draw_icon ? '' : 'editor-pa-control-disabled',
612	'condition' => array_merge(
613	$common_conditions,
614	array(
615	'icon_type' => array( 'icon', 'svg' ),
616	'premium_image_button_icon_selection_updated[library]!' => 'svg',
617	)
618	),
619	)
620	);
621
622	if ( $draw_icon ) {
623
624	$this->add_control(
625	'stroke_width',
626	array(
627	'label' => __( 'Path Thickness', 'premium-addons-for-elementor' ),
628	'type' => Controls_Manager::SLIDER,
629	'range' => array(
630	'px' => array(
631	'min' => 0,
632	'max' => 50,
633	'step' => 0.1,
634	),
635	),
636	'condition' => array_merge(
637	$common_conditions,
638	array(
639	'icon_type' => array( 'icon', 'svg' ),
640	)
641	),
642	'selectors' => array(
643	'{{WRAPPER}} .premium-image-button-text-icon-wrapper svg:not(.premium-btn-svg) *' => 'stroke-width: {{SIZE}}',
644	),
645	)
646	);
647
648	$this->add_control(
649	'svg_sync',
650	array(
651	'label' => __( 'Draw All Paths Together', 'premium-addons-for-elementor' ),
652	'type' => Controls_Manager::SWITCHER,
653	'condition' => array_merge(
654	$common_conditions,
655	array(
656	'icon_type' => array( 'icon', 'svg' ),
657	'draw_svg' => 'yes',
658	)
659	),
660	)
661	);
662
663	$this->add_control(
664	'frames',
665	array(
666	'label' => __( 'Speed', 'premium-addons-for-elementor' ),
667	'type' => Controls_Manager::NUMBER,
668	'description' => __( 'Larger value means longer animation duration.', 'premium-addons-for-elementor' ),
669	'default' => 5,
670	'min' => 1,
671	'max' => 100,
672	'condition' => array_merge(
673	$common_conditions,
674	array(
675	'icon_type' => array( 'icon', 'svg' ),
676	'draw_svg' => 'yes',
677	)
678	),
679	)
680	);
681	} else {
682
683	Helper_Functions::get_draw_svg_notice(
684	$this,
685	'button',
686	array_merge(
687	$common_conditions,
688	array(
689	'icon_type' => array( 'icon', 'svg' ),
690	'premium_image_button_icon_selection_updated[library]!' => 'svg',
691	)
692	)
693	);
694
695	}
696
697	$this->add_control(
698	'lottie_loop',
699	array(
700	'label' => __( 'Loop', 'premium-addons-for-elementor' ),
701	'type' => Controls_Manager::SWITCHER,
702	'return_value' => 'true',
703	'default' => 'true',
704	'conditions' => $animation_conds,
705	)
706	);
707
708	$this->add_control(
709	'lottie_reverse',
710	array(
711	'label' => __( 'Reverse', 'premium-addons-for-elementor' ),
712	'type' => Controls_Manager::SWITCHER,
713	'return_value' => 'true',
714	'conditions' => $animation_conds,
715	)
716	);
717
718	if ( $draw_icon ) {
719	$this->add_control(
720	'start_point',
721	array(
722	'label' => __( 'Start Point (%)', 'premium-addons-for-elementor' ),
723	'type' => Controls_Manager::SLIDER,
724	'description' => __( 'Set the point that the SVG should start from.', 'premium-addons-for-elementor' ),
725	'default' => array(
726	'unit' => '%',
727	'size' => 0,
728	),
729	'condition' => array_merge(
730	$common_conditions,
731	array(
732	'icon_type' => array( 'icon', 'svg' ),
733	'draw_svg' => 'yes',
734	'lottie_reverse!' => 'true',
735	)
736	),
737	)
738	);
739
740	$this->add_control(
741	'end_point',
742	array(
743	'label' => __( 'End Point (%)', 'premium-addons-for-elementor' ),
744	'type' => Controls_Manager::SLIDER,
745	'description' => __( 'Set the point that the SVG should end at.', 'premium-addons-for-elementor' ),
746	'default' => array(
747	'unit' => '%',
748	'size' => 0,
749	),
750	'condition' => array_merge(
751	$common_conditions,
752	array(
753	'icon_type' => array( 'icon', 'svg' ),
754	'draw_svg' => 'yes',
755	'lottie_reverse' => 'true',
756	)
757	),
758
759	)
760	);
761
762	$this->add_control(
763	'svg_hover',
764	array(
765	'label' => __( 'Only Play on Hover', 'premium-addons-for-elementor' ),
766	'type' => Controls_Manager::SWITCHER,
767	'return_value' => 'true',
768	'condition' => array_merge(
769	$common_conditions,
770	array(
771	'icon_type' => array( 'icon', 'svg' ),
772	'draw_svg' => 'yes',
773	)
774	),
775	)
776	);
777
778	$this->add_control(
779	'svg_yoyo',
780	array(
781	'label' => __( 'Yoyo Effect', 'premium-addons-for-elementor' ),
782	'type' => Controls_Manager::SWITCHER,
783	'condition' => array_merge(
784	$common_conditions,
785	array(
786	'icon_type' => array( 'icon', 'svg' ),
787	'draw_svg' => 'yes',
788	'lottie_loop' => 'true',
789	)
790	),
791	)
792	);
793	}
794
795	$this->add_control(
796	'slide_icon_type',
797	array(
798	'label' => __( 'Icon Type', 'premium-addons-for-elementor' ),
799	'type' => Controls_Manager::SELECT,
800	'options' => array(
801	'icon' => __( 'Icon', 'premium-addons-for-elementor' ),
802	'animation' => __( 'Lottie Animation', 'premium-addons-for-elementor' ),
803	),
804	'default' => 'icon',
805	'label_block' => true,
806	'condition' => array(
807	'premium_image_button_hover_effect' => 'style4',
808	),
809	)
810	);
811
812	$this->add_control(
813	'premium_image_button_style4_icon_selection_updated',
814	array(
815	'label' => __( 'Icon', 'premium-addons-for-elementor' ),
816	'type' => Controls_Manager::ICONS,
817	'fa4compatibility' => 'premium_image_button_style4_icon_selection',
818	'default' => array(
819	'value' => 'fas fa-star',
820	'library' => 'fa-solid',
821	),
822	'label_block' => true,
823	'condition' => array(
824	'slide_icon_type' => 'icon',
825	'premium_image_button_hover_effect' => 'style4',
826	),
827	)
828	);
829
830	$this->add_control(
831	'slide_lottie_url',
832	array(
833	'label' => __( 'Animation JSON URL', 'premium-addons-for-elementor' ),
834	'type' => Controls_Manager::TEXT,
835	'dynamic' => array( 'active' => true ),
836	'description' => 'Get JSON code URL from <a href="https://lottiefiles.com/" target="_blank">here</a>',
837	'label_block' => true,
838	'condition' => array(
839	'slide_icon_type' => 'animation',
840	'premium_image_button_hover_effect' => 'style4',
841	),
842	)
843	);
844
845	$this->add_control(
846	'slide_lottie_loop',
847	array(
848	'label' => __( 'Loop', 'premium-addons-for-elementor' ),
849	'type' => Controls_Manager::SWITCHER,
850	'return_value' => 'true',
851	'default' => 'true',
852	'condition' => array(
853	'slide_icon_type' => 'animation',
854	'premium_image_button_hover_effect' => 'style4',
855	),
856	)
857	);
858
859	$this->add_control(
860	'slide_lottie_reverse',
861	array(
862	'label' => __( 'Reverse', 'premium-addons-for-elementor' ),
863	'type' => Controls_Manager::SWITCHER,
864	'return_value' => 'true',
865	'condition' => array(
866	'slide_icon_type' => 'animation',
867	'premium_image_button_hover_effect' => 'style4',
868	),
869	)
870	);
871
872	$this->add_control(
873	'premium_image_button_icon_position',
874	array(
875	'label' => __( 'Icon Position', 'premium-addons-for-elementor' ),
876	'type' => Controls_Manager::SELECT,
877	'default' => 'before',
878	'options' => array(
879	'before' => __( 'Before', 'premium-addons-for-elementor' ),
880	'after' => __( 'After', 'premium-addons-for-elementor' ),
881	),
882	'label_block' => true,
883	'condition' => array(
884	'premium_image_button_icon_switcher' => 'yes',
885	'premium_image_button_hover_effect!' => 'style4',
886	),
887	)
888	);
889
890	$this->add_responsive_control(
891	'premium_image_button_icon_before_size',
892	array(
893	'label' => __( 'Icon Size', 'premium-addons-for-elementor' ),
894	'type' => Controls_Manager::SLIDER,
895	'range' => array(
896	'px' => array(
897	'min' => 0,
898	'max' => 200,
899	),
900	),
901	'condition' => array(
902	'premium_image_button_icon_switcher' => 'yes',
903	'premium_image_button_hover_effect!' => 'style4',
904	),
905	'selectors' => array(
906	'{{WRAPPER}} .premium-image-button-text-icon-wrapper i' => 'font-size: {{SIZE}}px',
907	'{{WRAPPER}} .premium-image-button-text-icon-wrapper svg' => 'width: {{SIZE}}px !important; height: {{SIZE}}px !important',
908	),
909	)
910	);
911
912	$this->add_responsive_control(
913	'premium_image_button_icon_style4_size',
914	array(
915	'label' => __( 'Icon Size', 'premium-addons-for-elementor' ),
916	'type' => Controls_Manager::SLIDER,
917	'condition' => array(
918	'premium_image_button_hover_effect' => 'style4',
919	),
920	'selectors' => array(
921	'{{WRAPPER}} .premium-image-button-style4-icon-wrapper i' => 'font-size: {{SIZE}}px',
922	'{{WRAPPER}} .premium-image-button-style4-icon-wrapper svg' => 'width: {{SIZE}}px !important; height: {{SIZE}}px !important',
923	),
924	)
925	);
926
927	$icon_spacing = is_rtl() ? 'left' : 'right';
928
929	$icon_spacing_after = is_rtl() ? 'right' : 'left';
930
931	$this->add_responsive_control(
932	'premium_image_button_icon_before_spacing',
933	array(
934	'label' => __( 'Icon Spacing', 'premium-addons-for-elementor' ),
935	'type' => Controls_Manager::SLIDER,
936	'default' => array(
937	'size' => 15,
938	),
939	'selectors' => array(
940	'{{WRAPPER}} .premium-image-button-text-icon-wrapper i, {{WRAPPER}} .premium-image-button-text-icon-wrapper svg' => 'margin-' . $icon_spacing . ': {{SIZE}}px',
941	),
942	'separator' => 'after',
943	'condition' => array(
944	'premium_image_button_icon_switcher' => 'yes',
945	'premium_image_button_icon_position' => 'before',
946	'premium_image_button_hover_effect!' => 'style4',
947	),
948	)
949	);
950
951	$this->add_responsive_control(
952	'premium_image_button_icon_after_spacing',
953	array(
954	'label' => __( 'Icon Spacing', 'premium-addons-for-elementor' ),
955	'type' => Controls_Manager::SLIDER,
956	'default' => array(
957	'size' => 15,
958	),
959	'selectors' => array(
960	'{{WRAPPER}} .premium-image-button-text-icon-wrapper i, {{WRAPPER}} .premium-image-button-text-icon-wrapper svg' => 'margin-' . $icon_spacing_after . ': {{SIZE}}px',
961	),
962	'separator' => 'after',
963	'condition' => array(
964	'premium_image_button_icon_switcher' => 'yes',
965	'premium_image_button_icon_position' => 'after',
966	'premium_image_button_hover_effect!' => 'style4',
967	),
968	)
969	);
970
971	$this->add_control(
972	'premium_image_button_size',
973	array(
974	'label' => __( 'Size', 'premium-addons-for-elementor' ),
975	'type' => Controls_Manager::SELECT,
976	'default' => 'lg',
977	'options' => array(
978	'sm' => __( 'Small', 'premium-addons-for-elementor' ),
979	'md' => __( 'Medium', 'premium-addons-for-elementor' ),
980	'lg' => __( 'Large', 'premium-addons-for-elementor' ),
981	'block' => __( 'Block', 'premium-addons-for-elementor' ),
982	),
983	'label_block' => true,
984	'separator' => 'before',
985	)
986	);
987
988	$this->add_responsive_control(
989	'premium_image_button_align',
990	array(
991	'label' => __( 'Alignment', 'premium-addons-for-elementor' ),
992	'type' => Controls_Manager::CHOOSE,
993	'options' => array(
994	'left' => array(
995	'title' => __( 'Left', 'premium-addons-for-elementor' ),
996	'icon' => 'eicon-text-align-left',
997	),
998	'center' => array(
999	'title' => __( 'Center', 'premium-addons-for-elementor' ),
1000	'icon' => 'eicon-text-align-center',
1001	),
1002	'right' => array(
1003	'title' => __( 'Right', 'premium-addons-for-elementor' ),
1004	'icon' => 'eicon-text-align-right',
1005	),
1006	),
1007	'selectors' => array(
1008	'{{WRAPPER}} .elementor-widget-container' => 'text-align: {{VALUE}}',
1009	),
1010	'toggle' => false,
1011	'default' => 'center',
1012	'condition' => array(
1013	'premium_image_button_size!' => 'block',
1014	),
1015	)
1016	);
1017
1018	// Allow admins only to add JS.
1019	if ( current_user_can( 'administrator' ) ) {
1020	$this->add_control(
1021	'premium_image_button_event_switcher',
1022	array(
1023	'label' => __( 'onclick Event', 'premium-addons-for-elementor' ),
1024	'type' => Controls_Manager::SWITCHER,
1025	'separator' => 'before',
1026	)
1027	);
1028
1029	$this->add_control(
1030	'premium_image_button_event_function',
1031	array(
1032	'label' => __( 'Example: myFunction();', 'premium-addons-for-elementor' ),
1033	'type' => Controls_Manager::CODE,
1034	'dynamic' => array( 'active' => true ),
1035	'condition' => array(
1036	'premium_image_button_event_switcher' => 'yes',
1037	),
1038	)
1039	);
1040	}
1041
1042	$this->end_controls_section();
1043
1044	$this->start_controls_section(
1045	'section_pa_docs',
1046	array(
1047	'label' => __( 'Helpful Documentations', 'premium-addons-for-elementor' ),
1048	)
1049	);
1050
1051	$docs = array(
1052	'https://premiumaddons.com/docs/image-button-widget-tutorial' => __( 'Getting started »', 'premium-addons-for-elementor' ),
1053	'https://premiumaddons.com/docs/how-can-i-open-an-elementor-popup-using-premium-button' => __( 'How to open an Elementor popup using Image Button widget »', 'premium-addons-for-elementor' ),
1054	'https://premiumaddons.com/docs/how-to-play-pause-a-soundtrack-using-premium-button-widget' => __( 'How to play/pause a soundtrack using Image Button widget »', 'premium-addons-for-elementor' ),
1055	'https://premiumaddons.com/docs/how-to-use-elementor-widgets-to-navigate-through-carousel-widget-slides/' => __( 'How To Use Image Button To Navigate Through Carousel Widget Slides »', 'premium-addons-for-elementor' ),
1056	);
1057
1058	$doc_index = 1;
1059	foreach ( $docs as $url => $title ) {
1060
1061	$doc_url = Helper_Functions::get_campaign_link( $url, 'editor-page', 'wp-editor', 'get-support' );
1062
1063	$this->add_control(
1064	'doc_' . $doc_index,
1065	array(
1066	'type' => Controls_Manager::RAW_HTML,
1067	'raw' => sprintf( '<a href="%s" target="_blank">%s</a>', $doc_url, $title, 'premium-addons-for-elementor' ),
1068	'content_classes' => 'editor-pa-doc',
1069	)
1070	);
1071
1072	++$doc_index;
1073
1074	}
1075
1076	$this->end_controls_section();
1077
1078	$this->start_controls_section(
1079	'premium_image_button_style_section',
1080	array(
1081	'label' => __( 'Button', 'premium-addons-for-elementor' ),
1082	'tab' => Controls_Manager::TAB_STYLE,
1083	)
1084	);
1085
1086	$this->add_responsive_control(
1087	'button_width',
1088	array(
1089	'label' => __( 'Width', 'premium-addons-for-elementor' ),
1090	'type' => Controls_Manager::SLIDER,
1091	'size_units' => array( 'px', '%', 'custom' ),
1092	'range' => array(
1093	'px' => array(
1094	'min' => 1,
1095	'max' => 500,
1096	),
1097	),
1098	'selectors' => array(
1099	'{{WRAPPER}} .premium-image-button' => 'width: {{SIZE}}{{UNIT}};',
1100	),
1101	'condition' => array(
1102	'premium_image_button_size!' => 'block',
1103	),
1104	)
1105	);
1106
1107	$this->add_control(
1108	'svg_color',
1109	array(
1110	'label' => __( 'After Draw Fill Color', 'premium-addons-for-elementor' ),
1111	'type' => Controls_Manager::COLOR,
1112	'global' => false,
1113	'separator' => 'after',
1114	'condition' => array(
1115	'premium_image_button_icon_switcher' => 'yes',
1116	'icon_type' => array( 'icon', 'svg' ),
1117	'premium_image_button_hover_effect!' => 'style4',
1118	'draw_svg' => 'yes',
1119	),
1120	)
1121	);
1122
1123	$this->add_group_control(
1124	Group_Control_Typography::get_type(),
1125	array(
1126	'name' => 'premium_image_button_typo',
1127	'global' => array(
1128	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
1129	),
1130	'selector' => '{{WRAPPER}} .premium-image-button',
1131	)
1132	);
1133
1134	$this->start_controls_tabs( 'premium_image_button_style_tabs' );
1135
1136	$this->start_controls_tab(
1137	'premium_image_button_style_normal',
1138	array(
1139	'label' => __( 'Normal', 'premium-addons-for-elementor' ),
1140	)
1141	);
1142
1143	$this->add_control(
1144	'premium_image_button_text_color_normal',
1145	array(
1146	'label' => __( 'Text Color', 'premium-addons-for-elementor' ),
1147	'type' => Controls_Manager::COLOR,
1148	'global' => array(
1149	'default' => Global_Colors::COLOR_SECONDARY,
1150	),
1151	'selectors' => array(
1152	'{{WRAPPER}} .premium-image-button .premium-image-button-text-icon-wrapper span' => 'color: {{VALUE}};',
1153	),
1154	)
1155	);
1156
1157	$this->add_control(
1158	'premium_image_button_icon_color_normal',
1159	array(
1160	'label' => __( 'Icon Color', 'premium-addons-for-elementor' ),
1161	'type' => Controls_Manager::COLOR,
1162	'global' => array(
1163	'default' => Global_Colors::COLOR_SECONDARY,
1164	),
1165	'selectors' => array(
1166	'{{WRAPPER}} .premium-image-button-text-icon-wrapper i' => 'color: {{VALUE}}',
1167	'{{WRAPPER}} .premium-drawable-icon, {{WRAPPER}} svg:not([class*="premium-"])' => 'fill: {{VALUE}};',
1168	),
1169	'condition' => array(
1170	'premium_image_button_icon_switcher' => 'yes',
1171	'icon_type' => 'icon',
1172	'premium_image_button_hover_effect!' => 'style4',
1173	),
1174	)
1175	);
1176
1177	if ( $draw_icon ) {
1178	$this->add_control(
1179	'stroke_color',
1180	array(
1181	'label' => __( 'Stroke Color', 'premium-addons-for-elementor' ),
1182	'type' => Controls_Manager::COLOR,
1183	'global' => array(
1184	'default' => Global_Colors::COLOR_ACCENT,
1185	),
1186	'condition' => array(
1187	'premium_image_button_icon_switcher' => 'yes',
1188	'icon_type' => array( 'icon', 'svg' ),
1189	'premium_image_button_hover_effect!' => array( 'style3', 'style4' ),
1190	),
1191	'selectors' => array(
1192	'{{WRAPPER}} .premium-drawable-icon , {{WRAPPER}} svg:not([class="premium-"])' => 'stroke: {{VALUE}};',
1193	),
1194	)
1195	);
1196	}
1197
1198	$this->add_group_control(
1199	Group_Control_Background::get_type(),
1200	array(
1201	'name' => 'premium_image_button_background',
1202	'types' => array( 'classic', 'gradient' ),
1203	'selector' => '{{WRAPPER}} .premium-image-button',
1204	'fields_options' => array(
1205	'background' => array(
1206	'default' => 'classic',
1207	),
1208	'color' => array(
1209	'global' => array(
1210	'default' => Global_Colors::COLOR_PRIMARY,
1211	),
1212	),
1213	),
1214	)
1215	);
1216
1217	$this->add_group_control(
1218	Group_Control_Border::get_type(),
1219	array(
1220	'name' => 'premium_image_button_border_normal',
1221	'selector' => '{{WRAPPER}} .premium-image-button',
1222	)
1223	);
1224
1225	$this->add_control(
1226	'premium_image_button_border_radius_normal',
1227	array(
1228	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
1229	'type' => Controls_Manager::SLIDER,
1230	'size_units' => array( 'px', '%', 'em' ),
1231	'selectors' => array(
1232	'{{WRAPPER}} .premium-image-button' => 'border-radius: {{SIZE}}{{UNIT}};',
1233	),
1234	'condition' => array(
1235	'button_adv_radius!' => 'yes',
1236	),
1237	)
1238	);
1239
1240	$this->add_control(
1241	'button_adv_radius',
1242	array(
1243	'label' => __( 'Advanced Border Radius', 'premium-addons-for-elementor' ),
1244	'type' => Controls_Manager::SWITCHER,
1245	'description' => __( 'Apply custom radius values. Get the radius value from ', 'premium-addons-for-elementor' ) . '<a href="https://9elements.github.io/fancy-border-radius/" target="_blank">here</a>',
1246	)
1247	);
1248
1249	$this->add_control(
1250	'button_adv_radius_value',
1251	array(
1252	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
1253	'type' => Controls_Manager::TEXT,
1254	'dynamic' => array( 'active' => true ),
1255	'selectors' => array(
1256	'{{WRAPPER}} .premium-image-button' => 'border-radius: {{VALUE}};',
1257	),
1258	'condition' => array(
1259	'button_adv_radius' => 'yes',
1260	),
1261	)
1262	);
1263
1264	$this->add_group_control(
1265	Group_Control_Text_Shadow::get_type(),
1266	array(
1267	'label' => __( 'Icon Shadow', 'premium-addons-for-elementor' ),
1268	'name' => 'premium_image_button_icon_shadow_normal',
1269	'selector' => '{{WRAPPER}} .premium-image-button-text-icon-wrapper i',
1270	'condition' => array(
1271	'premium_image_button_icon_switcher' => 'yes',
1272	'icon_type' => 'icon',
1273	'premium_image_button_hover_effect!' => 'style4',
1274	),
1275	)
1276	);
1277
1278	$this->add_group_control(
1279	Group_Control_Text_Shadow::get_type(),
1280	array(
1281	'label' => __( 'Text Shadow', 'premium-addons-for-elementor' ),
1282	'name' => 'premium_image_button_text_shadow_normal',
1283	'selector' => '{{WRAPPER}} .premium-image-button-text-icon-wrapper span',
1284	)
1285	);
1286
1287	$this->add_group_control(
1288	Group_Control_Box_Shadow::get_type(),
1289	array(
1290	'label' => __( 'Button Shadow', 'premium-addons-for-elementor' ),
1291	'name' => 'premium_image_button_box_shadow_normal',
1292	'selector' => '{{WRAPPER}} .premium-image-button',
1293	)
1294	);
1295
1296	$this->add_responsive_control(
1297	'premium_image_button_margin_normal',
1298	array(
1299	'label' => __( 'Margin', 'premium-addons-for-elementor' ),
1300	'type' => Controls_Manager::DIMENSIONS,
1301	'size_units' => array( 'px', 'em', '%' ),
1302	'selectors' => array(
1303	'{{WRAPPER}} .premium-image-button' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1304	),
1305	)
1306	);
1307
1308	$this->add_responsive_control(
1309	'premium_image_button_padding_normal',
1310	array(
1311	'label' => __( 'Padding', 'premium-addons-for-elementor' ),
1312	'type' => Controls_Manager::DIMENSIONS,
1313	'size_units' => array( 'px', 'em', '%' ),
1314	'selectors' => array(
1315	'{{WRAPPER}} .premium-image-button, {{WRAPPER}} .premium-image-button-effect-container, {{WRAPPER}} .premium-button-line6::after' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1316	),
1317	)
1318	);
1319
1320	$this->end_controls_tab();
1321
1322	$this->start_controls_tab(
1323	'premium_image_button_style_hover',
1324	array(
1325	'label' => __( 'Hover', 'premium-addons-for-elementor' ),
1326	)
1327	);
1328
1329	$this->add_control(
1330	'grow_effect_notice',
1331	array(
1332	'raw' => __( 'It\'s not recommened to set a hover image background with Grow effect.', 'premium-addons-for-elementor' ),
1333	'type' => Controls_Manager::RAW_HTML,
1334	'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
1335	'condition' => array(
1336	'premium_image_button_hover_effect' => 'style6',
1337	),
1338	)
1339	);
1340
1341	$this->add_control(
1342	'premium_image_button_text_color_hover',
1343	array(
1344	'label' => __( 'Text Color', 'premium-addons-for-elementor' ),
1345	'type' => Controls_Manager::COLOR,
1346	'global' => array(
1347	'default' => Global_Colors::COLOR_PRIMARY,
1348	),
1349	'selectors' => array(
1350	'{{WRAPPER}} .premium-image-button:hover .premium-image-button-text-icon-wrapper span, {{WRAPPER}} .premium-button-line6::after' => 'color: {{VALUE}};',
1351	),
1352	'condition' => array(
1353	'premium_image_button_hover_effect!' => 'style4',
1354	),
1355	)
1356	);
1357
1358	$this->add_control(
1359	'premium_image_button_icon_color_hover',
1360	array(
1361	'label' => __( 'Icon Color', 'premium-addons-for-elementor' ),
1362	'type' => Controls_Manager::COLOR,
1363	'global' => array(
1364	'default' => Global_Colors::COLOR_SECONDARY,
1365	),
1366	'selectors' => array(
1367	'{{WRAPPER}} .premium-image-button:hover .premium-image-button-text-icon-wrapper i' => 'color: {{VALUE}}',
1368	'{{WRAPPER}} .premium-image-button:hover .premium-drawable-icon, {{WRAPPER}} .premium-image-button:hover svg:not([class*="premium-"])' => 'fill: {{VALUE}};',
1369	),
1370	'condition' => array(
1371	'premium_image_button_icon_switcher' => 'yes',
1372	'icon_type' => 'icon',
1373	'premium_image_button_hover_effect!' => 'style4',
1374	),
1375	)
1376	);
1377
1378	$this->add_control(
1379	'underline_color',
1380	array(
1381	'label' => __( 'Line Color', 'premium-addons-for-elementor' ),
1382	'type' => Controls_Manager::COLOR,
1383	'global' => array(
1384	'default' => Global_Colors::COLOR_PRIMARY,
1385	),
1386	'selectors' => array(
1387	'{{WRAPPER}} .premium-btn-svg' => 'stroke: {{VALUE}};',
1388	'{{WRAPPER}} .premium-button-line2::before, {{WRAPPER}} .premium-button-line4::before, {{WRAPPER}} .premium-button-line5::before, {{WRAPPER}} .premium-button-line5::after, {{WRAPPER}} .premium-button-line6::before, {{WRAPPER}} .premium-button-line7::before' => 'background-color: {{VALUE}};',
1389	),
1390	'condition' => array(
1391	'premium_image_button_hover_effect' => 'style8',
1392	),
1393	)
1394	);
1395
1396	if ( $draw_icon ) {
1397	$this->add_control(
1398	'stroke_color_hover',
1399	array(
1400	'label' => __( 'Stroke Color', 'premium-addons-for-elementor' ),
1401	'type' => Controls_Manager::COLOR,
1402	'global' => array(
1403	'default' => Global_Colors::COLOR_ACCENT,
1404	),
1405	'condition' => array(
1406	'premium_image_button_icon_switcher' => 'yes',
1407	'icon_type' => array( 'icon', 'svg' ),
1408	'premium_image_button_hover_effect!' => 'style4',
1409	),
1410	'selectors' => array(
1411	'{{WRAPPER}} .premium-image-button:hover .premium-drawable-icon , {{WRAPPER}} .premium-image-button:hover svg:not([class="premium-"])' => 'stroke: {{VALUE}};',
1412	),
1413	)
1414	);
1415	}
1416
1417	$this->add_control(
1418	'premium_image_button_style4_icon_color',
1419	array(
1420	'label' => __( 'Icon Color', 'premium-addons-for-elementor' ),
1421	'type' => Controls_Manager::COLOR,
1422	'global' => array(
1423	'default' => Global_Colors::COLOR_PRIMARY,
1424	),
1425	'selectors' => array(
1426	'{{WRAPPER}} .premium-image-button-style4-icon-wrapper' => 'color: {{VALUE}}',
1427	'{{WRAPPER}} .premium-image-button-style4-icon-wrapper svg' => 'fill: {{VALUE}}',
1428	),
1429	'condition' => array(
1430	'premium_image_button_hover_effect' => 'style4',
1431	'slide_icon_type' => 'icon',
1432	),
1433	)
1434	);
1435
1436	$this->add_control(
1437	'premium_image_button_diagonal_overlay_color',
1438	array(
1439	'label' => __( 'Overlay Color', 'premium-addons-for-elementor' ),
1440	'type' => Controls_Manager::COLOR,
1441	'global' => array(
1442	'default' => Global_Colors::COLOR_PRIMARY,
1443	),
1444	'selectors' => array(
1445	'{{WRAPPER}} .premium-image-button-style3:before' => 'background-color: {{VALUE}};',
1446	),
1447	'condition' => array(
1448	'premium_image_button_hover_effect' => 'style3',
1449	),
1450	)
1451	);
1452
1453	$this->add_control(
1454	'premium_image_button_overlap_overlay_color',
1455	array(
1456	'label' => __( 'Overlay Color', 'premium-addons-for-elementor' ),
1457	'type' => Controls_Manager::COLOR,
1458	'global' => array(
1459	'default' => Global_Colors::COLOR_PRIMARY,
1460	),
1461	'selectors' => array(
1462	'{{WRAPPER}} .premium-image-button-overlap-effect-horizontal:before, {{WRAPPER}} .premium-image-button-overlap-effect-vertical:before' => 'background-color: {{VALUE}};',
1463	),
1464	'condition' => array(
1465	'premium_image_button_hover_effect' => 'style5',
1466	),
1467	)
1468	);
1469
1470	$this->add_group_control(
1471	Group_Control_Background::get_type(),
1472	array(
1473	'name' => 'premium_image_button_background_hover',
1474	'types' => array( 'classic', 'gradient' ),
1475	'selector' => '{{WRAPPER}} .premium-image-button-none:hover, {{WRAPPER}} .premium-button-style8:hover, {{WRAPPER}} .premium-image-button-style4-icon-wrapper, {{WRAPPER}} .premium-image-button-style1:before, {{WRAPPER}} .premium-image-button-style3:hover, {{WRAPPER}} .premium-image-button-overlap-effect-horizontal:hover, {{WRAPPER}} .premium-image-button-overlap-effect-vertical:hover, {{WRAPPER}} .premium-button-style6-bg, {{WRAPPER}} .premium-button-style6:before',
1476	'fields_options' => array(
1477	'background' => array(
1478	'default' => 'classic',
1479	),
1480	'color' => array(
1481	'global' => array(
1482	'default' => Global_Colors::COLOR_TEXT,
1483	),
1484	),
1485	),
1486	)
1487	);
1488
1489	$this->add_control(
1490	'premium_image_button_overlay_color',
1491	array(
1492	'label' => __( 'Overlay Color', 'premium-addons-for-elementor' ),
1493	'type' => Controls_Manager::COLOR,
1494	'global' => array(
1495	'default' => Global_Colors::COLOR_PRIMARY,
1496	),
1497	'condition' => array(
1498	'premium_image_button_overlay_switcher' => 'yes',
1499	),
1500	'selectors' => array(
1501	'{{WRAPPER}} .premium-image-button-squares-effect:before, {{WRAPPER}} .premium-image-button-squares-effect:after,{{WRAPPER}} .premium-image-button-squares-square-container:before, {{WRAPPER}} .premium-image-button-squares-square-container:after' => 'background-color: {{VALUE}};',
1502	),
1503	)
1504	);
1505
1506	$this->add_group_control(
1507	Group_Control_Border::get_type(),
1508	array(
1509	'name' => 'premium_image_button_border_hover',
1510	'selector' => '{{WRAPPER}} .premium-image-button:hover',
1511	)
1512	);
1513
1514	$this->add_control(
1515	'premium_image_button_border_radius_hover',
1516	array(
1517	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
1518	'type' => Controls_Manager::SLIDER,
1519	'size_units' => array( 'px', '%', 'em' ),
1520	'selectors' => array(
1521	'{{WRAPPER}} .premium-image-button:hover' => 'border-radius: {{SIZE}}{{UNIT}};',
1522	),
1523	'condition' => array(
1524	'button_hover_adv_radius!' => 'yes',
1525	),
1526	)
1527	);
1528
1529	$this->add_control(
1530	'button_hover_adv_radius',
1531	array(
1532	'label' => __( 'Advanced Border Radius', 'premium-addons-for-elementor' ),
1533	'type' => Controls_Manager::SWITCHER,
1534	'description' => __( 'Apply custom radius values. Get the radius value from ', 'premium-addons-for-elementor' ) . '<a href="https://9elements.github.io/fancy-border-radius/" target="_blank">here</a>',
1535	)
1536	);
1537
1538	$this->add_control(
1539	'button_hover_adv_radius_value',
1540	array(
1541	'label' => __( 'Border Radius', 'premium-addons-for-elementor' ),
1542	'type' => Controls_Manager::TEXT,
1543	'dynamic' => array( 'active' => true ),
1544	'selectors' => array(
1545	'{{WRAPPER}} .premium-image-button:hover' => 'border-radius: {{VALUE}};',
1546	),
1547	'condition' => array(
1548	'button_hover_adv_radius' => 'yes',
1549	),
1550	)
1551	);
1552
1553	$this->add_group_control(
1554	Group_Control_Text_Shadow::get_type(),
1555	array(
1556	'label' => __( 'Icon Shadow', 'premium-addons-for-elementor' ),
1557	'name' => 'premium_image_button_icon_shadow_hover',
1558	'selector' => '{{WRAPPER}} .premium-image-button:hover .premium-image-button-text-icon-wrapper i',
1559	'condition' => array(
1560	'premium_image_button_icon_switcher' => 'yes',
1561	'icon_type' => 'icon',
1562	'premium_image_button_hover_effect!' => 'style4',
1563	),
1564	)
1565	);
1566
1567	$this->add_group_control(
1568	Group_Control_Text_Shadow::get_type(),
1569	array(
1570	'label' => __( 'Icon Shadow', 'premium-addons-for-elementor' ),
1571	'name' => 'premium_image_button_style4_icon_shadow_hover',
1572	'selector' => '{{WRAPPER}} .premium-image-button:hover .premium-image-button-style4-icon-wrapper i',
1573	'condition' => array(
1574	'premium_image_button_hover_effect' => 'style4',
1575	'slide_icon_type' => 'icon',
1576	),
1577	)
1578	);
1579
1580	$this->add_group_control(
1581	Group_Control_Text_Shadow::get_type(),
1582	array(
1583	'label' => __( 'Text Shadow', 'premium-addons-for-elementor' ),
1584	'name' => 'premium_image_button_text_shadow_hover',
1585	'selector' => '{{WRAPPER}} .premium-image-button:hover .premium-image-button-text-icon-wrapper span',
1586	'condition' => array(
1587	'premium_image_button_hover_effect!' => 'style4',
1588	),
1589	)
1590	);
1591
1592	$this->add_group_control(
1593	Group_Control_Box_Shadow::get_type(),
1594	array(
1595	'label' => __( 'Button Shadow', 'premium-addons-for-elementor' ),
1596	'name' => 'premium_image_button_box_shadow_hover',
1597	'selector' => '{{WRAPPER}} .premium-image-button:hover',
1598	)
1599	);
1600
1601	$this->add_responsive_control(
1602	'premium_image_button_margin_hover',
1603	array(
1604	'label' => __( 'Margin', 'premium-addons-for-elementor' ),
1605	'type' => Controls_Manager::DIMENSIONS,
1606	'size_units' => array( 'px', 'em', '%' ),
1607	'selectors' => array(
1608	'{{WRAPPER}} .premium-image-button:hover' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1609	),
1610	)
1611	);
1612
1613	$this->add_responsive_control(
1614	'premium_image_button_padding_hover',
1615	array(
1616	'label' => __( 'Padding', 'premium-addons-for-elementor' ),
1617	'type' => Controls_Manager::DIMENSIONS,
1618	'size_units' => array( 'px', 'em', '%' ),
1619	'selectors' => array(
1620	'{{WRAPPER}} .premium-image-button:hover' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1621	),
1622	)
1623	);
1624
1625	$this->end_controls_tab();
1626
1627	$this->end_controls_tabs();
1628
1629	$this->end_controls_section();
1630	}
1631
1632	/**
1633	* Render Image Button widget output on the frontend.
1634	*
1635	* Written in PHP and used to generate the final HTML.
1636	*
1637	* @since 1.0.0
1638	* @access protected
1639	*/
1640	protected function render() {
1641
1642	$settings = $this->get_settings_for_display();
1643
1644	$this->add_inline_editing_attributes( 'premium_image_button_text' );
1645
1646	if ( 'url' === $settings['premium_image_button_link_selection'] ) {
1647	$image_link = $settings['premium_image_button_link'];
1648	} else {
1649	$image_link = get_permalink( $settings['premium_image_button_existing_link'] );
1650	}
1651
1652	$button_text = $settings['premium_image_button_text'];
1653
1654	$button_size = 'premium-btn-' . $settings['premium_image_button_size'];
1655
1656	if ( 'yes' === $settings['premium_image_button_icon_switcher'] ) {
1657
1658	$icon_type = $settings['icon_type'];
1659
1660	if ( 'icon' === $icon_type \|\| 'svg' === $icon_type ) {
1661
1662	$this->add_render_attribute( 'icon', 'class', 'premium-drawable-icon' );
1663
1664	if ( 'icon' === $icon_type ) {
1665
1666	if ( ! empty( $settings['premium_image_button_icon_selection'] ) ) {
1667	$this->add_render_attribute(
1668	'icon',
1669	array(
1670	'class' => $settings['premium_image_button_icon_selection'],
1671	'aria-hidden' => 'true',
1672	)
1673	);
1674
1675	}
1676
1677	$migrated = isset( $settings['__fa4_migrated']['premium_image_button_icon_selection_updated'] );
1678	$is_new = empty( $settings['premium_image_button_icon_selection'] ) && Icons_Manager::is_migration_allowed();
1679
1680	}
1681
1682	if ( 'yes' === $settings['draw_svg'] ) {
1683
1684	$this->add_render_attribute(
1685	'button',
1686	'class',
1687	array(
1688	'elementor-invisible',
1689	'premium-drawer-hover',
1690	)
1691	);
1692
1693	if ( 'icon' === $icon_type ) {
1694
1695	$this->add_render_attribute( 'icon', 'class', $settings['premium_image_button_icon_selection_updated']['value'] );
1696
1697	}
1698
1699	$this->add_render_attribute(
1700	'icon',
1701	array(
1702	'class' => 'premium-svg-drawer',
1703	'data-svg-reverse' => $settings['lottie_reverse'],
1704	'data-svg-loop' => $settings['lottie_loop'],
1705	'data-svg-sync' => $settings['svg_sync'],
1706	'data-svg-hover' => $settings['svg_hover'],
1707	'data-svg-fill' => $settings['svg_color'],
1708	'data-svg-frames' => $settings['frames'],
1709	'data-svg-yoyo' => $settings['svg_yoyo'],
1710	'data-svg-point' => $settings['lottie_reverse'] ? $settings['end_point']['size'] : $settings['start_point']['size'],
1711	)
1712	);
1713
1714	} else {
1715	$this->add_render_attribute( 'icon', 'class', 'premium-svg-nodraw' );
1716	}
1717	} else {
1718	$this->add_render_attribute(
1719	'lottie',
1720	array(
1721	'class' => 'premium-lottie-animation',
1722	'data-lottie-url' => $settings['lottie_url'],
1723	'data-lottie-loop' => $settings['lottie_loop'],
1724	'data-lottie-reverse' => $settings['lottie_reverse'],
1725	)
1726	);
1727	}
1728	}
1729
1730	if ( 'none' === $settings['premium_image_button_hover_effect'] ) {
1731	$style_dir = 'premium-image-button-none';
1732	} elseif ( 'style1' === $settings['premium_image_button_hover_effect'] ) {
1733	$style_dir = 'premium-image-button-style1-' . $settings['premium_image_button_style1_dir'];
1734	} elseif ( 'style3' === $settings['premium_image_button_hover_effect'] ) {
1735	$style_dir = 'premium-image-button-diagonal-' . $settings['premium_image_button_style3_dir'];
1736	} elseif ( 'style4' === $settings['premium_image_button_hover_effect'] ) {
1737	$style_dir = 'premium-image-button-style4-' . $settings['premium_image_button_style4_dir'];
1738
1739	$slide_icon_type = $settings['slide_icon_type'];
1740
1741	if ( 'icon' === $slide_icon_type ) {
1742
1743	if ( ! empty( $settings['premium_image_button_style4_icon_selection'] ) ) {
1744	$this->add_render_attribute( 'slide_icon', 'class', $settings['premium_image_button_style4_icon_selection'] );
1745	$this->add_render_attribute( 'slide_icon', 'aria-hidden', 'true' );
1746	}
1747
1748	$slide_migrated = isset( $settings['__fa4_migrated']['premium_image_button_style4_icon_selection_updated'] );
1749	$slide_is_new = empty( $settings['premium_image_button_style4_icon_selection'] ) && Icons_Manager::is_migration_allowed();
1750
1751	} else {
1752
1753	$this->add_render_attribute(
1754	'slide_lottie',
1755	array(
1756	'class' => 'premium-lottie-animation',
1757	'data-lottie-url' => $settings['slide_lottie_url'],
1758	'data-lottie-loop' => $settings['slide_lottie_loop'],
1759	'data-lottie-reverse' => $settings['slide_lottie_reverse'],
1760	)
1761	);
1762
1763	}
1764	} elseif ( 'style5' === $settings['premium_image_button_hover_effect'] ) {
1765	$style_dir = 'premium-image-button-overlap-effect-' . $settings['premium_image_button_style5_dir'];
1766	} elseif ( 'style6' === $settings['premium_image_button_hover_effect'] ) {
1767	$style_dir = 'premium-button-style6';
1768	$mouse_detect = $settings['mouse_detect'];
1769	$this->add_render_attribute( 'style6', 'class', 'premium-button-style6-bg' );
1770	} elseif ( 'style8' === $settings['premium_image_button_hover_effect'] ) {
1771	$style_dir = 'premium-button-' . $settings['underline_style'];
1772
1773	$this->add_render_attribute( 'button', 'data-text', $button_text );
1774	}
1775
1776	if ( 'style8' !== $settings['premium_image_button_hover_effect'] ) {
1777	$this->add_render_attribute( 'button', 'class', 'premium-image-button-' . $settings['premium_image_button_hover_effect'] );
1778	} else {
1779	$this->add_render_attribute( 'button', 'class', 'premium-button-' . $settings['premium_image_button_hover_effect'] );
1780	}
1781
1782	$this->add_render_attribute(
1783	'button',
1784	'class',
1785	array(
1786	'premium-image-button',
1787	$button_size,
1788	$style_dir,
1789	)
1790	);
1791
1792	if ( ! empty( $image_link ) ) {
1793
1794	if ( 'url' === $settings['premium_image_button_link_selection'] ) {
1795	$this->add_link_attributes( 'button', $image_link );
1796	} else {
1797	$this->add_render_attribute( 'button', 'href', $image_link );
1798	}
1799	}
1800
1801	if ( isset( $settings['premium_image_button_event_switcher'] ) ) {
1802	$image_event = $settings['premium_image_button_event_function'];
1803	if ( 'yes' === $settings['premium_image_button_event_switcher'] && ! empty( $image_event ) ) {
1804
1805	if( Helper_Functions::check_capability( 'unfiltered_html' ) ) {
1806	$this->add_render_attribute( 'button', 'onclick', esc_js( $image_event ) );
1807	}
1808
1809	}
1810	}
1811
1812	?>
1813
1814	<a <?php echo wp_kses_post( $this->get_render_attribute_string( 'button' ) ); ?>>
1815	<div class="premium-image-button-text-icon-wrapper">
1816	<?php if ( 'yes' === $settings['premium_image_button_icon_switcher'] ) : ?>
1817	<?php if ( 'style4' !== $settings['premium_image_button_hover_effect'] && 'before' === $settings['premium_image_button_icon_position'] ) : ?>
1818	<?php if ( 'icon' === $icon_type ) : ?>
1819	<?php
1820	if ( ( $is_new \|\| $migrated ) && 'yes' !== $settings['draw_svg'] ) :
1821	Icons_Manager::render_icon(
1822	$settings['premium_image_button_icon_selection_updated'],
1823	array(
1824	'class' => array( 'premium-svg-nodraw', 'premium-drawable-icon' ),
1825	'aria-hidden' => 'true',
1826	)
1827	);
1828	else :
1829	?>
1830	<i <?php echo wp_kses_post( $this->get_render_attribute_string( 'icon' ) ); ?>></i>
1831	<?php endif; ?>
1832	<?php elseif ( 'svg' === $icon_type ) : ?>
1833	<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'icon' ) ); ?>>
1834	<?php $this->print_unescaped_setting( 'custom_svg' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
1835	</div>
1836	<?php else : ?>
1837	<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'lottie' ) ); ?>></div>
1838	<?php endif; ?>
1839	<?php endif; ?>
1840	<?php endif; ?>
1841
1842	<?php if ( ! empty( $button_text ) ) : ?>
1843	<span <?php echo wp_kses_post( $this->get_render_attribute_string( 'premium_image_button_text' ) ); ?>>
1844	<?php echo wp_kses_post( $button_text ); ?>
1845	</span>
1846	<?php endif; ?>
1847
1848	<?php if ( 'yes' === $settings['premium_image_button_icon_switcher'] ) : ?>
1849	<?php if ( 'style4' !== $settings['premium_image_button_hover_effect'] && 'after' === $settings['premium_image_button_icon_position'] ) : ?>
1850	<?php if ( 'icon' === $icon_type ) : ?>
1851	<?php
1852	if ( ( $is_new \|\| $migrated ) && 'yes' !== $settings['draw_svg'] ) :
1853	Icons_Manager::render_icon(
1854	$settings['premium_image_button_icon_selection_updated'],
1855	array(
1856	'class' => array( 'premium-svg-nodraw', 'premium-drawable-icon' ),
1857	'aria-hidden' => 'true',
1858	)
1859	);
1860	else :
1861	?>
1862	<i <?php echo wp_kses_post( $this->get_render_attribute_string( 'icon' ) ); ?>></i>
1863	<?php endif; ?>
1864	<?php elseif ( 'svg' === $icon_type ) : ?>
1865	<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'icon' ) ); ?>>
1866	<?php $this->print_unescaped_setting( 'custom_svg' ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
1867	</div>
1868	<?php else : ?>
1869	<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'lottie' ) ); ?>></div>
1870	<?php endif; ?>
1871	<?php endif; ?>
1872	<?php endif; ?>
1873	</div>
1874
1875	<?php if ( 'style4' === $settings['premium_image_button_hover_effect'] ) : ?>
1876	<div class="premium-image-button-style4-icon-wrapper <?php echo esc_attr( $settings['premium_image_button_style4_dir'] ); ?>">
1877	<?php if ( 'icon' === $slide_icon_type ) : ?>
1878	<?php
1879	if ( $slide_is_new \|\| $slide_migrated ) :
1880	Icons_Manager::render_icon( $settings['premium_image_button_style4_icon_selection_updated'], array( 'aria-hidden' => 'true' ) );
1881	else :
1882	?>
1883	<i <?php echo wp_kses_post( $this->get_render_attribute_string( 'slide_icon' ) ); ?>></i>
1884	<?php endif; ?>
1885	<?php else : ?>
1886	<div <?php echo wp_kses_post( $this->get_render_attribute_string( 'slide_lottie' ) ); ?>></div>
1887	<?php endif; ?>
1888	</div>
1889	<?php endif; ?>
1890
1891	<?php if ( 'style6' === $settings['premium_image_button_hover_effect'] && 'yes' === $mouse_detect ) : ?>
1892	<span <?php echo wp_kses_post( $this->get_render_attribute_string( 'style6' ) ); ?>></span>
1893	<?php endif; ?>
1894
1895	<?php if ( 'style8' === $settings['premium_image_button_hover_effect'] ) : ?>
1896	<?php echo Helper_Functions::get_btn_svgs( $settings['underline_style'] ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
1897	<?php endif; ?>
1898
1899	</a>
1900
1901	<?php
1902	}
1903
1904	/**
1905	* Render Image Button widget output in the editor.
1906	*
1907	* Written as a Backbone JavaScript template and used to generate the live preview.
1908	*
1909	* @since 1.0.0
1910	* @access protected
1911	*/
1912	protected function content_template() {
1913	?>
1914	<#
1915	view.addInlineEditingAttributes( 'premium_image_button_text' );
1916	var buttonText = settings.premium_image_button_text,
1917	buttonUrl,
1918	styleDir,
1919	slideIcon,
1920	mouseDetect,
1921	buttonSize = 'premium-btn-' + settings.premium_image_button_size,
1922	buttonIcon = settings.premium_image_button_icon_selection,
1923	hoverEffect = settings.premium_image_button_hover_effect,
1924	changeToScope = '';
1925
1926	if( 'url' === settings.premium_image_button_link_selection ) {
1927	buttonUrl = settings.premium_image_button_link.url;
1928	} else {
1929	buttonUrl = settings.premium_image_button_existing_link;
1930	}
1931
1932	if ( 'none' === hoverEffect ) {
1933	styleDir = 'premium-button-none';
1934	} else if( 'style1' === hoverEffect ) {
1935	styleDir = 'premium-image-button-style1-' + settings.premium_image_button_style1_dir;
1936	} else if ( 'style3' === hoverEffect ) {
1937	styleDir = 'premium-image-button-diagonal-' + settings.premium_image_button_style3_dir;
1938	} else if ( 'style4' === hoverEffect ) {
1939	styleDir = 'premium-image-button-style4-' + settings.premium_image_button_style4_dir;
1940
1941	var slideIconType = settings.slide_icon_type;
1942
1943	if( 'icon' === slideIconType ) {
1944	slideIcon = settings.premium_image_button_style4_icon_selection;
1945	var slideIconHTML = elementor.helpers.renderIcon( view, settings.premium_image_button_style4_icon_selection_updated, { 'aria-hidden': true }, 'i' , 'object' ),
1946	slideMigrated = elementor.helpers.isIconMigrated( settings, 'premium_image_button_style4_icon_selection_updated' );
1947
1948	} else {
1949
1950	view.addRenderAttribute( 'slide_lottie', {
1951	'class': 'premium-lottie-animation',
1952	'data-lottie-url': settings.slide_lottie_url,
1953	'data-lottie-loop': settings.slide_lottie_loop,
1954	'data-lottie-reverse': settings.slide_lottie_reverse
1955	});
1956	}
1957	} else if ( 'style5' === hoverEffect ){
1958	styleDir = 'premium-image-button-overlap-effect-' + settings.premium_image_button_style5_dir;
1959	} else if ( 'style6' === hoverEffect ) {
1960	styleDir = 'premium-button-style6';
1961	mouseDetect = settings.mouse_detect;
1962	view.addRenderAttribute( 'style6','class' , 'premium-button-style6-bg');
1963	} else if ( 'style8' === hoverEffect ) {
1964	styleDir = 'premium-button-' + settings.underline_style;
1965
1966	var btnSVG = '';
1967	switch ( settings.underline_style ) {
1968	case 'line1':
1969	btnSVG = '<div class="premium-btn-line-wrap"><svg class="premium-btn-svg" width="100%" height="9" viewBox="0 0 101 9"><path d="M.426 1.973C4.144 1.567 17.77-.514 21.443 1.48 24.296 3.026 24.844 4.627 27.5 7c3.075 2.748 6.642-4.141 10.066-4.688 7.517-1.2 13.237 5.425 17.59 2.745C58.5 3 60.464-1.786 66 2c1.996 1.365 3.174 3.737 5.286 4.41 5.423 1.727 25.34-7.981 29.14-1.294" pathLength="1"></path></svg></div>';
1970	break;
1971
1972	case 'line3':
1973	btnSVG = '<div class="premium-btn-line-wrap"><svg class="premium-btn-svg" width="100%" height="18" viewBox="0 0 59 18"><path d="M.945.149C12.3 16.142 43.573 22.572 58.785 10.842" pathLength="1"></path></svg></div>';
1974	break;
1975
1976	case 'line4':
1977	btnSVG = '<svg class="premium-btn-svg" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none"><path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"></path></svg>';
1978	break;
1979
1980	default:
1981	break;
1982	}
1983
1984	}
1985
1986	if( 'yes' === settings.premium_image_button_icon_switcher ) {
1987
1988	var iconType = settings.icon_type;
1989
1990	if( 'icon' === iconType \|\| 'svg' === iconType ) {
1991
1992	view.addRenderAttribute( 'icon', 'class', 'premium-drawable-icon' );
1993
1994	if( 'icon' === iconType ) {
1995
1996	var iconHTML = 'yes' !== settings.draw_svg ? elementor.helpers.renderIcon( view, settings.premium_image_button_icon_selection_updated, { 'class': ['premium-svg-nodraw', 'premium-drawable-icon'], 'aria-hidden': true }, 'i' , 'object' ) : false,
1997	migrated = elementor.helpers.isIconMigrated( settings, 'premium_image_button_icon_selection_updated' );
1998
1999	}
2000
2001	if ( 'yes' === settings.draw_svg ) {
2002
2003	changeToScope = 'premium-drawer-hover';
2004
2005	if ( 'icon' === iconType ) {
2006
2007	view.addRenderAttribute( 'icon', 'class', settings.premium_image_button_icon_selection_updated.value );
2008
2009	}
2010
2011	view.addRenderAttribute(
2012	'icon',
2013	{
2014	'class' : 'premium-svg-drawer',
2015	'data-svg-reverse' : settings.lottie_reverse,
2016	'data-svg-loop' : settings.lottie_loop,
2017	'data-svg-sync' : settings.svg_sync,
2018	'data-svg-hover' : settings.svg_hover,
2019	'data-svg-fill' : settings.svg_color,
2020	'data-svg-frames' : settings.frames,
2021	'data-svg-yoyo' : settings.svg_yoyo,
2022	'data-svg-point' : settings.lottie_reverse ? settings.end_point.size : settings.start_point.size,
2023	}
2024	);
2025
2026	} else {
2027	view.addRenderAttribute( 'icon', 'class', 'premium-svg-nodraw' );
2028	}
2029
2030
2031
2032	} else {
2033
2034	view.addRenderAttribute( 'lottie', {
2035	'class': 'premium-lottie-animation',
2036	'data-lottie-url': settings.lottie_url,
2037	'data-lottie-loop': settings.lottie_loop,
2038	'data-lottie-reverse': settings.lottie_reverse
2039	});
2040	}
2041
2042	}
2043
2044	var hoverEffectClass = 'style8' === hoverEffect ? 'premium-button-style8' : 'premium-image-button-' + hoverEffect;
2045
2046	#>
2047
2048	<a class="premium-image-button {{ buttonSize }} {{ styleDir }} {{ changeToScope }} {{ hoverEffectClass }}" href="{{ buttonUrl }}" data-text="{{ buttonText }}">
2049
2050	<div class="premium-image-button-text-icon-wrapper">
2051
2052	<# if ('yes' === settings.premium_image_button_icon_switcher ) {
2053	if( 'before' === settings.premium_image_button_icon_position && 'style4' !== hoverEffect ) {
2054	if( 'icon' === iconType ) {
2055	if ( iconHTML && iconHTML.rendered && ( ! buttonIcon \|\| migrated ) ) { #>
2056	{{{ iconHTML.value }}}
2057	<# } else { #>
2058	<i {{{ view.getRenderAttributeString('icon') }}}></i>
2059	<# }
2060	} else if( 'svg' === iconType ) { #>
2061	<div {{{ view.getRenderAttributeString('icon') }}}>
2062	{{{ settings.custom_svg }}}
2063	</div>
2064	<# } else { #>
2065	<div {{{ view.getRenderAttributeString('lottie') }}}></div>
2066	<# }
2067	}
2068	} #>
2069
2070	<span {{{ view.getRenderAttributeString('premium_image_button_text') }}}>{{{ buttonText }}}</span>
2071
2072	<# if ('yes' === settings.premium_image_button_icon_switcher ) {
2073	if( 'after' === settings.premium_image_button_icon_position && 'style4' !== hoverEffect ) {
2074	if( 'icon' === iconType ) {
2075	if ( iconHTML && iconHTML.rendered && ( ! buttonIcon \|\| migrated ) ) { #>
2076	{{{ iconHTML.value }}}
2077	<# } else { #>
2078	<i {{{ view.getRenderAttributeString('icon') }}}></i>
2079	<# }
2080	} else if( 'svg' === iconType ) { #>
2081	<div {{{ view.getRenderAttributeString('icon') }}}>
2082	{{{ settings.custom_svg }}}
2083	</div>
2084	<# } else { #>
2085	<div {{{ view.getRenderAttributeString('lottie') }}}></div>
2086	<# }
2087	}
2088	} #>
2089	</div>
2090
2091	<# if( 'style4' === hoverEffect ) { #>
2092	<div class="premium-image-button-style4-icon-wrapper {{ settings.premium_image_button_style4_dir }}">
2093	<# if ( 'icon' === slideIconType ) { #>
2094	<# if ( slideIconHTML && slideIconHTML.rendered && ( ! slideIcon \|\| slideMigrated ) ) { #>
2095	{{{ slideIconHTML.value }}}
2096	<# } else { #>
2097	<i class="{{ slideIcon }}" aria-hidden="true"></i>
2098	<# } #>
2099	<# } else { #>
2100	<div {{{ view.getRenderAttributeString('slide_lottie') }}}></div>
2101	<# } #>
2102	</div>
2103	<# } #>
2104
2105	<# if( 'style6' === hoverEffect && 'yes' === mouseDetect) { #>
2106	<span {{{ view.getRenderAttributeString('style6') }}}></span>
2107	<# } #>
2108
2109	<# if( 'style8' === hoverEffect ) { #>
2110	{{{ btnSVG }}}
2111	<# } #>
2112
2113	</a>
2114
2115
2116	<?php
2117	}
2118	}
2119