From fa1cdfccd3b1e3991c8e2dcafd3e792ebfb16e09 Mon Sep 17 00:00:00 2001
From: Nadi <dikunn@gmail.com>
Date: Sat, 12 Sep 2015 19:22:24 -0700
Subject: [PATCH] feat(typeahead): add customClass support for dropdown

- Adds support for custom classes on the typeahead dropdown

Closes #4332
Closes #4410
---
 src/typeahead/docs/demo.html         | 16 ++++++++++++++++
 src/typeahead/docs/readme.md         |  6 +++++-
 src/typeahead/test/typeahead.spec.js | 19 +++++++++++++++++++
 src/typeahead/typeahead.js           |  5 +++++
 4 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/src/typeahead/docs/demo.html b/src/typeahead/docs/demo.html
index 4492e8ab48..1ae9401c8f 100644
--- a/src/typeahead/docs/demo.html
+++ b/src/typeahead/docs/demo.html
@@ -1,3 +1,15 @@
+<style>
+    .dropdown-menu.demo-class {
+        border-radius: 0;
+        font-style: italic;
+        box-shadow: 5px 5px 0 rgba(0, 0, 0, .12);
+    }
+    .dropdown-menu.demo-class > .active > a,
+    .dropdown-menu.demo-class > .active > a:hover,
+    .dropdown-menu.demo-class > .active > a:focus {
+        background-color: rgba(247, 150, 4, .69);
+    }
+</style>
 <script type="text/ng-template" id="customTemplate.html">
   <a>
       <img ng-src="http://upload.wikimedia.org/wikipedia/commons/thumb/{{match.model.flag}}" width="16">
@@ -21,4 +33,8 @@ <h4>Asynchronous results</h4>
     <h4>Custom templates for results</h4>
     <pre>Model: {{customSelected | json}}</pre>
     <input type="text" ng-model="customSelected" placeholder="Custom template" typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" typeahead-template-url="customTemplate.html" class="form-control">
+
+    <h4>Custom class for append-to-body popup</h4>
+    <pre>Model: {{customClassSelected | json}}</pre>
+    <input type="text" ng-model="customClassSelected" typeahead-append-to-body="true" typeahead-dropdown-custom-class="demo-class" placeholder="Custom class" typeahead="state as state.name for state in statesWithFlags | filter:{name:$viewValue}" class="form-control">
 </div>
diff --git a/src/typeahead/docs/readme.md b/src/typeahead/docs/readme.md
index 3e8d1cf3a3..908356057b 100644
--- a/src/typeahead/docs/readme.md
+++ b/src/typeahead/docs/readme.md
@@ -73,5 +73,9 @@ The typeahead directives provide several attributes:
    On blur, select the currently highlighted match
 
 * `typeahead-focus-on-select`
-   _(Defaults: true) :
+   _(Defaults: true)_ :
    On selection, focus the input element the typeahead directive is associated with
+   
+* `typeahead-dropdown-custom-class`
+   _(Defaults: undefined)_ :
+   Add custom class to popup
diff --git a/src/typeahead/test/typeahead.spec.js b/src/typeahead/test/typeahead.spec.js
index 67c3c54fc3..d3649a629c 100644
--- a/src/typeahead/test/typeahead.spec.js
+++ b/src/typeahead/test/typeahead.spec.js
@@ -595,6 +595,19 @@ describe('typeahead tests', function() {
       findMatches(element).eq(1).trigger('mouseenter');
       expect(element).toBeOpenWithActive(2, 1);
     });
+
+    it('should add a custom class to popup', function() {
+      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue" typeahead-dropdown-custom-class="demo-class"></div>');
+      changeInputValueTo(element, 'b');
+      expect(findDropDown(element).hasClass('demo-class')).toBeTruthy();
+    });
+
+    it('should add a custom class to popup with custom template', function() {
+      $templateCache.put('custom.html', '<div>foo</div>');
+      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue" typeahead-dropdown-custom-class="demo-class" typeahead-template-url="custom.html"></div>');
+      changeInputValueTo(element, 'b');
+      expect(findDropDown(element).hasClass('demo-class dropdown-menu')).toBeTruthy();
+    });
   });
 
   describe('promises', function() {
@@ -895,6 +908,12 @@ describe('typeahead tests', function() {
       $timeout.flush();
       expect(dropdown.css('top')).toEqual('500px');
     });
+
+    it('should add a custom class to append-to-body popup', function() {
+      var element = prepareInputEl('<div><input ng-model="result" typeahead="item for item in source | filter:$viewValue" typeahead-append-to-body="true" typeahead-dropdown-custom-class="demo-class"></div>');
+      changeInputValueTo(element, 'b');
+      expect(findDropDown($document.find('body')).hasClass('demo-class')).toBeTruthy();
+    });
   });
 
   describe('focus first', function() {
diff --git a/src/typeahead/typeahead.js b/src/typeahead/typeahead.js
index fd19ed1632..53d548e96e 100644
--- a/src/typeahead/typeahead.js
+++ b/src/typeahead/typeahead.js
@@ -133,6 +133,11 @@ angular.module('ui.bootstrap.typeahead', ['ui.bootstrap.position'])
           popUpEl.attr('popup-template-url', attrs.typeaheadPopupTemplateUrl);
         }
 
+        // Add a custom class to Dropdown Menu element
+        if (angular.isDefined(attrs.typeaheadDropdownCustomClass)) {
+          popUpEl.addClass(attrs.typeaheadDropdownCustomClass);
+        }
+
         var resetMatches = function() {
           scope.matches = [];
           scope.activeIdx = -1;