uicore-elements / includes / utils / carousel-component.php

carousel-component.php in UiCore Elements – Free widgets and templates for Elementor 1.0.3, at includes/utils/carousel-component.php

1,785 lines 48.6 KB

Raw Download Zip

1	<?php
2	namespace UiCoreElements\Utils;
3
4	use Elementor\Controls_Manager;
5	use Elementor\Group_Control_Border;
6	use Elementor\Group_Control_Typography;
7	use Elementor\Group_Control_Box_Shadow;
8	use Elementor\Group_Control_Background;
9	use Elementor\Icons_Manager;
10	use Elementor\Plugin;
11
12	if ( ! defined( 'ABSPATH' ) ) {
13	exit; // Exit if accessed directly
14	}
15
16	/*
17	* Carousel / Slider Component Trait
18	*/
19
20	trait Carousel_Trait {
21
22	/**
23	* Sets all navigation conditions in one place
24	*
25	* @param string $type Control name
26	* @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
29	*/
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;
38
39	// Check for extra conditions
40	if($extras != false){
41	foreach ($extras as $extra){
42	$conditions['terms'][] = $extra;
43	}
44	}
45
46	return $conditions;
47	}
48
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	}
61
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	);
139
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	}
155
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	);
183
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' ),
196	]
197	);
198	}
199
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	);
227
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();
240	}
241
242	// Navigation Controls
243	function register_navigation_controls()
244	{
245
246	$this->start_controls_section(
247	'section_content_navigation',
248	[
249	'label' => __('Navigation', 'uicore-elements'),
250	]
251	);
252
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	);
282
283	$this->start_controls_tab(
284	'previous_tab',
285	[
286	'label' => esc_html__( 'Previous', 'uicore-elements' ),
287	'conditions' => $this->nav_conditions('arrows'),
288	]
289	);
290
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();
384
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	);
456
457	$this->end_popover();
458
459	$this->end_controls_tab();
460
461	$this->start_controls_tab(
462	'next_tab',
463	[
464	'label' => esc_html__( 'Next', 'uicore-elements' ),
465	'conditions' => $this->nav_conditions('arrows'),
466	]
467	);
468
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	);
633
634	$this->end_popover();
635
636	$this->end_controls_tab();
637
638	$this->end_controls_tabs();
639
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	);
763
764	$this->end_popover();
765
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();
911
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	{
1124
1125	$this->start_controls_section(
1126	'section_style_navigation',
1127	[
1128	'label' => esc_html__('Navigation', 'uicore-elements'),
1129	'tab' => Controls_Manager::TAB_STYLE,
1130	'conditions' => [
1131	'terms' => [
1132	[
1133	'name' => 'navigation',
1134	'operator' => '!=',
1135	'value' => '',
1136	],
1137	],
1138	],
1139	]
1140	);
1141
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	);
1150
1151	$this->start_controls_tabs('tabs_navigation_arrows_style');
1152
1153	$this->start_controls_tab(
1154	'tabs_nav_arrows_normal',
1155	[
1156	'label' => __('Normal', 'uicore-elements'),
1157	'conditions' => $this->nav_conditions('arrows'),
1158	]
1159	);
1160
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	);
1246
1247	$this->end_controls_tab();
1248
1249	$this->start_controls_tab(
1250	'tabs_nav_arrows_hover',
1251	[
1252	'label' => __('Hover', 'uicore-elements'),
1253	'conditions' => $this->nav_conditions('arrows'),
1254	]
1255	);
1256
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}}',
1276
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	);
1300
1301	$this->end_controls_tab();
1302
1303	$this->end_controls_tabs();
1304
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	);
1320
1321	$this->start_controls_tabs('tabs_navigation_dots_style');
1322
1323	$this->start_controls_tab(
1324	'tabs_nav_dots_normal',
1325	[
1326	'label' => __('Normal', 'uicore-elements'),
1327	'conditions' => $this->nav_conditions('dots'),
1328	]
1329	);
1330
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	);
1491
1492	$this->end_controls_tab();
1493
1494	$this->start_controls_tab(
1495	'tabs_nav_dots_active',
1496	[
1497	'label' => __('Active', 'uicore-elements'),
1498	'conditions' => $this->nav_conditions('dots'),
1499	]
1500	);
1501
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	);
1628
1629	$this->end_controls_tab();
1630
1631	$this->end_controls_tabs();
1632
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	);
1722
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	}
1760
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	}