betterdocs / includes / Editors / Elementor / Widget / Basic / SearchForm.php

SearchForm.php in BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot 4.5.0, at includes/Editors/Elementor/Widget/Basic/SearchForm.php

1,938 lines 56.9 KB

Raw Download Zip

1	<?php
2	namespace WPDeveloper\BetterDocs\Editors\Elementor\Widget\Basic;
3
4	// If this file is called directly, abort.
5	if ( ! defined( 'ABSPATH' ) ) {
6	exit;
7	}
8
9	use Elementor\Group_Control_Background;
10	use Elementor\Controls_Manager;
11	use WPDeveloper\BetterDocs\Editors\Elementor\BaseWidget;
12	use Elementor\Group_Control_Border;
13	use Elementor\Group_Control_Typography;
14
15	class SearchForm extends BaseWidget {
16	public $view_wrapper = 'betterdocs-search-form-wrapper';
17
18	public function get_name() {
19	return 'betterdocs-search-form';
20	}
21
22	public function get_title() {
23	return __( 'BetterDocs Search Form', 'betterdocs' );
24	}
25
26	public function get_categories() {
27	return [ 'betterdocs-elements', 'docs-archive', 'betterdocs-elements-single' ];
28	}
29
30	public function get_icon() {
31	return 'betterdocs-icon-search';
32	}
33
34	public function get_style_depends() {
35	return [ 'betterdocs-search', 'betterdocs-search-modal' ];
36	}
37
38	public function get_script_depends() {
39	return [ 'betterdocs-search', 'betterdocs-pro', 'betterdocs-search-modal', 'betterdocs-category-grid', 'betterdocs-extend-search-modal' ];
40	}
41
42	/**
43	* Get widget keywords.
44	*
45	* Retrieve the list of keywords the widget belongs to.
46	*
47	* @return array Widget keywords.
48	* @since 3.5.2
49	* @access public
50	*
51	*/
52	public function get_keywords() {
53	return [
54	'knowledgebase',
55	'knowledge Base',
56	'documentation',
57	'doc',
58	'kb',
59	'betterdocs',
60	'search',
61	'search form'
62
63	];
64	}
65
66	public function get_custom_help_url() {
67	return 'https://betterdocs.co/docs/single-doc-in-elementor';
68	}
69
70	protected function register_controls() {
71	$this->layout_selection();
72	$this->search_modal_query();
73	$this->search_content_settings();
74	$this->search_box_layout_1();
75	$this->search_field_layout_1();
76	$this->search_result_box_layout_1();
77	$this->search_result_list_layout_1();
78
79	$this->search_box_layout_2();
80	$this->search_field_layout_2();
81	$this->ai_search_suggestions_controls();
82	$this->search_modal_layout();
83	}
84
85	public function layout_selection() {
86	$this->start_controls_section(
87	'layout_selection_section',
88	[
89	'label' => __( 'Search Layout', 'betterdocs' ),
90	'tab' => Controls_Manager::TAB_CONTENT
91	]
92	);
93
94	$this->add_control(
95	'layout_select',
96	[
97	'label' => esc_html__( 'Select layout', 'betterdocs' ),
98	'type' => Controls_Manager::SELECT,
99	'default' => 'layout-2',
100	'label_block' => false,
101	'options' => [
102	'layout-1' => esc_html__( 'Classic Layout', 'betterdocs' ),
103	'layout-2' => esc_html__( 'Modal Layout', 'betterdocs' )
104	]
105	]
106	);
107
108	$this->add_control(
109	'search_modal_layout',
110	[
111	'label' => __( 'Search Modal Layout', 'betterdocs' ),
112	'type' => Controls_Manager::SELECT,
113	'default' => 'layout-1',
114	'label_block' => false,
115	'options' => [
116	'layout-1' => esc_html__( 'Layout 1', 'betterdocs' ),
117	'docs-archive' => esc_html__( 'Layout 2', 'betterdocs' ),
118	'sidebar' => esc_html__( 'Layout 3', 'betterdocs' )
119	],
120	'condition' => [
121	'layout_select' => [ 'layout-2' ]
122	]
123	]
124	);
125
126	$this->add_control(
127	'search_modal_width',
128	[
129	'label' => __( 'Width', 'betterdocs' ),
130	'type' => Controls_Manager::SLIDER,
131	'size_units' => [ '%', 'px' ],
132	'range' => [
133	'%' => [
134	'min' => 10,
135	'max' => 100,
136	],
137	'px' => [
138	'min' => 100,
139	'max' => 1200,
140	],
141	],
142	'default' => [
143	'unit' => '%',
144	'size' => 100,
145	],
146	'selectors' => [
147	'{{WRAPPER}} .betterdocs-search-modal-archive' => 'width: {{SIZE}}{{UNIT}};max-width: 100%;',
148	'{{WRAPPER}} .betterdocs-search-modal-sidebar' => 'width: {{SIZE}}{{UNIT}};',
149	],
150	'condition' => [
151	'layout_select' => [ 'layout-2' ],
152	'search_modal_layout' => [ 'docs-archive', 'sidebar' ]
153	]
154	]
155	);
156
157	$this->add_control(
158	'search_modal_position',
159	[
160	'label' => __( 'Position', 'betterdocs' ),
161	'type' => Controls_Manager::SELECT,
162	'default' => 'left',
163	'options' => [
164	'left' => __( 'Left', 'betterdocs' ),
165	'right' => __( 'Right', 'betterdocs' ),
166	],
167	'selectors' => [
168	'{{WRAPPER}}' => 'text-align: {{VALUE}};',
169	'{{WRAPPER}} .betterdocs-search-modal-archive' => 'display: inline-block; text-align: left;',
170	'{{WRAPPER}} .betterdocs-search-modal-sidebar' => 'display: inline-block; text-align: left;',
171	],
172	'condition' => [
173	'layout_select' => [ 'layout-2' ],
174	'search_modal_layout' => [ 'docs-archive', 'sidebar' ]
175	]
176	]
177	);
178
179	$this->end_controls_section();
180	}
181
182	public function search_modal_query() {
183	$this->start_controls_section(
184	'search_modal_query',
185	[
186	'label' => __( 'Modal Query', 'betterdocs' ),
187	'condition' => [
188	'layout_select' => [ 'layout-2' ]
189	]
190	]
191	);
192
193	$this->add_control(
194	'search_modal_doc_query_type',
195	[
196	'label' => __( 'Select Docs Type', 'betterdocs' ),
197	'label_block' => true,
198	'type' => Controls_Manager::SELECT2,
199	'options' => [
200	'popular_docs' => __( 'Popular Docs', 'betterdocs' ),
201	'specific_doc_ids' => __( "Specific Doc Id's", 'betterdocs' ),
202	'specific_doc_term_ids' => __( "Specific Doc Term Id's", 'betterdocs' )
203	],
204	'multiple' => false,
205	'default' => 'popular_docs'
206	]
207	);
208
209	$this->add_control(
210	'search_modal_query_term_ids',
211	[
212	'label' => __( "Doc Term ID's", 'betterdocs' ),
213	'type' => Controls_Manager::TEXT,
214	'description' => __( 'Example: 8, 9', 'betterdocs' ),
215	'default' => '',
216	'condition' => [
217	'search_modal_doc_query_type' => 'specific_doc_term_ids'
218	]
219	]
220	);
221
222	$this->add_control(
223	'search_modal_query_doc_ids',
224	[
225	'label' => __( "Doc ID's", 'betterdocs' ),
226	'type' => Controls_Manager::TEXT,
227	'description' => __( 'Example: 15, 16', 'betterdocs' ),
228	'default' => '',
229	'condition' => [
230	'search_modal_doc_query_type' => 'specific_doc_ids'
231	]
232	]
233	);
234
235	$this->add_control(
236	'initial_docs_number',
237	[
238	'label' => __( 'Number of Docs', 'betterdocs' ),
239	'type' => Controls_Manager::NUMBER,
240	'default' => '5',
241	'condition' => [
242	'search_modal_doc_query_type' => 'popular_docs'
243	]
244	]
245	);
246
247	$this->add_control(
248	'search_modal_faq_query_type',
249	[
250	'label' => __( 'Select FAQ Type', 'betterdocs' ),
251	'label_block' => true,
252	'type' => Controls_Manager::SELECT2,
253	'default' => 'default',
254	'options' => [
255	'default' => __( 'Default', 'betterdocs' ),
256	'specific_faq_term_ids' => __( "Specific FAQ Term Id's", 'betterdocs' ),
257	],
258	'multiple' => false,
259	]
260	);
261
262	$this->add_control(
263	'search_modal_query_faq_term_ids',
264	[
265	'label' => __( "FAQ Term ID's", 'betterdocs' ),
266	'type' => Controls_Manager::TEXT,
267	'description' => __( 'Example: 8, 9', 'betterdocs' ),
268	'default' => '',
269	'condition' => [
270	'search_modal_faq_query_type' => 'specific_faq_term_ids'
271	]
272	]
273	);
274
275	$this->add_control(
276	'initial_faqs_number',
277	[
278	'label' => __( "Number of FAQ's", 'betterdocs' ),
279	'type' => Controls_Manager::NUMBER,
280	'default' => '5',
281	'condition' => [
282	'search_modal_faq_query_type' => 'default'
283	]
284	]
285	);
286
287	$this->end_controls_section();
288	}
289
290
291
292	public function return_mod_terms( $accumulator, $term ) {
293	$accumulator[ $term->term_id ] = htmlspecialchars_decode( $term->name );
294	return $accumulator;
295	}
296
297
298	public function search_content_settings() {
299	$this->start_controls_section(
300	'search_content_placeholders',
301	[
302	'label' => __( 'Search Content', 'betterdocs' ),
303	'tab' => Controls_Manager::TAB_CONTENT
304	]
305	);
306
307	$this->add_control(
308	'section_search_field_placeholder',
309	[
310	'label' => __( 'Placeholder', 'betterdocs' ),
311	'type' => Controls_Manager::TEXT,
312	'default' => esc_html__( 'Search', 'betterdocs' )
313	]
314	);
315
316	$this->add_control(
317	'section_search_field_heading',
318	[
319	'label' => __( 'Search Heading', 'betterdocs' ),
320	'type' => Controls_Manager::TEXT,
321	'condition' => [
322	'layout_select' => 'layout-1',
323	'search_modal_layout' => 'layout-1'
324	],
325	'conditions' => [
326	'relation' => 'or',
327	'terms' => [
328	[
329	'name' => 'layout_select',
330	'operator' => '==',
331	'value' => 'layout-1'
332	],
333	[
334	'relation' => 'and',
335	'terms' => [
336	[
337	'name' => 'layout_select',
338	'operator' => '==',
339	'value' => 'layout-2'
340	],
341	[
342	'name' => 'search_modal_layout',
343	'operator' => '==',
344	'value' => 'layout-1'
345	]
346	]
347	]
348	]
349	]
350	]
351	);
352
353	$this->add_control(
354	'section_search_field_sub_heading',
355	[
356	'label' => __( 'Search Subheading', 'betterdocs' ),
357	'type' => Controls_Manager::TEXT,
358	'condition' => [
359	'layout_select' => 'layout-1',
360	'search_modal_layout' => 'layout-1'
361	],
362	'conditions' => [
363	'relation' => 'or',
364	'terms' => [
365	[
366	'name' => 'layout_select',
367	'operator' => '==',
368	'value' => 'layout-1'
369	],
370	[
371	'relation' => 'and',
372	'terms' => [
373	[
374	'name' => 'layout_select',
375	'operator' => '==',
376	'value' => 'layout-2'
377	],
378	[
379	'name' => 'search_modal_layout',
380	'operator' => '==',
381	'value' => 'layout-1'
382	]
383	]
384	]
385	]
386	]
387	]
388	);
389
390	$this->add_control(
391	'section_search_field_heading_tag',
392	[
393	'label' => __( 'Heading Tag', 'betterdocs' ),
394	'type' => Controls_Manager::SELECT,
395	'default' => 'h1',
396	'options' => [
397	'h1' => 'H1',
398	'h2' => 'H2',
399	'h3' => 'H3',
400	'h4' => 'H4',
401	'h5' => 'H5',
402	'h6' => 'H6',
403	'p' => 'P'
404	]
405	]
406	);
407
408	$this->add_control(
409	'section_search_field_subheading_tag',
410	[
411	'label' => __( 'Subheading Tag', 'betterdocs' ),
412	'type' => Controls_Manager::SELECT,
413	'default' => 'p',
414	'options' => [
415	'h1' => 'H1',
416	'h2' => 'H2',
417	'h3' => 'H3',
418	'h4' => 'H4',
419	'h5' => 'H5',
420	'h6' => 'H6',
421	'p' => 'P'
422	]
423	]
424	);
425
426	$this->add_control(
427	'betterdocs_search_button_toogle',
428	[
429	'label' => __( 'Enable Search Button', 'betterdocs' ),
430	'type' => Controls_Manager::SWITCHER,
431	'label_on' => __( 'On', 'betterdocs' ),
432	'label_off' => __( 'Off', 'betterdocs' ),
433	'return_value' => 'true',
434	'default' => true
435	]
436	);
437
438	$this->add_control(
439	'enable_ai_powered_search',
440	[
441	'label' => __( 'AI-Powered Smart Modal Search', 'betterdocs' ),
442	'type' => Controls_Manager::SWITCHER,
443	'label_on' => __( 'On', 'betterdocs' ),
444	'label_off' => __( 'Off', 'betterdocs' ),
445	'return_value' => 'true',
446	'default' => false
447	]
448	);
449
450	do_action( 'betterdocs/elementor/widgets/advanced-search/switcher', $this );
451
452	// AI Search Suggestions filter
453	apply_filters( 'betterdocs_search_form_ai_suggestions', '', $this );
454
455	$this->end_controls_section();
456	}
457
458	public function ai_search_suggestions_controls() {
459	// Check if AI Search Suggestions are available
460	if ( ! betterdocs()->helper->is_ai_chatbot_enabled() ) {
461	return;
462	}
463
464	$this->start_controls_section(
465	'ai_search_suggestions_section',
466	[
467	'label' => __( 'AI-Powered Smart Modal Search', 'betterdocs' ),
468	'tab' => Controls_Manager::TAB_STYLE,
469	'condition' => [
470	'enable_ai_powered_search' => 'true',
471	],
472	]
473	);
474
475	$this->add_control(
476	'ai_suggestion_background_color',
477	[
478	'label' => __( 'Background Color', 'betterdocs' ),
479	'type' => Controls_Manager::COLOR,
480	'selectors' => [
481	'{{WRAPPER}} .betterdocs-ai-suggestion' => 'background-color: {{VALUE}};',
482	],
483	'condition' => [
484	'enable_ai_powered_search' => 'true',
485	],
486	]
487	);
488
489	$this->add_control(
490	'ai_suggestion_hover_background_color',
491	[
492	'label' => __( 'Hover Background Color', 'betterdocs' ),
493	'type' => Controls_Manager::COLOR,
494	'selectors' => [
495	'{{WRAPPER}} .betterdocs-ai-suggestion:hover' => 'background-color: {{VALUE}};',
496	],
497	'condition' => [
498	'enable_ai_powered_search' => 'true',
499	],
500	]
501	);
502
503	$this->add_responsive_control(
504	'ai_suggestion_margin',
505	[
506	'label' => __( 'Margin', 'betterdocs' ),
507	'type' => Controls_Manager::DIMENSIONS,
508	'size_units' => [ 'px', '%', 'em' ],
509	'selectors' => [
510	'{{WRAPPER}} .betterdocs-ai-suggestion' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
511	],
512	'condition' => [
513	'enable_ai_powered_search' => 'true',
514	],
515	]
516	);
517
518	$this->add_responsive_control(
519	'ai_suggestion_padding',
520	[
521	'label' => __( 'Padding', 'betterdocs' ),
522	'type' => Controls_Manager::DIMENSIONS,
523	'size_units' => [ 'px', '%', 'em' ],
524	'selectors' => [
525	'{{WRAPPER}} .betterdocs-ai-suggestion' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
526	],
527	'condition' => [
528	'enable_ai_powered_search' => 'true',
529	],
530	]
531	);
532
533	// Title Controls
534	$this->add_control(
535	'ai_suggestion_title_heading',
536	[
537	'label' => __( 'Title', 'betterdocs' ),
538	'type' => Controls_Manager::HEADING,
539	'separator' => 'before',
540	'condition' => [
541	'enable_ai_powered_search' => 'true',
542	],
543	]
544	);
545
546	$this->add_group_control(
547	Group_Control_Typography::get_type(),
548	[
549	'name' => 'ai_suggestion_title_typography',
550	'selector' => '{{WRAPPER}} .betterdocs-ai-suggestion .ai-suggestion-prompt .ai-suggestion-text .ai-suggestion-label, {{WRAPPER}} .betterdocs-ai-suggestion .ai-response .ai-response-header .ai-response-title',
551	'condition' => [
552	'enable_ai_powered_search' => 'true',
553	],
554	]
555	);
556
557	$this->add_control(
558	'ai_suggestion_title_color',
559	[
560	'label' => __( 'Title Color', 'betterdocs' ),
561	'type' => Controls_Manager::COLOR,
562	'selectors' => [
563	'{{WRAPPER}} .betterdocs-ai-suggestion .ai-suggestion-prompt .ai-suggestion-text .ai-suggestion-label, , {{WRAPPER}} .betterdocs-ai-suggestion .ai-response .ai-response-header .ai-response-title' => 'color: {{VALUE}};',
564	],
565	'condition' => [
566	'enable_ai_powered_search' => 'true',
567	],
568	]
569	);
570
571	// Query Controls
572	$this->add_control(
573	'ai_suggestion_query_heading',
574	[
575	'label' => __( 'Query', 'betterdocs' ),
576	'type' => Controls_Manager::HEADING,
577	'separator' => 'before',
578	'condition' => [
579	'enable_ai_powered_search' => 'true',
580	],
581	]
582	);
583
584	$this->add_group_control(
585	Group_Control_Typography::get_type(),
586	[
587	'name' => 'ai_suggestion_query_typography',
588	'selector' => '{{WRAPPER}} .betterdocs-ai-suggestion .ai-suggestion-prompt .ai-suggestion-content .ai-suggestion-query',
589	'condition' => [
590	'enable_ai_powered_search' => 'true',
591	],
592	]
593	);
594
595	$this->add_control(
596	'ai_suggestion_query_color',
597	[
598	'label' => __( 'Query Text Color', 'betterdocs' ),
599	'type' => Controls_Manager::COLOR,
600	'selectors' => [
601	'{{WRAPPER}} .betterdocs-ai-suggestion .ai-suggestion-prompt .ai-suggestion-content .ai-suggestion-query' => 'color: {{VALUE}};',
602	],
603	'condition' => [
604	'enable_ai_powered_search' => 'true',
605	],
606	]
607	);
608
609	// Response Controls
610	$this->add_control(
611	'ai_suggestion_response_heading',
612	[
613	'label' => __( 'Response', 'betterdocs' ),
614	'type' => Controls_Manager::HEADING,
615	'separator' => 'before',
616	'condition' => [
617	'enable_ai_powered_search' => 'true',
618	],
619	]
620	);
621
622	$this->add_group_control(
623	Group_Control_Typography::get_type(),
624	[
625	'name' => 'ai_suggestion_response_typography',
626	'selector' => '{{WRAPPER}} .betterdocs-ai-suggestion .ai-response-content',
627	'condition' => [
628	'enable_ai_powered_search' => 'true',
629	],
630	]
631	);
632
633	$this->add_control(
634	'ai_suggestion_response_color',
635	[
636	'label' => __( 'Response Text Color', 'betterdocs' ),
637	'type' => Controls_Manager::COLOR,
638	'selectors' => [
639	'{{WRAPPER}} .betterdocs-ai-suggestion .ai-response-content' => 'color: {{VALUE}};',
640	],
641	'condition' => [
642	'enable_ai_powered_search' => 'true',
643	],
644	]
645	);
646
647	// Button Controls
648	$this->add_control(
649	'ai_suggestion_button_heading',
650	[
651	'label' => __( 'Continue Chat Button', 'betterdocs' ),
652	'type' => Controls_Manager::HEADING,
653	'separator' => 'before',
654	'condition' => [
655	'enable_ai_powered_search' => 'true',
656	],
657	]
658	);
659
660	$this->add_group_control(
661	Group_Control_Typography::get_type(),
662	[
663	'name' => 'ai_suggestion_button_typography',
664	'selector' => '{{WRAPPER}} .betterdocs-ai-suggestion .ai-response .ai-response-actions .continue-conversation-btn',
665	'condition' => [
666	'enable_ai_powered_search' => 'true',
667	],
668	]
669	);
670
671	$this->add_control(
672	'ai_suggestion_button_color',
673	[
674	'label' => __( 'Button Text Color', 'betterdocs' ),
675	'type' => Controls_Manager::COLOR,
676	'selectors' => [
677	'{{WRAPPER}} .betterdocs-ai-suggestion .ai-response .ai-response-actions .continue-conversation-btn' => 'color: {{VALUE}};',
678	],
679	'condition' => [
680	'enable_ai_powered_search' => 'true',
681	],
682	]
683	);
684
685	$this->add_control(
686	'ai_suggestion_button_bg_color',
687	[
688	'label' => __( 'Button Background Color', 'betterdocs' ),
689	'type' => Controls_Manager::COLOR,
690	'selectors' => [
691	'{{WRAPPER}} .betterdocs-ai-suggestion .ai-response .ai-response-actions .continue-conversation-btn' => 'background-color: {{VALUE}};',
692	],
693	'condition' => [
694	'enable_ai_powered_search' => 'true',
695	],
696	]
697	);
698
699	$this->add_responsive_control(
700	'ai_suggestion_button_padding',
701	[
702	'label' => __( 'Button Padding', 'betterdocs' ),
703	'type' => Controls_Manager::DIMENSIONS,
704	'size_units' => [ 'px', '%', 'em' ],
705	'selectors' => [
706	'{{WRAPPER}} .betterdocs-ai-suggestion .ai-response .ai-response-actions .continue-conversation-btn' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
707	],
708	'condition' => [
709	'enable_ai_powered_search' => 'true',
710	],
711	]
712	);
713
714	$this->add_responsive_control(
715	'ai_suggestion_button_margin',
716	[
717	'label' => __( 'Button Margin', 'betterdocs' ),
718	'type' => Controls_Manager::DIMENSIONS,
719	'size_units' => [ 'px', '%', 'em' ],
720	'selectors' => [
721	'{{WRAPPER}} .betterdocs-ai-suggestion .ai-response .ai-response-actions .continue-conversation-btn' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
722	],
723	'condition' => [
724	'enable_ai_powered_search' => 'true',
725	],
726	]
727	);
728
729	$this->add_group_control(
730	Group_Control_Border::get_type(),
731	[
732	'name' => 'ai_suggestion_button_border',
733	'label' => esc_html__( 'Button Border', 'betterdocs' ),
734	'selector' => '{{WRAPPER}} .betterdocs-ai-suggestion .ai-response .ai-response-actions .continue-conversation-btn',
735	'condition' => [
736	'enable_ai_powered_search' => 'true',
737	],
738	]
739	);
740
741	$this->end_controls_section();
742	}
743
744	public function search_box_layout_1() {
745	/**
746	* ----------------------------------------------------------
747	* Section: Search Box
748	* ----------------------------------------------------------
749	*/
750	$this->start_controls_section(
751	'section_search_box_settings',
752	[
753	'label' => __( 'Search Box', 'betterdocs' ),
754	'tab' => Controls_Manager::TAB_STYLE,
755	'condition' => [
756	'layout_select' => 'layout-1'
757	]
758	]
759	);
760
761	$this->add_group_control(
762	Group_Control_Background::get_type(),
763	[
764	'name' => 'search_box_bg',
765	'types' => [ 'classic', 'gradient' ],
766	'selector' => '{{WRAPPER}} .betterdocs-search-form-wrapper'
767	]
768	);
769
770	$this->add_responsive_control(
771	'search_box_padding',
772	[
773	'label' => esc_html__( 'Padding', 'betterdocs' ),
774	'type' => Controls_Manager::DIMENSIONS,
775	'size_units' => [ 'px', 'em', '%' ],
776	'default' => [
777	'top' => 50,
778	'right' => 50,
779	'bottom' => 50,
780	'left' => 50
781	],
782	'selectors' => [
783	'{{WRAPPER}} .betterdocs-search-form-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
784	]
785	]
786	);
787
788	$this->add_responsive_control(
789	'search_box_margin',
790	[
791	'label' => esc_html__( 'Margin', 'betterdocs' ),
792	'type' => Controls_Manager::DIMENSIONS,
793	'size_units' => [ 'px', 'em', '%' ],
794	'default' => [
795	'top' => 50,
796	'right' => 50,
797	'bottom' => 50,
798	'left' => 50
799	],
800	'selectors' => [
801	'{{WRAPPER}} .betterdocs-search-form-wrapper' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
802	]
803	]
804	);
805
806	$this->end_controls_section(); # end of 'Search Box'
807	}
808
809	public function search_box_layout_2() {
810	/**
811	* ----------------------------------------------------------
812	* Section: Search Box
813	* ----------------------------------------------------------
814	*/
815	$this->start_controls_section(
816	'section_search_box_settings_layout_2',
817	[
818	'label' => __( 'Search Box', 'betterdocs' ),
819	'tab' => Controls_Manager::TAB_STYLE,
820	'condition' => [
821	'layout_select' => 'layout-2',
822	'search_modal_layout' => [ 'layout-1' ]
823	]
824	]
825	);
826
827	$this->add_group_control(
828	Group_Control_Background::get_type(),
829	[
830	'name' => 'search_box_bg_layout_2',
831	'types' => [ 'classic', 'gradient' ],
832	'selector' => '{{WRAPPER}} .betterdocs-search-layout-1'
833	]
834	);
835
836	$this->add_responsive_control(
837	'search_box_padding_layout_2',
838	[
839	'label' => esc_html__( 'Padding', 'betterdocs' ),
840	'type' => Controls_Manager::DIMENSIONS,
841	'size_units' => [ 'px', 'em', '%' ],
842	'default' => [
843	'top' => 50,
844	'right' => 50,
845	'bottom' => 50,
846	'left' => 50
847	],
848	'selectors' => [
849	'{{WRAPPER}} .betterdocs-search-layout-1' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
850	]
851	]
852	);
853
854	$this->add_responsive_control(
855	'search_box_margin_layout_2',
856	[
857	'label' => esc_html__( 'Margin', 'betterdocs' ),
858	'type' => Controls_Manager::DIMENSIONS,
859	'size_units' => [ 'px', 'em', '%' ],
860	'default' => [
861	'top' => 50,
862	'right' => 50,
863	'bottom' => 50,
864	'left' => 50
865	],
866	'selectors' => [
867	'{{WRAPPER}} .betterdocs-search-layout-1' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
868	]
869	]
870	);
871
872	$this->end_controls_section(); # end of 'Search Box'
873	}
874
875	public function search_field_layout_1() {
876	/**
877	* ----------------------------------------------------------
878	* Section: Search Field
879	* ----------------------------------------------------------
880	*/
881	$this->start_controls_section(
882	'section_search_field_settings',
883	[
884	'label' => __( 'Search Field', 'betterdocs' ),
885	'tab' => Controls_Manager::TAB_STYLE,
886	'condition' => [
887	'layout_select' => 'layout-1'
888	]
889	]
890	);
891
892	$this->add_control(
893	'search_field_bg',
894	[
895	'label' => esc_html__( 'Field Background Color', 'betterdocs' ),
896	'type' => Controls_Manager::COLOR,
897	'selectors' => [
898	'{{WRAPPER}} .betterdocs-searchform' => 'background: {{VALUE}};'
899	]
900	]
901	);
902
903	$this->add_control(
904	'search_field_text_color',
905	[
906	'label' => esc_html__( 'Text Color', 'betterdocs' ),
907	'type' => Controls_Manager::COLOR,
908	'selectors' => [
909	'{{WRAPPER}} .betterdocs-searchform .betterdocs-search-field' => 'color: {{VALUE}};'
910	]
911	]
912	);
913
914	$this->add_group_control(
915	Group_Control_Typography::get_type(),
916	[
917	'name' => 'search_field_text_typography',
918	'selector' => '{{WRAPPER}} .betterdocs-searchform .betterdocs-search-field'
919	]
920	);
921
922	$this->add_responsive_control(
923	'search_field_padding',
924	[
925	'label' => __( 'Field Padding', 'betterdocs' ),
926	'type' => Controls_Manager::DIMENSIONS,
927	'size_units' => [ 'px', 'em', '%' ],
928	'selectors' => [
929	'{{WRAPPER}} .betterdocs-searchform .betterdocs-search-field' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
930	]
931	]
932	);
933
934	$this->add_control(
935	'search_field_placeholder',
936	[
937	'label' => esc_html__( 'Field Placeholder Color', 'betterdocs' ),
938	'type' => Controls_Manager::COLOR,
939	'selectors' => [
940	'{{WRAPPER}} .betterdocs-searchform .betterdocs-search-field::placeholder' => 'color: {{VALUE}};'
941	]
942	]
943	);
944
945	$this->add_responsive_control(
946	'search_box_outer_margin',
947	[
948	'label' => __( 'Search Box Margin', 'betterdocs' ),
949	'type' => Controls_Manager::DIMENSIONS,
950	'size_units' => [ 'px', 'em', '%' ],
951	'selectors' => [
952	'{{WRAPPER}} .betterdocs-searchform' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
953	]
954	]
955	);
956
957	$this->add_responsive_control(
958	'advanced_search_padding',
959	[
960	'label' => __( 'Search Box Padding', 'betterdocs' ),
961	'type' => Controls_Manager::DIMENSIONS,
962	'size_units' => [ 'px', 'em', '%' ],
963	'selectors' => [
964	'{{WRAPPER}} .betterdocs-searchform' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
965	]
966	]
967	);
968
969	$this->add_group_control(
970	Group_Control_Border::get_type(),
971	[
972	'name' => 'advanced_search_border',
973	'label' => esc_html__( 'Search Box Border', 'betterdocs' ),
974	'selector' => '{{WRAPPER}} .betterdocs-searchform'
975	]
976	);
977
978	$this->add_control(
979	'search_box_outer_width',
980	[
981	'label' => esc_html__( 'Size', 'betterdocs' ),
982	'type' => Controls_Manager::SLIDER,
983	'size_units' => [ 'px', '%', 'em' ],
984	'default' => [
985	'unit' => '%',
986	'size' => 100
987	],
988	'selectors' => [
989	'{{WRAPPER}} .betterdocs-searchform' => 'width: {{SIZE}}{{UNIT}}; height: auto;'
990	]
991	]
992	);
993
994	$this->add_responsive_control(
995	'search_field_padding_radius',
996	[
997	'label' => esc_html__( 'Border Radius', 'betterdocs' ),
998	'type' => Controls_Manager::DIMENSIONS,
999	'size_units' => [ 'px', 'em', '%' ],
1000	'selectors' => [
1001	'{{WRAPPER}} .betterdocs-searchform' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
1002	]
1003	]
1004	);
1005
1006	$this->add_control(
1007	'field_search_icon_heading',
1008	[
1009	'label' => esc_html__( 'Search Icon', 'betterdocs' ),
1010	'type' => Controls_Manager::HEADING,
1011	'separator' => 'before'
1012	]
1013	);
1014
1015	$this->add_control(
1016	'field_search_icon_color',
1017	[
1018	'label' => esc_html__( 'Color', 'betterdocs' ),
1019	'type' => Controls_Manager::COLOR,
1020	'selectors' => [
1021	'{{WRAPPER}} .betterdocs-searchform svg.docs-search-icon' => 'fill: {{VALUE}};'
1022	]
1023	]
1024	);
1025
1026	$this->add_control(
1027	'field_search_icon_size',
1028	[
1029	'label' => esc_html__( 'Size', 'betterdocs' ),
1030	'type' => Controls_Manager::SLIDER,
1031	'size_units' => [ 'px', '%', 'em' ],
1032	'range' => [
1033	'px' => [
1034	'max' => 500
1035	]
1036	],
1037	'selectors' => [
1038	'{{WRAPPER}} .betterdocs-searchform svg.docs-search-icon' => 'width: {{SIZE}}{{UNIT}}; height: auto;'
1039	]
1040	]
1041	);
1042
1043	$this->add_control(
1044	'field_close_icon_heading',
1045	[
1046	'label' => esc_html__( 'Close Icon', 'betterdocs' ),
1047	'type' => Controls_Manager::HEADING,
1048	'separator' => 'before'
1049	]
1050	);
1051
1052	$this->add_control(
1053	'search_field_close_icon_color',
1054	[
1055	'label' => esc_html__( 'Color', 'betterdocs' ),
1056	'type' => Controls_Manager::COLOR,
1057	'selectors' => [
1058	'{{WRAPPER}} .docs-search-close .close-line' => 'fill: {{VALUE}};'
1059	]
1060	]
1061	);
1062
1063	$this->add_control(
1064	'search_field_close_icon_border_color',
1065	[
1066	'label' => esc_html__( 'Border Color', 'betterdocs' ),
1067	'type' => Controls_Manager::COLOR,
1068	'selectors' => [
1069	'{{WRAPPER}} .docs-search-loader, {{WRAPPER}} .docs-search-close .close-border' => 'fill: {{VALUE}};'
1070	]
1071	]
1072	);
1073
1074	$this->end_controls_section(); # end of 'Search Field'
1075	}
1076
1077	public function search_field_layout_2() {
1078	/**
1079	* ----------------------------------------------------------
1080	* Section: Search Field
1081	* ----------------------------------------------------------
1082	*/
1083	$this->start_controls_section(
1084	'section_search_field_settings_layout_2',
1085	[
1086	'label' => __( 'Search Field', 'betterdocs' ),
1087	'tab' => Controls_Manager::TAB_STYLE,
1088	'condition' => [
1089	'layout_select' => 'layout-2'
1090	]
1091	]
1092	);
1093
1094	$this->add_control(
1095	'search_field_bg_layout_2',
1096	[
1097	'label' => esc_html__( 'Field Background Color', 'betterdocs' ),
1098	'type' => Controls_Manager::COLOR,
1099	'selectors' => [
1100	'{{WRAPPER}} .betterdocs-search-layout-1 .search-bar, {{WRAPPER}} .betterdocs-search-form-widget-wrapper .betterdocs-live-search .betterdocs-searchform' => 'background: {{VALUE}};'
1101	]
1102	]
1103	);
1104
1105	$this->add_control(
1106	'search_field_text_color_layout_2',
1107	[
1108	'label' => esc_html__( 'Text Color', 'betterdocs' ),
1109	'type' => Controls_Manager::COLOR,
1110	'selectors' => [
1111	'{{WRAPPER}} .betterdocs-search-layout-1 .search-bar .search-input-wrapper .search-input, {{WRAPPER}} .betterdocs-search-form-widget-wrapper .betterdocs-live-search .betterdocs-searchform .betterdocs-searchform-input-wrap .betterdocs-search-command' => 'color: {{VALUE}};'
1112	]
1113	]
1114	);
1115
1116	$this->add_group_control(
1117	Group_Control_Typography::get_type(),
1118	[
1119	'name' => 'search_field_text_typography_layout_2',
1120	'selector' => '{{WRAPPER}} .betterdocs-search-layout-1 .search-bar .search-input-wrapper .search-input,, {{WRAPPER}} .betterdocs-search-form-widget-wrapper .betterdocs-live-search .betterdocs-searchform .betterdocs-searchform-input-wrap .betterdocs-search-command'
1121	]
1122	);
1123
1124	$this->add_responsive_control(
1125	'search_field_padding_layout_2',
1126	[
1127	'label' => __( 'Field Padding', 'betterdocs' ),
1128	'type' => Controls_Manager::DIMENSIONS,
1129	'size_units' => [ 'px', 'em', '%' ],
1130	'selectors' => [
1131	'{{WRAPPER}} .betterdocs-search-layout-1 .search-bar, {{WRAPPER}} .betterdocs-search-form-widget-wrapper .betterdocs-live-search .betterdocs-searchform' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
1132	]
1133	]
1134	);
1135
1136	$this->add_responsive_control(
1137	'search_box_outer_margin_layout_2',
1138	[
1139	'label' => __( 'Search Box Margin', 'betterdocs' ),
1140	'type' => Controls_Manager::DIMENSIONS,
1141	'size_units' => [ 'px', 'em', '%' ],
1142	'selectors' => [
1143	'{{WRAPPER}} .betterdocs-search-layout-1 .search-bar' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
1144	],
1145	'condition' => [
1146	'layout_select' => [ 'layout-2' ],
1147	'search_modal_layout' => [ 'layout-1' ]
1148	]
1149	]
1150	);
1151
1152	$this->add_responsive_control(
1153	'advanced_search_padding_layout_2',
1154	[
1155	'label' => __( 'Search Box Padding', 'betterdocs' ),
1156	'type' => Controls_Manager::DIMENSIONS,
1157	'size_units' => [ 'px', 'em', '%' ],
1158	'selectors' => [
1159	'{{WRAPPER}} .betterdocs-search-layout-1 .search-bar' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
1160	],
1161	'condition' => [
1162	'layout_select' => [ 'layout-2' ],
1163	'search_modal_layout' => [ 'layout-1' ]
1164	]
1165	]
1166	);
1167
1168	$this->add_group_control(
1169	Group_Control_Border::get_type(),
1170	[
1171	'name' => 'advanced_search_border_layout_2',
1172	'label' => esc_html__( 'Search Box Border', 'betterdocs' ),
1173	'selector' => '{{WRAPPER}} .betterdocs-search-layout-1 .search-bar',
1174	'condition' => [
1175	'layout_select' => [ 'layout-2' ],
1176	'search_modal_layout' => [ 'layout-1' ]
1177	]
1178	],
1179	);
1180
1181	$this->add_control(
1182	'search_box_outer_width_layout_2',
1183	[
1184	'label' => esc_html__( 'Size', 'betterdocs' ),
1185	'type' => Controls_Manager::SLIDER,
1186	'size_units' => [ 'px', '%', 'em' ],
1187	'default' => [
1188	'unit' => '%',
1189	'size' => 100
1190	],
1191	'selectors' => [
1192	'{{WRAPPER}} .betterdocs-search-layout-1 .search-bar' => 'width: {{SIZE}}{{UNIT}}; height: auto;'
1193	],
1194	'condition' => [
1195	'layout_select' => [ 'layout-2' ],
1196	'search_modal_layout' => [ 'layout-1' ]
1197	]
1198	]
1199	);
1200
1201	$this->add_responsive_control(
1202	'search_field_padding_radius_layout_2',
1203	[
1204	'label' => esc_html__( 'Border Radius', 'betterdocs' ),
1205	'type' => Controls_Manager::DIMENSIONS,
1206	'size_units' => [ 'px', 'em', '%' ],
1207	'selectors' => [
1208	'{{WRAPPER}} .betterdocs-search-layout-1 .search-bar' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
1209	],
1210	'condition' => [
1211	'layout_select' => [ 'layout-2' ],
1212	'search_modal_layout' => [ 'layout-1' ]
1213	]
1214	]
1215	);
1216
1217	$this->add_control(
1218	'field_search_icon_heading_layout_2',
1219	[
1220	'label' => esc_html__( 'Search Icon', 'betterdocs' ),
1221	'type' => Controls_Manager::HEADING,
1222	'separator' => 'before'
1223	]
1224	);
1225
1226	$this->add_control(
1227	'field_search_icon_color_layout_2',
1228	[
1229	'label' => esc_html__( 'Color', 'betterdocs' ),
1230	'type' => Controls_Manager::COLOR,
1231	'selectors' => [
1232	'{{WRAPPER}} .betterdocs-search-layout-1 .search-bar .search-input-wrapper .search-icon g path, {{WRAPPER}} .betterdocs-search-form-widget-wrapper .betterdocs-live-search .betterdocs-searchform .betterdocs-searchform-input-wrap svg path' => 'fill: {{VALUE}};'
1233	]
1234	]
1235	);
1236
1237	$this->add_control(
1238	'field_search_icon_size_layout_2',
1239	[
1240	'label' => esc_html__( 'Size', 'betterdocs' ),
1241	'type' => Controls_Manager::SLIDER,
1242	'size_units' => [ 'px', '%', 'em' ],
1243	'range' => [
1244	'px' => [
1245	'max' => 500
1246	]
1247	],
1248	'selectors' => [
1249	'{{WRAPPER}} .betterdocs-search-layout-1 .search-bar .search-input-wrapper .search-icon, {{WRAPPER}} .betterdocs-search-form-widget-wrapper .betterdocs-live-search .betterdocs-searchform .betterdocs-searchform-input-wrap svg' => 'width: {{SIZE}}{{UNIT}}; height: auto;'
1250	]
1251	]
1252	);
1253
1254	$this->add_control(
1255	'field_search_button_heading_layout_2',
1256	[
1257	'label' => esc_html__( 'Search Button', 'betterdocs' ),
1258	'type' => Controls_Manager::HEADING,
1259	'separator' => 'before'
1260	]
1261	);
1262
1263	$this->add_control(
1264	'field_search_button_color_layout_2',
1265	[
1266	'label' => esc_html__( 'Color', 'betterdocs' ),
1267	'type' => Controls_Manager::COLOR,
1268	'selectors' => [
1269	'{{WRAPPER}} .betterdocs-search-layout-1 .search-bar .search-button, {{WRAPPER}} .betterdocs-search-modal-archive .betterdocs-live-search .betterdocs-searchform .search-button' => 'color: {{VALUE}};'
1270	]
1271	]
1272	);
1273
1274	$this->add_control(
1275	'field_search_button_background_color_layout_2',
1276	[
1277	'label' => esc_html__( 'Background Color', 'betterdocs' ),
1278	'type' => Controls_Manager::COLOR,
1279	'selectors' => [
1280	'{{WRAPPER}} .betterdocs-search-layout-1 .search-bar .search-button, {{WRAPPER}} .betterdocs-search-modal-archive .betterdocs-live-search .betterdocs-searchform .search-button' => 'background-color: {{VALUE}};'
1281	]
1282	]
1283	);
1284
1285	$this->add_responsive_control(
1286	'field_search_button_border_radius_layout_2',
1287	[
1288	'label' => esc_html__( 'Border Radius', 'betterdocs' ),
1289	'type' => Controls_Manager::DIMENSIONS,
1290	'size_units' => [ 'px', 'em', '%' ],
1291	'selectors' => [
1292	'{{WRAPPER}} .betterdocs-search-layout-1 .search-bar .search-button, {{WRAPPER}} .betterdocs-search-modal-archive .betterdocs-live-search .betterdocs-searchform .search-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
1293	]
1294	]
1295	);
1296
1297	$this->add_group_control(
1298	Group_Control_Typography::get_type(),
1299	[
1300	'name' => 'field_search_button_typography_layout_2',
1301	'selector' => '{{WRAPPER}} .betterdocs-search-layout-1 .search-bar .search-button, {{WRAPPER}} .betterdocs-search-modal-archive .betterdocs-live-search .betterdocs-searchform .search-button'
1302	]
1303	);
1304
1305	$this->end_controls_section(); # end of 'Search Field'
1306	}
1307
1308	public function search_modal_layout() {
1309	$this->start_controls_section(
1310	'search_modal',
1311	[
1312	'label' => __( 'Search Modal', 'betterdocs' ),
1313	'tab' => Controls_Manager::TAB_STYLE,
1314	'condition' => [
1315	'layout_select' => 'layout-2'
1316	]
1317	]
1318	);
1319
1320	$this->add_control(
1321	'search_modal_field',
1322	[
1323	'label' => esc_html__( 'Search Field', 'betterdocs' ),
1324	'type' => Controls_Manager::HEADING,
1325	'separator' => 'before',
1326	]
1327	);
1328
1329	$this->add_responsive_control(
1330	'search_magnifier_color',
1331	[
1332	'label' => esc_html__( 'Magnifier Color', 'betterdocs' ),
1333	'type' => Controls_Manager::COLOR,
1334	'selectors' => [
1335	'{{WRAPPER}} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header svg g path' => 'fill: {{VALUE}};'
1336	]
1337	]
1338	);
1339
1340	$this->add_responsive_control(
1341	'search_field_background_color',
1342	[
1343	'label' => esc_html__( 'Field Background Color', 'betterdocs' ),
1344	'type' => Controls_Manager::COLOR,
1345	'selectors' => [
1346	'{{WRAPPER}} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header' => 'background-color: {{VALUE}};'
1347	]
1348	]
1349	);
1350
1351	$this->add_group_control(
1352	Group_Control_Typography::get_type(),
1353	[
1354	'name' => 'search_modal_field_typography',
1355	'selector' => '{{WRAPPER}} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header .betterdocs-searchform-input-wrap .betterdocs-search-field'
1356	]
1357	);
1358
1359	$this->add_responsive_control(
1360	'search_modal_field_color',
1361	[
1362	'label' => esc_html__( 'Field Text Color', 'betterdocs' ),
1363	'type' => Controls_Manager::COLOR,
1364	'selectors' => [
1365	'{{WRAPPER}} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header .betterdocs-searchform-input-wrap .betterdocs-search-field' => 'color: {{VALUE}};'
1366	]
1367	]
1368	);
1369
1370	$this->add_responsive_control(
1371	'search_modal_field_placeholder_color',
1372	[
1373	'label' => esc_html__( 'Field Placeholder Color', 'betterdocs' ),
1374	'type' => Controls_Manager::COLOR,
1375	'selectors' => [
1376	'{{WRAPPER}} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header .betterdocs-searchform-input-wrap .betterdocs-search-field::placeholder' => 'color: {{VALUE}};'
1377	]
1378	]
1379	);
1380
1381	$this->add_control(
1382	'search_modal_category_section',
1383	[
1384	'label' => esc_html__( 'Search Category', 'betterdocs' ),
1385	'type' => Controls_Manager::HEADING,
1386	'separator' => 'before',
1387	]
1388	);
1389
1390	$this->add_responsive_control(
1391	'search_modal_categories_color',
1392	[
1393	'label' => esc_html__( 'Color', 'betterdocs' ),
1394	'type' => Controls_Manager::COLOR,
1395	'selectors' => [
1396	'{{WRAPPER}} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header .betterdocs-select-option-wrapper .betterdocs-form-select' => 'color: {{VALUE}};'
1397	]
1398	]
1399	);
1400
1401	$this->add_group_control(
1402	Group_Control_Typography::get_type(),
1403	[
1404	'name' => 'search_modal_categories_typography',
1405	'selector' => '{{WRAPPER}} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-header .betterdocs-select-option-wrapper .betterdocs-form-select'
1406	]
1407	);
1408
1409	$this->add_control(
1410	'search_modal_content_tabs',
1411	[
1412	'label' => esc_html__( 'Content Tabs', 'betterdocs' ),
1413	'type' => Controls_Manager::HEADING,
1414	'separator' => 'before',
1415	]
1416	);
1417
1418	$this->add_group_control(
1419	Group_Control_Typography::get_type(),
1420	[
1421	'name' => 'search_modal_content_tabs_typography',
1422	'selector' => '{{WRAPPER}} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-info-tab .betterdocs-tab-items span'
1423	]
1424	);
1425
1426	$this->add_control(
1427	'search_modal_content_tabs_icon_size',
1428	[
1429	'label' => __( 'Icon Size', 'betterdocs' ),
1430	'type' => Controls_Manager::SLIDER,
1431	'size_units' => [ 'px', '%' ],
1432	'range' => [
1433	'px' => [
1434	'min' => 0,
1435	'max' => 1000,
1436	'step' => 5
1437	],
1438	'%' => [
1439	'min' => 0,
1440	'max' => 100
1441	]
1442	],
1443	'selectors' => [
1444	'{{WRAPPER}} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-info-tab .betterdocs-tab-items span svg' => 'height: {{SIZE}}{{UNIT}}; width:{{SIZE}}{{UNIT}};'
1445	]
1446	]
1447	);
1448
1449	$this->add_responsive_control(
1450	'search_modal_content_tabs_icon_colors',
1451	[
1452	'label' => esc_html__( 'Icon Color', 'betterdocs' ),
1453	'type' => Controls_Manager::COLOR,
1454	'selectors' => [
1455	'{{WRAPPER}} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-info-tab .betterdocs-tab-items span svg path' => 'fill: {{VALUE}};'
1456	]
1457	]
1458	);
1459
1460	$this->add_group_control(
1461	Group_Control_Border::get_type(),
1462	[
1463	'name' => 'search_modal_content_active_tab_border',
1464	'label' => esc_html__( 'Border', 'betterdocs' ),
1465	'selector' => '{{WRAPPER}} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-info-tab .betterdocs-tab-items.active'
1466	]
1467	);
1468
1469	$this->add_control(
1470	'search_modal_content_list',
1471	[
1472	'label' => esc_html__( 'Content List', 'betterdocs' ),
1473	'type' => Controls_Manager::HEADING,
1474	'separator' => 'before',
1475	]
1476	);
1477
1478	$this->add_group_control(
1479	Group_Control_Typography::get_type(),
1480	[
1481	'name' => 'search_modal_content_list_typography',
1482	'selector' => '{{WRAPPER}} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list .content-main h4'
1483	]
1484	);
1485
1486	$this->add_responsive_control(
1487	'search_modal_content_list_color',
1488	[
1489	'label' => esc_html__( 'Color', 'betterdocs' ),
1490	'type' => Controls_Manager::COLOR,
1491	'selectors' => [
1492	'{{WRAPPER}} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list .content-main h4' => 'color: {{VALUE}};'
1493	]
1494	]
1495	);
1496
1497	$this->add_control(
1498	'search_modal_content_list_icon_size',
1499	[
1500	'label' => __( 'Icon Size', 'betterdocs' ),
1501	'type' => Controls_Manager::SLIDER,
1502	'size_units' => [ 'px', '%' ],
1503	'range' => [
1504	'px' => [
1505	'min' => 0,
1506	'max' => 1000,
1507	'step' => 5
1508	],
1509	'%' => [
1510	'min' => 0,
1511	'max' => 100
1512	]
1513	],
1514	'selectors' => [
1515	'{{WRAPPER}} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list .content-main svg' => 'height: {{SIZE}}{{UNIT}}; width:{{SIZE}}{{UNIT}};'
1516	]
1517	]
1518	);
1519
1520	$this->add_group_control(
1521	Group_Control_Border::get_type(),
1522	[
1523	'name' => 'search_modal_content_list_border',
1524	'label' => esc_html__( 'Border', 'betterdocs' ),
1525	'selector' => '{{WRAPPER}} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list'
1526	]
1527	);
1528
1529	$this->add_control(
1530	'search_modal_content_list_category',
1531	[
1532	'label' => esc_html__( 'Content List Category', 'betterdocs' ),
1533	'type' => Controls_Manager::HEADING,
1534	'separator' => 'before',
1535	]
1536	);
1537
1538	$this->add_group_control(
1539	Group_Control_Typography::get_type(),
1540	[
1541	'name' => 'search_modal_content_list_category_typography',
1542	'selector' => '{{WRAPPER}} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list .content-sub h5'
1543	]
1544	);
1545
1546	$this->add_responsive_control(
1547	'search_modal_content_list_category_color',
1548	[
1549	'label' => esc_html__( 'Color', 'betterdocs' ),
1550	'type' => Controls_Manager::COLOR,
1551	'selectors' => [
1552	'{{WRAPPER}} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list .content-sub h5' => 'color: {{VALUE}};'
1553	]
1554	]
1555	);
1556
1557	$this->add_control(
1558	'search_modal_content_list_category_icon_size',
1559	[
1560	'label' => __( 'Icon Size', 'betterdocs' ),
1561	'type' => Controls_Manager::SLIDER,
1562	'size_units' => [ 'px', '%' ],
1563	'range' => [
1564	'px' => [
1565	'min' => 0,
1566	'max' => 1000,
1567	'step' => 5
1568	],
1569	'%' => [
1570	'min' => 0,
1571	'max' => 100
1572	]
1573	],
1574	'selectors' => [
1575	'{{WRAPPER}} .betterdocs-search-wrapper .betterdocs-search-details .betterdocs-search-content .betterdocs-search-items-wrapper .betterdocs-search-item-content .betterdocs-search-item-list .content-sub svg' => 'height: {{SIZE}}{{UNIT}}; width:{{SIZE}}{{UNIT}};'
1576	]
1577	]
1578	);
1579
1580	$this->end_controls_section();
1581	}
1582
1583	public function search_result_box_layout_1() {
1584	/**
1585	* ----------------------------------------------------------
1586	* Section: Search Result Box
1587	* ----------------------------------------------------------
1588	*/
1589	$this->start_controls_section(
1590	'section_search_result_settings',
1591	[
1592	'label' => __( 'Search Result Box', 'betterdocs' ),
1593	'tab' => Controls_Manager::TAB_STYLE,
1594	'condition' => [
1595	'layout_select' => 'layout-1'
1596	]
1597	]
1598	);
1599
1600	$this->add_responsive_control(
1601	'result_box_width',
1602	[
1603	'label' => __( 'Width', 'betterdocs' ),
1604	'type' => Controls_Manager::SLIDER,
1605	'default' => [
1606	'size' => 100,
1607	'unit' => '%'
1608	],
1609	'size_units' => [ '%', 'px', 'em' ],
1610	'range' => [
1611	'%' => [
1612	'max' => 100,
1613	'step' => 1
1614	]
1615	],
1616	'selectors' => [
1617	'{{WRAPPER}} .betterdocs-live-search .docs-search-result' => 'width: {{SIZE}}{{UNIT}};'
1618	]
1619	]
1620	);
1621
1622	$this->add_responsive_control(
1623	'result_box_max_width',
1624	[
1625	'label' => __( 'Max Width', 'betterdocs' ),
1626	'type' => Controls_Manager::SLIDER,
1627	'default' => [
1628	'size' => 1600,
1629	'unit' => 'px'
1630	],
1631	'size_units' => [ 'px', 'em' ],
1632	'range' => [
1633	'px' => [
1634	'max' => 1600,
1635	'step' => 1
1636	]
1637	],
1638	'selectors' => [
1639	'{{WRAPPER}} .betterdocs-live-search .docs-search-result' => 'max-width: {{SIZE}}{{UNIT}};'
1640	]
1641	]
1642	);
1643
1644	$this->add_group_control(
1645	Group_Control_Background::get_type(),
1646	[
1647	'name' => 'result_box_bg',
1648	'types' => [ 'classic', 'gradient' ],
1649	'selector' => '{{WRAPPER}} .betterdocs-live-search .docs-search-result'
1650	]
1651	);
1652
1653	$this->add_group_control(
1654	Group_Control_Border::get_type(),
1655	[
1656	'name' => 'result_box_border',
1657	'label' => esc_html__( 'Border', 'betterdocs' ),
1658	'selector' => '{{WRAPPER}} .betterdocs-live-search .docs-search-result'
1659	]
1660	);
1661
1662	$this->end_controls_section(); # end of 'Search Result Box'
1663	}
1664
1665	public function search_result_list_layout_1() {
1666	/**
1667	* ----------------------------------------------------------
1668	* Section: Search Result Item
1669	* ----------------------------------------------------------
1670	*/
1671	$this->start_controls_section(
1672	'section_search_result_item_settings',
1673	[
1674	'label' => __( 'Search Result List', 'betterdocs' ),
1675	'tab' => Controls_Manager::TAB_STYLE,
1676	'condition' => [
1677	'layout_select' => 'layout-1'
1678	]
1679	]
1680	);
1681
1682	$this->start_controls_tabs( 'item_settings_tab' );
1683
1684	// Normal State Tab
1685	$this->start_controls_tab(
1686	'item_normal',
1687	[ 'label' => esc_html__( 'Normal', 'betterdocs' ) ]
1688	);
1689
1690	$this->add_control(
1691	'result_box_item',
1692	[
1693	'label' => esc_html__( 'Item', 'betterdocs' ),
1694	'type' => Controls_Manager::HEADING
1695	]
1696	);
1697
1698	$this->add_group_control(
1699	Group_Control_Typography::get_type(),
1700	[
1701	'name' => 'result_box_item_typography',
1702	'selector' => '{{WRAPPER}} .betterdocs-live-search .docs-search-result li a .betterdocs-search-title'
1703	]
1704	);
1705
1706	$this->add_control(
1707	'result_box_item_color',
1708	[
1709	'label' => esc_html__( 'Item Color', 'betterdocs' ),
1710	'type' => Controls_Manager::COLOR,
1711	'selectors' => [
1712	'{{WRAPPER}} .betterdocs-live-search .docs-search-result li a .betterdocs-search-title' => 'color: {{VALUE}};'
1713	]
1714	]
1715	);
1716
1717	$this->add_group_control(
1718	Group_Control_Border::get_type(),
1719	[
1720	'name' => 'result_item_border',
1721	'label' => esc_html__( 'Border', 'betterdocs' ),
1722	'selector' => '{{WRAPPER}} .betterdocs-live-search .docs-search-result li'
1723	]
1724	);
1725
1726	$this->add_responsive_control(
1727	'result_box_item_padding',
1728	[
1729	'label' => __( 'Padding', 'betterdocs' ),
1730	'type' => Controls_Manager::DIMENSIONS,
1731	'size_units' => [ 'px', 'em', '%' ],
1732	'selectors' => [
1733	'{{WRAPPER}} .betterdocs-live-search .docs-search-result li a' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};'
1734	]
1735	]
1736	);
1737
1738	$this->add_control(
1739	'search_result_box_item_category',
1740	[
1741	'label' => esc_html__( 'Category', 'betterdocs' ),
1742	'type' => Controls_Manager::HEADING,
1743	'separator' => 'before'
1744	]
1745	);
1746
1747	$this->add_group_control(
1748	Group_Control_Typography::get_type(),
1749	[
1750	'name' => 'result_box_item_category_typography',
1751	'selector' => '{{WRAPPER}} .betterdocs-live-search .docs-search-result li span.betterdocs-search-category'
1752	]
1753	);
1754
1755	$this->add_control(
1756	'result_box_item_category_color',
1757	[
1758	'label' => esc_html__( 'Color', 'betterdocs' ),
1759	'type' => Controls_Manager::COLOR,
1760	'selectors' => [
1761	'{{WRAPPER}} .betterdocs-live-search .docs-search-result li span.betterdocs-search-category' => 'color: {{VALUE}};'
1762	]
1763	]
1764	);
1765
1766	$this->end_controls_tab();
1767
1768	// Hover State Tab
1769	$this->start_controls_tab(
1770	'item_hover',
1771	[ 'label' => esc_html__( 'Hover', 'betterdocs' ) ]
1772	);
1773
1774	$this->add_responsive_control(
1775	'result_item_transition',
1776	[
1777	'label' => __( 'Transition', 'betterdocs' ),
1778	'type' => Controls_Manager::SLIDER,
1779	'default' => [
1780	'size' => 300,
1781	'unit' => '%'
1782	],
1783	'size_units' => [ '%' ],
1784	'range' => [
1785	'%' => [
1786	'max' => 2500,
1787	'step' => 1
1788	]
1789	],
1790	'selectors' => [
1791	'{{WRAPPER}} .betterdocs-live-search .docs-search-result li, {{WRAPPER}} .betterdocs-live-search .docs-search-result li a, {{WRAPPER}} .betterdocs-live-search .docs-search-result li span, {{WRAPPER}} .betterdocs-live-search .docs-search-result' => 'transition: {{SIZE}}ms;'
1792	]
1793	]
1794	);
1795
1796	$this->add_control(
1797	'result_box_item_hover_heading',
1798	[
1799	'label' => esc_html__( 'Item', 'betterdocs' ),
1800	'type' => Controls_Manager::HEADING
1801	]
1802	);
1803
1804	$this->add_group_control(
1805	Group_Control_Background::get_type(),
1806	[
1807	'name' => 'result_box_item_hover_bg',
1808	'types' => [ 'classic', 'gradient' ],
1809	'selector' => '{{WRAPPER}} .betterdocs-live-search .docs-search-result li:hover',
1810	'exclude' => [
1811	'image'
1812	]
1813	]
1814	);
1815
1816	$this->add_control(
1817	'result_box_item_hover_color',
1818	[
1819	'label' => esc_html__( 'Item Color', 'betterdocs' ),
1820	'type' => Controls_Manager::COLOR,
1821	'selectors' => [
1822	'{{WRAPPER}} .betterdocs-live-search .docs-search-result li:hover a' => 'color: {{VALUE}};'
1823	]
1824	]
1825	);
1826
1827	$this->add_group_control(
1828	Group_Control_Border::get_type(),
1829	[
1830	'name' => 'result_item_hover_border',
1831	'label' => esc_html__( 'Border', 'betterdocs' ),
1832	'selector' => '{{WRAPPER}} .betterdocs-live-search .docs-search-result li:hover'
1833	]
1834	);
1835
1836	$this->add_control(
1837	'result_box_item_hover_count_heading',
1838	[
1839	'label' => esc_html__( 'Count', 'betterdocs' ),
1840	'type' => Controls_Manager::HEADING,
1841	'separator' => 'before'
1842	]
1843	);
1844
1845	$this->add_control(
1846	'result_box_item_hover_count_color',
1847	[
1848	'label' => esc_html__( 'Item Color', 'betterdocs' ),
1849	'type' => Controls_Manager::COLOR,
1850	'selectors' => [
1851	'{{WRAPPER}} .betterdocs-live-search .docs-search-result li:hover span' => 'color: {{VALUE}};'
1852	]
1853	]
1854	);
1855	$this->end_controls_tab();
1856	$this->end_controls_tabs();
1857
1858	$this->end_controls_section(); # end of 'Search Result Item'
1859
1860	do_action( 'betterdocs/elementor/widgets/advanced-search/controllers', $this );
1861	}
1862
1863	public function render_callback() {
1864	$settings = &$this->attributes;
1865
1866	// Always ensure content is output to prevent empty widget background
1867	if ( $settings['layout_select'] == 'layout-1' ) {
1868	$this->views( 'widgets/search-form' );
1869	} else {
1870	$number_of_docs = isset( $settings['initial_docs_number'] ) ? $settings['initial_docs_number'] : '';
1871	$number_of_faqs = isset( $settings['initial_faqs_number'] ) ? $settings['initial_faqs_number'] : '';
1872	$doc_categories_ids = isset( $settings['search_modal_query_term_ids'] ) ? $settings['search_modal_query_term_ids'] : '';
1873	$doc_ids = isset( $settings['search_modal_query_doc_ids'] ) ? $settings['search_modal_query_doc_ids'] : '';
1874	$faq_categories_ids = isset( $settings['search_modal_query_faq_term_ids'] ) ? $settings['search_modal_query_faq_term_ids'] : '';
1875	$search_modal_layout = isset( $settings['search_modal_layout'] ) ? $settings['search_modal_layout'] : 'layout-1';
1876	$search_modal_search_type = betterdocs()->settings->get('search_modal_search_type');
1877
1878	// Ensure we always output content, especially in edit mode
1879	echo '<div class="betterdocs-search-form-widget-wrapper">';
1880	echo do_shortcode( '[betterdocs_search_modal enable_faq_search="'.($search_modal_search_type == 'all' \|\| $search_modal_search_type == 'faq' ? true : false).'" enable_docs_search="'.($search_modal_search_type == 'all' \|\| $search_modal_search_type == 'docs' ? true : false).'" faq_categories_ids="' . $faq_categories_ids . '" doc_ids="' . $doc_ids . '" doc_categories_ids="' . $doc_categories_ids . '" search_button="' . ( isset( $settings['betterdocs_search_button_toogle'] ) ? $settings['betterdocs_search_button_toogle'] : true ) . '" number_of_docs="' . $number_of_docs . '" number_of_faqs="' . $number_of_faqs . '" heading_tag="' . ( isset( $settings['section_search_field_heading_tag'] ) ? $settings['section_search_field_heading_tag'] : 'h2' ) . '" subheading_tag="' . ( isset( $settings['section_search_field_subheading_tag'] ) ? $settings['section_search_field_subheading_tag'] : 'h3' ) . '" search_button_text="Search" layout="' . $search_modal_layout . '" heading="' . ( isset( $settings['section_search_field_heading'] ) ? $settings['section_search_field_heading'] : '' ) . '" placeholder="' . ( isset( $settings['section_search_field_placeholder'] ) ? $settings['section_search_field_placeholder'] : '' ) . '" subheading="' . ( isset( $settings['section_search_field_sub_heading'] ) ? $settings['section_search_field_sub_heading'] : '' ) . '" category_search="' . ( isset( $settings['betterdocs_category_search_toogle'] ) ? $settings['betterdocs_category_search_toogle'] : false ) . '" popular_search="' . ( isset( $settings['betterdocs_popular_search_toogle'] ) ? $settings['betterdocs_popular_search_toogle'] : false ) . '" enable_ai_powered_search="' . ( isset( $settings['enable_ai_powered_search'] ) && $settings['enable_ai_powered_search'] === 'true' ? 'true' : 'false' ) . '"]' );
1881	echo '</div>';
1882	}
1883
1884	// Add editor-specific styles to prevent empty widget background
1885	if ( \Elementor\Plugin::$instance->editor->is_edit_mode() ) {
1886	echo '<style>
1887	.elementor-widget-betterdocs-search-form {
1888	background-color: transparent !important;
1889	}
1890	.elementor-widget-betterdocs-search-form .elementor-widget-container {
1891	min-height: 50px;
1892	}
1893	</style>';
1894	}
1895	}
1896
1897	public function view_params() {
1898	$settings = &$this->attributes;
1899
1900	$popular_search_title = isset( $settings['advance_search_popular_search_title_placeholder'] ) ? $settings['advance_search_popular_search_title_placeholder'] : '';
1901	$category_search_toggle = isset( $settings['betterdocs_category_search_toogle'] ) ? $settings['betterdocs_category_search_toogle'] : '';
1902	$search_button_toggle = isset( $settings['betterdocs_search_button_toogle'] ) ? $settings['betterdocs_search_button_toogle'] : true;
1903	$popular_search_toggle = isset( $settings['betterdocs_popular_search_toogle'] ) ? $settings['betterdocs_popular_search_toogle'] : '';
1904
1905	$_shortcode_attributes = apply_filters(
1906	'betterdocs_elementor_search_form_params',
1907	[
1908	'enable_heading' => 'true',
1909	'popular_search_title' => $popular_search_title,
1910	'category_search' => $category_search_toggle,
1911	'search_button' => $search_button_toggle,
1912	'popular_search' => $popular_search_toggle,
1913	'heading' => esc_html( $settings['section_search_field_heading'] ),
1914	'subheading' => esc_html( $settings['section_search_field_sub_heading'] ),
1915	'heading_tag' => esc_attr( $settings['section_search_field_heading_tag'] ),
1916	'subheading_tag' => esc_attr( $settings['section_search_field_subheading_tag'] ),
1917	'placeholder' => esc_html( $settings['section_search_field_placeholder'] )
1918	],
1919	$this->attributes
1920	);
1921
1922	return [
1923	'shortcode_attr' => $_shortcode_attributes
1924	];
1925	}
1926
1927	// Prevent empty widget background in Elementor
1928	protected function should_print_empty() {
1929	return false;
1930	}
1931
1932	// In plain mode, render without shortcode
1933	public function render_plain_content() {
1934	$settings = $this->get_settings_for_display();
1935	echo '[betterdocs_search_form placeholder="' . esc_attr( $settings['section_search_field_placeholder'] ) . '"]';
1936	}
1937	}
1938