feat(match): show x icon to clear/reset the current value (select2)

Author: dimirc

src/select.js

@@ -917,6 +917,8 @@
         attrs.$observe('placeholder', function(placeholder) {
           $select.placeholder = placeholder !== undefined ? placeholder : uiSelectConfig.placeholder;
         });
+        
+        $select.allowClear = (angular.isDefined(attrs.allowClear)) ? (attrs.allowClear === '') ? true : (attrs.allowClear.toLowerCase() === 'true') : false;
 
         if($select.multiple){
           $select.sizeSearchInput();

src/select2/match.tpl.html

@@ -8,5 +8,6 @@
    ng-click="$select.activate()">
   <span ng-show="$select.searchEnabled && $select.isEmpty()" class="select2-chosen">{{$select.placeholder}}</span>
   <span ng-hide="$select.isEmpty()" class="select2-chosen" ng-transclude></span>
+  <abbr ng-if="$select.allowClear && !$select.isEmpty()" class="select2-search-choice-close" ng-click="$select.select(undefined)"></abbr>
   <span class="select2-arrow ui-select-toggle" ng-click="$select.toggle($event)"><b></b></span>
 </a>

src/select2/select.tpl.html

@@ -1,7 +1,8 @@
 <div class="select2 select2-container"
      ng-class="{'select2-container-active select2-dropdown-open': $select.open,
                 'select2-container-disabled': $select.disabled,
-                'select2-container-active': $select.focus }">
+                '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"
        ng-class="{'select2-display-none': !$select.open}">