Fixes for issues - #94 #95 #92 and made path to multiselect.tmpl.html relative

.bowerrc

@@ -0,0 +1,3 @@
+{
+  "directory": "src/lib/"
+}

.editorconfig

@@ -0,0 +1,11 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc

@@ -0,0 +1,11 @@
+{
+  "env": {
+    "es6": true,
+    "browser": true
+  },
+  "extends": ["eslint:recommended", "angular"],
+  "rules": {
+    "no-console": ["error", { allow: ["warn", "error"] }],
+    "angular/di": [2, "array"]
+  }
+}

.gitignore

@@ -1,29 +1,3 @@
-# Packages #
-############
-# Ignore if there is any compressed files
-*.7z
-*.dmg
-*.gz
-*.iso
-*.jar
-*.rar
-*.tar
-*.zip
-
-# Unwanted OS/Editors generated file #
-######################################
-.DS_Store
-.DS_Store?
-._*
-.Spotlight-V100
-.Trashes
-ehthumbs.db
-Thumbs.db
-*~
-*.swp
-*.bak
-
-# Node Modules Directory #
-##########################
-/node_modules/*
-
+# Dependency directories
+node_modules
+src/lib

bower.json

@@ -1,15 +1,24 @@
 {
-  "name": "amitava82-angular-multiselect",
-  "version": "1.2.0",
-  "main": "dist/multiselect-tpls.js",
+  "name": "nithin-angular-multiselect",
+  "version": "1.3.13",
+  "main": ["dist/js/multiselect.min.js","dist/js/templates.min.js","dist/css/multiselect.min.css"],
   "description": "Native AngularJS multiselect directive",
   "license": "MIT",
   "ignore": [
     ".jshintrc",
     "**/*.txt"
   ],
   "dependencies": {
-    "angular": ">=1.0.4"
+    "angular": "^1.6.4",
+    "bootstrap": "^3.3.7"
+  },
+  "overrides": {
+    "bootstrap": {
+      "main": [
+        "dist/css/bootstrap.min.css",
+        "dist/fonts/*"
+      ]
+    }
   },
   "keywords": [
     "angularjs",

dist/css/multiselect.css

@@ -0,0 +1,30 @@
+/*csslint box-sizing: false*/
+
+am-multiselect .dropdown-menu{
+    box-sizing: content-box;
+    height: 200px;
+    overflow-x: scroll;
+    overflow-y: scroll;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+am-multiselect .dropdown-menu > li > a {
+    cursor:pointer;
+    padding: 3px 10px;
+}
+
+am-multiselect .dropdown-menu > .selected {
+    background-color: #ADD8E6;
+}
+
+am-multiselect .btn-group > button {
+    border-radius:5px !important; /* csslint allow: known-properties, important */
+    overflow:hidden;
+    white-space: normal;
+	width:100%;
+}
+
+am-multiselect .btn-group {
+    width:100%;
+}

dist/html/multiselect.tmpl.html

@@ -0,0 +1 @@
+<div class=btn-group><button type=button class="btn btn-default dropdown-toggle" ng-click=toggleSelect() ng-disabled=disabled ng-class=ngClazz title={{hoverText}} ng-focus=evalFocus()>{{header}} <span class=caret></span></button><ul class=dropdown-menu><li><input class="form-control input-sm" type=text ng-show=!searchDisable ng-model=searchText.label ng-keydown=keydown($event) autofocus placeholder=Filter></li><li ng-show=multiple role=presentation class><button class="btn btn-link btn-xs" ng-click=checkAll() type=button><i class="glyphicon glyphicon-ok"></i> Check all</button> <button class="btn btn-link btn-xs" ng-click=uncheckAll() type=button><i class="glyphicon glyphicon-remove"></i> Uncheck all</button></li><li ng-repeat="i in items | filter:searchText" ng-class="{'selected': $index === selectedIndex}"><a ng-click="select(i); focus()"><i class=glyphicon ng-class="{'glyphicon-ok': i.checked, 'empty': !i.checked}"></i> {{i.label}}</a></li></ul></div>

dist/multiselect-tpls.js → dist/js/multiselect.js

@@ -1,4 +1,5 @@
 // Source: https://github.com/amitava82/angular-multiselect
+
 angular.module('am.multiselect', [])
 
 // from bootstrap-ui typeahead parser
@@ -39,6 +40,7 @@ angular.module('am.multiselect', [])
         var exp = attrs.options,
         parsedResult = optionParser.parse(exp),
         isMultiple = attrs.multiple ? true : false,
+		isHover = attrs.hover ? true : false,
         required = false,
         scope = originalScope.$new(),
         changeHandler = attrs.change || angular.noop;
@@ -47,7 +49,11 @@ angular.module('am.multiselect', [])
         scope.header = 'Select';
         scope.multiple = isMultiple;
         scope.disabled = false;
+        scope.searchDisable = false;
         scope.onBlur = attrs.ngBlur || angular.noop;
+		scope.hoverText = isHover ? scope.header : '';
+        scope.onFocus = attrs.ngFocus;
+        scope.clazz = attrs.clazz;
 
         originalScope.$on('$destroy', function () {
             scope.$destroy();
@@ -67,11 +73,18 @@ angular.module('am.multiselect', [])
 
         // watch disabled state
         scope.$watch(function () {
-            return $parse(attrs.disabled)(originalScope);
+            return $parse(attrs.ngDisabled)(originalScope);
         }, function (newVal) {
             scope.disabled = newVal;
         });
 
+        // watch disabled state for search text box
+        scope.$watch(function () {
+            return $parse(attrs.searchDisable)(originalScope);
+        }, function (newVal) {
+            scope.searchDisable = newVal;
+        });
+
         // watch single/multiple state for dynamically change single to multiple
         scope.$watch(function () {
             return $parse(attrs.multiple)(originalScope);
@@ -90,22 +103,29 @@ angular.module('am.multiselect', [])
         // watch model change
         scope.$watch(function () {
             return modelCtrl.$modelValue;
-        }, function (newVal, oldVal) {
+        }, function (newVal) {
+        // When the model is assigned a "" or undefined value from controller, need to uncheck all items and clear searchText.label
+            if(angular.isUndefined(newVal) || newVal==="" || newVal===null) {
+              scope.uncheckAll();
+              if(angular.isDefined(scope.searchText))
+                scope.searchText.label="";
+            }
         // when directive initialize, newVal usually undefined. Also, if model value already set in the controller
         // for preselected list then we need to mark checked in our scope item. But we don't want to do this every time
         // model changes. We need to do this only if it is done outside directive scope, from controller, for example.
-            if (angular.isDefined(newVal)) {
+            else if (angular.isDefined(newVal)) {
                 markChecked(newVal);
                 scope.$eval(changeHandler);
             }
             getHeaderText();
+			scope.hoverText = isHover ? scope.header : '';
             modelCtrl.$setValidity('required', scope.valid());
         }, true);
 
         function parseModel() {
             scope.items.length = 0;
             var model = parsedResult.source(originalScope);
-            if(!angular.isDefined(model)) return;
+            if(angular.isUndefined(model)) return;
             for (var i = 0; i < model.length; i++) {
                 var local = {};
                 local[parsedResult.itemName] = model[i];
@@ -121,8 +141,16 @@ angular.module('am.multiselect', [])
 
         element.append($compile(popUpEl)(scope));
 
+		function getItemLabel(items,model) {
+          for(var i = 0; i < items.length; i++) {
+            if(items[i].model==model) {
+              return items[i].label;
+            }
+          }
+        }
+
         function getHeaderText() {
-            if (is_empty(modelCtrl.$modelValue)) return scope.header = (attrs.msHeader!==undefined ? attrs.msHeader : 'Select');
+            if (is_empty(modelCtrl.$modelValue)) return scope.header = (angular.isDefined(attrs.msHeader) ? attrs.msHeader : 'Select');
 
             if (isMultiple) {
                 if (attrs.msSelected) {
@@ -140,11 +168,11 @@ angular.module('am.multiselect', [])
                 }
             } else {
                 if(angular.isString(modelCtrl.$modelValue)){
-                    scope.header = modelCtrl.$modelValue;
+                    scope.header = getItemLabel(scope.items,modelCtrl.$modelValue);
                 } else {
                     var local = {};
                     local[parsedResult.itemName] = modelCtrl.$modelValue;
-                    scope.header = parsedResult.viewMapper(local) || scope.items[modelCtrl.$modelValue].label;
+                    scope.header = parsedResult.viewMapper(local) || getItemLabel(scope.items,modelCtrl.$modelValue);
                 }
             }
         }
@@ -154,7 +182,7 @@ angular.module('am.multiselect', [])
             if (obj && obj.length && obj.length > 0) return false;
             for (var prop in obj) if (obj[prop]) return false;
                 return true;
-        };
+        }
 
         scope.valid = function validModel() {
             if(!required) return true;
@@ -178,13 +206,14 @@ angular.module('am.multiselect', [])
         }
 
         function setModelValue(isMultiple) {
-            var value = null;
+            var value = undefined;
 
             if (isMultiple) {
                 value = [];
                 angular.forEach(scope.items, function (item) {
                     if (item.checked) value.push(item.model);
                 })
+                if(value.length==0) value=undefined;
             } else {
                 angular.forEach(scope.items, function (item) {
                     if (item.checked) {
@@ -228,11 +257,13 @@ angular.module('am.multiselect', [])
         };
 
         scope.uncheckAll = function () {
-            var items = (scope.searchText && scope.searchText.label.length > 0) ? $filter('filter')(scope.items, scope.searchText) : scope.items;
-            angular.forEach(items, function (item) {
+			// need to uncheck from the entire list of items. If user filers with ine text and selects item A. Next time user fileters and selects item B (item A now not in the filtered set). The item A will not get unchecked
+            // var items = (scope.searchText && scope.searchText.label.length > 0) ? $filter('filter')(scope.items, scope.searchText) : scope.items;
+            angular.forEach(scope.items, function (item) {
                 item.checked = false;
             });
-            setModelValue(true);
+			// sending scope.multiple instead of true to setModelValue. Since different values geeting set when single and multiple.
+            setModelValue(scope.multiple);
         };
 
         scope.select = function (item) {
@@ -252,15 +283,18 @@ angular.module('am.multiselect', [])
         restrict: 'E',
         scope: false,
         replace: true,
-        templateUrl: function (element, attr) {
-            return attr.templateUrl || 'multiselect.tmpl.html';
-        },
-        link: function (scope, element, attrs) {
+        templateUrl: 'html/multiselect.tmpl.html',
+        link: function (scope, element) {
 
             scope.selectedIndex = null;
             scope.isVisible = false;
             scope.filteredItems = null;
 
+            scope.ngClazz = {
+                'error': !scope.valid()
+            };
+            scope.ngClazz[scope.$eval(scope.clazz)] = true;
+
             scope.toggleSelect = function () {
                 if (element.hasClass('open')) {
                     element.removeClass('open');
@@ -273,6 +307,10 @@ angular.module('am.multiselect', [])
                 }
             };
 
+            scope.evalFocus = function() {
+              scope.$parent.$eval(scope.onFocus);
+            }
+
             function clickHandler(event) {
                 if (elementMatchesAnyInArray(event.target, element.find(event.target.tagName))) {
                     scope.$parent.$eval(scope.onBlur);
@@ -322,5 +360,3 @@ angular.module('am.multiselect', [])
         }
     }
 }]);
-
-angular.module("am.multiselect").run(["$templateCache", function($templateCache) {$templateCache.put("multiselect.tmpl.html","<div class=\"btn-group\">\n    <button type=\"button\" class=\"btn btn-default dropdown-toggle\" ng-click=\"toggleSelect()\" ng-disabled=\"disabled\" ng-class=\"{\'error\': !valid()}\">\n        {{header}}\n        <span class=\"caret\"></span>\n    </button>\n    <ul class=\"dropdown-menu\">\n        <li>\n            <input class=\"form-control input-sm\" type=\"text\" ng-model=\"searchText.label\" ng-keydown=\"keydown($event)\" autofocus=\"autofocus\" placeholder=\"Filter\" />\n        </li>\n        <li ng-show=\"multiple\" role=\"presentation\" class=\"\">\n            <button class=\"btn btn-link btn-xs\" ng-click=\"checkAll()\" type=\"button\"><i class=\"glyphicon glyphicon-ok\"></i> Check all</button>\n            <button class=\"btn btn-link btn-xs\" ng-click=\"uncheckAll()\" type=\"button\"><i class=\"glyphicon glyphicon-remove\"></i> Uncheck all</button>\n        </li>\n        <li ng-repeat=\"i in items | filter:searchText\" ng-class=\"{\'selected\': $index === selectedIndex}\">\n            <a ng-click=\"select(i); focus()\">\n            <i class=\'glyphicon\' ng-class=\"{\'glyphicon-ok\': i.checked, \'empty\': !i.checked}\"></i> {{i.label}}</a>\n        </li>\n    </ul>\n</div>\n");}]);