From 257f81b4ff737e49589ec712ec06f813f9e1bdd9 Mon Sep 17 00:00:00 2001
From: iamkanishka <kanishkabc123@gmail.com>
Date: Mon, 24 Apr 2023 16:21:56 +0530
Subject: [PATCH] Search Filter Enhancemnet with filtered data count and Search
 font and Placeholer size increment

---
 src/ng-multiselect-dropdown/src/multi-select.component.html | 1 +
 src/ng-multiselect-dropdown/src/multi-select.component.scss | 6 +++++-
 src/ng-multiselect-dropdown/src/multiselect.component.ts    | 3 +++
 src/ng-multiselect-dropdown/src/multiselect.model.ts        | 3 +++
 4 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/ng-multiselect-dropdown/src/multi-select.component.html b/src/ng-multiselect-dropdown/src/multi-select.component.html
index 8f2956e..d40e287 100644
--- a/src/ng-multiselect-dropdown/src/multi-select.component.html
+++ b/src/ng-multiselect-dropdown/src/multi-select.component.html
@@ -23,6 +23,7 @@
       </li>
       <li class="filter-textbox" *ngIf="(_data.length>0 || _settings.allowRemoteDataSearch) && _settings.allowSearchFilter">
         <input type="text" aria-label="multiselect-search" [readOnly]="disabled" [placeholder]="_settings.searchPlaceholderText" [(ngModel)]="filter.text" (ngModelChange)="onFilterTextChange($event)">
+        <span *ngIf="_settings.showSearchFilterCount && (filter.text && (_data | multiSelectFilter:filter).length !== 0)" class="badge" [ngStyle]="{'color': _settings.searchFilterCountColor,'background-color': _settings.searchFilterCountBgcolor}">{{(_data | multiSelectFilter:filter).length}}</span>
       </li>
     </ul>
     <ul class="item2" [style.maxHeight]="_settings.maxHeight+'px'">
diff --git a/src/ng-multiselect-dropdown/src/multi-select.component.scss b/src/ng-multiselect-dropdown/src/multi-select.component.scss
index 4b897c6..a716efe 100644
--- a/src/ng-multiselect-dropdown/src/multi-select.component.scss
+++ b/src/ng-multiselect-dropdown/src/multi-select.component.scss
@@ -108,12 +108,16 @@ $disable-background-color: #eceeef;
     padding: 10px;
     input {
       border: 0px;
-      width: 100%;
+      width: 90%;
       padding: 0px 0px 0px 26px;
+      font-size:  1.6rem sans-serif;;
     }
     input:focus {
       outline: none;
     }
+    input::placeholder {
+      font: 1.6rem sans-serif;
+    }
   }
 }
 
diff --git a/src/ng-multiselect-dropdown/src/multiselect.component.ts b/src/ng-multiselect-dropdown/src/multiselect.component.ts
index e6e93f2..1979660 100644
--- a/src/ng-multiselect-dropdown/src/multiselect.component.ts
+++ b/src/ng-multiselect-dropdown/src/multiselect.component.ts
@@ -36,6 +36,9 @@ export class MultiSelectComponent implements ControlValueAccessor {
     selectAllText: "Select All",
     unSelectAllText: "UnSelect All",
     allowSearchFilter: false,
+    showSearchFilterCount: true,
+    searchFilterCountColor:'white',
+    searchFilterCountBgcolor:'#337ab7',
     limitSelection: -1,
     clearSearchFilter: true,
     maxHeight: 197,
diff --git a/src/ng-multiselect-dropdown/src/multiselect.model.ts b/src/ng-multiselect-dropdown/src/multiselect.model.ts
index 458b5f0..236d9af 100644
--- a/src/ng-multiselect-dropdown/src/multiselect.model.ts
+++ b/src/ng-multiselect-dropdown/src/multiselect.model.ts
@@ -8,6 +8,9 @@ export interface IDropdownSettings {
   selectAllText?: string;
   unSelectAllText?: string;
   allowSearchFilter?: boolean;
+  showSearchFilterCount?:boolean;
+  searchFilterCountColor?:string;
+  searchFilterCountBgcolor?:string;
   clearSearchFilter?: boolean;
   maxHeight?: number;
   itemsShowLimit?: number;