From 01fe1466a60695ff9ccdd1a2447e19dadbe669db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Tue, 4 Apr 2023 15:40:49 +0300
Subject: [PATCH] Refactor #3832 Refactor #3833 - For Listbox

---
 api-generator/components/listbox.js | 20 ++++++++++++--------
 components/lib/listbox/Listbox.d.ts |  4 ++++
 components/lib/listbox/Listbox.vue  | 11 ++++++++---
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/api-generator/components/listbox.js b/api-generator/components/listbox.js
index 0066ea0c5..58844f546 100644
--- a/api-generator/components/listbox.js
+++ b/api-generator/components/listbox.js
@@ -236,35 +236,39 @@ const ListboxEvents = [
 const ListboxSlots = [
     {
         name: 'option',
-        description: "Custom content for the item's option"
+        description: "Custom content for the item's option."
     },
     {
         name: 'optiongroup',
-        description: "Custom content for the item's optiongroup"
+        description: "Custom content for the item's optiongroup."
     },
     {
         name: 'header',
-        description: "Custom content for the component's header"
+        description: "Custom content for the component's header."
     },
     {
         name: 'footer',
-        description: "Custom content for the component's footer"
+        description: "Custom content for the component's footer."
     },
     {
         name: 'emptyfilter',
-        description: 'Custom content when there is no filtered data to display'
+        description: 'Custom content when there is no filtered data to display.'
     },
     {
         name: 'empty',
-        description: 'Custom content when there is no data to display'
+        description: 'Custom content when there is no data to display.'
     },
     {
         name: 'content',
-        description: 'Custom content for the virtual scroller'
+        description: 'Custom content for the virtual scroller.'
     },
     {
         name: 'loader',
-        description: 'Custom content for the virtual scroller loader items'
+        description: 'Custom content for the virtual scroller loader items.'
+    },
+    {
+        name: 'filtericon',
+        description: 'Custom filter icon template.'
     }
 ];
 
diff --git a/components/lib/listbox/Listbox.d.ts b/components/lib/listbox/Listbox.d.ts
index 343683ebd..2ec226744 100755
--- a/components/lib/listbox/Listbox.d.ts
+++ b/components/lib/listbox/Listbox.d.ts
@@ -285,6 +285,10 @@ export interface ListboxSlots {
          */
         options: any[];
     }): VNode[];
+    /**
+     * Custom filter icon template.
+     */
+    filtericon(): VNode[];
 }
 
 /**
diff --git a/components/lib/listbox/Listbox.vue b/components/lib/listbox/Listbox.vue
index df5d74f54..fb5be9f79 100755
--- a/components/lib/listbox/Listbox.vue
+++ b/components/lib/listbox/Listbox.vue
@@ -20,7 +20,10 @@
                     @keydown="onFilterKeyDown"
                     v-bind="filterInputProps"
                 />
-                <span :class="['p-listbox-filter-icon', filterIcon]" />
+
+                <slot name="filtericon">
+                    <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="['p-listbox-filter-icon', filterIcon]" />
+                </slot>
             </div>
             <span role="status" aria-live="polite" class="p-hidden-accessible">
                 {{ filterResultMessageText }}
@@ -95,6 +98,7 @@
 
 <script>
 import { FilterService } from 'primevue/api';
+import SearchIcon from 'primevue/icon/search';
 import Ripple from 'primevue/ripple';
 import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
 import VirtualScroller from 'primevue/virtualscroller';
@@ -161,7 +165,7 @@ export default {
         },
         filterIcon: {
             type: String,
-            default: 'pi pi-search'
+            default: undefined
         },
         tabindex: {
             type: Number,
@@ -753,7 +757,8 @@ export default {
         ripple: Ripple
     },
     components: {
-        VirtualScroller: VirtualScroller
+        VirtualScroller: VirtualScroller,
+        SearchIcon: SearchIcon
     }
 };
 </script>