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

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

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

premium-image-button.php

2147 lines

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