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