← All changes | includes/utils/carousel-component.php +1728 -1515 1.2.0 → 1.3.17 View file →

		@@ -1,5 +1,6 @@
1	1	<?php
	2	+
2	3	namespace UiCoreElements\Utils;
3	4
4	5	use Elementor\Controls_Manager;
5	6	use Elementor\Group_Control_Border;
		@@ -7,10 +8,10 @@
7	8	use Elementor\Group_Control_Box_Shadow;
8	9	use Elementor\Icons_Manager;
9	10	use Elementor\Plugin;
10	11
11		-if ( ! defined( 'ABSPATH' ) ) {
12		- exit; // Exit if accessed directly
	12	+if (! defined('ABSPATH')) {
	13	+ exit; // Exit if accessed directly
13	14	}
14	15
15	16	/*
16	17	* Carousel / Slider Component Trait
		@@ -15,17 +16,18 @@
15	16	/*
16	17	* Carousel / Slider Component Trait
17	18	*/
18	19
19		-trait Carousel_Trait {
	20	+trait Carousel_Trait
	21	+{
20	22
21		- /**
22		- * Sets all navigation conditions in one place
23		- *
	23	+ /**
	24	+ * Sets all navigation conditions in one place
	25	+ *
24	26	* @param string $type Control name
25	27	* @param array|null $extras (Optional) Terms attributes. ['name' => 'control, 'operator' => '==', 'value' => 'yes'], [..]
26		- * @param string|null $relation (Optional) Accepts 'or' & 'and' values. Default is 'and'
27		- * @return array Elementor API Conditions
	28	+ * @param string|null $relation (Optional) Accepts 'or' & 'and' values. Default is 'and'
	29	+ * @return array Elementor API Conditions
28	30	*/
29	31	function nav_conditions($type, $extras = false, $relation = 'and')
30	32	{
31	33	if ($type == 'arrows') {
		@@ -51,10 +53,10 @@
51	53
52	54	$conditions['relation'] = $relation;
53	55
54	56	// Check for extra conditions
55		- if($extras != false){
56		- foreach ($extras as $extra){
	57	+ if ($extras != false) {
	58	+ foreach ($extras as $extra) {
57	59	$conditions['terms'][] = $extra;
58	60	}
59	61	}
60	62
		@@ -68,22 +70,23 @@
68	70	* @param array $extra_conditions Extra conditions to be added to the scripts.
69	71	*
70	72	* @return array The array of scripts for the widget.
71	73	*/
72		- function TRAIT_get_carousel_scripts($use_entrance = true, $extra_conditions = null) {
	74	+ function TRAIT_get_carousel_scripts($use_entrance = true, $extra_conditions = null)
	75	+ {
73	76
74		- $base = [ 'carousel' ];
	77	+ $base = ['carousel'];
75	78
76	79	// Add extra conditions to carousel script if requested
77		- if( isset($extra_conditions) ){
78		- $base['carousel'] = ['condition' => []];
	80	+ if (isset($extra_conditions)) {
	81	+ $base['carousel'] = ['condition' => []];
79	82
80		- foreach ($extra_conditions as $key => $value){
	83	+ foreach ($extra_conditions as $key => $value) {
81	84	$base['carousel']['condition'][$key] = $value;
82	85	}
83	86	}
84	87
85		- if($use_entrance) {
	88	+ if ($use_entrance) {
86	89	$base['entrance'] = [
87	90	'condition' => [
88	91	'animate_items' => 'ui-e-grid-animate'
89	92	],
		@@ -90,9 +93,9 @@
90	93	];
91	94	}
92	95
93	96	// Specific Slider scripts
94		- if( strpos($this->get_name(), 'slide') !== false ){
	97	+ if (strpos($this->get_name(), 'slide') !== false) {
95	98	$type = [
96	99	'stacked-carousel' => [
97	100	'condition' => [
98	101	'animation_style' => 'stacked',
		@@ -105,9 +108,9 @@
105	108	]
106	109	]
107	110	];
108	111
109		- // Specific Carousel scripts - if is not slider, is Carousel :)
	112	+ // Specific Carousel scripts - if is not slider, is Carousel :)
110	113	} else {
111	114	$type = [
112	115	'special-effects' => [
113	116	'condition' => [
		@@ -120,13 +123,13 @@
120	123	// Merge and return the scripts
121	124	return array_merge($base, $type);
122	125	}
123	126
124		- // Navigation Controls
125		- function TRAIT_register_navigation_controls()
126		- {
	127	+ // Navigation Controls
	128	+ function TRAIT_register_navigation_controls()
	129	+ {
127	130
128		- $this->start_controls_section(
	131	+ $this->start_controls_section(
129	132	'section_content_navigation',
130	133	[
131	134	'label' => __('Navigation', 'uicore-elements'),
132	135	]
		@@ -131,798 +134,872 @@
131	134	'label' => __('Navigation', 'uicore-elements'),
132	135	]
133	136	);
134	137
135		- $this->add_control(
136		- 'navigation',
137		- [
138		- 'label' => __('Navigation', 'uicore-elements'),
139		- 'type' => Controls_Manager::SELECT,
140		- 'default' => 'arrows-dots',
141		- 'options' => [
142		- 'arrows' => esc_html__('Arrows', 'uicore-elements'),
143		- 'dots' => esc_html__('Dots', 'uicore-elements'),
144		- 'fraction' => esc_html__('Fractions', 'uicore-elements'),
145		- 'arrows-dots' => esc_html__('Arrows and Dots', 'uicore-elements'),
146		- 'arrows-fraction' => esc_html__('Arrows and Fraction', 'uicore-elements'),
147		- 'none' => esc_html__('None', 'uicore-elements'),
148		- ],
149		- 'label_block' => true,
150		- 'render_type' => 'template',
151		- 'frontend_available' => true,
152		- 'condition' => [
153		- 'animation_style!' => 'marquee',
	138	+ $this->add_control(
	139	+ 'navigation',
	140	+ [
	141	+ 'label' => __('Navigation', 'uicore-elements'),
	142	+ 'type' => Controls_Manager::SELECT,
	143	+ 'default' => 'arrows-dots',
	144	+ 'options' => [
	145	+ 'arrows' => esc_html__('Arrows', 'uicore-elements'),
	146	+ 'dots' => esc_html__('Dots', 'uicore-elements'),
	147	+ 'fraction' => esc_html__('Fractions', 'uicore-elements'),
	148	+ 'arrows-dots' => esc_html__('Arrows and Dots', 'uicore-elements'),
	149	+ 'arrows-fraction' => esc_html__('Arrows and Fraction', 'uicore-elements'),
	150	+ 'none' => esc_html__('None', 'uicore-elements'),
	151	+ ],
	152	+ 'label_block' => true,
	153	+ 'render_type' => 'template',
	154	+ 'frontend_available' => true,
	155	+ 'condition' => [
	156	+ 'animation_style!' => 'marquee',
	157	+ ],
	158	+ ]
	159	+ );
	160	+ $this->add_control(
	161	+ 'marquee_warning',
	162	+ [
	163	+ 'type' => Controls_Manager::RAW_HTML,
	164	+ 'raw' => esc_html__('Marquee animation does not support navigation.', 'uicore-elements'),
	165	+ 'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
	166	+ 'condition' => [
	167	+ 'animation_style' => 'marquee',
	168	+ ],
	169	+ ]
	170	+ );
	171	+ $this->add_control(
	172	+ 'hr_arrows',
	173	+ [
	174	+ 'label' => esc_html__('Arrows', 'uicore-elements'),
	175	+ 'type' => Controls_Manager::HEADING,
	176	+ 'separator' => 'before',
	177	+ 'conditions' => $this->nav_conditions('arrows'),
	178	+ ]
	179	+ );
	180	+ $this->start_controls_tabs(
	181	+ 'arrows_tabs'
	182	+ );
	183	+
	184	+ $this->start_controls_tab(
	185	+ 'previous_tab',
	186	+ [
	187	+ 'label' => esc_html__('Previous', 'uicore-elements'),
	188	+ 'conditions' => $this->nav_conditions('arrows'),
	189	+ ]
	190	+ );
	191	+
	192	+ $this->add_control(
	193	+ 'previous_arrow',
	194	+ [
	195	+ 'label' => esc_html__('Previous Arrow Icon', 'uicore-elements'),
	196	+ 'type' => Controls_Manager::ICONS,
	197	+ 'default' => [
	198	+ 'value' => 'fas fa-arrow-left',
	199	+ 'library' => 'fa-solid',
	200	+ ],
	201	+ 'recommended' => [
	202	+ 'fa-solid' => [
	203	+ 'arrow-alt-circle-left',
	204	+ 'caret-square-left',
	205	+ 'angle-double-left',
	206	+ 'angle-left',
	207	+ 'arrow-alt-circle-left',
	208	+ 'arrow-left',
	209	+ 'caret-left',
	210	+ 'caret-square-left',
	211	+ 'chevron-circle-left',
	212	+ 'chevron-left',
	213	+ 'long-arrow-alt-left'
	214	+ ]
	215	+ ],
	216	+ 'label_block' => false,
	217	+ 'skin' => 'inline',
	218	+ 'conditions' => $this->nav_conditions('arrows'),
	219	+ ]
	220	+ );
	221	+ $this->add_responsive_control(
	222	+ 'previous_arrow_h_position',
	223	+ [
	224	+ 'label' => __('Horizontal Orientation', 'uicore-elements'),
	225	+ 'type' => Controls_Manager::CHOOSE,
	226	+ 'options' => [
	227	+ 'left: 0; right: auto;' => [
	228	+ 'title' => __('Left', 'uicore-elements'),
	229	+ 'icon' => 'eicon-h-align-left',
154	230	],
155		- ]
156		- );
157		- $this->add_control(
158		- 'marquee_warning',
159		- [
160		- 'type' => Controls_Manager::RAW_HTML,
161		- 'raw' => esc_html__( 'Marquee animation does not support navigation.', 'uicore-elements' ),
162		- 'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
163		- 'condition' => [
164		- 'animation_style' => 'marquee',
	231	+ 'left: 0; right: 0; margin: auto;' => [
	232	+ 'title' => __('Center', 'uicore-elements'),
	233	+ 'icon' => 'eicon-h-align-center',
165	234	],
166		- ]
167		- );
168		- $this->add_control(
169		- 'hr_arrows',
170		- [
171		- 'label' => esc_html__( 'Arrows', 'uicore-elements' ),
172		- 'type' => Controls_Manager::HEADING,
173		- 'separator' => 'before',
174		- 'conditions' => $this->nav_conditions('arrows'),
175		- ]
176		- );
177		- $this->start_controls_tabs(
178		- 'arrows_tabs'
179		- );
	235	+ 'left: auto; right: 0;' => [
	236	+ 'title' => __('Right', 'uicore-elements'),
	237	+ 'icon' => 'eicon-h-align-right',
	238	+ ],
	239	+ ],
	240	+ 'default' => 'left: 0; right: auto;',
	241	+ 'selectors' => [
	242	+ '{{WRAPPER}} .ui-e-previous' => '{{VALUE}};'
	243	+ ],
	244	+ 'conditions' => $this->nav_conditions('arrows'),
	245	+ ]
	246	+ );
	247	+ $this->add_responsive_control(
	248	+ 'previous_arrow_v_position',
	249	+ [
	250	+ 'label' => __('Vertical Orientation', 'uicore-elements'),
	251	+ 'type' => Controls_Manager::CHOOSE,
	252	+ 'options' => [
	253	+ 'top: 0; bottom: auto;' => [
	254	+ 'title' => __('Top', 'uicore-elements'),
	255	+ 'icon' => 'eicon-v-align-top',
	256	+ ],
	257	+ 'top: 0; bottom: 0; margin: auto;' => [
	258	+ 'title' => __('Center', 'uicore-elements'),
	259	+ 'icon' => 'eicon-v-align-middle',
	260	+ ],
	261	+ 'top: auto; bottom: 0' => [
	262	+ 'title' => __('Bottom', 'uicore-elements'),
	263	+ 'icon' => 'eicon-v-align-bottom',
	264	+ ],
	265	+ ],
	266	+ 'selectors' => [
	267	+ '{{WRAPPER}} .ui-e-previous' => '{{VALUE}};'
	268	+ ],
	269	+ 'default' => 'top: 0; bottom: 0; margin: auto;',
	270	+ 'conditions' => $this->nav_conditions('arrows'),
	271	+ ]
	272	+ );
	273	+ $this->add_control(
	274	+ 'previous_advanced_position',
	275	+ [
	276	+ 'label' => esc_html__('Arrow Offset', 'uicore-elements'),
	277	+ 'type' => Controls_Manager::POPOVER_TOGGLE,
	278	+ 'label_off' => esc_html__('Default', 'uicore-elements'),
	279	+ 'label_on' => esc_html__('Custom', 'uicore-elements'),
	280	+ 'return_value' => 'yes',
	281	+ 'conditions' => $this->nav_conditions('arrows'),
	282	+ ]
	283	+ );
	284	+ $this->start_popover();
180	285
181		- $this->start_controls_tab(
182		- 'previous_tab',
183		- [
184		- 'label' => esc_html__( 'Previous', 'uicore-elements' ),
185		- 'conditions' => $this->nav_conditions('arrows'),
186		- ]
187		- );
	286	+ $this->add_responsive_control(
	287	+ 'prev_arrow_h_offset',
	288	+ [
	289	+ 'label' => esc_html__('Horizontal Offset', 'uicore-elements'),
	290	+ 'type' => Controls_Manager::SLIDER,
	291	+ 'size_units' => ['px', '%',],
	292	+ 'range' => [
	293	+ 'px' => [
	294	+ 'min' => -200,
	295	+ 'max' => 200,
	296	+ 'step' => 5,
	297	+ ],
	298	+ '%' => [
	299	+ 'min' => -100,
	300	+ 'max' => 100,
	301	+ ],
	302	+ ],
	303	+ 'selectors' => [
	304	+ '{{WRAPPER}}' => '--ui-e-prev-arrow-h-off:{{SIZE}}{{UNIT}};',
	305	+ ],
	306	+ 'condition' => [
	307	+ 'previous_advanced_position' => 'yes'
	308	+ ]
	309	+ ]
	310	+ );
	311	+ $this->add_responsive_control(
	312	+ 'prev_arrow_v_offset',
	313	+ [
	314	+ 'label' => esc_html__('Vertical Offset', 'uicore-elements'),
	315	+ 'type' => Controls_Manager::SLIDER,
	316	+ 'size_units' => ['px', '%',],
	317	+ 'range' => [
	318	+ 'px' => [
	319	+ 'min' => -200,
	320	+ 'max' => 200,
	321	+ 'step' => 5,
	322	+ ],
	323	+ '%' => [
	324	+ 'min' => -100,
	325	+ 'max' => 100,
	326	+ ],
	327	+ ],
	328	+ 'selectors' => [
	329	+ '{{WRAPPER}}' => '--ui-e-prev-arrow-v-off:{{SIZE}}{{UNIT}};',
	330	+ ],
	331	+ 'condition' => [
	332	+ 'previous_advanced_position' => 'yes'
	333	+ ]
	334	+ ]
	335	+ );
	336	+ $this->add_responsive_control(
	337	+ 'prev_arrow_rotate',
	338	+ [
	339	+ 'label' => esc_html__('Rotation', 'uicore-elements'),
	340	+ 'type' => Controls_Manager::SLIDER,
	341	+ 'size_units' => ['px'],
	342	+ 'range' => [
	343	+ 'px' => [
	344	+ 'min' => 0,
	345	+ 'max' => 360,
	346	+ 'step' => 5,
	347	+ ],
	348	+ ],
	349	+ 'selectors' => [
	350	+ '{{WRAPPER}} .ui-e-previous > *' => 'rotate:{{SIZE}}deg;',
	351	+ ],
	352	+ 'condition' => [
	353	+ 'previous_advanced_position' => 'yes'
	354	+ ]
	355	+ ]
	356	+ );
188	357
189		- $this->add_control(
190		- 'previous_arrow',
191		- [
192		- 'label' => esc_html__( 'Previous Arrow Icon', 'uicore-elements' ),
193		- 'type' => Controls_Manager::ICONS,
194		- 'default' => [
195		- 'value' => 'fas fa-arrow-left',
196		- 'library' => 'fa-solid',
197		- ],
198		- 'recommended' => [
199		- 'fa-solid' => [
200		- 'arrow-alt-circle-left',
201		- 'caret-square-left',
202		- 'angle-double-left',
203		- 'angle-left',
204		- 'arrow-alt-circle-left',
205		- 'arrow-left',
206		- 'caret-left',
207		- 'caret-square-left',
208		- 'chevron-circle-left',
209		- 'chevron-left',
210		- 'long-arrow-alt-left'
211		- ]
212		- ],
213		- 'label_block' => false,
214		- 'skin' => 'inline',
215		- 'conditions' => $this->nav_conditions('arrows'),
216		- ]
217		- );
218		- $this->add_responsive_control(
219		- 'previous_arrow_h_position',
220		- [
221		- 'label' => __('Horizontal Orientation', 'uicore-elements'),
222		- 'type' => Controls_Manager::CHOOSE,
223		- 'options' => [
224		- 'left: 0; right: auto;' => [
225		- 'title' => __('Left', 'uicore-elements'),
226		- 'icon' => 'eicon-h-align-left',
227		- ],
228		- 'left: 0; right: 0; margin: auto;' => [
229		- 'title' => __('Center', 'uicore-elements'),
230		- 'icon' => 'eicon-h-align-center',
231		- ],
232		- 'left: auto; right: 0;' => [
233		- 'title' => __('Right', 'uicore-elements'),
234		- 'icon' => 'eicon-h-align-right',
235		- ],
236		- ],
237		- 'default' => 'left: 0; right: auto;',
238		- 'selectors' => [
239		- '{{WRAPPER}} .ui-e-previous' => '{{VALUE}};'
240		- ],
241		- 'conditions' => $this->nav_conditions('arrows'),
242		- ]
243		- );
244		- $this->add_responsive_control(
245		- 'previous_arrow_v_position',
246		- [
247		- 'label' => __('Vertical Orientation', 'uicore-elements'),
248		- 'type' => Controls_Manager::CHOOSE,
249		- 'options' => [
250		- 'top: 0; bottom: auto;' => [
251		- 'title' => __('Top', 'uicore-elements'),
252		- 'icon' => 'eicon-v-align-top',
253		- ],
254		- 'top: 0; bottom: 0; margin: auto;' => [
255		- 'title' => __('Center', 'uicore-elements'),
256		- 'icon' => 'eicon-v-align-middle',
257		- ],
258		- 'top: auto; bottom: 0' => [
259		- 'title' => __('Bottom', 'uicore-elements'),
260		- 'icon' => 'eicon-v-align-bottom',
261		- ],
262		- ],
263		- 'selectors' => [
264		- '{{WRAPPER}} .ui-e-previous' => '{{VALUE}};'
265		- ],
266		- 'default' => 'top: 0; bottom: 0; margin: auto;',
267		- 'conditions' => $this->nav_conditions('arrows'),
268		- ]
269		- );
270		- $this->add_control(
271		- 'previous_advanced_position',
272		- [
273		- 'label' => esc_html__( 'Arrow Offset', 'uicore-elements' ),
274		- 'type' => Controls_Manager::POPOVER_TOGGLE,
275		- 'label_off' => esc_html__( 'Default', 'uicore-elements' ),
276		- 'label_on' => esc_html__( 'Custom', 'uicore-elements' ),
277		- 'return_value' => 'yes',
278		- 'conditions' => $this->nav_conditions('arrows'),
279		- ]
280		- );
281		- $this->start_popover();
	358	+ $this->end_popover();
282	359
283		- $this->add_responsive_control(
284		- 'prev_arrow_h_offset',
285		- [
286		- 'label' => esc_html__( 'Horizontal Offset', 'uicore-elements' ),
287		- 'type' => Controls_Manager::SLIDER,
288		- 'size_units' => [ 'px', '%',],
289		- 'range' => [
290		- 'px' => [
291		- 'min' => -200,
292		- 'max' => 200,
293		- 'step' => 5,
294		- ],
295		- '%' => [
296		- 'min' => -100,
297		- 'max' => 100,
298		- ],
299		- ],
300		- 'selectors' => [
301		- '{{WRAPPER}}' => '--ui-e-prev-arrow-h-off:{{SIZE}}{{UNIT}};',
302		- ],
303		- 'condition' => [
304		- 'previous_advanced_position' => 'yes'
305		- ]
306		- ]
307		- );
308		- $this->add_responsive_control(
309		- 'prev_arrow_v_offset',
310		- [
311		- 'label' => esc_html__( 'Vertical Offset', 'uicore-elements' ),
312		- 'type' => Controls_Manager::SLIDER,
313		- 'size_units' => [ 'px', '%',],
314		- 'range' => [
315		- 'px' => [
316		- 'min' => -200,
317		- 'max' => 200,
318		- 'step' => 5,
319		- ],
320		- '%' => [
321		- 'min' => -100,
322		- 'max' => 100,
323		- ],
324		- ],
325		- 'selectors' => [
326		- '{{WRAPPER}}' => '--ui-e-prev-arrow-v-off:{{SIZE}}{{UNIT}};',
327		- ],
328		- 'condition' => [
329		- 'previous_advanced_position' => 'yes'
330		- ]
331		- ]
332		- );
333		- $this->add_responsive_control(
334		- 'prev_arrow_rotate',
335		- [
336		- 'label' => esc_html__( 'Rotation', 'uicore-elements' ),
337		- 'type' => Controls_Manager::SLIDER,
338		- 'size_units' => ['px'],
339		- 'range' => [
340		- 'px' => [
341		- 'min' => 0,
342		- 'max' => 360,
343		- 'step' => 5,
344		- ],
345		- ],
346		- 'selectors' => [
347		- '{{WRAPPER}} .ui-e-previous > *' => 'rotate:{{SIZE}}deg;',
348		- ],
349		- 'condition' => [
350		- 'previous_advanced_position' => 'yes'
351		- ]
352		- ]
353		- );
	360	+ $this->end_controls_tab();
354	361
355		- $this->end_popover();
	362	+ $this->start_controls_tab(
	363	+ 'next_tab',
	364	+ [
	365	+ 'label' => esc_html__('Next', 'uicore-elements'),
	366	+ 'conditions' => $this->nav_conditions('arrows'),
	367	+ ]
	368	+ );
356	369
357		- $this->end_controls_tab();
	370	+ $this->add_control(
	371	+ 'next_arrow',
	372	+ [
	373	+ 'label' => esc_html__('Previous Arrow Icon', 'uicore-elements'),
	374	+ 'type' => Controls_Manager::ICONS,
	375	+ 'default' => [
	376	+ 'value' => 'fas fa-arrow-right',
	377	+ 'library' => 'fa-solid',
	378	+ ],
	379	+ 'recommended' => [
	380	+ 'fa-solid' => [
	381	+ 'arrow-alt-circle-right',
	382	+ 'caret-square-right',
	383	+ 'angle-double-right',
	384	+ 'angle-right',
	385	+ 'arrow-alt-circle-right',
	386	+ 'arrow-right',
	387	+ 'caret-right',
	388	+ 'caret-square-right',
	389	+ 'chevron-circle-right',
	390	+ 'chevron-right',
	391	+ 'long-arrow-alt-right'
	392	+ ]
	393	+ ],
	394	+ 'label_block' => false,
	395	+ 'skin' => 'inline',
	396	+ 'conditions' => $this->nav_conditions('arrows'),
	397	+ ]
	398	+ );
	399	+ $this->add_responsive_control(
	400	+ 'next_arrow_h_position',
	401	+ [
	402	+ 'label' => __('Horizontal Orientation', 'uicore-elements'),
	403	+ 'type' => Controls_Manager::CHOOSE,
	404	+ 'options' => [
	405	+ 'left: 0; right: auto;' => [
	406	+ 'title' => __('Left', 'uicore-elements'),
	407	+ 'icon' => 'eicon-h-align-left',
	408	+ ],
	409	+ 'left: 0; right: 0; margin: auto;' => [
	410	+ 'title' => __('Center', 'uicore-elements'),
	411	+ 'icon' => 'eicon-h-align-center',
	412	+ ],
	413	+ 'left: auto; right: 0;' => [
	414	+ 'title' => __('Right', 'uicore-elements'),
	415	+ 'icon' => 'eicon-h-align-right',
	416	+ ],
	417	+ ],
	418	+ 'default' => 'left: auto; right: 0;',
	419	+ 'selectors' => [
	420	+ '{{WRAPPER}} .ui-e-next' => '{{VALUE}};'
	421	+ ],
	422	+ 'conditions' => $this->nav_conditions('arrows'),
	423	+ ]
	424	+ );
	425	+ $this->add_responsive_control(
	426	+ 'next_arrow_v_position',
	427	+ [
	428	+ 'label' => __('Vertical Orientation', 'uicore-elements'),
	429	+ 'type' => Controls_Manager::CHOOSE,
	430	+ 'options' => [
	431	+ 'top: 0; bottom: auto;' => [
	432	+ 'title' => __('Top', 'uicore-elements'),
	433	+ 'icon' => 'eicon-v-align-top',
	434	+ ],
	435	+ 'top: 0; bottom: 0; margin: auto;' => [
	436	+ 'title' => __('Center', 'uicore-elements'),
	437	+ 'icon' => 'eicon-v-align-middle',
	438	+ ],
	439	+ 'top: auto; bottom: 0' => [
	440	+ 'title' => __('Bottom', 'uicore-elements'),
	441	+ 'icon' => 'eicon-v-align-bottom',
	442	+ ],
	443	+ ],
	444	+ 'selectors' => [
	445	+ '{{WRAPPER}} .ui-e-next' => '{{VALUE}};'
	446	+ ],
	447	+ 'default' => 'top: 0; bottom: 0; margin: auto;',
	448	+ 'conditions' => $this->nav_conditions('arrows'),
	449	+ ]
	450	+ );
	451	+ $this->add_control(
	452	+ 'next_advanced_position',
	453	+ [
	454	+ 'label' => esc_html__('Arrow Offset', 'uicore-elements'),
	455	+ 'type' => Controls_Manager::POPOVER_TOGGLE,
	456	+ 'label_off' => esc_html__('Default', 'uicore-elements'),
	457	+ 'label_on' => esc_html__('Custom', 'uicore-elements'),
	458	+ 'return_value' => 'yes',
	459	+ 'conditions' => $this->nav_conditions('arrows'),
	460	+ ]
	461	+ );
	462	+ $this->start_popover();
	463	+ $this->add_responsive_control(
	464	+ 'next_arrow_h_offset',
	465	+ [
	466	+ 'label' => esc_html__('Horizontal Offset', 'uicore-elements'),
	467	+ 'type' => Controls_Manager::SLIDER,
	468	+ 'size_units' => ['px', '%',],
	469	+ 'range' => [
	470	+ 'px' => [
	471	+ 'min' => -200,
	472	+ 'max' => 200,
	473	+ 'step' => 5,
	474	+ ],
	475	+ '%' => [
	476	+ 'min' => -100,
	477	+ 'max' => 100,
	478	+ ],
	479	+ ],
	480	+ 'selectors' => [
	481	+ '{{WRAPPER}}' => '--ui-e-next-arrow-h-off:{{SIZE}}{{UNIT}};',
	482	+ ],
	483	+ 'condition' => [
	484	+ 'next_advanced_position' => 'yes'
	485	+ ]
	486	+ ]
	487	+ );
	488	+ $this->add_responsive_control(
	489	+ 'next_arrow_v_offset',
	490	+ [
	491	+ 'label' => esc_html__('Vertical Offset', 'uicore-elements'),
	492	+ 'type' => Controls_Manager::SLIDER,
	493	+ 'size_units' => ['px', '%',],
	494	+ 'range' => [
	495	+ 'px' => [
	496	+ 'min' => -200,
	497	+ 'max' => 200,
	498	+ 'step' => 5,
	499	+ ],
	500	+ '%' => [
	501	+ 'min' => -100,
	502	+ 'max' => 100,
	503	+ ],
	504	+ ],
	505	+ 'selectors' => [
	506	+ '{{WRAPPER}}' => '--ui-e-next-arrow-v-off:{{SIZE}}{{UNIT}};',
	507	+ ],
	508	+ 'condition' => [
	509	+ 'next_advanced_position' => 'yes'
	510	+ ]
	511	+ ]
	512	+ );
	513	+ $this->add_responsive_control(
	514	+ 'next_arrow_rotate',
	515	+ [
	516	+ 'label' => esc_html__('Rotation', 'uicore-elements'),
	517	+ 'type' => Controls_Manager::SLIDER,
	518	+ 'size_units' => ['px'],
	519	+ 'range' => [
	520	+ 'px' => [
	521	+ 'min' => 0,
	522	+ 'max' => 360,
	523	+ 'step' => 5,
	524	+ ],
	525	+ ],
	526	+ 'selectors' => [
	527	+ '{{WRAPPER}} .ui-e-next > *' => 'rotate:{{SIZE}}deg;',
	528	+ ],
	529	+ 'condition' => [
	530	+ 'previous_advanced_position' => 'yes'
	531	+ ]
	532	+ ]
	533	+ );
358	534
359		- $this->start_controls_tab(
360		- 'next_tab',
361		- [
362		- 'label' => esc_html__( 'Next', 'uicore-elements' ),
363		- 'conditions' => $this->nav_conditions('arrows'),
364		- ]
365		- );
	535	+ $this->end_popover();
366	536
367		- $this->add_control(
368		- 'next_arrow',
369		- [
370		- 'label' => esc_html__( 'Previous Arrow Icon', 'uicore-elements' ),
371		- 'type' => Controls_Manager::ICONS,
372		- 'default' => [
373		- 'value' => 'fas fa-arrow-right',
374		- 'library' => 'fa-solid',
375		- ],
376		- 'recommended' => [
377		- 'fa-solid' => [
378		- 'arrow-alt-circle-right',
379		- 'caret-square-right',
380		- 'angle-double-right',
381		- 'angle-right',
382		- 'arrow-alt-circle-right',
383		- 'arrow-right',
384		- 'caret-right',
385		- 'caret-square-right',
386		- 'chevron-circle-right',
387		- 'chevron-right',
388		- 'long-arrow-alt-right'
389		- ]
390		- ],
391		- 'label_block' => false,
392		- 'skin' => 'inline',
393		- 'conditions' => $this->nav_conditions('arrows'),
394		- ]
395		- );
396		- $this->add_responsive_control(
397		- 'next_arrow_h_position',
398		- [
399		- 'label' => __('Horizontal Orientation', 'uicore-elements'),
400		- 'type' => Controls_Manager::CHOOSE,
401		- 'options' => [
402		- 'left: 0; right: auto;' => [
403		- 'title' => __('Left', 'uicore-elements'),
404		- 'icon' => 'eicon-h-align-left',
405		- ],
406		- 'left: 0; right: 0; margin: auto;' => [
407		- 'title' => __('Center', 'uicore-elements'),
408		- 'icon' => 'eicon-h-align-center',
409		- ],
410		- 'left: auto; right: 0;' => [
411		- 'title' => __('Right', 'uicore-elements'),
412		- 'icon' => 'eicon-h-align-right',
413		- ],
414		- ],
415		- 'default' => 'left: auto; right: 0;',
416		- 'selectors' => [
417		- '{{WRAPPER}} .ui-e-next' => '{{VALUE}};'
418		- ],
419		- 'conditions' => $this->nav_conditions('arrows'),
420		- ]
421		- );
422		- $this->add_responsive_control(
423		- 'next_arrow_v_position',
424		- [
425		- 'label' => __('Vertical Orientation', 'uicore-elements'),
426		- 'type' => Controls_Manager::CHOOSE,
427		- 'options' => [
428		- 'top: 0; bottom: auto;' => [
429		- 'title' => __('Top', 'uicore-elements'),
430		- 'icon' => 'eicon-v-align-top',
431		- ],
432		- 'top: 0; bottom: 0; margin: auto;' => [
433		- 'title' => __('Center', 'uicore-elements'),
434		- 'icon' => 'eicon-v-align-middle',
435		- ],
436		- 'top: auto; bottom: 0' => [
437		- 'title' => __('Bottom', 'uicore-elements'),
438		- 'icon' => 'eicon-v-align-bottom',
439		- ],
440		- ],
441		- 'selectors' => [
442		- '{{WRAPPER}} .ui-e-next' => '{{VALUE}};'
443		- ],
444		- 'default' => 'top: 0; bottom: 0; margin: auto;',
445		- 'conditions' => $this->nav_conditions('arrows'),
446		- ]
447		- );
448		- $this->add_control(
449		- 'next_advanced_position',
450		- [
451		- 'label' => esc_html__( 'Arrow Offset', 'uicore-elements' ),
452		- 'type' => Controls_Manager::POPOVER_TOGGLE,
453		- 'label_off' => esc_html__( 'Default', 'uicore-elements' ),
454		- 'label_on' => esc_html__( 'Custom', 'uicore-elements' ),
455		- 'return_value' => 'yes',
456		- 'conditions' => $this->nav_conditions('arrows'),
457		- ]
458		- );
459		- $this->start_popover();
460		- $this->add_responsive_control(
461		- 'next_arrow_h_offset',
462		- [
463		- 'label' => esc_html__( 'Horizontal Offset', 'uicore-elements' ),
464		- 'type' => Controls_Manager::SLIDER,
465		- 'size_units' => [ 'px', '%',],
466		- 'range' => [
467		- 'px' => [
468		- 'min' => -200,
469		- 'max' => 200,
470		- 'step' => 5,
471		- ],
472		- '%' => [
473		- 'min' => -100,
474		- 'max' => 100,
475		- ],
476		- ],
477		- 'selectors' => [
478		- '{{WRAPPER}}' => '--ui-e-next-arrow-h-off:{{SIZE}}{{UNIT}};',
479		- ],
480		- 'condition' => [
481		- 'next_advanced_position' => 'yes'
482		- ]
483		- ]
484		- );
485		- $this->add_responsive_control(
486		- 'next_arrow_v_offset',
487		- [
488		- 'label' => esc_html__( 'Vertical Offset', 'uicore-elements' ),
489		- 'type' => Controls_Manager::SLIDER,
490		- 'size_units' => [ 'px', '%',],
491		- 'range' => [
492		- 'px' => [
493		- 'min' => -200,
494		- 'max' => 200,
495		- 'step' => 5,
496		- ],
497		- '%' => [
498		- 'min' => -100,
499		- 'max' => 100,
500		- ],
501		- ],
502		- 'selectors' => [
503		- '{{WRAPPER}}' => '--ui-e-next-arrow-v-off:{{SIZE}}{{UNIT}};',
504		- ],
505		- 'condition' => [
506		- 'next_advanced_position' => 'yes'
507		- ]
508		- ]
509		- );
510		- $this->add_responsive_control(
511		- 'next_arrow_rotate',
512		- [
513		- 'label' => esc_html__( 'Rotation', 'uicore-elements' ),
514		- 'type' => Controls_Manager::SLIDER,
515		- 'size_units' => ['px'],
516		- 'range' => [
517		- 'px' => [
518		- 'min' => 0,
519		- 'max' => 360,
520		- 'step' => 5,
521		- ],
522		- ],
523		- 'selectors' => [
524		- '{{WRAPPER}} .ui-e-next > *' => 'rotate:{{SIZE}}deg;',
525		- ],
526		- 'condition' => [
527		- 'previous_advanced_position' => 'yes'
528		- ]
529		- ]
530		- );
	537	+ $this->end_controls_tab();
531	538
532		- $this->end_popover();
	539	+ $this->end_controls_tabs();
533	540
534		- $this->end_controls_tab();
	541	+ $this->add_control(
	542	+ 'arrows_mobile',
	543	+ [
	544	+ 'label' => esc_html__('Hide arrows on Mobile', 'uicore-elements'),
	545	+ 'type' => Controls_Manager::SWITCHER,
	546	+ 'default' => 'yes',
	547	+ 'selectors' => [
	548	+ '(mobile){{WRAPPER}} .ui-e-button' => 'display: none',
	549	+ ],
	550	+ 'conditions' => $this->nav_conditions('arrows'),
	551	+ ]
	552	+ );
535	553
536		- $this->end_controls_tabs();
537		-
538		- $this->add_control(
539		- 'arrows_mobile',
540		- [
541		- 'label' => esc_html__( 'Hide arrows on Mobile', 'uicore-elements' ),
542		- 'type' => Controls_Manager::SWITCHER,
543		- 'default' => 'yes',
544		- 'selectors' => [
545		- '(mobile){{WRAPPER}} .ui-e-button' => 'display: none',
	554	+ $this->add_control(
	555	+ 'hr_fraction',
	556	+ [
	557	+ 'label' => esc_html__('Fraction', 'uicore-elements'),
	558	+ 'type' => Controls_Manager::HEADING,
	559	+ 'separator' => 'before',
	560	+ 'conditions' => $this->nav_conditions('fraction'),
	561	+ ]
	562	+ );
	563	+ $this->add_responsive_control(
	564	+ 'fraction_h_position',
	565	+ [
	566	+ 'label' => __('Horizontal Orientation', 'uicore-elements'),
	567	+ 'type' => Controls_Manager::CHOOSE,
	568	+ 'options' => [
	569	+ 'left: 0; right: auto;' => [
	570	+ 'title' => __('Left', 'uicore-elements'),
	571	+ 'icon' => 'eicon-h-align-left',
546	572	],
547		- 'conditions' => $this->nav_conditions('arrows'),
	573	+ 'left: 0; right: 0; margin: auto;' => [
	574	+ 'title' => __('Center', 'uicore-elements'),
	575	+ 'icon' => 'eicon-h-align-center',
	576	+ ],
	577	+ 'left: auto; right: 0;' => [
	578	+ 'title' => __('Right', 'uicore-elements'),
	579	+ 'icon' => 'eicon-h-align-right',
	580	+ ],
	581	+ ],
	582	+ 'default' => 'left: 0; right: auto;',
	583	+ 'selectors' => [
	584	+ '{{WRAPPER}} .ui-e-fraction' => '{{VALUE}};'
	585	+ ],
	586	+ 'conditions' => $this->nav_conditions('fraction'),
	587	+ ]
	588	+ );
	589	+ $this->add_responsive_control(
	590	+ 'fraction_v_position',
	591	+ [
	592	+ 'label' => __('Vertical Orientation', 'uicore-elements'),
	593	+ 'type' => Controls_Manager::CHOOSE,
	594	+ 'options' => [
	595	+ 'top: -25px; bottom: auto;' => [
	596	+ 'title' => __('Top', 'uicore-elements'),
	597	+ 'icon' => 'eicon-v-align-top',
	598	+ ],
	599	+ 'top: 0; bottom: 0; margin: auto;' => [
	600	+ 'title' => __('Center', 'uicore-elements'),
	601	+ 'icon' => 'eicon-v-align-middle',
	602	+ ],
	603	+ 'top: auto; bottom: -25px;' => [
	604	+ 'title' => __('Bottom', 'uicore-elements'),
	605	+ 'icon' => 'eicon-v-align-bottom',
	606	+ ],
	607	+ ],
	608	+ 'selectors' => [
	609	+ '{{WRAPPER}} .ui-e-fraction' => '{{VALUE}};'
	610	+ ],
	611	+ 'default' => 'bottom: -25px;',
	612	+ 'conditions' => $this->nav_conditions('fraction'),
	613	+ ]
	614	+ );
	615	+ $this->add_control(
	616	+ 'fraction_offset_toggle',
	617	+ [
	618	+ 'label' => esc_html__('Fraction Offset', 'uicore-elements'),
	619	+ 'type' => Controls_Manager::POPOVER_TOGGLE,
	620	+ 'label_off' => esc_html__('Default', 'uicore-elements'),
	621	+ 'label_on' => esc_html__('Custom', 'uicore-elements'),
	622	+ 'return_value' => 'yes',
	623	+ 'conditions' => $this->nav_conditions('fraction'),
	624	+ ]
	625	+ );
	626	+ $this->start_popover();
	627	+ $this->add_responsive_control(
	628	+ 'fraction_h_offset',
	629	+ [
	630	+ 'label' => esc_html__('Horizontal Offset', 'uicore-elements'),
	631	+ 'type' => Controls_Manager::SLIDER,
	632	+ 'size_units' => ['px', '%',],
	633	+ 'range' => [
	634	+ 'px' => [
	635	+ 'min' => -80,
	636	+ 'max' => 80,
	637	+ 'step' => 5,
	638	+ ],
	639	+ '%' => [
	640	+ 'min' => -100,
	641	+ 'max' => 100,
	642	+ ],
	643	+ ],
	644	+ 'selectors' => [
	645	+ '{{WRAPPER}}' => '--ui-e-fraction-h-off:{{SIZE}}{{UNIT}};',
	646	+ ],
	647	+ 'condition' => [
	648	+ 'fraction_offset_toggle' => 'yes'
548	649	]
549		- );
	650	+ ]
	651	+ );
	652	+ $this->add_responsive_control(
	653	+ 'fraction_v_offset',
	654	+ [
	655	+ 'label' => esc_html__('Vertical Offset', 'uicore-elements'),
	656	+ 'type' => Controls_Manager::SLIDER,
	657	+ 'size_units' => ['px', '%',],
	658	+ 'range' => [
	659	+ 'px' => [
	660	+ 'min' => -80,
	661	+ 'max' => 80,
	662	+ 'step' => 5,
	663	+ ],
	664	+ '%' => [
	665	+ 'min' => -100,
	666	+ 'max' => 100,
	667	+ ],
	668	+ ],
	669	+ 'selectors' => [
	670	+ '{{WRAPPER}}' => '--ui-e-fraction-v-off:{{SIZE}}{{UNIT}};',
	671	+ ],
	672	+ 'condition' => [
	673	+ 'fraction_offset_toggle' => 'yes'
	674	+ ]
	675	+ ]
	676	+ );
550	677
551		- $this->add_control(
552		- 'hr_fraction',
553		- [
554		- 'label' => esc_html__( 'Fraction', 'uicore-elements' ),
555		- 'type' => Controls_Manager::HEADING,
556		- 'separator' => 'before',
557		- 'conditions' => $this->nav_conditions('fraction'),
558		- ]
559		- );
560		- $this->add_responsive_control(
561		- 'fraction_h_position',
562		- [
563		- 'label' => __('Horizontal Orientation', 'uicore-elements'),
564		- 'type' => Controls_Manager::CHOOSE,
565		- 'options' => [
566		- 'left: 0; right: auto;' => [
567		- 'title' => __('Left', 'uicore-elements'),
568		- 'icon' => 'eicon-h-align-left',
569		- ],
570		- 'left: 0; right: 0; margin: auto;' => [
571		- 'title' => __('Center', 'uicore-elements'),
572		- 'icon' => 'eicon-h-align-center',
573		- ],
574		- 'left: auto; right: 0;' => [
575		- 'title' => __('Right', 'uicore-elements'),
576		- 'icon' => 'eicon-h-align-right',
577		- ],
578		- ],
579		- 'default' => 'left: 0; right: auto;',
580		- 'selectors' => [
581		- '{{WRAPPER}} .ui-e-fraction' => '{{VALUE}};'
582		- ],
583		- 'conditions' => $this->nav_conditions('fraction'),
584		- ]
585		- );
586		- $this->add_responsive_control(
587		- 'fraction_v_position',
588		- [
589		- 'label' => __('Vertical Orientation', 'uicore-elements'),
590		- 'type' => Controls_Manager::CHOOSE,
591		- 'options' => [
592		- 'top: -25px; bottom: auto;' => [
593		- 'title' => __('Top', 'uicore-elements'),
594		- 'icon' => 'eicon-v-align-top',
595		- ],
596		- 'top: 0; bottom: 0; margin: auto;' => [
597		- 'title' => __('Center', 'uicore-elements'),
598		- 'icon' => 'eicon-v-align-middle',
599		- ],
600		- 'top: auto; bottom: -25px;' => [
601		- 'title' => __('Bottom', 'uicore-elements'),
602		- 'icon' => 'eicon-v-align-bottom',
603		- ],
604		- ],
605		- 'selectors' => [
606		- '{{WRAPPER}} .ui-e-fraction' => '{{VALUE}};'
607		- ],
608		- 'default' => 'bottom: -25px;',
609		- 'conditions' => $this->nav_conditions('fraction'),
610		- ]
611		- );
612		- $this->add_control(
613		- 'fraction_offset_toggle',
614		- [
615		- 'label' => esc_html__( 'Fraction Offset', 'uicore-elements' ),
616		- 'type' => Controls_Manager::POPOVER_TOGGLE,
617		- 'label_off' => esc_html__( 'Default', 'uicore-elements' ),
618		- 'label_on' => esc_html__( 'Custom', 'uicore-elements' ),
619		- 'return_value' => 'yes',
620		- 'conditions' => $this->nav_conditions('fraction'),
621		- ]
622		- );
623		- $this->start_popover();
624		- $this->add_responsive_control(
625		- 'fraction_h_offset',
626		- [
627		- 'label' => esc_html__( 'Horizontal Offset', 'uicore-elements' ),
628		- 'type' => Controls_Manager::SLIDER,
629		- 'size_units' => [ 'px', '%',],
630		- 'range' => [
631		- 'px' => [
632		- 'min' => -80,
633		- 'max' => 80,
634		- 'step' => 5,
635		- ],
636		- '%' => [
637		- 'min' => -100,
638		- 'max' => 100,
639		- ],
640		- ],
641		- 'selectors' => [
642		- '{{WRAPPER}}' => '--ui-e-fraction-h-off:{{SIZE}}{{UNIT}};',
643		- ],
644		- 'condition' => [
645		- 'fraction_offset_toggle' => 'yes'
646		- ]
647		- ]
648		- );
649		- $this->add_responsive_control(
650		- 'fraction_v_offset',
651		- [
652		- 'label' => esc_html__( 'Vertical Offset', 'uicore-elements' ),
653		- 'type' => Controls_Manager::SLIDER,
654		- 'size_units' => [ 'px', '%',],
655		- 'range' => [
656		- 'px' => [
657		- 'min' => -80,
658		- 'max' => 80,
659		- 'step' => 5,
660		- ],
661		- '%' => [
662		- 'min' => -100,
663		- 'max' => 100,
664		- ],
665		- ],
666		- 'selectors' => [
667		- '{{WRAPPER}}' => '--ui-e-fraction-v-off:{{SIZE}}{{UNIT}};',
668		- ],
669		- 'condition' => [
670		- 'fraction_offset_toggle' => 'yes'
671		- ]
672		- ]
673		- );
	678	+ $this->end_popover();
674	679
675		- $this->end_popover();
	680	+ $this->add_control(
	681	+ 'hr_dots',
	682	+ [
	683	+ 'label' => esc_html__('Dots', 'uicore-elements'),
	684	+ 'type' => Controls_Manager::HEADING,
	685	+ 'separator' => 'before',
	686	+ 'conditions' => $this->nav_conditions('dots'),
	687	+ ]
	688	+ );
	689	+ $this->add_responsive_control(
	690	+ 'dots_h_position',
	691	+ [
	692	+ 'label' => __('Horizontal Orientation', 'uicore-elements'),
	693	+ 'type' => Controls_Manager::CHOOSE,
	694	+ 'options' => [
	695	+ 'left: 0; right: auto;' => [
	696	+ 'title' => __('Left', 'uicore-elements'),
	697	+ 'icon' => 'eicon-h-align-left',
	698	+ ],
	699	+ 'left: 0; right: 0; margin: auto;' => [
	700	+ 'title' => __('Center', 'uicore-elements'),
	701	+ 'icon' => 'eicon-h-align-center',
	702	+ ],
	703	+ 'left: auto; right: 0;' => [
	704	+ 'title' => __('Right', 'uicore-elements'),
	705	+ 'icon' => 'eicon-h-align-right',
	706	+ ],
	707	+ ],
	708	+ 'default' => 'left: 0; right: 0; margin: auto;',
	709	+ 'selectors' => [
	710	+ '{{WRAPPER}} .ui-e-dots' => '{{VALUE}};'
	711	+ ],
	712	+ 'conditions' => $this->nav_conditions('dots'),
	713	+ ]
	714	+ );
	715	+ $this->add_responsive_control(
	716	+ 'dots_v_position',
	717	+ [
	718	+ 'label' => __('Vertical Orientation', 'uicore-elements'),
	719	+ 'type' => Controls_Manager::CHOOSE,
	720	+ 'options' => [
	721	+ 'top: 0px; bottom: auto;' => [
	722	+ 'title' => __('Top', 'uicore-elements'),
	723	+ 'icon' => 'eicon-v-align-top',
	724	+ ],
	725	+ 'top: 0; bottom: 0; margin: auto' => [
	726	+ 'title' => __('Center', 'uicore-elements'),
	727	+ 'icon' => 'eicon-v-align-middle',
	728	+ ],
	729	+ 'top: auto; bottom: 0px;' => [
	730	+ 'title' => __('Bottom', 'uicore-elements'),
	731	+ 'icon' => 'eicon-v-align-bottom',
	732	+ ],
	733	+ ],
	734	+ 'selectors' => [
	735	+ '{{WRAPPER}} .ui-e-dots' => '{{VALUE}}'
	736	+ ],
	737	+ 'default' => 'top: auto; bottom: 0px;',
	738	+ 'conditions' => $this->nav_conditions('dots'),
	739	+ ]
	740	+ );
	741	+ $this->add_control(
	742	+ 'dots_advanced',
	743	+ [
	744	+ 'label' => esc_html__('Dots Offset', 'uicore-elements'),
	745	+ 'type' => Controls_Manager::POPOVER_TOGGLE,
	746	+ 'label_off' => esc_html__('Default', 'uicore-elements'),
	747	+ 'label_on' => esc_html__('Custom', 'uicore-elements'),
	748	+ 'return_value' => 'yes',
	749	+ 'conditions' => $this->nav_conditions('dots'),
	750	+ ]
	751	+ );
	752	+ $this->start_popover();
	753	+ $this->add_responsive_control(
	754	+ 'dots_h_offset',
	755	+ [
	756	+ 'label' => esc_html__('Horizontal Offset', 'uicore-elements'),
	757	+ 'type' => Controls_Manager::SLIDER,
	758	+ 'size_units' => ['px', '%',],
	759	+ 'range' => [
	760	+ 'px' => [
	761	+ 'min' => -100,
	762	+ 'max' => 100,
	763	+ 'step' => 5,
	764	+ ],
	765	+ '%' => [
	766	+ 'min' => -100,
	767	+ 'max' => 100,
	768	+ ],
	769	+ ],
	770	+ 'selectors' => [
	771	+ '{{WRAPPER}}' => '--ui-e-dots-h-off:{{SIZE}}{{UNIT}};',
	772	+ ],
	773	+ 'condition' => [
	774	+ 'dots_advanced' => 'yes'
	775	+ ]
	776	+ ]
	777	+ );
	778	+ $this->add_responsive_control(
	779	+ 'dots_v_offset',
	780	+ [
	781	+ 'label' => esc_html__('Vertical Offset', 'uicore-elements'),
	782	+ 'type' => Controls_Manager::SLIDER,
	783	+ 'size_units' => ['px', '%',],
	784	+ 'range' => [
	785	+ 'px' => [
	786	+ 'min' => -100,
	787	+ 'max' => 100,
	788	+ 'step' => 5,
	789	+ ],
	790	+ '%' => [
	791	+ 'min' => -100,
	792	+ 'max' => 100,
	793	+ ],
	794	+ ],
	795	+ 'selectors' => [
	796	+ '{{WRAPPER}}' => '--ui-e-dots-v-off:{{SIZE}}{{UNIT}};',
	797	+ ],
	798	+ 'condition' => [
	799	+ 'dots_advanced' => 'yes'
	800	+ ]
	801	+ ]
	802	+ );
	803	+ $this->add_responsive_control(
	804	+ 'dots_rotate',
	805	+ [
	806	+ 'label' => esc_html__('Rotation', 'uicore-elements'),
	807	+ 'type' => Controls_Manager::SLIDER,
	808	+ 'size_units' => ['px'],
	809	+ 'range' => [
	810	+ 'px' => [
	811	+ 'min' => 0,
	812	+ 'max' => 360,
	813	+ 'step' => 5,
	814	+ ],
	815	+ ],
	816	+ 'selectors' => [
	817	+ '{{WRAPPER}} .ui-e-dots' => 'rotate: {{SIZE}}deg;',
	818	+ ],
	819	+ 'condition' => [
	820	+ 'dots_advanced' => 'yes'
	821	+ ]
	822	+ ]
	823	+ );
	824	+ $this->end_popover();
676	825
677		- $this->add_control(
678		- 'hr_dots',
679		- [
680		- 'label' => esc_html__( 'Dots', 'uicore-elements' ),
681		- 'type' => Controls_Manager::HEADING,
682		- 'separator' => 'before',
683		- 'conditions' => $this->nav_conditions('dots'),
684		- ]
685		- );
686		- $this->add_responsive_control(
687		- 'dots_h_position',
688		- [
689		- 'label' => __('Horizontal Orientation', 'uicore-elements'),
690		- 'type' => Controls_Manager::CHOOSE,
691		- 'options' => [
692		- 'left: 0; right: auto;' => [
693		- 'title' => __('Left', 'uicore-elements'),
694		- 'icon' => 'eicon-h-align-left',
695		- ],
696		- 'left: 0; right: 0; margin: auto;' => [
697		- 'title' => __('Center', 'uicore-elements'),
698		- 'icon' => 'eicon-h-align-center',
699		- ],
700		- 'left: auto; right: 0;' => [
701		- 'title' => __('Right', 'uicore-elements'),
702		- 'icon' => 'eicon-h-align-right',
703		- ],
704		- ],
705		- 'default' => 'left: 0; right: 0; margin: auto;',
706		- 'selectors' => [
707		- '{{WRAPPER}} .ui-e-dots' => '{{VALUE}};'
708		- ],
709		- 'conditions' => $this->nav_conditions('dots'),
710		- ]
711		- );
712		- $this->add_responsive_control(
713		- 'dots_v_position',
714		- [
715		- 'label' => __('Vertical Orientation', 'uicore-elements'),
716		- 'type' => Controls_Manager::CHOOSE,
717		- 'options' => [
718		- 'top: 0px; bottom: auto;' => [
719		- 'title' => __('Top', 'uicore-elements'),
720		- 'icon' => 'eicon-v-align-top',
721		- ],
722		- 'top: 0; bottom: 0; margin: auto' => [
723		- 'title' => __('Center', 'uicore-elements'),
724		- 'icon' => 'eicon-v-align-middle',
725		- ],
726		- 'top: auto; bottom: 0px;' => [
727		- 'title' => __('Bottom', 'uicore-elements'),
728		- 'icon' => 'eicon-v-align-bottom',
729		- ],
730		- ],
731		- 'selectors' => [
732		- '{{WRAPPER}} .ui-e-dots' => '{{VALUE}}'
733		- ],
734		- 'default' => 'top: auto; bottom: 0px;',
735		- 'conditions' => $this->nav_conditions('dots'),
736		- ]
737		- );
738		- $this->add_control(
739		- 'dots_advanced',
740		- [
741		- 'label' => esc_html__( 'Dots Offset', 'uicore-elements' ),
742		- 'type' => Controls_Manager::POPOVER_TOGGLE,
743		- 'label_off' => esc_html__( 'Default', 'uicore-elements' ),
744		- 'label_on' => esc_html__( 'Custom', 'uicore-elements' ),
745		- 'return_value' => 'yes',
746		- 'conditions' => $this->nav_conditions('dots'),
747		- ]
748		- );
749		- $this->start_popover();
750		- $this->add_responsive_control(
751		- 'dots_h_offset',
752		- [
753		- 'label' => esc_html__( 'Horizontal Offset', 'uicore-elements' ),
754		- 'type' => Controls_Manager::SLIDER,
755		- 'size_units' => [ 'px', '%',],
756		- 'range' => [
757		- 'px' => [
758		- 'min' => -100,
759		- 'max' => 100,
760		- 'step' => 5,
761		- ],
762		- '%' => [
763		- 'min' => -100,
764		- 'max' => 100,
765		- ],
766		- ],
767		- 'selectors' => [
768		- '{{WRAPPER}}' => '--ui-e-dots-h-off:{{SIZE}}{{UNIT}};',
769		- ],
770		- 'condition' => [
771		- 'dots_advanced' => 'yes'
772		- ]
773		- ]
774		- );
775		- $this->add_responsive_control(
776		- 'dots_v_offset',
777		- [
778		- 'label' => esc_html__( 'Vertical Offset', 'uicore-elements' ),
779		- 'type' => Controls_Manager::SLIDER,
780		- 'size_units' => [ 'px', '%',],
781		- 'range' => [
782		- 'px' => [
783		- 'min' => -100,
784		- 'max' => 100,
785		- 'step' => 5,
786		- ],
787		- '%' => [
788		- 'min' => -100,
789		- 'max' => 100,
790		- ],
791		- ],
792		- 'selectors' => [
793		- '{{WRAPPER}}' => '--ui-e-dots-v-off:{{SIZE}}{{UNIT}};',
794		- ],
795		- 'condition' => [
796		- 'dots_advanced' => 'yes'
797		- ]
798		- ]
799		- );
800		- $this->add_responsive_control(
801		- 'dots_rotate',
802		- [
803		- 'label' => esc_html__( 'Rotation', 'uicore-elements' ),
804		- 'type' => Controls_Manager::SLIDER,
805		- 'size_units' => [ 'px'],
806		- 'range' => [
807		- 'px' => [
808		- 'min' => 0,
809		- 'max' => 360,
810		- 'step' => 5,
811		- ],
812		- ],
813		- 'selectors' => [
814		- '{{WRAPPER}} .ui-e-dots' => 'rotate: {{SIZE}}deg;',
815		- ],
816		- 'condition' => [
817		- 'dots_advanced' => 'yes'
818		- ]
819		- ]
820		- );
821		- $this->end_popover();
822		-
823		- $this->end_controls_section();
824		- }
825		- function TRAIT_register_carousel_settings_controls()
826		- {
827		- $this->add_control(
828		- 'animation_style',
829		- [
830		- 'label' => __('Animation', 'uicore-elements'),
831		- 'type' => Controls_Manager::SELECT,
832		- 'default' => 'circular',
833		- 'options' => [
834		- 'circular' => esc_html__('Circular', 'uicore-elements'),
835		- 'fade_blur' => esc_html__('Fade Blur', 'uicore-elements'),
	826	+ $this->end_controls_section();
	827	+ }
	828	+ function TRAIT_register_carousel_settings_controls()
	829	+ {
	830	+ $this->add_control(
	831	+ 'animation_style',
	832	+ [
	833	+ 'label' => __('Animation', 'uicore-elements'),
	834	+ 'type' => Controls_Manager::SELECT,
	835	+ 'default' => 'circular',
	836	+ 'options' => [
	837	+ 'circular' => esc_html__('Circular', 'uicore-elements'),
	838	+ 'fade_blur' => esc_html__('Fade Blur', 'uicore-elements'),
836	839	'marquee' => esc_html__('Marquee', 'uicore-elements'),
837	840	'default' => esc_html__('Default', 'uicore-elements'),
838		- ],
839		- 'prefix_class' => 'ui-e-animation-',
840		- 'render_type' => 'template',
841		- 'frontend_available' => true,
842		- ]
843		- );
844		- $this->add_responsive_control(
845		- 'slides_per_view',
846		- [
847		- 'label' => __( 'Slides per View', 'uicore-elements' ),
848		- 'type' => Controls_Manager::SELECT,
849		- 'desktop_default' => 3,
850		- 'tablet_default' => 2,
851		- 'mobile_default' => 1,
852		- 'options' => [
853		- 1 => '1',
854		- 2 => '2',
855		- 3 => '3',
856		- 4 => '4',
857		- 5 => '5',
858		- 6 => '6',
859		- 7 => '7',
860		- 8 => '8',
861		- ],
862		- 'render_type' => 'template',
863		- 'frontend_available' => true,
864		- 'condition' => [
865		- 'animation_style!' => ['horizontal']
866		- ]
867		- ]
868		- );
869		- $this->add_control(
870		- 'show_hidden',
871		- [
872		- 'label' => esc_html__( 'Show Hidden Items', 'uicore-elements' ),
873		- 'type' => \Elementor\Controls_Manager::SELECT,
874		- 'default' => 'hidden',
875		- 'options' => [
876		- 'hidden' => esc_html__( 'Hidden', 'uicore-elements' ),
877		- 'left' => esc_html__( 'Show Left', 'uicore-elements' ),
878		- 'right' => esc_html__( 'Show Right', 'uicore-elements' ),
879		- ],
880		- 'condition' => [
881		- 'animation_style' => ['fade_blur', 'circular']
882		- ],
883		- 'frontend_available' => true,
884		- ]
885		- );
	841	+ ],
	842	+ 'prefix_class' => 'ui-e-animation-',
	843	+ 'render_type' => 'template',
	844	+ 'frontend_available' => true,
	845	+ ]
	846	+ );
	847	+ $this->add_responsive_control(
	848	+ 'slides_per_view',
	849	+ [
	850	+ 'label' => __('Slides per View', 'uicore-elements'),
	851	+ 'type' => Controls_Manager::SELECT,
	852	+ 'desktop_default' => 3,
	853	+ 'tablet_default' => 2,
	854	+ 'mobile_default' => 1,
	855	+ 'options' => [
	856	+ 1 => '1',
	857	+ 2 => '2',
	858	+ 3 => '3',
	859	+ 4 => '4',
	860	+ 5 => '5',
	861	+ 6 => '6',
	862	+ 7 => '7',
	863	+ 8 => '8',
	864	+ ],
	865	+ 'render_type' => 'template',
	866	+ 'frontend_available' => true,
	867	+ 'content_classes' => 'elementor-control-field-select-small',
	868	+ 'conditions' => [
	869	+ 'relation' => 'or',
	870	+ 'terms' => [
	871	+ [
	872	+ 'name' => 'animation_style',
	873	+ 'operator' => '!==',
	874	+ 'value' => 'marquee',
	875	+ ],
	876	+ [
	877	+ 'relation' => 'and',
	878	+ 'terms' => [
	879	+ [
	880	+ 'name' => 'animation_style',
	881	+ 'operator' => '===',
	882	+ 'value' => 'marquee',
	883	+ ],
	884	+ [
	885	+ 'name' => 'vertical',
	886	+ 'operator' => '!==',
	887	+ 'value' => 'true',
	888	+ ]
	889	+ ],
	890	+ ],
	891	+ ]
	892	+ ]
	893	+ ]
	894	+ );
886	895	$this->add_control(
887		- 'center_slides',
888		- [
889		- 'label' => esc_html__('Center Slides', 'uicore-elements'),
890		- 'type' => Controls_Manager::SWITCHER,
891		- 'return_value' => 'true',
892		- 'condition' => [
893		- 'animation_style!' => 'marquee',
	896	+ 'show_hidden',
	897	+ [
	898	+ 'label' => esc_html__('Show Hidden Items', 'uicore-elements'),
	899	+ 'type' => \Elementor\Controls_Manager::SELECT,
	900	+ 'default' => 'hidden',
	901	+ 'options' => [
	902	+ 'hidden' => esc_html__('Hidden', 'uicore-elements'),
	903	+ 'left' => esc_html__('Show Left', 'uicore-elements'),
	904	+ 'right' => esc_html__('Show Right', 'uicore-elements'),
894	905	],
	906	+ 'content_classes' => 'elementor-control-field-select-small',
	907	+ 'condition' => [
	908	+ 'animation_style' => ['fade_blur', 'circular']
	909	+ ],
895	910	'frontend_available' => true,
896		- ]
897		- );
	911	+ ]
	912	+ );
898	913	$this->add_control(
899		- 'marquee_speed',
900		- [
901		- 'label' => esc_html__('Marquee Speed', 'uicore-elements'),
902		- 'type' => Controls_Manager::NUMBER,
903		- 'default' => 5000,
	914	+ 'marquee_speed',
	915	+ [
	916	+ 'label' => esc_html__('Marquee Speed', 'uicore-elements'),
	917	+ 'type' => Controls_Manager::NUMBER,
	918	+ 'default' => 5000,
904	919	'min' => 100,
905	920	'max' => 10000,
906	921	'step' => 100,
907		- 'condition' => [
908		- 'animation_style' => 'marquee',
	922	+ 'condition' => [
	923	+ 'animation_style' => 'marquee',
909	924	],
910	925	'frontend_available' => true,
911		- ]
912		- );
913		- $this->add_control(
914		- 'fade_edges',
915		- [
916		- 'label' => __('Fade Edges', 'uicore-elements'),
917		- 'type' => Controls_Manager::SWITCHER,
918		- 'prefix_class' => 'ui-e-fade-edges-',
919		- ]
920		- );
	926	+ ]
	927	+ );
921	928	$this->add_control(
	929	+ 'center_slides',
	930	+ [
	931	+ 'label' => esc_html__('Center Slides', 'uicore-elements'),
	932	+ 'type' => Controls_Manager::SWITCHER,
	933	+ 'return_value' => 'true',
	934	+ 'condition' => [
	935	+ 'animation_style!' => 'marquee',
	936	+ ],
	937	+ 'frontend_available' => true,
	938	+ ]
	939	+ );
	940	+ $this->add_control(
	941	+ 'vertical',
	942	+ [
	943	+ 'label' => __('Vertical Scroll', 'uicore-elements'),
	944	+ 'type' => Controls_Manager::SWITCHER,
	945	+ 'return_value' => 'true',
	946	+ 'render_type' => 'template',
	947	+ 'condition' => [
	948	+ 'animation_style' => 'marquee',
	949	+ ],
	950	+ 'prefix_class' => 'ui-e-vertical-',
	951	+ 'frontend_available' => true,
	952	+ 'selectors' => [
	953	+ '{{WRAPPER}} .ui-e-carousel' => '--ui-e-fade-edge-direction: bottom;',
	954	+ ],
	955	+ ]
	956	+ );
	957	+ $this->add_control(
	958	+ 'vertical_slide_height',
	959	+ [
	960	+ 'label' => esc_html__('Carousel Height', 'uicore-elements'),
	961	+ 'type' => Controls_Manager::SLIDER,
	962	+ 'size_units' => ['px', 'vh', 'custom'],
	963	+ 'range' => [
	964	+ 'px' => [
	965	+ 'min' => 10,
	966	+ 'max' => 1000,
	967	+ 'step' => 5,
	968	+ ],
	969	+ 'vh' => [
	970	+ 'min' => 1,
	971	+ 'max' => 100,
	972	+ ],
	973	+ ],
	974	+ 'default' => [
	975	+ 'unit' => 'px',
	976	+ 'size' => 350,
	977	+ ],
	978	+ 'condition' => [
	979	+ 'animation_style' => 'marquee',
	980	+ 'vertical' => 'true',
	981	+ ],
	982	+ 'selectors' => [
	983	+ '{{WRAPPER}} .ui-e-carousel' => 'height: {{SIZE}}{{UNIT}} !important;',
	984	+ ],
	985	+ ]
	986	+ );
	987	+ $this->add_control(
	988	+ 'fade_edges',
	989	+ [
	990	+ 'label' => __('Fade Edges', 'uicore-elements'),
	991	+ 'type' => Controls_Manager::SWITCHER,
	992	+ 'prefix_class' => 'ui-e-fade-edges-',
	993	+ 'selectors' => [
	994	+ '{{WRAPPER}}' => '--ui-e-fade-edge-direction: right;',
	995	+ ],
	996	+ ]
	997	+ );
	998	+ $this->add_control(
922	999	'fade_edge_opacity',
923	1000	[
924		- 'label' => esc_html__( 'Fade opacity', 'uicore-elements' ),
	1001	+ 'label' => esc_html__('Fade opacity', 'uicore-elements'),
925	1002	'type' => Controls_Manager::NUMBER,
926	1003	'default' => 0.35,
927	1004	'min' => 0,
928	1005	'max' => 1,
		@@ -937,9 +1014,9 @@
937	1014	);
938	1015	$this->add_control(
939	1016	'fade_edge_deep',
940	1017	[
941		- 'label' => esc_html__( 'Fade deepening', 'uicore-elements' ),
	1018	+ 'label' => esc_html__('Fade deepening', 'uicore-elements'),
942	1019	'type' => Controls_Manager::NUMBER,
943	1020	'default' => 30,
944	1021	'min' => 0,
945	1022	'max' => 50,
		@@ -951,743 +1028,794 @@
951	1028	'{{WRAPPER}}' => '--ui-e-fade-edge-deep: {{VALUE}}%;',
952	1029	],
953	1030	]
954	1031	);
955		- $this->add_control(
956		- 'autoplay',
957		- [
958		- 'label' => __('Autoplay', 'uicore-elements'),
959		- 'type' => Controls_Manager::SWITCHER,
960		- 'return_value' => 'yes',
	1032	+ $this->add_control(
	1033	+ 'autoplay',
	1034	+ [
	1035	+ 'label' => __('Autoplay', 'uicore-elements'),
	1036	+ 'type' => Controls_Manager::SWITCHER,
	1037	+ 'return_value' => 'yes',
961	1038	'condition' => [
962	1039	'animation_style!' => 'marquee',
963		- ],
	1040	+ ],
964	1041	'frontend_available' => true,
965		- ]
966		- );
967		- $this->add_control(
968		- 'autoplay_speed',
969		- [
970		- 'label' => esc_html__('Autoplay Speed', 'uicore-elements'),
971		- 'type' => Controls_Manager::NUMBER,
972		- 'default' => 5000,
	1042	+ ]
	1043	+ );
	1044	+
	1045	+ $this->add_control(
	1046	+ 'autoplay_speed',
	1047	+ [
	1048	+ 'label' => esc_html__('Autoplay Speed', 'uicore-elements'),
	1049	+ 'type' => Controls_Manager::NUMBER,
	1050	+ 'default' => 5000,
973	1051	'min' => 100,
974	1052	'max' => 10000,
975	1053	'step' => 100,
976		- 'condition' => [
977		- 'autoplay' => 'yes',
	1054	+ 'condition' => [
	1055	+ 'autoplay' => 'yes',
978	1056	'animation_style!' => 'marquee',
979	1057	],
980	1058	'frontend_available' => true,
981		- ]
982		- );
983		- $this->add_control(
984		- 'pause_on_hover',
985		- [
986		- 'label' => esc_html__('Pause on Hover', 'uicore-elements'),
987		- 'type' => Controls_Manager::SWITCHER,
988		- 'return_value' => 'true',
	1059	+ ]
	1060	+ );
	1061	+ $this->add_control(
	1062	+ 'reverse',
	1063	+ [
	1064	+ 'label' => __('Reverse Direction', 'uicore-elements'),
	1065	+ 'type' => Controls_Manager::SWITCHER,
	1066	+ 'return_value' => 'true',
	1067	+ 'render_type' => 'template',
	1068	+ 'conditions' => [
	1069	+ 'relation' => 'or',
	1070	+ 'terms' => [
	1071	+ [
	1072	+ 'name' => 'animation_style',
	1073	+ 'operator' => '===',
	1074	+ 'value' => 'marquee',
	1075	+ ],
	1076	+ [
	1077	+ 'name' => 'autoplay',
	1078	+ 'operator' => '===',
	1079	+ 'value' => 'yes',
	1080	+ ],
	1081	+ ],
	1082	+ ],
	1083	+ 'frontend_available' => true,
	1084	+ ]
	1085	+ );
	1086	+ $this->add_control(
	1087	+ 'pause_on_hover',
	1088	+ [
	1089	+ 'label' => esc_html__('Pause on Hover', 'uicore-elements'),
	1090	+ 'type' => Controls_Manager::SWITCHER,
	1091	+ 'return_value' => 'true',
989	1092	'separator' => 'after',
990		- 'condition' => [
991		- 'autoplay' => 'yes',
	1093	+ 'condition' => [
	1094	+ 'autoplay' => 'yes',
992	1095	'animation_style!' => 'marquee',
993	1096	],
994	1097	'frontend_available' => true,
995		- ]
996		- );
997		- $this->add_control(
998		- 'grab_cursor',
999		- [
1000		- 'label' => __('Grab Cursor', 'uicore-elements'),
1001		- 'type' => Controls_Manager::SWITCHER,
1002		- 'default' => 'yes',
	1098	+ ]
	1099	+ );
	1100	+ $this->add_control(
	1101	+ 'grab_cursor',
	1102	+ [
	1103	+ 'label' => __('Grab Cursor', 'uicore-elements'),
	1104	+ 'type' => Controls_Manager::SWITCHER,
	1105	+ 'default' => 'yes',
1003	1106	'condition' => [
1004	1107	'animation_style!' => 'marquee',
1005		- ],
	1108	+ ],
1006	1109	'frontend_available' => true,
1007		- ]
1008		- );
1009		- $this->add_control(
1010		- 'loop',
1011		- [
1012		- 'label' => __('Loop', 'uicore-elements'),
1013		- 'type' => Controls_Manager::SWITCHER,
1014		- 'default' => 'true',
1015		- 'return_value' => 'true',
	1110	+ ]
	1111	+ );
	1112	+ $this->add_control(
	1113	+ 'loop',
	1114	+ [
	1115	+ 'label' => __('Loop', 'uicore-elements'),
	1116	+ 'type' => Controls_Manager::SWITCHER,
	1117	+ 'default' => 'true',
	1118	+ 'return_value' => 'true',
1016	1119	'condition' => [
1017	1120	'animation_style!' => 'marquee',
1018		- ],
	1121	+ ],
1019	1122	'frontend_available' => true,
1020		- ]
1021		- );
1022		- $this->add_control(
1023		- 'overflow_container',
1024		- [
1025		- 'label' => esc_html__( 'Overflow Container', 'uicore-elements' ),
1026		- 'type' => \Elementor\Controls_Manager::HIDDEN,
1027		- 'default' => Plugin::$instance->experiments->is_feature_active('container') ? 'container' : 'column',
1028		- 'frontend_available' => true, // return on the JS the container type (flexbox or column) for overflow
1029		- ]
1030		- );
1031		- $this->add_control(
1032		- 'observer',
1033		- [
1034		- 'label' => __('Observer', 'uicore-elements'),
1035		- 'description' => __('Use it when the carousel is placed in a hidden place (ex: tab, accordion).', 'uicore-elements'),
1036		- 'type' => Controls_Manager::SWITCHER,
1037		- 'return_value' => 'yes',
1038		- 'frontend_available' => true,
1039		- ]
1040		- );
1041		- }
1042		- //Navigation Style Controls
1043		- function TRAIT_register_navigation_style_controls()
1044		- {
	1123	+ ]
	1124	+ );
	1125	+ $this->add_control(
	1126	+ 'overflow_container',
	1127	+ [
	1128	+ 'label' => esc_html__('Overflow Container', 'uicore-elements'),
	1129	+ 'type' => \Elementor\Controls_Manager::HIDDEN,
	1130	+ 'default' => Plugin::$instance->experiments->is_feature_active('container') ? 'container' : 'column',
	1131	+ 'frontend_available' => true, // return on the JS the container type (flexbox or column) for overflow
	1132	+ ]
	1133	+ );
	1134	+ $this->add_control(
	1135	+ 'observer',
	1136	+ [
	1137	+ 'label' => __('Observer', 'uicore-elements'),
	1138	+ 'description' => __('Use it when the carousel is placed in a hidden place (ex: tab, accordion).', 'uicore-elements'),
	1139	+ 'type' => Controls_Manager::SWITCHER,
	1140	+ 'return_value' => 'yes',
	1141	+ 'frontend_available' => true,
	1142	+ ]
	1143	+ );
	1144	+ }
	1145	+ //Navigation Style Controls
	1146	+ function TRAIT_register_navigation_style_controls()
	1147	+ {
1045	1148
1046		- $this->start_controls_section(
	1149	+ $this->start_controls_section(
1047	1150	'section_style_navigation',
1048	1151	[
1049	1152	'label' => esc_html__('Navigation', 'uicore-elements'),
1050	1153	'tab' => Controls_Manager::TAB_STYLE,
1051		- 'conditions' => [
1052		- 'terms' => [
1053		- [
1054		- 'name' => 'navigation',
1055		- 'operator' => '!=',
1056		- 'value' => '',
1057		- ],
1058		- ],
1059		- ],
	1154	+ 'conditions' => [
	1155	+ 'terms' => [
	1156	+ [
	1157	+ 'name' => 'navigation',
	1158	+ 'operator' => '!=',
	1159	+ 'value' => '',
	1160	+ ],
	1161	+ ],
	1162	+ ],
1060	1163	]
1061	1164	);
1062	1165
1063		- $this->add_control(
1064		- 'arrows_heading',
1065		- [
1066		- 'label' => __('Arrows', 'uicore-elements'),
1067		- 'type' => Controls_Manager::HEADING,
1068		- 'conditions' => $this->nav_conditions('arrows'),
1069		- ]
1070		- );
	1166	+ $this->add_control(
	1167	+ 'arrows_heading',
	1168	+ [
	1169	+ 'label' => __('Arrows', 'uicore-elements'),
	1170	+ 'type' => Controls_Manager::HEADING,
	1171	+ 'conditions' => $this->nav_conditions('arrows'),
	1172	+ ]
	1173	+ );
1071	1174
1072		- $this->start_controls_tabs('tabs_navigation_arrows_style');
	1175	+ $this->start_controls_tabs('tabs_navigation_arrows_style');
1073	1176
1074		- $this->start_controls_tab(
1075		- 'tabs_nav_arrows_normal',
1076		- [
1077		- 'label' => __('Normal', 'uicore-elements'),
1078		- 'conditions' => $this->nav_conditions('arrows'),
1079		- ]
1080		- );
	1177	+ $this->start_controls_tab(
	1178	+ 'tabs_nav_arrows_normal',
	1179	+ [
	1180	+ 'label' => __('Normal', 'uicore-elements'),
	1181	+ 'conditions' => $this->nav_conditions('arrows'),
	1182	+ ]
	1183	+ );
1081	1184
1082		- $this->add_control(
1083		- 'arrows_color',
1084		- [
1085		- 'label' => __('Color', 'uicore-elements'),
1086		- 'type' => Controls_Manager::COLOR,
1087		- 'selectors' => [
1088		- '{{WRAPPER}} .ui-e-button i' => 'color: {{VALUE}}',
1089		- '{{WRAPPER}} .ui-e-button svg' => 'fill: {{VALUE}}',
1090		- ],
1091		- 'conditions' => $this->nav_conditions('arrows'),
1092		- ]
1093		- );
1094		- $this->add_control(
1095		- 'arrows_background',
1096		- [
1097		- 'label' => __('Background', 'uicore-elements'),
1098		- 'type' => Controls_Manager::COLOR,
1099		- 'selectors' => [
1100		- '{{WRAPPER}} .ui-e-button' => 'background-color: {{VALUE}}',
1101		- ],
1102		- 'conditions' => $this->nav_conditions('arrows'),
1103		- ]
1104		- );
1105		- $this->add_group_control(
1106		- Group_Control_Border::get_type(),
1107		- [
1108		- 'name' => 'nav_arrows_border',
1109		- 'selector' => '{{WRAPPER}} .ui-e-button',
1110		- 'conditions' => $this->nav_conditions('arrows'),
1111		- ]
1112		- );
1113		- $this->add_control(
1114		- 'arrows_radius',
1115		- [
1116		- 'label' => __('Border Radius', 'uicore-elements'),
1117		- 'type' => Controls_Manager::DIMENSIONS,
1118		- 'size_units' => ['px', '%'],
1119		- 'selectors' => [
1120		- '{{WRAPPER}} .ui-e-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1121		- ],
1122		- 'conditions' => $this->nav_conditions('arrows'),
1123		- ]
1124		- );
1125		- $this->add_control(
1126		- 'arrows_padding',
1127		- [
1128		- 'label' => esc_html__('Padding', 'uicore-elements'),
1129		- 'type' => Controls_Manager::DIMENSIONS,
1130		- 'size_units' => ['px', 'em', '%'],
1131		- 'selectors' => [
1132		- '{{WRAPPER}} .ui-e-button' => 'padding: {{TOP}}{{UNIT || 0}} {{RIGHT}}{{UNIT || 0}} {{BOTTOM}}{{UNIT || 0}} {{LEFT}}{{UNIT || 0}};',
1133		- ],
1134		- 'conditions' => $this->nav_conditions('arrows'),
1135		- ]
1136		- );
1137		- $this->add_responsive_control(
1138		- 'arrows_size',
1139		- [
1140		- 'label' => __('Size', 'uicore-elements'),
1141		- 'type' => Controls_Manager::SLIDER,
1142		- 'range' => [
1143		- 'px' => [
1144		- 'min' => 10,
1145		- 'max' => 100,
1146		- ],
1147		- ],
1148		- 'default' => [
1149		- 'size' => 16,
1150		- 'unit' => 'px'
1151		- ],
1152		- 'selectors' => [
1153		- '{{WRAPPER}} .ui-e-button i' => 'font-size: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
1154		- '{{WRAPPER}} .ui-e-button svg' => 'width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};',
1155		- ],
1156		- 'conditions' => $this->nav_conditions('arrows'),
1157		- ]
1158		- );
1159		- $this->add_group_control(
1160		- Group_Control_Box_Shadow::get_type(),
1161		- [
1162		- 'name' => 'arrows_box_shadow',
1163		- 'selector' => '{{WRAPPER}} .ui-e-button',
1164		- 'conditions' => $this->nav_conditions('arrows'),
1165		- ]
1166		- );
	1185	+ $this->add_control(
	1186	+ 'arrows_color',
	1187	+ [
	1188	+ 'label' => __('Color', 'uicore-elements'),
	1189	+ 'type' => Controls_Manager::COLOR,
	1190	+ 'selectors' => [
	1191	+ '{{WRAPPER}} .ui-e-button i' => 'color: {{VALUE}}',
	1192	+ '{{WRAPPER}} .ui-e-button svg' => 'fill: {{VALUE}}',
	1193	+ ],
	1194	+ 'conditions' => $this->nav_conditions('arrows'),
	1195	+ ]
	1196	+ );
	1197	+ $this->add_control(
	1198	+ 'arrows_background',
	1199	+ [
	1200	+ 'label' => __('Background', 'uicore-elements'),
	1201	+ 'type' => Controls_Manager::COLOR,
	1202	+ 'selectors' => [
	1203	+ '{{WRAPPER}} .ui-e-button' => 'background-color: {{VALUE}}',
	1204	+ ],
	1205	+ 'conditions' => $this->nav_conditions('arrows'),
	1206	+ ]
	1207	+ );
	1208	+ $this->add_group_control(
	1209	+ Group_Control_Border::get_type(),
	1210	+ [
	1211	+ 'name' => 'nav_arrows_border',
	1212	+ 'selector' => '{{WRAPPER}} .ui-e-button',
	1213	+ 'conditions' => $this->nav_conditions('arrows'),
	1214	+ ]
	1215	+ );
	1216	+ $this->add_responsive_control(
	1217	+ 'arrows_radius',
	1218	+ [
	1219	+ 'label' => __('Border Radius', 'uicore-elements'),
	1220	+ 'type' => Controls_Manager::DIMENSIONS,
	1221	+ 'size_units' => ['px', '%'],
	1222	+ 'selectors' => [
	1223	+ '{{WRAPPER}} .ui-e-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	1224	+ ],
	1225	+ 'conditions' => $this->nav_conditions('arrows'),
	1226	+ ]
	1227	+ );
	1228	+ $this->add_responsive_control(
	1229	+ 'arrows_padding',
	1230	+ [
	1231	+ 'label' => esc_html__('Padding', 'uicore-elements'),
	1232	+ 'type' => Controls_Manager::DIMENSIONS,
	1233	+ 'size_units' => ['px', 'em', '%'],
	1234	+ 'selectors' => [
	1235	+ '{{WRAPPER}} .ui-e-button' => 'padding: {{TOP}}{{UNIT || 0}} {{RIGHT}}{{UNIT || 0}} {{BOTTOM}}{{UNIT || 0}} {{LEFT}}{{UNIT || 0}};',
	1236	+ ],
	1237	+ 'conditions' => $this->nav_conditions('arrows'),
	1238	+ ]
	1239	+ );
	1240	+ $this->add_responsive_control(
	1241	+ 'arrows_size',
	1242	+ [
	1243	+ 'label' => __('Size', 'uicore-elements'),
	1244	+ 'type' => Controls_Manager::SLIDER,
	1245	+ 'range' => [
	1246	+ 'px' => [
	1247	+ 'min' => 10,
	1248	+ 'max' => 100,
	1249	+ ],
	1250	+ ],
	1251	+ 'default' => [
	1252	+ 'size' => 16,
	1253	+ 'unit' => 'px'
	1254	+ ],
	1255	+ 'selectors' => [
	1256	+ '{{WRAPPER}} .ui-e-button i' => 'font-size: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
	1257	+ '{{WRAPPER}} .ui-e-button svg' => 'width: {{SIZE}}{{UNIT}};height: {{SIZE}}{{UNIT}};',
	1258	+ ],
	1259	+ 'conditions' => $this->nav_conditions('arrows'),
	1260	+ ]
	1261	+ );
	1262	+ $this->add_group_control(
	1263	+ Group_Control_Box_Shadow::get_type(),
	1264	+ [
	1265	+ 'name' => 'arrows_box_shadow',
	1266	+ 'selector' => '{{WRAPPER}} .ui-e-button',
	1267	+ 'conditions' => $this->nav_conditions('arrows'),
	1268	+ ]
	1269	+ );
1167	1270
1168		- $this->end_controls_tab();
	1271	+ $this->end_controls_tab();
1169	1272
1170		- $this->start_controls_tab(
1171		- 'tabs_nav_arrows_hover',
1172		- [
1173		- 'label' => __('Hover', 'uicore-elements'),
1174		- 'conditions' => $this->nav_conditions('arrows'),
1175		- ]
1176		- );
	1273	+ $this->start_controls_tab(
	1274	+ 'tabs_nav_arrows_hover',
	1275	+ [
	1276	+ 'label' => __('Hover', 'uicore-elements'),
	1277	+ 'conditions' => $this->nav_conditions('arrows'),
	1278	+ ]
	1279	+ );
1177	1280
1178		- $this->add_control(
1179		- 'arrows_hover_color',
1180		- [
1181		- 'label' => __('Color', 'uicore-elements'),
1182		- 'type' => Controls_Manager::COLOR,
1183		- 'selectors' => [
1184		- '{{WRAPPER}} .ui-e-button:hover i' => 'color: {{VALUE}}',
1185		- '{{WRAPPER}} .ui-e-button:hover svg' => 'fill: {{VALUE}}',
1186		- ],
1187		- 'conditions' => $this->nav_conditions('arrows'),
1188		- ]
1189		- );
1190		- $this->add_control(
1191		- 'arrows_hover_background',
1192		- [
1193		- 'label' => __('Background', 'uicore-elements'),
1194		- 'type' => Controls_Manager::COLOR,
1195		- 'selectors' => [
1196		- '{{WRAPPER}} .ui-e-button:hover' => 'background-color: {{VALUE}}',
	1281	+ $this->add_control(
	1282	+ 'arrows_hover_color',
	1283	+ [
	1284	+ 'label' => __('Color', 'uicore-elements'),
	1285	+ 'type' => Controls_Manager::COLOR,
	1286	+ 'selectors' => [
	1287	+ '{{WRAPPER}} .ui-e-button:hover i' => 'color: {{VALUE}}',
	1288	+ '{{WRAPPER}} .ui-e-button:hover svg' => 'fill: {{VALUE}}',
	1289	+ ],
	1290	+ 'conditions' => $this->nav_conditions('arrows'),
	1291	+ ]
	1292	+ );
	1293	+ $this->add_control(
	1294	+ 'arrows_hover_background',
	1295	+ [
	1296	+ 'label' => __('Background', 'uicore-elements'),
	1297	+ 'type' => Controls_Manager::COLOR,
	1298	+ 'selectors' => [
	1299	+ '{{WRAPPER}} .ui-e-button:hover' => 'background-color: {{VALUE}}',
1197	1300
1198		- ],
1199		- 'conditions' => $this->nav_conditions('arrows'),
1200		- ]
1201		- );
1202		- $this->add_control(
1203		- 'nav_arrows_hover_border_color',
1204		- [
1205		- 'label' => __('Border Color', 'uicore-elements'),
1206		- 'type' => Controls_Manager::COLOR,
1207		- 'selectors' => [
1208		- '{{WRAPPER}} .ui-e-button:hover' => 'border-color: {{VALUE}};',
1209		- ],
1210		- 'conditions' => $this->nav_conditions('arrows'),
1211		- ]
1212		- );
1213		- $this->add_group_control(
1214		- Group_Control_Box_Shadow::get_type(),
1215		- [
1216		- 'name' => 'arrows_hover_box_shadow',
1217		- 'selector' => '{{WRAPPER}} .ui-e-button:hover',
1218		- 'conditions' => $this->nav_conditions('arrows'),
1219		- ]
1220		- );
	1301	+ ],
	1302	+ 'conditions' => $this->nav_conditions('arrows'),
	1303	+ ]
	1304	+ );
	1305	+ $this->add_control(
	1306	+ 'nav_arrows_hover_border_color',
	1307	+ [
	1308	+ 'label' => __('Border Color', 'uicore-elements'),
	1309	+ 'type' => Controls_Manager::COLOR,
	1310	+ 'selectors' => [
	1311	+ '{{WRAPPER}} .ui-e-button:hover' => 'border-color: {{VALUE}};',
	1312	+ ],
	1313	+ 'conditions' => $this->nav_conditions('arrows'),
	1314	+ ]
	1315	+ );
	1316	+ $this->add_group_control(
	1317	+ Group_Control_Box_Shadow::get_type(),
	1318	+ [
	1319	+ 'name' => 'arrows_hover_box_shadow',
	1320	+ 'selector' => '{{WRAPPER}} .ui-e-button:hover',
	1321	+ 'conditions' => $this->nav_conditions('arrows'),
	1322	+ ]
	1323	+ );
1221	1324
1222		- $this->end_controls_tab();
	1325	+ $this->end_controls_tab();
1223	1326
1224		- $this->end_controls_tabs();
	1327	+ $this->end_controls_tabs();
1225	1328
1226		- $this->add_control(
1227		- 'hr_1',
1228		- [
1229		- 'type' => Controls_Manager::DIVIDER,
1230		- 'conditions' => $this->nav_conditions('dots'),
1231		- ]
1232		- );
1233		- $this->add_control(
1234		- 'dots_heading',
1235		- [
1236		- 'label' => __('Dots', 'uicore-elements'),
1237		- 'type' => Controls_Manager::HEADING,
1238		- 'conditions' => $this->nav_conditions('dots'),
1239		- ]
1240		- );
	1329	+ $this->add_control(
	1330	+ 'hr_1',
	1331	+ [
	1332	+ 'type' => Controls_Manager::DIVIDER,
	1333	+ 'conditions' => $this->nav_conditions('dots'),
	1334	+ ]
	1335	+ );
	1336	+ $this->add_control(
	1337	+ 'dots_heading',
	1338	+ [
	1339	+ 'label' => __('Dots', 'uicore-elements'),
	1340	+ 'type' => Controls_Manager::HEADING,
	1341	+ 'conditions' => $this->nav_conditions('dots'),
	1342	+ ]
	1343	+ );
1241	1344
1242		- $this->start_controls_tabs('tabs_navigation_dots_style');
	1345	+ $this->start_controls_tabs('tabs_navigation_dots_style');
1243	1346
1244		- $this->start_controls_tab(
1245		- 'tabs_nav_dots_normal',
1246		- [
1247		- 'label' => __('Normal', 'uicore-elements'),
1248		- 'conditions' => $this->nav_conditions('dots'),
1249		- ]
1250		- );
	1347	+ $this->start_controls_tab(
	1348	+ 'tabs_nav_dots_normal',
	1349	+ [
	1350	+ 'label' => __('Normal', 'uicore-elements'),
	1351	+ 'conditions' => $this->nav_conditions('dots'),
	1352	+ ]
	1353	+ );
1251	1354
1252		- $this->add_control(
1253		- 'dots_color',
1254		- [
1255		- 'label' => __('Color', 'uicore-elements'),
1256		- 'type' => Controls_Manager::COLOR,
1257		- 'selectors' => [
1258		- '{{WRAPPER}} .ui-e-dots .dot' => 'background-color: {{VALUE}}',
1259		- ],
1260		- 'conditions' => $this->nav_conditions('dots'),
1261		- ]
1262		- );
1263		- $this->add_control(
1264		- 'dots_space_between',
1265		- [
1266		- 'label' => __('Space Between Dots', 'uicore-elements'),
1267		- 'type' => Controls_Manager::SLIDER,
1268		- 'selectors' => [
1269		- '{{WRAPPER}} .ui-e-dots .dot' => 'margin: 0 {{SIZE}}{{UNIT}};',
1270		- ],
1271		- 'range' => [
1272		- 'px' =>[
1273		- 'min' => 0,
1274		- 'max' => 15,
1275		- 'step' => 1,
1276		- ]
1277		- ],
1278		- 'default' => [
1279		- 'unit' => 'px',
1280		- 'size' => 8,
1281		- ],
1282		- 'conditions' => $this->nav_conditions('dots'),
1283		- ]
1284		- );
1285		- $this->add_responsive_control(
1286		- 'dots_size',
1287		- [
1288		- 'label' => __('Size', 'uicore-elements'),
1289		- 'type' => Controls_Manager::SLIDER,
1290		- 'range' => [
1291		- 'px' => [
1292		- 'min' => 5,
1293		- 'max' => 20,
1294		- ],
1295		- ],
1296		- 'default' => [
1297		- 'unit' => 'px',
1298		- 'size' => 8,
1299		- ],
1300		- 'selectors' => [
1301		- '{{WRAPPER}} .ui-e-dots .dot' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
1302		- ],
1303		- 'conditions' => $this->nav_conditions(
1304		- 'dots',
1305		- [
1306		- [
1307		- 'name' => 'advanced_dots_size',
1308		- 'operator' => '===',
1309		- 'value' => '',
1310		- ]
1311		- ]
1312		- ),
1313		- ]
1314		- );
1315		- $this->add_control(
1316		- 'advanced_dots_size',
1317		- [
1318		- 'label' => __('Advanced Size', 'uicore-elements'),
1319		- 'type' => Controls_Manager::SWITCHER,
1320		- 'conditions' => $this->nav_conditions('dots'),
1321		- ]
1322		- );
1323		- $this->add_responsive_control(
1324		- 'advanced_dots_width',
1325		- [
1326		- 'label' => __('Width', 'uicore-elements'),
1327		- 'type' => Controls_Manager::SLIDER,
1328		- 'range' => [
1329		- 'px' => [
1330		- 'min' => 1,
1331		- 'max' => 50,
1332		- ],
1333		- ],
1334		- 'default' => [
1335		- 'size' => 6,
1336		- 'unit' => 'px',
1337		- ],
1338		- 'selectors' => [
1339		- '{{WRAPPER}} .ui-e-dots .dot' => 'width: {{SIZE}}{{UNIT}};',
1340		- ],
1341		- 'conditions' => $this->nav_conditions(
1342		- 'dots',
1343		- [
1344		- [
1345		- 'name' => 'advanced_dots_size',
1346		- 'operator' => '==',
1347		- 'value' => 'yes',
1348		- ]
1349		- ]
1350		- ),
1351		- ]
1352		- );
1353		- $this->add_responsive_control(
1354		- 'advanced_dots_height',
1355		- [
1356		- 'label' => __('Height', 'uicore-elements'),
1357		- 'type' => Controls_Manager::SLIDER,
1358		- 'range' => [
1359		- 'px' => [
1360		- 'min' => 1,
1361		- 'max' => 50,
1362		- ],
1363		- ],
1364		- 'default' => [
1365		- 'size' => 6,
1366		- 'unit' => 'px',
1367		- ],
1368		- 'selectors' => [
1369		- '{{WRAPPER}} .ui-e-dots .dot' => 'height: {{SIZE}}{{UNIT}};',
1370		- ],
1371		- 'conditions' => $this->nav_conditions(
1372		- 'dots',
1373		- [
1374		- [
1375		- 'name' => 'advanced_dots_size',
1376		- 'operator' => '==',
1377		- 'value' => 'yes',
1378		- ]
1379		- ]
1380		- ),
1381		- ]
1382		- );
1383		- $this->add_control(
1384		- 'advanced_dots_radius',
1385		- [
1386		- 'label' => esc_html__('Border Radius', 'uicore-elements'),
1387		- 'type' => Controls_Manager::DIMENSIONS,
1388		- 'size_units' => ['px', '%'],
1389		- 'selectors' => [
1390		- '{{WRAPPER}} .ui-e-dots .dot' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1391		- ],
1392		- 'conditions' => $this->nav_conditions(
1393		- 'dots',
1394		- [
1395		- [
1396		- 'name' => 'advanced_dots_size',
1397		- 'operator' => '==',
1398		- 'value' => 'yes',
1399		- ]
1400		- ]
1401		- ),
1402		- ]
1403		- );
1404		- $this->add_group_control(
1405		- Group_Control_Box_Shadow::get_type(),
1406		- [
1407		- 'name' => 'dots_box_shadow',
1408		- 'selector' => '{{WRAPPER}} .ui-e-dots .dot',
1409		- 'conditions' => $this->nav_conditions('dots'),
1410		- ]
1411		- );
	1355	+ $this->add_control(
	1356	+ 'dots_color',
	1357	+ [
	1358	+ 'label' => __('Color', 'uicore-elements'),
	1359	+ 'type' => Controls_Manager::COLOR,
	1360	+ 'selectors' => [
	1361	+ '{{WRAPPER}} .ui-e-dots .dot' => 'background-color: {{VALUE}}',
	1362	+ ],
	1363	+ 'conditions' => $this->nav_conditions('dots'),
	1364	+ ]
	1365	+ );
	1366	+ $this->add_control(
	1367	+ 'dots_space_between',
	1368	+ [
	1369	+ 'label' => __('Space Between Dots', 'uicore-elements'),
	1370	+ 'type' => Controls_Manager::SLIDER,
	1371	+ 'selectors' => [
	1372	+ '{{WRAPPER}} .ui-e-dots .dot' => 'margin: 0 {{SIZE}}{{UNIT}};',
	1373	+ ],
	1374	+ 'range' => [
	1375	+ 'px' => [
	1376	+ 'min' => 0,
	1377	+ 'max' => 15,
	1378	+ 'step' => 1,
	1379	+ ]
	1380	+ ],
	1381	+ 'default' => [
	1382	+ 'unit' => 'px',
	1383	+ 'size' => 8,
	1384	+ ],
	1385	+ 'conditions' => $this->nav_conditions('dots'),
	1386	+ ]
	1387	+ );
	1388	+ $this->add_responsive_control(
	1389	+ 'dots_size',
	1390	+ [
	1391	+ 'label' => __('Size', 'uicore-elements'),
	1392	+ 'type' => Controls_Manager::SLIDER,
	1393	+ 'range' => [
	1394	+ 'px' => [
	1395	+ 'min' => 5,
	1396	+ 'max' => 20,
	1397	+ ],
	1398	+ ],
	1399	+ 'default' => [
	1400	+ 'unit' => 'px',
	1401	+ 'size' => 8,
	1402	+ ],
	1403	+ 'selectors' => [
	1404	+ '{{WRAPPER}} .ui-e-dots .dot' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
	1405	+ ],
	1406	+ 'conditions' => $this->nav_conditions(
	1407	+ 'dots',
	1408	+ [
	1409	+ [
	1410	+ 'name' => 'advanced_dots_size',
	1411	+ 'operator' => '===',
	1412	+ 'value' => '',
	1413	+ ]
	1414	+ ]
	1415	+ ),
	1416	+ ]
	1417	+ );
	1418	+ $this->add_control(
	1419	+ 'advanced_dots_size',
	1420	+ [
	1421	+ 'label' => __('Advanced Size', 'uicore-elements'),
	1422	+ 'type' => Controls_Manager::SWITCHER,
	1423	+ 'conditions' => $this->nav_conditions('dots'),
	1424	+ ]
	1425	+ );
	1426	+ $this->add_responsive_control(
	1427	+ 'advanced_dots_width',
	1428	+ [
	1429	+ 'label' => __('Width', 'uicore-elements'),
	1430	+ 'type' => Controls_Manager::SLIDER,
	1431	+ 'range' => [
	1432	+ 'px' => [
	1433	+ 'min' => 1,
	1434	+ 'max' => 50,
	1435	+ ],
	1436	+ ],
	1437	+ 'default' => [
	1438	+ 'size' => 6,
	1439	+ 'unit' => 'px',
	1440	+ ],
	1441	+ 'selectors' => [
	1442	+ '{{WRAPPER}} .ui-e-dots .dot' => 'width: {{SIZE}}{{UNIT}};',
	1443	+ ],
	1444	+ 'conditions' => $this->nav_conditions(
	1445	+ 'dots',
	1446	+ [
	1447	+ [
	1448	+ 'name' => 'advanced_dots_size',
	1449	+ 'operator' => '==',
	1450	+ 'value' => 'yes',
	1451	+ ]
	1452	+ ]
	1453	+ ),
	1454	+ ]
	1455	+ );
	1456	+ $this->add_responsive_control(
	1457	+ 'advanced_dots_height',
	1458	+ [
	1459	+ 'label' => __('Height', 'uicore-elements'),
	1460	+ 'type' => Controls_Manager::SLIDER,
	1461	+ 'range' => [
	1462	+ 'px' => [
	1463	+ 'min' => 1,
	1464	+ 'max' => 50,
	1465	+ ],
	1466	+ ],
	1467	+ 'default' => [
	1468	+ 'size' => 6,
	1469	+ 'unit' => 'px',
	1470	+ ],
	1471	+ 'selectors' => [
	1472	+ '{{WRAPPER}} .ui-e-dots .dot' => 'height: {{SIZE}}{{UNIT}};',
	1473	+ ],
	1474	+ 'conditions' => $this->nav_conditions(
	1475	+ 'dots',
	1476	+ [
	1477	+ [
	1478	+ 'name' => 'advanced_dots_size',
	1479	+ 'operator' => '==',
	1480	+ 'value' => 'yes',
	1481	+ ]
	1482	+ ]
	1483	+ ),
	1484	+ ]
	1485	+ );
	1486	+ $this->add_control(
	1487	+ 'advanced_dots_radius',
	1488	+ [
	1489	+ 'label' => esc_html__('Border Radius', 'uicore-elements'),
	1490	+ 'type' => Controls_Manager::DIMENSIONS,
	1491	+ 'size_units' => ['px', '%'],
	1492	+ 'selectors' => [
	1493	+ '{{WRAPPER}} .ui-e-dots .dot' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	1494	+ ],
	1495	+ 'conditions' => $this->nav_conditions(
	1496	+ 'dots',
	1497	+ [
	1498	+ [
	1499	+ 'name' => 'advanced_dots_size',
	1500	+ 'operator' => '==',
	1501	+ 'value' => 'yes',
	1502	+ ]
	1503	+ ]
	1504	+ ),
	1505	+ ]
	1506	+ );
	1507	+ $this->add_group_control(
	1508	+ Group_Control_Box_Shadow::get_type(),
	1509	+ [
	1510	+ 'name' => 'dots_box_shadow',
	1511	+ 'selector' => '{{WRAPPER}} .ui-e-dots .dot',
	1512	+ 'conditions' => $this->nav_conditions('dots'),
	1513	+ ]
	1514	+ );
1412	1515
1413		- $this->end_controls_tab();
	1516	+ $this->end_controls_tab();
1414	1517
1415		- $this->start_controls_tab(
1416		- 'tabs_nav_dots_active',
1417		- [
1418		- 'label' => __('Active', 'uicore-elements'),
1419		- 'conditions' => $this->nav_conditions('dots'),
1420		- ]
1421		- );
	1518	+ $this->start_controls_tab(
	1519	+ 'tabs_nav_dots_active',
	1520	+ [
	1521	+ 'label' => __('Active', 'uicore-elements'),
	1522	+ 'conditions' => $this->nav_conditions('dots'),
	1523	+ ]
	1524	+ );
1422	1525
1423		- $this->add_control(
1424		- 'active_dot_color',
1425		- [
1426		- 'label' => __('Color', 'uicore-elements'),
1427		- 'type' => Controls_Manager::COLOR,
1428		- 'selectors' => [
1429		- '{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'background-color: {{VALUE}}',
1430		- ],
1431		- 'conditions' => $this->nav_conditions('dots'),
1432		- ]
1433		- );
1434		- $this->add_responsive_control(
1435		- 'active_dots_size',
1436		- [
1437		- 'label' => __('Size', 'uicore-elements'),
1438		- 'type' => Controls_Manager::SLIDER,
1439		- 'range' => [
1440		- 'px' => [
1441		- 'min' => 5,
1442		- 'max' => 20,
1443		- ],
1444		- ],
1445		- 'selectors' => [
1446		- '{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
1447		- ],
1448		- 'conditions' => $this->nav_conditions(
1449		- 'dots',
1450		- [
1451		- [
1452		- 'name' => 'advanced_dots_size',
1453		- 'operator' => '===',
1454		- 'value' => '',
1455		- ]
1456		- ]
1457		- ),
1458		- ]
1459		- );
1460		- $this->add_responsive_control(
1461		- 'active_advanced_dots_width',
1462		- [
1463		- 'label' => __('Width', 'uicore-elements'),
1464		- 'type' => Controls_Manager::SLIDER,
1465		- 'range' => [
1466		- 'px' => [
1467		- 'min' => 1,
1468		- 'max' => 50,
1469		- ],
1470		- ],
1471		- 'default' => [
1472		- 'size' => 15,
1473		- 'unit' => 'px',
1474		- ],
1475		- 'selectors' => [
1476		- '{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'width: {{SIZE}}{{UNIT}};',
1477		- ],
1478		- 'conditions' => $this->nav_conditions(
1479		- 'dots',
1480		- [
1481		- [
1482		- 'name' => 'advanced_dots_size',
1483		- 'operator' => '==',
1484		- 'value' => 'yes',
1485		- ]
1486		- ]
1487		- ),
1488		- ]
1489		- );
1490		- $this->add_responsive_control(
1491		- 'active_advanced_dots_height',
1492		- [
1493		- 'label' => __('Height', 'uicore-elements'),
1494		- 'type' => Controls_Manager::SLIDER,
1495		- 'range' => [
1496		- 'px' => [
1497		- 'min' => 1,
1498		- 'max' => 50,
1499		- ],
1500		- ],
1501		- 'default' => [
1502		- 'size' => 6,
1503		- 'unit' => 'px',
1504		- ],
1505		- 'selectors' => [
1506		- '{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'height: {{SIZE}}{{UNIT}};',
1507		- ],
1508		- 'conditions' => $this->nav_conditions(
1509		- 'dots',
1510		- [
1511		- [
1512		- 'name' => 'advanced_dots_size',
1513		- 'operator' => '==',
1514		- 'value' => 'yes',
1515		- ]
1516		- ]
1517		- ),
1518		- ]
1519		- );
1520		- $this->add_control(
1521		- 'active_advanced_dots_radius',
1522		- [
1523		- 'label' => esc_html__('Border Radius', 'uicore-elements'),
1524		- 'type' => Controls_Manager::DIMENSIONS,
1525		- 'size_units' => ['px', '%'],
1526		- 'selectors' => [
1527		- '{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1528		- ],
1529		- 'conditions' => $this->nav_conditions(
1530		- 'dots',
1531		- [
1532		- [
1533		- 'name' => 'advanced_dots_size',
1534		- 'operator' => '==',
1535		- 'value' => 'yes',
1536		- ]
1537		- ]
1538		- ),
1539		- ]
1540		- );
1541		- $this->add_group_control(
1542		- Group_Control_Box_Shadow::get_type(),
1543		- [
1544		- 'name' => 'dots_active_box_shadow',
1545		- 'selector' => '{{WRAPPER}} .ui-e-dots .dot.is-selected',
1546		- 'conditions' => $this->nav_conditions('dots'),
1547		- ]
1548		- );
	1526	+ $this->add_control(
	1527	+ 'active_dot_color',
	1528	+ [
	1529	+ 'label' => __('Color', 'uicore-elements'),
	1530	+ 'type' => Controls_Manager::COLOR,
	1531	+ 'selectors' => [
	1532	+ '{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'background-color: {{VALUE}}',
	1533	+ ],
	1534	+ 'conditions' => $this->nav_conditions('dots'),
	1535	+ ]
	1536	+ );
	1537	+ $this->add_responsive_control(
	1538	+ 'active_dots_size',
	1539	+ [
	1540	+ 'label' => __('Size', 'uicore-elements'),
	1541	+ 'type' => Controls_Manager::SLIDER,
	1542	+ 'range' => [
	1543	+ 'px' => [
	1544	+ 'min' => 5,
	1545	+ 'max' => 20,
	1546	+ ],
	1547	+ ],
	1548	+ 'selectors' => [
	1549	+ '{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
	1550	+ ],
	1551	+ 'conditions' => $this->nav_conditions(
	1552	+ 'dots',
	1553	+ [
	1554	+ [
	1555	+ 'name' => 'advanced_dots_size',
	1556	+ 'operator' => '===',
	1557	+ 'value' => '',
	1558	+ ]
	1559	+ ]
	1560	+ ),
	1561	+ ]
	1562	+ );
	1563	+ $this->add_responsive_control(
	1564	+ 'active_advanced_dots_width',
	1565	+ [
	1566	+ 'label' => __('Width', 'uicore-elements'),
	1567	+ 'type' => Controls_Manager::SLIDER,
	1568	+ 'range' => [
	1569	+ 'px' => [
	1570	+ 'min' => 1,
	1571	+ 'max' => 50,
	1572	+ ],
	1573	+ ],
	1574	+ 'default' => [
	1575	+ 'size' => 15,
	1576	+ 'unit' => 'px',
	1577	+ ],
	1578	+ 'selectors' => [
	1579	+ '{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'width: {{SIZE}}{{UNIT}};',
	1580	+ ],
	1581	+ 'conditions' => $this->nav_conditions(
	1582	+ 'dots',
	1583	+ [
	1584	+ [
	1585	+ 'name' => 'advanced_dots_size',
	1586	+ 'operator' => '==',
	1587	+ 'value' => 'yes',
	1588	+ ]
	1589	+ ]
	1590	+ ),
	1591	+ ]
	1592	+ );
	1593	+ $this->add_responsive_control(
	1594	+ 'active_advanced_dots_height',
	1595	+ [
	1596	+ 'label' => __('Height', 'uicore-elements'),
	1597	+ 'type' => Controls_Manager::SLIDER,
	1598	+ 'range' => [
	1599	+ 'px' => [
	1600	+ 'min' => 1,
	1601	+ 'max' => 50,
	1602	+ ],
	1603	+ ],
	1604	+ 'default' => [
	1605	+ 'size' => 6,
	1606	+ 'unit' => 'px',
	1607	+ ],
	1608	+ 'selectors' => [
	1609	+ '{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'height: {{SIZE}}{{UNIT}};',
	1610	+ ],
	1611	+ 'conditions' => $this->nav_conditions(
	1612	+ 'dots',
	1613	+ [
	1614	+ [
	1615	+ 'name' => 'advanced_dots_size',
	1616	+ 'operator' => '==',
	1617	+ 'value' => 'yes',
	1618	+ ]
	1619	+ ]
	1620	+ ),
	1621	+ ]
	1622	+ );
	1623	+ $this->add_control(
	1624	+ 'active_advanced_dots_radius',
	1625	+ [
	1626	+ 'label' => esc_html__('Border Radius', 'uicore-elements'),
	1627	+ 'type' => Controls_Manager::DIMENSIONS,
	1628	+ 'size_units' => ['px', '%'],
	1629	+ 'selectors' => [
	1630	+ '{{WRAPPER}} .ui-e-dots .dot.is-selected' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	1631	+ ],
	1632	+ 'conditions' => $this->nav_conditions(
	1633	+ 'dots',
	1634	+ [
	1635	+ [
	1636	+ 'name' => 'advanced_dots_size',
	1637	+ 'operator' => '==',
	1638	+ 'value' => 'yes',
	1639	+ ]
	1640	+ ]
	1641	+ ),
	1642	+ ]
	1643	+ );
	1644	+ $this->add_group_control(
	1645	+ Group_Control_Box_Shadow::get_type(),
	1646	+ [
	1647	+ 'name' => 'dots_active_box_shadow',
	1648	+ 'selector' => '{{WRAPPER}} .ui-e-dots .dot.is-selected',
	1649	+ 'conditions' => $this->nav_conditions('dots'),
	1650	+ ]
	1651	+ );
1549	1652
1550		- $this->end_controls_tab();
	1653	+ $this->end_controls_tab();
1551	1654
1552		- $this->end_controls_tabs();
	1655	+ $this->end_controls_tabs();
1553	1656
1554		- $this->add_control(
1555		- 'hr_2',
1556		- [
1557		- 'type' => Controls_Manager::DIVIDER,
1558		- 'conditions' => $this->nav_conditions('fraction'),
1559		- ]
1560		- );
1561		- $this->add_control(
1562		- 'fraction_heading',
1563		- [
1564		- 'label' => __('Fractions', 'uicore-elements'),
1565		- 'type' => Controls_Manager::HEADING,
1566		- 'conditions' => $this->nav_conditions('fraction'),
1567		- ]
1568		- );
1569		- $this->add_control(
1570		- 'fraction_bg_color',
1571		- [
1572		- 'label' => __('Background Color', 'uicore-elements'),
1573		- 'type' => Controls_Manager::COLOR,
1574		- 'selectors' => [
1575		- '{{WRAPPER}} .ui-e-fraction' => 'background-color: {{VALUE}}',
1576		- ],
1577		- 'conditions' => $this->nav_conditions('fraction'),
1578		- ]
1579		- );
1580		- $this->add_control(
1581		- 'fraction_padding',
1582		- [
1583		- 'label' => esc_html__('Padding', 'uicore-elements'),
1584		- 'type' => Controls_Manager::DIMENSIONS,
1585		- 'size_units' => ['px', 'em', '%'],
1586		- 'selectors' => [
1587		- '{{WRAPPER}} .ui-e-fraction' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1588		- ],
1589		- 'conditions' => $this->nav_conditions('fraction'),
1590		- ]
1591		- );
1592		- $this->add_control(
1593		- 'fraction_radius',
1594		- [
1595		- 'label' => esc_html__('Border Radius', 'uicore-elements'),
1596		- 'type' => Controls_Manager::DIMENSIONS,
1597		- 'size_units' => ['px', 'em', '%'],
1598		- 'selectors' => [
1599		- '{{WRAPPER}} .ui-e-fraction' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1600		- ],
1601		- 'conditions' => $this->nav_conditions('fraction'),
1602		- ]
1603		- );
1604		- $this->add_group_control(
1605		- Group_Control_Border::get_type(),
1606		- [
1607		- 'name' => 'fraction_border',
1608		- 'selector' => '{{WRAPPER}} .ui-e-fraction',
1609		- 'conditions' => $this->nav_conditions('fraction'),
1610		- ]
1611		- );
1612		- $this->add_control(
1613		- 'fraction_color',
1614		- [
1615		- 'label' => __('Color', 'uicore-elements'),
1616		- 'type' => Controls_Manager::COLOR,
1617		- 'selectors' => [
1618		- '{{WRAPPER}} .ui-e-fraction, {{WRAPPER}} .ui-e-fraction .ui-e-total' => 'color: {{VALUE}}',
1619		- ],
1620		- 'conditions' => $this->nav_conditions('fraction'),
1621		- ]
1622		- );
1623		- $this->add_control(
1624		- 'active_fraction_color',
1625		- [
1626		- 'label' => __('Active Color', 'uicore-elements'),
1627		- 'type' => Controls_Manager::COLOR,
1628		- 'selectors' => [
1629		- '{{WRAPPER}} .ui-e-fraction .swiper-pagination-current' => 'color: {{VALUE}}',
1630		- ],
1631		- 'conditions' => $this->nav_conditions('fraction'),
1632		- ]
1633		- );
1634		- $this->add_group_control(
1635		- Group_Control_Typography::get_type(),
1636		- [
1637		- 'name' => 'fraction_typography',
1638		- 'label' => esc_html__('Typography', 'uicore-elements'),
1639		- 'selector' => '{{WRAPPER}} .ui-e-fraction span, {{WRAPPER}} .ui-e-fraction',
1640		- 'conditions' => $this->nav_conditions('fraction'),
1641		- ]
1642		- );
	1657	+ $this->add_control(
	1658	+ 'hr_2',
	1659	+ [
	1660	+ 'type' => Controls_Manager::DIVIDER,
	1661	+ 'conditions' => $this->nav_conditions('fraction'),
	1662	+ ]
	1663	+ );
	1664	+ $this->add_control(
	1665	+ 'fraction_heading',
	1666	+ [
	1667	+ 'label' => __('Fractions', 'uicore-elements'),
	1668	+ 'type' => Controls_Manager::HEADING,
	1669	+ 'conditions' => $this->nav_conditions('fraction'),
	1670	+ ]
	1671	+ );
	1672	+ $this->add_control(
	1673	+ 'fraction_bg_color',
	1674	+ [
	1675	+ 'label' => __('Background Color', 'uicore-elements'),
	1676	+ 'type' => Controls_Manager::COLOR,
	1677	+ 'selectors' => [
	1678	+ '{{WRAPPER}} .ui-e-fraction' => 'background-color: {{VALUE}}',
	1679	+ ],
	1680	+ 'conditions' => $this->nav_conditions('fraction'),
	1681	+ ]
	1682	+ );
	1683	+ $this->add_control(
	1684	+ 'fraction_padding',
	1685	+ [
	1686	+ 'label' => esc_html__('Padding', 'uicore-elements'),
	1687	+ 'type' => Controls_Manager::DIMENSIONS,
	1688	+ 'size_units' => ['px', 'em', '%'],
	1689	+ 'selectors' => [
	1690	+ '{{WRAPPER}} .ui-e-fraction' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	1691	+ ],
	1692	+ 'conditions' => $this->nav_conditions('fraction'),
	1693	+ ]
	1694	+ );
	1695	+ $this->add_control(
	1696	+ 'fraction_radius',
	1697	+ [
	1698	+ 'label' => esc_html__('Border Radius', 'uicore-elements'),
	1699	+ 'type' => Controls_Manager::DIMENSIONS,
	1700	+ 'size_units' => ['px', 'em', '%'],
	1701	+ 'selectors' => [
	1702	+ '{{WRAPPER}} .ui-e-fraction' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
	1703	+ ],
	1704	+ 'conditions' => $this->nav_conditions('fraction'),
	1705	+ ]
	1706	+ );
	1707	+ $this->add_group_control(
	1708	+ Group_Control_Border::get_type(),
	1709	+ [
	1710	+ 'name' => 'fraction_border',
	1711	+ 'selector' => '{{WRAPPER}} .ui-e-fraction',
	1712	+ 'conditions' => $this->nav_conditions('fraction'),
	1713	+ ]
	1714	+ );
	1715	+ $this->add_control(
	1716	+ 'fraction_color',
	1717	+ [
	1718	+ 'label' => __('Color', 'uicore-elements'),
	1719	+ 'type' => Controls_Manager::COLOR,
	1720	+ 'selectors' => [
	1721	+ '{{WRAPPER}} .ui-e-fraction, {{WRAPPER}} .ui-e-fraction .ui-e-total' => 'color: {{VALUE}}',
	1722	+ ],
	1723	+ 'conditions' => $this->nav_conditions('fraction'),
	1724	+ ]
	1725	+ );
	1726	+ $this->add_control(
	1727	+ 'active_fraction_color',
	1728	+ [
	1729	+ 'label' => __('Active Color', 'uicore-elements'),
	1730	+ 'type' => Controls_Manager::COLOR,
	1731	+ 'selectors' => [
	1732	+ '{{WRAPPER}} .ui-e-fraction .swiper-pagination-current' => 'color: {{VALUE}}',
	1733	+ ],
	1734	+ 'conditions' => $this->nav_conditions('fraction'),
	1735	+ ]
	1736	+ );
	1737	+ $this->add_group_control(
	1738	+ Group_Control_Typography::get_type(),
	1739	+ [
	1740	+ 'name' => 'fraction_typography',
	1741	+ 'label' => esc_html__('Typography', 'uicore-elements'),
	1742	+ 'selector' => '{{WRAPPER}} .ui-e-fraction span, {{WRAPPER}} .ui-e-fraction',
	1743	+ 'conditions' => $this->nav_conditions('fraction'),
	1744	+ ]
	1745	+ );
1643	1746
1644		- $this->end_controls_section();
1645		- }
1646		- /**
	1747	+ $this->end_controls_section();
	1748	+ }
	1749	+ /**
1647	1750	* Register Additional Controls that might change depending on the widget
1648	1751	*
1649	1752	* @param bool $is_slider - Enable specific slider control(s)
1650	1753	*/
1651		- function TRAIT_register_carousel_additional_controls($is_slider = false)
1652		- {
1653		- $this->add_responsive_control(
1654		- 'carousel_gap',
1655		- [
1656		- 'label' => __('Item Gap', 'uicore-elements'),
1657		- 'type' => Controls_Manager::SLIDER,
1658		- 'default' => [
1659		- 'size' => 20,
1660		- ],
1661		- 'range' => [
1662		- 'px' => [
1663		- 'min' => 0,
1664		- 'max' => 100,
1665		- ],
1666		- ],
1667		- 'frontend_available' => true,
1668		- ]
1669		- );
1670		- $this->add_control(
1671		- 'match_height',
1672		- [
1673		- 'label' => __('Match Item Height', 'uicore-elements'),
1674		- 'type' => Controls_Manager::SWITCHER,
1675		- 'default' => 'yes',
1676		- 'prefix_class' => 'ui-e-match-height-',
1677		- 'selectors' => [
1678		- '{{WRAPPER}} .ui-e-wrp' => 'height: auto',
1679		- '{{WRAPPER}} .ui-e-animations-wrp, {{WRAPPER}} .ui-e-item' => 'height: 100%'
1680		- ]
1681		- ]
1682		- );
1683		- if($is_slider) {
	1754	+ function TRAIT_register_carousel_additional_controls($is_slider = false)
	1755	+ {
	1756	+ $this->add_responsive_control(
	1757	+ 'carousel_gap',
	1758	+ [
	1759	+ 'label' => __('Item Gap', 'uicore-elements'),
	1760	+ 'type' => Controls_Manager::SLIDER,
	1761	+ 'default' => [
	1762	+ 'size' => 20,
	1763	+ ],
	1764	+ 'range' => [
	1765	+ 'px' => [
	1766	+ 'min' => 0,
	1767	+ 'max' => 100,
	1768	+ ],
	1769	+ ],
	1770	+ 'frontend_available' => true,
	1771	+ ]
	1772	+ );
	1773	+ $this->add_control(
	1774	+ 'match_height',
	1775	+ [
	1776	+ 'label' => __('Match Item Height', 'uicore-elements'),
	1777	+ 'type' => Controls_Manager::SWITCHER,
	1778	+ 'default' => 'yes',
	1779	+ 'prefix_class' => 'ui-e-match-height-',
	1780	+ 'conditions' => [
	1781	+ 'relation' => 'or',
	1782	+ 'terms' => [
	1783	+ [
	1784	+ 'name' => 'animation_style',
	1785	+ 'operator' => '!==',
	1786	+ 'value' => 'marquee',
	1787	+ ],
	1788	+ [
	1789	+ 'relation' => 'and',
	1790	+ 'terms' => [
	1791	+ [
	1792	+ 'name' => 'animation_style',
	1793	+ 'operator' => '===',
	1794	+ 'value' => 'marquee',
	1795	+ ],
	1796	+ [
	1797	+ 'name' => 'vertical',
	1798	+ 'operator' => '!==',
	1799	+ 'value' => 'true',
	1800	+ ]
	1801	+ ],
	1802	+ ],
	1803	+ ]
	1804	+ ],
	1805	+ 'selectors' => [
	1806	+ '{{WRAPPER}} .ui-e-wrp' => 'height: auto',
	1807	+ '{{WRAPPER}} .ui-e-animations-wrp, {{WRAPPER}} .ui-e-item' => 'height: 100%'
	1808	+ ]
	1809	+ ]
	1810	+ );
	1811	+ if ($is_slider) {
1684	1812	$this->add_control(
1685	1813	'slider_height',
1686	1814	[
1687	1815	'label' => __('Slide Height', 'uicore-elements'),
1688	1816	'type' => Controls_Manager::SLIDER,
1689		- 'size_units' => [ 'px', '%', 'em', 'rem' ],
	1817	+ 'size_units' => ['px', '%', 'em', 'rem'],
1690	1818	'range' => [
1691	1819	'px' => [
1692	1820	'min' => 80,
1693	1821	'max' => 1000,
		@@ -1699,58 +1827,117 @@
1699	1827	]
1700	1828	]
1701	1829	);
1702	1830	}
1703		- }
	1831	+ }
1704	1832
1705		- // Navigation rendering
1706		- function render_carousel_dots()
1707		- {
	1833	+ /**
	1834	+ * Apply common updates Slider widgets, that inherits their respective Carousel version, needs.
	1835	+ *
	1836	+ * @param bool $item_animation - If the Carousel version of the widget has item animations,
	1837	+ * set this to true to remove the animation controls
	1838	+ *
	1839	+ * @since 1.2.1
	1840	+ */
	1841	+ function TRAIT_update_slider_controls($item_animation = true)
	1842	+ {
	1843	+
	1844	+ $animations = [
	1845	+ 'coverflow' => esc_html__('Coverflow', 'uicore-elements'),
	1846	+ 'fade' => esc_html__('Fade', 'uicore-elements'),
	1847	+ 'cards' => esc_html__('Cards', 'uicore-elements'),
	1848	+ 'flip' => esc_html__('Flip', 'uicore-elements'),
	1849	+ //'creative' => esc_html__('Creative', 'uicore-elements'), //TODO: enable creative again after fixing arrows bug
	1850	+ 'stacked' => esc_html__('Stacked', 'uicore-elements'),
	1851	+ ];
	1852	+
	1853	+ // Testimonial slider specifics
	1854	+ if ($this->get_name() === 'uicore-testimonial-slider') {
	1855	+ $animations['circular_avatar'] = esc_html__('Circular Avatar', 'uicore-elements');
	1856	+ }
	1857	+
	1858	+ // Update animations
	1859	+ $this->update_control(
	1860	+ 'animation_style',
	1861	+ [
	1862	+ 'default' => 'fade',
	1863	+ 'options' => $animations
	1864	+ ]
	1865	+ );
	1866	+
	1867	+ // Remove controls specifically meant for carousel, not slide type widgets
	1868	+ $this->remove_responsive_control('slides_per_view');
	1869	+ $this->remove_control('show_hidden');
	1870	+ $this->remove_control('fade_edges');
	1871	+ $this->remove_control('fade_edges_alert');
	1872	+ $this->remove_control('match_height');
	1873	+ $this->remove_control('carousel_gap');
	1874	+
	1875	+ // Remove item animation controls
	1876	+ if ($item_animation) {
	1877	+ $this->remove_control('animate_items');
	1878	+ $this->remove_control('item_hover_animation');
	1879	+ }
	1880	+ }
	1881	+
	1882	+ // Navigation rendering
	1883	+ function render_carousel_dots()
	1884	+ {
1708	1885	// TODO: fully replace `ui-e-dots` for `ui-e-carousel-dots`, after, at least, 3 releases from 1.2.0
1709		- ?>
1710		- <div class="swiper-pagination ui-e-dots ui-e-carousel-dots"></div>
1711		- <?php
1712		- }
1713		- function render_carousel_arrows()
1714		- {
1715		- $settings = $this->get_settings_for_display();
	1886	+?>
	1887	+ <div class="swiper-pagination ui-e-dots ui-e-carousel-dots"></div>
	1888	+ <?php
	1889	+ }
	1890	+ function render_carousel_arrows()
	1891	+ {
	1892	+ $settings = $this->get_settings_for_display();
1716	1893	// TODO: fully replace `ui-e-button` for `ui-e-carousel-button`, after, at least, 3 releases from 1.2.0
1717		- ?>
1718		- <div class="ui-e-button ui-e-carousel-button ui-e-previous" role="button" aria-label="Previous slide">
1719		- <?php Icons_Manager::render_icon( $settings['previous_arrow'], [ 'aria-hidden' => 'true' ] ); ?>
1720		- </div>
1721		- <div class="ui-e-button ui-e-carousel-button ui-e-next" role="button" aria-label="Next slide">
1722		- <?php Icons_Manager::render_icon( $settings['next_arrow'], [ 'aria-hidden' => 'true' ] ); ?>
1723		- </div>
1724		- <?php
1725		- }
1726		- function render_carousel_fraction()
1727		- {
	1894	+ ?>
	1895	+ <div class="ui-e-button ui-e-carousel-button ui-e-previous" role="button" aria-label="Previous slide">
	1896	+ <?php Icons_Manager::render_icon($settings['previous_arrow'], ['aria-hidden' => 'true']); ?>
	1897	+ </div>
	1898	+ <div class="ui-e-button ui-e-carousel-button ui-e-next" role="button" aria-label="Next slide">
	1899	+ <?php Icons_Manager::render_icon($settings['next_arrow'], ['aria-hidden' => 'true']); ?>
	1900	+ </div>
	1901	+ <?php
	1902	+ }
	1903	+ function render_carousel_fraction()
	1904	+ {
1728	1905	// TODO: fully replace `ui-e-fraction` for `ui-e-carousel-fraction`, after, at least, 3 releases from 1.2.0
1729		- ?>
1730		- <div class="ui-e-fraction ui-e-carousel-fraction">
1731		- <span class="ui-e-current"></span>
1732		- /
1733		- <span class="ui-e-total"></span>
1734		- </div>
1735		- <?php
1736		- }
1737		- // TODO: this compatibily functions have been generating debug log errors, such as `Passing null to parameter #1 ($haystack) of type string is deprecated..`
1738		- function TRAIT_render_carousel_navigations()
1739		- {
1740		- $navigation = $this->get_settings_for_display('navigation');
	1906	+ ?>
	1907	+ <div class="ui-e-fraction ui-e-carousel-fraction">
	1908	+ <span class="ui-e-current"></span>
	1909	+ /
	1910	+ <span class="ui-e-total"></span>
	1911	+ </div>
	1912	+ <?php
	1913	+ }
1741	1914
1742		- if( strpos($navigation, 'dots') !== false ) {
1743		- $this->render_carousel_dots();
1744		- }
1745		- if( strpos($navigation, 'arrows') !== false ) {
1746		- $this->render_carousel_arrows();
1747		- }
1748		- if( strpos($navigation, 'fraction') !== false ) {
1749		- $this->render_carousel_fraction();
1750		- }
1751		- }
	1915	+ function TRAIT_render_carousel_navigations($total_slides = false)
	1916	+ {
	1917	+ $navigation = $this->get_settings_for_display('navigation');
1752	1918
	1919	+ if ($total_slides <= $this->get_settings('slides_per_view') || ! isset($navigation)) {
	1920	+ return;
	1921	+ }
	1922	+
	1923	+ // Migration code from old navigation select2 array values - TODO: can only be removed when the all design library is updated
	1924	+ if (is_array($navigation)) {
	1925	+ $navigation = implode('-', $navigation);
	1926	+ }
	1927	+
	1928	+
	1929	+ if (strpos($navigation, 'dots') !== false) {
	1930	+ $this->render_carousel_dots();
	1931	+ }
	1932	+ if (strpos($navigation, 'arrows') !== false) {
	1933	+ $this->render_carousel_arrows();
	1934	+ }
	1935	+ if (strpos($navigation, 'fraction') !== false) {
	1936	+ $this->render_carousel_fraction();
	1937	+ }
	1938	+ }
	1939	+
1753	1940	/**
1754	1941	* Calculates how much slides should be duplicated so loop can work
1755	1942	* TODO: move to class helper OR find a way of traits being able to use it without usin carousel trait
1756	1943	*
		@@ -1757,21 +1944,47 @@
1757	1944	* @param int $total_slides
1758	1945	*
1759	1946	* @return int Number of slides to duplicate
1760	1947	*/
1761		- function TRAIT_get_duplication_diff($total_slides){
1762		- $visible = $this->get_settings('slides_per_view');
1763		- return abs($total_slides - $visible);
	1948	+ function TRAIT_get_duplication_diff($total_slides)
	1949	+ {
	1950	+ return abs($total_slides - $this->get_settings('slides_per_view'));
1764	1951	}
1765	1952
1766	1953	/**
1767		- * Check if slides should be duplicated so loop can work
1768		- * TODO: move to class helper OR find a way of traits being able to use it without usin carousel trait
	1954	+ * Renders a warning in the editor, explaning that with centered slides, loop, and an even number of slides per view,
	1955	+ * for the carousel to work properly we need a minimum amount of slides.
1769	1956	*/
1770		- function TRAIT_should_duplicate_slides( $total_slides ){
1771		- if( $this->get_settings('loop') === 'true' && $total_slides <= $this->get_settings('slides_per_view') ){
1772		- return true;
	1957	+ function TRAIT_render_center_loop_warning($total_slides)
	1958	+ {
	1959	+ if (! $this->is_edit_mode()) {
	1960	+ return;
1773	1961	}
1774	1962
1775		- return false;
	1963	+ if (
	1964	+ $this->get_settings('center_slides') &&
	1965	+ $this->get_settings('loop') &&
	1966	+ $this->get_settings('slides_per_view') % 2 === 0 &&
	1967	+ $total_slides < ($this->get_settings('slides_per_view') + 2)
	1968	+ ) {
	1969	+
	1970	+ $per_view = $this->get_settings('slides_per_view');
	1971	+
	1972	+ ?>
	1973	+ <div style="background: red; mix-blend-mode: difference; padding: 15px; border-radius: 5px;">
	1974	+
	1975	+ <span style="color: white; font-size: 1.2em; font-weight: bold;">
	1976	+ <?php echo esc_html__("Warning", 'uicore-elements'); ?>
	1977	+ </span>
	1978	+
	1979	+ <p style="color: white; margin-bottom: 0px;">
	1980	+ <?php echo sprintf(
	1981	+ "You enabled centered slides, loop, and have an even number of slides per view (%1\$s slides per view). For this configuration to work properly, you need to have %2\$s more slide(s) or disable one of the mentioned features.",
	1982	+ $per_view,
	1983	+ ($per_view + 2) - $total_slides
	1984	+ ); ?>
	1985	+ </p>
	1986	+ </div>
	1987	+<?php
	1988	+ }
1776	1989	}
1777		-}
	1990	+}