← All changes | includes/blocks/form-builder/block.php +533 -0 2.7.6 → 2.13.0 View file →

		@@ -1,0 +1,533 @@
	1	+<?php
	2	+
	3	+namespace ABlocks\Blocks\FormBuilder;
	4	+
	5	+if ( ! defined( 'ABSPATH' ) ) {
	6	+ exit;
	7	+}
	8	+
	9	+use ABlocks\Classes\BlockBaseAbstract;
	10	+use ABlocks\Classes\CssGenerator;
	11	+use ABlocks\Controls\Alignment;
	12	+use ABlocks\Controls\Typography;
	13	+use ABlocks\Controls\Dimensions;
	14	+use ABlocks\Controls\Border;
	15	+use ABlocks\Controls\Range;
	16	+use ABlocks\Classes\CssGeneratorV2;
	17	+use ABlocks\Controls\Color;
	18	+class Block extends BlockBaseAbstract {
	19	+
	20	+ protected $block_name = 'form-builder';
	21	+
	22	+ public function __construct() {
	23	+ parent::__construct();
	24	+ add_filter( 'ablocks/get_render_block_content', [ $this, 'render_static_block_content' ], 10, 3 );
	25	+ }
	26	+
	27	+ public function render_static_block_content( $content, $attributes, $block_instance ) {
	28	+ if ( $block_instance->name === $this->namespace . '/' . $this->block_name ) {
	29	+ if ( is_user_logged_in() &&
	30	+ in_array( $attributes['formType'], array( 'login', 'registration', 'forget_password' ), true )
	31	+ ) {
	32	+ return '';
	33	+ }
	34	+ return $content;
	35	+ }
	36	+ return $content;
	37	+ }
	38	+
	39	+ public function build_css_v1( $attributes ) {
	40	+ $css_generator = new CssGenerator( $attributes, $this->block_name );
	41	+
	42	+ $css_generator->add_class_styles(
	43	+ '{{WRAPPER}} .ablocks-form-builder',
	44	+ $this->get_row_column_displayCss( $attributes ),
	45	+ $this->get_row_column_displayCss( $attributes, 'Tablet' ),
	46	+ $this->get_row_column_displayCss( $attributes, 'Mobile' ),
	47	+ );
	48	+
	49	+ $css_generator->add_class_styles(
	50	+ '{{WRAPPER}} .ablocks-form-builder__field',
	51	+ $this->get_field_css( $attributes ),
	52	+ $this->get_field_css( $attributes, 'Tablet' ),
	53	+ $this->get_field_css( $attributes, 'Mobile' ),
	54	+ );
	55	+
	56	+ $css_generator->add_class_styles(
	57	+ '{{WRAPPER}} .ablocks-form-builder__label',
	58	+ $this->get_label_css( $attributes ),
	59	+ $this->get_label_css( $attributes, 'Tablet' ),
	60	+ $this->get_label_css( $attributes, 'Mobile' ),
	61	+ );
	62	+ $css_generator->add_class_styles(
	63	+ '{{WRAPPER}} .ablocks-form-builder__helper-text',
	64	+ $this->get_helper_text_css( $attributes ),
	65	+ $this->get_helper_text_css( $attributes, 'Tablet' ),
	66	+ $this->get_helper_text_css( $attributes, 'Mobile' ),
	67	+ );
	68	+
	69	+ $css_generator->add_class_styles(
	70	+ '{{WRAPPER}} input.ablocks-form-builder__input ,
	71	+ {{WRAPPER}} input.ablocks-form-builder__select ,
	72	+ {{WRAPPER}} input.ablocks-form-builder-timepicker-input ,
	73	+ {{WRAPPER}} input.ablocks-form-builder-datepicker-input',
	74	+ $this->get_input_css( $attributes ),
	75	+ $this->get_input_css( $attributes, 'Tablet' ),
	76	+ $this->get_input_css( $attributes, 'Mobile' ),
	77	+ );
	78	+ $css_generator->add_class_styles(
	79	+ '{{WRAPPER}} .ablocks-form-builder__input:hover',
	80	+ $this->get_input_hover_css( $attributes ),
	81	+ $this->get_input_hover_css( $attributes, 'Tablet' ),
	82	+ $this->get_input_hover_css( $attributes, 'Mobile' ),
	83	+ );
	84	+ $css_generator->add_class_styles(
	85	+ '{{WRAPPER}} .ablocks-form-builder__input:focus',
	86	+ $this->get_input_focus_css( $attributes ),
	87	+ $this->get_input_focus_css( $attributes, 'Tablet' ),
	88	+ $this->get_input_focus_css( $attributes, 'Mobile' ),
	89	+ );
	90	+
	91	+ $css_generator->add_class_styles(
	92	+ '{{WRAPPER}} .ablocks-form-builder__input::placeholder',
	93	+ $this->get_input_placeholder_css( $attributes ),
	94	+ $this->get_input_placeholder_css( $attributes, 'Tablet' ),
	95	+ $this->get_input_placeholder_css( $attributes, 'Mobile' ),
	96	+ );
	97	+ $css_generator->add_class_styles(
	98	+ '{{WRAPPER}} .ablocks-form-builder__input-icon,{{WRAPPER}} .ablocks-form-builder__input-toggle-password',
	99	+ $this->get_input_position_css( $attributes ),
	100	+ $this->get_input_position_css( $attributes, 'Tablet' ),
	101	+ $this->get_input_position_css( $attributes, 'Mobile' ),
	102	+ );
	103	+
	104	+ $css_generator->add_class_styles(
	105	+ '{{WRAPPER}} .ablocks-form-builder__submit-button',
	106	+ $this->get_alignment_button_css( $attributes ),
	107	+ $this->get_alignment_button_css( $attributes, 'Tablet' ),
	108	+ $this->get_alignment_button_css( $attributes, 'Mobile' ),
	109	+ );
	110	+
	111	+ $css_generator->add_class_styles(
	112	+ '{{WRAPPER}} .ablocks-form-builder__submit-button',
	113	+ $this->get_submit_button_css( $attributes ),
	114	+ $this->get_submit_button_css( $attributes, 'Tablet' ),
	115	+ $this->get_submit_button_css( $attributes, 'Mobile' ),
	116	+ );
	117	+
	118	+ $css_generator->add_class_styles(
	119	+ '{{WRAPPER}} .ablocks-form-builder__submit-button:hover',
	120	+ $this->get_submit_button_hover_css( $attributes ),
	121	+ $this->get_submit_button_hover_css( $attributes, 'Tablet' ),
	122	+ $this->get_submit_button_hover_css( $attributes, 'Mobile' ),
	123	+ );
	124	+ $css_generator->add_class_styles(
	125	+ '{{WRAPPER}} .ablocks-block--form-builder__navigator',
	126	+ $this->get_navigator_css( $attributes ),
	127	+ $this->get_navigator_css( $attributes, 'Tablet' ),
	128	+ $this->get_navigator_css( $attributes, 'Mobile' ),
	129	+ );
	130	+ $css_generator->add_class_styles(
	131	+ '{{WRAPPER}} .ablocks-block--form-builder__navigator-redirect-page',
	132	+ $this->get_navigator_spacing_css( $attributes ),
	133	+ $this->get_navigator_spacing_css( $attributes, 'Tablet' ),
	134	+ $this->get_navigator_spacing_css( $attributes, 'Mobile' ),
	135	+ );
	136	+ $css_generator->add_class_styles(
	137	+ '{{WRAPPER}} .ablocks-block--form-builder__success',
	138	+ $this->get_succsss_styles_css( $attributes ),
	139	+ $this->get_succsss_styles_css( $attributes, 'Tablet' ),
	140	+ $this->get_succsss_styles_css( $attributes, 'Mobile' ),
	141	+ );
	142	+ $css_generator->add_class_styles(
	143	+ '{{WRAPPER}} .ablocks-block--form-builder__error',
	144	+ $this->get_error_styles_css( $attributes ),
	145	+ $this->get_error_styles_css( $attributes, 'Tablet' ),
	146	+ $this->get_error_styles_css( $attributes, 'Mobile' ),
	147	+ );
	148	+ $css_generator->add_class_styles(
	149	+ '{{WRAPPER}} .ablocks-block--form-builder__feedback-message',
	150	+ $this->get_success_error_common_styles_css( $attributes ),
	151	+ $this->get_success_error_common_styles_css( $attributes, 'Tablet' ),
	152	+ $this->get_success_error_common_styles_css( $attributes, 'Mobile' ),
	153	+ );
	154	+ return $css_generator->generate_css();
	155	+ }
	156	+ public function build_css_v2( $attributes ) {
	157	+ $css_generator = new CssGeneratorV2( $attributes, $this->block_name );
	158	+
	159	+ $css_generator->add_class_styles(
	160	+ '{{WRAPPER}} .ablocks-form-builder',
	161	+ $this->get_row_column_displayCss( $attributes ),
	162	+ $this->get_row_column_displayCss( $attributes, 'Tablet' ),
	163	+ $this->get_row_column_displayCss( $attributes, 'Mobile' ),
	164	+ );
	165	+
	166	+ $css_generator->add_class_styles(
	167	+ '{{WRAPPER}} .ablocks-form-builder__field',
	168	+ $this->get_field_css( $attributes ),
	169	+ $this->get_field_css( $attributes, 'Tablet' ),
	170	+ $this->get_field_css( $attributes, 'Mobile' ),
	171	+ );
	172	+
	173	+ $css_generator->add_class_styles(
	174	+ '{{WRAPPER}} .ablocks-form-builder__label',
	175	+ $this->get_label_css( $attributes ),
	176	+ $this->get_label_css( $attributes, 'Tablet' ),
	177	+ $this->get_label_css( $attributes, 'Mobile' ),
	178	+ );
	179	+ $css_generator->add_class_styles(
	180	+ '{{WRAPPER}} .ablocks-form-builder__helper-text',
	181	+ $this->get_helper_text_css( $attributes ),
	182	+ $this->get_helper_text_css( $attributes, 'Tablet' ),
	183	+ $this->get_helper_text_css( $attributes, 'Mobile' ),
	184	+ );
	185	+
	186	+ $css_generator->add_class_styles(
	187	+ '{{WRAPPER}} .ablocks-form-builder__input ,
	188	+ {{WRAPPER}} .ablocks-form-builder__select ,
	189	+ {{WRAPPER}} .ablocks-form-builder-timepicker-input ,
	190	+ {{WRAPPER}} .ablocks-form-builder-datepicker-input',
	191	+ $this->get_input_css( $attributes ),
	192	+ $this->get_input_css( $attributes, 'Tablet' ),
	193	+ $this->get_input_css( $attributes, 'Mobile' ),
	194	+ );
	195	+ $css_generator->add_class_styles(
	196	+ '{{WRAPPER}} .ablocks-form-builder__input:hover',
	197	+ $this->get_input_hover_css( $attributes ),
	198	+ $this->get_input_hover_css( $attributes, 'Tablet' ),
	199	+ $this->get_input_hover_css( $attributes, 'Mobile' ),
	200	+ );
	201	+ $css_generator->add_class_styles(
	202	+ '{{WRAPPER}} .ablocks-form-builder__input:focus',
	203	+ $this->get_input_focus_css( $attributes ),
	204	+ $this->get_input_focus_css( $attributes, 'Tablet' ),
	205	+ $this->get_input_focus_css( $attributes, 'Mobile' ),
	206	+ );
	207	+
	208	+ $css_generator->add_class_styles(
	209	+ '{{WRAPPER}} .ablocks-form-builder__input::placeholder',
	210	+ $this->get_input_placeholder_css( $attributes ),
	211	+ $this->get_input_placeholder_css( $attributes, 'Tablet' ),
	212	+ $this->get_input_placeholder_css( $attributes, 'Mobile' ),
	213	+ );
	214	+ $css_generator->add_class_styles(
	215	+ '{{WRAPPER}} .ablocks-form-builder__input-icon,{{WRAPPER}} .ablocks-form-builder__input-toggle-password',
	216	+ $this->get_input_position_css( $attributes ),
	217	+ $this->get_input_position_css( $attributes, 'Tablet' ),
	218	+ $this->get_input_position_css( $attributes, 'Mobile' ),
	219	+ );
	220	+
	221	+ $css_generator->add_class_styles(
	222	+ '{{WRAPPER}} .ablocks-form-builder__submit-button',
	223	+ $this->get_alignment_button_css( $attributes ),
	224	+ $this->get_alignment_button_css( $attributes, 'Tablet' ),
	225	+ $this->get_alignment_button_css( $attributes, 'Mobile' ),
	226	+ );
	227	+
	228	+ $css_generator->add_class_styles(
	229	+ '{{WRAPPER}} .ablocks-form-builder__submit-button',
	230	+ $this->get_submit_button_css( $attributes ),
	231	+ $this->get_submit_button_css( $attributes, 'Tablet' ),
	232	+ $this->get_submit_button_css( $attributes, 'Mobile' ),
	233	+ );
	234	+
	235	+ $css_generator->add_class_styles(
	236	+ '{{WRAPPER}} .ablocks-form-builder__submit-button:hover',
	237	+ $this->get_submit_button_hover_css( $attributes ),
	238	+ $this->get_submit_button_hover_css( $attributes, 'Tablet' ),
	239	+ $this->get_submit_button_hover_css( $attributes, 'Mobile' ),
	240	+ );
	241	+ $css_generator->add_class_styles(
	242	+ '{{WRAPPER}} .ablocks-block--form-builder__navigator',
	243	+ $this->get_navigator_css( $attributes ),
	244	+ $this->get_navigator_css( $attributes, 'Tablet' ),
	245	+ $this->get_navigator_css( $attributes, 'Mobile' ),
	246	+ );
	247	+ $css_generator->add_class_styles(
	248	+ '{{WRAPPER}} .ablocks-block--form-builder__navigator-redirect-page',
	249	+ $this->get_navigator_spacing_css( $attributes ),
	250	+ $this->get_navigator_spacing_css( $attributes, 'Tablet' ),
	251	+ $this->get_navigator_spacing_css( $attributes, 'Mobile' ),
	252	+ );
	253	+ $css_generator->add_class_styles(
	254	+ '{{WRAPPER}} .ablocks-block--form-builder__success',
	255	+ $this->get_succsss_styles_css( $attributes ),
	256	+ $this->get_succsss_styles_css( $attributes, 'Tablet' ),
	257	+ $this->get_succsss_styles_css( $attributes, 'Mobile' ),
	258	+ );
	259	+ $css_generator->add_class_styles(
	260	+ '{{WRAPPER}} .ablocks-block--form-builder__error',
	261	+ $this->get_error_styles_css( $attributes ),
	262	+ $this->get_error_styles_css( $attributes, 'Tablet' ),
	263	+ $this->get_error_styles_css( $attributes, 'Mobile' ),
	264	+ );
	265	+ $css_generator->add_class_styles(
	266	+ '{{WRAPPER}} .ablocks-block--form-builder__feedback-message',
	267	+ $this->get_success_error_common_styles_css( $attributes ),
	268	+ $this->get_success_error_common_styles_css( $attributes, 'Tablet' ),
	269	+ $this->get_success_error_common_styles_css( $attributes, 'Mobile' ),
	270	+ );
	271	+ return $css_generator->generate_css();
	272	+ }
	273	+ public function build_css( $attributes ) {
	274	+ if ( isset( $attributes['blockVersion'] ) && (int) $attributes['blockVersion'] === 2 ) {
	275	+ return $this->build_css_v2( $attributes );
	276	+ }
	277	+ return $this->build_css_v1( $attributes );
	278	+ }
	279	+ public function get_field_css( $attributes, $device = '' ) {
	280	+ $field_css = array_merge(
	281	+ Range::get_css([
	282	+ 'attributeValue' => $attributes['rowsSpacing'],
	283	+ 'attributeObjectKey' => 'value',
	284	+ 'isResponsive' => true,
	285	+ 'defaultValue' => 0,
	286	+ 'unitDefaultValue' => 'px',
	287	+ 'property' => 'margin-top',
	288	+ 'device' => $device,
	289	+ ]),
	290	+ Range::get_css([
	291	+ 'attributeValue' => $attributes['rowsSpacing'],
	292	+ 'attributeObjectKey' => 'value',
	293	+ 'isResponsive' => true,
	294	+ 'defaultValue' => 0,
	295	+ 'unitDefaultValue' => 'px',
	296	+ 'property' => 'margin-bottom',
	297	+ 'device' => $device,
	298	+ ]),
	299	+ );
	300	+ return $field_css;
	301	+ }
	302	+
	303	+ public function get_label_css( $attributes, $device = '' ) {
	304	+ $typographyValueGlobal = ! empty( $attributes['labelTypographyGlobal'] ) ? $attributes['labelTypographyGlobal'] : array();
	305	+ $label_css = array_merge(
	306	+ [ 'color' => Color::get_css( isset( $attributes['labelColor'] ) ? $attributes['labelColor'] : '' ) ],
	307	+ Typography::get_css( $attributes['labelTypography'], '', $device, $typographyValueGlobal ),
	308	+ Alignment::get_css( $attributes['labelAlignment'], 'text-align', $device ),
	309	+ Range::get_css([
	310	+ 'attributeValue' => $attributes['labelSpacing'],
	311	+ 'attributeObjectKey' => 'value',
	312	+ 'isResponsive' => true,
	313	+ 'defaultValue' => 10,
	314	+ 'unitDefaultValue' => 'px',
	315	+ 'property' => 'margin-bottom',
	316	+ 'device' => $device,
	317	+ ]),
	318	+ );
	319	+ if ( ! empty( $label_css['margin-bottom'] ) ) {
	320	+ $label_css['margin-bottom'] = $label_css['margin-bottom'] . ' !important';
	321	+ }
	322	+ if ( ! $attributes['showLabels'] ) {
	323	+ $label_css['display'] = 'none';
	324	+ }
	325	+
	326	+ return $label_css;
	327	+ }
	328	+ public function get_helper_text_css( $attributes, $device = '' ) {
	329	+ $typographyValueGlobal = ! empty( $attributes['helperTextTypographyGlobal'] ) ? $attributes['helperTextTypographyGlobal'] : array();
	330	+ $helper_text_css = array_merge(
	331	+ [ 'color' => Color::get_css( isset( $attributes['helperTextColor'] ) ? $attributes['helperTextColor'] : '' ) ],
	332	+ Typography::get_css( $attributes['helperTextTypography'], '', $device, $typographyValueGlobal ),
	333	+ Alignment::get_css( $attributes['labelAlignment'], 'text-align', $device ),
	334	+ Range::get_css([
	335	+ 'attributeValue' => $attributes['helperTextSpacing'],
	336	+ 'attributeObjectKey' => 'value',
	337	+ 'isResponsive' => true,
	338	+ 'defaultValue' => 10,
	339	+ 'unitDefaultValue' => 'px',
	340	+ 'property' => 'margin-bottom',
	341	+ 'device' => $device,
	342	+ ]),
	343	+ );
	344	+
	345	+ if ( ! $attributes['showLabels'] ) {
	346	+ $helper_text_css['display'] = 'none';
	347	+ }
	348	+
	349	+ if ( ! empty( $attributes['helperTextSpacing'][ 'value' . $device ] ) ) {
	350	+ $helper_text_css['margin-top'] = $attributes['helperTextSpacing'][ 'value' . $device ] . 'px';
	351	+ $helper_text_css['margin-bottom'] = $attributes['helperTextSpacing'][ 'value' . $device ] . 'px';
	352	+ }
	353	+
	354	+ return $helper_text_css;
	355	+ }
	356	+
	357	+ public function get_input_css( $attributes, $device = '' ) {
	358	+ $css = array();
	359	+ if ( isset( $attributes['inputBorder']['borderStyle'] ) && $attributes['inputBorder']['borderStyle'] === 'default' ) {
	360	+ $css['border'] = '1px solid #A7AAAD';
	361	+ $css['border-radius'] = '5px';
	362	+ }
	363	+ $typographyValueGlobal = ! empty( $attributes['inputTypographyGlobal'] ) ? $attributes['inputTypographyGlobal'] : array();
	364	+ $input_css = array_merge(
	365	+ [ 'background' => Color::get_css( isset( $attributes['inputBgColor'] ) ? $attributes['inputBgColor'] : '' ) ],
	366	+ $css,
	367	+ Alignment::get_css( $attributes['inputAlignment'], 'text-align', $device ),
	368	+ Typography::get_css( $attributes['inputTypography'], '', $device, $typographyValueGlobal ),
	369	+ Border::get_css( $attributes['inputBorder'], '', $device ),
	370	+ $this->add_important_to_css( Dimensions::get_css( $attributes['inputPadding'], 'padding', $device ) )
	371	+ );
	372	+
	373	+ if ( ! empty( $attributes['inputColor'] ) ) {
	374	+ $input_css['color'] = Color::get_css(
	375	+ isset( $attributes['inputColor'] ) ? $attributes['inputColor'] : '') . '!important';
	376	+ }
	377	+ $input_css['box-sizing'] = 'border-box';
	378	+
	379	+ return $input_css;
	380	+ }
	381	+
	382	+ public function get_input_hover_css( $attributes, $device = '' ) {
	383	+ $css = array();
	384	+ if ( isset( $attributes['inputBorder']['borderStyle'] ) && $attributes['inputBorder']['borderStyle'] === 'default' ) {
	385	+ $css['border'] = '1px solid #A7AAAD';
	386	+ $css['border-radius'] = '5px';
	387	+ }
	388	+ $input_focus_css = array_merge(
	389	+ $css,
	390	+ Border::get_hover_css( $attributes['inputBorder'], '', $device )
	391	+ );
	392	+
	393	+ return $input_focus_css;
	394	+ }
	395	+ public function get_input_focus_css( $attributes, $device = '' ) {
	396	+ $css = array();
	397	+ if ( isset( $attributes['inputBorder']['borderStyle'] ) && $attributes['inputBorder']['borderStyle'] === 'default' ) {
	398	+ $css['border'] = '1px solid #A7AAAD';
	399	+ $css['border-radius'] = '5px';
	400	+ }
	401	+ $input_focus_css = array_merge(
	402	+ $css,
	403	+ Border::get_hover_css( $attributes['inputBorder'], '', $device )
	404	+ );
	405	+
	406	+ return $input_focus_css;
	407	+ }
	408	+ public function get_input_placeholder_css( $attributes, $device = '' ) {
	409	+ $typographyValueGlobal = ! empty( $attributes['inputTypographyGlobal'] ) ? $attributes['inputTypographyGlobal'] : array();
	410	+ $placeholder_css = array_merge(
	411	+ Typography::get_css( $attributes['inputTypography'], '', $device, $typographyValueGlobal ),
	412	+ Alignment::get_css( $attributes['inputAlignment'], 'text-align', $device )
	413	+ );
	414	+ if ( ! empty( $attributes['inputPlaceholderColor'] ) ) {
	415	+ $placeholder_css['color'] = Color::get_css(
	416	+ isset( $attributes['inputPlaceholderColor'] ) ? $attributes['inputPlaceholderColor'] : '') . '!important';
	417	+ }
	418	+ return $placeholder_css;
	419	+
	420	+ }
	421	+ public function get_input_position_css( $attributes, $device = '' ) {
	422	+ $css = array_merge(
	423	+ Range::get_css([
	424	+ 'attributeValue' => $attributes['inputIconPosition'],
	425	+ 'isResponsive' => false,
	426	+ 'defaultValue' => 75,
	427	+ 'unitDefaultValue' => '%',
	428	+ 'property' => 'top',
	429	+ 'device' => $device,
	430	+ ]),
	431	+ );
	432	+ return $css;
	433	+ }
	434	+ public function get_alignment_button_css( $attributes, $device = '' ) {
	435	+ $button_alignment_css = array_merge(
	436	+ Alignment::get_css( $attributes['buttonTextAlignment'], 'text-align', $device ),
	437	+ Alignment::get_css( $attributes['buttonAlignment'], 'align-self', $device )
	438	+ );
	439	+
	440	+ return $button_alignment_css;
	441	+ }
	442	+
	443	+
	444	+ public function get_submit_button_css( $attributes, $device = '' ) {
	445	+ $typographyValueGlobal = ! empty( $attributes['buttonTypographyGlobal'] ) ? $attributes['buttonTypographyGlobal'] : array();
	446	+ $button_css = array_merge(
	447	+ [ 'color' => Color::get_css( isset( $attributes['buttonColor'] ) ? $attributes['buttonColor'] : '' ) ],
	448	+ [ 'background' => Color::get_css( isset( $attributes['buttonBgColor'] ) ? $attributes['buttonBgColor'] : '' ) ],
	449	+ Border::get_css( $attributes['buttonBorder'], '', $device ),
	450	+ Typography::get_css( $attributes['buttonTypography'], '', $device, $typographyValueGlobal ),
	451	+ Dimensions::get_css( $attributes['buttonPadding'], 'padding', $device ),
	452	+ );
	453	+ return $button_css;
	454	+ }
	455	+
	456	+ public function get_submit_button_hover_css( $attributes, $device = '' ) {
	457	+ return array_merge(
	458	+ [ 'color' => Color::get_css( isset( $attributes['buttonHColor'] ) ? $attributes['buttonHColor'] : '' ) ],
	459	+ [ 'background' => Color::get_css( isset( $attributes['buttonBgHColor'] ) ? $attributes['buttonBgHColor'] : '' ) ],
	460	+ Border::get_hover_css( $attributes['buttonBorder'], '', $device )
	461	+ );
	462	+ }
	463	+ public function get_navigator_css( $attributes, $device = '' ) {
	464	+ $typographyValueGlobal = ! empty( $attributes['navigatorTypographyGlobal'] ) ? $attributes['navigatorTypographyGlobal'] : array();
	465	+ return array_merge(
	466	+ [ 'color' => Color::get_css( isset( $attributes['navigatorColor'] ) ? $attributes['navigatorColor'] : '' ) ],
	467	+ Typography::get_css( $attributes['navigatorTypography'], '', $device, $typographyValueGlobal ),
	468	+ Dimensions::get_css( $attributes['navigatorPadding'], 'padding', $device ),
	469	+ Alignment::get_css( $attributes['navigatorAlignment'], 'text-align', $device ),
	470	+ );
	471	+ }
	472	+ public function get_navigator_spacing_css( $attributes, $device = '' ) {
	473	+ // Access the inputIconPosition attribute from the attributes array
	474	+ $css = array_merge(
	475	+ Range::get_css([
	476	+ 'attributeValue' => $attributes['navigatorSpacing'],
	477	+ 'isResponsive' => false,
	478	+ 'defaultValue' => 10,
	479	+ 'unitDefaultValue' => 'px',
	480	+ 'property' => 'margin-bottom',
	481	+ 'device' => $device,
	482	+ ]),
	483	+ );
	484	+ return $css;
	485	+
	486	+ }
	487	+ public function get_succsss_styles_css( $attributes, $device = '' ) {
	488	+ return array_merge(
	489	+ [ 'color' => Color::get_css( isset( $attributes['successColor'] ) ? $attributes['successColor'] : '' ) ],
	490	+ [ 'background' => Color::get_css( isset( $attributes['successBackground'] ) ? $attributes['successBackground'] : '' ) ]
	491	+ );
	492	+ }
	493	+ public function get_error_styles_css( $attributes, $device = '' ) {
	494	+ return array_merge(
	495	+ [ 'color' => Color::get_css( isset( $attributes['errorColor'] ) ? $attributes['errorColor'] : '' ) ],
	496	+ [ 'background' => Color::get_css( isset( $attributes['errorBackground'] ) ? $attributes['errorBackground'] : '' ) ],
	497	+ );
	498	+ }
	499	+ public function get_success_error_common_styles_css( $attributes, $device = '' ) {
	500	+ $typographyValueGlobal = ! empty( $attributes['successErrorTypographyGlobal'] ) ? $attributes['successErrorTypographyGlobal'] : array();
	501	+ return array_merge(
	502	+ Typography::get_css( $attributes['successErrorTypography'], '', $device, $typographyValueGlobal ),
	503	+ Alignment::get_css( $attributes['successErrorAlignment'], 'text-align', $device ),
	504	+ Dimensions::get_css( $attributes['successErrorPadding'], 'padding', $device ),
	505	+ );
	506	+ }
	507	+
	508	+ public function get_row_column_displayCss( $attributes, $device = '' ) {
	509	+ $css = [];
	510	+
	511	+ if ( isset( $attributes['dir'][ 'value' . $device ] ) ) {
	512	+ $dir_value = $attributes['dir'][ 'value' . $device ];
	513	+ $css['flex-direction'] = $dir_value;
	514	+
	515	+ if ( in_array( $dir_value, [ 'row', 'row-reverse' ], true ) ) {
	516	+ $css['align-items'] = 'center';
	517	+ } elseif ( in_array( $dir_value, [ 'column', 'column-reverse' ], true ) ) {
	518	+ $css['flex-wrap'] = 'wrap';
	519	+ }
	520	+ }
	521	+
	522	+ return $css;
	523	+ }
	524	+
	525	+ private function add_important_to_css( $css_array ) {
	526	+ foreach ( $css_array as $key => $value ) {
	527	+ $css_array[$key] = $value . ' !important';
	528	+ }
	529	+ return $css_array;
	530	+ }
	531	+
	532	+
	533	+}