uicore-elements / includes / widgets / accordion.php

accordion.php in UiCore Elements – Free widgets and templates for Elementor 1.3.17, at includes/widgets/accordion.php

1,493 lines 53.0 KB

Raw Download Zip

1	<?php
2
3	namespace UiCoreElements;
4
5	use Elementor\Repeater;
6	use Elementor\Controls_Manager;
7	use Elementor\Group_Control_Border;
8	use Elementor\Group_Control_Typography;
9	use Elementor\Group_Control_Background;
10	use Elementor\Group_Control_Box_Shadow;
11	use Elementor\Plugin;
12	use Elementor\Icons_Manager;
13
14	use UiCoreElements\UiCoreWidget;
15
16	defined('ABSPATH') \|\| exit();
17
18	/**
19	* Accordion
20	*
21	* @author Lucas Marini Falbo <lucas@uicore.co>
22	* @since 1.0.0
23	*/
24
25	class Accordion extends UiCoreWidget
26	{
27
28	public function get_name()
29	{
30	return 'uicore-accordion';
31	}
32	public function get_title()
33	{
34	return __('Accordion', 'uicore-elements');
35	}
36	public function get_icon()
37	{
38	return 'eicon-accordion ui-e-widget';
39	}
40	public function get_categories()
41	{
42	return ['uicore'];
43	}
44	public function get_keywords()
45	{
46	return ['accordion', 'tabs', 'toggle', 'uicore'];
47	}
48	public function get_styles()
49	{
50	return ['accordion'];
51	}
52	public function get_scripts()
53	{
54	return ['accordion'];
55	}
56	// TODO: remove after Optmized Markup experiment is merged to the core
57	public function has_widget_inner_wrapper(): bool
58	{
59	return true;
60	}
61	protected function register_controls()
62	{
63	$this->start_controls_section(
64	'section_title',
65	[
66	'label' => __('Accordion', 'uicore-elements'),
67	]
68	);
69
70	$repeater = new Repeater();
71
72	$repeater->add_control(
73	'tab_title',
74	[
75	'label' => __('Title & Content', 'uicore-elements'),
76	'type' => Controls_Manager::TEXT,
77	'dynamic' => ['active' => true],
78	'default' => __('Accordion Title', 'uicore-elements'),
79	'label_block' => true,
80	]
81	);
82
83	$repeater->add_control(
84	'source',
85	[
86	'label' => esc_html__('Select Source', 'uicore-elements'),
87	'type' => Controls_Manager::SELECT,
88	'default' => 'custom',
89	'options' => [
90	'custom' => esc_html__('Custom Content', 'uicore-elements'),
91	'sectionId' => esc_html__('Section ID', 'uicore-elements'),
92	],
93	]
94	);
95
96	$repeater->add_control(
97	'tab_content',
98	[
99	'label' => __('Content', 'uicore-elements'),
100	'type' => Controls_Manager::WYSIWYG,
101	'dynamic' => ['active' => true],
102	'default' => __('Accordion Content', 'uicore-elements'),
103	'show_label' => false,
104	'condition' => ['source' => 'custom'],
105	]
106	);
107
108	$repeater->add_control(
109	'section_id',
110	[
111	'label' => esc_html__('Section ID', 'uicore-elements'),
112	'type' => Controls_Manager::TEXT,
113	'placeholder' => esc_html__('CSS ID from an element', 'uicore-elements'),
114	'condition' => [
115	'source' => 'sectionId'
116	],
117	'dynamic' => ['active' => true],
118	]
119	);
120
121	$repeater->add_control(
122	'repeater_icon',
123	[
124	'label' => __('Title Icon', 'uicore-elements'),
125	'type' => Controls_Manager::ICONS,
126	'label_block' => false,
127	'skin' => 'inline',
128	]
129	);
130
131	$this->add_control(
132	'tabs',
133	[
134	'label' => __('Items', 'uicore-elements'),
135	'type' => Controls_Manager::REPEATER,
136	'fields' => $repeater->get_controls(),
137	'default' => [
138	[
139	'tab_title' => __('Accordion #1', 'uicore-elements'),
140	'tab_content' => __('I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'uicore-elements'),
141	],
142	[
143	'tab_title' => __('Accordion #2', 'uicore-elements'),
144	'tab_content' => __('I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'uicore-elements'),
145	],
146	[
147	'tab_title' => __('Accordion #3', 'uicore-elements'),
148	'tab_content' => __('I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'uicore-elements'),
149	],
150	],
151	'title_field' => '{{{ tab_title }}}',
152	]
153	);
154
155	$this->add_control(
156	'title_html_tag',
157	[
158	'label' => __('Title HTML Tag', 'uicore-elements'),
159	'type' => Controls_Manager::SELECT,
160	'options' => Helper::get_title_tags(),
161	'default' => 'h5',
162	]
163	);
164
165	$this->add_control(
166	'accordion_icon',
167	[
168	'label' => __('Icon', 'uicore-elements'),
169	'type' => Controls_Manager::ICONS,
170	'default' => [
171	'value' => 'fas fa-plus',
172	'library' => 'fa-solid',
173	],
174	'recommended' => [
175	'fa-solid' => [
176	'chevron-down',
177	'angle-down',
178	'angle-double-down',
179	'caret-down',
180	'caret-square-down',
181	],
182	'fa-regular' => [
183	'caret-square-down',
184	],
185	],
186	'label_block' => false,
187	'skin' => 'inline',
188	]
189	);
190
191	$this->add_control(
192	'accordion_active_icon',
193	[
194	'label' => __('Active Icon', 'uicore-elements'),
195	'type' => Controls_Manager::ICONS,
196	'default' => [
197	'value' => 'fas fa-minus',
198	'library' => 'fa-solid',
199	],
200	'recommended' => [
201	'fa-solid' => [
202	'chevron-up',
203	'angle-up',
204	'angle-double-up',
205	'caret-up',
206	'caret-square-up',
207	],
208	'fa-regular' => [
209	'caret-square-up',
210	],
211	],
212	'label_block' => false,
213	'skin' => 'inline',
214	'condition' => [
215	'accordion_icon[value]!' => '',
216	'icon_animation!' => 'ui-e-animation-ico-spin'
217	],
218	]
219	);
220
221	$this->add_control(
222	'show_custom_icon',
223	[
224	'label' => esc_html__('Show Title Icon', 'uicore-elements'),
225	'type' => Controls_Manager::SWITCHER,
226	'separator' => 'before'
227	]
228	);
229
230	$this->end_controls_section();
231
232	$this->start_controls_section(
233	'section_content_additional',
234	[
235	'label' => __('Additional', 'uicore-elements'),
236	]
237	);
238
239	$this->add_control(
240	'collapsible',
241	[
242	'label' => __('Collapse All Items', 'uicore-elements'),
243	'type' => Controls_Manager::SWITCHER,
244	'default' => 'true',
245	'return_value' => 'true',
246	'frontend_available' => true,
247	]
248	);
249
250	$this->add_control(
251	'multiple',
252	[
253	'label' => __('Multiple Open', 'uicore-elements'),
254	'type' => Controls_Manager::SWITCHER,
255	'return_value' => 'true',
256	'frontend_available' => true,
257	]
258	);
259
260	$this->add_control(
261	'active_item',
262	[
263	'label' => __('Active Item', 'uicore-elements'),
264	'type' => Controls_Manager::NUMBER,
265	'min' => 1,
266	'max' => 20,
267	'default' => 1,
268	]
269	);
270
271	$this->add_control(
272	'active_hash',
273	[
274	'label' => esc_html__('Hash Location', 'uicore-elements'),
275	'type' => Controls_Manager::SWITCHER,
276	'default' => 'no',
277	'frontend_available' => true,
278	]
279	);
280
281	$this->add_control(
282	'active_scrollspy',
283	[
284	'label' => esc_html__('Scrollspy', 'uicore-elements'),
285	'type' => Controls_Manager::SWITCHER,
286	'default' => 'no',
287	'return' => 'yes',
288	'frontend_available' => true,
289	'condition' => [
290	'active_hash' => 'yes'
291	]
292	]
293	);
294
295	$this->add_control(
296	'hash_top_offset',
297	[
298	'label' => esc_html__('Top Offset ', 'uicore-elements'),
299	'type' => Controls_Manager::SLIDER,
300	'size_units' => ['px', ''],
301	'range' => [
302	'px' => [
303	'min' => 0,
304	'max' => 200,
305	'step' => 5,
306	],
307
308	],
309	'default' => [
310	'unit' => 'px',
311	'size' => 70,
312	],
313	'condition' => [
314	'active_hash' => 'yes',
315	'active_scrollspy' => 'yes',
316	],
317	'frontend_available' => true,
318	]
319	);
320
321	$this->add_control(
322	'hash_scrollspy_delay',
323	[
324	'label' => esc_html__('Scrollspy Delay', 'uicore-elements'),
325	'type' => Controls_Manager::SLIDER,
326	'size_units' => ['ms', ''],
327	'range' => [
328	'ms' => [
329	'min' => 100,
330	'max' => 5000,
331	'step' => 50,
332	],
333	],
334	'default' => [
335	'unit' => 'ms',
336	'size' => 1000,
337	],
338	'condition' => [
339	'active_hash' => 'yes',
340	'active_scrollspy' => 'yes',
341	],
342	'frontend_available' => true,
343	]
344	);
345
346	$this->add_control(
347	'hash_scrollspy_duration',
348	[
349	'label' => esc_html__('Scrollspy Duration', 'uicore-elements'),
350	'type' => Controls_Manager::SLIDER,
351	'size_units' => ['ms', ''],
352	'range' => [
353	'ms' => [
354	'min' => 100,
355	'max' => 5000,
356	'step' => 50,
357	],
358	],
359	'default' => [
360	'unit' => 'ms',
361	'size' => 800,
362	],
363	'condition' => [
364	'active_hash' => 'yes',
365	'active_scrollspy' => 'yes',
366	],
367	'frontend_available' => true,
368	]
369	);
370
371	$this->add_control(
372	'schema_activity',
373	[
374	'label' => esc_html__('FAQ Schema', 'uicore-elements'),
375	'description' => esc_html__('Avoid activating schema for multiple Accordions on the same page to prevent errors in Google indexing. Activate schema only for the Accordion you intend to display in search results.', 'uicore-elements'),
376	'type' => Controls_Manager::SWITCHER,
377	'separator' => 'before',
378	]
379	);
380
381	$this->end_controls_section();
382
383	//Style
384	$this->start_controls_section(
385	'section_toggle_style_item',
386	[
387	'label' => __('Item', 'uicore-elements'),
388	'tab' => Controls_Manager::TAB_STYLE,
389	]
390	);
391
392	$this->add_responsive_control(
393	'item_spacing',
394	[
395	'label' => __('Item Gap', 'uicore-elements'),
396	'type' => Controls_Manager::SLIDER,
397	'range' => [
398	'px' => [
399	'min' => 0,
400	'max' => 100,
401	],
402	],
403	'default' => [
404	'size' => 5,
405	],
406	'selectors' => [
407	'{{WRAPPER}} .ui-e-accordion-item + .ui-e-accordion-item' => 'margin-top: {{SIZE}}{{UNIT}};',
408	],
409	]
410	);
411
412	$this->start_controls_tabs('tabs_item_style');
413
414	$this->start_controls_tab(
415	'tab_item_normal',
416	[
417	'label' => __('Normal', 'uicore-elements'),
418	]
419	);
420
421	$this->add_group_control(
422	Group_Control_Background::get_type(),
423	[
424	'name' => 'item_background',
425	'selector' => '{{WRAPPER}} .ui-e-accordion-item',
426	]
427	);
428
429	$this->add_group_control(
430	Group_Control_Border::get_type(),
431	[
432	'name' => 'item_border',
433	'placeholder' => '1px',
434	'default' => '1px',
435	'selector' => '{{WRAPPER}} .ui-e-accordion-item',
436	]
437	);
438
439	$this->add_responsive_control(
440	'item_radius',
441	[
442	'label' => __('Border Radius', 'uicore-elements'),
443	'type' => Controls_Manager::DIMENSIONS,
444	'size_units' => ['px', '%'],
445	'selectors' => [
446	'{{WRAPPER}} .ui-e-accordion-item' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
447	],
448	]
449	);
450
451	$this->add_responsive_control(
452	'item_padding',
453	[
454	'label' => __('Padding', 'uicore-elements'),
455	'type' => Controls_Manager::DIMENSIONS,
456	'size_units' => ['px', 'em', '%'],
457	'default' => [
458	'top' => 15,
459	'right' => 15,
460	'bottom' => 15,
461	'left' => 15,
462	'unit' => 'px',
463	'isLinked' => true,
464	],
465	'selectors' => [
466	'{{WRAPPER}} .ui-e-accordion-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
467	],
468	]
469	);
470
471	$this->add_group_control(
472	Group_Control_Box_Shadow::get_type(),
473	[
474	'name' => 'item_shadow',
475	'selector' => '{{WRAPPER}} .ui-e-accordion-item',
476	]
477	);
478
479	$this->end_controls_tab();
480
481	$this->start_controls_tab(
482	'tab_item_hover',
483	[
484	'label' => __('Hover', 'uicore-elements'),
485	]
486	);
487
488	$this->add_group_control(
489	Group_Control_Background::get_type(),
490	[
491	'name' => 'hover_item_background',
492	'selector' => '{{WRAPPER}} .ui-e-accordion-item:hover',
493	]
494	);
495
496	$this->add_control(
497	'item_hover_border_color',
498	[
499	'label' => __('Border Color', 'uicore-elements'),
500	'type' => Controls_Manager::COLOR,
501	'condition' => [
502	'item_border_border!' => '',
503	],
504	'selectors' => [
505	'{{WRAPPER}} .ui-e-accordion-item:hover' => 'border-color: {{VALUE}};',
506	],
507	]
508	);
509
510	$this->end_controls_tab();
511
512	$this->start_controls_tab(
513	'tab_item_active',
514	[
515	'label' => __('Active', 'uicore-elements'),
516	]
517	);
518
519	$this->add_group_control(
520	Group_Control_Background::get_type(),
521	[
522	'name' => 'active_item_background',
523	'selector' => '{{WRAPPER}} .ui-e-accordion-item.ui-open',
524	]
525	);
526
527	$this->add_group_control(
528	Group_Control_Box_Shadow::get_type(),
529	[
530	'name' => 'active_item_shadow',
531	'selector' => '{{WRAPPER}} .ui-e-accordion-item.ui-open',
532	]
533	);
534
535	$this->add_group_control(
536	Group_Control_Border::get_type(),
537	[
538	'name' => 'active_item_border',
539	'placeholder' => '1px',
540	'default' => '1px',
541	'selector' => '{{WRAPPER}} .ui-e-accordion-item.ui-open',
542	]
543	);
544
545	$this->add_responsive_control(
546	'active_item_radius',
547	[
548	'label' => __('Border Radius', 'uicore-elements'),
549	'type' => Controls_Manager::DIMENSIONS,
550	'size_units' => ['px', '%'],
551	'selectors' => [
552	'{{WRAPPER}} .ui-e-accordion-item.ui-open' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
553	],
554	]
555	);
556
557	$this->end_controls_tab();
558
559	$this->end_controls_tabs();
560
561	$this->end_controls_section();
562
563	$this->start_controls_section(
564	'section_toggle_style_title',
565	[
566	'label' => __('Title', 'uicore-elements'),
567	'tab' => Controls_Manager::TAB_STYLE,
568	]
569	);
570
571	$this->add_responsive_control(
572	'title_alignment',
573	[
574	'label' => __('Alignment', 'uicore-elements'),
575	'type' => Controls_Manager::CHOOSE,
576	'options' => [
577	'flex-start' => [
578	'title' => __('Left', 'uicore-elements'),
579	'icon' => 'eicon-text-align-left',
580	],
581	'center' => [
582	'title' => __('Center', 'uicore-elements'),
583	'icon' => 'eicon-text-align-center',
584	],
585	'flex-end' => [
586	'title' => __('Right', 'uicore-elements'),
587	'icon' => 'eicon-text-align-right',
588	],
589	],
590	'default' => is_rtl() ? 'flex-end' : 'flex-start',
591	'toggle' => false,
592	'label_block' => false,
593	'selectors' => [
594	'{{WRAPPER}} .ui-e-accordion-title-text' => 'justify-content: {{VALUE}};',
595	],
596	]
597	);
598
599	$this->start_controls_tabs('tabs_title_style');
600
601	$this->start_controls_tab(
602	'tab_title_normal',
603	[
604	'label' => __('Normal', 'uicore-elements'),
605	]
606	);
607
608	$this->add_control(
609	'title_color',
610	[
611	'label' => __('Title Color', 'uicore-elements'),
612	'type' => Controls_Manager::COLOR,
613	'selectors' => [
614	'{{WRAPPER}} .ui-e-accordion-title' => 'color: {{VALUE}};',
615	'{{WRAPPER}} .ui-e-custom-icon svg' => 'fill: {{VALUE}};',
616	],
617	]
618	);
619
620	$this->add_group_control(
621	Group_Control_Background::get_type(),
622	[
623	'name' => 'title_background',
624	'selector' => '{{WRAPPER}} .ui-e-accordion-title',
625	]
626	);
627
628	$this->add_group_control(
629	Group_Control_Border::get_type(),
630	[
631	'name' => 'title_border',
632	'placeholder' => '1px',
633	'default' => '1px',
634	'selector' => '{{WRAPPER}} .ui-e-accordion-title',
635	]
636	);
637
638	$this->add_responsive_control(
639	'title_radius',
640	[
641	'label' => __('Border Radius', 'uicore-elements'),
642	'type' => Controls_Manager::DIMENSIONS,
643	'size_units' => ['px', '%'],
644	'selectors' => [
645	'{{WRAPPER}} .ui-e-accordion-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
646	],
647	]
648	);
649
650	$this->add_responsive_control(
651	'title_padding',
652	[
653	'label' => __('Padding', 'uicore-elements'),
654	'type' => Controls_Manager::DIMENSIONS,
655	'size_units' => ['px', 'em', '%'],
656	'selectors' => [
657	'{{WRAPPER}} .ui-e-accordion-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
658	],
659	]
660	);
661
662	$this->add_group_control(
663	Group_Control_Typography::get_type(),
664	[
665	'name' => 'title_typography',
666	'selector' => '{{WRAPPER}} .ui-e-accordion-title',
667	]
668	);
669
670	$this->add_group_control(
671	Group_Control_Box_Shadow::get_type(),
672	[
673	'name' => 'title_shadow',
674	'selector' => '{{WRAPPER}} .ui-e-accordion-title',
675	]
676	);
677
678	$this->end_controls_tab();
679
680	$this->start_controls_tab(
681	'tab_title_hover',
682	[
683	'label' => __('Hover', 'uicore-elements'),
684	]
685	);
686
687	$this->add_control(
688	'hover_title_color',
689	[
690	'label' => __('Title Color', 'uicore-elements'),
691	'type' => Controls_Manager::COLOR,
692	'selectors' => [
693	'{{WRAPPER}} .ui-e-accordion-item:hover .ui-e-accordion-title' => 'color: {{VALUE}};',
694	'{{WRAPPER}} .ui-e-accordion-item:hover .ui-e-custom-icon svg' => 'fill: {{VALUE}};',
695	],
696	]
697	);
698
699	$this->add_group_control(
700	Group_Control_Background::get_type(),
701	[
702	'name' => 'hover_title_background',
703	'selector' => '{{WRAPPER}} .ui-e-accordion-item:hover .ui-e-accordion-title',
704	]
705	);
706
707	$this->add_control(
708	'title_hover_border_color',
709	[
710	'label' => __('Border Color', 'uicore-elements'),
711	'type' => Controls_Manager::COLOR,
712	'condition' => [
713	'title_border_border!' => '',
714	],
715	'selectors' => [
716	'{{WRAPPER}} .ui-e-accordion-item:hover .ui-e-accordion-title' => 'border-color: {{VALUE}};',
717	],
718	]
719	);
720
721	$this->end_controls_tab();
722
723	$this->start_controls_tab(
724	'tab_title_active',
725	[
726	'label' => __('Active', 'uicore-elements'),
727	]
728	);
729
730	$this->add_control(
731	'active_title_color',
732	[
733	'label' => __('Title Color', 'uicore-elements'),
734	'type' => Controls_Manager::COLOR,
735	'selectors' => [
736	'{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-title' => 'color: {{VALUE}};',
737	'{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-custom-icon svg' => 'fill: {{VALUE}};',
738	],
739	]
740	);
741
742	$this->add_group_control(
743	Group_Control_Background::get_type(),
744	[
745	'name' => 'active_title_background',
746	'selector' => '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-title',
747	]
748	);
749
750	$this->add_group_control(
751	Group_Control_Box_Shadow::get_type(),
752	[
753	'name' => 'active_title_shadow',
754	'selector' => '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-title',
755	]
756	);
757
758	$this->add_group_control(
759	Group_Control_Border::get_type(),
760	[
761	'name' => 'active_title_border',
762	'placeholder' => '1px',
763	'default' => '1px',
764	'selector' => '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-title',
765	]
766	);
767
768	$this->add_responsive_control(
769	'active_title_radius',
770	[
771	'label' => __('Border Radius', 'uicore-elements'),
772	'type' => Controls_Manager::DIMENSIONS,
773	'size_units' => ['px', '%'],
774	'selectors' => [
775	'{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-title' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
776	],
777	]
778	);
779
780	$this->end_controls_tab();
781
782	$this->end_controls_tabs();
783
784	$this->end_controls_section();
785
786	$this->start_controls_section(
787	'section_style_title_icon',
788	[
789	'label' => __('Title Icon', 'uicore-elements'),
790	'tab' => Controls_Manager::TAB_STYLE,
791	'condition' => [
792	'show_custom_icon' => 'yes'
793	]
794	]
795	);
796
797	$this->start_controls_tabs('tabs_title_icon_style');
798
799	$this->start_controls_tab(
800	'tab_title_icon_normal',
801	[
802	'label' => __('Normal', 'uicore-elements'),
803	]
804	);
805
806	$this->add_control(
807	'title_icon_color',
808	[
809	'label' => __('Title Icon Color', 'uicore-elements'),
810	'type' => Controls_Manager::COLOR,
811	'selectors' => [
812	'{{WRAPPER}} .ui-e-custom-icon i' => 'color: {{VALUE}};',
813	'{{WRAPPER}} .ui-e-custom-icon svg' => 'fill: {{VALUE}};',
814	],
815	]
816	);
817
818	$this->add_responsive_control(
819	'title_icon_size',
820	[
821	'label' => esc_html__('Size', 'uicore-elements'),
822	'type' => Controls_Manager::SLIDER,
823	'selectors' => [
824	'{{WRAPPER}} .ui-e-custom-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
825	'{{WRAPPER}} .ui-e-custom-icon svg' => 'width: {{SIZE}}{{UNIT}};',
826	],
827	]
828	);
829
830	$this->add_responsive_control(
831	'icon_indent',
832	[
833	'label' => esc_html__('Spacing', 'uicore-elements'),
834	'type' => Controls_Manager::SLIDER,
835	'range' => [
836	'px' => [
837	'max' => 50,
838	],
839	],
840	'default' => [
841	'unit' => 'px',
842	'size' => 5,
843	],
844	'selectors' => [
845	'{{WRAPPER}} .ui-e-custom-icon' => '--ui-e-margin-right:{{SIZE}}{{UNIT}};',
846	],
847	]
848	);
849
850	$this->end_controls_tab();
851
852	$this->start_controls_tab(
853	'tab_title_icon_hover',
854	[
855	'label' => __('Hover', 'uicore-elements'),
856	]
857	);
858
859	$this->add_control(
860	'title_hover_icon_color',
861	[
862	'label' => __('Title Icon Color', 'uicore-elements'),
863	'type' => Controls_Manager::COLOR,
864	'selectors' => [
865	'{{WRAPPER}} .ui-e-accordion-item:hover .ui-e-custom-icon i' => 'color: {{VALUE}};',
866	'{{WRAPPER}} .ui-e-accordion-item:hover .ui-e-custom-icon svg' => 'fill: {{VALUE}};',
867	],
868	]
869	);
870
871	$this->end_controls_tab();
872
873	$this->start_controls_tab(
874	'tab_title_icon_active',
875	[
876	'label' => __('Active', 'uicore-elements'),
877	]
878	);
879
880	$this->add_control(
881	'title_active_icon_color',
882	[
883	'label' => __('Title Icon Color', 'uicore-elements'),
884	'type' => Controls_Manager::COLOR,
885	'selectors' => [
886	'{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-custom-icon i' => 'color: {{VALUE}};',
887	'{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-custom-icon svg' => 'fill: {{VALUE}};',
888	],
889	]
890	);
891
892	$this->end_controls_tab();
893
894	$this->end_controls_tabs();
895
896	$this->end_controls_section();
897
898	$this->start_controls_section(
899	'section_toggle_style_icon',
900	[
901	'label' => __('Open & Close Icon', 'uicore-elements'),
902	'tab' => Controls_Manager::TAB_STYLE,
903	'condition' => [
904	'accordion_icon[value]!' => '',
905	],
906	]
907	);
908
909	$this->add_control(
910	'icon_align',
911	[
912	'label' => __('Alignment', 'uicore-elements'),
913	'type' => Controls_Manager::CHOOSE,
914	'options' => [
915	'left' => [
916	'title' => __('Start', 'uicore-elements'),
917	'icon' => 'eicon-h-align-left',
918	],
919	'right' => [
920	'title' => __('End', 'uicore-elements'),
921	'icon' => 'eicon-h-align-right',
922	],
923	],
924	'default' => is_rtl() ? 'left' : 'right',
925	'toggle' => false,
926	'label_block' => false,
927	]
928	);
929
930	$this->start_controls_tabs('tabs_icon_style');
931
932	$this->start_controls_tab(
933	'tab_icon_normal',
934	[
935	'label' => __('Normal', 'uicore-elements'),
936	]
937	);
938
939	$this->add_control(
940	'icon_color',
941	[
942	'label' => esc_html__('Item Icon Color', 'uicore-elements'),
943	'type' => Controls_Manager::COLOR,
944	'selectors' => [
945	'{{WRAPPER}} .ui-e-accordion-icon' => 'color: {{VALUE}};',
946	'{{WRAPPER}} .ui-e-accordion-icon svg' => 'fill: {{VALUE}};',
947	],
948	]
949	);
950
951	$this->add_group_control(
952	Group_Control_Background::get_type(),
953	[
954	'name' => 'icon_background_color',
955	'selector' => '{{WRAPPER}} .ui-e-accordion-icon'
956	]
957	);
958
959	$this->add_group_control(
960	Group_Control_Border::get_type(),
961	[
962	'name' => 'icon_border',
963	'selector' => '{{WRAPPER}} .ui-e-accordion-icon',
964	]
965	);
966
967	$this->add_responsive_control(
968	'icon_border_radius',
969	[
970	'label' => esc_html__('Border Radius', 'uicore-elements'),
971	'type' => Controls_Manager::DIMENSIONS,
972	'size_units' => ['px', '%'],
973	'selectors' => [
974	'{{WRAPPER}} .ui-e-accordion-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
975	],
976	]
977	);
978
979	$this->add_responsive_control(
980	'icon_padding',
981	[
982	'label' => esc_html__('Padding', 'uicore-elements'),
983	'type' => Controls_Manager::DIMENSIONS,
984	'size_units' => ['px', 'em', '%'],
985	'selectors' => [
986	// set as css variables because animations may need some particular value, such as pad-top for fade icon animation
987	'{{WRAPPER}} .ui-e-accordion-icon' => '--ui-e-icon-pad-top: {{TOP}}{{UNIT}}; --ui-e-icon-pad-right: {{RIGHT}}{{UNIT}}; --ui-e-icon-pad-bot: {{BOTTOM}}{{UNIT}}; --ui-e-icon-pad-left: {{LEFT}}{{UNIT}};',
988	],
989	]
990	);
991
992	$this->add_responsive_control(
993	'icon_size',
994	[
995	'label' => __('Icon Size', 'uicore-elements'),
996	'type' => Controls_Manager::SLIDER,
997	'range' => [
998	'px' => [
999	'min' => 10,
1000	'max' => 100,
1001	],
1002	],
1003	'default' => [
1004	'unit' => 'px',
1005	'size' => 15,
1006	],
1007	'selectors' => [
1008	'{{WRAPPER}} .ui-e-accordion-title .ui-e-accordion-icon' => '--ui-e-icon-size: {{SIZE}}{{UNIT}};',
1009	],
1010	]
1011	);
1012
1013	$this->add_responsive_control(
1014	'icon_spacing',
1015	[
1016	'label' => __('Icon Spacing', 'uicore-elements'),
1017	'type' => Controls_Manager::SLIDER,
1018	'range' => [
1019	'px' => [
1020	'min' => 0,
1021	'max' => 50,
1022	],
1023	],
1024	'selectors' => [
1025	'{{WRAPPER}} .ui-e-accordion-title' => 'gap: {{SIZE}}{{UNIT}};',
1026	]
1027	]
1028	);
1029
1030	$this->add_group_control(
1031	Group_Control_Box_Shadow::get_type(),
1032	[
1033	'name' => 'icon_box_shadow',
1034	'selector' => '{{WRAPPER}} .ui-e-accordion-icon',
1035	]
1036	);
1037
1038	$this->end_controls_tab();
1039
1040	$this->start_controls_tab(
1041	'tab_icon_hover',
1042	[
1043	'label' => __('Hover', 'uicore-elements'),
1044	]
1045	);
1046
1047	$this->add_control(
1048	'icon_hover_color',
1049	[
1050	'label' => esc_html__('Item Icon Color', 'uicore-elements'),
1051	'type' => Controls_Manager::COLOR,
1052	'selectors' => [
1053	'{{WRAPPER}} .ui-e-accordion-item:hover .ui-e-accordion-icon' => 'color: {{VALUE}};',
1054	'{{WRAPPER}} .ui-e-accordion-item:hover .ui-e-accordion-icon svg' => 'fill: {{VALUE}};',
1055	],
1056	]
1057	);
1058
1059	$this->add_group_control(
1060	Group_Control_Background::get_type(),
1061	[
1062	'name' => 'icon_hover_background_color',
1063	'selector' => '{{WRAPPER}} .ui-e-accordion-item:hover .ui-e-accordion-icon'
1064	]
1065	);
1066
1067	$this->add_control(
1068	'icon_hover_border_color',
1069	[
1070	'label' => esc_html__('Border Color', 'uicore-elements'),
1071	'type' => Controls_Manager::COLOR,
1072	'condition' => [
1073	'icon_border_border!' => '',
1074	],
1075	'selectors' => [
1076	'{{WRAPPER}} .ui-e-accordion-item:hover .ui-e-accordion-icon' => 'border-color: {{VALUE}};',
1077	],
1078	]
1079	);
1080
1081	$this->end_controls_tab();
1082
1083	$this->start_controls_tab(
1084	'tab_icon_active',
1085	[
1086	'label' => __('Active', 'uicore-elements'),
1087	]
1088	);
1089
1090	$this->add_control(
1091	'icon_active_color',
1092	[
1093	'label' => esc_html__('Item Icon Color', 'uicore-elements'),
1094	'type' => Controls_Manager::COLOR,
1095	'selectors' => [
1096	'{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-icon' => 'color: {{VALUE}};',
1097	'{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-icon svg' => 'fill: {{VALUE}};',
1098	],
1099	]
1100	);
1101
1102	$this->add_group_control(
1103	Group_Control_Background::get_type(),
1104	[
1105	'name' => 'icon_active_background_color',
1106	'selector' => '{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-icon'
1107	]
1108	);
1109
1110	$this->add_control(
1111	'icon_active_border_color',
1112	[
1113	'label' => esc_html__('Border Color', 'uicore-elements'),
1114	'type' => Controls_Manager::COLOR,
1115	'condition' => [
1116	'icon_border_border!' => '',
1117	],
1118	'selectors' => [
1119	'{{WRAPPER}} .ui-e-accordion-item.ui-open .ui-e-accordion-icon' => 'border-color: {{VALUE}};',
1120	],
1121	]
1122	);
1123
1124	$this->end_controls_tab();
1125
1126	$this->end_controls_tabs();
1127
1128	$this->end_controls_section();
1129
1130	$this->start_controls_section(
1131	'section_toggle_style_content',
1132	[
1133	'label' => __('Content', 'uicore-elements'),
1134	'tab' => Controls_Manager::TAB_STYLE,
1135	]
1136	);
1137
1138	$this->add_control(
1139	'content_color',
1140	[
1141	'label' => __('Text Color', 'uicore-elements'),
1142	'type' => Controls_Manager::COLOR,
1143	'selectors' => [
1144	'{{WRAPPER}} .ui-e-accordion-content' => 'color: {{VALUE}};',
1145	],
1146	]
1147	);
1148
1149	$this->add_group_control(
1150	Group_Control_Background::get_type(),
1151	[
1152	'name' => 'content_background_color',
1153	'selector' => '{{WRAPPER}} .ui-e-accordion-content',
1154	]
1155	);
1156
1157	$this->add_group_control(
1158	Group_Control_Border::get_type(),
1159	[
1160	'name' => 'content_border',
1161	'label' => __('Border', 'uicore-elements'),
1162	'selector' => '{{WRAPPER}} .ui-e-accordion-content',
1163	]
1164	);
1165
1166	$this->add_responsive_control(
1167	'content_radius',
1168	[
1169	'label' => __('Border Radius', 'uicore-elements'),
1170	'type' => Controls_Manager::DIMENSIONS,
1171	'size_units' => ['px', '%'],
1172	'selectors' => [
1173	'{{WRAPPER}} .ui-e-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
1174	],
1175	]
1176	);
1177
1178	$this->add_responsive_control(
1179	'content_padding',
1180	[
1181	'label' => __('Padding', 'uicore-elements'),
1182	'type' => Controls_Manager::DIMENSIONS,
1183	'size_units' => ['px', 'em', '%'],
1184	'selectors' => [
1185	'{{WRAPPER}} .ui-e-accordion-content' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1186	],
1187	]
1188	);
1189
1190	$this->add_responsive_control(
1191	'content_spacing',
1192	[
1193	'label' => __('Spacing', 'uicore-elements'),
1194	'type' => Controls_Manager::SLIDER,
1195	'range' => [
1196	'px' => [
1197	'min' => 0,
1198	'max' => 100,
1199	],
1200	],
1201	'default' => [
1202	'unit' => 'px',
1203	'size' => 15,
1204	],
1205	'selectors' => [
1206	'{{WRAPPER}} .ui-e-accordion-content' => 'margin-top: {{SIZE}}{{UNIT}};',
1207	],
1208	]
1209	);
1210
1211	$this->add_group_control(
1212	Group_Control_Typography::get_type(),
1213	[
1214	'name' => 'content_typography',
1215	'selector' => '{{WRAPPER}} .ui-e-accordion-content',
1216	]
1217	);
1218
1219	$this->add_group_control(
1220	Group_Control_Box_Shadow::get_type(),
1221	[
1222	'name' => 'content_shadow',
1223	'label' => __('Box Shadow', 'uicore-elements'),
1224	'selector' => '{{WRAPPER}} .ui-e-accordion-content',
1225	]
1226	);
1227
1228	$this->add_responsive_control(
1229	'align',
1230	[
1231	'label' => __('Alignment', 'uicore-elements'),
1232	'type' => Controls_Manager::CHOOSE,
1233	'options' => [
1234	'left' => [
1235	'title' => __('Left', 'uicore-elements'),
1236	'icon' => 'eicon-text-align-left',
1237	],
1238	'center' => [
1239	'title' => __('Center', 'uicore-elements'),
1240	'icon' => 'eicon-text-align-center',
1241	],
1242	'right' => [
1243	'title' => __('Right', 'uicore-elements'),
1244	'icon' => 'eicon-text-align-right',
1245	],
1246	],
1247	'default' => is_rtl() ? 'right' : 'left',
1248	'selectors' => [
1249	'{{WRAPPER}} .ui-e-accordion-content' => 'text-align: {{VALUE}};',
1250	],
1251	]
1252	);
1253
1254	$this->end_controls_section();
1255
1256	$this->start_controls_section(
1257	'section_animation',
1258	[
1259	'label' => esc_html__('Animations', 'uicore-elements'),
1260	'tab' => Controls_Manager::TAB_STYLE,
1261	]
1262	);
1263
1264	$this->add_control(
1265	'accordion_animation',
1266	[
1267	'label' => esc_html__('Accordion Animation', 'uicore-elements'),
1268	'type' => \Elementor\Controls_Manager::SELECT,
1269	'default' => 'ui-e-animation-acc-basic',
1270	'options' => [
1271	'' => esc_html__('None', 'uicore-elements'),
1272	'ui-e-animation-acc-basic' => esc_html__('Basic', 'uicore-elements'),
1273	'ui-e-animation-acc-slow' => esc_html__('Slow', 'uicore-elements'),
1274	'ui-e-animation-acc-expand' => esc_html__('Expand', 'uicore-elements'),
1275	'ui-e-animation-acc-overshadow' => esc_html__('Overshadow', 'uicore-elements'),
1276	],
1277	'prefix_class' => '',
1278	'render_type' => 'template',
1279	'frontend_available' => true,
1280	]
1281	);
1282
1283	$this->add_control(
1284	'icon_animation',
1285	[
1286	'label' => esc_html__('Icon Animation', 'uicore-elements'),
1287	'type' => \Elementor\Controls_Manager::SELECT,
1288	'default' => 'ui-e-animation-ico-fade',
1289	'options' => [
1290	'' => esc_html__('None', 'uicore-elements'),
1291	'ui-e-animation-ico-fade' => esc_html__('Fade', 'uicore-elements'),
1292	'ui-e-animation-ico-spin' => esc_html__('Spin', 'uicore-elements'),
1293	'ui-e-animation-ico-slide' => esc_html__('Slide', 'uicore-elements'),
1294	],
1295	'prefix_class' => '',
1296	'render_type' => 'template',
1297	]
1298	);
1299
1300	$this->add_control(
1301	'icon_spin_value',
1302	[
1303	'label' => esc_html__('Icon Rotation', 'uicore-elements'),
1304	'type' => \Elementor\Controls_Manager::SLIDER,
1305	'size_units' => ['deg', ''],
1306	'range' => [
1307	'deg' => [
1308	'min' => 0,
1309	'max' => 360,
1310	'step' => 1,
1311	],
1312	],
1313	'default' => [
1314	'unit' => 'deg',
1315	'size' => 315,
1316	],
1317	'selectors' => [
1318	'{{WRAPPER}} .ui-e-accordion-icon' => '--ui-e-spin:{{SIZE}}deg;',
1319	],
1320	'condition' => [
1321	'icon_animation' => 'ui-e-animation-ico-spin',
1322	]
1323	]
1324	);
1325
1326	$this->end_controls_section();
1327	}
1328	protected function render()
1329	{
1330
1331	$settings = $this->get_settings_for_display();
1332	$ID = 'ui-e-accordion-' . $this->get_id();
1333
1334	// Sets schema atts if active
1335	if ($this->is_option('schema_activity', 'yes')) {
1336	$this->add_render_attribute('accordion', 'itemscope');
1337	$this->add_render_attribute('accordion', ['itemtype' => 'https://schema.org/FAQPage']);
1338	}
1339
1340	$titleTag = $settings['title_html_tag'] . ' '; // HTML tag
1341
1342	?>
1343	<div class="ui-e-accordion" <?php $this->print_render_attribute_string('accordion'); ?>>
1344
1345	<?php foreach ($settings['tabs'] as $index => $item) :
1346
1347	$loopCounter = $index + 1;
1348
1349	// Builds the accordion ID
1350	$acc_id = $item['tab_title']
1351	? 'ui-e-' . sanitize_title($item['tab_title'])
1352	: $ID . $loopCounter;
1353
1354	// Build the Aria ID
1355	if ('sectionId' == $item['source']) {
1356	$aria_id = 'ui-' . preg_replace('/#/', '', $item['section_id']);
1357	} else {
1358	$aria_id = 'ui-e-acc-' . $loopCounter;
1359	}
1360
1361	// Creates the title and content atts
1362	$tab_title_setting_key = $this->get_repeater_setting_key('tab_title', 'tabs', $index);
1363	$tab_content_setting_key = $this->get_repeater_setting_key('tab_content', 'tabs', $index);
1364
1365	// Render title atts
1366	// TODO: remove `ui-e-title` class after, at least, 3 releases from 1.2.1. Kept for compatibility purposes
1367	$this->add_render_attribute($tab_title_setting_key, [
1368	'class' => ['ui-e-accordion-title ui-e-title'],
1369	]);
1370	$this->add_render_attribute($tab_title_setting_key, 'class', ('right' == $settings['icon_align']) ? 'ui-right' : '');
1371
1372	// Render content atts
1373	// TODO: remove `ui-e-content` class after, at least, 3 releases from 1.2.1. Kept for compatibility purposes
1374	$this->add_render_attribute($tab_content_setting_key, [
1375	'class' => ['ui-e-accordion-content ui-e-content'],
1376	'style' => ($loopCounter === $settings['active_item']) ? '' : 'display:none;', // keep content hide if item not active (has to be set inline so jquery can take control over it)
1377	'aria-labelledby' => $acc_id,
1378	'id' => $aria_id
1379	]);
1380
1381	// Check if the current accordion item uses sectionId as source
1382	if ('sectionId' == $item['source']) {
1383	// and also check if an ID was set
1384	if ($item['section_id'] != '') {
1385	$this->add_render_attribute($tab_content_setting_key, ['class' => ['ui-section-id']]); // class used by JS
1386	$sectionWarning = "The element with ID <em>{$item['section_id']}</em> is going to be inserted here on the front-end";
1387	} else {
1388	$sectionWarning = esc_html__("You didn't define an ID.", 'uicore-elements');
1389	}
1390	}
1391
1392	// Render item atts
1393	// TODO: remove `ui-e-item` class after, at least, 3 releases from 1.2.1. Kept for compatibility purposes
1394	$item_key = 'ui-e-item-' . $index;
1395	$this->add_render_attribute($item_key, [
1396	'class' => ($loopCounter === $settings['active_item']) ? 'ui-e-accordion-item ui-e-item ui-open' : 'ui-e-accordion-item ui-e-item',
1397	'role' => 'button',
1398	'tabindex' => '0',
1399	'aria-expanded' => ($loopCounter === $settings['active_item']) ? 'true' : 'false',
1400	'aria-controls' => $aria_id,
1401	'id' => $acc_id,
1402	]);
1403
1404	// Render schema atts if active
1405	if ($this->is_option('schema_activity', 'yes')) {
1406	$this->add_render_attribute($item_key, 'itemscope');
1407	$this->add_render_attribute($item_key, 'itemprop', 'mainEntity');
1408	$this->add_render_attribute($item_key, 'itemtype', 'https://schema.org/Question');
1409
1410	$this->add_render_attribute($tab_content_setting_key, 'itemscope');
1411	$this->add_render_attribute($tab_content_setting_key, 'itemprop', 'acceptedAnswer', true);
1412	$this->add_render_attribute($tab_content_setting_key, 'itemtype', 'https://schema.org/Answer', true);
1413
1414	$schema_text = $this->get_repeater_setting_key('schema_text', 'tabs', $index);
1415	$schema_name = $this->get_repeater_setting_key('schema_name', 'tabs', $index);
1416	$this->add_render_attribute($schema_text, 'itemprop', 'text');
1417	$this->add_render_attribute($schema_name, 'itemprop', 'name');
1418
1419	// Sets the variables to empty to avoid undefined variable problems
1420	} else {
1421	$schema_text = $schema_name = '';
1422	}
1423	?>
1424	<div <?php $this->print_render_attribute_string($item_key); ?>>
1425
1426	<<?php echo Helper::esc_tag($titleTag) ?> <?php $this->print_render_attribute_string($tab_title_setting_key); ?>>
1427
1428	<?php if ($settings['accordion_icon']['value']) :
1429	// TODO: remove `ui-e-icon` class after, at least, 3 releases from 1.2.1. Kept for compatibility purposes
1430	?>
1431	<span class="ui-e-accordion-icon ui-e-icon ui-e-<?php echo esc_attr($settings['icon_align']); ?>" aria-hidden="true">
1432
1433	<span class="ui-e-accordion-icon-closed">
1434	<?php Icons_Manager::render_icon($settings['accordion_icon'], ['aria-hidden' => 'true']); ?>
1435	</span>
1436
1437	<?php if ($settings['icon_animation'] != 'ui-e-animation-ico-spin') : //spin animation dismiss the opened accordion icon
1438	?>
1439	<span class="ui-e-accordion-icon-opened">
1440	<?php Icons_Manager::render_icon($settings['accordion_active_icon'], ['aria-hidden' => 'true']); ?>
1441	</span>
1442	<?php endif; ?>
1443
1444	</span>
1445	<?php endif; ?>
1446
1447	<?php // TODO: remove `ui-e-title-text` class after, at least, 3 releases from 1.2.1. Kept for compatibility purposes
1448	?>
1449	<span class="ui-e-accordion-title-text ui-e-title-text" <?php $this->print_render_attribute_string($schema_name); ?>>
1450	<?php if (!empty($item['repeater_icon']['value']) && $this->is_option('show_custom_icon', 'yes')) : ?>
1451	<span class="ui-e-custom-icon">
1452	<?php Icons_Manager::render_icon($item['repeater_icon'], ['aria-hidden' => 'true']); ?>
1453	</span>
1454	<?php endif; ?>
1455	<?php echo esc_html($item['tab_title']); ?>
1456	</span>
1457
1458	</<?php echo Helper::esc_tag($titleTag) ?>>
1459
1460	<div <?php $this->print_render_attribute_string($tab_content_setting_key); ?>>
1461	<?php
1462	if ('custom' == $item['source'] && !empty($item['tab_content'])) {
1463
1464	// if schema is active, creates a wrapper for the itemprop structure
1465	if ($this->is_option('schema_activity', 'yes')) {
1466	?>
1467	<div <?php $this->print_render_attribute_string($schema_text); ?>>
1468	<?php
1469	}
1470
1471	echo wp_kses_post($this->parse_text_editor($item['tab_content']));
1472
1473	if ($this->is_option('schema_activity', 'yes')) {
1474	?>
1475	</div>
1476	<?php
1477	}
1478	}
1479	// if source is sectionId and we're inside editor, returns a warning for context. The sectionId content is moved via JS
1480	if ('sectionId' == $item['source'] && $this->is_edit_mode()) {
1481	echo wp_kses($sectionWarning, ['em' => []]);
1482	}
1483	?>
1484	</div>
1485
1486	</div>
1487	<?php endforeach; ?>
1488	</div>
1489	<?php
1490	}
1491	}
1492	\Elementor\Plugin::instance()->widgets_manager->register(new Accordion());
1493