elementor / includes / widgets / common.php

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

1,669 lines 40.4 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	'range' => [
708	'px' => [
709	'min' => -360,
710	'max' => 360,
711	],
712	],
713	'selectors' => [
714	"{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-rotateZ: {{SIZE}}deg',
715	],
716	'condition' => [
717	"_transform_rotate_popover{$tab}!" => '',
718	],
719	'frontend_available' => true,
720	]
721	);
722
723	$this->add_control(
724	"_transform_rotate_3d{$tab}",
725	[
726	'label' => esc_html__( '3D Rotate', 'elementor' ),
727	'type' => Controls_Manager::SWITCHER,
728	'label_on' => esc_html__( 'On', 'elementor' ),
729	'label_off' => esc_html__( 'Off', 'elementor' ),
730	'selectors' => [
731	"{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-rotateX: 1deg; --e-transform-perspective: 20px;',
732	],
733	'condition' => [
734	"_transform_rotate_popover{$tab}!" => '',
735	],
736	]
737	);
738
739	$this->add_responsive_control(
740	"_transform_rotateX_effect{$tab}",
741	[
742	'label' => esc_html__( 'Rotate X', 'elementor' ),
743	'type' => Controls_Manager::SLIDER,
744	'range' => [
745	'px' => [
746	'min' => -360,
747	'max' => 360,
748	],
749	],
750	'condition' => [
751	"_transform_rotate_3d{$tab}!" => '',
752	"_transform_rotate_popover{$tab}!" => '',
753	],
754	'selectors' => [
755	"{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-rotateX: {{SIZE}}deg;',
756	],
757	'frontend_available' => true,
758	]
759	);
760
761	$this->add_responsive_control(
762	"_transform_rotateY_effect{$tab}",
763	[
764	'label' => esc_html__( 'Rotate Y', 'elementor' ),
765	'type' => Controls_Manager::SLIDER,
766	'range' => [
767	'px' => [
768	'min' => -360,
769	'max' => 360,
770	],
771	],
772	'condition' => [
773	"_transform_rotate_3d{$tab}!" => '',
774	"_transform_rotate_popover{$tab}!" => '',
775	],
776	'selectors' => [
777	"{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-rotateY: {{SIZE}}deg;',
778	],
779	'frontend_available' => true,
780	]
781	);
782
783	$this->add_responsive_control(
784	"_transform_perspective_effect{$tab}",
785	[
786	'label' => esc_html__( 'Perspective', 'elementor' ),
787	'type' => Controls_Manager::SLIDER,
788	'range' => [
789	'px' => [
790	'min' => 0,
791	'max' => 1000,
792	],
793	],
794	'condition' => [
795	"_transform_rotate_popover{$tab}!" => '',
796	"_transform_rotate_3d{$tab}!" => '',
797	],
798	'selectors' => [
799	"{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-perspective: {{SIZE}}px',
800	],
801	'frontend_available' => true,
802	]
803	);
804
805	$this->end_popover();
806
807	$this->add_control(
808	"_transform_translate_popover{$tab}",
809	[
810	'label' => esc_html__( 'Offset', 'elementor' ),
811	'type' => Controls_Manager::POPOVER_TOGGLE,
812	'prefix_class' => $transform_prefix_class,
813	'return_value' => $transform_return_value,
814	]
815	);
816
817	$this->start_popover();
818
819	$this->add_responsive_control(
820	"_transform_translateX_effect{$tab}",
821	[
822	'label' => esc_html__( 'Offset X', 'elementor' ),
823	'type' => Controls_Manager::SLIDER,
824	'size_units' => [ '%', 'px' ],
825	'range' => [
826	'%' => [
827	'min' => -100,
828	'max' => 100,
829	],
830	'px' => [
831	'min' => -1000,
832	'max' => 1000,
833	],
834	],
835	'condition' => [
836	"_transform_translate_popover{$tab}!" => '',
837	],
838	'selectors' => [
839	"{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-translateX: {{SIZE}}{{UNIT}};',
840	],
841	'frontend_available' => true,
842	]
843	);
844
845	$this->add_responsive_control(
846	"_transform_translateY_effect{$tab}",
847	[
848	'label' => esc_html__( 'Offset Y', 'elementor' ),
849	'type' => Controls_Manager::SLIDER,
850	'size_units' => [ '%', 'px' ],
851	'range' => [
852	'%' => [
853	'min' => -100,
854	'max' => 100,
855	],
856	'px' => [
857	'min' => -1000,
858	'max' => 1000,
859	],
860	],
861	'condition' => [
862	"_transform_translate_popover{$tab}!" => '',
863	],
864	'selectors' => [
865	"{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-translateY: {{SIZE}}{{UNIT}};',
866	],
867	'frontend_available' => true,
868	]
869	);
870
871	$this->end_popover();
872
873	$this->add_control(
874	"_transform_scale_popover{$tab}",
875	[
876	'label' => esc_html__( 'Scale', 'elementor' ),
877	'type' => Controls_Manager::POPOVER_TOGGLE,
878	'prefix_class' => $transform_prefix_class,
879	'return_value' => $transform_return_value,
880	]
881	);
882
883	$this->start_popover();
884
885	$this->add_control(
886	"_transform_keep_proportions{$tab}",
887	[
888	'label' => esc_html__( 'Keep Proportions', 'elementor' ),
889	'type' => Controls_Manager::SWITCHER,
890	'label_on' => esc_html__( 'On', 'elementor' ),
891	'label_off' => esc_html__( 'Off', 'elementor' ),
892	'default' => 'yes',
893	]
894	);
895
896	$this->add_responsive_control(
897	"_transform_scale_effect{$tab}",
898	[
899	'label' => esc_html__( 'Scale', 'elementor' ),
900	'type' => Controls_Manager::SLIDER,
901	'range' => [
902	'px' => [
903	'min' => 0,
904	'max' => 2,
905	'step' => 0.1,
906	],
907	],
908	'condition' => [
909	"_transform_scale_popover{$tab}!" => '',
910	"_transform_keep_proportions{$tab}!" => '',
911	],
912	'selectors' => [
913	"{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-scale: {{SIZE}};',
914	],
915	'frontend_available' => true,
916	]
917	);
918
919	$this->add_responsive_control(
920	"_transform_scaleX_effect{$tab}",
921	[
922	'label' => esc_html__( 'Scale X', 'elementor' ),
923	'type' => Controls_Manager::SLIDER,
924	'range' => [
925	'px' => [
926	'min' => 0,
927	'max' => 2,
928	'step' => 0.1,
929	],
930	],
931	'condition' => [
932	"_transform_scale_popover{$tab}!" => '',
933	"_transform_keep_proportions{$tab}" => '',
934	],
935	'selectors' => [
936	"{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-scaleX: {{SIZE}};',
937	],
938	'frontend_available' => true,
939	]
940	);
941
942	$this->add_responsive_control(
943	"_transform_scaleY_effect{$tab}",
944	[
945	'label' => esc_html__( 'Scale Y', 'elementor' ),
946	'type' => Controls_Manager::SLIDER,
947	'range' => [
948	'px' => [
949	'min' => 0,
950	'max' => 2,
951	'step' => 0.1,
952	],
953	],
954	'condition' => [
955	"_transform_scale_popover{$tab}!" => '',
956	"_transform_keep_proportions{$tab}" => '',
957	],
958	'selectors' => [
959	"{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-scaleY: {{SIZE}};',
960	],
961	'frontend_available' => true,
962	]
963	);
964
965	$this->end_popover();
966
967	$this->add_control(
968	"_transform_skew_popover{$tab}",
969	[
970	'label' => esc_html__( 'Skew', 'elementor' ),
971	'type' => Controls_Manager::POPOVER_TOGGLE,
972	'prefix_class' => $transform_prefix_class,
973	'return_value' => $transform_return_value,
974	]
975	);
976
977	$this->start_popover();
978
979	$this->add_responsive_control(
980	"_transform_skewX_effect{$tab}",
981	[
982	'label' => esc_html__( 'Skew X', 'elementor' ),
983	'type' => Controls_Manager::SLIDER,
984	'range' => [
985	'px' => [
986	'min' => -360,
987	'max' => 360,
988	],
989	],
990	'condition' => [
991	"_transform_skew_popover{$tab}!" => '',
992	],
993	'selectors' => [
994	"{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-skewX: {{SIZE}}deg;',
995	],
996	'frontend_available' => true,
997	]
998	);
999
1000	$this->add_responsive_control(
1001	"_transform_skewY_effect{$tab}",
1002	[
1003	'label' => esc_html__( 'Skew Y', 'elementor' ),
1004	'type' => Controls_Manager::SLIDER,
1005	'range' => [
1006	'px' => [
1007	'min' => -360,
1008	'max' => 360,
1009	],
1010	],
1011	'condition' => [
1012	"_transform_skew_popover{$tab}!" => '',
1013	],
1014	'selectors' => [
1015	"{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-skewY: {{SIZE}}deg;',
1016	],
1017	'frontend_available' => true,
1018	]
1019	);
1020
1021	$this->end_popover();
1022
1023	$this->add_control(
1024	"_transform_flipX_effect{$tab}",
1025	[
1026	'label' => esc_html__( 'Flip Horizontal', 'elementor' ),
1027	'type' => Controls_Manager::CHOOSE,
1028	'options' => [
1029	'transform' => [
1030	'title' => esc_html__( 'Flip Horizontal', 'elementor' ),
1031	'icon' => 'eicon-flip eicon-tilted',
1032	],
1033	],
1034	'prefix_class' => $transform_prefix_class,
1035	'selectors' => [
1036	"{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-flipX: -1',
1037	],
1038	'frontend_available' => true,
1039	]
1040	);
1041
1042	$this->add_control(
1043	"_transform_flipY_effect{$tab}",
1044	[
1045	'label' => esc_html__( 'Flip Vertical', 'elementor' ),
1046	'type' => Controls_Manager::CHOOSE,
1047	'options' => [
1048	'transform' => [
1049	'title' => esc_html__( 'Flip Vertical', 'elementor' ),
1050	'icon' => 'eicon-flip',
1051	],
1052	],
1053	'prefix_class' => $transform_prefix_class,
1054	'selectors' => [
1055	"{{WRAPPER}} > .elementor-widget-container{$state}" => '--e-transform-flipY: -1',
1056	],
1057	'frontend_available' => true,
1058	]
1059	);
1060
1061	if ( '_hover' === $tab ) {
1062	$this->add_control(
1063	'_transform_transition_hover',
1064	[
1065	'label' => esc_html__( 'Transition Duration (ms)', 'elementor' ),
1066	'type' => Controls_Manager::SLIDER,
1067	'range' => [
1068	'px' => [
1069	'min' => 100,
1070	'max' => 10000,
1071	],
1072	],
1073	'selectors' => [
1074	'{{WRAPPER}} > .elementor-widget-container' => '--e-transform-transition-duration: {{SIZE}}ms',
1075	],
1076	]
1077	);
1078	}
1079
1080	${"transform_origin_conditions{$tab}"} = [
1081	[
1082	'name' => "_transform_scale_popover{$tab}",
1083	'operator' => '!=',
1084	'value' => '',
1085	],
1086	[
1087	'name' => "_transform_rotate_popover{$tab}",
1088	'operator' => '!=',
1089	'value' => '',
1090	],
1091	[
1092	'name' => "_transform_flipX_effect{$tab}",
1093	'operator' => '!=',
1094	'value' => '',
1095	],
1096	[
1097	'name' => "_transform_flipY_effect{$tab}",
1098	'operator' => '!=',
1099	'value' => '',
1100	],
1101	];
1102
1103	$this->end_controls_tab();
1104	}
1105
1106	$this->end_controls_tabs();
1107
1108	$transform_origin_conditions = [
1109	'relation' => 'or',
1110	'terms' => array_merge( $transform_origin_conditions, $transform_origin_conditions_hover ),
1111	];
1112
1113	// Will override motion effect transform-origin
1114	$this->add_responsive_control(
1115	'motion_fx_transform_x_anchor_point',
1116	[
1117	'label' => esc_html__( 'X Anchor Point', 'elementor' ),
1118	'type' => Controls_Manager::CHOOSE,
1119	'options' => [
1120	'left' => [
1121	'title' => esc_html__( 'Left', 'elementor' ),
1122	'icon' => 'eicon-h-align-left',
1123	],
1124	'center' => [
1125	'title' => esc_html__( 'Center', 'elementor' ),
1126	'icon' => 'eicon-h-align-center',
1127	],
1128	'right' => [
1129	'title' => esc_html__( 'Right', 'elementor' ),
1130	'icon' => 'eicon-h-align-right',
1131	],
1132	],
1133	'conditions' => $transform_origin_conditions,
1134	'separator' => 'before',
1135	'selectors' => [
1136	'{{WRAPPER}}' => '--e-transform-origin-x: {{VALUE}}',
1137	],
1138	]
1139	);
1140
1141	// Will override motion effect transform-origin
1142	$this->add_responsive_control(
1143	'motion_fx_transform_y_anchor_point',
1144	[
1145	'label' => esc_html__( 'Y Anchor Point', 'elementor' ),
1146	'type' => Controls_Manager::CHOOSE,
1147	'options' => [
1148	'top' => [
1149	'title' => esc_html__( 'Top', 'elementor' ),
1150	'icon' => 'eicon-v-align-top',
1151	],
1152	'center' => [
1153	'title' => esc_html__( 'Center', 'elementor' ),
1154	'icon' => 'eicon-v-align-middle',
1155	],
1156	'bottom' => [
1157	'title' => esc_html__( 'Bottom', 'elementor' ),
1158	'icon' => 'eicon-v-align-bottom',
1159	],
1160	],
1161	'conditions' => $transform_origin_conditions,
1162	'selectors' => [
1163	'{{WRAPPER}}' => '--e-transform-origin-y: {{VALUE}}',
1164	],
1165	]
1166	);
1167
1168	$this->end_controls_section();
1169	}
1170
1171	/**
1172	* Register the Background section.
1173	*
1174	* @return void
1175	*/
1176	private function register_background_section() {
1177	$this->start_controls_section(
1178	'_section_background',
1179	[
1180	'label' => esc_html__( 'Background', 'elementor' ),
1181	'tab' => Controls_Manager::TAB_ADVANCED,
1182	]
1183	);
1184
1185	$this->start_controls_tabs( '_tabs_background' );
1186
1187	$this->start_controls_tab(
1188	'_tab_background_normal',
1189	[
1190	'label' => esc_html__( 'Normal', 'elementor' ),
1191	]
1192	);
1193
1194	$this->add_group_control(
1195	Group_Control_Background::get_type(),
1196	[
1197	'name' => '_background',
1198	'selector' => '{{WRAPPER}} > .elementor-widget-container',
1199	]
1200	);
1201
1202	$this->end_controls_tab();
1203
1204	$this->start_controls_tab(
1205	'_tab_background_hover',
1206	[
1207	'label' => esc_html__( 'Hover', 'elementor' ),
1208	]
1209	);
1210
1211	$this->add_group_control(
1212	Group_Control_Background::get_type(),
1213	[
1214	'name' => '_background_hover',
1215	'selector' => '{{WRAPPER}}:hover .elementor-widget-container',
1216	]
1217	);
1218
1219	$this->add_control(
1220	'_background_hover_transition',
1221	[
1222	'label' => esc_html__( 'Transition Duration', 'elementor' ),
1223	'type' => Controls_Manager::SLIDER,
1224	'range' => [
1225	'px' => [
1226	'max' => 3,
1227	'step' => 0.1,
1228	],
1229	],
1230	'render_type' => 'ui',
1231	'separator' => 'before',
1232	'selectors' => [
1233	'{{WRAPPER}} > .elementor-widget-container' => 'transition: background {{SIZE}}s',
1234	],
1235	]
1236	);
1237
1238	$this->end_controls_tab();
1239
1240	$this->end_controls_tabs();
1241
1242	$this->end_controls_section();
1243	}
1244
1245	/**
1246	* Register the Border section.
1247	*
1248	* @return void
1249	*/
1250	private function register_border_section() {
1251	$this->start_controls_section(
1252	'_section_border',
1253	[
1254	'label' => esc_html__( 'Border', 'elementor' ),
1255	'tab' => Controls_Manager::TAB_ADVANCED,
1256	]
1257	);
1258
1259	$this->start_controls_tabs( '_tabs_border' );
1260
1261	$this->start_controls_tab(
1262	'_tab_border_normal',
1263	[
1264	'label' => esc_html__( 'Normal', 'elementor' ),
1265	]
1266	);
1267
1268	$this->add_group_control(
1269	Group_Control_Border::get_type(),
1270	[
1271	'name' => '_border',
1272	'selector' => '{{WRAPPER}} > .elementor-widget-container',
1273	]
1274	);
1275
1276	$this->add_responsive_control(
1277	'_border_radius',
1278	[
1279	'label' => esc_html__( 'Border Radius', 'elementor' ),
1280	'type' => Controls_Manager::DIMENSIONS,
1281	'size_units' => [ 'px', '%', 'em' ],
1282	'selectors' => [
1283	'{{WRAPPER}} > .elementor-widget-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1284	],
1285	]
1286	);
1287
1288	$this->add_group_control(
1289	Group_Control_Box_Shadow::get_type(),
1290	[
1291	'name' => '_box_shadow',
1292	'selector' => '{{WRAPPER}} > .elementor-widget-container',
1293	]
1294	);
1295
1296	$this->end_controls_tab();
1297
1298	$this->start_controls_tab(
1299	'_tab_border_hover',
1300	[
1301	'label' => esc_html__( 'Hover', 'elementor' ),
1302	]
1303	);
1304
1305	$this->add_group_control(
1306	Group_Control_Border::get_type(),
1307	[
1308	'name' => '_border_hover',
1309	'selector' => '{{WRAPPER}}:hover .elementor-widget-container',
1310	]
1311	);
1312
1313	$this->add_responsive_control(
1314	'_border_radius_hover',
1315	[
1316	'label' => esc_html__( 'Border Radius', 'elementor' ),
1317	'type' => Controls_Manager::DIMENSIONS,
1318	'size_units' => [ 'px', '%' ],
1319	'selectors' => [
1320	'{{WRAPPER}}:hover > .elementor-widget-container' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1321	],
1322	]
1323	);
1324
1325	$this->add_group_control(
1326	Group_Control_Box_Shadow::get_type(),
1327	[
1328	'name' => '_box_shadow_hover',
1329	'selector' => '{{WRAPPER}}:hover .elementor-widget-container',
1330	]
1331	);
1332
1333	$this->add_control(
1334	'_border_hover_transition',
1335	[
1336	'label' => esc_html__( 'Transition Duration', 'elementor' ),
1337	'type' => Controls_Manager::SLIDER,
1338	'separator' => 'before',
1339	'range' => [
1340	'px' => [
1341	'max' => 3,
1342	'step' => 0.1,
1343	],
1344	],
1345	'selectors' => [
1346	'{{WRAPPER}} .elementor-widget-container' => 'transition: background {{_background_hover_transition.SIZE}}s, border {{SIZE}}s, border-radius {{SIZE}}s, box-shadow {{SIZE}}s',
1347	],
1348	]
1349	);
1350
1351	$this->end_controls_tab();
1352
1353	$this->end_controls_tabs();
1354
1355	$this->end_controls_section();
1356	}
1357
1358
1359	/**
1360	* Register the Mask section.
1361	*
1362	* @return void
1363	*/
1364	private function register_masking_section() {
1365	$this->start_controls_section(
1366	'_section_masking',
1367	[
1368	'label' => esc_html__( 'Mask', 'elementor' ),
1369	'tab' => Controls_Manager::TAB_ADVANCED,
1370	]
1371	);
1372
1373	$this->add_control(
1374	'_mask_switch',
1375	[
1376	'label' => esc_html__( 'Mask', 'elementor' ),
1377	'type' => Controls_Manager::SWITCHER,
1378	'label_on' => esc_html__( 'On', 'elementor' ),
1379	'label_off' => esc_html__( 'Off', 'elementor' ),
1380	'default' => '',
1381	]
1382	);
1383
1384	$this->add_control(
1385	'_mask_shape',
1386	[
1387	'label' => esc_html__( 'Shape', 'elementor' ),
1388	'type' => Controls_Manager::SELECT,
1389	'options' => $this->get_shapes(),
1390	'default' => 'circle',
1391	'selectors' => $this->get_mask_selectors( '-webkit-mask-image: url( ' . ELEMENTOR_ASSETS_URL . '/mask-shapes/{{VALUE}}.svg );' ),
1392	'condition' => [
1393	'_mask_switch!' => '',
1394	],
1395	]
1396	);
1397
1398	$this->add_control(
1399	'_mask_image',
1400	[
1401	'label' => esc_html__( 'Image', 'elementor' ),
1402	'type' => Controls_Manager::MEDIA,
1403	'media_type' => 'image',
1404	'should_include_svg_inline_option' => true,
1405	'library_type' => 'image/svg+xml',
1406	'dynamic' => [
1407	'active' => true,
1408	],
1409	'selectors' => $this->get_mask_selectors( '-webkit-mask-image: url( {{URL}} );' ),
1410	'condition' => [
1411	'_mask_switch!' => '',
1412	'_mask_shape' => 'custom',
1413	],
1414	]
1415	);
1416
1417	$this->add_control(
1418	'_mask_notice',
1419	[
1420	'type' => Controls_Manager::HIDDEN,
1421	'raw' => esc_html__( 'Need More Shapes?', 'elementor' ) .
1422	'<br>' .
1423	sprintf(
1424	/* translators: 1: Link open tag, 2: Link close tag. */
1425	esc_html__( 'Explore additional Premium Shape packs and use them in your site. %1$sLearn More%2$s', 'elementor' ),
1426	'<a target="_blank" href="https://go.elementor.com/mask-control">',
1427	'</a>'
1428	),
1429	'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
1430	'condition' => [
1431	'_mask_switch!' => '',
1432	],
1433	]
1434	);
1435
1436	$this->add_responsive_control(
1437	'_mask_size',
1438	[
1439	'label' => esc_html__( 'Size', 'elementor' ),
1440	'type' => Controls_Manager::SELECT,
1441	'options' => [
1442	'contain' => esc_html__( 'Fit', 'elementor' ),
1443	'cover' => esc_html__( 'Fill', 'elementor' ),
1444	'custom' => esc_html__( 'Custom', 'elementor' ),
1445	],
1446	'default' => 'contain',
1447	'selectors' => $this->get_mask_selectors( '-webkit-mask-size: {{VALUE}};' ),
1448	'condition' => [
1449	'_mask_switch!' => '',
1450	],
1451	]
1452	);
1453
1454	$this->add_responsive_control(
1455	'_mask_size_scale',
1456	[
1457	'label' => esc_html__( 'Scale', 'elementor' ),
1458	'type' => Controls_Manager::SLIDER,
1459	'size_units' => [ 'px', 'em', '%', 'vw' ],
1460	'range' => [
1461	'px' => [
1462	'min' => 0,
1463	'max' => 500,
1464	],
1465	'em' => [
1466	'min' => 0,
1467	'max' => 100,
1468	],
1469	'%' => [
1470	'min' => 0,
1471	'max' => 200,
1472	],
1473	'vw' => [
1474	'min' => 0,
1475	'max' => 100,
1476	],
1477	],
1478	'default' => [
1479	'unit' => '%',
1480	'size' => 100,
1481	],
1482	'selectors' => $this->get_mask_selectors( '-webkit-mask-size: {{SIZE}}{{UNIT}};' ),
1483	'condition' => [
1484	'_mask_switch!' => '',
1485	'_mask_size' => 'custom',
1486	],
1487	]
1488	);
1489
1490	$this->add_responsive_control(
1491	'_mask_position',
1492	[
1493	'label' => esc_html__( 'Position', 'elementor' ),
1494	'type' => Controls_Manager::SELECT,
1495	'options' => [
1496	'center center' => esc_html__( 'Center Center', 'elementor' ),
1497	'center left' => esc_html__( 'Center Left', 'elementor' ),
1498	'center right' => esc_html__( 'Center Right', 'elementor' ),
1499	'top center' => esc_html__( 'Top Center', 'elementor' ),
1500	'top left' => esc_html__( 'Top Left', 'elementor' ),
1501	'top right' => esc_html__( 'Top Right', 'elementor' ),
1502	'bottom center' => esc_html__( 'Bottom Center', 'elementor' ),
1503	'bottom left' => esc_html__( 'Bottom Left', 'elementor' ),
1504	'bottom right' => esc_html__( 'Bottom Right', 'elementor' ),
1505	'custom' => esc_html__( 'Custom', 'elementor' ),
1506	],
1507	'default' => 'center center',
1508	'selectors' => $this->get_mask_selectors( '-webkit-mask-position: {{VALUE}};' ),
1509	'condition' => [
1510	'_mask_switch!' => '',
1511	],
1512	]
1513	);
1514
1515	$this->add_responsive_control(
1516	'_mask_position_x',
1517	[
1518	'label' => esc_html__( 'X Position', 'elementor' ),
1519	'type' => Controls_Manager::SLIDER,
1520	'size_units' => [ 'px', 'em', '%', 'vw' ],
1521	'range' => [
1522	'px' => [
1523	'min' => -500,
1524	'max' => 500,
1525	],
1526	'em' => [
1527	'min' => -100,
1528	'max' => 100,
1529	],
1530	'%' => [
1531	'min' => -100,
1532	'max' => 100,
1533	],
1534	'vw' => [
1535	'min' => -100,
1536	'max' => 100,
1537	],
1538	],
1539	'default' => [
1540	'unit' => '%',
1541	'size' => 0,
1542	],
1543	'selectors' => $this->get_mask_selectors( '-webkit-mask-position-x: {{SIZE}}{{UNIT}};' ),
1544	'condition' => [
1545	'_mask_switch!' => '',
1546	'_mask_position' => 'custom',
1547	],
1548	]
1549	);
1550
1551	$this->add_responsive_control(
1552	'_mask_position_y',
1553	[
1554	'label' => esc_html__( 'Y Position', 'elementor' ),
1555	'type' => Controls_Manager::SLIDER,
1556	'size_units' => [ 'px', 'em', '%', 'vw' ],
1557	'range' => [
1558	'px' => [
1559	'min' => -500,
1560	'max' => 500,
1561	],
1562	'em' => [
1563	'min' => -100,
1564	'max' => 100,
1565	],
1566	'%' => [
1567	'min' => -100,
1568	'max' => 100,
1569	],
1570	'vw' => [
1571	'min' => -100,
1572	'max' => 100,
1573	],
1574	],
1575	'default' => [
1576	'unit' => '%',
1577	'size' => 0,
1578	],
1579	'selectors' => $this->get_mask_selectors( '-webkit-mask-position-y: {{SIZE}}{{UNIT}};' ),
1580	'condition' => [
1581	'_mask_switch!' => '',
1582	'_mask_position' => 'custom',
1583	],
1584	]
1585	);
1586
1587	$this->add_responsive_control(
1588	'_mask_repeat',
1589	[
1590	'label' => esc_html__( 'Repeat', 'elementor' ),
1591	'type' => Controls_Manager::SELECT,
1592	'options' => [
1593	'no-repeat' => esc_html__( 'No-repeat', 'elementor' ),
1594	'repeat' => esc_html__( 'Repeat', 'elementor' ),
1595	'repeat-x' => esc_html__( 'Repeat-x', 'elementor' ),
1596	'repeat-Y' => esc_html__( 'Repeat-y', 'elementor' ),
1597	'round' => esc_html__( 'Round', 'elementor' ),
1598	'space' => esc_html__( 'Space', 'elementor' ),
1599	],
1600	'default' => 'no-repeat',
1601	'selectors' => $this->get_mask_selectors( '-webkit-mask-repeat: {{VALUE}};' ),
1602	'condition' => [
1603	'_mask_switch!' => '',
1604	'_mask_size!' => 'cover',
1605	],
1606	]
1607	);
1608
1609	$this->end_controls_section();
1610	}
1611
1612
1613	/**
1614	* Register the Responsive section.
1615	*
1616	* @return void
1617	*/
1618	private function register_responsive_section() {
1619	$this->start_controls_section(
1620	'_section_responsive',
1621	[
1622	'label' => esc_html__( 'Responsive', 'elementor' ),
1623	'tab' => Controls_Manager::TAB_ADVANCED,
1624	]
1625	);
1626
1627	$this->add_control(
1628	'responsive_description',
1629	[
1630	'raw' => esc_html__( 'Responsive visibility will take effect only on preview or live page, and not while editing in Elementor.', 'elementor' ),
1631	'type' => Controls_Manager::RAW_HTML,
1632	'content_classes' => 'elementor-descriptor',
1633	]
1634	);
1635
1636	$this->add_hidden_device_controls();
1637
1638	$this->end_controls_section();
1639	}
1640
1641	/**
1642	* Register common widget controls.
1643	*
1644	* Adds different input fields to allow the user to change and customize the widget settings.
1645	*
1646	* @since 3.1.0
1647	* @access protected
1648	*/
1649	protected function register_controls() {
1650	$this->register_layout_section();
1651
1652	$this->register_effects_section();
1653
1654	$this->register_transform_section();
1655
1656	$this->register_background_section();
1657
1658	$this->register_border_section();
1659
1660	$this->register_masking_section();
1661
1662	$this->register_responsive_section();
1663
1664	Plugin::$instance->controls_manager->add_custom_attributes_controls( $this );
1665
1666	Plugin::$instance->controls_manager->add_custom_css_controls( $this );
1667	}
1668	}
1669