From db3e732481d1246356a0c22b4593e724ccebe696 Mon Sep 17 00:00:00 2001
From: "viviz.thapunyaphat@allianz.com" <viviz.thapunyaphat@allianz.com>
Date: Thu, 5 May 2022 15:56:48 +0700
Subject: [PATCH] feat(dropdown): add inputType for filter input (#575)

---
 projects/ng-aquila/src/dropdown/dropdown.html |  2 +-
 .../ng-aquila/src/dropdown/dropdown.spec.ts   | 20 ++++++++++++++++++-
 projects/ng-aquila/src/dropdown/dropdown.ts   | 13 ++++++++++++
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/projects/ng-aquila/src/dropdown/dropdown.html b/projects/ng-aquila/src/dropdown/dropdown.html
index 88bc9aad4..c2bd69453 100644
--- a/projects/ng-aquila/src/dropdown/dropdown.html
+++ b/projects/ng-aquila/src/dropdown/dropdown.html
@@ -46,7 +46,7 @@
                 class="nx-dropdown__filter-input"
                 [class.is-filled]="!isFilterEmpty"
                 #filterInput
-                type="text"
+                [type]="filterInputType"
                 (input)="_onFilter($event)"
                 [placeholder]="filterPlaceholder"
             />
diff --git a/projects/ng-aquila/src/dropdown/dropdown.spec.ts b/projects/ng-aquila/src/dropdown/dropdown.spec.ts
index 6cf1c967c..5cdc90b36 100644
--- a/projects/ng-aquila/src/dropdown/dropdown.spec.ts
+++ b/projects/ng-aquila/src/dropdown/dropdown.spec.ts
@@ -801,7 +801,25 @@ describe('NxDropdownComponent', () => {
             expect(visibleItems[0].textContent!.trim()).toBe('BMW');
         }));
 
-        it('should filter spaces', fakeAsync(() => {
+        it('should set filter input type if filterInputType is present', fakeAsync(() => {
+            createTestComponent(FilterDropdownComponent);
+            openDropdownByClick();
+            dropdownInstance.filterInputType = 'tel';
+            fixture.detectChanges();
+            const filterInput = getFilterInput();
+
+            expect(filterInput.getAttribute('type')).toBe('tel');
+        }));
+
+        it('should be text type by default for filter input', fakeAsync(() => {
+            createTestComponent(FilterDropdownComponent);
+            openDropdownByClick();
+            const filterInput = getFilterInput();
+
+            expect(filterInput.getAttribute('type')).toBe('text');
+        }));
+
+        it('should filter space', fakeAsync(() => {
             createTestComponent(FilterDropdownComponent);
             openDropdownByClick();
 
diff --git a/projects/ng-aquila/src/dropdown/dropdown.ts b/projects/ng-aquila/src/dropdown/dropdown.ts
index a721d0e5f..e568e3bdf 100644
--- a/projects/ng-aquila/src/dropdown/dropdown.ts
+++ b/projects/ng-aquila/src/dropdown/dropdown.ts
@@ -94,6 +94,7 @@ export const NX_DROPDOWN_SCROLL_STRATEGY_PROVIDER = {
     deps: [Overlay],
 };
 
+export type FilterInputType = 'text' | 'number' | 'tel' | 'search' | 'date' | 'datetime' | 'month' | 'email';
 @Component({
     selector: 'nx-dropdown',
     templateUrl: 'dropdown.html',
@@ -193,6 +194,18 @@ export class NxDropdownComponent implements NxDropdownControl, ControlValueAcces
         return this._options.value;
     }
 
+    private _filterInputType: FilterInputType = 'text';
+    /**
+     * Type of filter input (default: text)
+     */
+    @Input()
+    set filterInputType(value: FilterInputType) {
+        this._filterInputType = value;
+    }
+    get filterInputType(): FilterInputType {
+        return this._filterInputType;
+    }
+
     @Input()
     get tabIndex(): number {
         return this.disabled ? -1 : this._tabIndex;