elementor / includes / elements / container.php

container.php in Elementor Website Builder – more than just a page builder 3.20.3, at includes/elements/container.php

1,856 lines 45.6 KB

Raw Download Zip

1	<?php
2	namespace Elementor\Includes\Elements;
3
4	use Elementor\Controls_Manager;
5	use Elementor\Core\Breakpoints\Manager as Breakpoints_Manager;
6	use Elementor\Element_Base;
7	use Elementor\Embed;
8	use Elementor\Group_Control_Background;
9	use Elementor\Group_Control_Border;
10	use Elementor\Group_Control_Box_Shadow;
11	use Elementor\Group_Control_Css_Filter;
12	use Elementor\Group_Control_Flex_Container;
13	use Elementor\Group_Control_Flex_Item;
14	use Elementor\Group_Control_Grid_Container;
15	use Elementor\Plugin;
16	use Elementor\Shapes;
17	use Elementor\Utils;
18
19	if ( ! defined( 'ABSPATH' ) ) {
20	exit; // Exit if accessed directly.
21	}
22
23	class Container extends Element_Base {
24
25	/**
26	* @var \Elementor\Core\Kits\Documents\Kit
27	*/
28	private $active_kit;
29	private $logical_dimensions_inline_start;
30	private $logical_dimensions_inline_end;
31
32	/**
33	* Container constructor.
34	*
35	* @param array $data
36	* @param array\|null $args
37	*
38	* @return void
39	*/
40	public function __construct( array $data = [], array $args = null ) {
41	parent::__construct( $data, $args );
42
43	$this->active_kit = Plugin::$instance->kits_manager->get_active_kit();
44	$this->logical_dimensions_inline_start = is_rtl() ? '{{RIGHT}}{{UNIT}}' : '{{LEFT}}{{UNIT}}';
45	$this->logical_dimensions_inline_end = is_rtl() ? '{{LEFT}}{{UNIT}}' : '{{RIGHT}}{{UNIT}}';
46	}
47
48	/**
49	* Get the element type.
50	*
51	* @return string
52	*/
53	public static function get_type() {
54	return 'container';
55	}
56
57	/**
58	* Get the element name.
59	*
60	* @return string
61	*/
62	public function get_name() {
63	return 'container';
64	}
65
66	/**
67	* Get the element display name.
68	*
69	* @return string
70	*/
71	public function get_title() {
72	return esc_html__( 'Container', 'elementor' );
73	}
74
75	/**
76	* Get the element display icon.
77	*
78	* @return string
79	*/
80	public function get_icon() {
81	return 'eicon-container';
82	}
83
84	public function get_keywords() {
85	$keywords = [ 'Container', 'Flex', 'Flexbox', 'Flexbox Container', 'Layout' ];
86
87	if ( Plugin::$instance->experiments->is_feature_active( 'container_grid' ) ) {
88	array_push( $keywords, 'Grid', 'Grid Container', 'CSS Grid' );
89	}
90
91	return $keywords;
92	}
93
94	public function get_panel_presets() {
95	return [
96	'container_grid' => [
97	'replacements' => [
98	'name' => 'container_grid',
99	'controls' => [
100	'container_type' => [ 'default' => 'grid' ],
101	],
102	'title' => esc_html__( 'Grid', 'elementor' ),
103	'icon' => 'eicon-container-grid',
104	'custom' => [
105	'isPreset' => true,
106	'originalWidget' => $this->get_name(),
107	'presetWidget' => 'container_grid',
108	'preset_settings' => [
109	'container_type' => 'grid',
110	'presetTitle' => esc_html__( 'Grid', 'elementor' ),
111	'presetIcon' => 'eicon-container-grid',
112	],
113	],
114	],
115	],
116	];
117	}
118
119	/**
120	* Override the render attributes to add a custom wrapper class.
121	*
122	* @return void
123	*/
124	protected function add_render_attributes() {
125	parent::add_render_attributes();
126
127	$is_nested_class_name = $this->get_data( 'isInner' ) ? 'e-child' : 'e-parent';
128
129	$this->add_render_attribute( '_wrapper', [
130	'class' => [
131	'e-con',
132	$is_nested_class_name,
133	],
134	] );
135
136	if ( $this->get_data( 'isInner' ) ) {
137	return;
138	}
139
140	// Todo: Remove in version 3.21.0: https://elementor.atlassian.net/browse/ED-11884.
141	// Remove together with support for physical properties inside the Mega Menu & Nested Carousel widgets.
142	$this->add_render_attribute( '_wrapper', [
143	'data-core-v316-plus' => 'true',
144	] );
145	}
146
147	/**
148	* Override the initial element config to display the Container in the panel.
149	*
150	* @return array
151	*/
152	protected function get_initial_config() {
153	$config = parent::get_initial_config();
154
155	$config['controls'] = $this->get_controls();
156	$config['tabs_controls'] = $this->get_tabs_controls();
157	$config['show_in_panel'] = true;
158	$config['categories'] = [ 'layout' ];
159
160	return $config;
161	}
162
163	/**
164	* Render the element JS template.
165	*
166	* @return void
167	*/
168	protected function content_template() {
169	?>
170	<# if ( 'boxed' === settings.content_width ) { #>
171	<div class="e-con-inner">
172	<#
173	}
174	if ( settings.background_video_link ) {
175	let videoAttributes = 'autoplay muted playsinline';
176
177	if ( ! settings.background_play_once ) {
178	videoAttributes += ' loop';
179	}
180
181	view.addRenderAttribute( 'background-video-container', 'class', 'elementor-background-video-container' );
182
183	if ( ! settings.background_play_on_mobile ) {
184	view.addRenderAttribute( 'background-video-container', 'class', 'elementor-hidden-phone' );
185	}
186	#>
187	<div {{{ view.getRenderAttributeString( 'background-video-container' ) }}}>
188	<div class="elementor-background-video-embed"></div>
189	<video class="elementor-background-video-hosted elementor-html5-video" {{ videoAttributes }}></video>
190	</div>
191	<# } #>
192	<div class="elementor-shape elementor-shape-top"></div>
193	<div class="elementor-shape elementor-shape-bottom"></div>
194	<# if ( 'boxed' === settings.content_width ) { #>
195	</div>
196	<# } #>
197	<?php
198	}
199
200	/**
201	* Render the video background markup.
202	*
203	* @return void
204	*/
205	protected function render_video_background() {
206	$settings = $this->get_settings_for_display();
207
208	if ( 'video' !== $settings['background_background'] ) {
209	return;
210	}
211
212	if ( ! $settings['background_video_link'] ) {
213	return;
214	}
215
216	$video_properties = Embed::get_video_properties( $settings['background_video_link'] );
217
218	$this->add_render_attribute( 'background-video-container', 'class', 'elementor-background-video-container' );
219
220	if ( ! $settings['background_play_on_mobile'] ) {
221	$this->add_render_attribute( 'background-video-container', 'class', 'elementor-hidden-phone' );
222	}
223
224	?><div <?php $this->print_render_attribute_string( 'background-video-container' ); ?>>
225	<?php if ( $video_properties ) : ?>
226	<div class="elementor-background-video-embed"></div>
227	<?php
228	else :
229	$video_tag_attributes = 'autoplay muted playsinline';
230
231	if ( 'yes' !== $settings['background_play_once'] ) {
232	$video_tag_attributes .= ' loop';
233	}
234	?>
235	<video class="elementor-background-video-hosted elementor-html5-video" <?php echo esc_attr( $video_tag_attributes ); ?>></video>
236	<?php endif; ?>
237	</div><?php
238	}
239
240	/**
241	* Render the Container's shape divider.
242	* TODO: Copied from `section.php`.
243	*
244	* Used to generate the shape dividers HTML.
245	*
246	* @param string $side - Shape divider side, used to set the shape key.
247	*
248	* @return void
249	*/
250	protected function render_shape_divider( $side ) {
251	$settings = $this->get_active_settings();
252	$base_setting_key = "shape_divider_$side";
253	$negative = ! empty( $settings[ $base_setting_key . '_negative' ] );
254	$shape_path = Shapes::get_shape_path( $settings[ $base_setting_key ], $negative );
255
256	if ( ! is_file( $shape_path ) \|\| ! is_readable( $shape_path ) ) {
257	return;
258	}
259	?>
260	<div class="elementor-shape elementor-shape-<?php echo esc_attr( $side ); ?>" data-negative="<?php
261	Utils::print_unescaped_internal_string( $negative ? 'true' : 'false' );
262	?>">
263	<?php
264	// PHPCS - The file content is being read from a strict file path structure.
265	echo Utils::file_get_contents( $shape_path ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
266	?>
267	</div>
268	<?php
269	}
270
271	/**
272	* Print safe HTML tag for the element based on the element settings.
273	*
274	* @return void
275	*/
276	protected function print_html_tag() {
277	$html_tag = $this->get_settings( 'html_tag' );
278
279	if ( empty( $html_tag ) ) {
280	$html_tag = 'div';
281	}
282
283	Utils::print_validated_html_tag( $html_tag );
284	}
285
286	/**
287	* Before rendering the container content. (Print the opening tag, etc.)
288	*
289	* @return void
290	*/
291	public function before_render() {
292	$settings = $this->get_settings_for_display();
293	$link = $settings['link'];
294
295	if ( ! empty( $link['url'] ) ) {
296	$this->add_link_attributes( '_wrapper', $link );
297	}
298
299	?><<?php $this->print_html_tag(); ?> <?php $this->print_render_attribute_string( '_wrapper' ); ?>>
300	<?php
301	if ( $this->is_boxed_container( $settings ) ) { ?>
302	<div class="e-con-inner">
303	<?php }
304
305	$this->render_video_background();
306
307	if ( ! empty( $settings['shape_divider_top'] ) ) {
308	$this->render_shape_divider( 'top' );
309	}
310
311	if ( ! empty( $settings['shape_divider_bottom'] ) ) {
312	$this->render_shape_divider( 'bottom' );
313	}
314	}
315
316	/**
317	* After rendering the Container content. (Print the closing tag, etc.)
318	*
319	* @return void
320	*/
321	public function after_render() {
322	$settings = $this->get_settings_for_display();
323	if ( $this->is_boxed_container( $settings ) ) { ?>
324	</div>
325	<?php } ?>
326	</<?php $this->print_html_tag(); ?>>
327	<?php
328	}
329
330	protected function is_boxed_container( array $settings ) {
331	return ! empty( $settings['content_width'] ) && 'boxed' === $settings['content_width'];
332	}
333
334	/**
335	* Override the default child type to allow widgets & containers as children.
336	*
337	* @param array $element_data
338	*
339	* @return \Elementor\Element_Base\|\Elementor\Widget_Base\|null
340	*/
341	protected function _get_default_child_type( array $element_data ) {
342	if ( 'container' === $element_data['elType'] ) {
343	return Plugin::$instance->elements_manager->get_element_types( 'container' );
344	}
345
346	return Plugin::$instance->widgets_manager->get_widget_types( $element_data['widgetType'] );
347	}
348
349	protected function get_flex_control_options( $is_container_grid_active ) {
350	$flex_control_options = [
351	'name' => 'flex',
352	'selector' => '{{WRAPPER}}',
353	'fields_options' => [
354	'gap' => [
355	'label' => esc_html__( 'Gaps', 'elementor' ),
356	'device_args' => [
357	Breakpoints_Manager::BREAKPOINT_KEY_DESKTOP => [
358	// Use the default gap from the kit as a placeholder.
359	'placeholder' => $this->active_kit->get_settings_for_display( 'space_between_widgets' ),
360	],
361	],
362	],
363	],
364	];
365
366	if ( $is_container_grid_active ) {
367	$flex_control_options['condition'] = [
368	'container_type' => 'flex',
369	];
370	}
371
372	return $flex_control_options;
373	}
374
375	protected function get_container_type_control_options( $is_container_grid_active ) {
376	if ( $is_container_grid_active ) {
377	return [
378	'label' => esc_html__( 'Container Layout', 'elementor' ),
379	'type' => Controls_Manager::SELECT,
380	'default' => 'flex',
381	'prefix_class' => 'e-',
382	'options' => [
383	'flex' => esc_html__( 'Flexbox', 'elementor' ),
384	'grid' => esc_html__( 'Grid', 'elementor' ),
385	],
386	'selectors' => [
387	'{{WRAPPER}}' => '--display: {{VALUE}}',
388	],
389	'separator' => 'after',
390	'editor_available' => true,
391	];
392	}
393
394	// TODO: This can be removed when the 'Container Grid Experiment' is merged.
395	return [
396	'label' => esc_html__( 'Container Layout', 'elementor' ),
397	'type' => Controls_Manager::HIDDEN,
398	'render_type' => 'none',
399	'default' => 'flex',
400	'prefix_class' => 'e-',
401	'selectors' => [
402	'{{WRAPPER}}' => '--display: {{VALUE}}',
403	],
404	'separator' => 'after',
405	];
406	}
407
408	/**
409	* Register the Container's layout controls.
410	*
411	* @return void
412	*/
413	protected function register_container_layout_controls() {
414	$this->start_controls_section(
415	'section_layout_container',
416	[
417	'label' => esc_html__( 'Container', 'elementor' ),
418	'tab' => Controls_Manager::TAB_LAYOUT,
419	]
420	);
421
422	$active_breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
423
424	if ( array_key_exists( Breakpoints_Manager::BREAKPOINT_KEY_MOBILE_EXTRA, $active_breakpoints ) ) {
425	$min_affected_device = Breakpoints_Manager::BREAKPOINT_KEY_MOBILE_EXTRA;
426	} else {
427	$min_affected_device = Breakpoints_Manager::BREAKPOINT_KEY_TABLET;
428	}
429
430	$is_container_grid_active = Plugin::$instance->experiments->is_feature_active( 'container_grid' );
431
432	$this->add_control(
433	'container_type',
434	$this->get_container_type_control_options( $is_container_grid_active )
435	);
436
437	$this->add_control(
438	'content_width',
439	[
440	'label' => esc_html__( 'Content Width', 'elementor' ),
441	'type' => Controls_Manager::SELECT,
442	'default' => 'boxed',
443	'options' => [
444	'boxed' => esc_html__( 'Boxed', 'elementor' ),
445	'full' => esc_html__( 'Full Width', 'elementor' ),
446	],
447	'render_type' => 'template',
448	'prefix_class' => 'e-con-',
449	'editor_available' => true,
450	]
451	);
452
453	$width_control_settings = [
454	'label' => esc_html__( 'Width', 'elementor' ),
455	'type' => Controls_Manager::SLIDER,
456	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
457	'range' => [
458	'px' => [
459	'min' => 500,
460	'max' => 1600,
461	],
462	],
463	'default' => [
464	'unit' => '%',
465	],
466	'min_affected_device' => [
467	Breakpoints_Manager::BREAKPOINT_KEY_DESKTOP => $min_affected_device,
468	Breakpoints_Manager::BREAKPOINT_KEY_LAPTOP => $min_affected_device,
469	Breakpoints_Manager::BREAKPOINT_KEY_TABLET_EXTRA => $min_affected_device,
470	Breakpoints_Manager::BREAKPOINT_KEY_TABLET => $min_affected_device,
471	Breakpoints_Manager::BREAKPOINT_KEY_MOBILE_EXTRA => $min_affected_device,
472	],
473	];
474
475	$this->add_responsive_control(
476	'width',
477	array_merge( $width_control_settings, [
478	'selectors' => [
479	'{{WRAPPER}}' => '--width: {{SIZE}}{{UNIT}};',
480	],
481	'condition' => [
482	'content_width' => 'full',
483	],
484	'device_args' => [
485	Breakpoints_Manager::BREAKPOINT_KEY_DESKTOP => [
486	'placeholder' => [
487	'size' => 100,
488	'unit' => '%',
489	],
490	],
491	Breakpoints_Manager::BREAKPOINT_KEY_MOBILE => [
492	// The mobile width is not inherited from the higher breakpoint width controls.
493	'placeholder' => [
494	'size' => 100,
495	'unit' => '%',
496	],
497	],
498	],
499	] )
500	);
501
502	$this->add_responsive_control(
503	'boxed_width',
504	array_merge( $width_control_settings, [
505	'selectors' => [
506	'{{WRAPPER}}' => '--content-width: {{SIZE}}{{UNIT}};',
507	],
508	'condition' => [
509	'content_width' => 'boxed',
510	],
511	'default' => [
512	'unit' => 'px',
513	],
514	'device_args' => [
515	Breakpoints_Manager::BREAKPOINT_KEY_DESKTOP => [
516	// Use the default width from the kit as a placeholder.
517	'placeholder' => $this->active_kit->get_settings_for_display( 'container_width' ),
518	],
519	Breakpoints_Manager::BREAKPOINT_KEY_MOBILE => [
520	// The mobile width is not inherited from the higher breakpoint width controls.
521	'placeholder' => [
522	'size' => 100,
523	'unit' => '%',
524	],
525	],
526	],
527	] )
528	);
529
530	$this->add_responsive_control(
531	'min_height',
532	[
533	'label' => esc_html__( 'Min Height', 'elementor' ),
534	'type' => Controls_Manager::SLIDER,
535	'size_units' => [ 'px', 'em', 'rem', 'vh', 'custom' ],
536	'range' => [
537	'px' => [
538	'max' => 1440,
539	],
540	],
541	'description' => sprintf(
542	esc_html__( 'To achieve full height Container use %s.', 'elementor' ),
543	'100vh'
544	),
545	'selectors' => [
546	'{{WRAPPER}}' => '--min-height: {{SIZE}}{{UNIT}};',
547	],
548	]
549	);
550
551	$this->add_group_control(
552	Group_Control_Flex_Container::get_type(),
553	$this->get_flex_control_options( $is_container_grid_active )
554	);
555
556	if ( $is_container_grid_active ) {
557	$this->add_group_control(
558	Group_Control_Grid_Container::get_type(),
559	[
560	'name' => 'grid',
561	'selector' => '{{WRAPPER}}',
562	'condition' => [
563	'container_type' => [ 'grid' ],
564	],
565	]
566	);
567	}
568
569	$this->end_controls_section();
570	}
571
572	/**
573	* Register the Container's items layout controls.
574	*
575	* @return void
576	*/
577	protected function register_items_layout_controls() {
578	$this->start_controls_section(
579	'section_layout_additional_options',
580	[
581	'label' => esc_html__( 'Additional Options', 'elementor' ),
582	'tab' => Controls_Manager::TAB_LAYOUT,
583	]
584	);
585
586	$this->add_control(
587	'overflow',
588	[
589	'label' => esc_html__( 'Overflow', 'elementor' ),
590	'type' => Controls_Manager::SELECT,
591	'default' => '',
592	'options' => [
593	'' => esc_html__( 'Default', 'elementor' ),
594	'hidden' => esc_html__( 'Hidden', 'elementor' ),
595	'auto' => esc_html__( 'Auto', 'elementor' ),
596	],
597	'selectors' => [
598	'{{WRAPPER}}' => '--overflow: {{VALUE}}',
599	],
600	]
601	);
602
603	$possible_tags = [
604	'div' => 'div',
605	'header' => 'header',
606	'footer' => 'footer',
607	'main' => 'main',
608	'article' => 'article',
609	'section' => 'section',
610	'aside' => 'aside',
611	'nav' => 'nav',
612	'a' => 'a ' . esc_html__( '(link)', 'elementor' ),
613	];
614
615	$options = [
616	'' => esc_html__( 'Default', 'elementor' ),
617	] + $possible_tags;
618
619	$this->add_control(
620	'html_tag',
621	[
622	'label' => esc_html__( 'HTML Tag', 'elementor' ),
623	'type' => Controls_Manager::SELECT,
624	'options' => $options,
625	]
626	);
627
628	$this->add_control(
629	'link_note',
630	[
631	'type' => Controls_Manager::ALERT,
632	'alert_type' => 'warning',
633	'content' => esc_html__( 'Don’t add links to elements nested in this container - it will break the layout.', 'elementor' ),
634	'condition' => [
635	'html_tag' => 'a',
636	],
637	]
638	);
639
640	$this->add_control(
641	'link',
642	[
643	'label' => esc_html__( 'Link', 'elementor' ),
644	'type' => Controls_Manager::URL,
645	'dynamic' => [
646	'active' => true,
647	],
648	'condition' => [
649	'html_tag' => 'a',
650	],
651	]
652	);
653
654	$this->end_controls_section();
655	}
656
657	/**
658	* Register the Container's layout tab.
659	*
660	* @return void
661	*/
662	protected function register_layout_tab() {
663	$this->register_container_layout_controls();
664
665	$this->register_items_layout_controls();
666	}
667
668	/**
669	* Register the Container's background controls.
670	*
671	* @return void
672	*/
673	protected function register_background_controls() {
674	$this->start_controls_section(
675	'section_background',
676	[
677	'label' => esc_html__( 'Background', 'elementor' ),
678	'tab' => Controls_Manager::TAB_STYLE,
679	]
680	);
681
682	$this->start_controls_tabs( 'tabs_background' );
683
684	/**
685	* Normal.
686	*/
687	$this->start_controls_tab(
688	'tab_background_normal',
689	[
690	'label' => esc_html__( 'Normal', 'elementor' ),
691	]
692	);
693
694	$this->add_group_control(
695	Group_Control_Background::get_type(),
696	[
697	'name' => 'background',
698	'types' => [ 'classic', 'gradient', 'video', 'slideshow' ],
699	'fields_options' => [
700	'background' => [
701	'frontend_available' => true,
702	],
703	'image' => [
704	'background_lazyload' => [
705	'active' => true,
706	'keys' => [ 'background_image', 'url' ],
707	],
708	],
709	],
710	]
711	);
712
713	$this->end_controls_tab();
714
715	/**
716	* Hover.
717	*/
718	$this->start_controls_tab(
719	'tab_background_hover',
720	[
721	'label' => esc_html__( 'Hover', 'elementor' ),
722	]
723	);
724
725	$this->add_group_control(
726	Group_Control_Background::get_type(),
727	[
728	'name' => 'background_hover',
729	'selector' => '{{WRAPPER}}:hover',
730	]
731	);
732
733	$this->add_control(
734	'background_hover_transition',
735	[
736	'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
737	'type' => Controls_Manager::SLIDER,
738	'default' => [
739	'size' => 0.3,
740	],
741	'range' => [
742	'px' => [
743	'min' => 0,
744	'max' => 3,
745	'step' => 0.1,
746	],
747	],
748	'render_type' => 'ui',
749	'separator' => 'before',
750	'selectors' => [
751	'{{WRAPPER}}' => '--background-transition: {{SIZE}}s;',
752	],
753	]
754	);
755
756	$this->end_controls_tab();
757
758	$this->end_controls_tabs();
759
760	$this->end_controls_section();
761	}
762
763	/**
764	* Register the Container's background overlay controls.
765	*
766	* @return void
767	*/
768	protected function register_background_overlay_controls() {
769	$this->start_controls_section(
770	'section_background_overlay',
771	[
772	'label' => esc_html__( 'Background Overlay', 'elementor' ),
773	'tab' => Controls_Manager::TAB_STYLE,
774	]
775	);
776
777	$this->start_controls_tabs( 'tabs_background_overlay' );
778
779	/**
780	* Normal.
781	*/
782	$this->start_controls_tab(
783	'tab_background_overlay',
784	[
785	'label' => esc_html__( 'Normal', 'elementor' ),
786	]
787	);
788
789	$background_overlay_selector = '{{WRAPPER}}::before, {{WRAPPER}} > .elementor-background-video-container::before, {{WRAPPER}} > .e-con-inner > .elementor-background-video-container::before, {{WRAPPER}} > .elementor-background-slideshow::before, {{WRAPPER}} > .e-con-inner > .elementor-background-slideshow::before, {{WRAPPER}} > .elementor-motion-effects-container > .elementor-motion-effects-layer::before';
790
791	$this->add_group_control(
792	Group_Control_Background::get_type(),
793	[
794	'name' => 'background_overlay',
795	'selector' => $background_overlay_selector,
796	'fields_options' => [
797	'background' => [
798	'selectors' => [
799	// Hack to set the `::before` content in order to render it only when there is a background overlay.
800	$background_overlay_selector => '--background-overlay: \'\';',
801	],
802	],
803	'image' => [
804	'background_lazyload' => [
805	'active' => true,
806	'keys' => [ 'background_overlay_image', 'url' ],
807	],
808	],
809	],
810	]
811	);
812
813	$this->add_responsive_control(
814	'background_overlay_opacity',
815	[
816	'label' => esc_html__( 'Opacity', 'elementor' ),
817	'type' => Controls_Manager::SLIDER,
818	'default' => [
819	'size' => .5,
820	],
821	'range' => [
822	'px' => [
823	'max' => 1,
824	'step' => 0.01,
825	],
826	],
827	'selectors' => [
828	'{{WRAPPER}}' => '--overlay-opacity: {{SIZE}};',
829	],
830	'condition' => [
831	'background_overlay_background' => [ 'classic', 'gradient' ],
832	],
833	]
834	);
835
836	$this->add_group_control(
837	Group_Control_Css_Filter::get_type(),
838	[
839	'name' => 'css_filters',
840	'selector' => '{{WRAPPER}}::before',
841	'conditions' => [
842	'relation' => 'or',
843	'terms' => [
844	[
845	'name' => 'background_overlay_image[url]',
846	'operator' => '!==',
847	'value' => '',
848	],
849	[
850	'name' => 'background_overlay_color',
851	'operator' => '!==',
852	'value' => '',
853	],
854	],
855	],
856	]
857	);
858
859	$this->add_control(
860	'overlay_blend_mode',
861	[
862	'label' => esc_html__( 'Blend Mode', 'elementor' ),
863	'type' => Controls_Manager::SELECT,
864	'options' => [
865	'' => esc_html__( 'Normal', 'elementor' ),
866	'multiply' => esc_html__( 'Multiply', 'elementor' ),
867	'screen' => esc_html__( 'Screen', 'elementor' ),
868	'overlay' => esc_html__( 'Overlay', 'elementor' ),
869	'darken' => esc_html__( 'Darken', 'elementor' ),
870	'lighten' => esc_html__( 'Lighten', 'elementor' ),
871	'color-dodge' => esc_html__( 'Color Dodge', 'elementor' ),
872	'saturation' => esc_html__( 'Saturation', 'elementor' ),
873	'color' => esc_html__( 'Color', 'elementor' ),
874	'luminosity' => esc_html__( 'Luminosity', 'elementor' ),
875	],
876	'selectors' => [
877	'{{WRAPPER}}' => '--overlay-mix-blend-mode: {{VALUE}}',
878	],
879	'conditions' => [
880	'relation' => 'or',
881	'terms' => [
882	[
883	'name' => 'background_overlay_image[url]',
884	'operator' => '!==',
885	'value' => '',
886	],
887	[
888	'name' => 'background_overlay_color',
889	'operator' => '!==',
890	'value' => '',
891	],
892	],
893	],
894	]
895	);
896
897	$this->end_controls_tab();
898
899	/**
900	* Hover.
901	*/
902	$this->start_controls_tab(
903	'tab_background_overlay_hover',
904	[
905	'label' => esc_html__( 'Hover', 'elementor' ),
906	]
907	);
908
909	$background_overlay_hover_selector = '{{WRAPPER}}:hover::before, {{WRAPPER}}:hover > .elementor-background-video-container::before, {{WRAPPER}}:hover > .e-con-inner > .elementor-background-video-container::before, {{WRAPPER}} > .elementor-background-slideshow:hover::before, {{WRAPPER}} > .e-con-inner > .elementor-background-slideshow:hover::before';
910
911	$this->add_group_control(
912	Group_Control_Background::get_type(),
913	[
914	'name' => 'background_overlay_hover',
915	'selector' => $background_overlay_hover_selector,
916	'fields_options' => [
917	'background' => [
918	'selectors' => [
919	// Hack to set the `::before` content in order to render it only when there is a background overlay.
920	$background_overlay_hover_selector => '--background-overlay: \'\';',
921	],
922	],
923	],
924	]
925	);
926
927	$this->add_responsive_control(
928	'background_overlay_hover_opacity',
929	[
930	'label' => esc_html__( 'Opacity', 'elementor' ),
931	'type' => Controls_Manager::SLIDER,
932	'default' => [
933	'size' => .5,
934	],
935	'range' => [
936	'px' => [
937	'max' => 1,
938	'step' => 0.01,
939	],
940	],
941	'selectors' => [
942	'{{WRAPPER}}:hover' => '--overlay-opacity: {{SIZE}};',
943	],
944	'condition' => [
945	'background_overlay_hover_background' => [ 'classic', 'gradient' ],
946	],
947	]
948	);
949
950	$this->add_group_control(
951	Group_Control_Css_Filter::get_type(),
952	[
953	'name' => 'css_filters_hover',
954	'selector' => '{{WRAPPER}}:hover::before',
955	]
956	);
957
958	$this->add_control(
959	'background_overlay_hover_transition',
960	[
961	'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
962	'type' => Controls_Manager::SLIDER,
963	'range' => [
964	'px' => [
965	'min' => 0,
966	'max' => 3,
967	'step' => 0.1,
968	],
969	],
970	'render_type' => 'ui',
971	'separator' => 'before',
972	'selectors' => [
973	'{{WRAPPER}}, {{WRAPPER}}::before' => '--overlay-transition: {{SIZE}}s;',
974	],
975	]
976	);
977
978	$this->end_controls_tab();
979
980	$this->end_controls_tabs();
981
982	$this->end_controls_section();
983	}
984
985	/**
986	* Register the Container's border controls.
987	*
988	* @return void
989	*/
990	protected function register_border_controls() {
991	$this->start_controls_section(
992	'section_border',
993	[
994	'label' => esc_html__( 'Border', 'elementor' ),
995	'tab' => Controls_Manager::TAB_STYLE,
996	]
997	);
998
999	$this->start_controls_tabs( 'tabs_border' );
1000
1001	/**
1002	* Normal.
1003	*/
1004	$this->start_controls_tab(
1005	'tab_border',
1006	[
1007	'label' => esc_html__( 'Normal', 'elementor' ),
1008	]
1009	);
1010
1011	$this->add_group_control(
1012	Group_Control_Border::get_type(),
1013	[
1014	'name' => 'border',
1015	'selector' => '{{WRAPPER}}',
1016	'fields_options' => [
1017	'width' => [
1018	'selectors' => [
1019	'{{SELECTOR}}' => "border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; --border-block-start-width: {{TOP}}{{UNIT}}; --border-inline-end-width: $this->logical_dimensions_inline_end; --border-block-end-width: {{BOTTOM}}{{UNIT}}; --border-inline-start-width: $this->logical_dimensions_inline_start;",
1020	],
1021	],
1022	'color' => [
1023	'selectors' => [
1024	'{{SELECTOR}}' => 'border-color: {{VALUE}}; --border-color: {{VALUE}};',
1025	],
1026	],
1027	'border' => [
1028	'selectors' => [
1029	'{{SELECTOR}}' => 'border-style: {{VALUE}}; --border-style: {{VALUE}};',
1030	],
1031	],
1032	],
1033	]
1034	);
1035
1036	$this->add_responsive_control(
1037	'border_radius',
1038	[
1039	'label' => esc_html__( 'Border Radius', 'elementor' ),
1040	'type' => Controls_Manager::DIMENSIONS,
1041	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
1042	'selectors' => [
1043	'{{WRAPPER}}' => '--border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1044	],
1045	]
1046	);
1047
1048	$this->add_group_control(
1049	Group_Control_Box_Shadow::get_type(),
1050	[
1051	'name' => 'box_shadow',
1052	]
1053	);
1054
1055	$this->end_controls_tab();
1056
1057	/**
1058	* Hover.
1059	*/
1060	$this->start_controls_tab(
1061	'tab_border_hover',
1062	[
1063	'label' => esc_html__( 'Hover', 'elementor' ),
1064	]
1065	);
1066
1067	$this->add_group_control(
1068	Group_Control_Border::get_type(),
1069	[
1070	'name' => 'border_hover',
1071	'selector' => '{{WRAPPER}}:hover',
1072	'fields_options' => [
1073	'width' => [
1074	'selectors' => [
1075	'{{SELECTOR}}' => "border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; --border-block-start-width: {{TOP}}{{UNIT}}; --border-inline-end-width: $this->logical_dimensions_inline_end; --border-block-end-width: {{BOTTOM}}{{UNIT}}; --border-inline-start-width: $this->logical_dimensions_inline_start;",
1076	],
1077	],
1078	'color' => [
1079	'selectors' => [
1080	'{{SELECTOR}}' => 'border-color: {{VALUE}}; --border-color: {{VALUE}};',
1081	],
1082	],
1083	],
1084	]
1085	);
1086
1087	$this->add_responsive_control(
1088	'border_radius_hover',
1089	[
1090	'label' => esc_html__( 'Border Radius', 'elementor' ),
1091	'type' => Controls_Manager::DIMENSIONS,
1092	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
1093	'selectors' => [
1094	'{{WRAPPER}}:hover' => "--border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; --border-top-left-radius: {{TOP}}{{UNIT}}; --border-top-right-radius: $this->logical_dimensions_inline_end; --border-bottom-right-radius: {{BOTTOM}}{{UNIT}}; --border-bottom-left-radius: $this->logical_dimensions_inline_start;",
1095	],
1096	]
1097	);
1098
1099	$this->add_group_control(
1100	Group_Control_Box_Shadow::get_type(),
1101	[
1102	'name' => 'box_shadow_hover',
1103	'selector' => '{{WRAPPER}}:hover',
1104	]
1105	);
1106
1107	$this->add_control(
1108	'border_hover_transition',
1109	[
1110	'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
1111	'type' => Controls_Manager::SLIDER,
1112	'separator' => 'before',
1113	'default' => [
1114	'size' => 0.3,
1115	],
1116	'range' => [
1117	'px' => [
1118	'min' => 0,
1119	'max' => 3,
1120	'step' => 0.1,
1121	],
1122	],
1123	'conditions' => [
1124	'relation' => 'or',
1125	'terms' => [
1126	[
1127	'name' => 'background_background',
1128	'operator' => '!==',
1129	'value' => '',
1130	],
1131	[
1132	'name' => 'border_border',
1133	'operator' => '!==',
1134	'value' => '',
1135	],
1136	],
1137	],
1138	'selectors' => [
1139	'{{WRAPPER}}, {{WRAPPER}}::before' => '--border-transition: {{SIZE}}s;',
1140	],
1141	]
1142	);
1143
1144	$this->end_controls_tab();
1145
1146	$this->end_controls_tabs();
1147
1148	$this->end_controls_section();
1149	}
1150
1151	/**
1152	* Register the Container's shape dividers controls.
1153	* TODO: Copied from `section.php`.
1154	*
1155	* @return void
1156	*/
1157	protected function register_shape_dividers_controls() {
1158	$this->start_controls_section(
1159	'section_shape_divider',
1160	[
1161	'label' => esc_html__( 'Shape Divider', 'elementor' ),
1162	'tab' => Controls_Manager::TAB_STYLE,
1163	]
1164	);
1165
1166	$this->start_controls_tabs( 'tabs_shape_dividers' );
1167
1168	$shapes_options = [
1169	'' => esc_html__( 'None', 'elementor' ),
1170	];
1171
1172	foreach ( Shapes::get_shapes() as $shape_name => $shape_props ) {
1173	$shapes_options[ $shape_name ] = $shape_props['title'];
1174	}
1175
1176	foreach ( [
1177	'top' => esc_html__( 'Top', 'elementor' ),
1178	'bottom' => esc_html__( 'Bottom', 'elementor' ),
1179	] as $side => $side_label ) {
1180	$base_control_key = "shape_divider_$side";
1181
1182	$this->start_controls_tab(
1183	"tab_$base_control_key",
1184	[
1185	'label' => $side_label,
1186	]
1187	);
1188
1189	$this->add_control(
1190	$base_control_key,
1191	[
1192	'label' => esc_html__( 'Type', 'elementor' ),
1193	'type' => Controls_Manager::SELECT,
1194	'options' => $shapes_options,
1195	'render_type' => 'none',
1196	'frontend_available' => true,
1197	]
1198	);
1199
1200	$this->add_control(
1201	$base_control_key . '_color',
1202	[
1203	'label' => esc_html__( 'Color', 'elementor' ),
1204	'type' => Controls_Manager::COLOR,
1205	'condition' => [
1206	"shape_divider_$side!" => '',
1207	],
1208	'selectors' => [
1209	"{{WRAPPER}} > .elementor-shape-$side .elementor-shape-fill, {{WRAPPER}} > .e-con-inner > .elementor-shape-$side .elementor-shape-fill" => 'fill: {{UNIT}};',
1210	],
1211	]
1212	);
1213
1214	$this->add_responsive_control(
1215	$base_control_key . '_width',
1216	[
1217	'label' => esc_html__( 'Width', 'elementor' ),
1218	'type' => Controls_Manager::SLIDER,
1219	'default' => [
1220	'unit' => '%',
1221	],
1222	'tablet_default' => [
1223	'unit' => '%',
1224	],
1225	'mobile_default' => [
1226	'unit' => '%',
1227	],
1228	'range' => [
1229	'%' => [
1230	'min' => 100,
1231	'max' => 300,
1232	],
1233	],
1234	'condition' => [
1235	"shape_divider_$side" => array_keys( Shapes::filter_shapes( 'height_only', Shapes::FILTER_EXCLUDE ) ),
1236	],
1237	'selectors' => [
1238	"{{WRAPPER}} > .elementor-shape-$side svg, {{WRAPPER}} > .e-con-inner > .elementor-shape-$side svg" => 'width: calc({{SIZE}}{{UNIT}} + 1.3px)',
1239	],
1240	]
1241	);
1242
1243	$this->add_responsive_control(
1244	$base_control_key . '_height',
1245	[
1246	'label' => esc_html__( 'Height', 'elementor' ),
1247	'type' => Controls_Manager::SLIDER,
1248	'range' => [
1249	'px' => [
1250	'max' => 500,
1251	],
1252	],
1253	'condition' => [
1254	"shape_divider_$side!" => '',
1255	],
1256	'selectors' => [
1257	"{{WRAPPER}} > .elementor-shape-$side svg, {{WRAPPER}} > .e-con-inner > .elementor-shape-$side svg" => 'height: {{SIZE}}{{UNIT}};',
1258	],
1259	]
1260	);
1261
1262	$this->add_control(
1263	$base_control_key . '_flip',
1264	[
1265	'label' => esc_html__( 'Flip', 'elementor' ),
1266	'type' => Controls_Manager::SWITCHER,
1267	'condition' => [
1268	"shape_divider_$side" => array_keys( Shapes::filter_shapes( 'has_flip' ) ),
1269	],
1270	'selectors' => [
1271	"{{WRAPPER}} > .elementor-shape-$side svg, {{WRAPPER}} > .e-con-inner > .elementor-shape-$side svg" => 'transform: translateX(-50%) rotateY(180deg)',
1272	],
1273	]
1274	);
1275
1276	$this->add_control(
1277	$base_control_key . '_negative',
1278	[
1279	'label' => esc_html__( 'Invert', 'elementor' ),
1280	'type' => Controls_Manager::SWITCHER,
1281	'frontend_available' => true,
1282	'condition' => [
1283	"shape_divider_$side" => array_keys( Shapes::filter_shapes( 'has_negative' ) ),
1284	],
1285	'render_type' => 'none',
1286	]
1287	);
1288
1289	$this->add_control(
1290	$base_control_key . '_above_content',
1291	[
1292	'label' => esc_html__( 'Bring to Front', 'elementor' ),
1293	'type' => Controls_Manager::SWITCHER,
1294	'selectors' => [
1295	"{{WRAPPER}} > .elementor-shape-$side, {{WRAPPER}} > .e-con-inner > .elementor-shape-$side" => 'z-index: 2; pointer-events: none',
1296	],
1297	'condition' => [
1298	"shape_divider_$side!" => '',
1299	],
1300	]
1301	);
1302
1303	$this->end_controls_tab();
1304	}
1305
1306	$this->end_controls_tabs();
1307
1308	$this->end_controls_section();
1309	}
1310	/**
1311	* Register the Container's style tab.
1312	*
1313	* @return void
1314	*/
1315	protected function register_style_tab() {
1316	$this->register_background_controls();
1317
1318	$this->register_background_overlay_controls();
1319
1320	$this->register_border_controls();
1321
1322	$this->register_shape_dividers_controls();
1323	}
1324
1325	/**
1326	* Register the Container's advanced style controls.
1327	*
1328	* @return void
1329	*/
1330	protected function register_advanced_controls() {
1331	$this->start_controls_section(
1332	'section_layout',
1333	[
1334	'label' => esc_html__( 'Layout', 'elementor' ),
1335	'tab' => Controls_Manager::TAB_ADVANCED,
1336	]
1337	);
1338
1339	$this->add_responsive_control(
1340	'margin',
1341	[
1342	'label' => esc_html__( 'Margin', 'elementor' ),
1343	'type' => Controls_Manager::DIMENSIONS,
1344	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
1345	'selectors' => [
1346	'{{WRAPPER}}' => "--margin-block-start: {{TOP}}{{UNIT}}; --margin-block-end: {{BOTTOM}}{{UNIT}}; --margin-inline-start: $this->logical_dimensions_inline_start; --margin-inline-end: $this->logical_dimensions_inline_end;",
1347	],
1348	]
1349	);
1350
1351	$this->add_responsive_control(
1352	'padding',
1353	[
1354	'label' => esc_html__( 'Padding', 'elementor' ),
1355	'type' => Controls_Manager::DIMENSIONS,
1356	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
1357	'selectors' => [
1358	'{{WRAPPER}}' => "--padding-block-start: {{TOP}}{{UNIT}}; --padding-block-end: {{BOTTOM}}{{UNIT}}; --padding-inline-start: $this->logical_dimensions_inline_start; --padding-inline-end: $this->logical_dimensions_inline_end;",
1359	],
1360	]
1361	);
1362
1363	$this->add_group_control(
1364	Group_Control_Flex_Item::get_type(),
1365	[
1366	'name' => '_flex',
1367	'include' => [
1368	'align_self',
1369	'order',
1370	'order_custom',
1371	'size',
1372	'grow',
1373	'shrink',
1374	],
1375	'selector' => '{{WRAPPER}}.e-con', // Hack to increase specificity.
1376	'separator' => 'before',
1377	]
1378	);
1379
1380	$this->add_control(
1381	'position_description',
1382	[
1383	'type' => Controls_Manager::ALERT,
1384	'alert_type' => 'warning',
1385	'heading' => esc_html__( 'Please note!', 'elementor' ),
1386	'content' => esc_html__( 'Custom positioning is not considered best practice for responsive web design and should not be used too frequently.', 'elementor' ),
1387	'render_type' => 'ui',
1388	'condition' => [
1389	'position!' => '',
1390	],
1391	]
1392	);
1393
1394	// TODO: Copied from `common.php` - Extract to group control.
1395	$this->add_control(
1396	'position',
1397	[
1398	'label' => esc_html__( 'Position', 'elementor' ),
1399	'type' => Controls_Manager::SELECT,
1400	'default' => '',
1401	'options' => [
1402	'' => esc_html__( 'Default', 'elementor' ),
1403	'absolute' => esc_html__( 'Absolute', 'elementor' ),
1404	'fixed' => esc_html__( 'Fixed', 'elementor' ),
1405	],
1406	'selectors' => [
1407	'{{WRAPPER}}' => '--position: {{VALUE}};',
1408	],
1409	'frontend_available' => true,
1410	'separator' => 'before',
1411	]
1412	);
1413
1414	$left = esc_html__( 'Left', 'elementor' );
1415	$right = esc_html__( 'Right', 'elementor' );
1416
1417	$start = is_rtl() ? $right : $left;
1418	$end = ! is_rtl() ? $right : $left;
1419
1420	$this->add_control(
1421	'_offset_orientation_h',
1422	[
1423	'label' => esc_html__( 'Horizontal Orientation', 'elementor' ),
1424	'type' => Controls_Manager::CHOOSE,
1425	'toggle' => false,
1426	'default' => 'start',
1427	'options' => [
1428	'start' => [
1429	'title' => $start,
1430	'icon' => 'eicon-h-align-left',
1431	],
1432	'end' => [
1433	'title' => $end,
1434	'icon' => 'eicon-h-align-right',
1435	],
1436	],
1437	'classes' => 'elementor-control-start-end',
1438	'render_type' => 'ui',
1439	'condition' => [
1440	'position!' => '',
1441	],
1442	]
1443	);
1444
1445	$this->add_responsive_control(
1446	'_offset_x',
1447	[
1448	'label' => esc_html__( 'Offset', 'elementor' ),
1449	'type' => Controls_Manager::SLIDER,
1450	'range' => [
1451	'px' => [
1452	'min' => -1000,
1453	'max' => 1000,
1454	],
1455	'%' => [
1456	'min' => -200,
1457	'max' => 200,
1458	],
1459	'vw' => [
1460	'min' => -200,
1461	'max' => 200,
1462	],
1463	'vh' => [
1464	'min' => -200,
1465	'max' => 200,
1466	],
1467	],
1468	'default' => [
1469	'size' => 0,
1470	],
1471	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'vh', 'custom' ],
1472	'selectors' => [
1473	'body:not(.rtl) {{WRAPPER}}' => 'left: {{SIZE}}{{UNIT}}',
1474	'body.rtl {{WRAPPER}}' => 'right: {{SIZE}}{{UNIT}}',
1475	],
1476	'condition' => [
1477	'_offset_orientation_h!' => 'end',
1478	'position!' => '',
1479	],
1480	]
1481	);
1482
1483	$this->add_responsive_control(
1484	'_offset_x_end',
1485	[
1486	'label' => esc_html__( 'Offset', 'elementor' ),
1487	'type' => Controls_Manager::SLIDER,
1488	'range' => [
1489	'px' => [
1490	'min' => -1000,
1491	'max' => 1000,
1492	],
1493	'%' => [
1494	'min' => -200,
1495	'max' => 200,
1496	],
1497	'vw' => [
1498	'min' => -200,
1499	'max' => 200,
1500	],
1501	'vh' => [
1502	'min' => -200,
1503	'max' => 200,
1504	],
1505	],
1506	'default' => [
1507	'size' => 0,
1508	],
1509	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'vh', 'custom' ],
1510	'selectors' => [
1511	'body:not(.rtl) {{WRAPPER}}' => 'right: {{SIZE}}{{UNIT}}',
1512	'body.rtl {{WRAPPER}}' => 'left: {{SIZE}}{{UNIT}}',
1513	],
1514	'condition' => [
1515	'_offset_orientation_h' => 'end',
1516	'position!' => '',
1517	],
1518	]
1519	);
1520
1521	$this->add_control(
1522	'_offset_orientation_v',
1523	[
1524	'label' => esc_html__( 'Vertical Orientation', 'elementor' ),
1525	'type' => Controls_Manager::CHOOSE,
1526	'toggle' => false,
1527	'default' => 'start',
1528	'options' => [
1529	'start' => [
1530	'title' => esc_html__( 'Top', 'elementor' ),
1531	'icon' => 'eicon-v-align-top',
1532	],
1533	'end' => [
1534	'title' => esc_html__( 'Bottom', 'elementor' ),
1535	'icon' => 'eicon-v-align-bottom',
1536	],
1537	],
1538	'render_type' => 'ui',
1539	'condition' => [
1540	'position!' => '',
1541	],
1542	]
1543	);
1544
1545	$this->add_responsive_control(
1546	'_offset_y',
1547	[
1548	'label' => esc_html__( 'Offset', 'elementor' ),
1549	'type' => Controls_Manager::SLIDER,
1550	'range' => [
1551	'px' => [
1552	'min' => -1000,
1553	'max' => 1000,
1554	],
1555	'%' => [
1556	'min' => -200,
1557	'max' => 200,
1558	],
1559	'vh' => [
1560	'min' => -200,
1561	'max' => 200,
1562	],
1563	'vw' => [
1564	'min' => -200,
1565	'max' => 200,
1566	],
1567	],
1568	'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'vw', 'custom' ],
1569	'default' => [
1570	'size' => 0,
1571	],
1572	'selectors' => [
1573	'{{WRAPPER}}' => 'top: {{SIZE}}{{UNIT}}',
1574	],
1575	'condition' => [
1576	'_offset_orientation_v!' => 'end',
1577	'position!' => '',
1578	],
1579	]
1580	);
1581
1582	$this->add_responsive_control(
1583	'_offset_y_end',
1584	[
1585	'label' => esc_html__( 'Offset', 'elementor' ),
1586	'type' => Controls_Manager::SLIDER,
1587	'range' => [
1588	'px' => [
1589	'min' => -1000,
1590	'max' => 1000,
1591	],
1592	'%' => [
1593	'min' => -200,
1594	'max' => 200,
1595	],
1596	'vh' => [
1597	'min' => -200,
1598	'max' => 200,
1599	],
1600	'vw' => [
1601	'min' => -200,
1602	'max' => 200,
1603	],
1604	],
1605	'size_units' => [ 'px', '%', 'em', 'rem', 'vh', 'vw', 'custom' ],
1606	'default' => [
1607	'size' => 0,
1608	],
1609	'selectors' => [
1610	'{{WRAPPER}}' => 'bottom: {{SIZE}}{{UNIT}}',
1611	],
1612	'condition' => [
1613	'_offset_orientation_v' => 'end',
1614	'position!' => '',
1615	],
1616	]
1617	);
1618
1619	$this->add_responsive_control(
1620	'z_index',
1621	[
1622	'label' => esc_html__( 'Z-Index', 'elementor' ),
1623	'type' => Controls_Manager::NUMBER,
1624	'min' => 0,
1625	'selectors' => [
1626	'{{WRAPPER}}' => '--z-index: {{VALUE}};',
1627	],
1628	]
1629	);
1630
1631	$this->add_control(
1632	'_element_id',
1633	[
1634	'label' => esc_html__( 'CSS ID', 'elementor' ),
1635	'type' => Controls_Manager::TEXT,
1636	'default' => '',
1637	'ai' => [
1638	'active' => false,
1639	],
1640	'dynamic' => [
1641	'active' => true,
1642	],
1643	'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
1644	'style_transfer' => false,
1645	'classes' => 'elementor-control-direction-ltr',
1646	]
1647	);
1648
1649	$this->add_control(
1650	'css_classes',
1651	[
1652	'label' => esc_html__( 'CSS Classes', 'elementor' ),
1653	'type' => Controls_Manager::TEXT,
1654	'default' => '',
1655	'ai' => [
1656	'active' => false,
1657	],
1658	'dynamic' => [
1659	'active' => true,
1660	],
1661	'prefix_class' => '',
1662	'title' => esc_html__( 'Add your custom class WITHOUT the dot. e.g: my-class', 'elementor' ),
1663	'classes' => 'elementor-control-direction-ltr',
1664	]
1665	);
1666
1667	Plugin::$instance->controls_manager->add_display_conditions_controls( $this );
1668
1669	$this->end_controls_section();
1670	}
1671
1672	/**
1673	* Register the Container's motion effects controls.
1674	*
1675	* @return void
1676	*/
1677	protected function register_motion_effects_controls() {
1678	$this->start_controls_section(
1679	'section_effects',
1680	[
1681	'label' => esc_html__( 'Motion Effects', 'elementor' ),
1682	'tab' => Controls_Manager::TAB_ADVANCED,
1683	]
1684	);
1685
1686	Plugin::$instance->controls_manager->add_motion_effects_promotion_control( $this );
1687
1688	$this->add_responsive_control(
1689	'animation',
1690	[
1691	'label' => esc_html__( 'Entrance Animation', 'elementor' ),
1692	'type' => Controls_Manager::ANIMATION,
1693	'frontend_available' => true,
1694	]
1695	);
1696
1697	$this->add_control(
1698	'animation_duration',
1699	[
1700	'label' => esc_html__( 'Animation Duration', 'elementor' ),
1701	'type' => Controls_Manager::SELECT,
1702	'default' => '',
1703	'options' => [
1704	'slow' => esc_html__( 'Slow', 'elementor' ),
1705	'' => esc_html__( 'Normal', 'elementor' ),
1706	'fast' => esc_html__( 'Fast', 'elementor' ),
1707	],
1708	'prefix_class' => 'animated-',
1709	'condition' => [
1710	'animation!' => '',
1711	],
1712	]
1713	);
1714
1715	$this->add_control(
1716	'animation_delay',
1717	[
1718	'label' => esc_html__( 'Animation Delay', 'elementor' ) . ' (ms)',
1719	'type' => Controls_Manager::NUMBER,
1720	'default' => '',
1721	'min' => 0,
1722	'step' => 100,
1723	'condition' => [
1724	'animation!' => '',
1725	],
1726	'render_type' => 'none',
1727	'frontend_available' => true,
1728	]
1729	);
1730
1731	$this->end_controls_section();
1732	}
1733
1734	/**
1735	* Register the Container's responsive controls.
1736	*
1737	* @return void
1738	*/
1739	protected function register_responsive_controls() {
1740	$this->start_controls_section(
1741	'_section_responsive',
1742	[
1743	'label' => esc_html__( 'Responsive', 'elementor' ),
1744	'tab' => Controls_Manager::TAB_ADVANCED,
1745	]
1746	);
1747
1748	$this->add_control(
1749	'heading_visibility',
1750	[
1751	'label' => esc_html__( 'Visibility', 'elementor' ),
1752	'type' => Controls_Manager::HEADING,
1753	]
1754	);
1755
1756	$this->add_control(
1757	'responsive_description',
1758	[
1759	'raw' => sprintf(
1760	/* translators: 1: Link open tag, 2: Link close tag. */
1761	esc_html__( 'Responsive visibility will take effect only on %1$s preview mode %2$s or live page, and not while editing in Elementor.', 'elementor' ),
1762	'<a href="javascript: $e.run( \'panel/close\' )">',
1763	'</a>'
1764	),
1765	'type' => Controls_Manager::RAW_HTML,
1766	'content_classes' => 'elementor-descriptor',
1767	]
1768	);
1769
1770	$this->add_hidden_device_controls();
1771
1772	$this->end_controls_section();
1773	}
1774
1775	/**
1776	* Register the Container's advanced tab.
1777	*
1778	* @return void
1779	*/
1780	protected function register_advanced_tab() {
1781	$this->register_advanced_controls();
1782
1783	$this->register_motion_effects_controls();
1784
1785	$this->hook_sticky_notice_into_transform_section();
1786
1787	$this->register_transform_section( 'con' );
1788
1789	$this->register_responsive_controls();
1790
1791	Plugin::$instance->controls_manager->add_custom_attributes_controls( $this );
1792
1793	Plugin::$instance->controls_manager->add_custom_css_controls( $this );
1794	}
1795
1796	protected function hook_sticky_notice_into_transform_section() {
1797	add_action( 'elementor/element/container/_section_transform/after_section_start', function( Container $container ) {
1798	if ( ! empty( $container->get_controls( 'transform_sticky_notice' ) ) ) {
1799	return;
1800	}
1801
1802	$container->add_control(
1803	'transform_sticky_notice',
1804	[
1805	'type' => Controls_Manager::ALERT,
1806	'alert_type' => 'warning',
1807	'content' => esc_html__( 'Note: Avoid applying transform properties on sticky containers. Doing so might cause unexpected results.', 'elementor' ),
1808	]
1809	);
1810	} );
1811	}
1812
1813	/**
1814	* Register the Container's controls.
1815	*
1816	* @return void
1817	*/
1818	protected function register_controls() {
1819	$this->register_layout_tab();
1820	$this->register_style_tab();
1821	$this->register_advanced_tab();
1822	}
1823
1824	public function on_import( $element ) {
1825	return self::slider_to_gaps_converter( $element );
1826	}
1827
1828	/**
1829	* convert slider to gaps control for the 3.16 upgrade script
1830	*
1831	* @param $element
1832	* @return array
1833	*/
1834	public static function slider_to_gaps_converter( $element ) {
1835	$breakpoints = array_keys( (array) Plugin::$instance->breakpoints->get_breakpoints() );
1836	$breakpoints[] = 'desktop';
1837	$control_name = 'flex_gap';
1838
1839	foreach ( $breakpoints as $breakpoint ) {
1840	$control = 'desktop' !== $breakpoint
1841	? $control_name . '_' . $breakpoint
1842	: $control_name;
1843
1844	if ( isset( $element['settings'][ $control ] ) ) {
1845	$old_size = strval( $element['settings'][ $control ]['size'] );
1846
1847	$element['settings'][ $control ]['column'] = $old_size;
1848	$element['settings'][ $control ]['row'] = $old_size;
1849	$element['settings'][ $control ]['isLinked'] = true;
1850	}
1851	}
1852
1853	return $element;
1854	}
1855	}
1856