carousel-component.php: 1.3.17 vs 1.0.3 · UiCore Elements – Free widgets and templates for Elementor

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