← All changes | modules/nested-tabs/widgets/nested-tabs.php +149 -186 4.1.4 → 3.20.2 View file →

		@@ -16,17 +16,13 @@
16	16	use Elementor\Plugin;
17	17	use Elementor\Repeater;
18	18
19	19	if ( ! defined( 'ABSPATH' ) ) {
20		- exit; // Exit if accessed directly.
	20	+ exit; // Exit if accessed directly
21	21	}
22	22
23	23	class NestedTabs extends Widget_Nested_Base {
24	24
25		- private $tab_item_settings = [];
26		- private $optimized_markup = null;
27		- private $widget_container_selector = '';
28		-
29	25	public function get_name() {
30	26	return 'nested-tabs';
31	27	}
32	28
		@@ -41,29 +37,13 @@
41	37	public function get_keywords() {
42	38	return [ 'nested', 'tabs', 'accordion', 'toggle' ];
43	39	}
44	40
45		- public function get_style_depends(): array {
46		- return [ 'widget-nested-tabs' ];
47		- }
48		-
49		- public function has_widget_inner_wrapper(): bool {
50		- return ! Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
51		- }
52		-
53		- public function show_in_panel(): bool {
54		- return Plugin::$instance->experiments->is_feature_active( 'nested-elements', true );
55		- }
56		-
57	41	protected function tab_content_container( int $index ) {
58	42	return [
59	43	'elType' => 'container',
60	44	'settings' => [
61		- '_title' => sprintf(
62		- /* translators: %d: Tab index. */
63		- __( 'Tab #%d', 'elementor' ),
64		- $index
65		- ),
	45	+ '_title' => sprintf( __( 'Tab #%s', 'elementor' ), $index ),
66	46	'content_width' => 'full',
67	47	],
68	48	];
69	49	}
		@@ -80,9 +60,8 @@
80	60	return 'tab_title';
81	61	}
82	62
83	63	protected function get_default_children_title() {
84		- /* translators: %d: Tab index. */
85	64	return esc_html__( 'Tab #%d', 'elementor' );
86	65	}
87	66
88	67	protected function get_default_children_placeholder_selector() {
		@@ -93,21 +72,18 @@
93	72	return 'elementor-widget-n-tabs';
94	73	}
95	74
96	75	protected function register_controls() {
97		- if ( null === $this->optimized_markup ) {
98		- $this->optimized_markup = Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' ) && ! $this->has_widget_inner_wrapper();
99		- $this->widget_container_selector = $this->optimized_markup ? '' : ' > .elementor-widget-container';
100		- }
101		-
102	76	$start = is_rtl() ? 'right' : 'left';
103	77	$end = is_rtl() ? 'left' : 'right';
104	78	$start_logical = is_rtl() ? 'end' : 'start';
105	79	$end_logical = is_rtl() ? 'start' : 'end';
106		- $heading_selector_non_touch_device = "{{WRAPPER}}.elementor-widget-n-tabs{$this->widget_container_selector} > .e-n-tabs[data-touch-mode='false'] > .e-n-tabs-heading";
107		- $heading_selector_touch_device = "{{WRAPPER}}.elementor-widget-n-tabs{$this->widget_container_selector} > .e-n-tabs[data-touch-mode='true'] > .e-n-tabs-heading";
108		- $heading_selector = "{{WRAPPER}}.elementor-widget-n-tabs{$this->widget_container_selector} > .e-n-tabs > .e-n-tabs-heading";
109		- $content_selector = ":where( {{WRAPPER}}.elementor-widget-n-tabs{$this->widget_container_selector} > .e-n-tabs > .e-n-tabs-content ) > .e-con";
	80	+ $logical_dimensions_inline_start = is_rtl() ? '{{RIGHT}}{{UNIT}}' : '{{LEFT}}{{UNIT}}';
	81	+ $logical_dimensions_inline_end = is_rtl() ? '{{LEFT}}{{UNIT}}' : '{{RIGHT}}{{UNIT}}';
	82	+ $heading_selector_non_touch_device = '{{WRAPPER}} > .elementor-widget-container > .e-n-tabs[data-touch-mode="false"] > .e-n-tabs-heading';
	83	+ $heading_selector_touch_device = '{{WRAPPER}} > .elementor-widget-container > .e-n-tabs[data-touch-mode="true"] > .e-n-tabs-heading';
	84	+ $heading_selector = '{{WRAPPER}} > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading';
	85	+ $content_selector = ':where( {{WRAPPER}} > .elementor-widget-container > .e-n-tabs > .e-n-tabs-content ) > .e-con';
110	86
111	87	$this->start_controls_section( 'section_tabs', [
112	88	'label' => esc_html__( 'Tabs', 'elementor' ),
113	89	] );
		@@ -183,9 +159,9 @@
183	159	'tab_title' => esc_html__( 'Tab #3', 'elementor' ),
184	160	],
185	161	],
186	162	'title_field' => '{{{ tab_title }}}',
187		- 'button_text' => esc_html__( 'Add Tab', 'elementor' ),
	163	+ 'button_text' => 'Add Tab',
188	164	] );
189	165
190	166	$styling_block_start = '--n-tabs-direction: column; --n-tabs-heading-direction: row; --n-tabs-heading-width: initial; --n-tabs-title-flex-basis: content; --n-tabs-title-flex-shrink: 0;';
191	167	$styling_block_end = '--n-tabs-direction: column-reverse; --n-tabs-heading-direction: row; --n-tabs-heading-width: initial; --n-tabs-title-flex-basis: content; --n-tabs-title-flex-shrink: 0';
		@@ -227,9 +203,8 @@
227	203	],
228	204	'selectors' => [
229	205	'{{WRAPPER}}' => '{{VALUE}}',
230	206	],
231		- 'control_type' => 'content',
232	207	] );
233	208
234	209	$this->add_responsive_control( 'tabs_justify_horizontal', [
235	210	'label' => esc_html__( 'Justify', 'elementor' ),
		@@ -504,9 +479,9 @@
504	479	[
505	480	'name' => 'tabs_title_background_color',
506	481	'types' => [ 'classic', 'gradient' ],
507	482	'exclude' => [ 'image' ],
508		- 'selector' => "{{WRAPPER}}{$this->widget_container_selector} > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected='false']:not( :hover )",
	483	+ 'selector' => '{{WRAPPER}} > .elementor-widget-container > .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title[aria-selected="false"]:not( :hover )',
509	484	'fields_options' => [
510	485	'color' => [
511	486	'label' => esc_html__( 'Background Color', 'elementor' ),
512	487	'selectors' => [
		@@ -536,8 +511,9 @@
536	511	$this->add_group_control(
537	512	Group_Control_Box_Shadow::get_type(),
538	513	[
539	514	'name' => 'tabs_title_box_shadow',
	515	+ 'label' => esc_html__( 'Shadow', 'elementor' ),
540	516	'separator' => 'after',
541	517	'selector' => "{$heading_selector} > .e-n-tab-title[aria-selected=\"false\"]:not( :hover )",
542	518	]
543	519	);
		@@ -594,8 +570,9 @@
594	570	$this->add_group_control(
595	571	Group_Control_Box_Shadow::get_type(),
596	572	[
597	573	'name' => 'tabs_title_box_shadow_hover',
	574	+ 'label' => esc_html__( 'Shadow', 'elementor' ),
598	575	'separator' => 'after',
599	576	'selector' => "{$heading_selector_non_touch_device} > .e-n-tab-title[aria-selected=\"false\"]:hover",
600	577	]
601	578	);
		@@ -678,8 +655,9 @@
678	655	$this->add_group_control(
679	656	Group_Control_Box_Shadow::get_type(),
680	657	[
681	658	'name' => 'tabs_title_box_shadow_active',
	659	+ 'label' => esc_html__( 'Shadow', 'elementor' ),
682	660	'selector' => "{$heading_selector} > .e-n-tab-title[aria-selected=\"true\"], {$heading_selector_touch_device} > .e-n-tab-title[aria-selected=\"false\"]:hover",
683	661	]
684	662	);
685	663
		@@ -706,9 +684,9 @@
706	684	'label' => esc_html__( 'Padding', 'elementor' ),
707	685	'type' => Controls_Manager::DIMENSIONS,
708	686	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
709	687	'selectors' => [
710		- '{{WRAPPER}}' => '--n-tabs-title-padding-top: {{TOP}}{{UNIT}}; --n-tabs-title-padding-right: {{RIGHT}}{{UNIT}}; --n-tabs-title-padding-bottom: {{BOTTOM}}{{UNIT}}; --n-tabs-title-padding-left: {{LEFT}}{{UNIT}};',
	688	+ '{{WRAPPER}}' => "--n-tabs-title-padding-block-start: {{TOP}}{{UNIT}}; --n-tabs-title-padding-inline-end: $logical_dimensions_inline_end; --n-tabs-title-padding-block-end: {{BOTTOM}}{{UNIT}}; --n-tabs-title-padding-inline-start: $logical_dimensions_inline_start;",
711	689	],
712	690	]
713	691	);
714	692
		@@ -758,8 +736,13 @@
758	736	Group_Control_Text_Shadow::get_type(),
759	737	[
760	738	'name' => 'title_text_shadow',
761	739	'selector' => "{$heading_selector} > .e-n-tab-title[aria-selected=\"false\"]:not( :hover )",
	740	+ 'fields_options' => [
	741	+ 'text_shadow_type' => [
	742	+ 'label' => esc_html__( 'Shadow', 'elementor' ),
	743	+ ],
	744	+ ],
762	745	]
763	746	);
764	747
765	748	$this->add_group_control(
		@@ -766,8 +749,13 @@
766	749	Group_Control_Text_Stroke::get_type(),
767	750	[
768	751	'name' => 'title_text_stroke',
769	752	'selector' => "{$heading_selector} > .e-n-tab-title[aria-selected=\"false\"]:not( :hover ) :is( span, a, i )",
	753	+ 'fields_options' => [
	754	+ 'text_stroke_type' => [
	755	+ 'label' => esc_html__( 'Stroke', 'elementor' ),
	756	+ ],
	757	+ ],
770	758	]
771	759	);
772	760
773	761	$this->end_controls_tab();
		@@ -794,8 +782,14 @@
794	782	Group_Control_Text_Shadow::get_type(),
795	783	[
796	784	'name' => 'title_text_shadow_hover',
797	785	'selector' => "{$heading_selector_non_touch_device} > .e-n-tab-title[aria-selected=\"false\"]:hover",
	786	+ 'fields_options' => [
	787	+ 'text_shadow_type' => [
	788	+ 'label' => esc_html__( 'Shadow', 'elementor' ),
	789	+ ],
	790	+ ],
	791	+
798	792	]
799	793	);
800	794
801	795	$this->add_group_control(
		@@ -802,8 +796,13 @@
802	796	Group_Control_Text_Stroke::get_type(),
803	797	[
804	798	'name' => 'title_text_stroke_hover',
805	799	'selector' => "{$heading_selector_non_touch_device} > .e-n-tab-title[aria-selected=\"false\"]:hover :is( span, a, i )",
	800	+ 'fields_options' => [
	801	+ 'text_stroke_type' => [
	802	+ 'label' => esc_html__( 'Stroke', 'elementor' ),
	803	+ ],
	804	+ ],
806	805	]
807	806	);
808	807
809	808	$this->end_controls_tab();
		@@ -830,8 +829,13 @@
830	829	Group_Control_Text_Shadow::get_type(),
831	830	[
832	831	'name' => 'title_text_shadow_active',
833	832	'selector' => "{$heading_selector} > .e-n-tab-title[aria-selected=\"true\"], {$heading_selector_touch_device} > .e-n-tab-title[aria-selected=\"false\"]:hover",
	833	+ 'fields_options' => [
	834	+ 'text_shadow_type' => [
	835	+ 'label' => esc_html__( 'Shadow', 'elementor' ),
	836	+ ],
	837	+ ],
834	838	]
835	839	);
836	840
837	841	$this->add_group_control(
		@@ -838,8 +842,13 @@
838	842	Group_Control_Text_Stroke::get_type(),
839	843	[
840	844	'name' => 'title_text_stroke_active',
841	845	'selector' => "{$heading_selector} > .e-n-tab-title[aria-selected=\"true\"] :is( span, a, i ), {$heading_selector_touch_device} > .e-n-tab-title[aria-selected=\"false\"]:hover :is( span, a, i )",
	846	+ 'fields_options' => [
	847	+ 'text_stroke_type' => [
	848	+ 'label' => esc_html__( 'Stroke', 'elementor' ),
	849	+ ],
	850	+ ],
842	851	]
843	852	);
844	853
845	854	$this->end_controls_tab();
		@@ -1056,9 +1065,9 @@
1056	1065	'label' => esc_html__( 'Padding', 'elementor' ),
1057	1066	'type' => Controls_Manager::DIMENSIONS,
1058	1067	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
1059	1068	'selectors' => [
1060		- $content_selector => '--padding-top: {{TOP}}{{UNIT}}; --padding-right: {{RIGHT}}{{UNIT}}; --padding-bottom: {{BOTTOM}}{{UNIT}}; --padding-left: {{LEFT}}{{UNIT}};',
	1069	+ $content_selector => "--padding-block-start: {{TOP}}{{UNIT}}; --padding-inline-end: $logical_dimensions_inline_end; --padding-block-end: {{BOTTOM}}{{UNIT}}; --padding-inline-start: $logical_dimensions_inline_start;",
1061	1070	],
1062	1071	]
1063	1072	);
1064	1073
		@@ -1064,9 +1073,9 @@
1064	1073
1065	1074	$this->end_controls_section();
1066	1075	}
1067	1076
1068		- protected function render_tab_titles_html( $item_settings ): void {
	1077	+ protected function render_tab_titles_html( $item_settings ): string {
1069	1078	$setting_key = $this->get_repeater_setting_key( 'tab_title', 'tabs', $item_settings['index'] );
1070	1079	$title = $item_settings['item']['tab_title'];
1071	1080	$css_classes = [ 'e-n-tab-title' ];
1072	1081
		@@ -1075,9 +1084,8 @@
1075	1084	}
1076	1085
1077	1086	$this->add_render_attribute( $setting_key, [
1078	1087	'id' => $item_settings['tab_id'],
1079		- 'data-tab-title-id' => $item_settings['tab_title_id'],
1080	1088	'class' => $css_classes,
1081	1089	'aria-selected' => 1 === $item_settings['tab_count'] ? 'true' : 'false',
1082	1090	'data-tab-index' => $item_settings['tab_count'],
1083	1091	'role' => 'tab',
		@@ -1084,41 +1092,39 @@
1084	1092	'tabindex' => 1 === $item_settings['tab_count'] ? '0' : '-1',
1085	1093	'aria-controls' => $item_settings['container_id'],
1086	1094	'style' => '--n-tabs-title-order: ' . $item_settings['tab_count'] . ';',
1087	1095	] );
1088		- ?>
1089		- <button <?php $this->print_render_attribute_string( $setting_key ); ?>>
1090		- <?php $this->maybe_render_tab_icons_html( $item_settings ); ?>
1091		- <span <?php $this->print_render_attribute_string( 'tab-title-text' ); ?>>
1092		- <?php echo wp_kses_post( $title ); ?>
1093		- </span>
1094		- </button>
1095		- <?php
1096		- }
1097	1096
1098		- protected function maybe_render_tab_icons_html( $item_settings ): void {
1099		- $icon_settings = $item_settings['item']['tab_icon'];
	1097	+ $render_attributes = $this->get_render_attribute_string( $setting_key );
	1098	+ $text_class = $this->get_render_attribute_string( 'tab-title-text' );
	1099	+ $icon_class = $this->get_render_attribute_string( 'tab-icon' );
1100	1100
1101		- if ( empty( $icon_settings['value'] ) ) {
1102		- return;
	1101	+ $icon_html = Icons_Manager::try_get_icon_html( $item_settings['item']['tab_icon'], [ 'aria-hidden' => 'true' ] );
	1102	+ $icon_active_html = $icon_html;
	1103	+
	1104	+ if ( $this->is_active_icon_exist( $item_settings['item'] ) ) {
	1105	+ $icon_active_html = Icons_Manager::try_get_icon_html( $item_settings['item']['tab_icon_active'], [ 'aria-hidden' => 'true' ] );
1103	1106	}
1104	1107
1105		- $active_icon_settings = $this->is_active_icon_exist( $item_settings['item'] )
1106		- ? $item_settings['item']['tab_icon_active']
1107		- : $icon_settings;
	1108	+ ob_start();
1108	1109	?>
1109		- <span <?php $this->print_render_attribute_string( 'tab-icon' ); ?>>
1110		- <?php Icons_Manager::render_icon( $icon_settings, [ 'aria-hidden' => 'true' ] ); ?>
1111		- <?php Icons_Manager::render_icon( $active_icon_settings, [ 'aria-hidden' => 'true' ] ); ?>
1112		- </span>
	1110	+ <button <?php echo $render_attributes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
	1111	+ <span <?php echo $icon_class; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
	1112	+ <?php echo $icon_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
	1113	+ <?php echo $icon_active_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
	1114	+ </span>
	1115	+ <span <?php echo $text_class; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
	1116	+ <?php echo wp_kses_post( $title ); ?>
	1117	+ </span>
	1118	+ </button>
1113	1119	<?php
	1120	+ return ob_get_clean();
1114	1121	}
1115	1122
1116		- protected function render_tab_containers_html( $settings ): void {
1117		- foreach ( $settings['tabs'] as $index => $item ) {
1118		- $item_settings = $this->tab_item_settings[ $index ];
1119		- $this->print_child( $item_settings['index'], $item_settings );
1120		- }
	1123	+ protected function render_tab_containers_html( $item_settings ): string {
	1124	+ ob_start();
	1125	+ $this->print_child( $item_settings['index'], $item_settings );
	1126	+ return ob_get_clean();
1121	1127	}
1122	1128
1123	1129
1124	1130	/**
		@@ -1123,9 +1129,9 @@
1123	1129
1124	1130	/**
1125	1131	* Print the content area.
1126	1132	*
1127		- * @param int $index
	1133	+ * @param int $index
1128	1134	* @param array $item_settings
1129	1135	*/
1130	1136	public function print_child( $index, $item_settings = [] ) {
1131	1137	$children = $this->get_children();
		@@ -1144,11 +1150,9 @@
1144	1150	return $should_render;
1145	1151	};
1146	1152
1147	1153	add_filter( 'elementor/frontend/container/should_render', $add_attribute_to_container, 10, 3 );
1148		- if ( isset( $children[ $index ] ) ) {
1149		- $children[ $index ]->print_element();
1150		- }
	1154	+ $children[ $index ]->print_element();
1151	1155	remove_filter( 'elementor/frontend/container/should_render', $add_attribute_to_container );
1152	1156	}
1153	1157
1154	1158	protected function add_attributes_to_container( $container, $item_settings ) {
		@@ -1163,9 +1167,9 @@
1163	1167	}
1164	1168
1165	1169	protected function render() {
1166	1170	$settings = $this->get_settings_for_display();
1167		- $widget_number = $this->get_id_int();
	1171	+ $widget_number = substr( $this->get_id_int(), 0, 3 );
1168	1172
1169	1173	if ( ! empty( $settings['link'] ) ) {
1170	1174	$this->add_link_attributes( 'elementor-tabs', $settings['link'] );
1171	1175	}
		@@ -1178,147 +1182,106 @@
1178	1182
1179	1183	$this->add_render_attribute( 'tab-title-text', 'class', 'e-n-tab-title-text' );
1180	1184	$this->add_render_attribute( 'tab-icon', 'class', 'e-n-tab-icon' );
1181	1185	$this->add_render_attribute( 'tab-icon-active', 'class', [ 'e-n-tab-icon' ] );
	1186	+
	1187	+ $tab_titles_html = '';
	1188	+ $tab_containers_html = '';
	1189	+
	1190	+ foreach ( $settings['tabs'] as $index => $item ) {
	1191	+ $tab_count = $index + 1;
	1192	+
	1193	+ $tab_id = empty( $item['element_id'] )
	1194	+ ? 'e-n-tabs-title-' . $widget_number . $tab_count
	1195	+ : $item['element_id'];
	1196	+
	1197	+ $item_settings = [
	1198	+ 'index' => $index,
	1199	+ 'tab_count' => $tab_count,
	1200	+ 'tab_id' => $tab_id,
	1201	+ 'container_id' => 'e-n-tab-content-' . $widget_number . $tab_count,
	1202	+ 'widget_number' => $widget_number,
	1203	+ 'item' => $item,
	1204	+ 'settings' => $settings,
	1205	+ ];
	1206	+
	1207	+ $tab_titles_html .= $this->render_tab_titles_html( $item_settings );
	1208	+ $tab_containers_html .= $this->render_tab_containers_html( $item_settings );
	1209	+ }
1182	1210	?>
1183	1211	<div <?php $this->print_render_attribute_string( 'elementor-tabs' ); ?>>
1184	1212	<div class="e-n-tabs-heading" role="tablist">
1185		- <?php
1186		- foreach ( $settings['tabs'] as $index => $item ) {
1187		- $tab_count = $index + 1;
1188		- $tab_title_id = 'e-n-tab-title-' . $widget_number . $tab_count;
1189		- $tab_id = empty( $item['element_id'] )
1190		- ? $tab_title_id
1191		- : $item['element_id'];
1192		-
1193		- $item_settings = [
1194		- 'index' => $index,
1195		- 'tab_count' => $tab_count,
1196		- 'tab_id' => $tab_id,
1197		- 'tab_title_id' => $tab_title_id,
1198		- 'container_id' => 'e-n-tab-content-' . $widget_number . $tab_count,
1199		- 'widget_number' => $widget_number,
1200		- 'item' => $item,
1201		- 'settings' => $settings,
1202		- ];
1203		-
1204		- $this->tab_item_settings[] = $item_settings;
1205		-
1206		- $this->render_tab_titles_html( $item_settings );
1207		- }
1208		- ?>
	1213	+ <?php echo $tab_titles_html;// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
1209	1214	</div>
1210	1215	<div class="e-n-tabs-content">
1211		- <?php $this->render_tab_containers_html( $settings ); ?>
	1216	+ <?php echo $tab_containers_html;// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
1212	1217	</div>
1213	1218	</div>
1214	1219	<?php
1215	1220	}
1216	1221
1217		- protected function get_initial_config(): array {
1218		- return array_merge( parent::get_initial_config(), [
1219		- 'support_improved_repeaters' => true,
1220		- 'target_container' => [ '.e-n-tabs-heading' ],
1221		- 'node' => 'button',
1222		- ] );
1223		- }
1224		-
1225		- protected function content_template_single_repeater_item() {
1226		- ?>
1227		- <#
1228		- const tabIndex = view.collection.length,
1229		- elementUid = view.getIDInt().toString(),
1230		- item = data,
1231		- hoverAnimationSetting = view?.container?.settings?.attributes?.hover_animation;
1232		- hoverAnimationClass = hoverAnimationSetting
1233		- ? `elementor-animation-${ hoverAnimationSetting }`
1234		- : '';
1235		- #>
1236		- <?php $this->content_template_single_item( '{{ tabIndex }}', '{{ item }}', '{{ elementUid }}', '{{ hoverAnimationClass }}' );
1237		- }
1238		-
1239	1222	protected function content_template() {
1240	1223	?>
1241		- <# const elementUid = view.getIDInt().toString(); #>
	1224	+ <# const elementUid = view.getIDInt().toString().substr( 0, 3 ); #>
1242	1225	<div class="e-n-tabs" data-widget-number="{{ elementUid }}" aria-label="<?php echo esc_html__( 'Tabs. Open items with Enter or Space, close with Escape and navigate using the Arrow keys.', 'elementor' ); ?>">
1243	1226	<# if ( settings['tabs'] ) { #>
1244	1227	<div class="e-n-tabs-heading" role="tablist">
1245	1228	<# _.each( settings['tabs'], function( item, index ) {
1246		- const tabIndex = index,
1247		- hoverAnimationSetting = settings['hover_animation'],
1248		- hoverAnimationClass = hoverAnimationSetting
1249		- ? `elementor-animation-${ hoverAnimationSetting }`
1250		- : '';
	1229	+ const tabCount = index + 1,
	1230	+ tabUid = elementUid + tabCount,
	1231	+ tabWrapperKey = tabUid,
	1232	+ tabTitleKey = 'tab-title-' + tabUid,
	1233	+ tabIconKey = 'tab-icon-' + tabUid,
	1234	+ tabIcon = elementor.helpers.renderIcon( view, item.tab_icon, { 'aria-hidden': true }, 'i' , 'object' ),
	1235	+ hoverAnimationClass = settings['hover_animation'] ? `elementor-animation-${ settings['hover_animation'] }` : '';
	1236	+
	1237	+ let tabActiveIcon = tabIcon,
	1238	+ tabId = 'e-n-tab-title-' + tabUid;
	1239	+
	1240	+ if ( '' !== item.tab_icon_active.value ) {
	1241	+ tabActiveIcon = elementor.helpers.renderIcon( view, item.tab_icon_active, { 'aria-hidden': true }, 'i' , 'object' );
	1242	+ }
	1243	+
	1244	+ if ( '' !== item.element_id ) {
	1245	+ tabId = item.element_id;
	1246	+ }
	1247	+
	1248	+ view.addRenderAttribute( tabWrapperKey, {
	1249	+ 'id': tabId,
	1250	+ 'class': [ 'e-n-tab-title',hoverAnimationClass ],
	1251	+ 'data-tab-index': tabCount,
	1252	+ 'role': 'tab',
	1253	+ 'aria-selected': 1 === tabCount ? 'true' : 'false',
	1254	+ 'tabindex': 1 === tabCount ? '0' : '-1',
	1255	+ 'aria-controls': 'e-n-tab-content-' + tabUid,
	1256	+ 'style': '--n-tabs-title-order: ' + tabCount + ';',
	1257	+ } );
	1258	+
	1259	+ view.addRenderAttribute( tabTitleKey, {
	1260	+ 'class': [ 'e-n-tab-title-text' ],
	1261	+ 'data-binding-type': 'repeater-item',
	1262	+ 'data-binding-repeater-name': 'tabs',
	1263	+ 'data-binding-setting': [ 'tab_title' ],
	1264	+ 'data-binding-index': tabCount,
	1265	+ } );
	1266	+
	1267	+ view.addRenderAttribute( tabIconKey, {
	1268	+ 'class': [ 'e-n-tab-icon' ],
	1269	+ 'data-binding-type': 'repeater-item',
	1270	+ 'data-binding-repeater-name': 'tabs',
	1271	+ 'data-binding-setting': [ 'tab_icon.value', 'tab_icon_active.value' ],
	1272	+ 'data-binding-index': tabCount,
	1273	+ } );
1251	1274	#>
1252		- <?php $this->content_template_single_item( '{{ tabIndex }}', '{{ item }}', '{{ elementUid }}', '{{ hoverAnimationClass }}' ); ?>
	1275	+ <button {{{ view.getRenderAttributeString( tabWrapperKey ) }}}>
	1276	+ <span {{{ view.getRenderAttributeString( tabIconKey ) }}}>{{{ tabIcon.value }}}{{{ tabActiveIcon.value }}}</span>
	1277	+ <span {{{ view.getRenderAttributeString( tabTitleKey ) }}}>{{{ item.tab_title }}}</span>
	1278	+ </button>
1253	1279	<# } ); #>
1254	1280	</div>
1255	1281	<div class="e-n-tabs-content"></div>
1256	1282	<# } #>
1257	1283	</div>
1258		- <?php
1259		- }
1260		-
1261		- private function content_template_single_item( $tab_index, $item, $element_uid, $hover_animation_class ) {
1262		- ?>
1263		- <#
1264		- const tabCount = tabIndex + 1,
1265		- tabTitleId = 'e-n-tab-title-' + elementUid + tabCount,
1266		- tabId = item.element_id
1267		- ? item.element_id
1268		- : tabTitleId,
1269		- tabUid = elementUid + tabCount,
1270		- tabIcon = elementor.helpers.renderIcon( view, item.tab_icon, { 'aria-hidden': true }, 'i' , 'object' ),
1271		- activeTabIcon = item.tab_icon_active.value
1272		- ? elementor.helpers.renderIcon( view, item.tab_icon_active, { 'aria-hidden': true }, 'i' , 'object' )
1273		- : tabIcon,
1274		- escapedHoverAnimationClass = _.escape( hoverAnimationClass );
1275		-
1276		- view.addRenderAttribute( 'tab-title', {
1277		- 'id': tabId,
1278		- 'data-tab-title-id': tabTitleId,
1279		- 'class': [ 'e-n-tab-title',escapedHoverAnimationClass ],
1280		- 'data-tab-index': tabCount,
1281		- 'role': 'tab',
1282		- 'aria-selected': 1 === tabCount ? 'true' : 'false',
1283		- 'tabindex': 1 === tabCount ? '0' : '-1',
1284		- 'aria-controls': 'e-n-tab-content-' + tabUid,
1285		- 'style': '--n-tabs-title-order: ' + tabCount + ';',
1286		- }, null, true );
1287		-
1288		- view.addRenderAttribute( 'tab-title-text', {
1289		- 'class': [ 'e-n-tab-title-text' ],
1290		- 'data-binding-type': 'repeater-item',
1291		- 'data-binding-repeater-name': 'tabs',
1292		- 'data-binding-setting': [ 'tab_title', 'element_id' ],
1293		- 'data-binding-index': tabCount,
1294		- 'data-binding-config': JSON.stringify({
1295		- 'element_id': {
1296		- attr: 'id',
1297		- selector: 'button',
1298		- editType: 'attribute',
1299		- },
1300		- 'tab_title': {
1301		- editType: 'text',
1302		- },
1303		- }),
1304		- }, null, true );
1305		-
1306		- view.addRenderAttribute( 'tab-icon', {
1307		- 'class': [ 'e-n-tab-icon' ],
1308		- 'data-binding-type': 'repeater-item',
1309		- 'data-binding-repeater-name': 'tabs',
1310		- 'data-binding-index': tabCount,
1311		- }, null, true );
1312		- #>
1313		-
1314		- <button {{{ view.getRenderAttributeString( 'tab-title' ) }}}>
1315		- <# if ( !! item.tab_icon.value ) { #>
1316		- <span {{{ view.getRenderAttributeString( 'tab-icon' ) }}}>{{{ tabIcon.value }}}{{{ activeTabIcon.value }}}</span>
1317		- <# } #>
1318		-
1319		- <span {{{ view.getRenderAttributeString( 'tab-title-text' ) }}}>{{{ item.tab_title }}}</span>
1320		- </button>
1321	1284	<?php
1322	1285	}
1323	1286
1324	1287	/**