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