elementor / includes / widgets / common.php

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

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