elementor / includes / widgets / common.php

common.php in Elementor Website Builder – more than just a page builder 3.10.0-dev1, at includes/widgets/common.php

1,745 lines 42.1 KB

Raw Download Zip

1	<?php
2	namespace Elementor;
3
4	use Elementor\Core\Breakpoints\Manager as Breakpoints_Manager;
5
6	if ( ! defined( 'ABSPATH' ) ) {
7	exit; // Exit if accessed directly.
8	}
9
10	/**
11	* Elementor common widget.
12	*
13	* Elementor base widget that gives you all the advanced options of the basic
14	* widget.
15	*
16	* @since 1.0.0
17	*/
18	class Widget_Common extends Widget_Base {
19
20	/**
21	* Get widget name.
22	*
23	* Retrieve common widget name.
24	*
25	* @since 1.0.0
26	* @access public
27	*
28	* @return string Widget name.
29	*/
30	public function get_name() {
31	return 'common';
32	}
33
34	/**
35	* Show in panel.
36	*
37	* Whether to show the common widget in the panel or not.
38	*
39	* @since 1.0.0
40	* @access public
41	*
42	* @return bool Whether to show the widget in the panel.
43	*/
44	public function show_in_panel() {
45	return false;
46	}
47
48	/**
49	* Get Responsive Device Args
50	*
51	* Receives an array of device args, and duplicates it for each active breakpoint.
52	* Returns an array of device args.
53	*
54	* @since 3.4.7
55	* @deprcated 3.7.0 - Not needed anymore because responsive conditioning in the Editor was fixed in v3.7.0.
56	* @access protected
57	*
58	* @param array $args arguments to duplicate per breakpoint
59	* @param array $devices_to_exclude
60	*
61	* @return array responsive device args
62	*/
63	protected function get_responsive_device_args( array $args, array $devices_to_exclude = [] ) {
64	Plugin::$instance->modules_manager->get_modules( 'dev-tools' )->deprecation->deprecated_function( __METHOD__, '3.7.0' );
65
66	$device_args = [];
67	$breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
68
69	foreach ( $breakpoints as $breakpoint_key => $breakpoint ) {
70	// If the device is not excluded, add it to the device args array.
71	if ( ! in_array( $breakpoint_key, $devices_to_exclude, true ) ) {
72	$parsed_device_args = $this->parse_device_args_placeholders( $args, $breakpoint_key );
73
74	$device_args[ $breakpoint_key ] = $parsed_device_args;
75	}
76	}
77
78	return $device_args;
79	}
80
81	/**
82	* Parse Device Args Placeholders
83	*
84	* Receives an array of args. Iterates over the args, and replaces the {{DEVICE}} placeholder, if exists, with the
85	* passed breakpoint key.
86	*
87	* @since 3.4.7
88	* @access private
89	*
90	* @param array $args
91	* @param string $breakpoint_key
92	* @return array parsed device args
93	*/
94	private function parse_device_args_placeholders( array $args, $breakpoint_key ) {
95	$parsed_args = [];
96
97	foreach ( $args as $arg_key => $arg_value ) {
98	$arg_key = str_replace( '{{DEVICE}}', $breakpoint_key, $arg_key );
99
100	if ( is_array( $arg_value ) ) {
101	$arg_value = $this->parse_device_args_placeholders( $arg_value, $breakpoint_key );
102	}
103
104	$parsed_args[ $arg_key ] = $arg_value;
105	}
106
107	return $parsed_args;
108	}
109
110	/**
111	* @param $shape String Shape name.
112	*
113	* @return string The shape path in the assets folder.
114	*/
115	private function get_shape_url( $shape ) {
116	return ELEMENTOR_ASSETS_URL . 'mask-shapes/' . $shape . '.svg';
117	}
118
119	/**
120	* Return a translated user-friendly list of the available masking shapes.
121	*
122	* @param bool $add_custom Determine if the output should contain `Custom` options.
123	*
124	* @return array Array of shapes with their URL as key.
125	*/
126	private function get_shapes( $add_custom = true ) {
127	$shapes = [
128	'circle' => esc_html__( 'Circle', 'elementor' ),
129	'flower' => esc_html__( 'Flower', 'elementor' ),
130	'sketch' => esc_html__( 'Sketch', 'elementor' ),
131	'triangle' => esc_html__( 'Triangle', 'elementor' ),
132	'blob' => esc_html__( 'Blob', 'elementor' ),
133	'hexagon' => esc_html__( 'Hexagon', 'elementor' ),
134	];
135
136	if ( $add_custom ) {
137	$shapes['custom'] = esc_html__( 'Custom', 'elementor' );
138	}
139
140	return $shapes;
141	}
142
143	/**
144	* Gets a string of CSS rules to apply, and returns an array of selectors with those rules.
145	* This function has been created in order to deal with masking for image widget.
146	* For most of the widgets the mask is being applied to the wrapper itself, but in the case of an image widget,
147	* the `img` tag should be masked directly. So instead of writing a lot of selectors every time,
148	* this function builds both of those selectors easily.
149	*
150	* @param $rules string The CSS rules to apply.
151	*
152	* @return array Selectors with the rules applied.
153	*/
154	private function get_mask_selectors( $rules ) {
155	$mask_selectors = [
156	'default' => '{{WRAPPER}}:not( .elementor-widget-image ) .elementor-widget-container',
157	'image' => '{{WRAPPER}}.elementor-widget-image .elementor-widget-container img',
158	];
159
160	return [
161	$mask_selectors['default'] => $rules,
162	$mask_selectors['image'] => $rules,
163	];
164	}
165
166	/**
167	* Register the Layout section.
168	*
169	* @return void
170	*/
171	private function register_layout_section() {
172	$this->start_controls_section(
173	'_section_style',
174	[
175	'label' => esc_html__( 'Layout', 'elementor' ),
176	'tab' => Controls_Manager::TAB_ADVANCED,
177	]
178	);
179
180	// Element Name for the Navigator
181	$this->add_control(
182	'_title',
183	[
184	'label' => esc_html__( 'Title', 'elementor' ),
185	'type' => Controls_Manager::HIDDEN,
186	'render_type' => 'none',
187	]
188	);
189
190	$this->add_responsive_control(
191	'_margin',
192	[
193	'label' => esc_html__( 'Margin', 'elementor' ),
194	'type' => Controls_Manager::DIMENSIONS,
195	'size_units' => [ 'px', 'em', '%', 'rem' ],
196	'selectors' => [
197	'{{WRAPPER}} > .elementor-widget-container' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
198	],
199	]
200	);
201
202	$this->add_responsive_control(
203	'_padding',
204	[
205	'label' => esc_html__( 'Padding', 'elementor' ),
206	'type' => Controls_Manager::DIMENSIONS,
207	'size_units' => [ 'px', 'em', '%', 'rem' ],
208	'selectors' => [
209	'{{WRAPPER}} > .elementor-widget-container' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
210	],
211	]
212	);
213
214	$experiments_manager = Plugin::$instance->experiments;
215	$is_container_active = $experiments_manager->is_feature_active( 'container' );
216
217	$this->add_responsive_control(
218	'_element_width',
219	[
220	'label' => esc_html__( 'Width', 'elementor' ),
221	'type' => Controls_Manager::SELECT,
222	'default' => '',
223	'options' => [
224	'' => esc_html__( 'Default', 'elementor' ),
225	'inherit' => esc_html__( 'Full Width', 'elementor' ) . ' (100%)',
226	'auto' => esc_html__( 'Inline', 'elementor' ) . ' (auto)',
227	'initial' => esc_html__( 'Custom', 'elementor' ),
228	],
229	'selectors_dictionary' => [
230	'inherit' => '100%',
231	],
232	'prefix_class' => 'elementor-widget%s__width-',
233	'selectors' => [
234	'{{WRAPPER}}' => 'width: {{VALUE}}; max-width: {{VALUE}}',
235	],
236	]
237	);
238
239	$this->add_responsive_control(
240	'_element_custom_width',
241	[
242	'label' => esc_html__( 'Width', 'elementor' ),
243	'type' => Controls_Manager::SLIDER,
244	'default' => [
245	'unit' => '%',
246	],
247	'range' => [
248	'px' => [
249	'max' => 1000,
250	'step' => 1,
251	],
252	'%' => [
253	'max' => 100,
254	'step' => 1,
255	],
256	],
257	'size_units' => [ 'px', '%', 'vw' ],
258	'selectors' => [
259	'{{WRAPPER}}' => 'width: {{SIZE}}{{UNIT}}; max-width: {{SIZE}}{{UNIT}}',
260	],
261	'condition' => [ '_element_width' => 'initial' ],
262	]
263	);
264
265	// Register Flex controls only if the Container experiment is active.
266	if ( $is_container_active ) {
267	$this->add_group_control(
268	Group_Control_Flex_Item::get_type(),
269	[
270	'name' => '_flex',
271	// Hack to increase specificity and make sure that the current widget overrides the
272	// parent flex settings.
273	'selector' => '{{WRAPPER}}.elementor-element',
274	'include' => [
275	'align_self',
276	'order',
277	'order_custom',
278	'size',
279	'grow',
280	'shrink',
281	],
282	'fields_options' => [
283	'align_self' => [
284	'separator' => 'before',
285	],
286	],
287	]
288	);
289	}
290
291	$vertical_align_conditions = [
292	'_element_width!' => '',
293	'_position' => '',
294	];
295
296	if ( $is_container_active ) {
297	$vertical_align_conditions['_element_vertical_align!'] = ''; // TODO: For BC.
298	}
299
300	// TODO: For BC - Remove in the future.
301	$this->add_responsive_control(
302	'_element_vertical_align',
303	[
304	'label' => esc_html__( 'Vertical Align', 'elementor' ),
305	'type' => Controls_Manager::CHOOSE,
306	'options' => [
307	'flex-start' => [
308	'title' => esc_html__( 'Start', 'elementor' ),
309	'icon' => 'eicon-v-align-top',
310	],
311	'center' => [
312	'title' => esc_html__( 'Center', 'elementor' ),
313	'icon' => 'eicon-v-align-middle',
314	],
315	'flex-end' => [
316	'title' => esc_html__( 'End', 'elementor' ),
317	'icon' => 'eicon-v-align-bottom',
318	],
319	],
320	'condition' => $vertical_align_conditions,
321	'selectors' => [
322	'{{WRAPPER}}' => 'align-self: {{VALUE}}',
323	],
324	]
325	);
326
327	$this->add_control(
328	'_position_description',
329	[
330	'raw' => '<strong>' . esc_html__( 'Please note!', 'elementor' ) . '</strong> ' . esc_html__( 'Custom positioning is not considered best practice for responsive web design and should not be used too frequently.', 'elementor' ),
331	'type' => Controls_Manager::RAW_HTML,
332	'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
333	'render_type' => 'ui',
334	'condition' => [
335	'_position!' => '',
336	],
337	]
338	);
339
340	$this->add_control(
341	'_position',
342	[
343	'label' => esc_html__( 'Position', 'elementor' ),
344	'type' => Controls_Manager::SELECT,
345	'default' => '',
346	'options' => [
347	'' => esc_html__( 'Default', 'elementor' ),
348	'absolute' => esc_html__( 'Absolute', 'elementor' ),
349	'fixed' => esc_html__( 'Fixed', 'elementor' ),
350	],
351	'prefix_class' => 'elementor-',
352	'frontend_available' => true,
353	'separator' => 'before',
354	]
355	);
356
357	$start = is_rtl() ? esc_html__( 'Right', 'elementor' ) : esc_html__( 'Left', 'elementor' );
358	$end = ! is_rtl() ? esc_html__( 'Right', 'elementor' ) : esc_html__( 'Left', 'elementor' );
359
360	$this->add_control(
361	'_offset_orientation_h',
362	[
363	'label' => esc_html__( 'Horizontal Orientation', 'elementor' ),
364	'type' => Controls_Manager::CHOOSE,
365	'toggle' => false,
366	'default' => 'start',
367	'options' => [
368	'start' => [
369	'title' => $start,
370	'icon' => 'eicon-h-align-left',
371	],
372	'end' => [
373	'title' => $end,
374	'icon' => 'eicon-h-align-right',
375	],
376	],
377	'classes' => 'elementor-control-start-end',
378	'render_type' => 'ui',
379	'condition' => [
380	'_position!' => '',
381	],
382	]
383	);
384
385	$this->add_responsive_control(
386	'_offset_x',
387	[
388	'label' => esc_html__( 'Offset', 'elementor' ),
389	'type' => Controls_Manager::SLIDER,
390	'range' => [
391	'px' => [
392	'min' => -1000,
393	'max' => 1000,
394	'step' => 1,
395	],
396	'%' => [
397	'min' => -200,
398	'max' => 200,
399	],
400	'vw' => [
401	'min' => -200,
402	'max' => 200,
403	],
404	'vh' => [
405	'min' => -200,
406	'max' => 200,
407	],
408	],
409	'default' => [
410	'size' => '0',
411	],
412	'size_units' => [ 'px', '%', 'vw', 'vh' ],
413	'selectors' => [
414	'body:not(.rtl) {{WRAPPER}}' => 'left: {{SIZE}}{{UNIT}}',
415	'body.rtl {{WRAPPER}}' => 'right: {{SIZE}}{{UNIT}}',
416	],
417	'condition' => [
418	'_offset_orientation_h!' => 'end',
419	'_position!' => '',
420	],
421	]
422	);
423
424	$this->add_responsive_control(
425	'_offset_x_end',
426	[
427	'label' => esc_html__( 'Offset', 'elementor' ),
428	'type' => Controls_Manager::SLIDER,
429	'range' => [
430	'px' => [
431	'min' => -1000,
432	'max' => 1000,
433	'step' => 0.1,
434	],
435	'%' => [
436	'min' => -200,
437	'max' => 200,
438	],
439	'vw' => [
440	'min' => -200,
441	'max' => 200,
442	],
443	'vh' => [
444	'min' => -200,
445	'max' => 200,
446	],
447	],
448	'default' => [
449	'size' => '0',
450	],
451	'size_units' => [ 'px', '%', 'vw', 'vh' ],
452	'selectors' => [
453	'body:not(.rtl) {{WRAPPER}}' => 'right: {{SIZE}}{{UNIT}}',
454	'body.rtl {{WRAPPER}}' => 'left: {{SIZE}}{{UNIT}}',
455	],
456	'condition' => [
457	'_offset_orientation_h' => 'end',
458	'_position!' => '',
459	],
460	]
461	);
462
463	$this->add_control(
464	'_offset_orientation_v',
465	[
466	'label' => esc_html__( 'Vertical Orientation', 'elementor' ),
467	'type' => Controls_Manager::CHOOSE,
468	'toggle' => false,
469	'default' => 'start',
470	'options' => [
471	'start' => [
472	'title' => esc_html__( 'Top', 'elementor' ),
473	'icon' => 'eicon-v-align-top',
474	],
475	'end' => [
476	'title' => esc_html__( 'Bottom', 'elementor' ),
477	'icon' => 'eicon-v-align-bottom',
478	],
479	],
480	'render_type' => 'ui',
481	'condition' => [
482	'_position!' => '',
483	],
484	]
485	);
486
487	$this->add_responsive_control(
488	'_offset_y',
489	[
490	'label' => esc_html__( 'Offset', 'elementor' ),
491	'type' => Controls_Manager::SLIDER,
492	'range' => [
493	'px' => [
494	'min' => -1000,
495	'max' => 1000,
496	'step' => 1,
497	],
498	'%' => [
499	'min' => -200,
500	'max' => 200,
501	],
502	'vh' => [
503	'min' => -200,
504	'max' => 200,
505	],
506	'vw' => [
507	'min' => -200,
508	'max' => 200,
509	],
510	],
511	'size_units' => [ 'px', '%', 'vh', 'vw' ],
512	'default' => [
513	'size' => '0',
514	],
515	'selectors' => [
516	'{{WRAPPER}}' => 'top: {{SIZE}}{{UNIT}}',
517	],
518	'condition' => [
519	'_offset_orientation_v!' => 'end',
520	'_position!' => '',
521	],
522	]
523	);
524
525	$this->add_responsive_control(
526	'_offset_y_end',
527	[
528	'label' => esc_html__( 'Offset', 'elementor' ),
529	'type' => Controls_Manager::SLIDER,
530	'range' => [
531	'px' => [
532	'min' => -1000,
533	'max' => 1000,
534	'step' => 1,
535	],
536	'%' => [
537	'min' => -200,
538	'max' => 200,
539	],
540	'vh' => [
541	'min' => -200,
542	'max' => 200,
543	],
544	'vw' => [
545	'min' => -200,
546	'max' => 200,
547	],
548	],
549	'size_units' => [ 'px', '%', 'vh', 'vw' ],
550	'default' => [
551	'size' => '0',
552	],
553	'selectors' => [
554	'{{WRAPPER}}' => 'bottom: {{SIZE}}{{UNIT}}',
555	],
556	'condition' => [
557	'_offset_orientation_v' => 'end',
558	'_position!' => '',
559	],
560	]
561	);
562
563	$this->add_responsive_control(
564	'_z_index',
565	[
566	'label' => esc_html__( 'Z-Index', 'elementor' ),
567	'type' => Controls_Manager::NUMBER,
568	'selectors' => [
569	'{{WRAPPER}}' => 'z-index: {{VALUE}};',
570	],
571	]
572	);
573
574	$this->add_control(
575	'_element_id',
576	[
577	'label' => esc_html__( 'CSS ID', 'elementor' ),
578	'type' => Controls_Manager::TEXT,
579	'dynamic' => [
580	'active' => true,
581	],
582	'default' => '',
583	'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
584	'style_transfer' => false,
585	'classes' => 'elementor-control-direction-ltr',
586	]
587	);
588
589	$this->add_control(
590	'_css_classes',
591	[
592	'label' => esc_html__( 'CSS Classes', 'elementor' ),
593	'type' => Controls_Manager::TEXT,
594	'dynamic' => [
595	'active' => true,
596	],
597	'prefix_class' => '',
598	'title' => esc_html__( 'Add your custom class WITHOUT the dot. e.g: my-class', 'elementor' ),
599	'classes' => 'elementor-control-direction-ltr',
600	]
601	);
602
603	$this->end_controls_section();
604	}
605
606	/**
607	* Register the Motion Effects section.
608	*
609	* @return void
610	*/
611	private function register_effects_section() {
612	$this->start_controls_section(
613	'section_effects',
614	[
615	'label' => esc_html__( 'Motion Effects', 'elementor' ),
616	'tab' => Controls_Manager::TAB_ADVANCED,
617	]
618	);
619
620	$this->add_responsive_control(
621	'_animation',
622	[
623	'label' => esc_html__( 'Entrance Animation', 'elementor' ),
624	'type' => Controls_Manager::ANIMATION,
625	'frontend_available' => true,
626	]
627	);
628
629	$this->add_control(
630	'animation_duration',
631	[
632	'label' => esc_html__( 'Animation Duration', 'elementor' ),
633	'type' => Controls_Manager::SELECT,
634	'default' => '',
635	'options' => [
636	'slow' => esc_html__( 'Slow', 'elementor' ),
637	'' => esc_html__( 'Normal', 'elementor' ),
638	'fast' => esc_html__( 'Fast', 'elementor' ),
639	],
640	'prefix_class' => 'animated-',
641	'condition' => [
642	'_animation!' => '',
643	],
644	]
645	);
646
647	$this->add_control(
648	'_animation_delay',
649	[
650	'label' => esc_html__( 'Animation Delay', 'elementor' ) . ' (ms)',
651	'type' => Controls_Manager::NUMBER,
652	'default' => '',
653	'min' => 0,
654	'step' => 100,
655	'condition' => [
656	'_animation!' => '',
657	],
658	'render_type' => 'none',
659	'frontend_available' => true,
660	]
661	);
662
663	$this->end_controls_section();
664	}
665
666	private function register_transform_section() {
667	$this->start_controls_section(
668	'_section_transform',
669	[
670	'label' => esc_html__( 'Transform', 'elementor' ),
671	'tab' => Controls_Manager::TAB_ADVANCED,
672	]
673	);
674
675	$this->start_controls_tabs( '_tabs_positioning' );
676
677	$transform_prefix_class = 'e-';
678	$transform_return_value = 'transform';
679
680	foreach ( [ '', '_hover' ] as $tab ) {
681	$state = '_hover' === $tab ? ':hover' : '';
682
683	$this->start_controls_tab(
684	"_tab_positioning{$tab}",
685	[
686	'label' => '' === $tab ? esc_html__( 'Normal', 'elementor' ) : esc_html__( 'Hover', 'elementor' ),
687	]
688	);
689
690	$this->add_control(
691	"_transform_rotate_popover{$tab}",
692	[
693	'label' => esc_html__( 'Rotate', 'elementor' ),
694	'type' => Controls_Manager::POPOVER_TOGGLE,
695	'prefix_class' => $transform_prefix_class,
696	'return_value' => $transform_return_value,
697	]
698	);
699
700	$this->start_popover();
701
702	$this->add_responsive_control(
703	"_transform_rotateZ_effect{$tab}",
704	[
705	'label' => esc_html__( 'Rotate', 'elementor' ),
706	'type' => Controls_Manager::SLIDER,
707	'size_units' => [ 'deg', 'grad', 'rad', 'turn' ],
708	'range' => [
709	'deg' => [
710	'min' => -360,
711	'max' => 360,
712	],
713	'grad' => [
714	'min' => -400,
715	'max' => 400,
716	],
717	'rad' => [
718	'min' => -6.2832,
719	'max' => 6.2832,
720	],
721	'turn' => [
722	'min' => -1,
723	'max' => 1,
724	],
725	],
726	'selectors' => [
727	"{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-rotateZ: {{SIZE}}{{UNIT}};',
728	],
729	'condition' => [
730	"_transform_rotate_popover{$tab}!" => '',
731	],
732	'frontend_available' => true,
733	]
734	);
735
736	$this->add_control(
737	"_transform_rotate_3d{$tab}",
738	[
739	'label' => esc_html__( '3D Rotate', 'elementor' ),
740	'type' => Controls_Manager::SWITCHER,
741	'label_on' => esc_html__( 'On', 'elementor' ),
742	'label_off' => esc_html__( 'Off', 'elementor' ),
743	'selectors' => [
744	"{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-rotateX: 1deg; --e-transform-perspective: 20px;',
745	],
746	'condition' => [
747	"_transform_rotate_popover{$tab}!" => '',
748	],
749	]
750	);
751
752	$this->add_responsive_control(
753	"_transform_rotateX_effect{$tab}",
754	[
755	'label' => esc_html__( 'Rotate X', 'elementor' ),
756	'type' => Controls_Manager::SLIDER,
757	'size_units' => [ 'deg', 'grad', 'rad', 'turn' ],
758	'range' => [
759	'deg' => [
760	'min' => -360,
761	'max' => 360,
762	],
763	'grad' => [
764	'min' => -400,
765	'max' => 400,
766	],
767	'rad' => [
768	'min' => -6.2832,
769	'max' => 6.2832,
770	],
771	'turn' => [
772	'min' => -1,
773	'max' => 1,
774	],
775	],
776	'condition' => [
777	"_transform_rotate_3d{$tab}!" => '',
778	"_transform_rotate_popover{$tab}!" => '',
779	],
780	'selectors' => [
781	"{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-rotateX: {{SIZE}}{{UNIT}};',
782	],
783	'frontend_available' => true,
784	]
785	);
786
787	$this->add_responsive_control(
788	"_transform_rotateY_effect{$tab}",
789	[
790	'label' => esc_html__( 'Rotate Y', 'elementor' ),
791	'type' => Controls_Manager::SLIDER,
792	'size_units' => [ 'deg', 'grad', 'rad', 'turn' ],
793	'range' => [
794	'deg' => [
795	'min' => -360,
796	'max' => 360,
797	],
798	'grad' => [
799	'min' => -400,
800	'max' => 400,
801	],
802	'rad' => [
803	'min' => -6.2832,
804	'max' => 6.2832,
805	],
806	'turn' => [
807	'min' => -1,
808	'max' => 1,
809	],
810	],
811	'condition' => [
812	"_transform_rotate_3d{$tab}!" => '',
813	"_transform_rotate_popover{$tab}!" => '',
814	],
815	'selectors' => [
816	"{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-rotateY: {{SIZE}}{{UNIT}};',
817	],
818	'frontend_available' => true,
819	]
820	);
821
822	$this->add_responsive_control(
823	"_transform_perspective_effect{$tab}",
824	[
825	'label' => esc_html__( 'Perspective', 'elementor' ),
826	'type' => Controls_Manager::SLIDER,
827	'range' => [
828	'px' => [
829	'min' => 0,
830	'max' => 1000,
831	],
832	],
833	'condition' => [
834	"_transform_rotate_popover{$tab}!" => '',
835	"_transform_rotate_3d{$tab}!" => '',
836	],
837	'selectors' => [
838	"{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-perspective: {{SIZE}}px',
839	],
840	'frontend_available' => true,
841	]
842	);
843
844	$this->end_popover();
845
846	$this->add_control(
847	"_transform_translate_popover{$tab}",
848	[
849	'label' => esc_html__( 'Offset', 'elementor' ),
850	'type' => Controls_Manager::POPOVER_TOGGLE,
851	'prefix_class' => $transform_prefix_class,
852	'return_value' => $transform_return_value,
853	]
854	);
855
856	$this->start_popover();
857
858	$this->add_responsive_control(
859	"_transform_translateX_effect{$tab}",
860	[
861	'label' => esc_html__( 'Offset X', 'elementor' ),
862	'type' => Controls_Manager::SLIDER,
863	'size_units' => [ '%', 'px' ],
864	'range' => [
865	'%' => [
866	'min' => -100,
867	'max' => 100,
868	],
869	'px' => [
870	'min' => -1000,
871	'max' => 1000,
872	],
873	],
874	'condition' => [
875	"_transform_translate_popover{$tab}!" => '',
876	],
877	'selectors' => [
878	"{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-translateX: {{SIZE}}{{UNIT}};',
879	],
880	'frontend_available' => true,
881	]
882	);
883
884	$this->add_responsive_control(
885	"_transform_translateY_effect{$tab}",
886	[
887	'label' => esc_html__( 'Offset Y', 'elementor' ),
888	'type' => Controls_Manager::SLIDER,
889	'size_units' => [ '%', 'px' ],
890	'range' => [
891	'%' => [
892	'min' => -100,
893	'max' => 100,
894	],
895	'px' => [
896	'min' => -1000,
897	'max' => 1000,
898	],
899	],
900	'condition' => [
901	"_transform_translate_popover{$tab}!" => '',
902	],
903	'selectors' => [
904	"{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-translateY: {{SIZE}}{{UNIT}};',
905	],
906	'frontend_available' => true,
907	]
908	);
909
910	$this->end_popover();
911
912	$this->add_control(
913	"_transform_scale_popover{$tab}",
914	[
915	'label' => esc_html__( 'Scale', 'elementor' ),
916	'type' => Controls_Manager::POPOVER_TOGGLE,
917	'prefix_class' => $transform_prefix_class,
918	'return_value' => $transform_return_value,
919	]
920	);
921
922	$this->start_popover();
923
924	$this->add_control(
925	"_transform_keep_proportions{$tab}",
926	[
927	'label' => esc_html__( 'Keep Proportions', 'elementor' ),
928	'type' => Controls_Manager::SWITCHER,
929	'label_on' => esc_html__( 'On', 'elementor' ),
930	'label_off' => esc_html__( 'Off', 'elementor' ),
931	'default' => 'yes',
932	]
933	);
934
935	$this->add_responsive_control(
936	"_transform_scale_effect{$tab}",
937	[
938	'label' => esc_html__( 'Scale', 'elementor' ),
939	'type' => Controls_Manager::SLIDER,
940	'range' => [
941	'px' => [
942	'min' => 0,
943	'max' => 2,
944	'step' => 0.1,
945	],
946	],
947	'condition' => [
948	"_transform_scale_popover{$tab}!" => '',
949	"_transform_keep_proportions{$tab}!" => '',
950	],
951	'selectors' => [
952	"{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-scale: {{SIZE}};',
953	],
954	'frontend_available' => true,
955	]
956	);
957
958	$this->add_responsive_control(
959	"_transform_scaleX_effect{$tab}",
960	[
961	'label' => esc_html__( 'Scale X', 'elementor' ),
962	'type' => Controls_Manager::SLIDER,
963	'range' => [
964	'px' => [
965	'min' => 0,
966	'max' => 2,
967	'step' => 0.1,
968	],
969	],
970	'condition' => [
971	"_transform_scale_popover{$tab}!" => '',
972	"_transform_keep_proportions{$tab}" => '',
973	],
974	'selectors' => [
975	"{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-scaleX: {{SIZE}};',
976	],
977	'frontend_available' => true,
978	]
979	);
980
981	$this->add_responsive_control(
982	"_transform_scaleY_effect{$tab}",
983	[
984	'label' => esc_html__( 'Scale Y', 'elementor' ),
985	'type' => Controls_Manager::SLIDER,
986	'range' => [
987	'px' => [
988	'min' => 0,
989	'max' => 2,
990	'step' => 0.1,
991	],
992	],
993	'condition' => [
994	"_transform_scale_popover{$tab}!" => '',
995	"_transform_keep_proportions{$tab}" => '',
996	],
997	'selectors' => [
998	"{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-scaleY: {{SIZE}};',
999	],
1000	'frontend_available' => true,
1001	]
1002	);
1003
1004	$this->end_popover();
1005
1006	$this->add_control(
1007	"_transform_skew_popover{$tab}",
1008	[
1009	'label' => esc_html__( 'Skew', 'elementor' ),
1010	'type' => Controls_Manager::POPOVER_TOGGLE,
1011	'prefix_class' => $transform_prefix_class,
1012	'return_value' => $transform_return_value,
1013	]
1014	);
1015
1016	$this->start_popover();
1017
1018	$this->add_responsive_control(
1019	"_transform_skewX_effect{$tab}",
1020	[
1021	'label' => esc_html__( 'Skew X', 'elementor' ),
1022	'type' => Controls_Manager::SLIDER,
1023	'size_units' => [ 'deg', 'grad', 'rad', 'turn' ],
1024	'range' => [
1025	'deg' => [
1026	'min' => -360,
1027	'max' => 360,
1028	],
1029	'grad' => [
1030	'min' => -400,
1031	'max' => 400,
1032	],
1033	'rad' => [
1034	'min' => -6.2832,
1035	'max' => 6.2832,
1036	],
1037	'turn' => [
1038	'min' => -1,
1039	'max' => 1,
1040	],
1041	],
1042	'condition' => [
1043	"_transform_skew_popover{$tab}!" => '',
1044	],
1045	'selectors' => [
1046	"{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-skewX: {{SIZE}}{{UNIT}};',
1047	],
1048	'frontend_available' => true,
1049	]
1050	);
1051
1052	$this->add_responsive_control(
1053	"_transform_skewY_effect{$tab}",
1054	[
1055	'label' => esc_html__( 'Skew Y', 'elementor' ),
1056	'type' => Controls_Manager::SLIDER,
1057	'size_units' => [ 'deg', 'grad', 'rad', 'turn' ],
1058	'range' => [
1059	'deg' => [
1060	'min' => -360,
1061	'max' => 360,
1062	],
1063	'grad' => [
1064	'min' => -400,
1065	'max' => 400,
1066	],
1067	'rad' => [
1068	'min' => -6.2832,
1069	'max' => 6.2832,
1070	],
1071	'turn' => [
1072	'min' => -1,
1073	'max' => 1,
1074	],
1075	],
1076	'condition' => [
1077	"_transform_skew_popover{$tab}!" => '',
1078	],
1079	'selectors' => [
1080	"{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-skewY: {{SIZE}}{{UNIT}};',
1081	],
1082	'frontend_available' => true,
1083	]
1084	);
1085
1086	$this->end_popover();
1087
1088	$this->add_control(
1089	"_transform_flipX_effect{$tab}",
1090	[
1091	'label' => esc_html__( 'Flip Horizontal', 'elementor' ),
1092	'type' => Controls_Manager::CHOOSE,
1093	'options' => [
1094	'transform' => [
1095	'title' => esc_html__( 'Flip Horizontal', 'elementor' ),
1096	'icon' => 'eicon-flip eicon-tilted',
1097	],
1098	],
1099	'prefix_class' => $transform_prefix_class,
1100	'selectors' => [
1101	"{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-flipX: -1',
1102	],
1103	'frontend_available' => true,
1104	]
1105	);
1106
1107	$this->add_control(
1108	"_transform_flipY_effect{$tab}",
1109	[
1110	'label' => esc_html__( 'Flip Vertical', 'elementor' ),
1111	'type' => Controls_Manager::CHOOSE,
1112	'options' => [
1113	'transform' => [
1114	'title' => esc_html__( 'Flip Vertical', 'elementor' ),
1115	'icon' => 'eicon-flip',
1116	],
1117	],
1118	'prefix_class' => $transform_prefix_class,
1119	'selectors' => [
1120	"{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-flipY: -1',
1121	],
1122	'frontend_available' => true,
1123	]
1124	);
1125
1126	if ( '_hover' === $tab ) {
1127	$this->add_control(
1128	'_transform_transition_hover',
1129	[
1130	'label' => esc_html__( 'Transition Duration', 'elementor' ),
1131	'type' => Controls_Manager::SLIDER,
1132	'size_units' => [ 's', 'ms' ],
1133	'default' => [
1134	'unit' => 'ms',
1135	],
1136	'range' => [
1137	's' => [
1138	'max' => 10,
1139	],
1140	'ms' => [
1141	'max' => 10000,
1142	],
1143	],
1144	'selectors' => [
1145	'{{WRAPPER}} > .elementor-widget-container' => '--e-transform-transition-duration: {{SIZE}}{{UNIT}}',
1146	],
1147	]
1148	);
1149	}
1150
1151	${"transform_origin_conditions{$tab}"} = [
1152	[
1153	'name' => "_transform_scale_popover{$tab}",
1154	'operator' => '!=',
1155	'value' => '',
1156	],
1157	[
1158	'name' => "_transform_rotate_popover{$tab}",
1159	'operator' => '!=',
1160	'value' => '',
1161	],
1162	[
1163	'name' => "_transform_flipX_effect{$tab}",
1164	'operator' => '!=',
1165	'value' => '',
1166	],
1167	[
1168	'name' => "_transform_flipY_effect{$tab}",
1169	'operator' => '!=',
1170	'value' => '',
1171	],
1172	];
1173
1174	$this->end_controls_tab();
1175	}
1176
1177	$this->end_controls_tabs();
1178
1179	$transform_origin_conditions = [
1180	'relation' => 'or',
1181	'terms' => array_merge( $transform_origin_conditions, $transform_origin_conditions_hover ),
1182	];
1183
1184	// Will override motion effect transform-origin
1185	$this->add_responsive_control(
1186	'motion_fx_transform_x_anchor_point',
1187	[
1188	'label' => esc_html__( 'X Anchor Point', 'elementor' ),
1189	'type' => Controls_Manager::CHOOSE,
1190	'options' => [
1191	'left' => [
1192	'title' => esc_html__( 'Left', 'elementor' ),
1193	'icon' => 'eicon-h-align-left',
1194	],
1195	'center' => [
1196	'title' => esc_html__( 'Center', 'elementor' ),
1197	'icon' => 'eicon-h-align-center',
1198	],
1199	'right' => [
1200	'title' => esc_html__( 'Right', 'elementor' ),
1201	'icon' => 'eicon-h-align-right',
1202	],
1203	],
1204	'conditions' => $transform_origin_conditions,
1205	'separator' => 'before',
1206	'selectors' => [
1207	'{{WRAPPER}}' => '--e-transform-origin-x: {{VALUE}}',
1208	],
1209	]
1210	);
1211
1212	// Will override motion effect transform-origin
1213	$this->add_responsive_control(
1214	'motion_fx_transform_y_anchor_point',
1215	[
1216	'label' => esc_html__( 'Y Anchor Point', 'elementor' ),
1217	'type' => Controls_Manager::CHOOSE,
1218	'options' => [
1219	'top' => [
1220	'title' => esc_html__( 'Top', 'elementor' ),
1221	'icon' => 'eicon-v-align-top',
1222	],
1223	'center' => [
1224	'title' => esc_html__( 'Center', 'elementor' ),
1225	'icon' => 'eicon-v-align-middle',
1226	],
1227	'bottom' => [
1228	'title' => esc_html__( 'Bottom', 'elementor' ),
1229	'icon' => 'eicon-v-align-bottom',
1230	],
1231	],
1232	'conditions' => $transform_origin_conditions,
1233	'selectors' => [
1234	'{{WRAPPER}}' => '--e-transform-origin-y: {{VALUE}}',
1235	],
1236	]
1237	);
1238
1239	$this->end_controls_section();
1240	}
1241
1242	/**
1243	* Register the Background section.
1244	*
1245	* @return void
1246	*/
1247	private function register_background_section() {
1248	$this->start_controls_section(
1249	'_section_background',
1250	[
1251	'label' => esc_html__( 'Background', 'elementor' ),
1252	'tab' => Controls_Manager::TAB_ADVANCED,
1253	]
1254	);
1255
1256	$this->start_controls_tabs( '_tabs_background' );
1257
1258	$this->start_controls_tab(
1259	'_tab_background_normal',
1260	[
1261	'label' => esc_html__( 'Normal', 'elementor' ),
1262	]
1263	);
1264
1265	$this->add_group_control(
1266	Group_Control_Background::get_type(),
1267	[
1268	'name' => '_background',
1269	'selector' => '{{WRAPPER}} > .elementor-widget-container',
1270	'fields_options' => [
1271	'image' => [
1272	'background_lazyload' => [
1273	'active' => true,
1274	'keys' => [ '_background_image', 'url' ],
1275	'selector' => '.elementor-widget-container',
1276	],
1277	],
1278	],
1279	]
1280	);
1281
1282	$this->end_controls_tab();
1283
1284	$this->start_controls_tab(
1285	'_tab_background_hover',
1286	[
1287	'label' => esc_html__( 'Hover', 'elementor' ),
1288	]
1289	);
1290
1291	$this->add_group_control(
1292	Group_Control_Background::get_type(),
1293	[
1294	'name' => '_background_hover',
1295	'selector' => '{{WRAPPER}}:hover .elementor-widget-container',
1296	]
1297	);
1298
1299	$this->add_control(
1300	'_background_hover_transition',
1301	[
1302	'label' => esc_html__( 'Transition Duration', 'elementor' ),
1303	'type' => Controls_Manager::SLIDER,
1304	'size_units' => [ 's', 'ms' ],
1305	'default' => [
1306	'unit' => 's',
1307	],
1308	'render_type' => 'ui',
1309	'separator' => 'before',
1310	'selectors' => [
1311	'{{WRAPPER}} > .elementor-widget-container' => 'transition: background {{SIZE}}{{UNIT}}',
1312	],
1313	]
1314	);
1315
1316	$this->end_controls_tab();
1317
1318	$this->end_controls_tabs();
1319
1320	$this->end_controls_section();
1321	}
1322
1323	/**
1324	* Register the Border section.
1325	*
1326	* @return void
1327	*/
1328	private function register_border_section() {
1329	$this->start_controls_section(
1330	'_section_border',
1331	[
1332	'label' => esc_html__( 'Border', 'elementor' ),
1333	'tab' => Controls_Manager::TAB_ADVANCED,
1334	]
1335	);
1336
1337	$this->start_controls_tabs( '_tabs_border' );
1338
1339	$this->start_controls_tab(
1340	'_tab_border_normal',
1341	[
1342	'label' => esc_html__( 'Normal', 'elementor' ),
1343	]
1344	);
1345
1346	$this->add_group_control(
1347	Group_Control_Border::get_type(),
1348	[
1349	'name' => '_border',
1350	'selector' => '{{WRAPPER}} > .elementor-widget-container',
1351	]
1352	);
1353
1354	$this->add_responsive_control(
1355	'_border_radius',
1356	[
1357	'label' => esc_html__( 'Border Radius', 'elementor' ),
1358	'type' => Controls_Manager::DIMENSIONS,
1359	'size_units' => [ 'px', '%', 'em' ],
1360	'selectors' => [
1361	'{{WRAPPER}} > .elementor-widget-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1362	],
1363	]
1364	);
1365
1366	$this->add_group_control(
1367	Group_Control_Box_Shadow::get_type(),
1368	[
1369	'name' => '_box_shadow',
1370	'selector' => '{{WRAPPER}} > .elementor-widget-container',
1371	]
1372	);
1373
1374	$this->end_controls_tab();
1375
1376	$this->start_controls_tab(
1377	'_tab_border_hover',
1378	[
1379	'label' => esc_html__( 'Hover', 'elementor' ),
1380	]
1381	);
1382
1383	$this->add_group_control(
1384	Group_Control_Border::get_type(),
1385	[
1386	'name' => '_border_hover',
1387	'selector' => '{{WRAPPER}}:hover .elementor-widget-container',
1388	]
1389	);
1390
1391	$this->add_responsive_control(
1392	'_border_radius_hover',
1393	[
1394	'label' => esc_html__( 'Border Radius', 'elementor' ),
1395	'type' => Controls_Manager::DIMENSIONS,
1396	'size_units' => [ 'px', '%', 'em' ],
1397	'selectors' => [
1398	'{{WRAPPER}}:hover > .elementor-widget-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1399	],
1400	]
1401	);
1402
1403	$this->add_group_control(
1404	Group_Control_Box_Shadow::get_type(),
1405	[
1406	'name' => '_box_shadow_hover',
1407	'selector' => '{{WRAPPER}}:hover .elementor-widget-container',
1408	]
1409	);
1410
1411	$this->add_control(
1412	'_border_hover_transition',
1413	[
1414	'label' => esc_html__( 'Transition Duration', 'elementor' ),
1415	'type' => Controls_Manager::SLIDER,
1416	'separator' => 'before',
1417	'size_units' => [ 's', 'ms' ],
1418	'default' => [
1419	'unit' => 's',
1420	],
1421	'selectors' => [
1422	'{{WRAPPER}} .elementor-widget-container' => 'transition: background {{_background_hover_transition.SIZE}}{{_background_hover_transition.UNIT}}, border {{SIZE}}{{UNIT}}, border-radius {{SIZE}}{{UNIT}}, box-shadow {{SIZE}}{{UNIT}}',
1423	],
1424	]
1425	);
1426
1427	$this->end_controls_tab();
1428
1429	$this->end_controls_tabs();
1430
1431	$this->end_controls_section();
1432	}
1433
1434
1435	/**
1436	* Register the Mask section.
1437	*
1438	* @return void
1439	*/
1440	private function register_masking_section() {
1441	$this->start_controls_section(
1442	'_section_masking',
1443	[
1444	'label' => esc_html__( 'Mask', 'elementor' ),
1445	'tab' => Controls_Manager::TAB_ADVANCED,
1446	]
1447	);
1448
1449	$this->add_control(
1450	'_mask_switch',
1451	[
1452	'label' => esc_html__( 'Mask', 'elementor' ),
1453	'type' => Controls_Manager::SWITCHER,
1454	'label_on' => esc_html__( 'On', 'elementor' ),
1455	'label_off' => esc_html__( 'Off', 'elementor' ),
1456	'default' => '',
1457	]
1458	);
1459
1460	$this->add_control(
1461	'_mask_shape',
1462	[
1463	'label' => esc_html__( 'Shape', 'elementor' ),
1464	'type' => Controls_Manager::SELECT,
1465	'options' => $this->get_shapes(),
1466	'default' => 'circle',
1467	'selectors' => $this->get_mask_selectors( '-webkit-mask-image: url( ' . ELEMENTOR_ASSETS_URL . '/mask-shapes/{{VALUE}}.svg );' ),
1468	'condition' => [
1469	'_mask_switch!' => '',
1470	],
1471	]
1472	);
1473
1474	$this->add_control(
1475	'_mask_image',
1476	[
1477	'label' => esc_html__( 'Image', 'elementor' ),
1478	'type' => Controls_Manager::MEDIA,
1479	'media_type' => 'image',
1480	'should_include_svg_inline_option' => true,
1481	'library_type' => 'image/svg+xml',
1482	'dynamic' => [
1483	'active' => true,
1484	],
1485	'selectors' => $this->get_mask_selectors( '-webkit-mask-image: url( {{URL}} );' ),
1486	'condition' => [
1487	'_mask_switch!' => '',
1488	'_mask_shape' => 'custom',
1489	],
1490	]
1491	);
1492
1493	$this->add_control(
1494	'_mask_notice',
1495	[
1496	'type' => Controls_Manager::HIDDEN,
1497	'raw' => esc_html__( 'Need More Shapes?', 'elementor' ) .
1498	'<br>' .
1499	sprintf(
1500	/* translators: 1: Link open tag, 2: Link close tag. */
1501	esc_html__( 'Explore additional Premium Shape packs and use them in your site. %1$sLearn More%2$s', 'elementor' ),
1502	'<a target="_blank" href="https://go.elementor.com/mask-control">',
1503	'</a>'
1504	),
1505	'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
1506	'condition' => [
1507	'_mask_switch!' => '',
1508	],
1509	]
1510	);
1511
1512	$this->add_responsive_control(
1513	'_mask_size',
1514	[
1515	'label' => esc_html__( 'Size', 'elementor' ),
1516	'type' => Controls_Manager::SELECT,
1517	'options' => [
1518	'contain' => esc_html__( 'Fit', 'elementor' ),
1519	'cover' => esc_html__( 'Fill', 'elementor' ),
1520	'custom' => esc_html__( 'Custom', 'elementor' ),
1521	],
1522	'default' => 'contain',
1523	'selectors' => $this->get_mask_selectors( '-webkit-mask-size: {{VALUE}};' ),
1524	'condition' => [
1525	'_mask_switch!' => '',
1526	],
1527	]
1528	);
1529
1530	$this->add_responsive_control(
1531	'_mask_size_scale',
1532	[
1533	'label' => esc_html__( 'Scale', 'elementor' ),
1534	'type' => Controls_Manager::SLIDER,
1535	'size_units' => [ 'px', 'em', '%', 'vw' ],
1536	'range' => [
1537	'px' => [
1538	'min' => 0,
1539	'max' => 500,
1540	],
1541	'em' => [
1542	'min' => 0,
1543	'max' => 100,
1544	],
1545	'%' => [
1546	'min' => 0,
1547	'max' => 200,
1548	],
1549	'vw' => [
1550	'min' => 0,
1551	'max' => 100,
1552	],
1553	],
1554	'default' => [
1555	'unit' => '%',
1556	'size' => 100,
1557	],
1558	'selectors' => $this->get_mask_selectors( '-webkit-mask-size: {{SIZE}}{{UNIT}};' ),
1559	'condition' => [
1560	'_mask_switch!' => '',
1561	'_mask_size' => 'custom',
1562	],
1563	]
1564	);
1565
1566	$this->add_responsive_control(
1567	'_mask_position',
1568	[
1569	'label' => esc_html__( 'Position', 'elementor' ),
1570	'type' => Controls_Manager::SELECT,
1571	'options' => [
1572	'center center' => esc_html__( 'Center Center', 'elementor' ),
1573	'center left' => esc_html__( 'Center Left', 'elementor' ),
1574	'center right' => esc_html__( 'Center Right', 'elementor' ),
1575	'top center' => esc_html__( 'Top Center', 'elementor' ),
1576	'top left' => esc_html__( 'Top Left', 'elementor' ),
1577	'top right' => esc_html__( 'Top Right', 'elementor' ),
1578	'bottom center' => esc_html__( 'Bottom Center', 'elementor' ),
1579	'bottom left' => esc_html__( 'Bottom Left', 'elementor' ),
1580	'bottom right' => esc_html__( 'Bottom Right', 'elementor' ),
1581	'custom' => esc_html__( 'Custom', 'elementor' ),
1582	],
1583	'default' => 'center center',
1584	'selectors' => $this->get_mask_selectors( '-webkit-mask-position: {{VALUE}};' ),
1585	'condition' => [
1586	'_mask_switch!' => '',
1587	],
1588	]
1589	);
1590
1591	$this->add_responsive_control(
1592	'_mask_position_x',
1593	[
1594	'label' => esc_html__( 'X Position', 'elementor' ),
1595	'type' => Controls_Manager::SLIDER,
1596	'size_units' => [ 'px', 'em', '%', 'vw' ],
1597	'range' => [
1598	'px' => [
1599	'min' => -500,
1600	'max' => 500,
1601	],
1602	'em' => [
1603	'min' => -100,
1604	'max' => 100,
1605	],
1606	'%' => [
1607	'min' => -100,
1608	'max' => 100,
1609	],
1610	'vw' => [
1611	'min' => -100,
1612	'max' => 100,
1613	],
1614	],
1615	'default' => [
1616	'unit' => '%',
1617	'size' => 0,
1618	],
1619	'selectors' => $this->get_mask_selectors( '-webkit-mask-position-x: {{SIZE}}{{UNIT}};' ),
1620	'condition' => [
1621	'_mask_switch!' => '',
1622	'_mask_position' => 'custom',
1623	],
1624	]
1625	);
1626
1627	$this->add_responsive_control(
1628	'_mask_position_y',
1629	[
1630	'label' => esc_html__( 'Y Position', 'elementor' ),
1631	'type' => Controls_Manager::SLIDER,
1632	'size_units' => [ 'px', 'em', '%', 'vw' ],
1633	'range' => [
1634	'px' => [
1635	'min' => -500,
1636	'max' => 500,
1637	],
1638	'em' => [
1639	'min' => -100,
1640	'max' => 100,
1641	],
1642	'%' => [
1643	'min' => -100,
1644	'max' => 100,
1645	],
1646	'vw' => [
1647	'min' => -100,
1648	'max' => 100,
1649	],
1650	],
1651	'default' => [
1652	'unit' => '%',
1653	'size' => 0,
1654	],
1655	'selectors' => $this->get_mask_selectors( '-webkit-mask-position-y: {{SIZE}}{{UNIT}};' ),
1656	'condition' => [
1657	'_mask_switch!' => '',
1658	'_mask_position' => 'custom',
1659	],
1660	]
1661	);
1662
1663	$this->add_responsive_control(
1664	'_mask_repeat',
1665	[
1666	'label' => esc_html__( 'Repeat', 'elementor' ),
1667	'type' => Controls_Manager::SELECT,
1668	'options' => [
1669	'no-repeat' => esc_html__( 'No-repeat', 'elementor' ),
1670	'repeat' => esc_html__( 'Repeat', 'elementor' ),
1671	'repeat-x' => esc_html__( 'Repeat-x', 'elementor' ),
1672	'repeat-Y' => esc_html__( 'Repeat-y', 'elementor' ),
1673	'round' => esc_html__( 'Round', 'elementor' ),
1674	'space' => esc_html__( 'Space', 'elementor' ),
1675	],
1676	'default' => 'no-repeat',
1677	'selectors' => $this->get_mask_selectors( '-webkit-mask-repeat: {{VALUE}};' ),
1678	'condition' => [
1679	'_mask_switch!' => '',
1680	'_mask_size!' => 'cover',
1681	],
1682	]
1683	);
1684
1685	$this->end_controls_section();
1686	}
1687
1688
1689	/**
1690	* Register the Responsive section.
1691	*
1692	* @return void
1693	*/
1694	private function register_responsive_section() {
1695	$this->start_controls_section(
1696	'_section_responsive',
1697	[
1698	'label' => esc_html__( 'Responsive', 'elementor' ),
1699	'tab' => Controls_Manager::TAB_ADVANCED,
1700	]
1701	);
1702
1703	$this->add_control(
1704	'responsive_description',
1705	[
1706	'raw' => esc_html__( 'Responsive visibility will take effect only on preview or live page, and not while editing in Elementor.', 'elementor' ),
1707	'type' => Controls_Manager::RAW_HTML,
1708	'content_classes' => 'elementor-descriptor',
1709	]
1710	);
1711
1712	$this->add_hidden_device_controls();
1713
1714	$this->end_controls_section();
1715	}
1716
1717	/**
1718	* Register common widget controls.
1719	*
1720	* Adds different input fields to allow the user to change and customize the widget settings.
1721	*
1722	* @since 3.1.0
1723	* @access protected
1724	*/
1725	protected function register_controls() {
1726	$this->register_layout_section();
1727
1728	$this->register_effects_section();
1729
1730	$this->register_transform_section();
1731
1732	$this->register_background_section();
1733
1734	$this->register_border_section();
1735
1736	$this->register_masking_section();
1737
1738	$this->register_responsive_section();
1739
1740	Plugin::$instance->controls_manager->add_custom_attributes_controls( $this );
1741
1742	Plugin::$instance->controls_manager->add_custom_css_controls( $this );
1743	}
1744	}
1745