PluginProbe
UiCore Elements – Free widgets and templates for Elementor / 1.3.17
UiCore Elements – Free widgets and templates for Elementor v1.3.17
1.3.17 1.3.16 trunk 1.0.0 1.0.1 1.0.10 1.0.11 1.0.12 1.0.13 1.0.14 1.0.15 1.0.16 1.0.2 1.0.3 1.0.4 1.0.5 1.0.6 1.0.7 1.0.8 1.0.9 1.2.0 1.2.1 1.2.2 1.2.3 1.2.4 All 41 releases
← All changes | includes/widgets/tabs.php +1351 -1355 1.0.7 → 1.3.17 View file →
@@ -1,5 +1,6 @@
1 1 <?php
2 +
2 3 namespace UiCoreElements;
3 4
4 5 use Elementor\Controls_Manager;
5 6 use Elementor\Repeater;
@@ -21,26 +22,31 @@
21 22 * @author Lucas Marini Falbo <lucas@uicore.co>
22 23 * @since 1.0.6
23 24 */
24 25
25 -class Tabs extends UiCoreNestedWidget {
26 +class Tabs extends UiCoreNestedWidget
27 +{
26 28
27 - public function get_name() {
28 - return 'uicore-tabs';
29 - }
30 - public function get_title() {
31 - return esc_html__( 'Tabs', 'uicore-elements' );
32 - }
33 - public function get_icon() {
34 - return 'eicon-tabs ui-e-widget';
35 - }
29 + public function get_name()
30 + {
31 + return 'uicore-tabs';
32 + }
33 + public function get_title()
34 + {
35 + return esc_html__('Tabs', 'uicore-elements');
36 + }
37 + public function get_icon()
38 + {
39 + return 'eicon-tabs ui-e-widget';
40 + }
36 41 public function get_categories()
37 42 {
38 43 return ['uicore'];
39 44 }
40 - public function get_keywords() {
41 - return [ 'tabs', 'tab', 'content' ];
42 - }
45 + public function get_keywords()
46 + {
47 + return ['tabs', 'tab', 'content', 'nested'];
48 + }
43 49 public function get_styles()
44 50 {
45 51 return ['tabs'];
46 52 }
@@ -45,1513 +51,1503 @@
45 51 return ['tabs'];
46 52 }
47 53 public function get_scripts()
48 54 {
49 - return ['tabs'];
55 + return ['tabs'];
50 56 }
57 + // TODO: remove after Optmized Markup experiment is merged to the core
58 + public function has_widget_inner_wrapper(): bool
59 + {
60 + return true;
61 + }
51 62
52 63 // Nested required functions
53 - protected function tab_content_container( int $index ) {
54 - return [
55 - 'elType' => 'container',
56 - 'settings' => [
57 - '_title' => sprintf( __( 'Tab #%s', 'uicore-elements' ), $index ),
58 - 'content_width' => 'full',
59 - ],
60 - ];
61 - }
62 - protected function get_default_children_elements() {
63 - return [
64 - $this->tab_content_container( 1 ),
65 - $this->tab_content_container( 2 ),
66 - $this->tab_content_container( 3 ),
67 - ];
68 - }
69 - protected function get_default_repeater_title_setting_key() {
70 - return 'tab_title';
71 - }
72 - protected function get_default_children_title() {
73 - return esc_html__( 'Tab #%d', 'uicore-elements' );
74 - }
75 - protected function get_default_children_placeholder_selector() {
76 - return '.ui-e-tabs-content';
77 - }
64 + protected function tab_content_container(int $index)
65 + {
66 + return [
67 + 'elType' => 'container',
68 + 'settings' => [
69 + /* translators: %s: Tab index */
70 + '_title' => sprintf(__('Tab #%s', 'uicore-elements'), $index),
71 + 'content_width' => 'full',
72 + ],
73 + ];
74 + }
75 + protected function get_default_children_elements()
76 + {
77 + return [
78 + $this->tab_content_container(1),
79 + $this->tab_content_container(2),
80 + $this->tab_content_container(3),
81 + ];
82 + }
83 + protected function get_default_repeater_title_setting_key()
84 + {
85 + return 'tab_title';
86 + }
87 + protected function get_default_children_title()
88 + {
89 + /* translators: %d: Tab index */
90 + return esc_html__('Tab #%d', 'uicore-elements');
91 + }
92 + protected function get_default_children_placeholder_selector()
93 + {
94 + return '.ui-e-tabs-content';
95 + }
78 96
79 - protected function register_controls() {
97 + protected function register_controls()
98 + {
80 99
81 - if( !Plugin::$instance->experiments->is_feature_active('nested-elements') ){
82 - $this->nesting_fallback('controls');
83 - return;
84 - }
100 + if (!Plugin::$instance->experiments->is_feature_active('nested-elements')) {
101 + $this->nesting_fallback('controls');
102 + return;
103 + }
85 104
86 - // Helper properties
87 - $start = is_rtl() ? 'right' : 'left';
88 - $end = is_rtl() ? 'left' : 'right';
89 - $start_logical = is_rtl() ? 'end' : 'start';
90 - $end_logical = is_rtl() ? 'start' : 'end';
91 - $heading_selector = '{{WRAPPER}} > .elementor-widget-container > .ui-e-tabs > .ui-e-tabs-heading';
92 - $content_selector = ':where( {{WRAPPER}} > .elementor-widget-container > .ui-e-tabs > .ui-e-tabs-content ) > .e-con';
105 + // Helper properties
106 + $start = is_rtl() ? 'right' : 'left';
107 + $end = is_rtl() ? 'left' : 'right';
108 + $start_logical = is_rtl() ? 'end' : 'start';
109 + $end_logical = is_rtl() ? 'start' : 'end';
110 + $heading_selector = '{{WRAPPER}} > .elementor-widget-container > .ui-e-tabs > .ui-e-tabs-heading'; // TODO: .elementor-widget-container will be gone soon
111 + $content_selector = ':where( {{WRAPPER}} > .elementor-widget-container > .ui-e-tabs > .ui-e-tabs-content ) > .e-con'; // TODO: .elementor-widget-container will be gone soon
93 112
94 113 $this->start_controls_section(
95 - 'section_tabs',
96 - [
97 - 'label' => esc_html__( 'Tabs', 'uicore-elements' ),
98 - 'tab' => Controls_Manager::TAB_CONTENT,
99 - ]
100 - );
114 + 'section_tabs',
115 + [
116 + 'label' => esc_html__('Tabs', 'uicore-elements'),
117 + 'tab' => Controls_Manager::TAB_CONTENT,
118 + ]
119 + );
101 120
102 - $repeater = new Repeater();
121 + $repeater = new Repeater();
103 122
104 - $repeater->add_control( 'tab_title', [
105 - 'label' => esc_html__( 'Title', 'uicore-elements' ),
123 + $repeater->add_control('tab_title', [
124 + 'label' => esc_html__('Title', 'uicore-elements'),
125 + 'type' => Controls_Manager::TEXT,
126 + 'default' => esc_html__('Tab Title', 'uicore-elements'),
127 + 'placeholder' => esc_html__('Tab Title', 'uicore-elements'),
128 + 'label_block' => true,
129 + 'dynamic' => [
130 + 'active' => true,
131 + ],
132 + ]);
133 +
134 + $repeater->add_control('tab_description', [
135 + 'label' => esc_html__('Description', 'uicore-elements'),
136 + 'type' => Controls_Manager::TEXTAREA,
137 + 'rows' => 2,
138 + 'placeholder' => esc_html__('Tab Title', 'uicore-elements'),
139 + 'label_block' => true,
140 + 'dynamic' => [
141 + 'active' => true,
142 + ],
143 + ]);
144 +
145 + $repeater->add_control(
146 + 'tab_icon',
147 + [
148 + 'label' => esc_html__('Icon', 'uicore-elements'),
149 + 'type' => Controls_Manager::ICONS,
150 + 'fa4compatibility' => 'icon',
151 + 'skin' => 'inline',
152 + 'label_block' => false,
153 + ]
154 + );
155 +
156 + $repeater->add_control(
157 + 'tab_icon_active',
158 + [
159 + 'label' => esc_html__('Active Icon', 'uicore-elements'),
160 + 'type' => Controls_Manager::ICONS,
161 + 'fa4compatibility' => 'icon',
162 + 'skin' => 'inline',
163 + 'label_block' => false,
164 + 'condition' => [
165 + 'tab_icon[value]!' => '',
166 + ],
167 + ]
168 + );
169 +
170 + $repeater->add_control(
171 + 'tab_id',
172 + [
173 + 'label' => esc_html__('CSS ID', 'uicore-elements'),
106 174 'type' => Controls_Manager::TEXT,
107 - 'default' => esc_html__( 'Tab Title', 'uicore-elements' ),
108 - 'placeholder' => esc_html__( 'Tab Title', 'uicore-elements' ),
109 - 'label_block' => true,
175 + 'default' => '',
176 + 'ai' => [
177 + 'active' => false,
178 + ],
110 179 'dynamic' => [
111 180 'active' => true,
112 181 ],
113 - ] );
182 + 'title' => esc_html__('Add your custom id WITHOUT the Pound key. e.g: my-id', 'uicore-elements'),
183 + 'style_transfer' => false,
184 + 'classes' => 'elementor-control-direction-ltr',
185 + ]
186 + );
114 187
115 - $repeater->add_control( 'tab_description', [
116 - 'label' => esc_html__( 'Description', 'uicore-elements' ),
117 - 'type' => Controls_Manager::TEXTAREA,
118 - 'rows' => 2,
119 - 'placeholder' => esc_html__( 'Tab Title', 'uicore-elements' ),
120 - 'label_block' => true,
121 - 'dynamic' => [
122 - 'active' => true,
188 + $this->add_control('tabs', [
189 + 'label' => esc_html__('Tabs Items', 'uicore-elements'),
190 + 'type' => Control_Nested_Repeater::CONTROL_TYPE,
191 + 'fields' => $repeater->get_controls(),
192 + 'default' => [
193 + [
194 + 'tab_title' => esc_html__('Tab #1', 'uicore-elements'),
123 195 ],
124 - ] );
125 -
126 - $repeater->add_control(
127 - 'tab_icon',
128 - [
129 - 'label' => esc_html__( 'Icon', 'uicore-elements' ),
130 - 'type' => Controls_Manager::ICONS,
131 - 'fa4compatibility' => 'icon',
132 - 'skin' => 'inline',
133 - 'label_block' => false,
134 - ]
135 - );
136 -
137 - $repeater->add_control(
138 - 'tab_icon_active',
139 - [
140 - 'label' => esc_html__( 'Active Icon', 'uicore-elements' ),
141 - 'type' => Controls_Manager::ICONS,
142 - 'fa4compatibility' => 'icon',
143 - 'skin' => 'inline',
144 - 'label_block' => false,
145 - 'condition' => [
146 - 'tab_icon[value]!' => '',
147 - ],
148 - ]
149 - );
150 -
151 - $repeater->add_control(
152 - 'tab_id',
153 196 [
154 - 'label' => esc_html__( 'CSS ID', 'uicore-elements' ),
155 - 'type' => Controls_Manager::TEXT,
156 - 'default' => '',
157 - 'ai' => [
158 - 'active' => false,
159 - ],
160 - 'dynamic' => [
161 - 'active' => true,
162 - ],
163 - 'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'uicore-elements' ),
164 - 'style_transfer' => false,
165 - 'classes' => 'elementor-control-direction-ltr',
166 - ]
167 - );
168 -
169 - $this->add_control( 'tabs', [
170 - 'label' => esc_html__( 'Tabs Items', 'uicore-elements' ),
171 - 'type' => Control_Nested_Repeater::CONTROL_TYPE,
172 - 'fields' => $repeater->get_controls(),
173 - 'default' => [
174 - [
175 - 'tab_title' => esc_html__( 'Tab #1', 'uicore-elements' ),
176 - ],
177 - [
178 - 'tab_title' => esc_html__( 'Tab #2', 'uicore-elements' ),
179 - ],
180 - [
181 - 'tab_title' => esc_html__( 'Tab #3', 'uicore-elements' ),
182 - ],
197 + 'tab_title' => esc_html__('Tab #2', 'uicore-elements'),
183 198 ],
184 - 'title_field' => '{{{ tab_title }}}',
185 - 'button_text' => 'Add Tab',
186 - ] );
199 + [
200 + 'tab_title' => esc_html__('Tab #3', 'uicore-elements'),
201 + ],
202 + ],
203 + 'title_field' => '{{{ tab_title }}}',
204 + 'button_text' => 'Add Tab',
205 + ]);
187 206
188 - // Tabs position and alignment group values
189 - // TODO: check use and necessity of flex-shrink
190 - $styling_block_start = '--ui-e-tabs-direction: column; --ui-e-tabs-head-direction: row; --ui-e-tabs-head-width: initial; --ui-e-tabs-title-flex-basis: content; --ui-e-tabs-title-flex-shrink: initial;';
191 - $styling_block_end = '--ui-e-tabs-direction: column-reverse; --ui-e-tabs-head-direction: row; --ui-e-tabs-head-width: initial; --ui-e-tabs-title-flex-basis: content; --ui-e-tabs-title-flex-shrink: initial;';
192 - $styling_inline_end = '--ui-e-tabs-direction: row-reverse; --ui-e-tabs-head-direction: column; --ui-e-tabs-head-width: 240px; --ui-e-tabs-title-flex-basis: initial; --ui-e-tabs-title-flex-shrink: 0; --ui-e-tabs-title-width: 100%';
193 - $styling_inline_start = '--ui-e-tabs-direction: row; --ui-e-tabs-head-direction: column; --ui-e-tabs-head-width: 240px; --ui-e-tabs-title-flex-basis: initial; --ui-e-tabs-title-flex-shrink: 0; --ui-e-tabs-title-width: 100%';
207 + // Tabs position and alignment group values
208 + $styling_block_start = '--ui-e-tabs-direction: column; --ui-e-tabs-head-direction: row; --ui-e-tabs-head-width: initial; --ui-e-tabs-title-flex-basis: content; --ui-e-tabs-title-flex-shrink: initial;';
209 + $styling_block_end = '--ui-e-tabs-direction: column-reverse; --ui-e-tabs-head-direction: row; --ui-e-tabs-head-width: initial; --ui-e-tabs-title-flex-basis: content; --ui-e-tabs-title-flex-shrink: initial;';
210 + $styling_inline_end = '--ui-e-tabs-direction: row-reverse; --ui-e-tabs-head-direction: column; --ui-e-tabs-head-width: 240px; --ui-e-tabs-title-flex-basis: initial; --ui-e-tabs-title-flex-shrink: 0; --ui-e-tabs-title-width: 100%';
211 + $styling_inline_start = '--ui-e-tabs-direction: row; --ui-e-tabs-head-direction: column; --ui-e-tabs-head-width: 240px; --ui-e-tabs-title-flex-basis: initial; --ui-e-tabs-title-flex-shrink: 0; --ui-e-tabs-title-width: 100%';
194 212
195 - $this->add_responsive_control( 'tabs_direction', [
196 - 'label' => esc_html__( 'Tabs Direction', 'uicore-elements' ),
197 - 'type' => Controls_Manager::CHOOSE,
198 - 'options' => [
199 - 'block-start' => [
200 - 'title' => esc_html__( 'Above', 'uicore-elements' ),
201 - 'icon' => 'eicon-v-align-top',
202 - ],
203 - 'block-end' => [
204 - 'title' => esc_html__( 'Below', 'uicore-elements' ),
205 - 'icon' => 'eicon-v-align-bottom',
206 - ],
207 - 'inline-end' => [
208 - 'title' => esc_html__( 'After', 'uicore-elements' ),
209 - 'icon' => 'eicon-h-align-' . $end,
210 - ],
211 - 'inline-start' => [
212 - 'title' => esc_html__( 'Before', 'uicore-elements' ),
213 - 'icon' => 'eicon-h-align-' . $start,
214 - ],
215 - ],
216 - 'default' => 'block-start',
217 - 'separator' => 'before',
218 - 'selectors_dictionary' => [
219 - 'block-start' => $styling_block_start,
220 - 'block-end' => $styling_block_end,
221 - 'inline-end' => $styling_inline_end,
222 - 'inline-start' => $styling_inline_start,
223 - ],
224 - 'selectors' => [
225 - '{{WRAPPER}}' => '{{VALUE}}',
226 - ],
227 - ] );
213 + $this->add_responsive_control('tabs_direction', [
214 + 'label' => esc_html__('Tabs Direction', 'uicore-elements'),
215 + 'type' => Controls_Manager::CHOOSE,
216 + 'options' => [
217 + 'block-start' => [
218 + 'title' => esc_html__('Above', 'uicore-elements'),
219 + 'icon' => 'eicon-v-align-top',
220 + ],
221 + 'block-end' => [
222 + 'title' => esc_html__('Below', 'uicore-elements'),
223 + 'icon' => 'eicon-v-align-bottom',
224 + ],
225 + 'inline-end' => [
226 + 'title' => esc_html__('After', 'uicore-elements'),
227 + 'icon' => 'eicon-h-align-' . $end,
228 + ],
229 + 'inline-start' => [
230 + 'title' => esc_html__('Before', 'uicore-elements'),
231 + 'icon' => 'eicon-h-align-' . $start,
232 + ],
233 + ],
234 + 'default' => 'block-start',
235 + 'separator' => 'before',
236 + 'selectors_dictionary' => [
237 + 'block-start' => $styling_block_start,
238 + 'block-end' => $styling_block_end,
239 + 'inline-end' => $styling_inline_end,
240 + 'inline-start' => $styling_inline_start,
241 + ],
242 + 'selectors' => [
243 + '{{WRAPPER}}' => '{{VALUE}}',
244 + ],
245 + ]);
228 246
229 - $this->add_responsive_control( 'tabs_width', [
230 - 'label' => esc_html__( 'Tabs Width', 'uicore-elements' ),
231 - 'type' => Controls_Manager::SLIDER,
232 - 'range' => [
233 - '%' => [
234 - 'min' => 10,
235 - 'max' => 50,
236 - ],
237 - 'px' => [
238 - 'min' => 20,
239 - 'max' => 600,
240 - ],
241 - ],
242 - 'default' => [
243 - 'unit' => '%',
244 - ],
245 - 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
246 - 'selectors' => [
247 - '{{WRAPPER}}' => '--ui-e-tabs-head-width: {{SIZE}}{{UNIT}}',
248 - ],
249 - 'condition' => [
250 - 'tabs_direction' => [
251 - 'inline-start',
252 - 'inline-end',
253 - ],
254 - ],
255 - ] );
247 + $this->add_responsive_control('tabs_width', [
248 + 'label' => esc_html__('Tabs Width', 'uicore-elements'),
249 + 'type' => Controls_Manager::SLIDER,
250 + 'range' => [
251 + '%' => [
252 + 'min' => 10,
253 + 'max' => 50,
254 + ],
255 + 'px' => [
256 + 'min' => 20,
257 + 'max' => 600,
258 + ],
259 + ],
260 + 'default' => [
261 + 'unit' => '%',
262 + ],
263 + 'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
264 + 'selectors' => [
265 + '{{WRAPPER}}' => '--ui-e-tabs-head-width: {{SIZE}}{{UNIT}}',
266 + ],
267 + 'condition' => [
268 + 'tabs_direction' => [
269 + 'inline-start',
270 + 'inline-end',
271 + ],
272 + ],
273 + ]);
256 274
257 - $this->add_responsive_control( 'tabs_justify_horizontal', [
258 - 'label' => esc_html__( 'Justify', 'uicore-elements' ),
259 - 'type' => Controls_Manager::CHOOSE,
260 - 'options' => [
261 - 'start' => [
262 - 'title' => esc_html__( 'Start', 'uicore-elements' ),
263 - 'icon' => "eicon-align-$start_logical-h",
264 - ],
265 - 'center' => [
266 - 'title' => esc_html__( 'Center', 'uicore-elements' ),
267 - 'icon' => 'eicon-align-center-h',
268 - ],
269 - 'end' => [
270 - 'title' => esc_html__( 'End', 'uicore-elements' ),
271 - 'icon' => "eicon-align-$end_logical-h",
272 - ],
273 - 'stretch' => [
274 - 'title' => esc_html__( 'Stretch', 'uicore-elements' ),
275 - 'icon' => 'eicon-align-stretch-h',
276 - ],
277 - ],
278 - 'selectors_dictionary' => [
279 - 'start' => 'justify-content: flex-start; --ui-e-tabs-title-flex-width: initial; --ui-e-tabs-title-justify-content: center; --ui-e-tabs-title-flex-grow: 0;',
280 - 'center' => 'justify-content: center; --ui-e-tabs-title-flex-width: initial; --ui-e-tabs-title-justify-content: center; --ui-e-tabs-title-flex-grow: 0;',
281 - 'end' => 'justify-content: flex-end; --ui-e-tabs-title-flex-width: initial; --ui-e-tabs-title-justify-content: center; --ui-e-tabs-title-flex-grow: 0;',
282 - 'stretch' => 'justify-content: initial; --ui-e-tabs-title-flex-width: 100%; --ui-e-tabs-title-justify-content: center; --ui-e-tabs-title-flex-grow: 1;',
283 - ],
284 - 'selectors' => [
285 - '{{WRAPPER}} .ui-e-tabs-heading' => '{{VALUE}}',
286 - ],
287 - 'condition' => [
288 - 'tabs_direction' => [
289 - 'block-start',
290 - 'block-end',
291 - ],
292 - ],
293 - 'frontend_available' => true,
294 - ] );
275 + $this->add_responsive_control('tabs_justify_horizontal', [
276 + 'label' => esc_html__('Justify', 'uicore-elements'),
277 + 'type' => Controls_Manager::CHOOSE,
278 + 'options' => [
279 + 'start' => [
280 + 'title' => esc_html__('Start', 'uicore-elements'),
281 + 'icon' => "eicon-align-$start_logical-h",
282 + ],
283 + 'center' => [
284 + 'title' => esc_html__('Center', 'uicore-elements'),
285 + 'icon' => 'eicon-align-center-h',
286 + ],
287 + 'end' => [
288 + 'title' => esc_html__('End', 'uicore-elements'),
289 + 'icon' => "eicon-align-$end_logical-h",
290 + ],
291 + 'stretch' => [
292 + 'title' => esc_html__('Stretch', 'uicore-elements'),
293 + 'icon' => 'eicon-align-stretch-h',
294 + ],
295 + ],
296 + 'selectors_dictionary' => [
297 + 'start' => 'justify-content: flex-start; --ui-e-tabs-title-flex-width: initial; --ui-e-tabs-title-justify-content: center; --ui-e-tabs-title-flex-grow: 0;',
298 + 'center' => 'justify-content: center; --ui-e-tabs-title-flex-width: initial; --ui-e-tabs-title-justify-content: center; --ui-e-tabs-title-flex-grow: 0;',
299 + 'end' => 'justify-content: flex-end; --ui-e-tabs-title-flex-width: initial; --ui-e-tabs-title-justify-content: center; --ui-e-tabs-title-flex-grow: 0;',
300 + 'stretch' => 'justify-content: initial; --ui-e-tabs-title-flex-width: 100%; --ui-e-tabs-title-justify-content: center; --ui-e-tabs-title-flex-grow: 1;',
301 + ],
302 + 'selectors' => [
303 + '{{WRAPPER}} .ui-e-tabs-heading' => '{{VALUE}}',
304 + ],
305 + 'condition' => [
306 + 'tabs_direction' => [
307 + 'block-start',
308 + 'block-end',
309 + ],
310 + ],
311 + 'frontend_available' => true,
312 + ]);
295 313
296 - $this->add_responsive_control( 'tabs_justify_vertical', [
297 - 'label' => esc_html__( 'Tabs alignment', 'uicore-elements' ),
298 - 'type' => Controls_Manager::CHOOSE,
299 - 'options' => [
300 - 'start' => [
301 - 'title' => esc_html__( 'Start', 'uicore-elements' ),
302 - 'icon' => 'eicon-align-start-v',
303 - ],
304 - 'center' => [
305 - 'title' => esc_html__( 'Center', 'uicore-elements' ),
306 - 'icon' => 'eicon-align-center-v',
307 - ],
308 - 'end' => [
309 - 'title' => esc_html__( 'End', 'uicore-elements' ),
310 - 'icon' => 'eicon-align-end-v',
311 - ],
312 - 'stretch' => [
313 - 'title' => esc_html__( 'Stretch', 'uicore-elements' ),
314 - 'icon' => 'eicon-align-stretch-v',
315 - ],
316 - ],
317 - 'selectors_dictionary' => [
318 - 'start' => 'justify-content: flex-start; --ui-e-tabs-title-height: initial; --ui-e-tabs-title-justify-content: initial; --ui-e-tabs-heading-wrap: wrap; --ui-e-tabs-title-flex-basis: content; --ui-e-tabs-title-flex-grow: 0;',
319 - 'center' => 'justify-content: center; --ui-e-tabs-title-height: initial; --ui-e-tabs-title-justify-content: initial; --ui-e-tabs-heading-wrap: wrap; --ui-e-tabs-title-flex-basis: content; --ui-e-tabs-title-flex-grow: 0;',
320 - 'end' => 'justify-content: flex-end; --ui-e-tabs-title-height: initial; --ui-e-tabs-title-justify-content: initial; --ui-e-tabs-heading-wrap: wrap; --ui-e-tabs-title-flex-basis: content; --ui-e-tabs-title-flex-grow: 0;',
321 - 'stretch' => 'justify-content: flex-start; --ui-e-tabs-title-height: 100%; --ui-e-tabs-title-justify-content: center; --ui-e-tabs-heading-wrap: nowrap; --ui-e-tabs-title-flex-basis: auto; --ui-e-tabs-title-flex-grow: 1;',
322 - ],
323 - 'selectors' => [
324 - '{{WRAPPER}} .ui-e-tabs-heading' => '{{VALUE}}',
325 - ],
326 - 'condition' => [
327 - 'tabs_direction' => [
328 - 'inline-start',
329 - 'inline-end',
330 - ],
331 - ],
332 - ] );
314 + $this->add_responsive_control('tabs_justify_vertical', [
315 + 'label' => esc_html__('Tabs alignment', 'uicore-elements'),
316 + 'type' => Controls_Manager::CHOOSE,
317 + 'options' => [
318 + 'start' => [
319 + 'title' => esc_html__('Start', 'uicore-elements'),
320 + 'icon' => 'eicon-align-start-v',
321 + ],
322 + 'center' => [
323 + 'title' => esc_html__('Center', 'uicore-elements'),
324 + 'icon' => 'eicon-align-center-v',
325 + ],
326 + 'end' => [
327 + 'title' => esc_html__('End', 'uicore-elements'),
328 + 'icon' => 'eicon-align-end-v',
329 + ],
330 + 'stretch' => [
331 + 'title' => esc_html__('Stretch', 'uicore-elements'),
332 + 'icon' => 'eicon-align-stretch-v',
333 + ],
334 + ],
335 + 'selectors_dictionary' => [
336 + 'start' => 'justify-content: flex-start; --ui-e-tabs-title-height: initial; --ui-e-tabs-title-justify-content: initial; --ui-e-tabs-heading-wrap: wrap; --ui-e-tabs-title-flex-basis: content; --ui-e-tabs-title-flex-grow: 0;',
337 + 'center' => 'justify-content: center; --ui-e-tabs-title-height: initial; --ui-e-tabs-title-justify-content: initial; --ui-e-tabs-heading-wrap: wrap; --ui-e-tabs-title-flex-basis: content; --ui-e-tabs-title-flex-grow: 0;',
338 + 'end' => 'justify-content: flex-end; --ui-e-tabs-title-height: initial; --ui-e-tabs-title-justify-content: initial; --ui-e-tabs-heading-wrap: wrap; --ui-e-tabs-title-flex-basis: content; --ui-e-tabs-title-flex-grow: 0;',
339 + 'stretch' => 'justify-content: flex-start; --ui-e-tabs-title-height: 100%; --ui-e-tabs-title-justify-content: center; --ui-e-tabs-heading-wrap: nowrap; --ui-e-tabs-title-flex-basis: auto; --ui-e-tabs-title-flex-grow: 1;',
340 + ],
341 + 'selectors' => [
342 + '{{WRAPPER}} .ui-e-tabs-heading' => '{{VALUE}}',
343 + ],
344 + 'condition' => [
345 + 'tabs_direction' => [
346 + 'inline-start',
347 + 'inline-end',
348 + ],
349 + ],
350 + ]);
333 351
334 - $styling_icon_above = '--ui-e-tabs-title-direction: column; --ui-e-tabs-icon-order: initial;';
335 - $styling_icon_before = '--ui-e-tabs-title-direction: row; --ui-e-tabs-icon-order: initial';
336 - $styling_icon_after = '--ui-e-tabs-title-direction: row; --ui-e-tabs-icon-order: 1;';
352 + $styling_icon_above = '--ui-e-tabs-title-direction: column; --ui-e-tabs-icon-order: initial;';
353 + $styling_icon_before = '--ui-e-tabs-title-direction: row; --ui-e-tabs-icon-order: initial';
354 + $styling_icon_after = '--ui-e-tabs-title-direction: row; --ui-e-tabs-icon-order: 1;';
337 355
338 - $this->add_responsive_control( 'icon_position', [
339 - 'label' => esc_html__( 'Icon Position', 'uicore-elements' ),
340 - 'type' => Controls_Manager::CHOOSE,
341 - 'options' => [
342 - 'above' => [
343 - 'title' => esc_html__( 'Before', 'uicore-elements' ),
344 - 'icon' => 'eicon-v-align-top',
345 - ],
346 - 'before' => [
347 - 'title' => esc_html__( 'Before', 'uicore-elements' ),
348 - 'icon' => 'eicon-h-align-' . $start,
349 - ],
350 - 'after' => [
351 - 'title' => esc_html__( 'After', 'uicore-elements' ),
352 - 'icon' => 'eicon-h-align-' . $end,
353 - ],
354 - ],
355 - 'default' => 'before',
356 - 'selectors_dictionary' => [
357 - 'above' => $styling_icon_above,
358 - 'before' => $styling_icon_before,
359 - 'after' => $styling_icon_after,
360 - ],
361 - 'separator' => 'before',
362 - 'selectors' => [
363 - '{{WRAPPER}}' => '{{VALUE}}',
364 - ],
365 - ] );
356 + $this->add_responsive_control('icon_position', [
357 + 'label' => esc_html__('Icon Position', 'uicore-elements'),
358 + 'type' => Controls_Manager::CHOOSE,
359 + 'options' => [
360 + 'above' => [
361 + 'title' => esc_html__('Before', 'uicore-elements'),
362 + 'icon' => 'eicon-v-align-top',
363 + ],
364 + 'before' => [
365 + 'title' => esc_html__('Before', 'uicore-elements'),
366 + 'icon' => 'eicon-h-align-' . $start,
367 + ],
368 + 'after' => [
369 + 'title' => esc_html__('After', 'uicore-elements'),
370 + 'icon' => 'eicon-h-align-' . $end,
371 + ],
372 + ],
373 + 'default' => 'before',
374 + 'selectors_dictionary' => [
375 + 'above' => $styling_icon_above,
376 + 'before' => $styling_icon_before,
377 + 'after' => $styling_icon_after,
378 + ],
379 + 'separator' => 'before',
380 + 'selectors' => [
381 + '{{WRAPPER}}' => '{{VALUE}}',
382 + ],
383 + ]);
366 384
367 - $this->add_responsive_control( 'title_alignment', [
368 - 'label' => esc_html__( 'Content Alignment', 'uicore-elements' ),
369 - 'type' => Controls_Manager::CHOOSE,
370 - 'options' => [
371 - 'start' => [
372 - 'title' => esc_html__( 'Start', 'uicore-elements' ),
373 - 'icon' => 'eicon-text-align-left',
374 - ],
375 - 'center' => [
376 - 'title' => esc_html__( 'Center', 'uicore-elements' ),
377 - 'icon' => 'eicon-text-align-center',
378 - ],
379 - 'end' => [
380 - 'title' => esc_html__( 'End', 'uicore-elements' ),
381 - 'icon' => 'eicon-text-align-right',
382 - ],
383 - 'justify' => [
384 - 'title' => esc_html__( 'Justify', 'uicore-elements' ),
385 - 'icon' => 'eicon-text-align-justify',
386 - ],
387 - ],
388 - 'selectors_dictionary' => [
389 - 'start' => '--ui-e-tabs-title-justify: flex-start; --ui-e-tabs-title-align: flex-start; --ui-e-tabs-title-text-align: start;',
390 - 'center' => '--ui-e-tabs-title-justify: center; --ui-e-tabs-title-align: flex-start; --ui-e-tabs-title-text-align: center;',
391 - 'end' => '--ui-e-tabs-title-justify: flex-end; --ui-e-tabs-title-align: flex-start; --ui-e-tabs-title-text-align: end;',
392 - 'justify' => '--ui-e-tabs-title-justify: space-between; --ui-e-tabs-title-align: flex-start; --ui-e-tabs-title-text-align: start;',
393 - ],
394 - 'condition' => [
395 - 'icon_position!' => 'above',
385 + $this->add_responsive_control('title_alignment', [
386 + 'label' => esc_html__('Content Alignment', 'uicore-elements'),
387 + 'type' => Controls_Manager::CHOOSE,
388 + 'options' => [
389 + 'start' => [
390 + 'title' => esc_html__('Start', 'uicore-elements'),
391 + 'icon' => 'eicon-text-align-left',
396 392 ],
397 - 'selectors' => [
398 - '{{WRAPPER}}' => '{{VALUE}}',
399 - ],
400 - ] );
393 + 'center' => [
394 + 'title' => esc_html__('Center', 'uicore-elements'),
395 + 'icon' => 'eicon-text-align-center',
396 + ],
397 + 'end' => [
398 + 'title' => esc_html__('End', 'uicore-elements'),
399 + 'icon' => 'eicon-text-align-right',
400 + ],
401 + 'justify' => [
402 + 'title' => esc_html__('Justify', 'uicore-elements'),
403 + 'icon' => 'eicon-text-align-justify',
404 + ],
405 + ],
406 + 'selectors_dictionary' => [
407 + 'start' => '--ui-e-tabs-title-justify: flex-start; --ui-e-tabs-title-align: flex-start; --ui-e-tabs-title-text-align: start;',
408 + 'center' => '--ui-e-tabs-title-justify: center; --ui-e-tabs-title-align: flex-start; --ui-e-tabs-title-text-align: center;',
409 + 'end' => '--ui-e-tabs-title-justify: flex-end; --ui-e-tabs-title-align: flex-start; --ui-e-tabs-title-text-align: end;',
410 + 'justify' => '--ui-e-tabs-title-justify: space-between; --ui-e-tabs-title-align: flex-start; --ui-e-tabs-title-text-align: start;',
411 + ],
412 + 'condition' => [
413 + 'icon_position!' => 'above',
414 + ],
415 + 'selectors' => [
416 + '{{WRAPPER}}' => '{{VALUE}}',
417 + ],
418 + ]);
401 419
402 - $this->add_responsive_control( 'title_alignment_above', [
403 - 'label' => esc_html__( 'Content Alignment', 'uicore-elements' ),
404 - 'type' => Controls_Manager::CHOOSE,
405 - 'options' => [
406 - 'start' => [
407 - 'title' => esc_html__( 'Start', 'uicore-elements' ),
408 - 'icon' => 'eicon-text-align-left',
409 - ],
410 - 'center' => [
411 - 'title' => esc_html__( 'Center', 'uicore-elements' ),
412 - 'icon' => 'eicon-text-align-center',
413 - ],
414 - 'end' => [
415 - 'title' => esc_html__( 'End', 'uicore-elements' ),
416 - 'icon' => 'eicon-text-align-right',
417 - ],
418 - ],
419 - 'selectors_dictionary' => [
420 - 'start' => '--ui-e-tabs-title-justify: flex-start; --ui-e-tabs-title-align: flex-start; --ui-e-tabs-title-text-align: start;',
421 - 'center' => '--ui-e-tabs-title-justify: flex-start; --ui-e-tabs-title-align: center; --ui-e-tabs-title-text-align: center;',
422 - 'end' => '--ui-e-tabs-title-justify: flex-start; --ui-e-tabs-title-align: flex-end; --ui-e-tabs-title-text-align: end;',
423 - ],
424 - 'condition' => [
425 - 'icon_position' => 'above',
420 + $this->add_responsive_control('title_alignment_above', [
421 + 'label' => esc_html__('Content Alignment', 'uicore-elements'),
422 + 'type' => Controls_Manager::CHOOSE,
423 + 'options' => [
424 + 'start' => [
425 + 'title' => esc_html__('Start', 'uicore-elements'),
426 + 'icon' => 'eicon-text-align-left',
426 427 ],
427 - 'selectors' => [
428 - '{{WRAPPER}}' => '{{VALUE}}',
429 - ],
430 - ] );
428 + 'center' => [
429 + 'title' => esc_html__('Center', 'uicore-elements'),
430 + 'icon' => 'eicon-text-align-center',
431 + ],
432 + 'end' => [
433 + 'title' => esc_html__('End', 'uicore-elements'),
434 + 'icon' => 'eicon-text-align-right',
435 + ],
436 + ],
437 + 'selectors_dictionary' => [
438 + 'start' => '--ui-e-tabs-title-justify: flex-start; --ui-e-tabs-title-align: flex-start; --ui-e-tabs-title-text-align: start;',
439 + 'center' => '--ui-e-tabs-title-justify: flex-start; --ui-e-tabs-title-align: center; --ui-e-tabs-title-text-align: center;',
440 + 'end' => '--ui-e-tabs-title-justify: flex-start; --ui-e-tabs-title-align: flex-end; --ui-e-tabs-title-text-align: end;',
441 + ],
442 + 'condition' => [
443 + 'icon_position' => 'above',
444 + ],
445 + 'selectors' => [
446 + '{{WRAPPER}}' => '{{VALUE}}',
447 + ],
448 + ]);
431 449
432 - $this->end_controls_section();
450 + $this->end_controls_section();
433 451
434 - $this->start_controls_section(
435 - 'section_tabs_responsive',
436 - [
437 - 'label' => esc_html__( 'Additional Settings', 'uicore-elements' ),
438 - ]
439 - );
452 + $this->start_controls_section(
453 + 'section_tabs_responsive',
454 + [
455 + 'label' => esc_html__('Additional Settings', 'uicore-elements'),
456 + ]
457 + );
440 458
441 - // Build breakpoint options
442 - $dropdown_options = [
443 - 'none' => esc_html__( 'None', 'uicore-elements' ),
444 - ];
445 - $excluded_breakpoints = [
446 - 'laptop',
447 - 'tablet_extra',
448 - 'widescreen',
449 - ];
459 + // Build breakpoint options
460 + $dropdown_options = [
461 + 'none' => esc_html__('None', 'uicore-elements'),
462 + ];
463 + $excluded_breakpoints = [
464 + 'laptop',
465 + 'tablet_extra',
466 + 'widescreen',
467 + ];
450 468
451 - foreach ( Plugin::$instance->breakpoints->get_active_breakpoints() as $breakpoint_key => $breakpoint_instance ) {
452 - // Exclude the larger breakpoints from the dropdown selector.
453 - if ( in_array( $breakpoint_key, $excluded_breakpoints, true ) ) {
454 - continue;
455 - }
469 + foreach (Plugin::$instance->breakpoints->get_active_breakpoints() as $breakpoint_key => $breakpoint_instance) {
470 + // Exclude the larger breakpoints from the dropdown selector.
471 + if (in_array($breakpoint_key, $excluded_breakpoints, true)) {
472 + continue;
473 + }
456 474
457 - $dropdown_options[ $breakpoint_key ] = sprintf(
458 - /* translators: 1: Breakpoint label, 2: `>` character, 3: Breakpoint value. */
459 - esc_html__( '%1$s (%2$s %3$dpx)', 'uicore-elements' ),
460 - $breakpoint_instance->get_label(),
461 - '>',
462 - $breakpoint_instance->get_value()
463 - );
464 - }
475 + $dropdown_options[$breakpoint_key] = sprintf(
476 + /* translators: 1: Breakpoint label, 2: `>` character, 3: Breakpoint value. */
477 + esc_html__('%1$s (%2$s %3$dpx)', 'uicore-elements'),
478 + $breakpoint_instance->get_label(),
479 + '>',
480 + $breakpoint_instance->get_value()
481 + );
482 + }
465 483
466 - $this->add_control(
467 - 'breakpoint_selector',
468 - [
469 - 'label' => esc_html__( 'Breakpoint', 'uicore-elements' ),
470 - 'type' => Controls_Manager::SELECT,
471 - 'description' => esc_html__( 'Note: Choose the breakpoint where tabs automatically switch to a vertical (“accordion”) layout.', 'uicore-elements' ),
472 - 'options' => $dropdown_options,
473 - 'default' => 'mobile',
474 - 'prefix_class' => 'ui-e-tabs-',
475 - ]
476 - );
484 + $this->add_control(
485 + 'breakpoint_selector',
486 + [
487 + 'label' => esc_html__('Breakpoint', 'uicore-elements'),
488 + 'type' => Controls_Manager::SELECT,
489 + 'description' => esc_html__('Note: Choose the breakpoint where tabs automatically switch to a vertical (“accordion”) layout.', 'uicore-elements'),
490 + 'options' => $dropdown_options,
491 + 'default' => 'mobile',
492 + 'prefix_class' => 'ui-e-tabs-',
493 + ]
494 + );
477 495
478 - $this->add_control(
479 - 'show_description',
480 - [
481 - 'label' => esc_html__( 'Toggle Description', 'uicore-elements' ),
482 - 'type' => Controls_Manager::SWITCHER,
483 - 'label_on' => esc_html__( 'Show', 'uicore-elements' ),
484 - 'label_off' => esc_html__( 'Hide', 'uicore-elements' ),
485 - 'description' => esc_html__('Show descriptions only for active items.', 'uicore-elements'),
486 - 'return_value' => 'yes',
487 - ]
488 - );
496 + $this->add_control(
497 + 'show_description',
498 + [
499 + 'label' => esc_html__('Toggle Description', 'uicore-elements'),
500 + 'type' => Controls_Manager::SWITCHER,
501 + 'label_on' => esc_html__('Show', 'uicore-elements'),
502 + 'label_off' => esc_html__('Hide', 'uicore-elements'),
503 + 'description' => esc_html__('Show descriptions only for active items.', 'uicore-elements'),
504 + 'return_value' => 'yes',
505 + ]
506 + );
489 507
490 - $this->end_controls_section();
508 + $this->end_controls_section();
491 509
492 - $this->start_controls_section(
493 - 'section_tabs_style',
494 - [
495 - 'label' => esc_html__( 'Tabs', 'uicore-elements' ),
496 - 'tab' => Controls_Manager::TAB_STYLE,
497 - ]
498 - );
510 + $this->start_controls_section(
511 + 'section_tabs_style',
512 + [
513 + 'label' => esc_html__('Tabs', 'uicore-elements'),
514 + 'tab' => Controls_Manager::TAB_STYLE,
515 + ]
516 + );
499 517
500 - $this->add_responsive_control( 'tabs_title_space_between', [
501 - 'label' => esc_html__( 'Gap between tabs', 'uicore-elements' ),
502 - 'type' => Controls_Manager::SLIDER,
503 - 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
504 - 'range' => [
505 - 'px' => [
506 - 'max' => 100,
507 - ],
508 - 'em' => [
509 - 'max' => 40,
510 - ],
511 - 'rem' => [
512 - 'max' => 40,
513 - ],
514 - ],
515 - 'default' => [
516 - 'size' => 10,
517 - 'unit' => 'px',
518 - ],
519 - 'selectors' => [
520 - '{{WRAPPER}}' => '--ui-e-tabs-title-gap: {{SIZE}}{{UNIT}}',
521 - ],
522 - ] );
518 + $this->add_responsive_control('tabs_title_space_between', [
519 + 'label' => esc_html__('Gap between tabs', 'uicore-elements'),
520 + 'type' => Controls_Manager::SLIDER,
521 + 'size_units' => ['px', 'em', 'rem', 'custom'],
522 + 'range' => [
523 + 'px' => [
524 + 'max' => 100,
525 + ],
526 + 'em' => [
527 + 'max' => 40,
528 + ],
529 + 'rem' => [
530 + 'max' => 40,
531 + ],
532 + ],
533 + 'default' => [
534 + 'size' => 10,
535 + 'unit' => 'px',
536 + ],
537 + 'selectors' => [
538 + '{{WRAPPER}}' => '--ui-e-tabs-title-gap: {{SIZE}}{{UNIT}}',
539 + ],
540 + ]);
523 541
524 - $this->add_responsive_control( 'tabs_title_spacing', [
525 - 'label' => esc_html__( 'Distance from content', 'uicore-elements' ),
526 - 'type' => Controls_Manager::SLIDER,
527 - 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
528 - 'range' => [
529 - 'px' => [
530 - 'max' => 100,
531 - ],
532 - 'em' => [
533 - 'max' => 40,
534 - ],
535 - 'rem' => [
536 - 'max' => 40,
537 - ],
538 - ],
539 - 'selectors' => [
540 - '{{WRAPPER}}' => '--ui-e-tabs-gap: {{SIZE}}{{UNIT}}',
541 - ],
542 - ] );
542 + $this->add_responsive_control('tabs_title_spacing', [
543 + 'label' => esc_html__('Distance from content', 'uicore-elements'),
544 + 'type' => Controls_Manager::SLIDER,
545 + 'size_units' => ['px', 'em', 'rem', 'custom'],
546 + 'range' => [
547 + 'px' => [
548 + 'max' => 100,
549 + ],
550 + 'em' => [
551 + 'max' => 40,
552 + ],
553 + 'rem' => [
554 + 'max' => 40,
555 + ],
556 + ],
557 + 'selectors' => [
558 + '{{WRAPPER}}' => '--ui-e-tabs-gap: {{SIZE}}{{UNIT}}',
559 + ],
560 + ]);
543 561
544 - $this->start_controls_tabs( 'tabs_title_style' );
562 + $this->start_controls_tabs('tabs_title_style');
545 563
546 - $this->start_controls_tab(
547 - 'tabs_title_normal',
548 - [
549 - 'label' => esc_html__( 'Normal', 'uicore-elements' ),
550 - ]
551 - );
564 + $this->start_controls_tab(
565 + 'tabs_title_normal',
566 + [
567 + 'label' => esc_html__('Normal', 'uicore-elements'),
568 + ]
569 + );
552 570
553 - $this->add_group_control(
554 - Group_Control_Background::get_type(),
555 - [
556 - 'name' => 'tabs_title_background_color',
557 - 'types' => [ 'classic', 'gradient' ],
558 - 'exclude' => [ 'image' ],
559 - 'selector' => "{$heading_selector} > .ui-e-tab-title[aria-selected=\"false\"]",
560 - 'fields_options' => [
561 - 'color' => [
562 - 'label' => esc_html__( 'Background Color', 'uicore-elements' ),
563 - 'selectors' => [
564 - '{{SELECTOR}}' => 'background: {{VALUE}}',
565 - ],
566 - ],
567 - ],
568 - ]
569 - );
571 + $this->add_group_control(
572 + Group_Control_Background::get_type(),
573 + [
574 + 'name' => 'tabs_title_background_color',
575 + 'types' => ['classic', 'gradient'],
576 + 'exclude' => ['image'],
577 + 'selector' => "{$heading_selector} > .ui-e-tab-title[aria-selected=\"false\"]",
578 + 'fields_options' => [
579 + 'color' => [
580 + 'label' => esc_html__('Background Color', 'uicore-elements'),
581 + 'selectors' => [
582 + '{{SELECTOR}}' => 'background: {{VALUE}}',
583 + ],
584 + ],
585 + ],
586 + ]
587 + );
570 588
571 - $this->add_group_control(
572 - Group_Control_Border::get_type(),
573 - [
574 - 'name' => 'tabs_title_border',
575 - 'selector' => "{$heading_selector} > .ui-e-tab-title[aria-selected=\"false\"]",
576 - 'fields_options' => [
577 - 'color' => [
578 - 'label' => esc_html__( 'Border Color', 'uicore-elements' ),
579 - ],
580 - 'width' => [
581 - 'label' => esc_html__( 'Border Width', 'uicore-elements' ),
582 - ],
583 - ],
584 - ]
585 - );
589 + $this->add_group_control(
590 + Group_Control_Border::get_type(),
591 + [
592 + 'name' => 'tabs_title_border',
593 + 'selector' => "{$heading_selector} > .ui-e-tab-title[aria-selected=\"false\"]",
594 + 'fields_options' => [
595 + 'color' => [
596 + 'label' => esc_html__('Border Color', 'uicore-elements'),
597 + ],
598 + 'width' => [
599 + 'label' => esc_html__('Border Width', 'uicore-elements'),
600 + ],
601 + ],
602 + ]
603 + );
586 604
587 - $this->add_group_control(
588 - Group_Control_Box_Shadow::get_type(),
589 - [
590 - 'name' => 'tabs_title_box_shadow',
591 - 'label' => esc_html__( 'Shadow', 'uicore-elements' ),
592 - 'separator' => 'after',
593 - 'selector' => "{$heading_selector} > .ui-e-tab-title[aria-selected=\"false\"]",
594 - ]
595 - );
605 + $this->add_group_control(
606 + Group_Control_Box_Shadow::get_type(),
607 + [
608 + 'name' => 'tabs_title_box_shadow',
609 + 'label' => esc_html__('Shadow', 'uicore-elements'),
610 + 'separator' => 'after',
611 + 'selector' => "{$heading_selector} > .ui-e-tab-title[aria-selected=\"false\"]",
612 + ]
613 + );
596 614
597 - $this->end_controls_tab();
615 + $this->end_controls_tab();
598 616
599 - $this->start_controls_tab(
600 - 'tabs_title_hover',
601 - [
602 - 'label' => esc_html__( 'Hover', 'uicore-elements' ),
603 - ]
604 - );
617 + $this->start_controls_tab(
618 + 'tabs_title_hover',
619 + [
620 + 'label' => esc_html__('Hover', 'uicore-elements'),
621 + ]
622 + );
605 623
606 - $this->add_group_control(
607 - Group_Control_Background::get_type(),
608 - [
609 - 'name' => 'tabs_title_background_color_hover',
610 - 'types' => [ 'classic', 'gradient' ],
611 - 'exclude' => [ 'image' ],
612 - 'selector' => "{$heading_selector} > .ui-e-tab-title[aria-selected=\"false\"]:hover",
613 - 'fields_options' => [
614 - 'background' => [
615 - 'default' => 'classic',
616 - ],
617 - 'color' => [
618 - 'global' => [
619 - 'default' => Global_Colors::COLOR_ACCENT,
620 - ],
621 - 'label' => esc_html__( 'Background Color', 'uicore-elements' ),
622 - 'selectors' => [
623 - '{{SELECTOR}}' => 'background: {{VALUE}};',
624 - ],
625 - ],
626 - ],
627 - ]
628 - );
624 + $this->add_group_control(
625 + Group_Control_Background::get_type(),
626 + [
627 + 'name' => 'tabs_title_background_color_hover',
628 + 'types' => ['classic', 'gradient'],
629 + 'exclude' => ['image'],
630 + 'selector' => "{$heading_selector} > .ui-e-tab-title[aria-selected=\"false\"]:hover",
631 + 'fields_options' => [
632 + 'background' => [
633 + 'default' => 'classic',
634 + ],
635 + 'color' => [
636 + 'default' => 'var(--e-global-color-uicore_accent)',
637 + 'label' => esc_html__('Background Color', 'uicore-elements'),
638 + 'selectors' => [
639 + '{{SELECTOR}}' => 'background: {{VALUE}};',
640 + ],
641 + ],
642 + ],
643 + ]
644 + );
629 645
630 - $this->add_group_control(
631 - Group_Control_Border::get_type(),
632 - [
633 - 'name' => 'tabs_title_border_hover',
634 - 'selector' => "{$heading_selector} > .ui-e-tab-title[aria-selected=\"false\"]:hover",
635 - 'fields_options' => [
636 - 'color' => [
637 - 'label' => esc_html__( 'Border Color', 'uicore-elements' ),
638 - ],
639 - 'width' => [
640 - 'label' => esc_html__( 'Border Width', 'uicore-elements' ),
641 - ],
642 - ],
643 - ]
644 - );
646 + $this->add_group_control(
647 + Group_Control_Border::get_type(),
648 + [
649 + 'name' => 'tabs_title_border_hover',
650 + 'selector' => "{$heading_selector} > .ui-e-tab-title[aria-selected=\"false\"]:hover",
651 + 'fields_options' => [
652 + 'color' => [
653 + 'label' => esc_html__('Border Color', 'uicore-elements'),
654 + ],
655 + 'width' => [
656 + 'label' => esc_html__('Border Width', 'uicore-elements'),
657 + ],
658 + ],
659 + ]
660 + );
645 661
646 - $this->add_group_control(
647 - Group_Control_Box_Shadow::get_type(),
648 - [
649 - 'name' => 'tabs_title_box_shadow_hover',
650 - 'label' => esc_html__( 'Shadow', 'uicore-elements' ),
651 - 'separator' => 'after',
652 - 'selector' => "{$heading_selector} > .ui-e-tab-title[aria-selected=\"false\"]:hover",
653 - ]
654 - );
662 + $this->add_group_control(
663 + Group_Control_Box_Shadow::get_type(),
664 + [
665 + 'name' => 'tabs_title_box_shadow_hover',
666 + 'label' => esc_html__('Shadow', 'uicore-elements'),
667 + 'separator' => 'after',
668 + 'selector' => "{$heading_selector} > .ui-e-tab-title[aria-selected=\"false\"]:hover",
669 + ]
670 + );
655 671
656 - $this->add_control(
657 - 'hover_animation',
658 - [
659 - 'label' => esc_html__( 'Hover Animation', 'uicore-elements' ),
660 - 'type' => Controls_Manager::HOVER_ANIMATION,
661 - ]
662 - );
672 + $this->add_control(
673 + 'hover_animation',
674 + [
675 + 'label' => esc_html__('Hover Animation', 'uicore-elements'),
676 + 'type' => Controls_Manager::HOVER_ANIMATION,
677 + ]
678 + );
663 679
664 - $this->add_control(
665 - 'tabs_title_transition_duration',
666 - [
667 - 'label' => esc_html__( 'Transition Duration', 'uicore-elements' ) . ' (s)',
668 - 'type' => Controls_Manager::SLIDER,
669 - 'selectors' => [
670 - '{{WRAPPER}}' => '--ui-e-tabs-title-transition: {{SIZE}}s',
671 - ],
672 - 'range' => [
673 - 'px' => [
674 - 'min' => 0,
675 - 'max' => 3,
676 - 'step' => 0.1,
677 - ],
678 - ],
679 - ]
680 - );
680 + $this->add_control(
681 + 'tabs_title_transition_duration',
682 + [
683 + 'label' => esc_html__('Transition Duration', 'uicore-elements') . ' (s)',
684 + 'type' => Controls_Manager::SLIDER,
685 + 'selectors' => [
686 + '{{WRAPPER}}' => '--ui-e-tabs-title-transition: {{SIZE}}s',
687 + ],
688 + 'range' => [
689 + 'px' => [
690 + 'min' => 0,
691 + 'max' => 3,
692 + 'step' => 0.1,
693 + ],
694 + ],
695 + ]
696 + );
681 697
682 - $this->end_controls_tab();
698 + $this->end_controls_tab();
683 699
684 - $this->start_controls_tab(
685 - 'tabs_title_active',
686 - [
687 - 'label' => esc_html__( 'Active', 'uicore-elements' ),
688 - ]
689 - );
700 + $this->start_controls_tab(
701 + 'tabs_title_active',
702 + [
703 + 'label' => esc_html__('Active', 'uicore-elements'),
704 + ]
705 + );
690 706
691 - $this->add_group_control(
692 - Group_Control_Background::get_type(),
693 - [
694 - 'name' => 'tabs_title_background_color_active',
695 - 'types' => [ 'classic', 'gradient' ],
696 - 'exclude' => [ 'image' ],
697 - 'selector' => "{$heading_selector} > .ui-e-tab-title[aria-selected=\"true\"]",
698 - 'fields_options' => [
699 - 'background' => [
700 - 'default' => 'classic',
701 - ],
702 - 'color' => [
703 - 'global' => [
704 - 'default' => Global_Colors::COLOR_ACCENT,
705 - ],
706 - 'label' => esc_html__( 'Background Color', 'uicore-elements' ),
707 - 'selectors' => [
708 - '{{SELECTOR}}' => 'background: {{VALUE}};',
709 - ],
710 - ],
711 - ],
712 - ]
713 - );
707 + $this->add_group_control(
708 + Group_Control_Background::get_type(),
709 + [
710 + 'name' => 'tabs_title_background_color_active',
711 + 'types' => ['classic', 'gradient'],
712 + 'exclude' => ['image'],
713 + 'selector' => "{$heading_selector} > .ui-e-tab-title[aria-selected=\"true\"]",
714 + 'fields_options' => [
715 + 'background' => [
716 + 'default' => 'classic',
717 + ],
718 + 'color' => [
719 + 'default' => 'var(--e-global-color-uicore_accent)',
720 + 'label' => esc_html__('Background Color', 'uicore-elements'),
721 + 'selectors' => [
722 + '{{SELECTOR}}' => 'background: {{VALUE}};',
723 + ],
724 + ],
725 + ],
726 + ]
727 + );
714 728
715 - $this->add_group_control(
716 - Group_Control_Border::get_type(),
717 - [
718 - 'name' => 'tabs_title_border_active',
719 - 'selector' => "{$heading_selector} > .ui-e-tab-title[aria-selected=\"true\"]",
720 - 'fields_options' => [
721 - 'color' => [
722 - 'label' => esc_html__( 'Border Color', 'uicore-elements' ),
723 - ],
724 - 'width' => [
725 - 'label' => esc_html__( 'Border Width', 'uicore-elements' ),
726 - ],
727 - ],
728 - ]
729 - );
729 + $this->add_group_control(
730 + Group_Control_Border::get_type(),
731 + [
732 + 'name' => 'tabs_title_border_active',
733 + 'selector' => "{$heading_selector} > .ui-e-tab-title[aria-selected=\"true\"]",
734 + 'fields_options' => [
735 + 'color' => [
736 + 'label' => esc_html__('Border Color', 'uicore-elements'),
737 + ],
738 + 'width' => [
739 + 'label' => esc_html__('Border Width', 'uicore-elements'),
740 + ],
741 + ],
742 + ]
743 + );
730 744
731 - $this->add_group_control(
732 - Group_Control_Box_Shadow::get_type(),
733 - [
734 - 'name' => 'tabs_title_box_shadow_active',
735 - 'label' => esc_html__( 'Shadow', 'uicore-elements' ),
736 - 'selector' => "{$heading_selector} > .ui-e-tab-title[aria-selected=\"true\"]",
737 - ]
738 - );
745 + $this->add_group_control(
746 + Group_Control_Box_Shadow::get_type(),
747 + [
748 + 'name' => 'tabs_title_box_shadow_active',
749 + 'label' => esc_html__('Shadow', 'uicore-elements'),
750 + 'selector' => "{$heading_selector} > .ui-e-tab-title[aria-selected=\"true\"]",
751 + ]
752 + );
739 753
740 - $this->end_controls_tab();
754 + $this->end_controls_tab();
741 755
742 - $this->end_controls_tabs();
756 + $this->end_controls_tabs();
743 757
744 - $this->add_control(
745 - 'tabs_pill',
746 - [
747 - 'label' => esc_html__( 'Pill Style', 'uicore-elements' ),
748 - 'type' => Controls_Manager::SWITCHER,
749 - 'return_value' => 'yes',
750 - 'prefix_class' => 'ui-e-pill-tabs-',
751 - 'condition' => [
752 - 'tabs_direction' => [
753 - 'block-start',
754 - 'block-end',
755 - ]
756 - ],
757 - 'separator' => 'before',
758 - ]
759 - );
758 + $this->add_control(
759 + 'tabs_pill',
760 + [
761 + 'label' => esc_html__('Pill Style', 'uicore-elements'),
762 + 'type' => Controls_Manager::SWITCHER,
763 + 'return_value' => 'yes',
764 + 'prefix_class' => 'ui-e-pill-tabs-',
765 + 'separator' => 'before',
766 + 'device_args' => [
767 + 'desktop' => [
768 + 'condition' => [
769 + 'tabs_direction' => ['block-start', 'block-end'],
770 + ],
771 + ],
772 + 'mobile' => [
773 + 'condition' => [
774 + 'tabs_direction' => ['block-start', 'block-end'],
775 + ]
776 + ],
777 + 'tablet' => [
778 + 'condition' => [
779 + 'tabs_direction' => ['block-start', 'block-end'],
780 + ]
781 + ]
782 + ],
783 + ]
784 + );
760 785
761 - $this->add_responsive_control(
762 - 'tabs_title_border_radius',
763 - [
764 - 'label' => esc_html__( 'Border Radius', 'uicore-elements' ),
765 - 'type' => Controls_Manager::DIMENSIONS,
766 - 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
767 - 'selectors' => [
768 - "{$heading_selector}" => '--ui-e-tab-border-top: {{TOP}}{{UNIT}}; --ui-e-tab-border-right: {{RIGHT}}{{UNIT}}; --ui-e-tab-border-bot: {{BOTTOM}}{{UNIT}}; --ui-e-tab-border-left: {{LEFT}}{{UNIT}};',
769 - ],
770 - ]
771 - );
786 + $this->add_responsive_control(
787 + 'tabs_title_border_radius',
788 + [
789 + 'label' => esc_html__('Border Radius', 'uicore-elements'),
790 + 'type' => Controls_Manager::DIMENSIONS,
791 + 'size_units' => ['px', '%', 'em', 'rem', 'custom'],
792 + 'selectors' => [
793 + "{$heading_selector}" => '--ui-e-tab-border-top: {{TOP}}{{UNIT}}; --ui-e-tab-border-right: {{RIGHT}}{{UNIT}}; --ui-e-tab-border-bot: {{BOTTOM}}{{UNIT}}; --ui-e-tab-border-left: {{LEFT}}{{UNIT}};',
794 + ],
795 + ]
796 + );
772 797
773 - $this->add_responsive_control(
774 - 'padding',
775 - [
776 - 'label' => esc_html__( 'Padding', 'uicore-elements' ),
777 - 'type' => Controls_Manager::DIMENSIONS,
778 - 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
779 - 'selectors' => [
780 - "{$heading_selector} > .ui-e-tab-title" => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
781 - ],
782 - ]
783 - );
798 + $this->add_responsive_control(
799 + 'padding',
800 + [
801 + 'label' => esc_html__('Padding', 'uicore-elements'),
802 + 'type' => Controls_Manager::DIMENSIONS,
803 + 'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
804 + 'selectors' => [
805 + "{$heading_selector} > .ui-e-tab-title" => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
806 + ],
807 + ]
808 + );
784 809
785 - $this->end_controls_section();
810 + $this->end_controls_section();
786 811
787 - $this->start_controls_section(
788 - 'section_title_style',
789 - [
790 - 'label' => esc_html__( 'Titles', 'uicore-elements' ),
791 - 'tab' => Controls_Manager::TAB_STYLE,
792 - ]
793 - );
812 + $this->start_controls_section(
813 + 'section_title_style',
814 + [
815 + 'label' => esc_html__('Titles', 'uicore-elements'),
816 + 'tab' => Controls_Manager::TAB_STYLE,
817 + ]
818 + );
794 819
795 - $this->add_group_control( Group_Control_Typography::get_type(), [
796 - 'name' => 'title_typography',
797 - 'global' => [
798 - 'default' => Global_Typography::TYPOGRAPHY_ACCENT,
799 - ],
800 - 'selector' => "{$heading_selector} .ui-e-tab-texts span",
801 - ] );
820 + $this->add_group_control(Group_Control_Typography::get_type(), [
821 + 'name' => 'title_typography',
822 + 'global' => [
823 + 'default' => Global_Typography::TYPOGRAPHY_ACCENT,
824 + ],
825 + 'selector' => "{$heading_selector} .ui-e-tab-texts span",
826 + ]);
802 827
803 - $this->start_controls_tabs( 'title_style' );
828 + $this->start_controls_tabs('title_style');
804 829
805 - $this->start_controls_tab(
806 - 'title_normal',
807 - [
808 - 'label' => esc_html__( 'Normal', 'uicore-elements' ),
809 - ]
810 - );
830 + $this->start_controls_tab(
831 + 'title_normal',
832 + [
833 + 'label' => esc_html__('Normal', 'uicore-elements'),
834 + ]
835 + );
811 836
812 - $this->add_control(
813 - 'title_text_color',
814 - [
815 - 'label' => esc_html__( 'Color', 'uicore-elements' ),
816 - 'type' => Controls_Manager::COLOR,
817 - 'selectors' => [
818 - "{$heading_selector} > .ui-e-tab-title[aria-selected=\"false\"] .ui-e-tab-texts > span" => 'color: {{VALUE}}',
819 - ],
820 - ]
821 - );
837 + $this->add_control(
838 + 'title_text_color',
839 + [
840 + 'label' => esc_html__('Color', 'uicore-elements'),
841 + 'type' => Controls_Manager::COLOR,
842 + 'selectors' => [
843 + "{$heading_selector} > .ui-e-tab-title[aria-selected=\"false\"] .ui-e-tab-texts > span" => 'color: {{VALUE}}',
844 + ],
845 + ]
846 + );
822 847
823 - $this->end_controls_tab();
848 + $this->end_controls_tab();
824 849
825 - $this->start_controls_tab(
826 - 'title_hover',
827 - [
828 - 'label' => esc_html__( 'Hover', 'uicore-elements' ),
829 - ]
830 - );
850 + $this->start_controls_tab(
851 + 'title_hover',
852 + [
853 + 'label' => esc_html__('Hover', 'uicore-elements'),
854 + ]
855 + );
831 856
832 - $this->add_control(
833 - 'title_text_color_hover',
834 - [
835 - 'label' => esc_html__( 'Color', 'uicore-elements' ),
836 - 'type' => Controls_Manager::COLOR,
837 - 'selectors' => [
838 - "{$heading_selector} > .ui-e-tab-title[aria-selected=\"false\"]:hover .ui-e-tab-texts > span" => 'color: {{VALUE}}',
839 - ],
840 - ]
841 - );
857 + $this->add_control(
858 + 'title_text_color_hover',
859 + [
860 + 'label' => esc_html__('Color', 'uicore-elements'),
861 + 'type' => Controls_Manager::COLOR,
862 + 'selectors' => [
863 + "{$heading_selector} > .ui-e-tab-title[aria-selected=\"false\"]:hover .ui-e-tab-texts > span" => 'color: {{VALUE}}',
864 + ],
865 + ]
866 + );
842 867
843 - $this->end_controls_tab();
868 + $this->end_controls_tab();
844 869
845 - $this->start_controls_tab(
846 - 'title_active',
847 - [
848 - 'label' => esc_html__( 'Active', 'uicore-elements' ),
849 - ]
850 - );
870 + $this->start_controls_tab(
871 + 'title_active',
872 + [
873 + 'label' => esc_html__('Active', 'uicore-elements'),
874 + ]
875 + );
851 876
852 - $this->add_control(
853 - 'title_text_color_active',
854 - [
855 - 'label' => esc_html__( 'Color', 'uicore-elements' ),
856 - 'type' => Controls_Manager::COLOR,
857 - 'selectors' => [
858 - "{$heading_selector} > .ui-e-tab-title[aria-selected=\"true\"] .ui-e-tab-texts > span" => 'color: {{VALUE}}',
859 - ],
860 - ]
861 - );
877 + $this->add_control(
878 + 'title_text_color_active',
879 + [
880 + 'label' => esc_html__('Color', 'uicore-elements'),
881 + 'type' => Controls_Manager::COLOR,
882 + 'selectors' => [
883 + "{$heading_selector} > .ui-e-tab-title[aria-selected=\"true\"] .ui-e-tab-texts > span" => 'color: {{VALUE}}',
884 + ],
885 + ]
886 + );
862 887
863 - $this->end_controls_tab();
888 + $this->end_controls_tab();
864 889
865 - $this->end_controls_tabs();
890 + $this->end_controls_tabs();
866 891
867 - $this->end_controls_section();
892 + $this->end_controls_section();
868 893
869 - $this->start_controls_section(
870 - 'section_description_style',
871 - [
872 - 'label' => esc_html__( 'Description', 'uicore-elements' ),
873 - 'tab' => Controls_Manager::TAB_STYLE,
874 - ]
875 - );
894 + $this->start_controls_section(
895 + 'section_description_style',
896 + [
897 + 'label' => esc_html__('Description', 'uicore-elements'),
898 + 'tab' => Controls_Manager::TAB_STYLE,
899 + ]
900 + );
876 901
877 - $this->add_group_control( Group_Control_Typography::get_type(), [
878 - 'name' => 'description_typography',
879 - 'global' => [
880 - 'default' => Global_Typography::TYPOGRAPHY_ACCENT,
881 - ],
882 - 'selector' => "{$heading_selector} .ui-e-tab-texts p",
883 - ] );
902 + $this->add_group_control(Group_Control_Typography::get_type(), [
903 + 'name' => 'description_typography',
904 + 'global' => [
905 + 'default' => Global_Typography::TYPOGRAPHY_ACCENT,
906 + ],
907 + 'selector' => "{$heading_selector} .ui-e-tab-texts p",
908 + ]);
884 909
885 - $this->add_responsive_control(
886 - 'description_spacing',
887 - [
888 - 'label' => esc_html__( 'Top Spacing', 'uicore-elements' ),
889 - 'type' => Controls_Manager::SLIDER,
890 - 'range' => [
891 - 'px' => [
892 - 'max' => 50,
893 - ],
894 - '%' => [
895 - 'max' => 50,
896 - 'step' => 0.1,
897 - ],
898 - ],
899 - 'default' => [
900 - 'size' => 0,
901 - 'unit' => 'px',
902 - ],
903 - 'size_units' => [ 'px', 'em', 'rem', '%'],
904 - 'selectors' => [
905 - "{$heading_selector} .ui-e-tab-texts > p" => 'margin-top: {{SIZE}}{{UNIT}}',
906 - ],
907 - ]
908 - );
910 + $this->add_responsive_control(
911 + 'description_spacing',
912 + [
913 + 'label' => esc_html__('Top Spacing', 'uicore-elements'),
914 + 'type' => Controls_Manager::SLIDER,
915 + 'range' => [
916 + 'px' => [
917 + 'max' => 50,
918 + ],
919 + '%' => [
920 + 'max' => 50,
921 + 'step' => 0.1,
922 + ],
923 + ],
924 + 'default' => [
925 + 'size' => 0,
926 + 'unit' => 'px',
927 + ],
928 + 'size_units' => ['px', 'em', 'rem', '%'],
929 + 'selectors' => [
930 + "{$heading_selector} .ui-e-tab-texts > p" => 'margin-top: {{SIZE}}{{UNIT}}',
931 + ],
932 + ]
933 + );
909 934
910 - $this->start_controls_tabs( 'description_style' );
935 + $this->start_controls_tabs('description_style');
911 936
912 - $this->start_controls_tab(
913 - 'description_normal',
914 - [
915 - 'label' => esc_html__( 'Normal', 'uicore-elements' ),
916 - ]
917 - );
937 + $this->start_controls_tab(
938 + 'description_normal',
939 + [
940 + 'label' => esc_html__('Normal', 'uicore-elements'),
941 + ]
942 + );
918 943
919 - $this->add_control(
920 - 'description_text_color',
921 - [
922 - 'label' => esc_html__( 'Color', 'uicore-elements' ),
923 - 'type' => Controls_Manager::COLOR,
924 - 'selectors' => [
925 - "{$heading_selector} > .ui-e-tab-title[aria-selected=\"false\"] .ui-e-tab-texts > p" => 'color: {{VALUE}}',
926 - ],
927 - ]
928 - );
944 + $this->add_control(
945 + 'description_text_color',
946 + [
947 + 'label' => esc_html__('Color', 'uicore-elements'),
948 + 'type' => Controls_Manager::COLOR,
949 + 'selectors' => [
950 + "{$heading_selector} > .ui-e-tab-title[aria-selected=\"false\"] .ui-e-tab-texts > p" => 'color: {{VALUE}}',
951 + ],
952 + ]
953 + );
929 954
930 - $this->end_controls_tab();
955 + $this->end_controls_tab();
931 956
932 - $this->start_controls_tab(
933 - 'description_hover',
934 - [
935 - 'label' => esc_html__( 'Hover', 'uicore-elements' ),
936 - ]
937 - );
957 + $this->start_controls_tab(
958 + 'description_hover',
959 + [
960 + 'label' => esc_html__('Hover', 'uicore-elements'),
961 + ]
962 + );
938 963
939 - $this->add_control(
940 - 'description_text_color_hover',
941 - [
942 - 'label' => esc_html__( 'Color', 'uicore-elements' ),
943 - 'type' => Controls_Manager::COLOR,
944 - 'selectors' => [
945 - "{$heading_selector} > .ui-e-tab-title[aria-selected=\"false\"]:hover .ui-e-tab-texts > p" => 'color: {{VALUE}}',
946 - ],
947 - ]
948 - );
964 + $this->add_control(
965 + 'description_text_color_hover',
966 + [
967 + 'label' => esc_html__('Color', 'uicore-elements'),
968 + 'type' => Controls_Manager::COLOR,
969 + 'selectors' => [
970 + "{$heading_selector} > .ui-e-tab-title[aria-selected=\"false\"]:hover .ui-e-tab-texts > p" => 'color: {{VALUE}}',
971 + ],
972 + ]
973 + );
949 974
950 - $this->end_controls_tab();
975 + $this->end_controls_tab();
951 976
952 - $this->start_controls_tab(
953 - 'description_active',
954 - [
955 - 'label' => esc_html__( 'Active', 'uicore-elements' ),
956 - ]
957 - );
977 + $this->start_controls_tab(
978 + 'description_active',
979 + [
980 + 'label' => esc_html__('Active', 'uicore-elements'),
981 + ]
982 + );
958 983
959 - $this->add_control(
960 - 'description_text_color_active',
961 - [
962 - 'label' => esc_html__( 'Color', 'uicore-elements' ),
963 - 'type' => Controls_Manager::COLOR,
964 - 'selectors' => [
965 - "{$heading_selector} > .ui-e-tab-title[aria-selected=\"true\"] .ui-e-tab-texts > p" => 'color: {{VALUE}}',
966 - ],
967 - ]
968 - );
984 + $this->add_control(
985 + 'description_text_color_active',
986 + [
987 + 'label' => esc_html__('Color', 'uicore-elements'),
988 + 'type' => Controls_Manager::COLOR,
989 + 'selectors' => [
990 + "{$heading_selector} > .ui-e-tab-title[aria-selected=\"true\"] .ui-e-tab-texts > p" => 'color: {{VALUE}}',
991 + ],
992 + ]
993 + );
969 994
970 - $this->end_controls_tab();
995 + $this->end_controls_tab();
971 996
972 - $this->end_controls_tabs();
997 + $this->end_controls_tabs();
973 998
974 - $this->end_controls_section();
999 + $this->end_controls_section();
975 1000
976 - $this->start_controls_section(
977 - 'icon_section_style',
978 - [
979 - 'label' => esc_html__( 'Icon', 'uicore-elements' ),
980 - 'tab' => Controls_Manager::TAB_STYLE,
981 - ]
982 - );
1001 + $this->start_controls_section(
1002 + 'icon_section_style',
1003 + [
1004 + 'label' => esc_html__('Icon', 'uicore-elements'),
1005 + 'tab' => Controls_Manager::TAB_STYLE,
1006 + ]
1007 + );
983 1008
984 - $this->add_responsive_control( 'icon_size', [
985 - 'label' => esc_html__( 'Size', 'uicore-elements' ),
986 - 'type' => Controls_Manager::SLIDER,
987 - 'range' => [
988 - 'px' => [
989 - 'max' => 100,
990 - ],
991 - 'em' => [
992 - 'max' => 10,
993 - ],
994 - 'rem' => [
995 - 'max' => 10,
996 - ],
997 - ],
998 - 'size_units' => [ 'px', 'em', 'rem', 'vw', 'custom' ],
999 - 'selectors' => [
1000 - '{{WRAPPER}}' => '--ui-e-tabs-icon-size: {{SIZE}}{{UNIT}}',
1001 - ],
1002 - ] );
1009 + $this->add_responsive_control('icon_size', [
1010 + 'label' => esc_html__('Size', 'uicore-elements'),
1011 + 'type' => Controls_Manager::SLIDER,
1012 + 'range' => [
1013 + 'px' => [
1014 + 'max' => 100,
1015 + ],
1016 + 'em' => [
1017 + 'max' => 10,
1018 + ],
1019 + 'rem' => [
1020 + 'max' => 10,
1021 + ],
1022 + ],
1023 + 'size_units' => ['px', 'em', 'rem', 'vw', 'custom'],
1024 + 'selectors' => [
1025 + '{{WRAPPER}}' => '--ui-e-tabs-icon-size: {{SIZE}}{{UNIT}}',
1026 + ],
1027 + ]);
1003 1028
1004 - $this->add_responsive_control( 'icon_spacing', [
1005 - 'label' => esc_html__( 'Spacing', 'uicore-elements' ),
1006 - 'type' => Controls_Manager::SLIDER,
1007 - 'range' => [
1008 - 'px' => [
1009 - 'max' => 200,
1010 - ],
1011 - 'vw' => [
1012 - 'max' => 50,
1013 - 'step' => 0.1,
1014 - ],
1015 - ],
1016 - 'size_units' => [ 'px', 'em', 'rem', 'vw', 'custom' ],
1017 - 'selectors' => [
1018 - '{{WRAPPER}} .ui-e-tab-title' => 'gap: {{SIZE}}{{UNIT}}',
1019 - ],
1020 - ] );
1029 + $this->add_responsive_control('icon_spacing', [
1030 + 'label' => esc_html__('Spacing', 'uicore-elements'),
1031 + 'type' => Controls_Manager::SLIDER,
1032 + 'range' => [
1033 + 'px' => [
1034 + 'max' => 200,
1035 + ],
1036 + 'vw' => [
1037 + 'max' => 50,
1038 + 'step' => 0.1,
1039 + ],
1040 + ],
1041 + 'size_units' => ['px', 'em', 'rem', 'vw', 'custom'],
1042 + 'selectors' => [
1043 + '{{WRAPPER}} .ui-e-tab-title' => 'gap: {{SIZE}}{{UNIT}}',
1044 + ],
1045 + ]);
1021 1046
1022 - $this->add_control(
1023 - 'icon_padding',
1024 - [
1025 - 'label' => esc_html__( 'Padding', 'uicore-elements' ),
1026 - 'type' => Controls_Manager::DIMENSIONS,
1027 - 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
1028 - 'selectors' => [
1029 - '{{WRAPPER}} .ui-e-tab-title .ui-e-tab-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1030 - ],
1031 - ]
1032 - );
1047 + $this->add_control(
1048 + 'icon_padding',
1049 + [
1050 + 'label' => esc_html__('Padding', 'uicore-elements'),
1051 + 'type' => Controls_Manager::DIMENSIONS,
1052 + 'size_units' => ['px', 'em', 'rem', 'custom'],
1053 + 'selectors' => [
1054 + '{{WRAPPER}} .ui-e-tab-title .ui-e-tab-icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1055 + ],
1056 + ]
1057 + );
1033 1058
1034 - $this->add_control(
1035 - 'icon_border_radius',
1036 - [
1037 - 'label' => esc_html__( 'Border Radius', 'uicore-elements' ),
1038 - 'type' => Controls_Manager::DIMENSIONS,
1039 - 'size_units' => [ 'px', 'em', 'rem', 'custom' ],
1040 - 'selectors' => [
1041 - '{{WRAPPER}} .ui-e-tab-title .ui-e-tab-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1042 - ],
1043 - ]
1044 - );
1059 + $this->add_control(
1060 + 'icon_border_radius',
1061 + [
1062 + 'label' => esc_html__('Border Radius', 'uicore-elements'),
1063 + 'type' => Controls_Manager::DIMENSIONS,
1064 + 'size_units' => ['px', 'em', 'rem', 'custom'],
1065 + 'selectors' => [
1066 + '{{WRAPPER}} .ui-e-tab-title .ui-e-tab-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1067 + ],
1068 + ]
1069 + );
1045 1070
1046 - $this->add_group_control(
1047 - Group_Control_Border::get_type(),
1048 - [
1049 - 'name' => 'icon_border',
1050 - 'selector' => '{{WRAPPER}} .ui-e-tab-title .ui-e-tab-icon',
1051 - ]
1052 - );
1071 + $this->add_group_control(
1072 + Group_Control_Border::get_type(),
1073 + [
1074 + 'name' => 'icon_border',
1075 + 'selector' => '{{WRAPPER}} .ui-e-tab-title .ui-e-tab-icon',
1076 + ]
1077 + );
1053 1078
1054 - $this->start_controls_tabs( 'icon_style_states' );
1079 + $this->start_controls_tabs('icon_style_states');
1055 1080
1056 - $this->start_controls_tab(
1057 - 'icon_section_normal',
1058 - [
1059 - 'label' => esc_html__( 'Normal', 'uicore-elements' ),
1060 - ]
1061 - );
1081 + $this->start_controls_tab(
1082 + 'icon_section_normal',
1083 + [
1084 + 'label' => esc_html__('Normal', 'uicore-elements'),
1085 + ]
1086 + );
1062 1087
1063 - $this->add_control( 'icon_color', [
1064 - 'label' => esc_html__( 'Color', 'uicore-elements' ),
1065 - 'type' => Controls_Manager::COLOR,
1066 - 'selectors' => [
1067 - '{{WRAPPER}} .ui-e-tab-title .ui-e-tab-icon > i' => 'color: {{VALUE}}',
1068 - '{{WRAPPER}} .ui-e-tab-title .ui-e-tab-icon > svg' => 'fill: {{VALUE}}',
1069 - ],
1070 - ] );
1088 + $this->add_control('icon_color', [
1089 + 'label' => esc_html__('Color', 'uicore-elements'),
1090 + 'type' => Controls_Manager::COLOR,
1091 + 'selectors' => [
1092 + '{{WRAPPER}} .ui-e-tab-title .ui-e-tab-icon > i' => 'color: {{VALUE}}',
1093 + '{{WRAPPER}} .ui-e-tab-title .ui-e-tab-icon > svg' => 'fill: {{VALUE}}',
1094 + ],
1095 + ]);
1071 1096
1072 - $this->add_control(
1073 - 'icon_background_color',
1074 - [
1075 - 'label' => esc_html__( 'Background Color', 'uicore-elements' ),
1076 - 'type' => Controls_Manager::COLOR,
1077 - 'selectors' => [
1078 - '{{WRAPPER}} .ui-e-tab-title .ui-e-tab-icon' => 'background-color: {{VALUE}}',
1079 - ],
1080 - ]
1081 - );
1097 + $this->add_control(
1098 + 'icon_background_color',
1099 + [
1100 + 'label' => esc_html__('Background Color', 'uicore-elements'),
1101 + 'type' => Controls_Manager::COLOR,
1102 + 'selectors' => [
1103 + '{{WRAPPER}} .ui-e-tab-title .ui-e-tab-icon' => 'background-color: {{VALUE}}',
1104 + ],
1105 + ]
1106 + );
1082 1107
1083 - $this->end_controls_tab();
1108 + $this->end_controls_tab();
1084 1109
1085 - $this->start_controls_tab(
1086 - 'icon_section_hover',
1087 - [
1088 - 'label' => esc_html__( 'Hover', 'uicore-elements' ),
1089 - ]
1090 - );
1110 + $this->start_controls_tab(
1111 + 'icon_section_hover',
1112 + [
1113 + 'label' => esc_html__('Hover', 'uicore-elements'),
1114 + ]
1115 + );
1091 1116
1092 - $this->add_control( 'icon_color_hover', [
1093 - 'label' => esc_html__( 'Color', 'uicore-elements' ),
1094 - 'type' => Controls_Manager::COLOR,
1095 - 'selectors' => [
1096 - '{{WRAPPER}} .ui-e-tab-title:hover .ui-e-tab-icon > i' => 'color: {{VALUE}}',
1097 - '{{WRAPPER}} .ui-e-tab-title:hover .ui-e-tab-icon > svg' => 'fill: {{VALUE}}',
1098 - ],
1099 - ] );
1117 + $this->add_control('icon_color_hover', [
1118 + 'label' => esc_html__('Color', 'uicore-elements'),
1119 + 'type' => Controls_Manager::COLOR,
1120 + 'selectors' => [
1121 + '{{WRAPPER}} .ui-e-tab-title:hover .ui-e-tab-icon > i' => 'color: {{VALUE}}',
1122 + '{{WRAPPER}} .ui-e-tab-title:hover .ui-e-tab-icon > svg' => 'fill: {{VALUE}}',
1123 + ],
1124 + ]);
1100 1125
1101 - $this->add_control(
1102 - 'icon_background_color_hover',
1103 - [
1104 - 'label' => esc_html__( 'Background Color', 'uicore-elements' ),
1105 - 'type' => Controls_Manager::COLOR,
1106 - 'selectors' => [
1107 - '{{WRAPPER}} .ui-e-tab-title:hover .ui-e-tab-icon' => 'background-color: {{VALUE}}',
1108 - ],
1109 - ]
1110 - );
1126 + $this->add_control(
1127 + 'icon_background_color_hover',
1128 + [
1129 + 'label' => esc_html__('Background Color', 'uicore-elements'),
1130 + 'type' => Controls_Manager::COLOR,
1131 + 'selectors' => [
1132 + '{{WRAPPER}} .ui-e-tab-title:hover .ui-e-tab-icon' => 'background-color: {{VALUE}}',
1133 + ],
1134 + ]
1135 + );
1111 1136
1112 - $this->end_controls_tab();
1137 + $this->end_controls_tab();
1113 1138
1114 - $this->start_controls_tab(
1115 - 'icon_section_active',
1116 - [
1117 - 'label' => esc_html__( 'Active', 'uicore-elements' ),
1118 - ]
1119 - );
1139 + $this->start_controls_tab(
1140 + 'icon_section_active',
1141 + [
1142 + 'label' => esc_html__('Active', 'uicore-elements'),
1143 + ]
1144 + );
1120 1145
1121 - $this->add_control( 'icon_color_active', [
1122 - 'label' => esc_html__( 'Color', 'uicore-elements' ),
1123 - 'type' => Controls_Manager::COLOR,
1124 - 'selectors' => [
1125 - '{{WRAPPER}} .ui-e-tab-title[aria-selected="true"] .ui-e-tab-icon > i' => 'color: {{VALUE}}',
1126 - '{{WRAPPER}} .ui-e-tab-title[aria-selected="true"] .ui-e-tab-icon > svg' => 'fill: {{VALUE}}',
1127 - ],
1128 - ] );
1146 + $this->add_control('icon_color_active', [
1147 + 'label' => esc_html__('Color', 'uicore-elements'),
1148 + 'type' => Controls_Manager::COLOR,
1149 + 'selectors' => [
1150 + '{{WRAPPER}} .ui-e-tab-title[aria-selected="true"] .ui-e-tab-icon > i' => 'color: {{VALUE}}',
1151 + '{{WRAPPER}} .ui-e-tab-title[aria-selected="true"] .ui-e-tab-icon > svg' => 'fill: {{VALUE}}',
1152 + ],
1153 + ]);
1129 1154
1130 - $this->add_control(
1131 - 'icon_background_color_active',
1132 - [
1133 - 'label' => esc_html__( 'Background Color', 'uicore-elements' ),
1134 - 'type' => Controls_Manager::COLOR,
1135 - 'selectors' => [
1136 - '{{WRAPPER}} .ui-e-tab-title[aria-selected="true"] .ui-e-tab-icon' => 'background-color: {{VALUE}}',
1137 - ],
1138 - ]
1139 - );
1155 + $this->add_control(
1156 + 'icon_background_color_active',
1157 + [
1158 + 'label' => esc_html__('Background Color', 'uicore-elements'),
1159 + 'type' => Controls_Manager::COLOR,
1160 + 'selectors' => [
1161 + '{{WRAPPER}} .ui-e-tab-title[aria-selected="true"] .ui-e-tab-icon' => 'background-color: {{VALUE}}',
1162 + ],
1163 + ]
1164 + );
1140 1165
1141 - $this->end_controls_tab();
1166 + $this->end_controls_tab();
1142 1167
1143 - $this->end_controls_tabs();
1168 + $this->end_controls_tabs();
1144 1169
1145 - $this->end_controls_section();
1170 + $this->end_controls_section();
1146 1171
1147 - $this->start_controls_section( 'section_box_style', [
1148 - 'label' => esc_html__( 'Content', 'uicore-elements' ),
1149 - 'tab' => Controls_Manager::TAB_STYLE,
1150 - ] );
1172 + $this->start_controls_section('section_box_style', [
1173 + 'label' => esc_html__('Content', 'uicore-elements'),
1174 + 'tab' => Controls_Manager::TAB_STYLE,
1175 + ]);
1151 1176
1152 - $this->add_group_control(
1153 - Group_Control_Background::get_type(),
1154 - [
1155 - 'name' => 'box_background_color',
1156 - 'types' => [ 'classic', 'gradient' ],
1157 - 'exclude' => [ 'image' ],
1158 - 'selector' => $content_selector,
1159 - 'fields_options' => [
1160 - 'color' => [
1161 - 'label' => esc_html__( 'Background Color', 'uicore-elements' ),
1162 - ],
1163 - ],
1164 - ]
1165 - );
1177 + $this->add_group_control(
1178 + Group_Control_Background::get_type(),
1179 + [
1180 + 'name' => 'box_background_color',
1181 + 'types' => ['classic', 'gradient'],
1182 + 'exclude' => ['image'],
1183 + 'selector' => $content_selector,
1184 + 'fields_options' => [
1185 + 'color' => [
1186 + 'label' => esc_html__('Background Color', 'uicore-elements'),
1187 + ],
1188 + ],
1189 + ]
1190 + );
1166 1191
1167 - $this->add_group_control(
1168 - Group_Control_Border::get_type(),
1169 - [
1170 - 'name' => 'box_border',
1171 - 'selector' => $content_selector,
1172 - 'fields_options' => [
1173 - 'color' => [
1174 - 'label' => esc_html__( 'Border Color', 'uicore-elements' ),
1175 - ],
1176 - 'width' => [
1177 - 'label' => esc_html__( 'Border Width', 'uicore-elements' ),
1178 - ],
1179 - ],
1180 - ]
1181 - );
1192 + $this->add_group_control(
1193 + Group_Control_Border::get_type(),
1194 + [
1195 + 'name' => 'box_border',
1196 + 'selector' => $content_selector,
1197 + 'fields_options' => [
1198 + 'color' => [
1199 + 'label' => esc_html__('Border Color', 'uicore-elements'),
1200 + ],
1201 + 'width' => [
1202 + 'label' => esc_html__('Border Width', 'uicore-elements'),
1203 + ],
1204 + ],
1205 + ]
1206 + );
1182 1207
1183 - $this->add_responsive_control(
1184 - 'box_border_radius',
1185 - [
1186 - 'label' => esc_html__( 'Border Radius', 'uicore-elements' ),
1187 - 'type' => Controls_Manager::DIMENSIONS,
1188 - 'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
1189 - 'selectors' => [
1190 - $content_selector => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1191 - ],
1192 - ]
1193 - );
1208 + $this->add_responsive_control(
1209 + 'box_border_radius',
1210 + [
1211 + 'label' => esc_html__('Border Radius', 'uicore-elements'),
1212 + 'type' => Controls_Manager::DIMENSIONS,
1213 + 'size_units' => ['px', '%', 'em', 'rem', 'custom'],
1214 + 'selectors' => [
1215 + $content_selector => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1216 + ],
1217 + ]
1218 + );
1194 1219
1195 - $this->add_group_control(
1196 - Group_Control_Box_Shadow::get_type(),
1197 - [
1198 - 'name' => 'box_shadow_box_shadow',
1199 - 'selector' => $content_selector,
1200 - ]
1201 - );
1220 + $this->add_group_control(
1221 + Group_Control_Box_Shadow::get_type(),
1222 + [
1223 + 'name' => 'box_shadow_box_shadow',
1224 + 'selector' => $content_selector,
1225 + ]
1226 + );
1202 1227
1203 - $this->add_responsive_control(
1204 - 'box_padding',
1205 - [
1206 - 'label' => esc_html__( 'Padding', 'uicore-elements' ),
1207 - 'type' => Controls_Manager::DIMENSIONS,
1208 - 'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
1209 - 'selectors' => [
1210 - $content_selector => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1211 - ],
1212 - ]
1213 - );
1228 + $this->add_responsive_control(
1229 + 'box_padding',
1230 + [
1231 + 'label' => esc_html__('Padding', 'uicore-elements'),
1232 + 'type' => Controls_Manager::DIMENSIONS,
1233 + 'size_units' => ['px', '%', 'em', 'rem', 'vw', 'custom'],
1234 + 'selectors' => [
1235 + $content_selector => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1236 + ],
1237 + ]
1238 + );
1214 1239
1215 - $this->end_controls_section();
1216 -
1240 + $this->end_controls_section();
1217 1241 }
1218 1242
1219 - protected function maybe_render_tab_icons_html( $item_settings ): void {
1220 - $icon_settings = $item_settings['item']['tab_icon'];
1243 + protected function maybe_render_tab_icons_html($item_settings): void
1244 + {
1245 + $icon_settings = $item_settings['item']['tab_icon'];
1221 1246
1222 - if ( empty( $icon_settings['value'] ) ) {
1223 - return;
1224 - }
1247 + if (empty($icon_settings['value'])) {
1248 + return;
1249 + }
1225 1250
1226 - $active_icon_settings = $this->is_active_icon_exist( $item_settings['item'] )
1227 - ? $item_settings['item']['tab_icon_active']
1228 - : $icon_settings;
1229 - ?>
1230 - <span <?php $this->print_render_attribute_string( 'tab-icon' ); ?>>
1231 - <?php Icons_Manager::render_icon( $active_icon_settings, [ 'aria-hidden' => 'true' ] ); ?>
1232 - <?php Icons_Manager::render_icon( $icon_settings, [ 'aria-hidden' => 'true' ] ); ?>
1233 - </span>
1234 - <?php
1235 - }
1251 + $active_icon_settings = $this->is_active_icon_exist($item_settings['item'])
1252 + ? $item_settings['item']['tab_icon_active']
1253 + : $icon_settings;
1254 +?>
1255 + <span <?php $this->print_render_attribute_string('tab-icon'); ?>>
1256 + <?php Icons_Manager::render_icon($active_icon_settings, ['aria-hidden' => 'true']); ?>
1257 + <?php Icons_Manager::render_icon($icon_settings, ['aria-hidden' => 'true']); ?>
1258 + </span>
1259 + <?php
1260 + }
1236 1261
1237 - protected function render_tab_titles_html( $item_settings ): string {
1238 - // Data
1239 - $setting_key = $this->get_repeater_setting_key( 'tab_title', 'tabs', $item_settings['index'] );
1240 - $title = $item_settings['item']['tab_title'];
1241 - $description = $item_settings['item']['tab_description'];
1242 - // Classes
1243 - $hover_animation = $item_settings['hover_animation'] ? 'elementor-animation-' . $item_settings['hover_animation'] : '';
1244 - $toggle_description = $item_settings['show_description'] ? 'ui-e-toggle-description' : '';
1262 + protected function render_tab_titles_html($item_settings): string
1263 + {
1264 + // Data
1265 + $setting_key = $this->get_repeater_setting_key('tab_title', 'tabs', $item_settings['index']);
1266 + $title = $item_settings['item']['tab_title'];
1267 + $description = $item_settings['item']['tab_description'];
1268 + // Classes
1269 + $hover_animation = $item_settings['hover_animation'] ? 'elementor-animation-' . $item_settings['hover_animation'] : '';
1270 + $toggle_description = $item_settings['show_description'] ? 'ui-e-toggle-description' : '';
1245 1271
1246 - $this->add_render_attribute( $setting_key, [
1247 - 'id' => $item_settings['tab_id'],
1248 - 'class' => [
1249 - 'ui-e-tab-title',
1250 - $toggle_description,
1251 - $hover_animation
1252 - ],
1253 - 'aria-selected' => (1 === (int)$item_settings['tab_count'] ? 'true' : 'false'),
1254 - 'data-tab-index' => $item_settings['tab_count'],
1255 - 'role' => 'tab',
1256 - 'tabindex' => (1 === $item_settings['tab_count'] ? '0' : '-1'),
1257 - 'aria-controls' => $item_settings['container_id'],
1258 - 'style' => '--ui-e-tabs-order: ' . $item_settings['tab_count'] . ';',
1259 - ] );
1272 + $this->add_render_attribute($setting_key, [
1273 + 'id' => $item_settings['tab_id'],
1274 + 'class' => [
1275 + 'ui-e-tab-title',
1276 + $toggle_description,
1277 + $hover_animation
1278 + ],
1279 + 'aria-selected' => (1 === (int)$item_settings['tab_count'] ? 'true' : 'false'),
1280 + 'data-tab-index' => $item_settings['tab_count'],
1281 + 'role' => 'tab',
1282 + 'tabindex' => (1 === $item_settings['tab_count'] ? '0' : '-1'),
1283 + 'aria-controls' => $item_settings['container_id'],
1284 + 'style' => '--ui-e-tabs-order: ' . $item_settings['tab_count'] . ';',
1285 + ]);
1260 1286
1261 - $render_attributes = $this->get_render_attribute_string( $setting_key );
1262 - $text_class = $this->get_render_attribute_string( 'tab-texts' );
1287 + $render_attributes = $this->get_render_attribute_string($setting_key);
1288 + $text_class = $this->get_render_attribute_string('tab-texts');
1263 1289
1264 - ob_start();
1265 - ?>
1266 - <button <?php echo $render_attributes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
1267 - <?php $this->maybe_render_tab_icons_html( $item_settings ); ?>
1268 - <div <?php echo $text_class; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
1290 + ob_start();
1291 + ?>
1292 + <button <?php echo $render_attributes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1293 + ?>>
1294 + <?php $this->maybe_render_tab_icons_html($item_settings); ?>
1295 + <div <?php echo $text_class; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1296 + ?>>
1269 1297
1270 - <?php if( !empty( $title ) ) : ?>
1271 - <span> <?php echo wp_kses_post( $title ); ?> </span>
1272 - <?php endif; ?>
1298 + <?php if (!empty($title)) : ?>
1299 + <span> <?php echo wp_kses_post($title); ?> </span>
1300 + <?php endif; ?>
1273 1301
1274 - <?php if( !empty( $description ) ) : ?>
1275 - <p> <?php echo wp_kses_post( $description ); ?> </p>
1276 - <?php endif; ?>
1302 + <?php if (!empty($description)) : ?>
1303 + <p> <?php echo wp_kses_post($description); ?> </p>
1304 + <?php endif; ?>
1277 1305
1278 - </div>
1279 - </button>
1280 - <?php
1281 - return ob_get_clean();
1282 - }
1306 + </div>
1307 + </button>
1308 + <?php
1309 + return ob_get_clean();
1310 + }
1283 1311
1284 - protected function render_tab_containers_html( $item_settings ): string {
1285 - ob_start();
1286 - $this->print_child( $item_settings['index'], $item_settings );
1287 - return ob_get_clean();
1288 - }
1312 + protected function render_tab_containers_html($item_settings): string
1313 + {
1314 + ob_start();
1315 + $this->print_child($item_settings['index'], $item_settings);
1316 + return ob_get_clean();
1317 + }
1289 1318
1290 - private function is_active_icon_exist( $item ) {
1291 - return array_key_exists( 'tab_icon_active', $item ) && ! empty( $item['tab_icon_active'] ) && ! empty( $item['tab_icon_active']['value'] );
1292 - }
1319 + private function is_active_icon_exist($item)
1320 + {
1321 + return array_key_exists('tab_icon_active', $item) && ! empty($item['tab_icon_active']) && ! empty($item['tab_icon_active']['value']);
1322 + }
1293 1323
1294 - /**
1295 - * Print the content area.
1296 - *
1297 - * @param int $index
1298 - * @param array $item_settings
1299 - */
1300 - public function print_child( $index, $item_settings = [] ) {
1301 - $children = $this->get_children();
1302 - $child_ids = [];
1303 - if( empty( $children )){
1304 - return;
1305 - }
1306 - foreach ( $children as $child ) {
1307 - $child_ids[] = $child->get_id();
1308 - }
1324 + /**
1325 + * Print the content area.
1326 + *
1327 + * @param int $index
1328 + * @param array $item_settings
1329 + */
1330 + public function print_child($index, $item_settings = [])
1331 + {
1332 + $children = $this->get_children();
1333 + $child_ids = [];
1334 + if (empty($children)) {
1335 + return;
1336 + }
1337 + foreach ($children as $child) {
1338 + $child_ids[] = $child->get_id();
1339 + }
1309 1340
1310 - // Add data-tab-index attribute to the content area.
1311 - $add_attribute_to_container = function ( $should_render, $container ) use ( $item_settings, $child_ids ) {
1312 - if ( in_array( $container->get_id(), $child_ids ) ) {
1313 - $this->add_attributes_to_container( $container, $item_settings );
1314 - }
1341 + // Add data-tab-index attribute to the content area.
1342 + $add_attribute_to_container = function ($should_render, $container) use ($item_settings, $child_ids) {
1343 + if (in_array($container->get_id(), $child_ids)) {
1344 + $this->add_attributes_to_container($container, $item_settings);
1345 + }
1315 1346
1316 - return $should_render;
1317 - };
1347 + return $should_render;
1348 + };
1318 1349
1319 - add_filter( 'elementor/frontend/container/should_render', $add_attribute_to_container, 10, 3 );
1320 - $children[ $index ]->print_element();
1321 - remove_filter( 'elementor/frontend/container/should_render', $add_attribute_to_container );
1322 - }
1350 + add_filter('elementor/frontend/container/should_render', $add_attribute_to_container, 10, 3);
1351 + if (isset($children[$index])) {
1352 + $children[$index]->print_element();
1353 + }
1354 + remove_filter('elementor/frontend/container/should_render', $add_attribute_to_container);
1355 + }
1323 1356
1324 - protected function add_attributes_to_container( $container, $item_settings ) {
1325 - $container->add_render_attribute( '_wrapper', [
1326 - 'id' => $item_settings['container_id'],
1327 - 'role' => 'tabpanel',
1328 - 'aria-labelledby' => $item_settings['tab_id'],
1329 - 'data-tab-index' => $item_settings['tab_count'],
1330 - 'style' => '--ui-e-tabs-order: ' . $item_settings['tab_count'] . ';',
1331 - 'class' => 0 === $item_settings['index'] ? 'e-active' : '',
1332 - ] );
1333 - }
1357 + protected function add_attributes_to_container($container, $item_settings)
1358 + {
1359 + $container->add_render_attribute('_wrapper', [
1360 + 'id' => $item_settings['container_id'],
1361 + 'role' => 'tabpanel',
1362 + 'aria-labelledby' => $item_settings['tab_id'],
1363 + 'data-tab-index' => $item_settings['tab_count'],
1364 + 'style' => '--ui-e-tabs-order: ' . $item_settings['tab_count'] . ';',
1365 + 'class' => 0 === $item_settings['index'] ? 'ui-e-active' : '',
1366 + ]);
1367 + }
1334 1368
1335 - protected function render() {
1369 + protected function render()
1370 + {
1336 1371
1337 - if( Plugin::$instance->experiments->is_feature_active('nested-elements') == false ){
1338 - $this->nesting_fallback();
1339 - return;
1340 - }
1372 + if (Plugin::$instance->experiments->is_feature_active('nested-elements') == false) {
1373 + $this->nesting_fallback();
1374 + return;
1375 + }
1341 1376
1342 - $settings = $this->get_settings_for_display();
1343 - $widget_number = substr( $this->get_id_int(), 0, 3 );
1377 + $settings = $this->get_settings_for_display();
1378 + $widget_number = substr($this->get_id_int(), 0, 3);
1344 1379
1345 - $this->add_render_attribute( 'elementor-tabs', [
1346 - 'class' => 'ui-e-tabs',
1347 - 'data-widget-number' => $widget_number,
1348 - 'aria-label' => esc_html__( 'Tabs. Open items with Enter or Space, close with Escape and navigate using the Arrow keys.', 'uicore-elements' ),
1349 - ] );
1380 + $this->add_render_attribute('elementor-tabs', [
1381 + 'class' => 'ui-e-tabs',
1382 + 'data-widget-number' => $widget_number,
1383 + 'aria-label' => esc_html__('Tabs. Open items with Enter or Space, close with Escape and navigate using the Arrow keys.', 'uicore-elements'),
1384 + ]);
1350 1385
1351 - $this->add_render_attribute( 'tab-texts', 'class', 'ui-e-tab-texts' );
1352 - $this->add_render_attribute( 'tab-icon', 'class', 'ui-e-tab-icon' );
1353 - $this->add_render_attribute( 'tab-icon-active', 'class', [ 'ui-e-tab-icon' ] );
1386 + $this->add_render_attribute('tab-texts', 'class', 'ui-e-tab-texts');
1387 + $this->add_render_attribute('tab-icon', 'class', 'ui-e-tab-icon');
1388 + $this->add_render_attribute('tab-icon-active', 'class', ['ui-e-tab-icon']);
1354 1389
1355 - $tab_titles_html = '';
1356 - $tab_containers_html = '';
1390 + $tab_titles_html = '';
1391 + $tab_containers_html = '';
1357 1392
1358 - foreach ( $settings['tabs'] as $index => $item ) {
1359 - $tab_count = $index + 1;
1393 + foreach ($settings['tabs'] as $index => $item) {
1394 + $tab_count = $index + 1;
1360 1395
1361 - $tab_id = empty( $item['tab_id'] )
1362 - ? 'ui-e-tab-title-' . $widget_number . $tab_count
1363 - : $item['tab_id'];
1396 + $tab_id = empty($item['tab_id'])
1397 + ? 'ui-e-tab-title-' . $widget_number . $tab_count
1398 + : $item['tab_id'];
1364 1399
1365 - $item_settings = [
1366 - 'index' => $index,
1367 - 'tab_count' => $tab_count,
1368 - 'tab_id' => $tab_id,
1369 - 'container_id' => 'ui-e-tab-content-' . $widget_number . $tab_count,
1370 - 'widget_number' => $widget_number,
1371 - 'hover_animation' => $settings['hover_animation'],
1372 - 'show_description' => $settings['show_description'],
1373 - 'item' => $item,
1374 - 'settings' => $settings, // TODO: check if is being used
1375 - ];
1400 + $item_settings = [
1401 + 'index' => $index,
1402 + 'tab_count' => $tab_count,
1403 + 'tab_id' => $tab_id,
1404 + 'container_id' => 'ui-e-tab-content-' . $widget_number . $tab_count,
1405 + 'widget_number' => $widget_number,
1406 + 'hover_animation' => $settings['hover_animation'],
1407 + 'show_description' => $settings['show_description'],
1408 + 'item' => $item,
1409 + 'settings' => $settings,
1410 + ];
1376 1411
1377 - $tab_titles_html .= $this->render_tab_titles_html( $item_settings );
1378 - $tab_containers_html .= $this->render_tab_containers_html( $item_settings );
1379 - }
1380 - ?>
1381 - <div <?php $this->print_render_attribute_string( 'elementor-tabs' ); ?>>
1382 - <div class="ui-e-tabs-heading" role="tablist">
1383 - <?php echo $tab_titles_html;// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
1384 - </div>
1385 - <div class="ui-e-tabs-content">
1386 - <?php echo $tab_containers_html;// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>
1387 - </div>
1388 - </div>
1389 - <?php
1390 - }
1412 + $tab_titles_html .= $this->render_tab_titles_html($item_settings);
1413 + $tab_containers_html .= $this->render_tab_containers_html($item_settings);
1414 + }
1415 + ?>
1416 + <div <?php $this->print_render_attribute_string('elementor-tabs'); ?>>
1417 + <div class="ui-e-tabs-heading" role="tablist">
1418 + <?php echo $tab_titles_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1419 + ?>
1420 + </div>
1421 + <div class="ui-e-tabs-content">
1422 + <?php echo $tab_containers_html; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1423 + ?>
1424 + </div>
1425 + </div>
1426 + <?php
1427 + }
1391 1428
1392 - protected function get_initial_config(): array {
1393 - if ( Plugin::$instance->experiments->is_feature_active( 'e_nested_atomic_repeaters' ) ) {
1394 - return array_merge( parent::get_initial_config(), [
1395 - 'support_improved_repeaters' => true,
1396 - 'target_container' => [ '.ui-e-tabs-heading' ],
1397 - 'node' => 'button',
1398 - ] );
1399 - }
1429 + protected function get_initial_config(): array
1430 + {
1431 + return array_merge(parent::get_initial_config(), [
1432 + 'support_improved_repeaters' => true,
1433 + 'target_container' => ['.ui-e-tabs-heading'],
1434 + 'node' => 'button',
1435 + ]);
1436 + }
1400 1437
1401 - return parent::get_initial_config();
1402 - }
1403 - /*
1404 - protected function content_template_single_repeater_item() {
1405 - ?>
1406 - <#
1407 - const tabCount = view.collection.length + 1,
1408 - elementUid = view.getIDInt().toString().substring( 0, 3 ) + tabCount,
1409 - tabIcon = elementor.helpers.renderIcon( view, data.tab_icon, { 'aria-hidden': true }, 'i' , 'object' );
1438 + protected function content_template_single_repeater_item()
1439 + {
1440 + ?>
1441 + <#
1442 + const tabCount=view.collection.length + 1,
1443 + elementUid=view.getIDInt().toString().substr( 0, 3 ),
1444 + tabUid=elementUid + tabCount,
1445 + tabWrapperKey='tab-single-' + tabUid,
1446 + tabTitleKey='tab-title-' + tabUid,
1447 + tabIconKey='tab-icon-' + tabUid,
1448 + tabIcon=elementor.helpers.renderIcon( view, data.tab_icon, { 'aria-hidden' : true }, 'i' , 'object' ),
1449 + hoverAnimationClass=settings['hover_animation'] ? `elementor-animation-${ settings['hover_animation'] }` : '' ,
1450 + showDescription=settings['show_description'] ? 'ui-e-toggle-description' : '' ;
1410 1451
1411 - let tabActiveIcon = tabIcon,
1412 - tabId = 'ui-e-tab-title-' + elementUid;
1452 + let tabActiveIcon=tabIcon,
1453 + tabId='ui-e-tab-title-' + tabUid;
1413 1454
1414 - if ( '' !== data.tab_icon_active.value ) {
1415 - tabActiveIcon = elementor.helpers.renderIcon( view, data.tab_icon_active, { 'aria-hidden': true }, 'i' , 'object' );
1416 - }
1455 + if ( data.tab_icon_active && '' !==data.tab_icon_active.value ) {
1456 + tabActiveIcon=elementor.helpers.renderIcon( view, data.tab_icon_active, { 'aria-hidden' : true }, 'i' , 'object' );
1457 + }
1417 1458
1418 - const tabWrapperKey = {
1419 - 'id': 'ui-e-tab-title-' + elementUid,
1420 - 'class': [ 'ui-e-tab-title' ],
1421 - 'data-tab-index': tabCount,
1422 - 'role': 'tab',
1423 - 'aria-selected': 1 === tabCount ? 'true' : 'false',
1424 - 'tabindex': 1 === tabCount ? '0' : '-1',
1425 - 'aria-controls': 'ui-e-tab-content-' + elementUid,
1426 - 'style': '--ui-e-tabs-order: ' + tabCount + ';',
1427 - };
1459 + if ( data.tab_id && '' !==data.tab_id ) {
1460 + tabId=data.tab_id;
1461 + }
1428 1462
1429 - const tabIconKey = {
1430 - 'class': [ 'ui-e-tab-icon' ],
1431 - 'data-binding-type': 'repeater-item',
1432 - 'data-binding-repeater-name': 'tabs',
1433 - 'data-binding-setting': [ data.tab_icon.value, data.tab_icon_active.value ],
1434 - 'data-binding-index': tabCount,
1435 - };
1463 + view.addRenderAttribute( tabWrapperKey, { 'id' : tabId, 'class' : [ 'ui-e-tab-title' , hoverAnimationClass, showDescription ], 'data-tab-index' : tabCount, 'role' : 'tab' , 'aria-selected' : 1===tabCount ? 'true' : 'false' , 'tabindex' : 1===tabCount ? '0' : '-1' , 'aria-controls' : 'ui-e-tab-content-' + tabUid, 'style' : '--ui-e-tabs-order: ' + tabCount + ';' ,
1464 + } );
1436 1465
1437 - const tabTitleKey = {
1438 - 'class': [ 'ui-e-tab-title-text' ],
1439 - 'data-binding-type': 'repeater-item',
1440 - 'data-binding-repeater-name': 'tabs',
1441 - 'data-binding-setting': [ 'tab_title' ],
1442 - 'data-binding-index': tabCount,
1443 - };
1466 + view.addRenderAttribute( tabTitleKey, { 'class' : [ 'ui-e-tab-texts' ], 'data-binding-type' : 'repeater-item' , 'data-binding-repeater-name' : 'tabs' , 'data-binding-setting' : [ 'tab_title' ], 'data-binding-index' : tabCount,
1467 + } );
1444 1468
1445 - view.addRenderAttribute( 'button-container', tabWrapperKey, null, true );
1446 - view.addRenderAttribute( 'tab-title-container', tabTitleKey, null, true );
1447 - view.addRenderAttribute( 'tab-icon-key-container', tabIconKey, null, true );
1448 - #>
1469 + view.addRenderAttribute( tabIconKey, { 'class' : [ 'ui-e-tab-icon' ], 'data-binding-type' : 'repeater-item' , 'data-binding-repeater-name' : 'tabs' , 'data-binding-setting' : [ data.tab_icon ? data.tab_icon.value : '' , data.tab_icon_active ? data.tab_icon_active.value : '' ], 'data-binding-index' : tabCount,
1470 + } );
1471 + #>
1472 + <button {{{ view.getRenderAttributeString( tabWrapperKey ) }}}>
1473 + <# if ( tabIcon && tabIcon.value ) { #>
1474 + <span {{{ view.getRenderAttributeString( tabIconKey ) }}}>{{{ tabActiveIcon.value }}}{{{ tabIcon.value }}}</span>
1475 + <# } #>
1476 + <div {{{ view.getRenderAttributeString( tabTitleKey ) }}}>
1477 + <# if ( data.tab_title ) { #>
1478 + <span> {{{ data.tab_title }}} </span>
1479 + <# } #>
1480 + <# if ( data.tab_description ) { #>
1481 + <p> {{{ data.tab_description }}} </p>
1482 + <# } #>
1483 + </div>
1484 + </button>
1485 + <?php
1486 + }
1487 + protected function content_template()
1488 + {
1449 1489
1450 - <button {{{ view.getRenderAttributeString( 'button-container' ) }}}>
1451 - <# if ( tabIcon.value ) { #>
1452 - <span {{{ view.getRenderAttributeString( 'tab-icon-key-container' ) }}}> {{{ tabIcon.value }}}{{{ tabActiveIcon.value }}} </span>
1453 - <# } #>
1454 - <span {{{ view.getRenderAttributeString( 'tab-title-container' ) }}}> {{{ data.tab_title }}} </span>
1455 - </button>
1456 - <?php
1457 - }
1458 - */
1459 - /*
1460 - protected function content_template_single_repeater_item() {
1461 - ?>
1462 - <#
1463 - const tabIndex = view.collection.length,
1464 - elementUid = view.getIDInt().toString(),
1465 - item = data,
1466 - hoverAnimationSetting = view?.container?.settings?.attributes?.hover_animation;
1467 - hoverAnimationClass = hoverAnimationSetting
1468 - ? `elementor-animation-${ hoverAnimationSetting }`
1469 - : '';
1470 - #>
1471 - <?php $this->content_template_single_item( '{{ tabIndex }}', '{{ item }}', '{{ elementUid }}', '{{ hoverAnimationClass }}' );
1472 - }
1473 - */
1474 - protected function content_template() {
1490 + if (Plugin::$instance->experiments->is_feature_active('nested-elements') == false) {
1491 + return;
1492 + }
1475 1493
1476 - if( Plugin::$instance->experiments->is_feature_active('nested-elements') == false ){
1477 - return;
1478 - }
1494 + ?>
1495 + <# const elementUid=view.getIDInt().toString().substr( 0, 3 ); #>
1496 + <div class="ui-e-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.', 'uicore-elements'); ?>">
1497 + <# if ( settings['tabs'] ) { #>
1498 + <div class="ui-e-tabs-heading" role="tablist">
1499 + <# _.each( settings['tabs'], function( item, index ) {
1500 + const tabCount=index + 1,
1501 + tabUid=elementUid + tabCount,
1502 + tabWrapperKey=tabUid,
1503 + tabTitleKey='tab-title-' + tabUid,
1504 + tabIconKey='tab-icon-' + tabUid,
1505 + tabIcon=elementor.helpers.renderIcon( view, item.tab_icon, { 'aria-hidden' : true }, 'i' , 'object' ),
1506 + hoverAnimationClass=settings['hover_animation'] ? `elementor-animation-${ settings['hover_animation'] }` : '' ,
1507 + showDescription=settings['show_description'] ? 'ui-e-toggle-description' : '' ;
1479 1508
1480 - ?>
1481 - <# const elementUid = view.getIDInt().toString().substr( 0, 3 ); #>
1482 - <div class="ui-e-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.', 'uicore-elements' ); ?>">
1483 - <# if ( settings['tabs'] ) { #>
1484 - <div class="ui-e-tabs-heading" role="tablist">
1485 - <# _.each( settings['tabs'], function( item, index ) {
1486 - const tabCount = index + 1,
1487 - tabUid = elementUid + tabCount,
1488 - tabWrapperKey = tabUid,
1489 - tabTitleKey = 'tab-title-' + tabUid,
1490 - tabIconKey = 'tab-icon-' + tabUid,
1491 - tabIcon = elementor.helpers.renderIcon( view, item.tab_icon, { 'aria-hidden': true }, 'i' , 'object' ),
1492 - hoverAnimationClass = settings['hover_animation'] ? `elementor-animation-${ settings['hover_animation'] }` : '',
1493 - showDescription = settings['show_description'] ? 'ui-e-toggle-description' : '';
1509 + let tabActiveIcon=tabIcon,
1510 + tabId='ui-e-tab-title-' + tabUid;
1494 1511
1495 - let tabActiveIcon = tabIcon,
1496 - tabId = 'ui-e-tab-title-' + tabUid;
1512 + if ( '' !==item.tab_icon_active.value ) {
1513 + tabActiveIcon=elementor.helpers.renderIcon( view, item.tab_icon_active, { 'aria-hidden' : true }, 'i' , 'object' );
1514 + }
1497 1515
1498 - if ( '' !== item.tab_icon_active.value ) {
1499 - tabActiveIcon = elementor.helpers.renderIcon( view, item.tab_icon_active, { 'aria-hidden': true }, 'i' , 'object' );
1500 - }
1516 + if ( '' !==item.tab_id ) {
1517 + tabId=item.tab_id;
1518 + }
1501 1519
1502 - if ( '' !== item.tab_id ) {
1503 - tabId = item.tab_id;
1504 - }
1520 + view.addRenderAttribute( tabWrapperKey, { 'id' : tabId, 'class' : [ 'ui-e-tab-title' , hoverAnimationClass, showDescription ], 'data-tab-index' : tabCount, 'role' : 'tab' , 'aria-selected' : 1===tabCount ? 'true' : 'false' , 'tabindex' : 1===tabCount ? '0' : '-1' , 'aria-controls' : 'ui-e-tab-content-' + tabUid, 'style' : '--ui-e-tabs-order: ' + tabCount + ';' ,
1521 + } );
1505 1522
1506 - view.addRenderAttribute( tabWrapperKey, {
1507 - 'id': tabId,
1508 - 'class': [ 'ui-e-tab-title', hoverAnimationClass, showDescription ],
1509 - 'data-tab-index': tabCount,
1510 - 'role': 'tab',
1511 - 'aria-selected': 1 === tabCount ? 'true' : 'false',
1512 - 'tabindex': 1 === tabCount ? '0' : '-1',
1513 - 'aria-controls': 'ui-e-tab-content-' + tabUid,
1514 - 'style': '--ui-e-tabs-order: ' + tabCount + ';',
1515 - } );
1523 + view.addRenderAttribute( tabTitleKey, { 'class' : [ 'ui-e-tab-texts' ], 'data-binding-type' : 'repeater-item' , 'data-binding-repeater-name' : 'tabs' , 'data-binding-setting' : [ 'tab_title' ], 'data-binding-index' : tabCount,
1524 + } );
1516 1525
1517 - view.addRenderAttribute( tabTitleKey, {
1518 - 'class': [ 'ui-e-tab-texts' ],
1519 - 'data-binding-type': 'repeater-item',
1520 - 'data-binding-repeater-name': 'tabs',
1521 - 'data-binding-setting': [ 'tab_title' ],
1522 - 'data-binding-index': tabCount,
1523 - } );
1524 -
1525 - view.addRenderAttribute( tabIconKey, {
1526 - 'class': [ 'ui-e-tab-icon' ],
1527 - 'data-binding-type': 'repeater-item',
1528 - 'data-binding-repeater-name': 'tabs',
1529 - 'data-binding-setting': [ 'tab_icon.value', 'tab_icon_active.value' ],
1530 - 'data-binding-index': tabCount,
1531 - } );
1532 - #>
1533 - <button {{{ view.getRenderAttributeString( tabWrapperKey ) }}}>
1534 - <# if ( tabIcon.value ) { #>
1535 - <span {{{ view.getRenderAttributeString( tabIconKey ) }}}>{{{ tabActiveIcon.value }}}{{{ tabIcon.value }}}</span>
1536 - <# } #>
1537 - <div {{{ view.getRenderAttributeString( tabTitleKey ) }}}>
1538 - <# if ( item.tab_title ) { #>
1539 - <span> {{{ item.tab_title }}} </span>
1540 - <# } #>
1541 - <# if ( item.tab_description ) { #>
1542 - <p> {{{ item.tab_description }}} </p>
1543 - <# } #>
1544 - </div>
1545 - </button>
1546 - <# } ); #>
1547 - </div>
1548 - <div class="ui-e-tabs-content"></div>
1549 - <# } #>
1550 - </div>
1551 - <?php
1552 - }
1553 - /*
1526 + view.addRenderAttribute( tabIconKey, { 'class' : [ 'ui-e-tab-icon' ], 'data-binding-type' : 'repeater-item' , 'data-binding-repeater-name' : 'tabs' , 'data-binding-setting' : [ 'tab_icon.value' , 'tab_icon_active.value' ], 'data-binding-index' : tabCount,
1527 + } );
1528 + #>
1529 + <button {{{ view.getRenderAttributeString( tabWrapperKey ) }}}>
1530 + <# if ( tabIcon.value ) { #>
1531 + <span {{{ view.getRenderAttributeString( tabIconKey ) }}}>{{{ tabActiveIcon.value }}}{{{ tabIcon.value }}}</span>
1532 + <# } #>
1533 + <div {{{ view.getRenderAttributeString( tabTitleKey ) }}}>
1534 + <# if ( item.tab_title ) { #>
1535 + <span> {{{ item.tab_title }}} </span>
1536 + <# } #>
1537 + <# if ( item.tab_description ) { #>
1538 + <p> {{{ item.tab_description }}} </p>
1539 + <# } #>
1540 + </div>
1541 + </button>
1542 + <# } ); #>
1543 + </div>
1544 + <div class="ui-e-tabs-content"></div>
1545 + <# } #>
1546 + </div>
1547 + <?php
1548 + }
1549 + /*
1554 1550 private function content_template_single_item( $tab_index, $item, $element_uid, $hover_animation_class ) {
1555 1551 ?>
1556 1552 <#
1557 1553 const tabCount = tabIndex + 1,
@@ -1604,5 +1600,5 @@
1604 1600 <?php
1605 1601 }
1606 1602 */
1607 1603 }
1608 -\Elementor\Plugin::instance()->widgets_manager->register(new Tabs());
1604 +\Elementor\Plugin::instance()->widgets_manager->register(new Tabs());