form.php — JetFormBuilder — Dynamic Blocks Form Builder 3.4.5.2

jetformbuilder / compatibility / jet-style-manager / blocks / form.php

jetformbuilder / compatibility / jet-style-manager / blocks Last commit date

interfaces 2 years ago traits 2 years ago form-break.php 2 years ago form.php 2 years ago range-field.php 2 years ago

form.php

2128 lines

1	<?php
2
3
4	namespace JFB_Compatibility\Jet_Style_Manager\Blocks;
5
6	// If this file is called directly, abort.
7	if ( ! defined( 'WPINC' ) ) {
8	die;
9	}
10
11	use Jet_Form_Builder\Blocks\Types\Range_Field;
12	use Jet_Form_Builder\Exceptions\Repository_Exception;
13	use Jet_Form_Builder\Form_Manager;
14	use JFB_Compatibility\Jet_Style_Manager\Blocks\Interfaces\Style_Block_It;
15	use JFB_Compatibility\Jet_Style_Manager\Blocks\Traits\Style_Block_Trait;
16	use JFB_Compatibility\Jet_Style_Manager\Jet_Style_Manager;
17
18	class Form implements Style_Block_It {
19
20	use Style_Block_Trait;
21
22	public function rep_item_id() {
23	return Form_Manager::NAMESPACE_FIELDS . 'form-block';
24	}
25
26	/**
27	* @throws Repository_Exception
28	*/
29	public function process_controls() {
30	$this->process_form_row();
31
32	$this->process_field_label();
33	$this->process_field_required_mark();
34	$this->process_field_description();
35	$this->process_heading_field();
36
37	$this->process_text_field();
38	$this->process_textarea_field();
39	$this->process_select_field();
40	$this->process_checkradio_field();
41	$this->process_range_field();
42	$this->process_calculated_field();
43	$this->process_conditional_block();
44	$this->process_repeater_field();
45
46	$form_break = new Form_Break();
47	$form_break->set_manager( $this->get_manager() );
48	$form_break->set_namespace( $this->get_namespace() );
49
50	$form_break->process_controls();
51
52	$this->process_action_button();
53	$this->process_message_success();
54	$this->process_message_error();
55	}
56
57	private function process_form_row() {
58	$this->get_manager()->start_section(
59	'style_controls',
60	array(
61	'id' => 'form_row_style',
62	'title' => __( 'Form Row', 'jet-form-builder' ),
63	)
64	);
65
66	$this->get_manager()->add_control(
67	array(
68	'id' => 'form_row_gap_before',
69	'type' => 'range',
70	'label' => __( 'Gap Before', 'jet-form-builder' ),
71	'separator' => 'after',
72	'units' => array(
73	array(
74	'value' => 'px',
75	'intervals' => array(
76	'step' => 1,
77	'min' => 0,
78	'max' => 100,
79	),
80	),
81	),
82	'css_selector' => array(
83	$this->selector( '-row' ) => 'margin-top: {{VALUE}}{{UNIT}};',
84	),
85	'attributes' => array(
86	'default' => array(
87	'value' => 1,
88	),
89	),
90	)
91	);
92	$this->get_manager()->add_control(
93	array(
94	'id' => 'form_row_gap_after',
95	'type' => 'range',
96	'label' => __( 'Gap After', 'jet-form-builder' ),
97	'units' => array(
98	array(
99	'value' => 'px',
100	'intervals' => array(
101	'step' => 1,
102	'min' => 0,
103	'max' => 100,
104	),
105	),
106	),
107	'css_selector' => array(
108	$this->selector( '-row' ) => 'margin-bottom: {{VALUE}}{{UNIT}};',
109	),
110	'attributes' => array(
111	'default' => array(
112	'value' => 1,
113	),
114	),
115	)
116	);
117
118	$this->get_manager()->end_section();
119	}
120
121	/**
122	* @throws Repository_Exception
123	*/
124	private function process_field_label() {
125	/** @var Jet_Style_Manager $module */
126	$module = jet_form_builder()->compat( 'jet-style-manager' );
127
128	$this->get_manager()->start_section(
129	'style_controls',
130	array(
131	'id' => 'label_style',
132	'title' => __( 'Label', 'jet-form-builder' ),
133	)
134	);
135
136	$this->get_manager()->add_control(
137	$module->create_margin(
138	$this->selector( '__label' ),
139	'label_margin'
140	)
141	);
142	$this->get_manager()->add_control(
143	$module->create_padding(
144	$this->selector( '__label' ),
145	'label_padding'
146	)
147	);
148
149	$this->get_manager()->add_control(
150	array(
151	'id' => 'label_alignment',
152	'type' => 'choose',
153	'label' => __( 'Alignment', 'jet-form-builder' ),
154	'separator' => 'after',
155	'options' => array(
156	'left' => array(
157	'shortcut' => __( 'Left', 'jet-form-builder' ),
158	'icon' => 'dashicons-editor-alignleft',
159	),
160	'center' => array(
161	'shortcut' => __( 'Center', 'jet-form-builder' ),
162	'icon' => 'dashicons-editor-aligncenter',
163	),
164	'right' => array(
165	'shortcut' => __( 'Right', 'jet-form-builder' ),
166	'icon' => 'dashicons-editor-alignright',
167	),
168	),
169	'css_selector' => array(
170	$this->selector( '__label' ) => 'text-align: {{VALUE}};',
171	),
172	)
173	);
174
175	$this->get_manager()->add_control(
176	array(
177	'id' => 'label_typography',
178	'type' => 'typography',
179	'separator' => 'after',
180	'css_selector' => array(
181	$this->selector( '__label' ) => 'font-family: {{FAMILY}}; font-weight: {{WEIGHT}}; text-transform: {{TRANSFORM}}; font-style: {{STYLE}}; text-decoration: {{DECORATION}}; line-height: {{LINEHEIGHT}}{{LH_UNIT}}; letter-spacing: {{LETTERSPACING}}{{LS_UNIT}}; font-size: {{SIZE}}{{S_UNIT}};',
182	),
183	)
184	);
185
186	$this->get_manager()->add_control(
187	array(
188	'id' => 'label_border',
189	'type' => 'border',
190	'label' => __( 'Border', 'jet-form-builder' ),
191	'separator' => 'after',
192	'css_selector' => array(
193	$this->selector( '__label' ) => 'border-style:{{STYLE}};border-width:{{WIDTH}};border-radius:{{RADIUS}};border-color:{{COLOR}};',
194	),
195	)
196	);
197
198	$this->get_manager()->add_control(
199	array(
200	'id' => 'label_color',
201	'type' => 'color-picker',
202	'separator' => 'after',
203	'label' => __( 'Text Color', 'jet-form-builder' ),
204	'css_selector' => array(
205	$this->selector( '__label' ) => 'color: {{VALUE}}',
206	),
207	)
208	);
209
210	$this->get_manager()->add_control(
211	array(
212	'id' => 'label_background_color',
213	'type' => 'color-picker',
214	'label' => __( 'Background Color', 'jet-form-builder' ),
215	'css_selector' => array(
216	$this->selector( '__label' ) => 'background-color: {{VALUE}}',
217	),
218	)
219	);
220
221	$this->get_manager()->end_section();
222	}
223
224	private function process_field_required_mark() {
225	$this->set_css_selector( 'required', '__label-text %1$s__required' );
226
227	$this->get_manager()->start_section(
228	'style_controls',
229	array(
230	'id' => 'required_style',
231	'title' => __( 'Required Mark', 'jet-form-builder' ),
232	)
233	);
234
235	$this->get_manager()->add_control(
236	array(
237	'id' => 'required_typography',
238	'disable_line_height' => true,
239	'disable_family' => true,
240	'disable_transform' => true,
241	'disable_style' => true,
242	'disable_decoration' => true,
243	'disable_letter_spacing' => true,
244	'separator' => 'after',
245	'type' => 'typography',
246	'css_selector' => array(
247	$this->selector( 'required' ) => 'font-weight: {{WEIGHT}}; font-size: {{SIZE}}{{S_UNIT}};',
248	),
249	)
250	);
251
252	$this->get_manager()->add_control(
253	array(
254	'id' => 'required_color',
255	'type' => 'color-picker',
256	'separator' => 'after',
257	'label' => __( 'Text Color', 'jet-form-builder' ),
258	'css_selector' => array(
259	$this->selector( 'required' ) => 'color: {{VALUE}}',
260	),
261	)
262	);
263
264	$this->get_manager()->add_control(
265	array(
266	'id' => 'required_background_color',
267	'type' => 'color-picker',
268	'label' => __( 'Background Color', 'jet-form-builder' ),
269	'css_selector' => array(
270	$this->selector( 'required' ) => 'background-color: {{VALUE}}',
271	),
272	)
273	);
274
275	$this->get_manager()->end_section();
276	}
277
278	/**
279	* @throws Repository_Exception
280	*/
281	private function process_field_description() {
282	/** @var Jet_Style_Manager $module */
283	$module = jet_form_builder()->compat( 'jet-style-manager' );
284
285	$this->get_manager()->start_section(
286	'style_controls',
287	array(
288	'id' => 'description_style',
289	'title' => __( 'Description', 'jet-form-builder' ),
290	)
291	);
292
293	$this->get_manager()->add_control(
294	$module->create_margin(
295	$this->selector( '__desc' ),
296	'description_margin'
297	)
298	);
299	$this->get_manager()->add_control(
300	$module->create_padding(
301	$this->selector( '__desc' ),
302	'description_padding'
303	)
304	);
305
306	$this->get_manager()->add_control(
307	array(
308	'id' => 'description_alignment',
309	'type' => 'choose',
310	'label' => __( 'Alignment', 'jet-form-builder' ),
311	'separator' => 'after',
312	'options' => array(
313	'left' => array(
314	'shortcut' => __( 'Left', 'jet-form-builder' ),
315	'icon' => 'dashicons-editor-alignleft',
316	),
317	'center' => array(
318	'shortcut' => __( 'Center', 'jet-form-builder' ),
319	'icon' => 'dashicons-editor-aligncenter',
320	),
321	'right' => array(
322	'shortcut' => __( 'Right', 'jet-form-builder' ),
323	'icon' => 'dashicons-editor-alignright',
324	),
325	),
326	'css_selector' => array(
327	$this->selector( '__desc' ) => 'text-align: {{VALUE}};',
328	),
329	)
330	);
331
332	$this->get_manager()->add_control(
333	array(
334	'id' => 'description_border',
335	'type' => 'border',
336	'label' => __( 'Border', 'jet-form-builder' ),
337	'separator' => 'after',
338	'css_selector' => array(
339	$this->selector( '__desc' ) => 'border-style:{{STYLE}};border-width:{{WIDTH}};border-radius:{{RADIUS}};border-color:{{COLOR}};',
340	),
341	)
342	);
343
344	$this->get_manager()->add_control(
345	array(
346	'id' => 'description_typography',
347	'type' => 'typography',
348	'separator' => 'after',
349	'css_selector' => array(
350	$this->selector( '__desc' ) => 'font-family: {{FAMILY}}; font-weight: {{WEIGHT}}; text-transform: {{TRANSFORM}}; font-style: {{STYLE}}; text-decoration: {{DECORATION}}; line-height: {{LINEHEIGHT}}{{LH_UNIT}}; letter-spacing: {{LETTERSPACING}}{{LS_UNIT}}; font-size: {{SIZE}}{{S_UNIT}};',
351	),
352	)
353	);
354
355	$this->get_manager()->add_control(
356	array(
357	'id' => 'description_color',
358	'type' => 'color-picker',
359	'separator' => 'after',
360	'label' => __( 'Text Color', 'jet-form-builder' ),
361	'css_selector' => array(
362	$this->selector( '__desc' ) => 'color: {{VALUE}}',
363	),
364	)
365	);
366
367	$this->get_manager()->add_control(
368	array(
369	'id' => 'description_background_color',
370	'type' => 'color-picker',
371	'label' => __( 'Background Color', 'jet-form-builder' ),
372	'css_selector' => array(
373	$this->selector( '__desc' ) => 'background-color: {{VALUE}}',
374	),
375	)
376	);
377
378	$this->get_manager()->end_section();
379	}
380
381	/**
382	* @throws Repository_Exception
383	*/
384	private function process_text_field() {
385	/** @var Jet_Style_Manager $module */
386	$module = jet_form_builder()->compat( 'jet-style-manager' );
387	$this->set_css_selector( 'field', '-row input' );
388
389	$this->get_manager()->start_section(
390	'style_controls',
391	array(
392	'id' => 'field_style',
393	'title' => __( 'Input', 'jet-form-builder' ),
394	)
395	);
396
397	$this->get_manager()->add_control(
398	array(
399	'id' => 'input_typography',
400	'type' => 'typography',
401	'separator' => 'after',
402	'css_selector' => array(
403	$this->selector( 'field' ) => 'font-family: {{FAMILY}}; font-weight: {{WEIGHT}}; text-transform: {{TRANSFORM}}; font-style: {{STYLE}}; text-decoration: {{DECORATION}}; line-height: {{LINEHEIGHT}}{{LH_UNIT}}; letter-spacing: {{LETTERSPACING}}{{LS_UNIT}}; font-size: {{SIZE}}{{S_UNIT}};',
404	),
405	)
406	);
407
408	$this->get_manager()->add_control(
409	$module->create_padding(
410	$this->selector( 'field' ),
411	'input_padding'
412	)
413	);
414
415	$this->get_manager()->add_control(
416	array(
417	'id' => 'input_border',
418	'type' => 'border',
419	'separator' => 'after',
420	'label' => __( 'Border', 'jet-form-builder' ),
421	'css_selector' => array(
422	$this->selector( 'field' ) => 'border-style:{{STYLE}};border-width:{{WIDTH}};border-radius:{{RADIUS}};border-color:{{COLOR}};',
423	),
424	)
425	);
426
427	$this->get_manager()->add_control(
428	array(
429	'id' => 'input_normal_color',
430	'type' => 'color-picker',
431	'separator' => 'after',
432	'label' => __( 'Text Color', 'jet-form-builder' ),
433	'attributes' => array(
434	'default' => array(
435	'value' => '#000000',
436	),
437	),
438	'css_selector' => array(
439	$this->selector( 'field' ) => 'color: {{VALUE}}',
440	),
441	)
442	);
443
444	$this->get_manager()->add_control(
445	array(
446	'id' => 'input_normal_background_color',
447	'type' => 'color-picker',
448	'label' => __( 'Background Color', 'jet-form-builder' ),
449	'attributes' => array(
450	'default' => array(
451	'value' => '#FFFFFF',
452	),
453	),
454	'css_selector' => array(
455	$this->selector( 'field' ) => 'background-color: {{VALUE}}',
456	),
457	)
458	);
459
460	$this->get_manager()->end_section();
461	}
462
463	/**
464	* @throws Repository_Exception
465	*/
466	private function process_textarea_field() {
467	/** @var Jet_Style_Manager $module */
468	$module = jet_form_builder()->compat( 'jet-style-manager' );
469	$this->set_css_selector( 'field', '__field-wrap textarea' );
470
471	$this->get_manager()->start_section(
472	'style_controls',
473	array(
474	'id' => 'textarea_style',
475	'title' => __( 'Textarea', 'jet-form-builder' ),
476	)
477	);
478
479	$this->get_manager()->add_control(
480	array(
481	'id' => 'textarea_height',
482	'type' => 'range',
483	'separator' => 'after',
484	'label' => __( 'Height', 'jet-form-builder' ),
485	'units' => array(
486	array(
487	'value' => 'px',
488	'intervals' => array(
489	'step' => 1,
490	'min' => 20,
491	'max' => 1000,
492	),
493	),
494	),
495	'css_selector' => array(
496	$this->selector( 'field' ) => 'height: {{VALUE}}px; min-height: {{VALUE}}px;',
497	),
498	'attributes' => array(
499	'default' => array(
500	'value' => 100,
501	),
502	),
503	)
504	);
505
506	$this->get_manager()->add_control(
507	array(
508	'id' => 'textarea_typography',
509	'type' => 'typography',
510	'separator' => 'after',
511	'css_selector' => array(
512	$this->selector( 'field' ) => 'font-family: {{FAMILY}}; font-weight: {{WEIGHT}}; text-transform: {{TRANSFORM}}; font-style: {{STYLE}}; text-decoration: {{DECORATION}}; line-height: {{LINEHEIGHT}}{{LH_UNIT}}; letter-spacing: {{LETTERSPACING}}{{LS_UNIT}}; font-size: {{SIZE}}{{S_UNIT}};',
513
514	),
515	)
516	);
517
518	$this->get_manager()->add_control(
519	$module->create_padding(
520	$this->selector( 'field' ),
521	'textarea_padding'
522	)
523	);
524
525	$this->get_manager()->add_control(
526	array(
527	'id' => 'textarea_border',
528	'type' => 'border',
529	'separator' => 'after',
530	'label' => __( 'Border', 'jet-form-builder' ),
531	'css_selector' => array(
532	$this->selector( 'field' ) => 'border-style:{{STYLE}};border-width:{{WIDTH}};border-radius:{{RADIUS}};border-color:{{COLOR}};',
533	),
534	)
535	);
536
537	$this->get_manager()->add_control(
538	array(
539	'id' => 'textarea_normal_color',
540	'type' => 'color-picker',
541	'separator' => 'after',
542	'label' => __( 'Text Color', 'jet-form-builder' ),
543	'css_selector' => array(
544	$this->selector( 'field' ) => 'color: {{VALUE}}',
545	),
546	)
547	);
548
549	$this->get_manager()->add_control(
550	array(
551	'id' => 'textarea_normal_background_color',
552	'type' => 'color-picker',
553	'label' => __( 'Background Color', 'jet-form-builder' ),
554	'css_selector' => array(
555	$this->selector( 'field' ) => 'background-color: {{VALUE}}',
556	),
557	)
558	);
559
560	$this->get_manager()->end_section();
561	}
562
563	private function process_select_field() {
564	$this->set_css_selector( 'select', '__field-wrap select' );
565
566	$this->get_manager()->start_section(
567	'style_controls',
568	array(
569	'id' => 'select_style',
570	'title' => __( 'Select', 'jet-form-builder' ),
571	)
572	);
573
574	$this->get_manager()->add_control(
575	array(
576	'id' => 'select_width',
577	'type' => 'range',
578	'separator' => 'after',
579	'label' => __( 'Select Width', 'jet-form-builder' ),
580	'units' => array(
581	array(
582	'value' => '%',
583	'intervals' => array(
584	'step' => 1,
585	'min' => 10,
586	'max' => 100,
587	),
588	),
589	),
590	'css_selector' => array(
591	$this->selector(
592	'-row.field-type-select-field %1$s__field-wrap'
593	) => 'max-width: {{VALUE}}%',
594	),
595	)
596	);
597
598	$this->get_manager()->add_control(
599	array(
600	'id' => 'select_padding',
601	'type' => 'dimensions',
602	'label' => __( 'Padding', 'jet-form-builder' ),
603	'units' => array( 'px', '%' ),
604	'css_selector' => array(
605	$this->selector( 'select' ) => 'padding: {{TOP}} {{RIGHT}} {{BOTTOM}} {{LEFT}};',
606	),
607	)
608	);
609
610	$this->get_manager()->add_control(
611	array(
612	'id' => 'select_typography',
613	'type' => 'typography',
614	'separator' => 'after',
615	'disable_line_height' => true,
616	'css_selector' => array(
617	$this->selector( 'select' ) => 'font-family: {{FAMILY}}; font-weight: {{WEIGHT}}; text-transform: {{TRANSFORM}}; font-style: {{STYLE}}; text-decoration: {{DECORATION}}; letter-spacing: {{LETTERSPACING}}{{LS_UNIT}}; font-size: {{SIZE}}{{S_UNIT}};',
618	),
619	)
620	);
621
622	$this->get_manager()->add_control(
623	array(
624	'id' => 'item_normal_border',
625	'type' => 'border',
626	'separator' => 'after',
627	'label' => __( 'Border', 'jet-form-builder' ),
628	'css_selector' => array(
629	$this->selector( 'select' ) => 'border-style:{{STYLE}};border-width:{{WIDTH}};border-radius:{{RADIUS}};border-color:{{COLOR}};',
630	),
631	)
632	);
633
634	$this->get_manager()->add_control(
635	array(
636	'id' => 'item_normal_color',
637	'type' => 'color-picker',
638	'separator' => 'after',
639	'label' => __( 'Text Color', 'jet-form-builder' ),
640	'css_selector' => array(
641	$this->selector( 'select' ) => 'color: {{VALUE}}',
642	),
643	)
644	);
645
646	$this->get_manager()->add_control(
647	array(
648	'id' => 'item_normal_background_color',
649	'type' => 'color-picker',
650	'label' => __( 'Background Color', 'jet-form-builder' ),
651	'css_selector' => array(
652	$this->selector( 'select' ) => 'background-color: {{VALUE}}',
653	),
654	)
655	);
656
657	$this->get_manager()->end_section();
658	}
659
660	private function process_checkradio_field() {
661	$this->set_css_selector( 'front-label', '__field-wrap label' );
662	$this->set_css_selector( 'front-wrap', '__field-wrap.checkradio-wrap' );
663	$this->set_css_selector( 'list-wrapper', '__fields-group' );
664	$this->set_css_selector( 'control', '__field-wrap span::before' );
665
666	$this->get_manager()->start_section(
667	'style_controls',
668	array(
669	'title' => __( 'Checkbox & Radio Fields', 'jet-form-builder' ),
670	'id' => 'checkradio_items_style',
671	)
672	);
673
674	$this->get_manager()->add_responsive_control(
675	array(
676	'id' => 'checkradio_fields_layout',
677	'type' => 'choose',
678	'label' => __( 'Layout', 'jet-form-builder' ),
679	'separator' => 'after',
680	'options' => array(
681	'block' => array(
682	'title' => __( 'Vertical', 'jet-form-builder' ),
683	'icon' => 'dashicons-arrow-down-alt',
684	),
685	'inline-block' => array(
686	'title' => __( 'Horizontal', 'jet-form-builder' ),
687	'icon' => 'dashicons-arrow-right-alt',
688	),
689	),
690	'css_selector' => array(
691	$this->selector( 'front-wrap' ) => 'display: {{VALUE}};',
692	),
693	'attributes' => array(
694	'default' => array(
695	'value' => 'block',
696	),
697	),
698	)
699	);
700
701	$this->get_manager()->add_control(
702	array(
703	'id' => 'checkradio_fields_typography',
704	'type' => 'typography',
705	'separator' => 'after',
706	'css_selector' => array(
707	$this->selector( 'front-label' ) => 'font-family: {{FAMILY}}; font-weight: {{WEIGHT}}; text-transform: {{TRANSFORM}}; font-style: {{STYLE}}; text-decoration: {{DECORATION}}; line-height: {{LINEHEIGHT}}{{LH_UNIT}}; letter-spacing: {{LETTERSPACING}}{{LS_UNIT}}; font-size: {{SIZE}}{{S_UNIT}};',
708	),
709	)
710	);
711
712	$this->get_manager()->add_responsive_control(
713	array(
714	'id' => 'checkradio_space_between',
715	'type' => 'range',
716	'label' => __( 'Gap between control and label', 'jet-form-builder' ),
717	'separator' => 'after',
718	'units' => array(
719	array(
720	'value' => 'px',
721	'intervals' => array(
722	'step' => 1,
723	'min' => 0,
724	'max' => 50,
725	),
726	),
727	),
728	'css_selector' => array(
729	$this->selector( 'front-wrap' ) . ' span' => 'gap: {{VALUE}}px;',
730	),
731	'attributes' => array(
732	'default' => array(
733	'value' => 8,
734	),
735	),
736	)
737	);
738
739	$this->get_manager()->add_responsive_control(
740	array(
741	'id' => 'checkradio_fields_control_size',
742	'type' => 'range',
743	'label' => __( 'Control Size', 'jet-form-builder' ),
744	'separator' => 'after',
745	'units' => array(
746	array(
747	'value' => 'px',
748	'intervals' => array(
749	'step' => 1,
750	'min' => 0,
751	'max' => 50,
752	),
753	),
754	),
755	'css_selector' => array(
756	$this->selector( 'control' ) => 'font-size: {{VALUE}}{{UNIT}};',
757	),
758	)
759	);
760
761	$this->get_manager()->add_control(
762	array(
763	'id' => 'checkradio_fields_color',
764	'type' => 'color-picker',
765	'separator' => 'after',
766	'label' => __( 'Text Color', 'jet-form-builder' ),
767	'css_selector' => array(
768	$this->selector( 'front-label' ) => 'color: {{VALUE}}',
769	),
770	)
771	);
772
773	$this->get_manager()->add_control(
774	array(
775	'id' => 'checkradio_fields_background_color',
776	'type' => 'color-picker',
777	'label' => __( 'Background Color', 'jet-form-builder' ),
778	'css_selector' => array(
779	$this->selector( 'front-label' ) => 'background-color: {{VALUE}}',
780	),
781	)
782	);
783
784	$this->get_manager()->start_tabs(
785	'style_controls',
786	array(
787	'id' => 'checkradio_style_tabs',
788	)
789	);
790
791	$this->get_manager()->start_tab(
792	'style_controls',
793	array(
794	'id' => 'checkradio_normal_styles',
795	'title' => __( 'Normal', 'jet-form-builder' ),
796	)
797	);
798
799	$this->get_manager()->add_control(
800	array(
801	'id' => 'checkradio_control_border__normal',
802	'type' => 'border',
803	'label' => __( 'Border', 'jet-form-builder' ),
804	'separator' => 'after',
805	'css_selector' => array(
806	$this->selector( 'control' ) => 'border-style:{{STYLE}};border-width:{{WIDTH}};border-radius:{{RADIUS}};border-color:{{COLOR}};',
807	),
808	)
809	);
810
811	$this->get_manager()->add_control(
812	array(
813	'id' => 'checkradio_control_bg_color__normal',
814	'type' => 'color-picker',
815	'label' => __( 'Background Color', 'jet-form-builder' ),
816	'css_selector' => array(
817	$this->selector( 'front-label' ) . ' > span::before' => 'background-color: {{VALUE}};',
818	),
819	)
820	);
821
822	$this->get_manager()->end_tab();
823
824	$this->get_manager()->start_tab(
825	'style_controls',
826	array(
827	'id' => 'checkradio_styles__checked',
828	'title' => __( 'Checked', 'jet-form-builder' ),
829	)
830	);
831
832	$this->get_manager()->add_control(
833	array(
834	'id' => 'checkradio_control_border__checked',
835	'type' => 'border',
836	'label' => __( 'Border', 'jet-form-builder' ),
837	'separator' => 'after',
838	'css_selector' => array(
839	$this->selector( 'front-label' ) . ' :checked + span::before' => 'border-style:{{STYLE}};border-width:{{WIDTH}};border-radius:{{RADIUS}};border-color:{{COLOR}};',
840	),
841	)
842	);
843	$this->get_manager()->add_control(
844	array(
845	'id' => 'checkradio_control_bg_color__checked',
846	'type' => 'color-picker',
847	'label' => __( 'Background Color', 'jet-form-builder' ),
848	'css_selector' => array(
849	$this->selector( 'front-label' ) . ' :checked + span::before' => 'background-color: {{VALUE}};',
850	),
851	)
852	);
853
854	$this->get_manager()->end_tab();
855	$this->get_manager()->end_tabs();
856	$this->get_manager()->end_section();
857	}
858
859	private function process_range_field() {
860	$range = new \JFB_Compatibility\Jet_Style_Manager\Blocks\Range_Field();
861	$range->set_namespace( $this->get_namespace() );
862
863	$this->get_manager()->start_section(
864	'style_controls',
865	array(
866	'id' => 'section_range_style',
867	'initialOpen' => false,
868	'title' => __( 'Range', 'jet-form-builder' ),
869	)
870	);
871
872	$this->get_manager()->add_control(
873	array(
874	'id' => 'range_width',
875	'type' => 'range',
876	'label' => __( 'Max width', 'jet-form-builder' ),
877	'separator' => 'after',
878	'units' => array(
879	array(
880	'value' => '%',
881	'intervals' => array(
882	'step' => 1,
883	'min' => 1,
884	'max' => 100,
885	),
886	),
887	array(
888	'value' => 'px',
889	'intervals' => array(
890	'step' => 1,
891	'min' => 0,
892	'max' => 1000,
893	),
894	),
895	array(
896	'value' => 'em',
897	'intervals' => array(
898	'step' => 1,
899	'min' => 0,
900	'max' => 50,
901	),
902	),
903	),
904	'css_selector' => array(
905	$this->selector( '__field-wrap' ) => 'max-width: {{VALUE}}{{UNIT}};',
906	),
907	)
908	);
909
910	$this->get_manager()->add_control(
911	array(
912	'id' => 'range_height',
913	'type' => 'range',
914	'label' => __( 'Range height', 'jet-form-builder' ),
915	'separator' => 'after',
916	'units' => array(
917	array(
918	'value' => 'px',
919	'intervals' => array(
920	'step' => 1,
921	'min' => 1,
922	'max' => 20,
923	),
924	),
925	),
926	'css_selector' => array(
927	'{{WRAPPER}}' => Range_Field::CSS_VAR_RANGE_HEIGHT . ': {{VALUE}}{{UNIT}}',
928	),
929	'attributes' => array(
930	'default' => array(
931	'value' => 5,
932	),
933	),
934	)
935	);
936
937	$this->get_manager()->add_control(
938	array(
939	'id' => 'range_background_color',
940	'type' => 'color-picker',
941	'label' => __( 'Range color', 'jet-form-builder' ),
942	'css_selector' => $range->style_range( 'background-color: {{VALUE}}' ),
943	'attributes' => array(
944	'default' => array(
945	'value' => '#e3ddd8',
946	),
947	),
948	)
949	);
950
951	$this->get_manager()->add_control(
952	array(
953	'id' => 'range_slider_size',
954	'type' => 'range',
955	'label' => __( 'Slider size', 'jet-form-builder' ),
956	'separator' => 'after',
957	'units' => array(
958	array(
959	'value' => 'px',
960	'intervals' => array(
961	'step' => 1,
962	'min' => 1,
963	'max' => 100,
964	),
965	),
966	),
967	'css_selector' => array(
968	'{{WRAPPER}}' => Range_Field::CSS_VAR_SLIDER_SIZE . ': {{VALUE}}{{UNIT}}',
969	),
970	'attributes' => array(
971	'default' => array(
972	'value' => 18,
973	),
974	),
975	)
976	);
977
978	$this->get_manager()->add_control(
979	array(
980	'id' => 'range_slider_background_color',
981	'type' => 'color-picker',
982	'separator' => 'after',
983	'label' => __( 'Slider color', 'jet-form-builder' ),
984	'css_selector' => $range->style_slider( 'background-color: {{VALUE}}' ),
985	'attributes' => array(
986	'default' => array(
987	'value' => '#ccc',
988	),
989	),
990	)
991	);
992
993	$this->get_manager()->add_control(
994	array(
995	'id' => 'slider_border',
996	'type' => 'border',
997	'label' => __( 'Slider border', 'jet-form-builder' ),
998	'css_selector' => $range->style_slider( 'border-style:{{STYLE}};border-width:{{WIDTH}};border-radius:{{RADIUS}};border-color:{{COLOR}};' ),
999	)
1000	);
1001
1002	$this->get_manager()->add_control(
1003	array(
1004	'id' => 'values_typography',
1005	'type' => 'typography',
1006	'separator' => 'after',
1007	'css_selector' => array(
1008	$range->selector( 'value' ) => 'font-family: {{FAMILY}}; font-weight: {{WEIGHT}}; text-transform: {{TRANSFORM}}; font-style: {{STYLE}}; text-decoration: {{DECORATION}}; line-height: {{LINEHEIGHT}}{{LH_UNIT}}; letter-spacing: {{LETTERSPACING}}{{LS_UNIT}}; font-size: {{SIZE}}{{S_UNIT}};',
1009	),
1010	)
1011	);
1012
1013	$this->get_manager()->add_control(
1014	array(
1015	'id' => 'values_color',
1016	'type' => 'color-picker',
1017	'label' => __( 'Value color', 'jet-form-builder' ),
1018	'css_selector' => array(
1019	$range->selector( 'value' ) => 'color: {{VALUE}}',
1020	),
1021	)
1022	);
1023
1024	$this->get_manager()->end_section();
1025	}
1026
1027	private function process_calculated_field() {
1028	$this->get_manager()->start_section(
1029	'style_controls',
1030	array(
1031	'id' => 'section_calc_style',
1032	'initialOpen' => false,
1033	'title' => __( 'Calculated', 'jet-form-builder' ),
1034	)
1035	);
1036
1037	$this->get_manager()->add_control(
1038	array(
1039	'id' => 'calc_fields_typography',
1040	'type' => 'typography',
1041	'separator' => 'after',
1042	'css_selector' => array(
1043	$this->selector( '__calculated-field' ) => 'font-family: {{FAMILY}}; font-weight: {{WEIGHT}}; text-transform: {{TRANSFORM}}; font-style: {{STYLE}}; text-decoration: {{DECORATION}}; line-height: {{LINEHEIGHT}}{{LH_UNIT}}; letter-spacing: {{LETTERSPACING}}{{LS_UNIT}}; font-size: {{SIZE}}{{S_UNIT}};',
1044	),
1045	)
1046	);
1047
1048	$this->get_manager()->add_control(
1049	array(
1050	'id' => 'calc_fields_color',
1051	'type' => 'color-picker',
1052	'label' => __( 'Color', 'jet-form-builder' ),
1053	'css_selector' => array(
1054	$this->selector( '__calculated-field' ) => 'color: {{VALUE}}',
1055	),
1056	)
1057	);
1058
1059	$this->get_manager()->add_control(
1060	array(
1061	'id' => 'calc_fields_prefix_color',
1062	'type' => 'color-picker',
1063	'label' => __( 'Prefix text color', 'jet-form-builder' ),
1064	'css_selector' => array(
1065	$this->selector( '__calculated-field-prefix' ) => 'color: {{VALUE}}',
1066	),
1067	)
1068	);
1069
1070	$this->get_manager()->add_responsive_control(
1071	array(
1072	'id' => 'calc_fields_prefix_size',
1073	'type' => 'range',
1074	'label' => __( 'Prefix size', 'jet-form-builder' ),
1075	'separator' => 'after',
1076	'units' => array(
1077	array(
1078	'value' => 'px',
1079	'intervals' => array(
1080	'step' => 1,
1081	'min' => 0,
1082	'max' => 100,
1083	),
1084	),
1085	array(
1086	'value' => 'em',
1087	'intervals' => array(
1088	'step' => 1,
1089	'min' => 0,
1090	'max' => 10,
1091	),
1092	),
1093	),
1094	'css_selector' => array(
1095	$this->selector( '__calculated-field-prefix' ) => 'font-size: {{VALUE}}{{UNIT}};',
1096	),
1097	)
1098	);
1099
1100	$this->get_manager()->add_control(
1101	array(
1102	'id' => 'calc_fields_suffix_color',
1103	'type' => 'color-picker',
1104	'label' => __( 'Suffix text color', 'jet-form-builder' ),
1105	'css_selector' => array(
1106	$this->selector( '__calculated-field-suffix' ) => 'color: {{VALUE}}',
1107	),
1108	)
1109	);
1110
1111	$this->get_manager()->add_responsive_control(
1112	array(
1113	'id' => 'calc_fields_suffix_size',
1114	'type' => 'range',
1115	'label' => __( 'Suffix size', 'jet-form-builder' ),
1116	'separator' => 'after',
1117	'units' => array(
1118	array(
1119	'value' => 'px',
1120	'intervals' => array(
1121	'step' => 1,
1122	'min' => 0,
1123	'max' => 100,
1124	),
1125	),
1126	array(
1127	'value' => 'em',
1128	'intervals' => array(
1129	'step' => 1,
1130	'min' => 0,
1131	'max' => 10,
1132	),
1133	),
1134	),
1135	'css_selector' => array(
1136	$this->selector( '__calculated-field-suffix' ) => 'font-size: {{VALUE}}{{UNIT}};',
1137	),
1138	)
1139	);
1140
1141	$this->get_manager()->add_control(
1142	array(
1143	'id' => 'calc_fields_background_color',
1144	'type' => 'color-picker',
1145	'label' => __( 'Background Color', 'jet-form-builder' ),
1146	'css_selector' => array(
1147	$this->selector( '__calculated-field' ) => 'background-color: {{VALUE}}',
1148	),
1149	)
1150	);
1151
1152	/** @var Jet_Style_Manager $module */
1153	$module = jet_form_builder()->compat( 'jet-style-manager' );
1154
1155	$this->get_manager()->add_responsive_control(
1156	$module->create_margin(
1157	$this->selector( '__calculated-field' ),
1158	'calc_fields_margin'
1159	)
1160	);
1161	$this->get_manager()->add_responsive_control(
1162	$module->create_padding(
1163	$this->selector( '__calculated-field' ),
1164	'calc_fields_padding'
1165	)
1166	);
1167
1168	$this->get_manager()->add_control(
1169	array(
1170	'id' => 'calc_fields_border',
1171	'type' => 'border',
1172	'label' => __( 'Border', 'jet-form-builder' ),
1173	'separator' => 'after',
1174	'css_selector' => array(
1175	$this->selector( '__calculated-field' ) => 'border-style:{{STYLE}};border-width:{{WIDTH}};border-radius:{{RADIUS}};border-color:{{COLOR}};',
1176	),
1177	)
1178	);
1179
1180	$this->get_manager()->end_section();
1181	}
1182
1183	/**
1184	* @throws Repository_Exception
1185	*/
1186	private function process_heading_field() {
1187	/** @var Jet_Style_Manager $module */
1188	$module = jet_form_builder()->compat( 'jet-style-manager' );
1189
1190	$this->get_manager()->start_section(
1191	'style_controls',
1192	array(
1193	'id' => 'heading_style',
1194	'title' => __( 'Heading', 'jet-form-builder' ),
1195	)
1196	);
1197
1198	$this->get_manager()->add_control(
1199	$module->create_margin(
1200	$this->selector( '__heading' ),
1201	'heading_margin'
1202	)
1203	);
1204	$this->get_manager()->add_control(
1205	$module->create_padding(
1206	$this->selector( '__heading' ),
1207	'heading_padding'
1208	)
1209	);
1210
1211	$this->get_manager()->add_control(
1212	array(
1213	'id' => 'heading_alignment',
1214	'type' => 'choose',
1215	'label' => __( 'Label alignment', 'jet-form-builder' ),
1216	'separator' => 'after',
1217	'options' => array(
1218	'left' => array(
1219	'shortcut' => __( 'Left', 'jet-form-builder' ),
1220	'icon' => 'dashicons-editor-alignleft',
1221	),
1222	'center' => array(
1223	'shortcut' => __( 'Center', 'jet-form-builder' ),
1224	'icon' => 'dashicons-editor-aligncenter',
1225	),
1226	'right' => array(
1227	'shortcut' => __( 'Right', 'jet-form-builder' ),
1228	'icon' => 'dashicons-editor-alignright',
1229	),
1230	),
1231	'css_selector' => array(
1232	$this->selector( '__heading' ) => 'text-align: {{VALUE}};',
1233	),
1234	)
1235	);
1236
1237	$this->get_manager()->add_control(
1238	array(
1239	'id' => 'heading_typography',
1240	'type' => 'typography',
1241	'separator' => 'after',
1242	'css_selector' => array(
1243	$this->selector( '__heading' ) => 'font-family: {{FAMILY}}; font-weight: {{WEIGHT}}; text-transform: {{TRANSFORM}}; font-style: {{STYLE}}; text-decoration: {{DECORATION}}; line-height: {{LINEHEIGHT}}{{LH_UNIT}}; letter-spacing: {{LETTERSPACING}}{{LS_UNIT}}; font-size: {{SIZE}}{{S_UNIT}};',
1244	),
1245	)
1246	);
1247
1248	$this->get_manager()->add_control(
1249	array(
1250	'id' => 'heading_border',
1251	'type' => 'border',
1252	'label' => __( 'Label border', 'jet-form-builder' ),
1253	'separator' => 'after',
1254	'css_selector' => array(
1255	$this->selector( '__heading' ) => 'border-style:{{STYLE}};border-width:{{WIDTH}};border-radius:{{RADIUS}};border-color:{{COLOR}};',
1256	),
1257	)
1258	);
1259
1260	$this->get_manager()->add_control(
1261	array(
1262	'id' => 'heading_color',
1263	'type' => 'color-picker',
1264	'separator' => 'after',
1265	'label' => __( 'Label text Color', 'jet-form-builder' ),
1266	'css_selector' => array(
1267	$this->selector( '__heading' ) => 'color: {{VALUE}}',
1268	),
1269	)
1270	);
1271
1272	$this->get_manager()->add_control(
1273	array(
1274	'id' => 'heading_background_color',
1275	'type' => 'color-picker',
1276	'label' => __( 'Label background color', 'jet-form-builder' ),
1277	'css_selector' => array(
1278	$this->selector( '__heading' ) => 'background-color: {{VALUE}}',
1279	),
1280	)
1281	);
1282
1283	$this->get_manager()->add_control(
1284	$module->create_margin(
1285	$this->selector( '__heading-desc' ),
1286	array(
1287	'id' => 'description_margin',
1288	'label' => __( 'Description margin', 'jet-form-builder' ),
1289	)
1290	)
1291	);
1292	$this->get_manager()->add_control(
1293	$module->create_padding(
1294	$this->selector( '__heading-desc' ),
1295	array(
1296	'id' => 'description_padding',
1297	'label' => __( 'Description padding', 'jet-form-builder' ),
1298	)
1299	)
1300	);
1301
1302	$this->get_manager()->add_control(
1303	array(
1304	'id' => 'description_alignment',
1305	'type' => 'choose',
1306	'label' => __( 'Description alignment', 'jet-form-builder' ),
1307	'separator' => 'after',
1308	'options' => array(
1309	'left' => array(
1310	'shortcut' => __( 'Left', 'jet-form-builder' ),
1311	'icon' => 'dashicons-editor-alignleft',
1312	),
1313	'center' => array(
1314	'shortcut' => __( 'Center', 'jet-form-builder' ),
1315	'icon' => 'dashicons-editor-aligncenter',
1316	),
1317	'right' => array(
1318	'shortcut' => __( 'Right', 'jet-form-builder' ),
1319	'icon' => 'dashicons-editor-alignright',
1320	),
1321	),
1322	'css_selector' => array(
1323	$this->selector( '__heading-desc' ) => 'text-align: {{VALUE}};',
1324	),
1325	)
1326	);
1327
1328	$this->get_manager()->add_control(
1329	array(
1330	'id' => 'description_border',
1331	'type' => 'border',
1332	'label' => __( 'Description border', 'jet-form-builder' ),
1333	'separator' => 'after',
1334	'css_selector' => array(
1335	$this->selector( '__heading-desc' ) => 'border-style:{{STYLE}};border-width:{{WIDTH}};border-radius:{{RADIUS}};border-color:{{COLOR}};',
1336	),
1337	)
1338	);
1339
1340	$this->get_manager()->add_control(
1341	array(
1342	'id' => 'description_typography',
1343	'type' => 'typography',
1344	'separator' => 'after',
1345	'css_selector' => array(
1346	$this->selector( '__heading-desc' ) => 'font-family: {{FAMILY}}; font-weight: {{WEIGHT}}; text-transform: {{TRANSFORM}}; font-style: {{STYLE}}; text-decoration: {{DECORATION}}; line-height: {{LINEHEIGHT}}{{LH_UNIT}}; letter-spacing: {{LETTERSPACING}}{{LS_UNIT}}; font-size: {{SIZE}}{{S_UNIT}};',
1347	),
1348	)
1349	);
1350
1351	$this->get_manager()->add_control(
1352	array(
1353	'id' => 'description_color',
1354	'type' => 'color-picker',
1355	'separator' => 'after',
1356	'label' => __( 'Description text color', 'jet-form-builder' ),
1357	'css_selector' => array(
1358	$this->selector( '__heading-desc' ) => 'color: {{VALUE}}',
1359	),
1360	)
1361	);
1362
1363	$this->get_manager()->add_control(
1364	array(
1365	'id' => 'description_background_color',
1366	'type' => 'color-picker',
1367	'label' => __( 'Description background color', 'jet-form-builder' ),
1368	'css_selector' => array(
1369	$this->selector( '__heading-desc' ) => 'background-color: {{VALUE}}',
1370	),
1371	)
1372	);
1373
1374	$this->get_manager()->end_section();
1375	}
1376
1377	private function process_repeater_field() {
1378	$this->set_css_selector( 'row', '-repeater__row' );
1379	$this->set_css_selector( 'actions', '-repeater__actions' );
1380	$this->set_css_selector( 'new-button', '-repeater__new' );
1381	$this->set_css_selector( 'remove-button', '-repeater__remove' );
1382
1383	$this->get_manager()->start_section(
1384	'style_controls',
1385	array(
1386	'id' => 'repeater_style',
1387	'title' => __( 'Repeater Row', 'jet-form-builder' ),
1388	)
1389	);
1390
1391	$this->get_manager()->add_control(
1392	array(
1393	'id' => 'repeater_row_padding',
1394	'type' => 'dimensions',
1395	'label' => __( 'Padding', 'jet-form-builder' ),
1396	'units' => array( 'px', '%' ),
1397	'css_selector' => array(
1398	$this->selector( 'row' ) => 'padding: {{TOP}} {{RIGHT}} {{BOTTOM}} {{LEFT}};',
1399	),
1400	)
1401	);
1402
1403	$this->get_manager()->end_section();
1404
1405	$this->get_manager()->start_section(
1406	'style_controls',
1407	array(
1408	'id' => 'repeater_new_button_style',
1409	'title' => __( 'Repeater new button', 'jet-form-builder' ),
1410	)
1411	);
1412
1413	$this->get_manager()->add_control(
1414	array(
1415	'id' => 'repeater_new_button_alignment',
1416	'type' => 'choose',
1417	'separator' => 'after',
1418	'label' => __( 'Alignment', 'jet-form-builder' ),
1419	'options' => array(
1420	'flex-start' => array(
1421	'shortcut' => __( 'Left', 'jet-form-builder' ),
1422	'icon' => 'dashicons-editor-alignleft',
1423	),
1424	'center' => array(
1425	'shortcut' => __( 'Center', 'jet-form-builder' ),
1426	'icon' => 'dashicons-editor-aligncenter',
1427	),
1428	'flex-end' => array(
1429	'shortcut' => __( 'Right', 'jet-form-builder' ),
1430	'icon' => 'dashicons-editor-alignright',
1431	),
1432	),
1433	'css_selector' => array(
1434	$this->selector( 'actions' ) => 'justify-content: {{VALUE}};',
1435	),
1436	'attributes' => array(
1437	'default' => array(
1438	'value' => 'left',
1439	),
1440	),
1441	)
1442	);
1443
1444	$this->get_manager()->add_control(
1445	array(
1446	'id' => 'repeater_new_button_typography',
1447	'type' => 'typography',
1448	'separator' => 'after',
1449	'css_selector' => array(
1450	$this->selector( 'new-button' ) => 'font-family: {{FAMILY}}; font-weight: {{WEIGHT}}; text-transform: {{TRANSFORM}}; font-style: {{STYLE}}; text-decoration: {{DECORATION}}; line-height: {{LINEHEIGHT}}{{LH_UNIT}}; letter-spacing: {{LETTERSPACING}}{{LS_UNIT}}; font-size: {{SIZE}}{{S_UNIT}};',
1451	),
1452	)
1453	);
1454
1455	$this->get_manager()->add_control(
1456	array(
1457	'id' => 'repeater_new_button_padding',
1458	'type' => 'dimensions',
1459	'separator' => 'after',
1460	'label' => __( 'Padding', 'jet-form-builder' ),
1461	'units' => array( 'px', '%' ),
1462	'css_selector' => array(
1463	$this->selector( 'new-button' ) => 'padding: {{TOP}} {{RIGHT}} {{BOTTOM}} {{LEFT}}; height: unset;',
1464	),
1465	)
1466	);
1467
1468	$this->get_manager()->add_control(
1469	array(
1470	'id' => 'repeater_new_button_border',
1471	'type' => 'border',
1472	'label' => __( 'Border', 'jet-form-builder' ),
1473	'separator' => 'after',
1474	'css_selector' => array(
1475	$this->selector( 'new-button' ) => 'border-style:{{STYLE}};border-width:{{WIDTH}};border-radius:{{RADIUS}};border-color:{{COLOR}};',
1476	),
1477	)
1478	);
1479
1480	$this->get_manager()->start_tabs(
1481	'style_controls',
1482	array(
1483	'id' => 'repeater_new_button_style_tabs',
1484	)
1485	);
1486
1487	$this->get_manager()->start_tab(
1488	'style_controls',
1489	array(
1490	'id' => 'repeater_new_button_normal_styles',
1491	'title' => __( 'Normal', 'jet-form-builder' ),
1492	)
1493	);
1494
1495	$this->get_manager()->add_control(
1496	array(
1497	'id' => 'repeater_new_button_typography_color',
1498	'type' => 'color-picker',
1499	'label' => __( 'Text Color', 'jet-form-builder' ),
1500	'separator' => 'after',
1501	'css_selector' => array(
1502	$this->selector( 'new-button' ) => 'color: {{VALUE}}',
1503	),
1504	)
1505	);
1506
1507	$this->get_manager()->add_control(
1508	array(
1509	'id' => 'repeater_new_button_background_color',
1510	'type' => 'color-picker',
1511	'label' => __( 'Background Color', 'jet-form-builder' ),
1512	'css_selector' => array(
1513	$this->selector( 'new-button' ) => 'background-color: {{VALUE}}',
1514	),
1515	)
1516	);
1517
1518	$this->get_manager()->end_tab();
1519
1520	$this->get_manager()->start_tab(
1521	'style_controls',
1522	array(
1523	'id' => 'repeater_new_button_hover_styles',
1524	'title' => __( 'Hover', 'jet-form-builder' ),
1525	)
1526	);
1527
1528	$this->get_manager()->add_control(
1529	array(
1530	'id' => 'repeater_new_button_hover_typography_color',
1531	'type' => 'color-picker',
1532	'label' => __( 'Text Color', 'jet-form-builder' ),
1533	'separator' => 'after',
1534	'css_selector' => array(
1535	$this->selector( 'new-button' ) . ':hover:not(:disabled)' => 'color: {{VALUE}}',
1536	),
1537	)
1538	);
1539
1540	$this->get_manager()->add_control(
1541	array(
1542	'id' => 'repeater_new_button_hover_background_color',
1543	'type' => 'color-picker',
1544	'label' => __( 'Background Color', 'jet-form-builder' ),
1545	'css_selector' => array(
1546	$this->selector( 'new-button' ) . ':hover:not(:disabled)' => 'background-color: {{VALUE}}',
1547	),
1548	)
1549	);
1550
1551	$this->get_manager()->end_tab();
1552	$this->get_manager()->end_tabs();
1553	$this->get_manager()->end_section();
1554
1555	$this->get_manager()->start_section(
1556	'style_controls',
1557	array(
1558	'id' => 'repeater_remove_button_style',
1559	'title' => __( 'Repeater remove item button', 'jet-form-builder' ),
1560	)
1561	);
1562
1563	$this->get_manager()->add_control(
1564	array(
1565	'id' => 'repeater_remove_button_typography',
1566	'type' => 'typography',
1567	'disable_decoration' => true,
1568	'separator' => 'after',
1569	'css_selector' => array(
1570	$this->selector( 'remove-button' ) => 'font-family: {{FAMILY}}; font-weight: {{WEIGHT}}; text-transform: {{TRANSFORM}}; font-style: {{STYLE}}; text-decoration: {{DECORATION}}; line-height: {{LINEHEIGHT}}{{LH_UNIT}}; letter-spacing: {{LETTERSPACING}}{{LS_UNIT}}; font-size: {{SIZE}}{{S_UNIT}};',
1571	),
1572	)
1573	);
1574
1575	$this->get_manager()->add_control(
1576	array(
1577	'id' => 'repeater_remove_button_padding',
1578	'type' => 'dimensions',
1579	'separator' => 'after',
1580	'label' => __( 'Padding', 'jet-form-builder' ),
1581	'units' => array( 'px', '%' ),
1582	'css_selector' => array(
1583	$this->selector( 'remove-button' ) => 'padding: {{TOP}} {{RIGHT}} {{BOTTOM}} {{LEFT}}; height: unset;',
1584	),
1585	)
1586	);
1587
1588	$this->get_manager()->add_control(
1589	array(
1590	'id' => 'repeater_remove_button_border',
1591	'type' => 'border',
1592	'separator' => 'after',
1593	'label' => __( 'Border', 'jet-form-builder' ),
1594	'css_selector' => array(
1595	$this->selector( 'remove-button' ) => 'border-style:{{STYLE}};border-width:{{WIDTH}};border-radius:{{RADIUS}};border-color:{{COLOR}};',
1596	),
1597	)
1598	);
1599
1600	$this->get_manager()->start_tabs(
1601	'style_controls',
1602	array(
1603	'id' => 'repeater_remove_button_style_tabs',
1604	)
1605	);
1606
1607	$this->get_manager()->start_tab(
1608	'style_controls',
1609	array(
1610	'id' => 'repeater_remove_button_normal_styles',
1611	'title' => __( 'Normal', 'jet-form-builder' ),
1612	)
1613	);
1614
1615	$this->get_manager()->add_control(
1616	array(
1617	'id' => 'repeater_remove_button_typography_color',
1618	'type' => 'color-picker',
1619	'label' => __( 'Text Color', 'jet-form-builder' ),
1620	'separator' => 'after',
1621	'css_selector' => array(
1622	$this->selector( 'remove-button' ) => 'color: {{VALUE}}',
1623	),
1624	)
1625	);
1626
1627	$this->get_manager()->add_control(
1628	array(
1629	'id' => 'repeater_remove_button_background_color',
1630	'type' => 'color-picker',
1631	'label' => __( 'Background Color', 'jet-form-builder' ),
1632	'css_selector' => array(
1633	$this->selector( 'remove-button' ) => 'background-color: {{VALUE}}',
1634	),
1635	)
1636	);
1637
1638	$this->get_manager()->end_tab();
1639
1640	$this->get_manager()->start_tab(
1641	'style_controls',
1642	array(
1643	'id' => 'repeater_remove_button_hover_styles',
1644	'title' => __( 'Hover', 'jet-form-builder' ),
1645	)
1646	);
1647
1648	$this->get_manager()->add_control(
1649	array(
1650	'id' => 'repeater_remove_button_hover_typography_color',
1651	'type' => 'color-picker',
1652	'label' => __( 'Text Color', 'jet-form-builder' ),
1653	'separator' => 'after',
1654	'css_selector' => array(
1655	$this->selector( 'remove-button' ) . ':hover:not(:disabled)' => 'color: {{VALUE}}',
1656	),
1657	)
1658	);
1659
1660	$this->get_manager()->add_control(
1661	array(
1662	'id' => 'repeater_remove_button_hover_background_color',
1663	'type' => 'color-picker',
1664	'label' => __( 'Background Color', 'jet-form-builder' ),
1665	'css_selector' => array(
1666	$this->selector( 'remove-button' ) . ':hover:not(:disabled)' => 'background-color: {{VALUE}}',
1667	),
1668	)
1669	);
1670
1671	$this->get_manager()->end_tab();
1672	$this->get_manager()->end_tabs();
1673	$this->get_manager()->end_section();
1674	}
1675
1676	/**
1677	* @throws Repository_Exception
1678	*/
1679	private function process_conditional_block() {
1680	$this->get_manager()->start_section(
1681	'style_controls',
1682	array(
1683	'id' => 'conditional_block_style',
1684	'title' => __( 'Conditional block', 'jet-form-builder' ),
1685	)
1686	);
1687
1688	/** @var Jet_Style_Manager $module */
1689	$module = jet_form_builder()->compat( 'jet-style-manager' );
1690
1691	$this->get_manager()->add_responsive_control(
1692	$module->create_margin(
1693	$this->selector( '__conditional' ),
1694	'conditional_margin'
1695	)
1696	);
1697	$this->get_manager()->add_responsive_control(
1698	$module->create_padding(
1699	$this->selector( '__conditional' ),
1700	'conditional_padding'
1701	)
1702	);
1703
1704	$this->get_manager()->add_control(
1705	array(
1706	'id' => 'conditional_border',
1707	'type' => 'border',
1708	'label' => __( 'Border', 'jet-form-builder' ),
1709	'separator' => 'after',
1710	'css_selector' => array(
1711	$this->selector( '__conditional' ) => 'border-style:{{STYLE}};border-width:{{WIDTH}};border-radius:{{RADIUS}};border-color:{{COLOR}};',
1712	),
1713	)
1714	);
1715
1716	$this->get_manager()->add_control(
1717	array(
1718	'id' => 'conditional_bg_color',
1719	'type' => 'color-picker',
1720	'label' => __( 'Background Color', 'jet-form-builder' ),
1721	'css_selector' => array(
1722	$this->selector( '__conditional' ) => 'background-color: {{VALUE}}',
1723	),
1724	)
1725	);
1726
1727	$this->get_manager()->end_section();
1728	}
1729
1730	private function process_action_button() {
1731	$this->set_css_selector( 'main', '__action-button' );
1732	$this->set_css_selector( 'wrap', '__action-button-wrapper' );
1733
1734	$this->get_manager()->start_section(
1735	'style_controls',
1736	array(
1737	'id' => 'action_button_style',
1738	'title' => __( 'Action button', 'jet-form-builder' ),
1739	)
1740	);
1741
1742	$this->get_manager()->add_responsive_control(
1743	array(
1744	'id' => 'action_button_alignment',
1745	'type' => 'choose',
1746	'separator' => 'after',
1747	'label' => __( 'Alignment', 'jet-form-builder' ),
1748	'options' => array(
1749	'flex-start' => array(
1750	'shortcut' => __( 'Left', 'jet-form-builder' ),
1751	'icon' => 'dashicons-editor-alignleft',
1752	),
1753	'center' => array(
1754	'shortcut' => __( 'Center', 'jet-form-builder' ),
1755	'icon' => 'dashicons-editor-aligncenter',
1756	),
1757	'flex-end' => array(
1758	'shortcut' => __( 'Right', 'jet-form-builder' ),
1759	'icon' => 'dashicons-editor-alignright',
1760	),
1761	),
1762	'css_selector' => array(
1763	$this->selector( 'wrap' ) => 'justify-content: {{VALUE}};',
1764	),
1765	)
1766	);
1767
1768	$this->get_manager()->add_control(
1769	array(
1770	'id' => 'action_button_typography',
1771	'type' => 'typography',
1772	'separator' => 'after',
1773	'css_selector' => array(
1774	$this->selector() => 'font-family: {{FAMILY}}; font-weight: {{WEIGHT}}; text-transform: {{TRANSFORM}}; font-style: {{STYLE}}; text-decoration: {{DECORATION}}; line-height: {{LINEHEIGHT}}{{LH_UNIT}}; letter-spacing: {{LETTERSPACING}}{{LS_UNIT}}; font-size: {{SIZE}}{{S_UNIT}};',
1775	),
1776	)
1777	);
1778
1779	$this->get_manager()->add_control(
1780	array(
1781	'id' => 'action_button_padding',
1782	'type' => 'dimensions',
1783	'separator' => 'after',
1784	'label' => __( 'Padding', 'jet-form-builder' ),
1785	'units' => array( 'px', '%' ),
1786	'css_selector' => array(
1787	$this->selector() => 'padding: {{TOP}} {{RIGHT}} {{BOTTOM}} {{LEFT}}; height: unset;',
1788	),
1789	)
1790	);
1791
1792	$this->get_manager()->add_control(
1793	array(
1794	'id' => 'action_button_border',
1795	'type' => 'border',
1796	'label' => __( 'Border', 'jet-form-builder' ),
1797	'separator' => 'after',
1798	'css_selector' => array(
1799	$this->selector() => 'border-style:{{STYLE}};border-width:{{WIDTH}};border-radius:{{RADIUS}};border-color:{{COLOR}};',
1800	),
1801	)
1802	);
1803
1804	$this->get_manager()->start_tabs(
1805	'style_controls',
1806	array(
1807	'id' => 'action_button_style_tabs',
1808	)
1809	);
1810
1811	$this->get_manager()->start_tab(
1812	'style_controls',
1813	array(
1814	'id' => 'action_button_normal_styles',
1815	'title' => __( 'Normal', 'jet-form-builder' ),
1816	)
1817	);
1818
1819	$this->get_manager()->add_control(
1820	array(
1821	'id' => 'action_button_typography_color',
1822	'type' => 'color-picker',
1823	'label' => __( 'Text Color', 'jet-form-builder' ),
1824	'separator' => 'after',
1825	'css_selector' => array(
1826	$this->selector() => 'color: {{VALUE}}',
1827	),
1828	)
1829	);
1830
1831	$this->get_manager()->add_control(
1832	array(
1833	'id' => 'action_button_background_color',
1834	'type' => 'color-picker',
1835	'label' => __( 'Background Color', 'jet-form-builder' ),
1836	'css_selector' => array(
1837	$this->selector() => 'background-color: {{VALUE}}',
1838	),
1839	)
1840	);
1841
1842	$this->get_manager()->end_tab();
1843
1844	$this->get_manager()->start_tab(
1845	'style_controls',
1846	array(
1847	'id' => 'action_button_hover_styles',
1848	'title' => __( 'Hover', 'jet-form-builder' ),
1849	)
1850	);
1851
1852	$this->get_manager()->add_control(
1853	array(
1854	'id' => 'action_button_hover_typography_color',
1855	'type' => 'color-picker',
1856	'label' => __( 'Text Color', 'jet-form-builder' ),
1857	'separator' => 'after',
1858	'css_selector' => array(
1859	$this->selector() . ':hover:not(:disabled)' => 'color: {{VALUE}}',
1860	),
1861	)
1862	);
1863
1864	$this->get_manager()->add_control(
1865	array(
1866	'id' => 'action_button_hover_background_color',
1867	'type' => 'color-picker',
1868	'label' => __( 'Background Color', 'jet-form-builder' ),
1869	'css_selector' => array(
1870	$this->selector() . ':hover:not(:disabled)' => 'background-color: {{VALUE}}',
1871	),
1872	)
1873	);
1874
1875	$this->get_manager()->end_tab();
1876	$this->get_manager()->end_tabs();
1877	$this->get_manager()->end_section();
1878	}
1879
1880	/**
1881	* @throws Repository_Exception
1882	*/
1883	private function process_message_success() {
1884	/** @var Jet_Style_Manager $module */
1885	$module = jet_form_builder()->compat( 'jet-style-manager' );
1886	$this->set_css_selector( 'success', '-message--success' );
1887
1888	/**
1889	* Response Success Message
1890	*/
1891	$this->get_manager()->start_section(
1892	'style_controls',
1893	array(
1894	'id' => 'success_style',
1895	'title' => __( 'Message Success', 'jet-form-builder' ),
1896	)
1897	);
1898
1899	$this->get_manager()->add_control(
1900	$module->create_margin(
1901	$this->selector( 'success' ),
1902	'success_margin'
1903	)
1904	);
1905
1906	$this->get_manager()->add_control(
1907	$module->create_padding(
1908	$this->selector( 'success' ),
1909	'success_padding'
1910	)
1911	);
1912
1913	$this->get_manager()->add_control(
1914	array(
1915	'id' => 'success_alignment',
1916	'type' => 'choose',
1917	'label' => __( 'Alignment', 'jet-form-builder' ),
1918	'separator' => 'after',
1919	'options' => array(
1920	'left' => array(
1921	'shortcut' => __( 'Left', 'jet-form-builder' ),
1922	'icon' => 'dashicons-editor-alignleft',
1923	),
1924	'center' => array(
1925	'shortcut' => __( 'Center', 'jet-form-builder' ),
1926	'icon' => 'dashicons-editor-aligncenter',
1927	),
1928	'right' => array(
1929	'shortcut' => __( 'Right', 'jet-form-builder' ),
1930	'icon' => 'dashicons-editor-alignright',
1931	),
1932	),
1933	'css_selector' => array(
1934	$this->selector( 'success' ) => 'text-align: {{VALUE}};',
1935	),
1936	'attributes' => array(
1937	'default' => array(
1938	'value' => 'left',
1939	),
1940	),
1941	)
1942	);
1943
1944	$this->get_manager()->add_control(
1945	array(
1946	'id' => 'success_typography',
1947	'type' => 'typography',
1948	'separator' => 'after',
1949	'css_selector' => array(
1950	$this->selector( 'success' ) => 'font-family: {{FAMILY}}; font-weight: {{WEIGHT}}; text-transform: {{TRANSFORM}}; font-style: {{STYLE}}; text-decoration: {{DECORATION}}; line-height: {{LINEHEIGHT}}{{LH_UNIT}}; letter-spacing: {{LETTERSPACING}}{{LS_UNIT}}; font-size: {{SIZE}}{{S_UNIT}};',
1951
1952	),
1953	)
1954	);
1955
1956	$this->get_manager()->add_control(
1957	array(
1958	'id' => 'success_color',
1959	'type' => 'color-picker',
1960	'label' => __( 'Text Color', 'jet-form-builder' ),
1961	'separator' => 'after',
1962	'attributes' => array(
1963	'default' => array(
1964	'value' => 'green',
1965	),
1966	),
1967	'css_selector' => array(
1968	$this->selector( 'success' ) => 'color: {{VALUE}}',
1969	),
1970	)
1971	);
1972
1973	$this->get_manager()->add_control(
1974	array(
1975	'id' => 'success_background_color',
1976	'type' => 'color-picker',
1977	'label' => __( 'Background Color', 'jet-form-builder' ),
1978	'separator' => 'after',
1979	'attributes' => array(
1980	'default' => array(
1981	'value' => '#FFFFFF',
1982	),
1983	),
1984	'css_selector' => array(
1985	$this->selector( 'success' ) => 'background-color: {{VALUE}}',
1986	),
1987	)
1988	);
1989
1990	$this->get_manager()->add_control(
1991	array(
1992	'id' => 'success_border',
1993	'type' => 'border',
1994	'label' => __( 'Border', 'jet-form-builder' ),
1995	'css_selector' => array(
1996	$this->selector( 'success' ) => 'border-style:{{STYLE}};border-width:{{WIDTH}};border-radius:{{RADIUS}};border-color:{{COLOR}};',
1997	),
1998	)
1999	);
2000
2001	$this->get_manager()->end_section();
2002	}
2003
2004	/**
2005	* @throws Repository_Exception
2006	*/
2007	private function process_message_error() {
2008	/** @var Jet_Style_Manager $module */
2009	$module = jet_form_builder()->compat( 'jet-style-manager' );
2010	$this->set_css_selector( 'error', '-message--error' );
2011
2012	/**
2013	* Response Error Message
2014	*/
2015	$this->get_manager()->start_section(
2016	'style_controls',
2017	array(
2018	'id' => 'error_style',
2019	'title' => __( 'Message Error', 'jet-form-builder' ),
2020	)
2021	);
2022
2023	$this->get_manager()->add_control(
2024	$module->create_margin(
2025	$this->selector( 'error' ),
2026	'error_margin'
2027	)
2028	);
2029
2030	$this->get_manager()->add_control(
2031	$module->create_padding(
2032	$this->selector( 'error' ),
2033	'error_padding'
2034	)
2035	);
2036
2037	$this->get_manager()->add_control(
2038	array(
2039	'id' => 'error_alignment',
2040	'type' => 'choose',
2041	'label' => __( 'Alignment', 'jet-form-builder' ),
2042	'separator' => 'after',
2043	'options' => array(
2044	'left' => array(
2045	'shortcut' => __( 'Left', 'jet-form-builder' ),
2046	'icon' => 'dashicons-editor-alignleft',
2047	),
2048	'center' => array(
2049	'shortcut' => __( 'Center', 'jet-form-builder' ),
2050	'icon' => 'dashicons-editor-aligncenter',
2051	),
2052	'right' => array(
2053	'shortcut' => __( 'Right', 'jet-form-builder' ),
2054	'icon' => 'dashicons-editor-alignright',
2055	),
2056	),
2057	'css_selector' => array(
2058	$this->selector( 'error' ) => 'text-align: {{VALUE}};',
2059	),
2060	'attributes' => array(
2061	'default' => array(
2062	'value' => 'left',
2063	),
2064	),
2065	)
2066	);
2067
2068	$this->get_manager()->add_control(
2069	array(
2070	'id' => 'error_typography',
2071	'type' => 'typography',
2072	'separator' => 'after',
2073	'css_selector' => array(
2074	$this->selector( 'error' ) => 'font-family: {{FAMILY}}; font-weight: {{WEIGHT}}; text-transform: {{TRANSFORM}}; font-style: {{STYLE}}; text-decoration: {{DECORATION}}; line-height: {{LINEHEIGHT}}{{LH_UNIT}}; letter-spacing: {{LETTERSPACING}}{{LS_UNIT}}; font-size: {{SIZE}}{{S_UNIT}};',
2075
2076	),
2077	)
2078	);
2079
2080	$this->get_manager()->add_control(
2081	array(
2082	'id' => 'error_color',
2083	'type' => 'color-picker',
2084	'label' => __( 'Text Color', 'jet-form-builder' ),
2085	'separator' => 'after',
2086	'attributes' => array(
2087	'default' => array(
2088	'value' => '#000000',
2089	),
2090	),
2091	'css_selector' => array(
2092	$this->selector( 'error' ) => 'color: {{VALUE}}',
2093	),
2094	)
2095	);
2096
2097	$this->get_manager()->add_control(
2098	array(
2099	'id' => 'error_background_color',
2100	'type' => 'color-picker',
2101	'label' => __( 'Background Color', 'jet-form-builder' ),
2102	'separator' => 'after',
2103	'attributes' => array(
2104	'default' => array(
2105	'value' => '#FFFFFF',
2106	),
2107	),
2108	'css_selector' => array(
2109	$this->selector( 'error' ) => 'background-color: {{VALUE}}',
2110	),
2111	)
2112	);
2113
2114	$this->get_manager()->add_control(
2115	array(
2116	'id' => 'error_border',
2117	'type' => 'border',
2118	'label' => __( 'Border', 'jet-form-builder' ),
2119	'css_selector' => array(
2120	$this->selector( 'error' ) => 'border-style:{{STYLE}};border-width:{{WIDTH}};border-radius:{{RADIUS}};border-color:{{COLOR}};',
2121	),
2122	)
2123	);
2124
2125	$this->get_manager()->end_section();
2126	}
2127	}
2128