angular-ui · homerjam · Mar 18, 2015 · Apr 8, 2015 · Apr 8, 2015 · Apr 8, 2015
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "ui-select",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "homepage": "https://github.com/angular-ui/ui-select",
   "authors": [
     "AngularUI"

diff --git a/dist/select.css b/dist/select.css
@@ -1,7 +1,7 @@
 /*!
  * ui-select
  * http://github.com/angular-ui/ui-select
- * Version: 0.11.2 - 2015-03-17T04:08:46.478Z
+ * Version: 0.12.0 - 2015-05-28T07:44:11.364Z
  * License: MIT
  */
 
@@ -48,6 +48,31 @@ body > .select2-container.open {
   z-index: 9999; /* The z-index Select2 applies to the select2-drop */
 }
 
+/* Handle up direction Select2 */
+.ui-select-container[theme="select2"].direction-up .ui-select-match {
+    border-radius: 4px; /* FIXME hardcoded value :-/ */
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+.ui-select-container[theme="select2"].direction-up .ui-select-dropdown {
+    border-radius: 4px; /* FIXME hardcoded value :-/ */
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+
+    border-top-width: 1px;  /* FIXME hardcoded value :-/ */
+    border-top-style: solid;
+
+    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
+
+    margin-top: -4px; /* FIXME hardcoded value :-/ */
+}
+.ui-select-container[theme="select2"].direction-up .ui-select-dropdown .select2-search {
+    margin-top: 4px; /* FIXME hardcoded value :-/ */
+}
+.ui-select-container[theme="select2"].direction-up.select2-dropdown-open .ui-select-match {
+    border-bottom-color: #5897fb;
+}
+
 /* Selectize theme */
 
 /* Helper class to show styles when focus */
@@ -70,6 +95,12 @@ body > .select2-container.open {
     border-color: #D44950;
 }
 
+/* Handle up direction Selectize */
+.ui-select-container[theme="selectize"].direction-up .ui-select-dropdown {
+    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
+
+    margin-top: -2px; /* FIXME hardcoded value :-/ */
+}
 
 /* Bootstrap theme */
 
@@ -107,6 +138,11 @@ body > .select2-container.open {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
+.input-group > .ui-select-bootstrap > input.ui-select-search.form-control.direction-up {
+  border-radius: 4px !important; /* FIXME hardcoded value :-/ */
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
 
 .ui-select-bootstrap > .ui-select-match > .btn{
   /* Instead of center because of .btn */
@@ -218,4 +254,9 @@ body > .ui-select-bootstrap.open {
 /* Mark invalid Bootstrap */
 .ui-select-bootstrap.ng-dirty.ng-invalid > button.btn.ui-select-match {
     border-color: #D44950;
-}
+}
+
+/* Handle up direction Bootstrap */
+.ui-select-container[theme="bootstrap"].direction-up .ui-select-dropdown {
+    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
+}
diff --git a/dist/select.js b/dist/select.js
diff --git a/dist/select.min.css b/dist/select.min.css
diff --git a/dist/select.min.js b/dist/select.min.js
diff --git a/examples/bootstrap.html b/examples/bootstrap.html
@@ -18,8 +18,8 @@
     </script>
   <![endif]-->
 
-  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
-  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-sanitize.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular-sanitize.js"></script>
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
 
   <!-- ui-select files -->

diff --git a/examples/demo-groupfilter.html b/examples/demo-groupfilter.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en" ng-app="demo">
+<head>
+  <meta charset="utf-8">
+  <title>AngularJS ui-select</title>
+
+  <!--
+    IE8 support, see AngularJS Internet Explorer Compatibility http://docs.angularjs.org/guide/ie
+    For Firefox 3.6, you will also need to include jQuery and ECMAScript 5 shim
+  -->
+  <!--[if lt IE 9]>
+    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.2.0/es5-shim.js"></script>
+    <script>
+      document.createElement('ui-select');
+      document.createElement('ui-select-match');
+      document.createElement('ui-select-choices');
+    </script>
+  <![endif]-->
+
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
+  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
+
+  <!-- ui-select files -->
+  <script src="../dist/select.js"></script>
+  <link rel="stylesheet" href="../dist/select.css">
+
+  <script src="demo.js"></script>
+
+  <!-- Select2 theme -->
+  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.4.5/select2.css">
+
+  <!--
+    Selectize theme
+    Less versions are available at https://github.com/brianreavis/selectize.js/tree/master/dist/less
+  -->
+  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">
+  <!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap2.css"> -->
+  <!-- <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap3.css"> -->
+
+  <style>
+    body {
+      padding: 15px;
+    }
+
+    .select2 > .select2-choice.ui-select-match {
+      /* Because of the inclusion of Bootstrap */
+      height: 29px;
+    }
+
+    .selectize-control > .selectize-dropdown {
+      top: 36px;
+    }
+  </style>
+</head>
+
+<body ng-controller="DemoCtrl">
+  <script src="demo.js"></script>
+
+  <button class="btn btn-default btn-xs" ng-click="enable()">Enable ui-select</button>
+  <button class="btn btn-default btn-xs" ng-click="disable()">Disable ui-select</button>
+  <button class="btn btn-default btn-xs" ng-click="clear()">Clear ng-model</button>
+
+  <h3>Select2 theme</h3>
+  <p>Selected: {{country.selected}}</p>
+
+
+  <h2> Filter groups by array (group-filter="['Z','B','C']")</h2>
+  <ui-select ng-model="country.selected" theme="select2" ng-disabled="disabled" style="width: 300px;" title="Choose a country">
+    <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
+    <ui-select-choices group-by="firstLetterGroupFn" group-filter="['Z','B','C']" repeat="country in countries | filter: $select.search">
+      <span ng-bind-html="country.name | highlight: $select.search"></span>
+      <small ng-bind-html="country.code | highlight: $select.search"></small>
+    </ui-select-choices>
+  </ui-select>
+
+  <h2> Filter groups using a function (group-filter="reverseOrderFilterFn")</h2>
+  <ui-select ng-model="country.selected" theme="select2" ng-disabled="disabled" style="width: 300px;" title="Choose a country">
+    <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
+    <ui-select-choices group-by="firstLetterGroupFn" group-filter="reverseOrderFilterFn" repeat="country in countries | filter: $select.search">
+      <span ng-bind-html="country.name | highlight: $select.search"></span>
+      <small ng-bind-html="country.code | highlight: $select.search"></small>
+    </ui-select-choices>
+  </ui-select>
+
+
+</body>
+</html>
diff --git a/examples/demo.js b/examples/demo.js
@@ -79,6 +79,14 @@ app.controller('DemoCtrl', function($scope, $http, $timeout, $interval) {
 
   };
 
+  $scope.firstLetterGroupFn = function (item){
+      return item.name[0];
+  };
+
+  $scope.reverseOrderFilterFn = function(groups) {
+    return groups.reverse();
+  };
+
   $scope.personAsync = {selected : "[email protected]"};
   $scope.peopleAsync = [];
 

diff --git a/examples/select2-bootstrap3.html b/examples/select2-bootstrap3.html
@@ -18,8 +18,8 @@
     </script>
   <![endif]-->
 
-  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script>
-  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular-sanitize.js"></script>
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
 
   <!--

diff --git a/examples/selectize-bootstrap3.html b/examples/selectize-bootstrap3.html
@@ -18,8 +18,8 @@
     </script>
   <![endif]-->
 
-  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script>
-  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular-sanitize.js"></script>
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
 
   <!--

diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   "repository": {
     "url": "git://github.com/angular-ui/ui-select.git"
   },
-  "version": "0.11.2",
+  "version": "0.12.0",
   "devDependencies": {
     "bower": "~1.3",
     "del": "~0.1.1",

diff --git a/src/bootstrap/choices.tpl.html b/src/bootstrap/choices.tpl.html
@@ -1,4 +1,4 @@
-<ul class="ui-select-choices ui-select-choices-content dropdown-menu"
+<ul class="ui-select-choices ui-select-choices-content ui-select-dropdown dropdown-menu"
     role="listbox"
     ng-show="$select.items.length > 0">
   <li class="ui-select-choices-group" id="ui-select-choices-{{ $select.generatedId }}" >

diff --git a/src/common.css b/src/common.css
@@ -40,6 +40,31 @@ body > .select2-container.open {
   z-index: 9999; /* The z-index Select2 applies to the select2-drop */
 }
 
+/* Handle up direction Select2 */
+.ui-select-container[theme="select2"].direction-up .ui-select-match {
+    border-radius: 4px; /* FIXME hardcoded value :-/ */
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+.ui-select-container[theme="select2"].direction-up .ui-select-dropdown {
+    border-radius: 4px; /* FIXME hardcoded value :-/ */
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+
+    border-top-width: 1px;  /* FIXME hardcoded value :-/ */
+    border-top-style: solid;
+
+    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
+
+    margin-top: -4px; /* FIXME hardcoded value :-/ */
+}
+.ui-select-container[theme="select2"].direction-up .ui-select-dropdown .select2-search {
+    margin-top: 4px; /* FIXME hardcoded value :-/ */
+}
+.ui-select-container[theme="select2"].direction-up.select2-dropdown-open .ui-select-match {
+    border-bottom-color: #5897fb;
+}
+
 /* Selectize theme */
 
 /* Helper class to show styles when focus */
@@ -62,6 +87,12 @@ body > .select2-container.open {
     border-color: #D44950;
 }
 
+/* Handle up direction Selectize */
+.ui-select-container[theme="selectize"].direction-up .ui-select-dropdown {
+    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
+
+    margin-top: -2px; /* FIXME hardcoded value :-/ */
+}
 
 /* Bootstrap theme */
 
@@ -99,6 +130,11 @@ body > .select2-container.open {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
+.input-group > .ui-select-bootstrap > input.ui-select-search.form-control.direction-up {
+  border-radius: 4px !important; /* FIXME hardcoded value :-/ */
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
 
 .ui-select-bootstrap > .ui-select-match > .btn{
   /* Instead of center because of .btn */
@@ -210,4 +246,9 @@ body > .ui-select-bootstrap.open {
 /* Mark invalid Bootstrap */
 .ui-select-bootstrap.ng-dirty.ng-invalid > button.btn.ui-select-match {
     border-color: #D44950;
-}
+}
+
+/* Handle up direction Bootstrap */
+.ui-select-container[theme="bootstrap"].direction-up .ui-select-dropdown {
+    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
+}
diff --git a/src/select2/select-multiple.tpl.html b/src/select2/select-multiple.tpl.html
@@ -25,8 +25,8 @@
         ondrop="return false;">
     </li>
   </ul>
-  <div class="select2-drop select2-with-searchbox select2-drop-active"
+  <div class="ui-select-dropdown select2-drop select2-with-searchbox select2-drop-active"
        ng-class="{'select2-display-none': !$select.open}">
     <div class="ui-select-choices"></div>
   </div>
-</div>
+</div>
diff --git a/src/select2/select.tpl.html b/src/select2/select.tpl.html
@@ -4,7 +4,7 @@
                 'select2-container-active': $select.focus,
                 'select2-allowclear': $select.allowClear && !$select.isEmpty()}">
   <div class="ui-select-match"></div>
-  <div class="select2-drop select2-with-searchbox select2-drop-active"
+  <div class="ui-select-dropdown select2-drop select2-with-searchbox select2-drop-active"
        ng-class="{'select2-display-none': !$select.open}">
     <div class="select2-search" ng-show="$select.searchEnabled">
       <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"

diff --git a/src/selectize/choices.tpl.html b/src/selectize/choices.tpl.html
@@ -1,4 +1,4 @@
-<div ng-show="$select.open" class="ui-select-choices selectize-dropdown single">
+<div ng-show="$select.open" class="ui-select-choices ui-select-dropdown selectize-dropdown single">
   <div class="ui-select-choices-content selectize-dropdown-content">
     <div class="ui-select-choices-group optgroup" role="listbox">
       <div ng-show="$select.isGrouped" class="ui-select-choices-group-label optgroup-header" ng-bind="$group.name"></div>