feat(choices): allow user select group header

User can now select header of group by option to select all item in this group

#1074 old pull request ref

Author: DarkIsDude

src/bootstrap/choices.tpl.html

@@ -2,7 +2,7 @@
     ng-show="$select.open && $select.items.length > 0">
   <li class="ui-select-choices-group" id="ui-select-choices-{{ $select.generatedId }}" >
     <div class="divider" ng-show="$select.isGrouped && $index > 0"></div>
-    <div ng-show="$select.isGrouped" class="ui-select-choices-group-label dropdown-header" ng-bind="$group.name"></div>
+    <div ng-show="$select.isGrouped" class="ui-select-choices-group-label dropdown-header" ng-bind="$group.name" ng-click="$select.headerClick($group)"></div>
     <div ng-attr-id="ui-select-choices-row-{{ $select.generatedId }}-{{$index}}" class="ui-select-choices-row"
     ng-class="{active: $select.isActive(this), disabled: $select.isDisabled(this)}" role="option">
       <span class="ui-select-choices-row-inner"></span>

src/common.css

@@ -253,6 +253,15 @@ body > .ui-select-bootstrap.open {
   border-right: 1px solid #428bca;
 }
 
+.ui-select-bootstrap .ui-select-choices-group:hover {
+  background-color: #f5f5f5;
+}
+
+.ui-select-bootstrap .ui-select-choices-group-label.dropdown-header {
+    color: black;
+    cursor: pointer;
+}
+
 .ui-select-bootstrap .ui-select-choices-row>span {
     cursor: pointer;
     display: block;

src/uiSelectController.js

@@ -61,6 +61,13 @@ uis.controller('uiSelectCtrl',
     throw uiSelectMinErr('searchInput', "Expected 1 input.ui-select-search but got '{0}'.", ctrl.searchInput.length);
   }
 
+  ctrl.headerClick = function(g) {
+    var items = g.items;
+    for(var i = 0; i < items.length; i++) {
+      ctrl.select(items[i], false, ' ');
+    }
+  };
+
   ctrl.isEmpty = function() {
     return isNil(ctrl.selected) || ctrl.selected === '' || (ctrl.multiple && ctrl.selected.length === 0);
   };