uicore-elements / includes / widgets / theme-builder / advanced-menu.php

advanced-menu.php in UiCore Elements – Free widgets and templates for Elementor 1.3.17, at includes/widgets/theme-builder/advanced-menu.php

3,583 lines 140.1 KB

Raw Download Zip

1	<?php
2
3	namespace UiCoreElements;
4
5	use Elementor\Plugin;
6	use Elementor\Controls_Manager;
7	use Elementor\Settings;
8
9	use Elementor\Modules\NestedElements\Controls\Control_Nested_Repeater;
10
11	use Elementor\Repeater;
12	use Elementor\Group_Control_Background;
13	use Elementor\Group_Control_Border;
14	use Elementor\Group_Control_Box_Shadow;
15
16	use Elementor\Icons_Manager;
17	use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
18	use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
19	use Elementor\Group_Control_Typography;
20
21	defined('ABSPATH') \|\| exit();
22
23	/**
24	* Advanced Menu widget.
25	*
26	* @since 1.3.15
27	*/
28
29	class Advanced_Menu extends UiCoreNestedWidget
30	{
31
32	public function get_name()
33	{
34	return 'uicore-advanced-menu';
35	}
36	public function get_title()
37	{
38	return __('Advanced Menu', 'uicore-elements');
39	}
40	public function get_icon()
41	{
42	return 'eicon-mega-menu ui-e-widget';
43	}
44	public function get_keywords()
45	{
46	return ['menu', 'navigation'];
47	}
48	public function get_categories()
49	{
50	return ['uicore'];
51	}
52	public function get_styles()
53	{
54	$styles = [
55	'advanced-menu',
56	'advanced-menu-editor' => [
57	'custom_condition' => $this->is_edit_mode()
58	],
59	'advanced-menu-fullscreen-layout' => [
60	'condition' => [
61	'breakpoint_selector!' => 'none'
62	]
63	],
64	'advanced-menu-website-blur' => [
65	'condition' => [
66	'dropdown_animation' => 'blur',
67	]
68	],
69	'advanced-menu-canvas-dropdown-expand' => [
70	'condition' => [
71	'fullscreen_canvas_dropdown' => 'expand'
72	]
73	],
74	'advanced-menu-canvas-dropdown-slide' => [
75	'condition' => [
76	'fullscreen_canvas_dropdown' => 'slide'
77	]
78	],
79	];
80
81	$hover_animations = ['underline', 'button', 'magnet', 'focus', 'text_flip'];
82
83	foreach ($hover_animations as $animation) {
84	$styles["advanced-menu-hover-$animation"] = [
85	'condition' => [
86	'hover_interaction' => $animation,
87	]
88	];
89	}
90
91	return $styles;
92	}
93	public function get_scripts()
94	{
95	return [
96	'advanced-menu',
97	];
98	}
99	public function has_widget_inner_wrapper(): bool
100	{
101	// TODO: remove after Optmized Markup experiment is merged to the core
102	return ! \Elementor\Plugin::$instance->experiments->is_feature_active('e_optimized_markup');
103	}
104
105	protected function get_default_children_elements()
106	{
107	return [
108	[
109	'elType' => 'container',
110	'settings' => [
111	'_title' => __('Home', 'uicore-elements'),
112	],
113	],
114	[
115	'elType' => 'container',
116	'settings' => [
117	'_title' => __('Services', 'uicore-elements'),
118	],
119	],
120	[
121	'elType' => 'container',
122	'settings' => [
123	'_title' => __('Contact', 'uicore-elements'),
124	],
125	],
126	[
127	'elType' => 'container',
128	'settings' => [
129	'_title' => __('Fullscreen Menu Widget', 'uicore-elements'),
130	],
131	],
132	];
133	}
134
135	protected function get_default_repeater_title_setting_key()
136	{
137	return 'item_title';
138	}
139
140	protected function get_default_children_title()
141	{
142	/* translators: %d: Menu item index */
143	return esc_html__('Item #%d', 'uicore-elements');
144	}
145
146	protected function get_default_children_placeholder_selector()
147	{
148	return '.ui-e-menu-list';
149	}
150
151	protected function get_default_children_container_placeholder_selector()
152	{
153	return '.ui-e-menu-item';
154	}
155
156	protected function register_controls()
157	{
158	if (!Plugin::$instance->experiments->is_feature_active('nested-elements')) {
159	$this->nesting_fallback('controls');
160	return;
161	}
162
163	if (!Plugin::$instance->experiments->is_feature_active('e_optimized_markup')) {
164	$this->start_controls_section(
165	'section_tabs',
166	[
167	'label' => esc_html__('Tabs', 'uicore-elements'),
168	'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
169	]
170	);
171
172	$this->add_control(
173	'tabs_alert',
174	[
175	'type' => \Elementor\Controls_Manager::ALERT,
176	'alert_type' => 'danger',
177	'heading' => esc_html__('Feature Disabled.', 'uicore-elements'),
178	'content' => sprintf(
179	/* translators: 1: opening url tags 2: closing url tag */
180	__('Please, %1$s click here %2$s and enable the Optimized Markup experiment in Elementor settings', 'uicore-elements'),
181	'<a href="' . esc_attr(Settings::get_settings_tab_url('experiments')) . '" target="_blank">',
182	'</a>'
183	)
184	]
185	);
186
187	$this->end_controls_section();
188
189	return;
190	}
191
192	$start_logic = is_rtl() ? 'end' : 'start';
193	$end_logic = is_rtl() ? 'start' : 'end';
194
195	$list = '{{WRAPPER}} > nav > .ui-e-menu > .ui-e-menu-list';
196	$item = $list . ' > .ui-e-menu-item';
197	$link = $item . ' > a';
198	$default_nav = '{{WRAPPER}}:not(.ui-e-fullscreen-mode) > nav';
199
200	$fullscreen_canvas = '{{WRAPPER}}.ui-e-fullscreen-mode > nav';
201
202	$this->start_controls_section(
203	'section_layout',
204	[
205	'label' => esc_html__('Layout', 'uicore-elements'),
206	]
207	);
208
209	$this->add_control(
210	'menu_name',
211	[
212	'label' => esc_html__('Menu Name', 'uicore-elements'),
213	'type' => Controls_Manager::TEXT,
214	'default' => esc_html__('Menu', 'uicore-elements'),
215	]
216	);
217
218	$repeater = new Repeater();
219
220	$repeater->add_control(
221	'item_convert_to_widget',
222	[
223	'label' => esc_html__('Convert to Widget', 'uicore-elements'),
224	'type' => Controls_Manager::SWITCHER,
225	'default' => 'no',
226	'render_type' => 'template',
227	]
228	);
229
230	$repeater->add_control(
231	'widget_area_alert',
232	[
233	'type' => Controls_Manager::ALERT,
234	'alert_type' => 'info',
235	'content' => esc_html__('You have enabled the Fullscreen Menu Widget area through this option. Keep one per menu. To customize it, switch to the device where your default menu transforms into the fullscreen menu, and open it.', 'uicore-elements'),
236	'condition' => [
237	'item_convert_to_widget' => 'yes',
238	],
239	]
240	);
241
242	$repeater->add_control(
243	'item_title',
244	[
245	'label' => esc_html__('Title', 'uicore-elements'),
246	'type' => Controls_Manager::TEXT,
247	'default' => esc_html__('Item Title', 'uicore-elements'),
248	'dynamic' => [
249	'active' => true,
250	],
251	'render_type' => 'template',
252	'label_block' => true,
253	'condition' => [
254	'item_convert_to_widget!' => 'yes',
255	],
256	]
257	);
258
259	$repeater->add_control(
260	'item_link',
261	[
262	'label' => esc_html__('Link', 'uicore-elements'),
263	'type' => Controls_Manager::URL,
264	'placeholder' => esc_html__('Paste URL or type', 'uicore-elements'),
265	'dynamic' => [
266	'active' => true,
267	],
268	'render_type' => 'template',
269	'condition' => [
270	'item_convert_to_widget!' => 'yes',
271	],
272	]
273	);
274
275	$repeater->add_control(
276	'item_submenu',
277	[
278	'label' => esc_html__('Has submenu', 'uicore-elements'),
279	'type' => Controls_Manager::SWITCHER,
280	'default' => 'no',
281	'render_type' => 'template',
282	'condition' => [
283	'item_convert_to_widget!' => 'yes',
284	],
285	]
286	);
287
288	$repeater->add_control(
289	'item_submenu_width',
290	[
291	'label' => esc_html__('Submenu Alignment', 'uicore-elements'),
292	'type' => Controls_Manager::SELECT,
293	'default' => 'item-width',
294	'options' => [
295	'widget-width' => esc_html__('Widget', 'uicore-elements'),
296	'item-width' => esc_html__('Menu Item', 'uicore-elements'),
297	'full-width' => esc_html__('Full Width', 'uicore-elements')
298	],
299	'description' => esc_html__('Set the width and container placement of this item submenu container.', 'uicore-elements'),
300	'render_type' => 'template',
301	'condition' => [
302	'item_submenu' => 'yes',
303	'item_convert_to_widget!' => 'yes',
304	],
305	]
306	);
307
308	$repeater->add_control(
309	'item_icon',
310	[
311	'label' => esc_html__('Icon', 'uicore-elements'),
312	'type' => Controls_Manager::ICONS,
313	'skin' => 'inline',
314	'render_type' => 'template',
315	'label_block' => false,
316	'condition' => [
317	'item_convert_to_widget!' => 'yes',
318	],
319	]
320	);
321
322	$repeater->add_control(
323	'item_image',
324	[
325	'label' => esc_html__('Image', 'uicore-elements'),
326	'type' => \Elementor\Controls_Manager::MEDIA,
327	'render_type' => 'template',
328	'label_block' => true,
329	'condition' => [
330	'item_convert_to_widget!' => 'yes',
331	],
332	]
333	);
334
335	$repeater->add_control(
336	'item_badge',
337	[
338	'label' => esc_html__('Badge', 'uicore-elements'),
339	'type' => Controls_Manager::TEXT,
340	'render_type' => 'template',
341	'label_block' => true,
342	'condition' => [
343	'item_convert_to_widget!' => 'yes',
344	],
345	]
346	);
347
348	$repeater->add_control(
349	'item_description',
350	[
351	'label' => esc_html__('Description', 'uicore-elements'),
352	'type' => Controls_Manager::TEXT,
353	'render_type' => 'template',
354	'label_block' => true,
355	'condition' => [
356	'item_convert_to_widget!' => 'yes',
357	],
358	]
359	);
360
361	$repeater->add_control(
362	'element_id',
363	[
364	'label' => esc_html__('CSS ID', 'uicore-elements'),
365	'type' => Controls_Manager::TEXT,
366	'dynamic' => [
367	'active' => true,
368	],
369	'style_transfer' => false,
370	'condition' => [
371	'item_convert_to_widget!' => 'yes',
372	],
373	]
374	);
375
376	$this->add_control(
377	'menu_items',
378	[
379	'label' => esc_html__('Menu Items', 'uicore-elements'),
380	'type' => Control_Nested_Repeater::CONTROL_TYPE,
381	'fields' => $repeater->get_controls(),
382	'default' => [
383	[
384	'item_title' => esc_html__('Home', 'uicore-elements'),
385	],
386	[
387	'item_title' => esc_html__('Services', 'uicore-elements'),
388	'item_submenu' => 'yes',
389	],
390	[
391	'item_title' => esc_html__('Contact', 'uicore-elements'),
392	],
393	[
394	'item_convert_to_widget' => 'yes',
395	],
396	],
397	'title_field' => '{{{ item_convert_to_widget === "yes" ? "Fullscreen Menu Widget" : item_title }}}',
398	]
399	);
400
401	$this->add_control(
402	'submenu_trigger',
403	[
404	'label' => esc_html__('Sub menu trigger', 'uicore-elements'),
405	'type' => Controls_Manager::SELECT,
406	'default' => 'hover',
407	'options' => [
408	'hover' => esc_html__('Hover', 'uicore-elements'),
409	'click' => esc_html__('Click', 'uicore-elements'),
410	],
411	'frontend_available' => true,
412	]
413	);
414
415	$this->add_control(
416	'highlight_current',
417	[
418	'label' => esc_html__('Highlight Current Item', 'uicore-elements'),
419	'type' => Controls_Manager::SWITCHER,
420	'default' => 'no',
421	'render_type' => 'template',
422	]
423	);
424
425	$this->add_control(
426	'highlight_warning',
427	[
428	'type' => Controls_Manager::RAW_HTML,
429	'raw' => esc_html__('To change the current item highlight styles, go to Style tab > Menu Items group > Active tab.', 'uicore-elements'),
430	'content_classes' => 'elementor-control-field-description',
431	'condition' => [
432	'highlight_current' => 'yes'
433	]
434	]
435	);
436
437	$this->end_controls_section();
438
439	$this->start_controls_section('default_menu_section', [
440	'label' => esc_html__('Default Menu', 'uicore-elements'),
441	]);
442
443	$this->add_control(
444	'item_layout',
445	[
446	'label' => esc_html__('Item Layout', 'uicore-elements'),
447	'type' => Controls_Manager::SELECT,
448	'default' => 'horizontal',
449	'options' => [
450	'horizontal' => esc_html__('Horizontal', 'uicore-elements'),
451	'vertical' => esc_html__('Vertical', 'uicore-elements'),
452	],
453	'prefix_class' => 'ui-e-layout-',
454	'frontend_available' => true,
455	]
456	);
457
458	$this->add_responsive_control(
459	'item_align',
460	[
461	'label' => esc_html__('Items Alignment', 'uicore-elements'),
462	'type' => Controls_Manager::CHOOSE,
463	'options' => [
464	'start' => [
465	'title' => esc_html__('Start', 'uicore-elements'),
466	'icon' => "eicon-align-$start_logic-h",
467	],
468	'center' => [
469	'title' => esc_html__('Center', 'uicore-elements'),
470	'icon' => 'eicon-align-center-h',
471	],
472	'end' => [
473	'title' => esc_html__('End', 'uicore-elements'),
474	'icon' => "eicon-align-$end_logic-h",
475	],
476	'space-between' => [
477	'title' => esc_html__('Space Between', 'uicore-elements'),
478	'icon' => 'eicon-justify-space-between-h',
479	],
480	'space-around' => [
481	'title' => esc_html__('Space Around', 'uicore-elements'),
482	'icon' => 'eicon-justify-space-around-h',
483	],
484	'space-evenly' => [
485	'title' => esc_html__('Space Evenly', 'uicore-elements'),
486	'icon' => 'eicon-justify-space-evenly-h',
487	],
488	],
489	'label_block' => true,
490	'selectors' => [
491	$list => 'justify-content: {{VALUE}};',
492	],
493	'condition' => [
494	'item_layout' => 'horizontal',
495	],
496	]
497	);
498
499	$this->add_responsive_control(
500	'item_vertical_align',
501	[
502	'label' => esc_html__('Items Alignment', 'uicore-elements'),
503	'type' => Controls_Manager::CHOOSE,
504	'options' => [
505	'start' => [
506	'title' => esc_html__('Start', 'uicore-elements'),
507	'icon' => "eicon-align-$start_logic-h",
508	],
509	'center' => [
510	'title' => esc_html__('Center', 'uicore-elements'),
511	'icon' => 'eicon-align-center-h',
512	],
513	'end' => [
514	'title' => esc_html__('End', 'uicore-elements'),
515	'icon' => "eicon-align-$end_logic-h",
516	],
517	],
518	'selectors' => [
519	$link => 'justify-content: {{VALUE}};'
520	],
521	'condition' => [
522	'item_layout' => 'vertical',
523	],
524	]
525	);
526
527	$this->add_control(
528	'dropdown_icon',
529	[
530	'label' => esc_html__('Dropdown Icon', 'uicore-elements'),
531	'type' => Controls_Manager::ICONS,
532	'default' => [
533	'value' => 'fas fa-caret-down',
534	'library' => 'fa-solid',
535	],
536	'skin' => 'inline',
537	'label_block' => false,
538	]
539	);
540
541	$this->add_control(
542	'dropdown_icon_active',
543	[
544	'label' => esc_html__('Dropdown Icon Active', 'uicore-elements'),
545	'type' => Controls_Manager::ICONS,
546	'default' => [
547	'value' => 'fas fa-caret-up',
548	'library' => 'fa-solid',
549	],
550	'skin' => 'inline',
551	'label_block' => false,
552	]
553	);
554
555	$this->end_controls_section();
556
557	$this->start_controls_section('fullscreen_menu_section', [
558	'label' => esc_html__('Fullscreen Layout', 'uicore-elements'),
559	]);
560
561	// Build breakpoint options
562	$dropdown_options = [
563	'none' => esc_html__('None', 'uicore-elements'),
564	];
565	$excluded_breakpoints = [
566	'laptop',
567	'tablet_extra',
568	'widescreen',
569	];
570
571	foreach (Plugin::$instance->breakpoints->get_active_breakpoints() as $breakpoint_key => $breakpoint_instance) {
572	// Exclude the larger breakpoints from the dropdown selector.
573	if (in_array($breakpoint_key, $excluded_breakpoints, true)) {
574	continue;
575	}
576
577	$dropdown_options[$breakpoint_key] = sprintf(
578	/* translators: 1: Breakpoint label, 2: `>` character, 3: Breakpoint value. */
579	esc_html__('%1$s (%2$s %3$dpx)', 'uicore-elements'),
580	$breakpoint_instance->get_label(),
581	'>',
582	$breakpoint_instance->get_value()
583	);
584	}
585
586	$dropdown_options['desktop'] = esc_html__('Desktop', 'uicore-elements');
587
588	$this->add_control(
589	'breakpoint_selector',
590	[
591	'label' => esc_html__('Breakpoint', 'uicore-elements'),
592	'type' => Controls_Manager::SELECT,
593	'options' => $dropdown_options,
594	'default' => 'tablet',
595	'prefix_class' => 'ui-e-menu-',
596	'render_type' => 'template',
597	'frontend_available' => true,
598	]
599	);
600
601	$this->add_control(
602	'button_style',
603	[
604	'label' => esc_html__('Button Layout', 'uicore-elements'),
605	'type' => Controls_Manager::SELECT,
606	'options' => [
607	'default' => esc_html__('Default', 'uicore-elements'),
608	'classic' => esc_html__('Classic', 'uicore-elements'),
609	'minimalist' => esc_html__('Minimalist', 'uicore-elements'),
610	'creative' => esc_html__('Creative', 'uicore-elements'),
611	'text' => esc_html__('Text', 'uicore-elements'),
612	'custom' => esc_html__('Custom', 'uicore-elements'),
613	],
614	'render_type' => 'template',
615	'description' => esc_html__('To enable the custom icon selectors, you need to set "Custom" as option.', 'uicore-elements'),
616	'default' => 'default',
617	'prefix_class' => 'ui-e-fullscreen-button-icon-',
618	'frontend_available' => true,
619	'condition' => [
620	'breakpoint_selector!' => 'none'
621	]
622	]
623	);
624
625	$this->add_control(
626	'button_text_open',
627	[
628	'label' => esc_html__('Open Text', 'uicore-elements'),
629	'type' => Controls_Manager::TEXT,
630	'default' => esc_html__('Menu', 'uicore-elements'),
631	'render_type' => 'template',
632	'condition' => [
633	'button_style' => 'text',
634	'breakpoint_selector!' => 'none'
635	],
636	]
637	);
638
639	$this->add_control(
640	'button_text_close',
641	[
642	'label' => esc_html__('Close Text', 'uicore-elements'),
643	'type' => Controls_Manager::TEXT,
644	'default' => esc_html__('Close', 'uicore-elements'),
645	'render_type' => 'template',
646	'condition' => [
647	'button_style' => 'text',
648	'breakpoint_selector!' => 'none'
649	],
650	'separator' => 'after',
651	]
652	);
653
654	$this->add_control(
655	'fullscreen_menu_open_icon',
656	[
657	'label' => esc_html__('Open Button Icon', 'uicore-elements'),
658	'type' => Controls_Manager::ICONS,
659	'default' => [
660	'value' => 'fas fa-bars',
661	'library' => 'fa-solid',
662	],
663	'skin' => 'inline',
664	'label_block' => false,
665	'condition' => [
666	'button_style' => 'custom',
667	'breakpoint_selector!' => 'none'
668	]
669	]
670	);
671
672	$this->add_control(
673	'fullscreen_menu_close_icon',
674	[
675	'label' => esc_html__('Close Icon', 'uicore-elements'),
676	'type' => Controls_Manager::ICONS,
677	'default' => [
678	'value' => 'fas fa-window-close',
679	'library' => 'fa-solid',
680	],
681	'skin' => 'inline',
682	'label_block' => false,
683	'condition' => [
684	'button_style' => 'custom',
685	'breakpoint_selector!' => 'none'
686	],
687	'separator' => 'after'
688	]
689	);
690
691	$this->add_control(
692	'dropdown_fullscreen_icon',
693	[
694	'label' => esc_html__('Dropdown Icon', 'uicore-elements'),
695	'type' => Controls_Manager::ICONS,
696	'default' => [
697	'value' => 'fas fa-caret-right',
698	'library' => 'fa-solid',
699	],
700	'skin' => 'inline',
701	'label_block' => false,
702	]
703	);
704
705	$this->add_control(
706	'dropdown_fullscreen_icon_active',
707	[
708	'label' => esc_html__('Dropdown Icon Active', 'uicore-elements'),
709	'type' => Controls_Manager::ICONS,
710	'default' => [
711	'value' => 'fas fa-caret-left',
712	'library' => 'fa-solid',
713	],
714	'skin' => 'inline',
715	'label_block' => false,
716	]
717	);
718
719	$this->add_control(
720	'widget_area_only',
721	[
722	'label' => esc_html__('Widget Area Only', 'uicore-elements'),
723	'type' => Controls_Manager::SWITCHER,
724	'default' => 'no',
725	'render_type' => 'template',
726	'description' => esc_html__('When enabled, the fullscreen menu will only display the content of the assigned widget area, hiding menu items. To use this option, you need to convert one of your menu items to widget.', 'uicore-elements'),
727	'condition' => [
728	'breakpoint_selector!' => 'none'
729	],
730	]
731	);
732
733	$this->add_control(
734	'canvas_separator',
735	[
736	'label' => esc_html__('Canvas', 'uicore-elements'),
737	'type' => Controls_Manager::HEADING,
738	'separator' => 'before',
739	'condition' => [
740	'breakpoint_selector!' => 'none'
741	]
742	]
743	);
744
745	$this->add_control(
746	'fullscreen_canvas_items_alignment',
747	[
748	'label' => esc_html__('Items alignment', 'uicore-elements'),
749	'type' => Controls_Manager::CHOOSE,
750	'options' => [
751	'start' => [
752	'title' => esc_html__('Start', 'uicore-elements'),
753	'icon' => "eicon-align-$start_logic-h",
754	],
755	'center' => [
756	'title' => esc_html__('Center', 'uicore-elements'),
757	'icon' => 'eicon-align-center-h',
758	],
759	'end' => [
760	'title' => esc_html__('End', 'uicore-elements'),
761	'icon' => "eicon-align-$end_logic-h",
762	],
763	],
764	'default' => 'end',
765	'toggle' => false,
766	'selectors' => [
767	'{{WRAPPER}}.ui-e-fullscreen-mode > nav > .ui-e-menu > .ui-e-menu-list > .ui-e-menu-item > a' => 'justify-content: {{VALUE}};',
768	],
769	'condition' => [
770	'breakpoint_selector!' => 'none'
771	]
772	]
773	);
774
775	$this->add_control(
776	'fullscreen_canvas_container_alignment',
777	[
778	'label' => esc_html__('Container Alignment', 'uicore-elements'),
779	'type' => Controls_Manager::CHOOSE,
780	'options' => [
781	'start' => [
782	'title' => esc_html__('Left', 'uicore-elements'),
783	'icon' => "eicon-arrow-left",
784	],
785	'end' => [
786	'title' => esc_html__('Right', 'uicore-elements'),
787	'icon' => 'eicon-arrow-right',
788	],
789	],
790	'default' => 'end',
791	'selectors_dictionary' => [
792	'start' => 'start; --ui-e-fullscreen-canvas-offset-x: -100%; --ui-e-fullscreen-canvas-panels-shift-x: -150%; --ui-e-fullscreen-canvas-submenu-shift-x: 100%; --ui-e-fullscreen-canvas-submenu-left: 50%; --ui-e-fullscreen-canvas-submenu-right: auto;',
793	'end' => 'end; --ui-e-fullscreen-canvas-offset-x: 100%; --ui-e-fullscreen-canvas-panels-shift-x: 150%; --ui-e-fullscreen-canvas-submenu-shift-x: -100%; --ui-e-fullscreen-canvas-submenu-left: auto; --ui-e-fullscreen-canvas-submenu-right: 50%;',
794	],
795	'toggle' => false,
796	'selectors' => [
797	$fullscreen_canvas => 'justify-content: {{VALUE}};',
798	],
799	'condition' => [
800	'breakpoint_selector!' => 'none'
801	]
802	]
803	);
804
805	$this->end_controls_section();
806
807	$this->start_controls_section('section_animations', [
808	'label' => esc_html__('Animations', 'uicore-elements'),
809	]);
810
811	$this->add_control(
812	'default_animations',
813	[
814	'label' => esc_html__('Default Menu', 'uicore-elements'),
815	'type' => Controls_Manager::HEADING,
816	'separator' => 'before',
817	]
818	);
819
820	$this->add_control(
821	'hover_interaction',
822	[
823	'label' => esc_html__('Hover Interaction', 'uicore-elements'),
824	'type' => Controls_Manager::SELECT,
825	'default' => '',
826	'options' => [
827	'' => esc_html__('None', 'uicore-elements'),
828	'underline' => esc_html__('Underline', 'uicore-elements'),
829	'button' => esc_html__('Button', 'uicore-elements'),
830	'text_flip' => esc_html__('Text Flip', 'uicore-elements'),
831	'focus' => esc_html__('Focus', 'uicore-elements'),
832	'magnet' => esc_html__('Magnet Button', 'uicore-elements'),
833	],
834	'render_type' => 'template',
835	'prefix_class' => 'ui-e-hover-',
836	'frontend_available' => true,
837	]
838	);
839
840	$this->add_control(
841	'hover_interaction_button_notice',
842	[
843	'type' => Controls_Manager::RAW_HTML,
844	'raw' => esc_html__('To update the hover interaction colors, go to the Style tab > Menu Items section > Normal tab controls.', 'uicore-elements'),
845	'content_classes' => 'elementor-control-field-description',
846	'condition' => [
847	'hover_interaction' => ['button', 'magnet'],
848	],
849	]
850	);
851
852	$this->add_control(
853	'interaction_color',
854	[
855	'label' => esc_html__('Interaction Color', 'uicore-elements'),
856	'type' => Controls_Manager::COLOR,
857	'selectors' => [
858	'{{WRAPPER}}' => '--ui-e-hover-interaction-color: {{VALUE}};',
859	],
860	'condition' => [
861	'hover_interaction' => 'underline',
862	],
863	]
864	);
865
866	$this->add_control(
867	'dropdown_animation',
868	[
869	'label' => esc_html__('Dropdown Animation', 'uicore-elements'),
870	'type' => Controls_Manager::SELECT,
871	'default' => '',
872	'options' => [
873	'' => esc_html__('None', 'uicore-elements'),
874	'fade' => esc_html__('Fade', 'uicore-elements'),
875	'down' => esc_html__('Fade Down', 'uicore-elements'),
876	'up' => esc_html__('Fade Up', 'uicore-elements'),
877	'left' => esc_html__('Fade Left', 'uicore-elements'),
878	'scale' => esc_html__('Scale', 'uicore-elements'),
879	// 'scale_bg' => esc_html__('Scale Background', 'uicore-elements'),
880	'blur' => esc_html__('Website Blur', 'uicore-elements'),
881	],
882	'render_type' => 'template',
883	'prefix_class' => 'ui-e-dropdown-animation-',
884	]
885	);
886
887	$this->add_control(
888	'blur_target_selector',
889	[
890	'label' => esc_html__('Blur Target Selector', 'uicore-elements'),
891	'type' => Controls_Manager::TEXT,
892	'default' => '#content',
893	'placeholder' => '#content',
894	'description' => esc_html__('HTML selector for the element(s) that should be blurred when a submenu is active. Separate multiple selectors with a comma.', 'uicore-elements'),
895	'condition' => [
896	'dropdown_animation' => 'blur',
897	],
898	'frontend_available' => true,
899	]
900	);
901
902	// Scale bg control
903	// $this->add_control(
904	// 'menu_spacing',
905	// [
906	// 'label' => esc_html__('Bottom Spacing', 'uicore-elements'),
907	// 'type' => \Elementor\Controls_Manager::SLIDER,
908	// 'size_units' => ['px', 'em', 'rem', 'custom'],
909	// 'range' => [
910	// 'px' => [
911	// 'min' => 0,
912	// 'max' => 500,
913	// 'step' => 1,
914	// ],
915	// ],
916	// 'default' => [
917	// 'unit' => 'px',
918	// 'size' => 50,
919	// ],
920	// 'selectors' => [
921	// '{{WRAPPER}}' => 'margin-bottom: {{SIZE}}{{UNIT}};',
922	// ],
923	// 'condition' => [
924	// 'dropdown_animation' => 'scale_bg',
925	// ]
926	// ]
927	// );
928
929	$this->add_control(
930	'fullscreen_animation',
931	[
932	'label' => esc_html__('Fullscreen Menu', 'uicore-elements'),
933	'type' => Controls_Manager::HEADING,
934	'separator' => 'before',
935	'condition' => [
936	'breakpoint_selector!' => 'none'
937	]
938	]
939	);
940
941	$this->add_control(
942	'fullscreen_canvas_animation',
943	[
944	'label' => esc_html__('Entrance Animation', 'uicore-elements'),
945	'type' => Controls_Manager::SELECT,
946	'default' => '',
947	'options' => [
948	'' => esc_html__('Fade', 'uicore-elements'),
949	'ui-e-fullscreen-canvas-animation-slide-along' => esc_html__('Slide Along', 'uicore-elements'),
950	'ui-e-fullscreen-canvas-animation-slide-top' => esc_html__('Slide on Top', 'uicore-elements'),
951	'ui-e-fullscreen-canvas-animation-expand' => esc_html__('Expand', 'uicore-elements'),
952	],
953	'prefix_class' => '',
954	'condition' => [
955	'breakpoint_selector!' => 'none'
956	]
957	]
958	);
959
960	$this->add_control(
961	'fullscreen_canvas_dropdown',
962	[
963	'label' => esc_html__('Dropdown Animation', 'uicore-elements'),
964	'type' => Controls_Manager::SELECT,
965	'default' => 'slide',
966	'options' => [
967	'expand' => esc_html__('Expand', 'uicore-elements'),
968	'slide' => esc_html__('Slide', 'uicore-elements')
969	],
970	'prefix_class' => 'ui-e-fullscreen-canvas-dropdown-animation-',
971	'condition' => [
972	'breakpoint_selector!' => 'none'
973	]
974	]
975	);
976
977	$this->add_control(
978	'back_button_text',
979	[
980	'label' => esc_html__('"Back" Button Text', 'uicore-elements'),
981	'type' => Controls_Manager::TEXT,
982	'default' => esc_html__('Back', 'uicore-elements'),
983	'condition' => [
984	'fullscreen_canvas_dropdown' => 'slide',
985	'breakpoint_selector!' => 'none'
986	],
987	'frontend_available' => true
988	]
989	);
990
991	$this->add_control(
992	'back_button_icon',
993	[
994	'label' => esc_html__('Icon', 'uicore-elements'),
995	'type' => Controls_Manager::ICONS,
996	'skin' => 'inline',
997	'render_type' => 'template',
998	'label_block' => false,
999	'condition' => [
1000	'fullscreen_canvas_dropdown' => 'slide',
1001	'breakpoint_selector!' => 'none'
1002	],
1003	'frontend_available' => true,
1004	]
1005	);
1006
1007	$this->end_controls_section();
1008
1009	$this->start_controls_section(
1010	'section_menu_style',
1011	[
1012	'label' => esc_html__('Navigation', 'uicore-elements'),
1013	'tab' => Controls_Manager::TAB_STYLE,
1014	]
1015	);
1016
1017	$this->add_group_control(
1018	Group_Control_Background::get_type(),
1019	[
1020	'name' => 'menu_background',
1021	'selector' => $default_nav,
1022	]
1023	);
1024
1025	$this->add_responsive_control(
1026	'menu_padding',
1027	[
1028	'label' => esc_html__('Padding', 'uicore-elements'),
1029	'type' => Controls_Manager::DIMENSIONS,
1030	'size_units' => ['px', '%', 'em', 'rem', 'custom'],
1031	'default' => [
1032	'unit' => 'px',
1033	'top' => 10,
1034	'right' => 10,
1035	'bottom' => 10,
1036	'left' => 10,
1037	],
1038	'selectors' => [
1039	'{{WRAPPER}}' => '--ui-e-menu-padding-top: {{TOP}}{{UNIT}}; --ui-e-menu-padding-right: {{RIGHT}}{{UNIT}}; --ui-e-menu-padding-bottom: {{BOTTOM}}{{UNIT}}; --ui-e-menu-padding-left: {{LEFT}}{{UNIT}};',
1040	'{{WRAPPER}} > nav' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1041	],
1042	]
1043	);
1044
1045	$this->add_responsive_control(
1046	'menu_radius',
1047	[
1048	'label' => esc_html__('Border Radius', 'uicore-elements'),
1049	'type' => Controls_Manager::DIMENSIONS,
1050	'size_units' => ['px', '%', 'em', 'rem', 'custom'],
1051	'selectors' => [
1052	$default_nav => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1053	],
1054	]
1055	);
1056
1057
1058	$this->add_group_control(
1059	Group_Control_Border::get_type(),
1060	[
1061	'name' => 'menu_border',
1062	'selector' => $default_nav,
1063	]
1064	);
1065
1066	$this->add_group_control(
1067	Group_Control_Box_Shadow::get_type(),
1068	[
1069	'name' => 'menu_box_shadow',
1070	'selector' => $default_nav,
1071	]
1072	);
1073
1074	$this->end_controls_section();
1075
1076
1077	$this->start_controls_section(
1078	'section_menu_items_style',
1079	[
1080	'label' => esc_html__('Menu Items', 'uicore-elements'),
1081	'tab' => Controls_Manager::TAB_STYLE,
1082	]
1083	);
1084
1085	$this->add_group_control(
1086	Group_Control_Typography::get_type(),
1087	[
1088	'name' => 'menu_item_typography',
1089	'global' => [
1090	'default' => Global_Typography::TYPOGRAPHY_PRIMARY,
1091	],
1092	'selector' => $link . ' > .ui-e-text',
1093	]
1094	);
1095
1096	$this->add_responsive_control(
1097	'menu_items_gap',
1098	[
1099	'label' => esc_html__('Items gap', 'uicore-elements'),
1100	'type' => Controls_Manager::SLIDER,
1101	'size_units' => ['px', 'em', 'rem', 'custom'],
1102	'range' => [
1103	'px' => [
1104	'max' => 150,
1105	],
1106	'em' => [
1107	'max' => 20,
1108	],
1109	'rem' => [
1110	'max' => 20,
1111	],
1112	],
1113	'default' => [
1114	'size' => 20,
1115	'unit' => 'px',
1116	],
1117	'tablet_default' => [
1118	'size' => 20,
1119	'unit' => 'px',
1120	],
1121	'mobile_default' => [
1122	'size' => 10,
1123	'unit' => 'px',
1124	],
1125	'selectors' => [
1126	$list => 'gap: {{SIZE}}{{UNIT}};',
1127	],
1128	]
1129	);
1130
1131	$this->add_responsive_control(
1132	'menu_item_padding',
1133	[
1134	'label' => esc_html__('Padding', 'uicore-elements'),
1135	'type' => Controls_Manager::DIMENSIONS,
1136	'size_units' => ['px', '%', 'em', 'rem', 'custom'],
1137	'selectors' => [
1138	$link => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1139	],
1140	]
1141	);
1142
1143	$this->add_responsive_control(
1144	'menu_item_border_radius',
1145	[
1146	'label' => esc_html__('Border Radius', 'uicore-elements'),
1147	'type' => Controls_Manager::DIMENSIONS,
1148	'size_units' => ['px', '%', 'em', 'rem', 'custom'],
1149	'selectors' => [
1150	'{{WRAPPER}}' => '--ui-e-menu-item-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1151	],
1152	]
1153	);
1154
1155	$this->start_controls_tabs('menu_items_style_tabs');
1156
1157	$this->start_controls_tab(
1158	'menu_items_style_tab_normal',
1159	[
1160	'label' => esc_html__('Normal', 'uicore-elements'),
1161	]
1162	);
1163
1164	$this->add_responsive_control(
1165	'menu_item_color',
1166	[
1167	'label' => esc_html__('Color', 'uicore-elements'),
1168	'type' => Controls_Manager::COLOR,
1169	'selectors' => [
1170	$link => 'color: {{VALUE}};',
1171	],
1172	]
1173	);
1174
1175	$this->add_responsive_control(
1176	'menu_item_background_color',
1177	[
1178	'label' => esc_html__('Background Color', 'uicore-elements'),
1179	'type' => Controls_Manager::COLOR,
1180	'default' => 'rgba(0, 0, 0, 0)',
1181	'selectors' => [
1182	'{{WRAPPER}}' => '--ui-e-menu-item-background: {{VALUE}};',
1183	],
1184	]
1185	);
1186
1187	$this->add_group_control(
1188	Group_Control_Box_Shadow::get_type(),
1189	[
1190	'name' => 'menu_item_box_shadow',
1191	'selector' => $link . ', ' . $list . ':before',
1192	]
1193	);
1194
1195	$this->end_controls_tab();
1196
1197	$animations_exceptions = [
1198	'terms' => [
1199	[
1200	'name' => 'hover_interaction',
1201	'operator' => '!in',
1202	'value' => ['magnet', 'button'],
1203	],
1204	],
1205	];
1206
1207	$this->start_controls_tab(
1208	'menu_items_style_tab_hover',
1209	[
1210	'label' => esc_html__('Hover', 'uicore-elements'),
1211	]
1212	);
1213
1214	$this->add_responsive_control(
1215	'menu_item_color_hover',
1216	[
1217	'label' => esc_html__('Color', 'uicore-elements'),
1218	'type' => Controls_Manager::COLOR,
1219	'selectors' => [
1220	$item . ' > a:hover' => 'color: {{VALUE}};',
1221	],
1222	]
1223	);
1224
1225	$this->add_responsive_control(
1226	'menu_item_background_color_hover',
1227	[
1228	'label' => esc_html__('Background Color', 'uicore-elements'),
1229	'type' => Controls_Manager::COLOR,
1230	'selectors' => [
1231	$item . ' > a:hover' => 'background-color: {{VALUE}};',
1232	],
1233	'conditions' => $animations_exceptions
1234	]
1235	);
1236
1237	$this->add_group_control(
1238	Group_Control_Box_Shadow::get_type(),
1239	[
1240	'name' => 'menu_item_box_shadow_hover',
1241	'selector' => $link . ':hover',
1242	'conditions' => $animations_exceptions
1243	]
1244	);
1245
1246	$this->end_controls_tab();
1247
1248	$this->start_controls_tab(
1249	'menu_items_style_tab_active',
1250	[
1251	'label' => esc_html__('Active', 'uicore-elements'),
1252	]
1253	);
1254
1255	$this->add_responsive_control(
1256	'menu_item_color_active',
1257	[
1258	'label' => esc_html__('Color', 'uicore-elements'),
1259	'type' => Controls_Manager::COLOR,
1260	'selectors' => [
1261	$item . '.ui-e-open > a,' . $item . '.ui-e-current > a' => 'color: {{VALUE}};',
1262	],
1263	]
1264	);
1265
1266	$this->add_responsive_control(
1267	'menu_item_background_color_active',
1268	[
1269	'label' => esc_html__('Background Color', 'uicore-elements'),
1270	'type' => Controls_Manager::COLOR,
1271	'selectors' => [
1272	$item . '.ui-e-open > a,' . $item . '.ui-e-current > a' => 'background-color: {{VALUE}};',
1273	],
1274	'conditions' => $animations_exceptions
1275	]
1276	);
1277
1278	$this->add_group_control(
1279	Group_Control_Box_Shadow::get_type(),
1280	[
1281	'name' => 'menu_item_box_shadow_active',
1282	'selector' => $item . '.ui-e-open > a,' . $item . '.ui-e-current > a',
1283	'conditions' => $animations_exceptions
1284	]
1285	);
1286
1287	$this->end_controls_tab();
1288
1289	$this->end_controls_tabs();
1290
1291	$this->end_controls_section();
1292
1293	$this->start_controls_section(
1294	'icon_section_style',
1295	[
1296	'label' => esc_html__('Icon', 'uicore-elements'),
1297	'tab' => Controls_Manager::TAB_STYLE,
1298	]
1299	);
1300
1301	$this->add_responsive_control(
1302	'icon_position',
1303	[
1304	'label' => esc_html__('Position', 'uicore-elements'),
1305	'type' => Controls_Manager::SELECT,
1306	'options' => [
1307	'left' => esc_html__('Left', 'uicore-elements'),
1308	'right' => esc_html__('Right', 'uicore-elements'),
1309	],
1310	'selectors_dictionary' => [
1311	'left' => 'margin-inline-end: var(--ui-e-icon-spacing, 8px); order: 0;',
1312	'right' => 'margin-inline-start: var(--ui-e-icon-spacing, 8px); order: 1;',
1313	],
1314	'default' => 'left',
1315	'selectors' => [
1316	$link . ' .ui-e-menu-item-icon' => '{{VALUE}}',
1317	],
1318	]
1319	);
1320
1321	$this->add_responsive_control(
1322	'icon_size',
1323	[
1324	'label' => esc_html__('Size', 'uicore-elements'),
1325	'type' => Controls_Manager::SLIDER,
1326	'range' => [
1327	'px' => [
1328	'max' => 100,
1329	],
1330	],
1331	'default' => [
1332	'unit' => 'px',
1333	'size' => 16,
1334	],
1335	'size_units' => ['px', 'em', 'rem'],
1336	'selectors' => [
1337	$link . ' > .ui-e-svg-wrap.ui-e-menu-item-icon' => 'font-size: {{SIZE}}{{UNIT}};',
1338	$link . ' > .ui-e-svg-wrap.ui-e-menu-item-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
1339	],
1340	]
1341	);
1342
1343	$this->add_responsive_control(
1344	'icon_spacing',
1345	[
1346	'label' => esc_html__('Spacing', 'uicore-elements'),
1347	'type' => Controls_Manager::SLIDER,
1348	'size_units' => ['px', 'em', 'rem', 'vw', 'custom'],
1349	'range' => [
1350	'px' => [
1351	'max' => 100,
1352	],
1353	],
1354	'default' => [
1355	'size' => 5,
1356	'unit' => 'px',
1357	],
1358	'selectors' => [
1359	'{{WRAPPER}}' => '--ui-e-icon-spacing: {{SIZE}}{{UNIT}};',
1360	],
1361	]
1362	);
1363
1364	$this->start_controls_tabs('icon_style_states');
1365
1366	$this->start_controls_tab(
1367	'icon_section_normal',
1368	[
1369	'label' => esc_html__('Normal', 'uicore-elements'),
1370	]
1371	);
1372
1373	$this->add_control(
1374	'icon_color',
1375	[
1376	'label' => esc_html__('Color', 'uicore-elements'),
1377	'type' => Controls_Manager::COLOR,
1378	'selectors' => [
1379	$link . ' > .ui-e-svg-wrap.ui-e-menu-item-icon > *' => 'color: {{VALUE}}; fill: {{VALUE}};',
1380	],
1381	]
1382	);
1383
1384	$this->end_controls_tab();
1385
1386	$this->start_controls_tab(
1387	'icon_section_hover',
1388	[
1389	'label' => esc_html__('Hover', 'uicore-elements'),
1390	]
1391	);
1392
1393	$this->add_control(
1394	'icon_color_hover',
1395	[
1396	'label' => esc_html__('Color', 'uicore-elements'),
1397	'type' => Controls_Manager::COLOR,
1398	'selectors' => [
1399	$link . ':hover > .ui-e-svg-wrap.ui-e-menu-item-icon > *' => 'color: {{VALUE}}; fill: {{VALUE}};',
1400	],
1401	]
1402	);
1403
1404	$this->end_controls_tab();
1405
1406	$this->start_controls_tab(
1407	'icon_section_active',
1408	[
1409	'label' => esc_html__('Active', 'uicore-elements'),
1410	]
1411	);
1412
1413	$this->add_control(
1414	'icon_color_active',
1415	[
1416	'label' => esc_html__('Color', 'uicore-elements'),
1417	'type' => Controls_Manager::COLOR,
1418	'selectors' => [
1419	$item . '.ui-e-open > a > .ui-e-svg-wrap.ui-e-menu-item-icon > *' => 'color: {{VALUE}}; fill: {{VALUE}};',
1420	],
1421	]
1422	);
1423
1424	$this->end_controls_tab();
1425
1426	$this->end_controls_tabs();
1427
1428	$this->end_controls_section();
1429
1430	$this->start_controls_section(
1431	'image_section_style',
1432	[
1433	'label' => esc_html__('Image', 'uicore-elements'),
1434	'tab' => Controls_Manager::TAB_STYLE,
1435	]
1436	);
1437
1438	$this->add_responsive_control(
1439	'image_position',
1440	[
1441	'label' => esc_html__('Position', 'uicore-elements'),
1442	'type' => Controls_Manager::SELECT,
1443	'options' => [
1444	'left' => esc_html__('Left', 'uicore-elements'),
1445	'right' => esc_html__('Right', 'uicore-elements'),
1446	],
1447	'selectors_dictionary' => [
1448	'left' => 'margin-inline-end: var(--ui-e-image-spacing, 8px); order: 0;',
1449	'right' => 'margin-inline-start: var(--ui-e-image-spacing, 8px); order: 1;',
1450	],
1451	'default' => 'left',
1452	'selectors' => [
1453	$link . ' .ui-e-menu-item-image' => '{{VALUE}}',
1454	],
1455	]
1456	);
1457
1458	$this->add_responsive_control(
1459	'image_size',
1460	[
1461	'label' => esc_html__('Size', 'uicore-elements'),
1462	'type' => Controls_Manager::SLIDER,
1463	'range' => [
1464	'px' => [
1465	'max' => 100,
1466	],
1467	],
1468	'default' => [
1469	'unit' => 'px',
1470	'size' => 16,
1471	],
1472	'size_units' => ['px', 'em', 'rem'],
1473	'selectors' => [
1474	$link . ' > .ui-e-menu-item-image' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
1475	],
1476	]
1477	);
1478
1479	$this->add_responsive_control(
1480	'image_spacing',
1481	[
1482	'label' => esc_html__('Spacing', 'uicore-elements'),
1483	'type' => Controls_Manager::SLIDER,
1484	'size_units' => ['px', 'em', 'rem', 'vw', 'custom'],
1485	'range' => [
1486	'px' => [
1487	'max' => 100,
1488	],
1489	],
1490	'default' => [
1491	'size' => 5,
1492	'unit' => 'px',
1493	],
1494	'selectors' => [
1495	'{{WRAPPER}}' => '--ui-e-image-spacing: {{SIZE}}{{UNIT}};',
1496	],
1497	]
1498	);
1499
1500	$this->end_controls_section();
1501
1502	$this->start_controls_section(
1503	'section_dropdown_indicator_style',
1504	[
1505	'label' => esc_html__('Dropdown Indicator', 'uicore-elements'),
1506	'tab' => Controls_Manager::TAB_STYLE,
1507	'conditions' => [
1508	'terms' => [
1509	[
1510	'name' => 'dropdown_icon[value]',
1511	'operator' => '!==',
1512	'value' => '',
1513	],
1514	],
1515	],
1516	]
1517	);
1518
1519	$this->add_responsive_control(
1520	'dropdown_icon_size',
1521	[
1522	'label' => esc_html__('Size', 'uicore-elements'),
1523	'type' => Controls_Manager::SLIDER,
1524	'size_units' => ['px', '%', 'em', 'rem', 'custom'],
1525	'default' => [
1526	'unit' => 'px',
1527	'size' => 16,
1528	],
1529	'selectors' => [
1530	$link . ' > .ui-e-dropdown-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
1531	$link . ' > .ui-e-dropdown-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
1532	],
1533	]
1534	);
1535
1536	$this->add_responsive_control(
1537	'dropdown_icon_spacing',
1538	[
1539	'label' => esc_html__('Spacing', 'uicore-elements'),
1540	'type' => Controls_Manager::SLIDER,
1541	'size_units' => ['px', 'em', 'rem', 'custom'],
1542	'default' => [
1543	'size' => 5,
1544	'unit' => 'px',
1545	],
1546	'selectors' => [
1547	$link . ' > .ui-e-dropdown-icon' => 'margin-inline-start: {{SIZE}}{{UNIT}};',
1548	],
1549	]
1550	);
1551
1552	$this->start_controls_tabs('dropdown_icon_tabs');
1553
1554	$this->start_controls_tab('dropdown_icon_tab_normal', [
1555	'label' => 'Normal',
1556	]);
1557	$this->add_control(
1558	'dropdown_icon_color_normal',
1559	[
1560	'label' => esc_html__('Color', 'uicore-elements'),
1561	'type' => Controls_Manager::COLOR,
1562	'selectors' => [
1563	$item . ':not(.ui-e-open) > a > .ui-e-dropdown-icon i' => 'color: {{VALUE}};',
1564	$item . ':not(.ui-e-open) > a > .ui-e-dropdown-icon svg' => 'fill: {{VALUE}};',
1565	],
1566	'default' => 'var(--e-global-color-uicore_primary)',
1567
1568	]
1569	);
1570	$this->end_controls_tab();
1571
1572	$this->start_controls_tab('dropdown_icon_tab_hover', [
1573	'label' => 'Hover',
1574	]);
1575	$this->add_control(
1576	'dropdown_icon_color_hover',
1577	[
1578	'label' => esc_html__('Color', 'uicore-elements'),
1579	'type' => Controls_Manager::COLOR,
1580	'selectors' => [
1581	$item . ' > a:hover > .ui-e-dropdown-icon i' => 'color: {{VALUE}};',
1582	$item . ' > a:hover > .ui-e-dropdown-icon svg' => 'fill: {{VALUE}};',
1583	],
1584	'default' => 'var(--e-global-color-uicore_primary)',
1585
1586	]
1587	);
1588	$this->end_controls_tab();
1589
1590	$this->start_controls_tab('dropdown_icon_tab_active', [
1591	'label' => 'Active',
1592	]);
1593	$this->add_control(
1594	'dropdown_icon_color_active',
1595	[
1596	'label' => esc_html__('Color', 'uicore-elements'),
1597	'type' => Controls_Manager::COLOR,
1598	'selectors' => [
1599	$item . '.ui-e-open > a > .ui-e-dropdown-opened i' => 'color: {{VALUE}};',
1600	$item . '.ui-e-open > a > .ui-e-dropdown-opened svg' => 'fill: {{VALUE}};',
1601	],
1602	]
1603	);
1604	$this->end_controls_tab();
1605
1606	$this->end_controls_tabs();
1607
1608	$this->end_controls_section();
1609
1610	$this->start_controls_section(
1611	'section_badge_style',
1612	[
1613	'label' => esc_html__('Badge', 'uicore-elements'),
1614	'tab' => Controls_Manager::TAB_STYLE,
1615	]
1616	);
1617
1618	$this->add_group_control(
1619	Group_Control_Typography::get_type(),
1620	[
1621	'name' => 'badge_typography',
1622	'global' => [
1623	'default' => Global_Typography::TYPOGRAPHY_TEXT,
1624	],
1625	'selector' => $link . ' .ui-e-badge',
1626	'default' => [
1627	'font_size' => [
1628	'unit' => 'px',
1629	'size' => 14,
1630	],
1631	],
1632	]
1633	);
1634
1635	$this->add_control(
1636	'badge_color',
1637	[
1638	'label' => esc_html__('Text Color', 'uicore-elements'),
1639	'type' => Controls_Manager::COLOR,
1640	'selectors' => [
1641	'{{WRAPPER}}' => '--ui-e-badge-color: {{VALUE}};',
1642	],
1643	]
1644	);
1645
1646	$this->add_control(
1647	'badge_background_color',
1648	[
1649	'label' => esc_html__('Background Color', 'uicore-elements'),
1650	'type' => Controls_Manager::COLOR,
1651	'default' => 'var(--e-global-color-uicore_primary)',
1652
1653	'selectors' => [
1654	$link . ' .ui-e-badge' => 'background-color: {{VALUE}};',
1655	],
1656	]
1657	);
1658
1659	$this->add_responsive_control(
1660	'badge_v_offset',
1661	[
1662	'label' => esc_html__('Vertical Offset', 'uicore-elements'),
1663	'type' => Controls_Manager::SLIDER,
1664	'size_units' => ['px', 'em', 'rem', '%', 'custom'],
1665	'range' => [
1666	'px' => [
1667	'min' => -200,
1668	'max' => 200,
1669	],
1670	'em' => [
1671	'min' => -20,
1672	'max' => 20,
1673	],
1674	'rem' => [
1675	'min' => -20,
1676	'max' => 20,
1677	],
1678	'%' => [
1679	'min' => -200,
1680	'max' => 200,
1681	],
1682	],
1683	'selectors' => [
1684	'{{WRAPPER}}' => '--ui-e-badge-offset-y: {{SIZE}}{{UNIT}};',
1685	],
1686	]
1687	);
1688
1689	$this->add_responsive_control(
1690	'badge_h_offset',
1691	[
1692	'label' => esc_html__('Horizontal Offset', 'uicore-elements'),
1693	'type' => Controls_Manager::SLIDER,
1694	'size_units' => ['px', 'em', 'rem', '%', 'custom'],
1695	'range' => [
1696	'px' => [
1697	'min' => -200,
1698	'max' => 200,
1699	],
1700	'em' => [
1701	'min' => -20,
1702	'max' => 20,
1703	],
1704	'rem' => [
1705	'min' => -20,
1706	'max' => 20,
1707	],
1708	'%' => [
1709	'min' => -200,
1710	'max' => 200,
1711	],
1712	],
1713	'selectors' => [
1714	'{{WRAPPER}}' => '--ui-e-badge-offset-x: {{SIZE}}{{UNIT}};',
1715	],
1716	]
1717	);
1718
1719	$this->add_responsive_control(
1720	'badge_padding',
1721	[
1722	'label' => esc_html__('Padding', 'uicore-elements'),
1723	'type' => Controls_Manager::DIMENSIONS,
1724	'size_units' => ['px', '%', 'em', 'rem', 'custom'],
1725	'selectors' => [
1726	$link . ' .ui-e-badge' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1727	],
1728	]
1729	);
1730
1731	$this->add_responsive_control(
1732	'badge_border_radius',
1733	[
1734	'label' => esc_html__('Border Radius', 'uicore-elements'),
1735	'type' => Controls_Manager::DIMENSIONS,
1736	'size_units' => ['px', '%', 'em', 'rem', 'custom'],
1737	'selectors' => [
1738	$link . ' .ui-e-badge' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1739	],
1740	]
1741	);
1742
1743	$this->end_controls_section();
1744
1745	$this->start_controls_section(
1746	'section_description_style',
1747	[
1748	'label' => esc_html__('Description', 'uicore-elements'),
1749	'tab' => Controls_Manager::TAB_STYLE,
1750	]
1751	);
1752
1753	$this->add_control(
1754	'description_alignment',
1755	[
1756	'label' => esc_html__('Alignment', 'uicore-elements'),
1757	'type' => Controls_Manager::CHOOSE,
1758	'options' => [
1759	'left' => [
1760	'title' => esc_html__('Left', 'uicore-elements'),
1761	'icon' => 'eicon-text-align-left',
1762	],
1763	'center' => [
1764	'title' => esc_html__('Center', 'uicore-elements'),
1765	'icon' => 'eicon-text-align-center',
1766	],
1767	'right' => [
1768	'title' => esc_html__('Right', 'uicore-elements'),
1769	'icon' => 'eicon-text-align-right',
1770	],
1771	],
1772	'default' => 'left',
1773	'selectors_dictionary' => [
1774	'left' => 'left: var(--ui-e-description-offset, 0);',
1775	'center' => 'left: calc(50% + var(--ui-e-description-offset, 0)); transform: translateX(-50%);',
1776	'right' => 'right: var(--ui-e-description-offset, 0);',
1777	],
1778	'selectors' => [
1779	$link . ' .ui-e-description' => '{{VALUE}};',
1780	],
1781	]
1782	);
1783
1784	$this->add_group_control(
1785	Group_Control_Typography::get_type(),
1786	[
1787	'name' => 'description_typography',
1788	'selector' => $link . ' .ui-e-description',
1789	]
1790	);
1791
1792	$this->add_control(
1793	'description_color',
1794	[
1795	'label' => esc_html__('Color', 'uicore-elements'),
1796	'type' => Controls_Manager::COLOR,
1797	'selectors' => [
1798	$link . ' .ui-e-description' => 'color: {{VALUE}};',
1799	],
1800	]
1801	);
1802
1803	$this->add_responsive_control(
1804	'description_v_offset',
1805	[
1806	'label' => esc_html__('Vertical Offset', 'uicore-elements'),
1807	'type' => Controls_Manager::SLIDER,
1808	'size_units' => ['px', 'em', 'rem', '%', 'custom'],
1809	'range' => [
1810	'px' => [
1811	'min' => -200,
1812	'max' => 200,
1813	],
1814	'em' => [
1815	'min' => -20,
1816	'max' => 20,
1817	],
1818	'rem' => [
1819	'min' => -20,
1820	'max' => 20,
1821	],
1822	'%' => [
1823	'min' => -100,
1824	'max' => 100,
1825	],
1826	],
1827	'default' => [
1828	'size' => -10,
1829	'unit' => 'px',
1830	],
1831	'selectors' => [
1832	$link . ' .ui-e-description' => 'bottom: {{SIZE}}{{UNIT}};',
1833	],
1834	]
1835	);
1836
1837	$this->add_responsive_control(
1838	'description_h_offset',
1839	[
1840	'label' => esc_html__('Horizontal Offset', 'uicore-elements'),
1841	'type' => Controls_Manager::SLIDER,
1842	'size_units' => ['px', 'em', 'rem', '%', 'custom'],
1843	'range' => [
1844	'px' => [
1845	'min' => -200,
1846	'max' => 200,
1847	],
1848	'em' => [
1849	'min' => -20,
1850	'max' => 20,
1851	],
1852	'rem' => [
1853	'min' => -20,
1854	'max' => 20,
1855	],
1856	'%' => [
1857	'min' => -100,
1858	'max' => 100,
1859	],
1860	],
1861	'default' => [
1862	'size' => 0,
1863	'unit' => 'px',
1864	],
1865	'selectors' => [
1866	$link . ' .ui-e-description' => '--ui-e-description-offset: {{SIZE}}{{UNIT}};',
1867	],
1868	]
1869	);
1870
1871	$this->end_controls_section();
1872
1873	// Explore the UX of creating/editing menus without style controls to globally adjust nested containers
1874	// $this->start_controls_section('section_content_style', [
1875	// 'label' => esc_html__('Sub menu', 'uicore-elements'),
1876	// 'tab' => Controls_Manager::TAB_STYLE,
1877	// ]);
1878
1879	// $this->add_group_control(
1880	// Group_Control_Background::get_type(),
1881	// [
1882	// 'name' => 'content_background_color',
1883	// 'types' => ['classic', 'gradient'],
1884	// 'exclude' => ['image'],
1885	// 'selector' => $item . ' > .ui-e-submenu',
1886	// 'fields_options' => [
1887	// 'color' => [
1888	// 'label' => esc_html__('Background Color', 'uicore-elements'),
1889	// ],
1890	// ],
1891	// ]
1892	// );
1893
1894	// $this->add_group_control(
1895	// Group_Control_Border::get_type(),
1896	// [
1897	// 'name' => 'content_border',
1898	// 'selector' => $item . ' > .ui-e-submenu',
1899	// 'fields_options' => [
1900	// 'color' => [
1901	// 'label' => esc_html__('Border Color', 'uicore-elements'),
1902	// ],
1903	// 'width' => [
1904	// 'label' => esc_html__('Border Width', 'uicore-elements'),
1905	// ],
1906	// ],
1907	// ]
1908	// );
1909
1910	// $this->add_responsive_control(
1911	// 'content_border_radius',
1912	// [
1913	// 'label' => esc_html__('Border Radius', 'uicore-elements'),
1914	// 'type' => Controls_Manager::DIMENSIONS,
1915	// 'size_units' => ['px', '%', 'em', 'rem', 'custom'],
1916	// 'selectors' => [
1917	// $item . ' > .ui-e-submenu' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1918	// ],
1919	// ]
1920	// );
1921
1922	// $this->add_group_control(
1923	// Group_Control_Box_Shadow::get_type(),
1924	// [
1925	// 'name' => 'content_shadow',
1926	// 'selector' => $item . ' > .ui-e-submenu',
1927	// ]
1928	// );
1929
1930	// $this->add_responsive_control(
1931	// 'content_padding',
1932	// [
1933	// 'label' => esc_html__('Padding', 'uicore-elements'),
1934	// 'type' => Controls_Manager::DIMENSIONS,
1935	// 'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
1936	// 'selectors' => [
1937	// $item . ' > .ui-e-submenu' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1938	// ],
1939	// 'separator' => 'before',
1940	// ]
1941	// );
1942
1943	// $this->end_controls_section();
1944
1945	$this->start_controls_section('submenu_style_section', [
1946	'label' => esc_html__('Submenu', 'uicore-elements'),
1947	'tab' => Controls_Manager::TAB_STYLE,
1948	]);
1949
1950	$this->add_responsive_control(
1951	'submenu_offset',
1952	[
1953	'label' => esc_html__('Submenu Offset', 'uicore-elements'),
1954	'type' => Controls_Manager::SLIDER,
1955	'size_units' => ['px', '%', 'em', 'rem', 'custom'],
1956	'range' => [
1957	'px' => [
1958	'max' => 200,
1959	],
1960	'em' => [
1961	'max' => 20,
1962	],
1963	'rem' => [
1964	'max' => 20,
1965	],
1966	],
1967	'default' => [
1968	'size' => 0,
1969	],
1970	'frontend_available' => true,
1971	'selectors' => [
1972	'{{WRAPPER}}' => '--ui-e-submenu-offset: {{SIZE}}{{UNIT}};',
1973	],
1974	]
1975	);
1976
1977	$this->end_controls_section();
1978
1979	$this->start_controls_section('back_button_section', [
1980	'label' => esc_html__('Back Button', 'uicore-elements'),
1981	'tab' => Controls_Manager::TAB_STYLE,
1982	'condition' => [
1983	'fullscreen_canvas_dropdown' => 'slide',
1984	'breakpoint_selector!' => 'none'
1985	],
1986	]);
1987
1988	$this->start_controls_tabs('back_button_tabs');
1989
1990	$this->start_controls_tab('back_default_tab', [
1991	'label' => esc_html__('Default', 'uicore-elements'),
1992	]);
1993
1994	$this->add_group_control(
1995	Group_Control_Typography::get_type(),
1996	[
1997	'name' => 'back_button_typography',
1998	'global' => [
1999	'default' => Global_Typography::TYPOGRAPHY_TEXT,
2000	],
2001	'selector' => '{{WRAPPER}} .ui-e-menu-item > .ui-e-back-button',
2002	]
2003	);
2004
2005	$this->add_control(
2006	'back_button_color',
2007	[
2008	'label' => esc_html__('Color', 'uicore-elements'),
2009	'type' => Controls_Manager::COLOR,
2010	'selectors' => [
2011	'{{WRAPPER}} .ui-e-menu-item > .ui-e-back-button' => 'color: {{VALUE}};',
2012	'{{WRAPPER}} .ui-e-menu-item > .ui-e-back-button .ui-e-back-button-icon' => 'fill: {{VALUE}};',
2013	],
2014	'condition' => [
2015	'fullscreen_canvas_dropdown' => 'slide',
2016	],
2017	]
2018	);
2019
2020	$this->add_responsive_control(
2021	'back_button_icon_size',
2022	[
2023	'label' => esc_html__('Size', 'uicore-elements'),
2024	'type' => Controls_Manager::SLIDER,
2025	'size_units' => ['px', '%', 'em', 'rem', 'custom'],
2026	'range' => [
2027	'px' => [
2028	'max' => 100,
2029	],
2030	],
2031	'default' => [
2032	'unit' => 'px',
2033	'size' => 16,
2034	],
2035	'selectors' => [
2036	'{{WRAPPER}} .ui-e-menu-item > .ui-e-back-button .ui-e-back-button-icon' => 'font-size: {{SIZE}}{{UNIT}};',
2037	'{{WRAPPER}} .ui-e-menu-item > .ui-e-back-button .ui-e-back-button-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
2038	],
2039	]
2040	);
2041
2042	$this->add_control(
2043	'back_button_offset_x',
2044	[
2045	'label' => esc_html__('Horizontal Offset', 'uicore-elements'),
2046	'type' => Controls_Manager::SLIDER,
2047	'size_units' => ['px', '%', 'em', 'rem', 'custom'],
2048	'default' => [
2049	'unit' => '%',
2050	'size' => 0,
2051	],
2052	'range' => [
2053	'%' => [
2054	'min' => -100,
2055	'max' => 100,
2056	'step' => 1,
2057	],
2058	'px' => [
2059	'min' => -1000,
2060	'max' => 1000,
2061	'step' => 2,
2062	],
2063	],
2064	'selectors' => [
2065	'{{WRAPPER}}' => '--ui-e-back-button-offset-x: {{SIZE}}{{UNIT}};',
2066	],
2067	'condition' => [
2068	'fullscreen_canvas_dropdown' => 'slide',
2069	],
2070	]
2071	);
2072
2073	$this->add_control(
2074	'back_button_offset_y',
2075	[
2076	'label' => esc_html__('Vertical Offset', 'uicore-elements'),
2077	'type' => Controls_Manager::SLIDER,
2078	'size_units' => ['px', '%', 'em', 'rem', 'custom'],
2079	'default' => [
2080	'unit' => '%',
2081	'size' => -8,
2082	],
2083	'range' => [
2084	'%' => [
2085	'min' => -100,
2086	'max' => 100,
2087	'step' => 1,
2088	],
2089	'px' => [
2090	'min' => -1000,
2091	'max' => 1000,
2092	'step' => 2,
2093	],
2094	],
2095	'selectors' => [
2096	'{{WRAPPER}}' => '--ui-e-back-button-offset-y: {{SIZE}}{{UNIT}};',
2097	],
2098	'condition' => [
2099	'fullscreen_canvas_dropdown' => 'slide',
2100	],
2101	]
2102	);
2103
2104	$this->end_controls_tab();
2105
2106	$this->start_controls_tab('back_submenu_tab', [
2107	'label' => esc_html__('Submenu', 'uicore-elements'),
2108	]);
2109
2110	$this->add_group_control(
2111	Group_Control_Typography::get_type(),
2112	[
2113	'name' => 'back_button_typography_submenu',
2114	'global' => [
2115	'default' => Global_Typography::TYPOGRAPHY_TEXT,
2116	],
2117	'selector' => '{{WRAPPER}} .ui-e-menu-list > .ui-e-back-button',
2118	]
2119	);
2120
2121	$this->add_control(
2122	'back_button_color_submenu',
2123	[
2124	'label' => esc_html__('Color', 'uicore-elements'),
2125	'type' => Controls_Manager::COLOR,
2126	'selectors' => [
2127	'{{WRAPPER}} .ui-e-menu-list > .ui-e-back-button' => 'color: {{VALUE}};',
2128	'{{WRAPPER}} .ui-e-menu-list > .ui-e-back-button .ui-e-back-button-icon' => 'fill: {{VALUE}};',
2129	],
2130	'condition' => [
2131	'fullscreen_canvas_dropdown' => 'slide',
2132	],
2133	]
2134	);
2135
2136	$this->add_responsive_control(
2137	'back_button_icon_size_submenu',
2138	[
2139	'label' => esc_html__('Size', 'uicore-elements'),
2140	'type' => Controls_Manager::SLIDER,
2141	'size_units' => ['px', 'em', 'rem', 'custom'],
2142	'range' => [
2143	'px' => [
2144	'max' => 100,
2145	],
2146	],
2147	'default' => [
2148	'unit' => 'px',
2149	'size' => 16,
2150	],
2151	'selectors' => [
2152	'{{WRAPPER}} .ui-e-menu-list > .ui-e-back-button .ui-e-back-button-icon' => 'font-size: {{SIZE}}{{UNIT}};',
2153	'{{WRAPPER}} .ui-e-menu-list > .ui-e-back-button .ui-e-back-button-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
2154	],
2155	]
2156	);
2157
2158	$this->end_controls_tab();
2159
2160	$this->end_controls_tabs();
2161
2162	$this->end_controls_section();
2163
2164	$this->start_controls_section('fullscreen_menu_button_section', [
2165	'label' => esc_html__('Fullscreen Button', 'uicore-elements'),
2166	'tab' => Controls_Manager::TAB_STYLE,
2167	'condition' => [
2168	'breakpoint_selector!' => 'none'
2169	]
2170	]);
2171
2172	$this->add_control(
2173	'fullscreen_button_size',
2174	[
2175	'label' => esc_html__('Button Size', 'uicore-elements'),
2176	'type' => Controls_Manager::SLIDER,
2177	'size_units' => ['px', 'em', 'rem', 'custom'],
2178	'default' => [
2179	'unit' => 'px',
2180	'size' => 20,
2181	],
2182	'range' => [
2183	'px' => [
2184	'min' => 14,
2185	'max' => 80,
2186	'step' => 1,
2187	],
2188
2189	],
2190	'selectors' => [
2191	'{{WRAPPER}}' => '--ui-e-fullscreen-button-size: {{SIZE}}{{UNIT}};',
2192	],
2193	'condition' => [
2194	'button_style!' => 'text',
2195	],
2196	]
2197	);
2198
2199	$this->add_group_control(
2200	Group_Control_Typography::get_type(),
2201	[
2202	'name' => 'fullscreen_button_typography',
2203	'fields_options' => [
2204	'font_size' => [
2205	'default' => [
2206	'unit' => 'px',
2207	'size' => 12,
2208	],
2209	],
2210	'line_height' => [
2211	'default' => [
2212	'unit' => 'em',
2213	'size' => 1,
2214	],
2215	],
2216	],
2217	'selector' => '{{WRAPPER}} .ui-e-fullscreen-button-text',
2218	'condition' => [
2219	'button_style' => 'text',
2220	],
2221	]
2222	);
2223
2224	$this->start_controls_tabs('fullscreen_menu_button_tabs');
2225
2226	// Open Button
2227	$this->start_controls_tab('fullscreen_menu_button_tab_normal', [
2228	'label' => '<span class="elementor-control-icons--inline__displayed-icon"><i class="fas fa-bars"></i></span>'
2229	]);
2230
2231
2232	$this->add_control(
2233	'fullscreen_button_padding',
2234	[
2235	'label' => esc_html__('Button Padding', 'uicore-elements'),
2236	'type' => Controls_Manager::DIMENSIONS,
2237	'size_units' => ['px', '%', 'em', 'rem', 'custom'],
2238	'default' => [
2239	'unit' => 'px',
2240	'top' => 6,
2241	'right' => 6,
2242	'bottom' => 6,
2243	'left' => 6,
2244	],
2245	'selectors' => [
2246	'{{WRAPPER}} .ui-e-fullscreen-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2247	],
2248	]
2249	);
2250
2251	$this->add_control(
2252	'fullscreen_button_radius',
2253	[
2254	'label' => esc_html__('Border Radius', 'uicore-elements'),
2255	'type' => Controls_Manager::DIMENSIONS,
2256	'size_units' => ['px', '%', 'em', 'rem', 'custom'],
2257	'default' => [
2258	'unit' => 'px',
2259	'top' => 6,
2260	'right' => 6,
2261	'bottom' => 6,
2262	'left' => 6,
2263	],
2264	'selectors' => [
2265	'{{WRAPPER}} .ui-e-fullscreen-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2266	],
2267	]
2268	);
2269
2270	$this->add_group_control(
2271	Group_Control_Border::get_type(),
2272	[
2273	'name' => 'button_border',
2274	'selector' => '{{WRAPPER}} .ui-e-fullscreen-button',
2275	'separator' => 'after',
2276	]
2277	);
2278
2279	$this->add_control(
2280	'fullscreen_button_background',
2281	[
2282	'label' => esc_html__('Background Color', 'uicore-elements'),
2283	'type' => Controls_Manager::COLOR,
2284	'selectors' => [
2285	'{{WRAPPER}} .ui-e-fullscreen-button' => 'background-color: {{VALUE}};',
2286	],
2287	]
2288	);
2289
2290	$this->add_control(
2291	'fullscreen_button_color',
2292	[
2293	'label' => esc_html__('Color', 'uicore-elements'),
2294	'type' => Controls_Manager::COLOR,
2295	'selectors' => [
2296	'{{WRAPPER}} .ui-e-fullscreen-button' => 'color: {{VALUE}};',
2297	'{{WRAPPER}} .ui-e-fullscreen-button svg' => 'fill: {{VALUE}};',
2298	],
2299	'separator' => 'after',
2300	]
2301	);
2302
2303	$this->add_control(
2304	'fullscreen_button_background_hover',
2305	[
2306	'label' => esc_html__('Hover Background Color', 'uicore-elements'),
2307	'type' => Controls_Manager::COLOR,
2308	'selectors' => [
2309	'{{WRAPPER}} .ui-e-fullscreen-button:hover' => 'background-color: {{VALUE}};',
2310	],
2311	]
2312	);
2313
2314	$this->add_control(
2315	'fullscreen_button_color_hover',
2316	[
2317	'label' => esc_html__('Hover Color', 'uicore-elements'),
2318	'type' => Controls_Manager::COLOR,
2319	'selectors' => [
2320	'{{WRAPPER}} .ui-e-fullscreen-button:hover' => 'color: {{VALUE}};',
2321	'{{WRAPPER}} .ui-e-fullscreen-button:hover svg' => 'fill: {{VALUE}};',
2322	],
2323	]
2324	);
2325
2326	$this->end_controls_tab();
2327
2328	// Close Button
2329	$this->start_controls_tab('fullscreen_button_tab_active', [
2330	'label' => '<span class="elementor-control-icons--inline__displayed-icon"><i class="fas fa-window-close"></i></span>'
2331	]);
2332
2333	$this->add_control(
2334	'fullscreen_close_button_description',
2335	[
2336	'type' => Controls_Manager::RAW_HTML,
2337	'raw' => esc_html__('The close button position shown in the editor may differ from the frontend. Check the frontend to confirm its final placement.', 'uicore-elements'),
2338	'content_classes' => 'elementor-control-field-description',
2339	]
2340	);
2341
2342	$this->add_responsive_control(
2343	'fullscreen_close_button_offset_x',
2344	[
2345	'label' => esc_html__('Horizontal Offset', 'uicore-elements'),
2346	'type' => Controls_Manager::SLIDER,
2347	'size_units' => ['vw'],
2348	'default' => [
2349	'unit' => 'vw',
2350	'size' => 0,
2351	],
2352	'range' => [
2353	'vw' => [
2354	'min' => -100,
2355	'max' => 100,
2356	'step' => 1,
2357	],
2358	],
2359	'selectors' => [
2360	'{{WRAPPER}}.ui-e-fullscreen-menu-enabled .ui-e-fullscreen-button-wrp' => '--ui-e-fullscreen-button-offset-x: {{SIZE}}vw;',
2361	],
2362	]
2363	);
2364
2365	$this->add_responsive_control(
2366	'fullscreen_close_button_offset_y',
2367	[
2368	'label' => esc_html__('Vertical Offset', 'uicore-elements'),
2369	'type' => Controls_Manager::SLIDER,
2370	'size_units' => ['vh'],
2371	'default' => [
2372	'unit' => 'vh',
2373	'size' => 0,
2374	],
2375	'range' => [
2376	'vh' => [
2377	'min' => -100,
2378	'max' => 100,
2379	'step' => 1,
2380	],
2381	],
2382	'separator' => 'after',
2383	'selectors' => [
2384	'{{WRAPPER}}.ui-e-fullscreen-menu-enabled .ui-e-fullscreen-button-wrp' => '--ui-e-fullscreen-button-offset-y: {{SIZE}}vh;',
2385	],
2386	]
2387	);
2388
2389	$this->add_control(
2390	'fullscreen_button_padding_active',
2391	[
2392	'label' => esc_html__('Padding', 'uicore-elements'),
2393	'type' => Controls_Manager::DIMENSIONS,
2394	'size_units' => ['px', '%', 'em', 'rem', 'custom'],
2395	'selectors' => [
2396	'{{WRAPPER}} .ui-e-fullscreen-button[aria-expanded="true"]' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2397	],
2398	]
2399	);
2400
2401	$this->add_control(
2402	'fullscreen_button_radius_active',
2403	[
2404	'label' => esc_html__('Border Radius', 'uicore-elements'),
2405	'type' => Controls_Manager::DIMENSIONS,
2406	'size_units' => ['px', '%', 'em', 'rem', 'custom'],
2407	'selectors' => [
2408	'{{WRAPPER}} .ui-e-fullscreen-button[aria-expanded="true"]' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2409	],
2410	]
2411	);
2412
2413	$this->add_group_control(
2414	Group_Control_Border::get_type(),
2415	[
2416	'name' => 'fullscreen_button_border_active',
2417	'selector' => '{{WRAPPER}} .ui-e-fullscreen-button[aria-expanded="true"]',
2418	'separator' => 'after',
2419	]
2420	);
2421
2422	$this->add_control(
2423	'fullscreen_button_background_active',
2424	[
2425	'label' => esc_html__('Background Color', 'uicore-elements'),
2426	'type' => Controls_Manager::COLOR,
2427	'selectors' => [
2428	'{{WRAPPER}} .ui-e-fullscreen-button[aria-expanded="true"]' => 'background-color: {{VALUE}};',
2429	],
2430	]
2431	);
2432
2433	$this->add_control(
2434	'fullscreen_button_color_active',
2435	[
2436	'label' => esc_html__('Color', 'uicore-elements'),
2437	'type' => Controls_Manager::COLOR,
2438	'selectors' => [
2439	'{{WRAPPER}} .ui-e-fullscreen-button[aria-expanded="true"]' => 'color: {{VALUE}};',
2440	'{{WRAPPER}} .ui-e-fullscreen-button[aria-expanded="true"] svg' => 'fill: {{VALUE}};',
2441	],
2442	'separator' => 'after',
2443	]
2444	);
2445
2446	$this->add_control(
2447	'fullscreen_button_background_hover_active',
2448	[
2449	'label' => esc_html__('Hover Background Color', 'uicore-elements'),
2450	'type' => Controls_Manager::COLOR,
2451	'selectors' => [
2452	'{{WRAPPER}} .ui-e-fullscreen-button[aria-expanded="true"]:hover' => 'background-color: {{VALUE}};',
2453	],
2454	]
2455	);
2456
2457	$this->add_control(
2458	'fullscreen_button_color_hover_active',
2459	[
2460	'label' => esc_html__('Hover Color', 'uicore-elements'),
2461	'type' => Controls_Manager::COLOR,
2462	'selectors' => [
2463	'{{WRAPPER}} .ui-e-fullscreen-button[aria-expanded="true"]:hover' => 'color: {{VALUE}};',
2464	'{{WRAPPER}} .ui-e-fullscreen-button[aria-expanded="true"]:hover svg' => 'fill: {{VALUE}};',
2465	],
2466	]
2467	);
2468
2469	$this->end_controls_tab();
2470
2471	$this->end_controls_tabs();
2472
2473	$this->end_controls_section();
2474
2475	$this->start_controls_section('fullscreen_menu_canvas_section', [
2476	'label' => esc_html__('Fullscreen Canvas', 'uicore-elements'),
2477	'tab' => Controls_Manager::TAB_STYLE,
2478	'condition' => [
2479	'breakpoint_selector!' => 'none'
2480	]
2481	]);
2482
2483	$this->add_control(
2484	'canvas_heading',
2485	[
2486	'label' => esc_html__('Canvas', 'uicore-elements'),
2487	'type' => Controls_Manager::HEADING,
2488	]
2489	);
2490
2491	$this->add_group_control(
2492	Group_Control_Background::get_type(),
2493	[
2494	'name' => 'fullscreen_canvas_background',
2495	'types' => ['classic', 'gradient'],
2496	'exclude' => ['image'],
2497	'selector' => $fullscreen_canvas,
2498	'fields_options' => [
2499	'color' => [
2500	'label' => esc_html__('Canvas Background', 'uicore-elements'),
2501	],
2502	],
2503	]
2504	);
2505
2506	// Add blur slider control
2507	$this->add_responsive_control(
2508	'fullscreen_canvas_blur',
2509	[
2510	'label' => esc_html__('Background Blur', 'uicore-elements'),
2511	'type' => Controls_Manager::SLIDER,
2512	'size_units' => ['px'],
2513	'range' => [
2514	'px' => [
2515	'min' => 0.1,
2516	'max' => 5,
2517	'step' => 0.1,
2518	],
2519	],
2520	'default' => [
2521	'unit' => 'px',
2522	'size' => 0,
2523	],
2524	'selectors' => [
2525	'{{WRAPPER}}.ui-e-fullscreen-menu-enabled > nav' => 'backdrop-filter: blur({{SIZE}}{{UNIT}}); -webkit-backdrop-filter: blur({{SIZE}}{{UNIT}});',
2526	],
2527	]
2528	);
2529
2530	$this->add_control(
2531	'canvas_inner_container_heading',
2532	[
2533	'label' => esc_html__('Inner container', 'uicore-elements'),
2534	'type' => Controls_Manager::HEADING,
2535	'separator' => 'before',
2536	]
2537	);
2538
2539	$this->add_group_control(
2540	Group_Control_Background::get_type(),
2541	[
2542	'name' => 'fullscreen_canvas_container_background',
2543	'types' => ['classic', 'gradient'],
2544	'exclude' => ['image'],
2545	'selector' => $fullscreen_canvas . ' > .ui-e-menu',
2546	'fields_options' => [
2547	'color' => [
2548	'label' => esc_html__('Container Background', 'uicore-elements'),
2549	],
2550	],
2551	]
2552	);
2553
2554	$this->add_responsive_control(
2555	'fullscreen_canvas_padding',
2556	[
2557	'label' => esc_html__('Padding', 'uicore-elements'),
2558	'type' => Controls_Manager::DIMENSIONS,
2559	'size_units' => ['px', '%', 'em', 'rem', 'custom'],
2560	'default' => [
2561	'unit' => 'px',
2562	'top' => 60,
2563	'right' => 60,
2564	'bottom' => 60,
2565	'left' => 60,
2566	],
2567	'tablet_default' => [
2568	'unit' => 'px',
2569	'top' => 50,
2570	'right' => 50,
2571	'bottom' => 50,
2572	'left' => 50,
2573	],
2574	'mobile_default' => [
2575	'unit' => 'px',
2576	'top' => 40,
2577	'right' => 40,
2578	'bottom' => 40,
2579	'left' => 40,
2580	],
2581	'selectors' => [
2582	'{{WRAPPER}}' => '--ui-e-fullscreen-canvas-padding-l: {{LEFT}}{{UNIT}}; --ui-e-fullscreen-canvas-padding-r: {{RIGHT}}{{UNIT}};',
2583	$fullscreen_canvas . ' > .ui-e-menu' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2584	],
2585	]
2586	);
2587
2588	// Add border group control for the inner container
2589	$this->add_group_control(
2590	Group_Control_Border::get_type(),
2591	[
2592	'name' => 'fullscreen_canvas_container_border',
2593	'selector' => $fullscreen_canvas . ' > .ui-e-menu',
2594	'fields_options' => [
2595	'color' => [
2596	'label' => esc_html__('Border Color', 'uicore-elements'),
2597	],
2598	'width' => [
2599	'label' => esc_html__('Border Width', 'uicore-elements'),
2600	],
2601	],
2602	]
2603	);
2604
2605	$this->add_control(
2606	'fullscreen_canvas_radius',
2607	[
2608	'label' => esc_html__('Border Radius', 'uicore-elements'),
2609	'type' => Controls_Manager::DIMENSIONS,
2610	'size_units' => ['px', '%', 'em', 'rem', 'custom'],
2611	'selectors' => [
2612	$fullscreen_canvas . ' > .ui-e-menu' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
2613	],
2614	]
2615	);
2616
2617	$this->add_responsive_control(
2618	'fullscreen_canvas_width',
2619	[
2620	'label' => esc_html__('Width', 'uicore-elements'),
2621	'type' => Controls_Manager::SLIDER,
2622	'size_units' => ['vw'],
2623	'range' => [
2624	'vw' => [
2625	'max' => 100,
2626	],
2627	],
2628	'default' => [
2629	'size' => 100,
2630	'unit' => 'vw',
2631	],
2632	'tablet_default' => [
2633	'size' => 100,
2634	'unit' => 'vw',
2635	],
2636	'mobile_default' => [
2637	'size' => 100,
2638	'unit' => 'vw',
2639	],
2640	'selectors' => [
2641	'{{WRAPPER}}' => '--ui-e-fullscreen-canvas-width: {{SIZE}}{{UNIT}};',
2642	],
2643	]
2644	);
2645
2646	$this->end_controls_section();
2647	}
2648
2649	protected function get_current_request_signature()
2650	{
2651	global $wp;
2652
2653	$request_path = '';
2654
2655	if (!empty($wp) && isset($wp->request)) {
2656	$request_path = $wp->request;
2657	}
2658
2659	return $this->normalize_menu_item_url(home_url('/' . ltrim($request_path, '/')));
2660	}
2661
2662	protected function normalize_menu_item_url($url)
2663	{
2664	if (!is_string($url)) {
2665	return null;
2666	}
2667
2668	$url = trim($url);
2669
2670	if ('' === $url) {
2671	return null;
2672	}
2673
2674	$url_scheme = strtolower((string) wp_parse_url($url, PHP_URL_SCHEME));
2675
2676	if (
2677	'#' === $url[0]
2678	\|\| in_array($url_scheme, ['javascript', 'mailto', 'tel'], true)
2679	) {
2680	return null;
2681	}
2682
2683	if (0 === strpos($url, '//')) {
2684	$url = (is_ssl() ? 'https:' : 'http:') . $url;
2685	}
2686
2687	$parsed_url = wp_parse_url($url);
2688
2689	if (false === $parsed_url) {
2690	return null;
2691	}
2692
2693	if (empty($parsed_url['host'])) {
2694	$relative_path = $parsed_url['path'] ?? '';
2695	$url = home_url('/' . ltrim($relative_path, '/'));
2696	$parsed_url = wp_parse_url($url);
2697
2698	if (false === $parsed_url) {
2699	return null;
2700	}
2701	}
2702
2703	$host = strtolower((string) ($parsed_url['host'] ?? ''));
2704
2705	if ('' === $host) {
2706	return null;
2707	}
2708
2709	$port = isset($parsed_url['port']) ? ':' . (int) $parsed_url['port'] : '';
2710	$path = '/' . ltrim((string) ($parsed_url['path'] ?? '/'), '/');
2711	$path = untrailingslashit($path);
2712
2713	if ('' === $path) {
2714	$path = '/';
2715	}
2716
2717	return $host . $port . $path;
2718	}
2719
2720	protected function is_current_menu_item($url)
2721	{
2722	$item_signature = $this->normalize_menu_item_url($url);
2723
2724	if (null === $item_signature) {
2725	return false;
2726	}
2727
2728	$current_signature = $this->get_current_request_signature();
2729
2730	if (null === $current_signature) {
2731	return false;
2732	}
2733
2734	return $item_signature === $current_signature;
2735	}
2736
2737	// TODO: study the possibility of improving the is_option() method so we can use it here.
2738	// The issue relies on how is_option just take all settings as base, and in here we're
2739	// working mainly with a selected collection of settings from the repeaters.
2740	protected function render_menu_item($settings)
2741	{
2742	// Data
2743	$index = $settings['index'];
2744
2745	$custom_id = $settings['item']['element_id'];
2746	$image = $settings['item']['item_image'];
2747	$icon = $settings['item']['item_icon'];
2748	$badge = $settings['item']['item_badge'];
2749	$description = $settings['item']['item_description'];
2750	$dropdown = $this->get_settings_for_display('dropdown_icon');
2751	$dropdown_active = $this->get_settings_for_display('dropdown_icon_active');
2752
2753	$fullscreen_dropdown = $this->get_settings_for_display('dropdown_fullscreen_icon');
2754	$fullscreen_dropdown_active = $this->get_settings_for_display('dropdown_fullscreen_icon_active');
2755
2756	$highlight_current = $this->is_option('highlight_current', 'yes');
2757	$has_submenu = $settings['item']['item_submenu'] && $settings['item']['item_submenu'] === 'yes';
2758	$item_url = $settings['item']['item_link']['url'] ?? '#';
2759	$url = empty($item_url) ? ['url' => '#'] : $settings['item']['item_link'];
2760
2761	// Url atts
2762	$this->add_link_attributes('link_' . $index, $url);
2763
2764	// Item atts
2765	$this->add_render_attribute('item_' . $index, ['class' => 'ui-e-menu-item']);
2766	$this->add_render_attribute('item_' . $index, ['data-menu-content-id' => $settings['container_id']]);
2767	if ($has_submenu) {
2768	$width = 'ui-e-' . $settings['item']['item_submenu_width'];
2769
2770	$this->add_render_attribute('item_' . $index, ['class' => 'ui-e-has-submenu']);
2771	$this->add_render_attribute('item_' . $index, ['class' => esc_attr($width)]);
2772	}
2773	if ($custom_id) {
2774	$this->add_render_attribute('item_' . $index, ['id' => esc_attr($custom_id)]);
2775	}
2776	if ($highlight_current && $this->is_current_menu_item($item_url)) {
2777	$this->add_render_attribute('item_' . $index, ['class' => 'ui-e-current']);
2778	}
2779
2780	ob_start();
2781	?>
2782	<li <?php $this->print_render_attribute_string('item_' . $index); ?>>
2783
2784	<a <?php $this->print_render_attribute_string('link_' . $index); ?>>
2785
2786	<?php
2787	if (!empty($image['url'])) {
2788	echo wp_kses_post(wp_get_attachment_image(
2789	$image['id'],
2790	'thumbnail',
2791	false,
2792	[
2793	'alt' => esc_attr($image['alt']),
2794	'class' => 'ui-e-menu-item-image',
2795	]
2796	));
2797	}
2798	?>
2799
2800	<?php if (!empty($icon['value'])) : ?>
2801	<span class="ui-e-svg-wrap ui-e-menu-item-icon">
2802	<?php Icons_Manager::render_icon($icon, ['aria-hidden' => 'true']); ?>
2803	</span>
2804	<?php endif; ?>
2805
2806	<span class="ui-e-text">
2807	<?php echo esc_html($settings['item']['item_title']); ?>
2808
2809	<?php if (!empty($description)) : ?>
2810	<span class="ui-e-description"> <?php echo esc_html($description); ?> </span>
2811	<?php endif; ?>
2812
2813	<?php if (!empty($badge)) : ?>
2814	<span class="ui-e-badge"> <?php echo esc_html($badge); ?> </span>
2815	<?php endif; ?>
2816	</span>
2817
2818	<?php if ($has_submenu && !empty($dropdown['value'])) : ?>
2819	<span class="ui-e-svg-wrap ui-e-dropdown-icon">
2820
2821	<?php Icons_Manager::render_icon($dropdown, ['aria-hidden' => 'true', 'class' => 'ui-e-dropdown-closed']); ?>
2822
2823	<?php if (!empty($dropdown_active['value'])) : ?>
2824	<?php Icons_Manager::render_icon($dropdown_active, ['aria-hidden' => 'true', 'class' => 'ui-e-dropdown-opened']); ?>
2825	<?php endif; ?>
2826
2827	</span>
2828	<?php endif; ?>
2829
2830	<?php if ($has_submenu && !empty($fullscreen_dropdown['value'])) : ?>
2831	<span class="ui-e-svg-wrap ui-e-dropdown-icon" data-fullscreen-layout>
2832
2833	<?php Icons_Manager::render_icon($fullscreen_dropdown, ['aria-hidden' => 'true', 'class' => 'ui-e-dropdown-closed']); ?>
2834
2835	<?php if (!empty($fullscreen_dropdown_active['value'])) : ?>
2836	<?php Icons_Manager::render_icon($fullscreen_dropdown_active, ['aria-hidden' => 'true', 'class' => 'ui-e-dropdown-opened']); ?>
2837	<?php endif; ?>
2838
2839	</span>
2840	<?php endif; ?>
2841
2842	</a>
2843
2844	<?php
2845	if ($has_submenu) {
2846	echo $this->render_sub_menu($settings); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
2847	}
2848	?>
2849
2850	</li>
2851	<?php
2852	return ob_get_clean();
2853	}
2854
2855	protected function render_sub_menu($settings)
2856	{
2857	ob_start();
2858
2859	$this->print_child($settings['index'], $settings);
2860
2861
2862	return ob_get_clean();
2863	}
2864
2865	protected function is_fullscreen_menu_widget($item)
2866	{
2867	return !empty($item['item_convert_to_widget']) && 'yes' === $item['item_convert_to_widget'];
2868	}
2869
2870	protected function render_fullscreen_menu_widget($settings)
2871	{
2872	ob_start();
2873
2874	$this->print_child($settings['index'], [
2875	'container_id' => $settings['container_id'],
2876	'item_count' => $settings['item_count'],
2877	'is_fullscreen_menu_widget' => true,
2878	]);
2879
2880	return ob_get_clean();
2881	}
2882
2883	protected function render_fullscreen_menu_button()
2884	{
2885	$button_style = $this->get_settings_for_display('button_style');
2886	$fullscreen_canvas_id = 'ui-e-fullscreen-menu-' . $this->get_id_int();
2887
2888	ob_start();
2889	?>
2890	<div class="ui-e-fullscreen-button-wrp">
2891	<button class="ui-e-fullscreen-button" type="button" aria-expanded="false" aria-controls="<?php echo esc_attr($fullscreen_canvas_id); ?>">
2892	<span class="screen-reader-text"><?php echo esc_html__('Open menu button', 'uicore-elements'); ?></span>
2893
2894	<?php if ($button_style === 'text') : ?>
2895
2896	<span class="ui-e-fullscreen-button-text ui-e-open"> <?php echo esc_html($this->get_settings_for_display('button_text_open')); ?> </span>
2897	<span class="ui-e-fullscreen-button-text ui-e-close"> <?php echo esc_html($this->get_settings_for_display('button_text_close')); ?> </span>
2898
2899	<?php elseif ($button_style !== 'custom') : ?>
2900
2901	<span class="ui-e-bars">
2902	<span class="ui-e-bar"></span>
2903	<span class="ui-e-bar"></span>
2904	<span class="ui-e-bar"></span>
2905	</span>
2906
2907	<?php else : ?>
2908
2909	<?php
2910	$open_icon = $this->get_settings_for_display('fullscreen_menu_open_icon');
2911	$close_icon = $this->get_settings_for_display('fullscreen_menu_close_icon');
2912
2913	if (!empty($open_icon['value'])) : ?>
2914	<span class="ui-e-fullscreen-button-icon ui-e-fullscreen-button-open">
2915	<?php Icons_Manager::render_icon($open_icon, ['aria-hidden' => 'true']); ?>
2916	</span>
2917	<?php endif; ?>
2918
2919	<?php if (!empty($close_icon['value'])) : ?>
2920	<span class="ui-e-fullscreen-button-icon ui-e-fullscreen-button-close">
2921	<?php Icons_Manager::render_icon($close_icon, ['aria-hidden' => 'true']); ?>
2922	</span>
2923	<?php endif; ?>
2924
2925	<?php endif; ?>
2926	</button>
2927	</div>
2928	<?php
2929
2930	return ob_get_clean();
2931	}
2932
2933	protected function get_back_button_icon_markup($icon = null)
2934	{
2935	if (empty($icon)) {
2936	$icon = $this->get_settings_for_display('back_button_icon');
2937	}
2938
2939	if (empty($icon['value'])) {
2940	return '';
2941	}
2942
2943	return Icons_Manager::try_get_icon_html(
2944	$icon,
2945	[
2946	'aria-hidden' => 'true',
2947	'class' => 'ui-e-back-button-icon-markup',
2948	]
2949	);
2950	}
2951
2952	protected function render_back_button_icon_template($icon = null)
2953	{
2954	$icon_markup = $this->get_back_button_icon_markup($icon);
2955
2956	if ('' === $icon_markup) {
2957	return '';
2958	}
2959
2960	ob_start();
2961	?>
2962	<span class="ui-e-back-button-icon-template" hidden aria-hidden="true">
2963	<?php echo $icon_markup; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
2964	?>
2965	</span>
2966	<?php
2967
2968	return ob_get_clean();
2969	}
2970
2971	protected function get_fullscreen_breakpoint_config()
2972	{
2973	$breakpoint_key = (string) $this->get_settings_for_display('breakpoint_selector');
2974
2975	if ('' === $breakpoint_key \|\| 'none' === $breakpoint_key) {
2976	return [
2977	'key' => 'none',
2978	'value' => null,
2979	];
2980	}
2981
2982	if ('desktop' === $breakpoint_key) {
2983	return [
2984	'key' => 'desktop',
2985	'value' => null,
2986	];
2987	}
2988
2989	$breakpoints = Plugin::$instance->breakpoints->get_active_breakpoints();
2990	$breakpoint_value = isset($breakpoints[$breakpoint_key])
2991	? (int) $breakpoints[$breakpoint_key]->get_value()
2992	: null;
2993
2994	return [
2995	'key' => $breakpoint_key,
2996	'value' => $breakpoint_value,
2997	];
2998	}
2999
3000	/**
3001	* Print the content area.
3002	*
3003	* @param int $index
3004	* @param array $settings
3005	*/
3006	public function print_child($index, $settings = [])
3007	{
3008	$children = $this->get_children();
3009	$child_ids = [];
3010	if (empty($children)) {
3011	return;
3012	}
3013	foreach ($children as $child) {
3014	$child_ids[] = $child->get_id();
3015	}
3016
3017	$add_attribute_to_container = function ($should_render, $container) use ($settings, $child_ids) {
3018	if (in_array($container->get_id(), $child_ids)) {
3019	$this->add_attributes_to_container($container, $settings);
3020	}
3021
3022	return $should_render;
3023	};
3024
3025	if (empty($children[$index])) {
3026	return;
3027	}
3028
3029	add_filter('elementor/frontend/container/should_render', $add_attribute_to_container, 10, 3);
3030	$children[$index]->print_element();
3031	remove_filter('elementor/frontend/container/should_render', $add_attribute_to_container);
3032	}
3033
3034	protected function add_attributes_to_container($container, $settings)
3035	{
3036	if (!empty($settings['is_fullscreen_menu_widget'])) {
3037	$container->add_render_attribute('_wrapper', [
3038	'id' => $settings['container_id'],
3039	'data-menu-index' => $settings['item_count'],
3040	'class' => ['ui-e-widget-area'],
3041	]);
3042
3043	return;
3044	}
3045
3046	$container->add_render_attribute('_wrapper', [
3047	'id' => $settings['container_id'],
3048	'data-menu-index' => $settings['item_count'],
3049	'class' => ['ui-e-menu-content', 'ui-e-submenu'],
3050	]);
3051	}
3052
3053	/**
3054	* Injects basic styles that prevents the fullscreen CSS from mobile to experiencing big layout shifts, since
3055	* the classname that triggers the fullscreen styles is added after DOMContentLoaded by the main widget JS, and can cause
3056	*/
3057	protected function critical_fullscreen_css()
3058	{
3059	$breakpoint_config = $this->get_fullscreen_breakpoint_config();
3060
3061	if (in_array($breakpoint_config['key'], ['none', 'desktop'], true)) {
3062	return;
3063	}
3064
3065	$id = $this->get_id();
3066
3067	echo '
3068	<style data-ui-e-fullscreen-critical-css>
3069	@media screen and (max-width: ' . (int) $breakpoint_config['value'] . 'px) {
3070	.elementor-element-' . $id . ':not(.ui-e-inside-fullscreen) > .ui-e-advanced-menu-nav {
3071	visibility: hidden;
3072	position: fixed;
3073	}
3074	}
3075	</style>
3076	';
3077	}
3078
3079	protected function render()
3080	{
3081	if (Plugin::$instance->experiments->is_feature_active('nested-elements') == false) {
3082	$this->nesting_fallback();
3083	return;
3084	}
3085
3086	if (Plugin::$instance->experiments->is_feature_active('e_optimized_markup') == false) {
3087	return;
3088	}
3089
3090	$this->critical_fullscreen_css();
3091
3092	$settings = $this->get_settings_for_display();
3093	$menu_titles = '';
3094	$fullscreen_widgets = '';
3095	$widget_number = $this->get_id_int();
3096	$fullscreen_canvas_id = 'ui-e-fullscreen-menu-' . $widget_number;
3097
3098	$this->add_render_attribute('_wrapper', 'class', 'ui-e-is-loading');
3099
3100	$this->add_render_attribute(
3101	'nav',
3102	[
3103	'class' => 'ui-e-advanced-menu-nav',
3104	'data-widget-number' => $this->get_widget_number(),
3105	'id' => $fullscreen_canvas_id,
3106	]
3107	);
3108
3109	if ($settings['menu_name']) {
3110	$this->add_render_attribute('nav', 'aria-label', $settings['menu_name']);
3111	}
3112
3113	if ($this->is_option('widget_area_only', 'yes')) {
3114	$this->add_render_attribute('wrapper', 'class', ['ui-e-menu', 'ui-e-widget-only']);
3115	} else {
3116	$this->add_render_attribute('wrapper', 'class', 'ui-e-menu');
3117	}
3118
3119	foreach ($settings['menu_items'] as $index => $item) {
3120	$item_count = $index + 1;
3121
3122	$item_settings = [
3123	'index' => $index,
3124	'item_count' => $item_count,
3125	'container_id' => 'ui-e-menu-content-' . $widget_number . $item_count,
3126	'item' => $item,
3127	];
3128
3129	if ($this->is_fullscreen_menu_widget($item)) {
3130	$fullscreen_widgets .= $this->render_fullscreen_menu_widget($item_settings);
3131	continue;
3132	}
3133
3134	$menu_titles .= $this->render_menu_item($item_settings);
3135	}
3136
3137	echo $this->render_fullscreen_menu_button(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
3138
3139	?>
3140	<nav <?php $this->print_render_attribute_string('nav'); ?>>
3141	<?php echo $this->render_back_button_icon_template(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
3142	?>
3143
3144	<div <?php $this->print_render_attribute_string('wrapper'); ?>>
3145	<ul class="ui-e-menu-list">
3146	<?php echo $menu_titles; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
3147	?>
3148	</ul>
3149	<?php echo $fullscreen_widgets; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
3150	?>
3151	</div>
3152	</nav>
3153	<?php
3154	}
3155	protected function content_template()
3156	{
3157	if (Plugin::$instance->experiments->is_feature_active('nested-elements') == false) {
3158	return;
3159	}
3160
3161	if (!Plugin::$instance->experiments->is_feature_active('e_optimized_markup')) {
3162	?>
3163	<div class="ui-e-optimized-markup-alert">
3164	<?php echo esc_html__('This widget requires the Optimized Markup experiment to be enabled in Elementor settings', 'uicore-elements'); ?>
3165	</div>
3166	<?php
3167	return;
3168	}
3169	?>
3170	<# const elementUid=view.getIDInt().toString(); #>
3171	<#
3172	const menuItems=settings.menu_items \|\| [],
3173	wrapperKey='wrapper-' + elementUid,
3174	buttonStyle=settings.button_style \|\| 'default' ,
3175	fullscreenCanvasId='ui-e-fullscreen-menu-' + elementUid,
3176	fullscreenBtnOpenText=settings.button_text_open \|\| '' ,
3177	fullscreenBtnCloseText=settings.button_text_close \|\| '' ,
3178	backButtonIcon=settings.back_button_icon && settings.back_button_icon.value
3179	? elementor.helpers.renderIcon( view, settings.back_button_icon, { 'aria-hidden' : true, 'class' : 'ui-e-back-button-icon-markup' }, 'i' , 'object' )
3180	: false,
3181	fullscreenBtnOpenIcon=settings.fullscreen_menu_open_icon && settings.fullscreen_menu_open_icon.value
3182	? elementor.helpers.renderIcon( view, settings.fullscreen_menu_open_icon, { 'aria-hidden' : true }, 'i' , 'object' )
3183	: false,
3184	fullscreenBtnCloseIcon=settings.fullscreen_menu_close_icon && settings.fullscreen_menu_close_icon.value
3185	? elementor.helpers.renderIcon( view, settings.fullscreen_menu_close_icon, { 'aria-hidden' : true }, 'i' , 'object' )
3186	: false;
3187
3188	if ( settings.widget_area_only==='yes' ) {
3189	view.addRenderAttribute( wrapperKey, { 'class' : [ 'ui-e-menu' , 'ui-e-widget-only' ] } );
3190	} else {
3191	view.addRenderAttribute( wrapperKey, { 'class' : [ 'ui-e-menu' ] } );
3192	}
3193
3194	#>
3195	<div class="ui-e-fullscreen-button-wrp">
3196	<button class="ui-e-fullscreen-button" type="button" aria-expanded="false" aria-controls="{{ fullscreenCanvasId }}">
3197	<span class="screen-reader-text"><?php echo esc_html__('Open menu button', 'uicore-elements'); ?></span>
3198
3199	<# if ( buttonStyle==='text' ) { #>
3200	<span class="ui-e-fullscreen-button-text ui-e-open">{{{ fullscreenBtnOpenText }}}</span>
3201	<span class="ui-e-fullscreen-button-text ui-e-close">{{{ fullscreenBtnCloseText }}}</span>
3202	<# } else if ( buttonStyle !=='custom' ) { #>
3203	<span class="ui-e-bars">
3204	<span class="ui-e-bar"></span>
3205	<span class="ui-e-bar"></span>
3206	<span class="ui-e-bar"></span>
3207	</span>
3208	<# } else { #>
3209	<# if ( fullscreenBtnOpenIcon && fullscreenBtnOpenIcon.value ) { #>
3210	<span class="ui-e-fullscreen-button-icon ui-e-fullscreen-button-open">{{{ fullscreenBtnOpenIcon.value }}}</span>
3211	<# } #>
3212
3213	<# if ( fullscreenBtnCloseIcon && fullscreenBtnCloseIcon.value ) { #>
3214	<span class="ui-e-fullscreen-button-icon ui-e-fullscreen-button-close">{{{ fullscreenBtnCloseIcon.value }}}</span>
3215	<# } #>
3216	<# } #>
3217	</button>
3218	</div>
3219	<nav class="ui-e-advanced-menu-nav" id="{{ fullscreenCanvasId }}" data-widget-number="{{ elementUid }}"
3220	<# if ( settings.menu_name ) { #>aria-label="{{ settings.menu_name }}"<# } #>>
3221	<# if ( backButtonIcon && backButtonIcon.value ) { #>
3222	<span class="ui-e-back-button-icon-template" hidden aria-hidden="true">{{{ backButtonIcon.value }}}</span>
3223	<# } #>
3224	<div {{{ view.getRenderAttributeString( wrapperKey ) }}}>
3225	<ul class="ui-e-menu-list">
3226	<# if ( menuItems.length ) {
3227	_.each( menuItems, function( item, index ) {
3228	const itemCount=index + 1,
3229	itemUid=elementUid + itemCount,
3230	itemKey='item-' + itemUid,
3231	linkKey='link-' + itemUid,
3232	imageKey='image-' + itemUid,
3233	textKey='text-' + itemUid,
3234	titleKey='title-' + itemUid,
3235	descriptionKey='description-' + itemUid,
3236	badgeKey='badge-' + itemUid,
3237	iconKey='icon-' + itemUid,
3238	dropdownKey='dropdown-' + itemUid,
3239	itemIcon=item.item_icon && item.item_icon.value
3240	? elementor.helpers.renderIcon( view, item.item_icon, { 'aria-hidden' : true, 'class' : 'ui-e-menu-item-icon' }, 'i' , 'object' )
3241	: false,
3242	dropdownIcon=settings.dropdown_icon && settings.dropdown_icon.value
3243	? elementor.helpers.renderIcon( view, settings.dropdown_icon, { 'aria-hidden' : true, 'class' : 'ui-e-dropdown-closed' }, 'i' , 'object' )
3244	: false,
3245	dropdownIconActive=settings.dropdown_icon_active && settings.dropdown_icon_active.value
3246	? elementor.helpers.renderIcon( view, settings.dropdown_icon_active, { 'aria-hidden' : true, 'class' : 'ui-e-dropdown-opened' }, 'i' , 'object' )
3247	: false,
3248	fullscreenDropdownIcon=settings.dropdown_fullscreen_icon && settings.dropdown_fullscreen_icon.value
3249	? elementor.helpers.renderIcon( view, settings.dropdown_fullscreen_icon, { 'aria-hidden' : true, 'class' : 'ui-e-dropdown-closed' }, 'i' , 'object' )
3250	: false,
3251	fullscreenDropdownIconActive=settings.dropdown_fullscreen_icon_active && settings.dropdown_fullscreen_icon_active.value
3252	? elementor.helpers.renderIcon( view, settings.dropdown_fullscreen_icon_active, { 'aria-hidden' : true, 'class' : 'ui-e-dropdown-opened' }, 'i' , 'object' )
3253	: false,
3254	imageData=item.item_image && item.item_image.url
3255	? {
3256	id: item.item_image.id,
3257	url: item.item_image.url,
3258	size: 'thumbnail' ,
3259	model: view.getEditModel()
3260	}
3261	: false,
3262	imageUrl=imageData ? elementor.imagesManager.getImageUrl( imageData ) : '' ,
3263	itemConvertToWidget=item.item_convert_to_widget && item.item_convert_to_widget==='yes' ,
3264	hasSubmenu=item.item_submenu && item.item_submenu==='yes' ,
3265	submenuWidthClass='ui-e-' + ( item.item_submenu_width \|\| 'widget-width' ) ,
3266	submenuId='ui-e-menu-content-' + itemUid,
3267	submenuKey='submenu-' + itemUid;
3268
3269	const itemClasses=[ 'ui-e-menu-item' ];
3270
3271	if ( itemConvertToWidget ) {
3272	itemClasses.push( 'ui-e-converted-widget-placeholder' );
3273	}
3274
3275	if ( hasSubmenu ) {
3276	itemClasses.push( 'ui-e-has-submenu' );
3277	itemClasses.push( submenuWidthClass );
3278	}
3279
3280	view.addRenderAttribute( itemKey, { 'class' : itemClasses } );
3281	view.addRenderAttribute( itemKey, 'data-menu-content-id' , submenuId );
3282	view.addRenderAttribute( itemKey, 'data-menu-index' , itemCount );
3283
3284	if ( item.element_id ) {
3285	view.addRenderAttribute( itemKey, 'id' , item.element_id );
3286	}
3287
3288	const linkAttrs={};
3289
3290	if ( item.item_link && item.item_link.url ) {
3291	linkAttrs.href=item.item_link.url;
3292	}
3293
3294	if ( item.item_link && item.item_link.is_external ) {
3295	linkAttrs.target='_blank' ;
3296	linkAttrs.rel='noopener noreferrer' ;
3297	}
3298
3299	if ( item.item_link && item.item_link.nofollow ) {
3300	linkAttrs.rel=( linkAttrs.rel ? linkAttrs.rel + ' ' : '' ) + 'nofollow' ;
3301	}
3302
3303	view.addRenderAttribute( linkKey, linkAttrs );
3304
3305	view.addRenderAttribute( titleKey, { 'data-binding-type' : 'repeater-item' , 'data-binding-repeater-name' : 'menu_items' , 'data-binding-setting' : [ 'item_title' , 'element_id' ], 'data-binding-index' : itemCount, 'data-binding-config' : JSON.stringify({ 'element_id' : { editType : 'attribute' , attr : 'id' , selector : 'li' }, 'item_title' : { editType : 'text' } }),
3306	} );
3307
3308	view.addRenderAttribute( badgeKey, { 'class' : [ 'ui-e-badge' ], 'data-binding-type' : 'repeater-item' , 'data-binding-repeater-name' : 'menu_items' , 'data-binding-setting' : [ 'item_badge' ], 'data-binding-index' : itemCount, 'data-binding-config' : JSON.stringify({ 'item_badge' : { editType : 'text' } }),
3309	} );
3310
3311	view.addRenderAttribute( imageKey, { 'class' : [ 'ui-e-menu-item-image' ] } );
3312
3313	view.addRenderAttribute( textKey, { 'class' : [ 'ui-e-text' ] } );
3314
3315	view.addRenderAttribute( iconKey, { 'class' : [ 'ui-e-svg-wrap' , 'ui-e-menu-item-icon' ], 'data-binding-type' : 'repeater-item' , 'data-binding-repeater-name' : 'menu_items' , 'data-binding-setting' : [ 'item_icon.value' ], 'data-binding-index' : itemCount, 'data-binding-config' : JSON.stringify({ 'item_icon.value' : { editType : 'text' } }),
3316	} );
3317
3318	view.addRenderAttribute( descriptionKey, { 'class' : [ 'ui-e-description' ], 'data-binding-type' : 'repeater-item' , 'data-binding-repeater-name' : 'menu_items' , 'data-binding-setting' : [ 'item_description' ], 'data-binding-index' : itemCount, 'data-binding-config' : JSON.stringify({ 'item_description' : { editType : 'text' } }),
3319	} );
3320
3321	view.addRenderAttribute( dropdownKey, { 'class' : [ 'ui-e-svg-wrap' , 'ui-e-dropdown-icon' ] } );
3322	view.addRenderAttribute( dropdownKey + '-fullscreen' , { 'class' : [ 'ui-e-svg-wrap' , 'ui-e-dropdown-icon' ], 'data-fullscreen-layout' : true } );
3323
3324	view.addRenderAttribute( submenuKey, { 'class' : [ 'ui-e-submenu-placeholder' ], 'data-container-id' : submenuId, 'data-menu-index' : itemCount, 'hidden' : hasSubmenu ? false : 'hidden'
3325	} );
3326
3327	#>
3328	<# if ( itemConvertToWidget ) { #>
3329	<li {{{ view.getRenderAttributeString( itemKey ) }}} style="display:none;"></li>
3330	<# } else { #>
3331	<li {{{ view.getRenderAttributeString( itemKey ) }}}>
3332	<a {{{ view.getRenderAttributeString( linkKey ) }}}>
3333	<# if ( imageUrl ) { #>
3334	<img {{{ view.getRenderAttributeString( imageKey ) }}} src="{{{ imageUrl }}}" alt="{{{ item.item_image.alt \|\| '' }}}" />
3335	<# } #>
3336
3337	<# if ( itemIcon && itemIcon.value ) { #>
3338	<span {{{ view.getRenderAttributeString( iconKey ) }}}>
3339	{{{ itemIcon.value }}}
3340	</span>
3341	<# } #>
3342
3343	<span {{{ view.getRenderAttributeString( textKey ) }}}>
3344	<span {{{ view.getRenderAttributeString( titleKey ) }}}> {{{ item.item_title }}} </span>
3345
3346	<# if ( item.item_description ) { #>
3347	<span {{{ view.getRenderAttributeString( descriptionKey ) }}}>{{{ item.item_description }}}</span>
3348	<# } #>
3349
3350	<# if ( item.item_badge ) { #>
3351	<span {{{ view.getRenderAttributeString( badgeKey ) }}}>{{{ item.item_badge }}}</span>
3352	<# } #>
3353	</span>
3354
3355	<# if ( hasSubmenu && dropdownIcon && dropdownIcon.value ) { #>
3356	<span {{{ view.getRenderAttributeString( dropdownKey ) }}}>
3357	{{{ dropdownIcon.value }}}
3358	<# if ( dropdownIconActive && dropdownIconActive.value ) { #>
3359	{{{ dropdownIconActive.value }}}
3360	<# } #>
3361	</span>
3362	<# } #>
3363
3364	<# if ( hasSubmenu && fullscreenDropdownIcon && fullscreenDropdownIcon.value ) { #>
3365	<span {{{ view.getRenderAttributeString( dropdownKey + '-fullscreen' ) }}}>
3366	{{{ fullscreenDropdownIcon.value }}}
3367	<# if ( fullscreenDropdownIconActive && fullscreenDropdownIconActive.value ) { #>
3368	{{{ fullscreenDropdownIconActive.value }}}
3369	<# } #>
3370	</span>
3371	<# } #>
3372	</a>
3373	<div {{{ view.getRenderAttributeString( submenuKey ) }}}></div>
3374	</li>
3375	<# } #>
3376	<# } ); } #>
3377	</ul>
3378	<# if ( menuItems.length ) {
3379	_.each( menuItems, function( item, index ) {
3380	const itemCount=index + 1,
3381	itemUid=elementUid + itemCount,
3382	itemConvertToWidget=item.item_convert_to_widget && item.item_convert_to_widget==='yes' ,
3383	widgetKey='widget-' + itemUid,
3384	widgetContainerId='ui-e-widget-area-' + itemUid;
3385
3386	if ( ! itemConvertToWidget ) {
3387	return;
3388	}
3389
3390	view.addRenderAttribute( widgetKey, { 'class' : [ 'ui-e-widget-area-placeholder' ], 'data-container-id' : widgetContainerId, 'data-menu-index' : itemCount,
3391	} );
3392	#>
3393	<div {{{ view.getRenderAttributeString( widgetKey ) }}}></div>
3394	<# } ); } #>
3395	</div>
3396	</nav>
3397	<?php
3398	}
3399
3400	protected function content_template_single_repeater_item()
3401	{
3402	?>
3403	<#
3404	itemCount=view.collection.length + 1,
3405	elementUid=view.getIDInt().toString(),
3406	itemUid=elementUid + itemCount,
3407	item=data,
3408	itemKey='item-' + itemUid,
3409	linkKey='link-' + itemUid,
3410	imageKey='image-' + itemUid,
3411	textKey='text-' + itemUid,
3412	titleKey='title-' + itemUid,
3413	descriptionKey='description-' + itemUid,
3414	badgeKey='badge-' + itemUid,
3415	iconKey='icon-' + itemUid,
3416	dropdownKey='dropdown-' + itemUid,
3417	submenuKey='submenu-' + itemUid,
3418	itemIcon=item.item_icon && item.item_icon.value
3419	? elementor.helpers.renderIcon( view, item.item_icon, { 'aria-hidden' : true, 'class' : 'ui-e-menu-item-icon' }, 'i' , 'object' )
3420	: false,
3421	dropdownIcon=settings.dropdown_icon && settings.dropdown_icon.value
3422	? elementor.helpers.renderIcon( view, settings.dropdown_icon, { 'aria-hidden' : true, 'class' : 'ui-e-dropdown-closed' }, 'i' , 'object' )
3423	: false,
3424	dropdownIconActive=settings.dropdown_icon_active && settings.dropdown_icon_active.value
3425	? elementor.helpers.renderIcon( view, settings.dropdown_icon_active, { 'aria-hidden' : true, 'class' : 'ui-e-dropdown-opened' }, 'i' , 'object' )
3426	: false,
3427	fullscreenDropdownIcon=settings.dropdown_fullscreen_icon && settings.dropdown_fullscreen_icon.value
3428	? elementor.helpers.renderIcon( view, settings.dropdown_fullscreen_icon, { 'aria-hidden' : true, 'class' : 'ui-e-dropdown-closed' }, 'i' , 'object' )
3429	: false,
3430	fullscreenDropdownIconActive=settings.dropdown_fullscreen_icon_active && settings.dropdown_fullscreen_icon_active.value
3431	? elementor.helpers.renderIcon( view, settings.dropdown_fullscreen_icon_active, { 'aria-hidden' : true, 'class' : 'ui-e-dropdown-opened' }, 'i' , 'object' )
3432	: false,
3433	imageData=item.item_image && item.item_image.url
3434	? {
3435	id: item.item_image.id,
3436	url: item.item_image.url,
3437	size: 'thumbnail' ,
3438	model: view.getEditModel()
3439	}
3440	: false,
3441	imageUrl=imageData ? elementor.imagesManager.getImageUrl( imageData ) : '' ,
3442	itemConvertToWidget=item.item_convert_to_widget && item.item_convert_to_widget==='yes' ,
3443	hasSubmenu=item.item_submenu && item.item_submenu==='yes' ,
3444	submenuWidthClass='ui-e-' + ( item.item_submenu_width \|\| 'widget-width' ) ,
3445	submenuId='ui-e-menu-content-' + itemUid,
3446	widgetKey='widget-' + itemUid,
3447	widgetContainerId='ui-e-widget-area-' + itemUid;
3448
3449	const itemClasses=[ 'ui-e-menu-item' ];
3450
3451	if ( itemConvertToWidget ) {
3452	itemClasses.push( 'ui-e-converted-widget-placeholder' );
3453	}
3454
3455	if ( hasSubmenu ) {
3456	itemClasses.push( 'ui-e-has-submenu' );
3457	itemClasses.push( submenuWidthClass );
3458	}
3459
3460	view.addRenderAttribute( itemKey, { 'class' : itemClasses,
3461	}, null, true );
3462	view.addRenderAttribute( itemKey, 'data-menu-content-id' , submenuId, true );
3463	view.addRenderAttribute( itemKey, 'data-menu-index' , itemCount, true );
3464
3465	if ( item.element_id ) {
3466	view.addRenderAttribute( itemKey, 'id' , item.element_id, true );
3467	}
3468
3469	const linkAttrs={};
3470
3471	if ( item.item_link && item.item_link.url ) {
3472	linkAttrs.href=item.item_link.url;
3473	}
3474
3475	if ( item.item_link && item.item_link.is_external ) {
3476	linkAttrs.target='_blank' ;
3477	linkAttrs.rel='noopener noreferrer' ;
3478	}
3479
3480	if ( item.item_link && item.item_link.nofollow ) {
3481	linkAttrs.rel=( linkAttrs.rel ? linkAttrs.rel + ' ' : '' ) + 'nofollow' ;
3482	}
3483
3484	view.addRenderAttribute( linkKey, linkAttrs, null, true );
3485
3486	view.addRenderAttribute( titleKey, { 'data-binding-type' : 'repeater-item' , 'data-binding-repeater-name' : 'menu_items' , 'data-binding-setting' : [ 'item_title' , 'element_id' ], 'data-binding-index' : itemCount, 'data-binding-config' : JSON.stringify({ 'element_id' : { editType : 'attribute' , attr : 'id' , selector : 'li' }, 'item_title' : { editType : 'text' } }),
3487	}, null, true );
3488
3489	view.addRenderAttribute( badgeKey, { 'class' : [ 'ui-e-badge' ], 'data-binding-type' : 'repeater-item' , 'data-binding-repeater-name' : 'menu_items' , 'data-binding-setting' : [ 'item_badge' ], 'data-binding-index' : itemCount, 'data-binding-config' : JSON.stringify({ 'item_badge' : { editType : 'text' } }),
3490	}, null, true );
3491
3492	view.addRenderAttribute( imageKey, { 'class' : [ 'ui-e-menu-item-image' ] }, null, true );
3493
3494	view.addRenderAttribute( textKey, { 'class' : [ 'ui-e-text' ] }, null, true );
3495
3496	view.addRenderAttribute( iconKey, { 'class' : [ 'ui-e-svg-wrap' , 'ui-e-menu-item-icon' ], 'data-binding-type' : 'repeater-item' , 'data-binding-repeater-name' : 'menu_items' , 'data-binding-setting' : [ 'item_icon.value' ], 'data-binding-index' : itemCount, 'data-binding-config' : JSON.stringify({ 'item_icon.value' : { editType : 'text' } }),
3497	}, null, true );
3498
3499	view.addRenderAttribute( descriptionKey, { 'class' : [ 'ui-e-description' ], 'data-binding-type' : 'repeater-item' , 'data-binding-repeater-name' : 'menu_items' , 'data-binding-setting' : [ 'item_description' ], 'data-binding-index' : itemCount, 'data-binding-config' : JSON.stringify({ 'item_description' : { editType : 'text' } }),
3500	}, null, true );
3501
3502	view.addRenderAttribute( dropdownKey, { 'class' : [ 'ui-e-svg-wrap' , 'ui-e-dropdown-icon' ] }, null, true );
3503	view.addRenderAttribute( dropdownKey + '-fullscreen' , { 'class' : [ 'ui-e-svg-wrap' , 'ui-e-dropdown-icon' ], 'data-fullscreen-layout' : true }, null, true );
3504
3505	view.addRenderAttribute( submenuKey, { 'class' : [ 'ui-e-submenu-placeholder' ], 'data-container-id' : submenuId, 'data-menu-index' : itemCount, 'hidden' : hasSubmenu ? false : 'hidden'
3506	}, null, true );
3507
3508	if ( itemConvertToWidget ) {
3509	view.addRenderAttribute( widgetKey, { 'class' : [ 'ui-e-widget-area-placeholder' ], 'data-container-id' : widgetContainerId, 'data-menu-index' : itemCount,
3510	}, null, true );
3511	}
3512
3513	#>
3514
3515	<# if ( itemConvertToWidget ) { #>
3516	<li {{{ view.getRenderAttributeString( itemKey ) }}} style="display:none;"></li>
3517	<div {{{ view.getRenderAttributeString( widgetKey ) }}}></div>
3518	<# } else { #>
3519	<li {{{ view.getRenderAttributeString( itemKey ) }}}>
3520	<a {{{ view.getRenderAttributeString( linkKey ) }}}>
3521	<# if ( imageUrl ) { #>
3522	<img {{{ view.getRenderAttributeString( imageKey ) }}} src="{{{ imageUrl }}}" alt="{{{ item.item_image.alt \|\| '' }}}" />
3523	<# } #>
3524
3525	<# if ( itemIcon && itemIcon.value ) { #>
3526	<span {{{ view.getRenderAttributeString( iconKey ) }}}>
3527	{{{ itemIcon.value }}}
3528	</span>
3529	<# } #>
3530
3531	<span {{{ view.getRenderAttributeString( textKey ) }}}>
3532	<span {{{ view.getRenderAttributeString( titleKey ) }}}>{{{ item.item_title }}}</span>
3533
3534	<# if ( item.item_description ) { #>
3535	<span {{{ view.getRenderAttributeString( descriptionKey ) }}}>{{{ item.item_description }}}</span>
3536	<# } #>
3537
3538	<# if ( item.item_badge ) { #>
3539	<span {{{ view.getRenderAttributeString( badgeKey ) }}}>{{{ item.item_badge }}}</span>
3540	<# } #>
3541	</span>
3542
3543	<# if ( hasSubmenu && dropdownIcon && dropdownIcon.value ) { #>
3544	<span {{{ view.getRenderAttributeString( dropdownKey ) }}}>
3545	{{{ dropdownIcon.value }}}
3546	<# if ( dropdownIconActive && dropdownIconActive.value ) { #>
3547	{{{ dropdownIconActive.value }}}
3548	<# } #>
3549	</span>
3550	<# } #>
3551
3552	<# if ( hasSubmenu && fullscreenDropdownIcon && fullscreenDropdownIcon.value ) { #>
3553	<span {{{ view.getRenderAttributeString( dropdownKey + '-fullscreen' ) }}}>
3554	{{{ fullscreenDropdownIcon.value }}}
3555	<# if ( fullscreenDropdownIconActive && fullscreenDropdownIconActive.value ) { #>
3556	{{{ fullscreenDropdownIconActive.value }}}
3557	<# } #>
3558	</span>
3559	<# } #>
3560	</a>
3561	<div {{{ view.getRenderAttributeString( submenuKey ) }}}></div>
3562	</li>
3563	<# } #>
3564	<?php
3565	}
3566
3567	protected function get_initial_config(): array
3568	{
3569	if (Plugin::$instance->experiments->is_feature_active('e_nested_atomic_repeaters')) {
3570	return array_merge(parent::get_initial_config(), [
3571	'support_improved_repeaters' => true,
3572	'target_container' => ['.ui-e-menu-list'],
3573	'is_interlaced' => true,
3574	]);
3575	}
3576
3577	return array_merge(parent::get_initial_config(), [
3578	'is_interlaced' => true,
3579	]);
3580	}
3581	}
3582	\Elementor\Plugin::instance()->widgets_manager->register(new Advanced_Menu());
3583