elementor / includes / elements / container.php

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

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