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