Added disabled state to button style; bumped version to 0.1.3.

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-iconpicker",
   "description": "A Bootstrap 3 Icon Picker implemented in AngularJS",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "keywords": [
     "Bootstrap",
     "Font Awesome",

dist/scripts/ui-iconpicker.js

@@ -1,7 +1,7 @@
 /**
  * ui-iconpicker
  *
- * @version   v0.1.2
+ * @version   v0.1.3
  * @author    Justin Lau <justin@tclau.com>
  * @copyright Copyright (c) 2014 Justin Lau <justin@tclau.com>
  * @license   The MIT License (MIT)
@@ -123,7 +123,7 @@
     module = angular.module("ui-iconpicker/templates/iconpicker", ["ui.bootstrap"]);
     return module.run([
       "$templateCache", function($templateCache) {
-        return $templateCache.put("templates/iconpicker.html", "<span class=\"btn-group ui-iconpicker\">\n	<button type=\"button\" class=\"btn btn-default dropdown-toggle\"><i class=\"{{ iconClass }}\"></i><span class=\"caret\"></span>\n	</button>\n	<ul class=\"dropdown-menu\" role=\"menu\">\n		<li ng-repeat=\"class in availableIconClasses\">\n			<button class=\"btn btn-default\" type=\"button\" ng-click=\"$parent.iconClass = class\"><span class=\"{{ class }}\"></span></button>\n		</li>\n	</ul>\n	<input name=\"{{ name }}\" type=\"hidden\" value=\"{{ iconClass }}\" ng-if=\"name\" />\n</span>");
+        return $templateCache.put("templates/iconpicker.html", "<span class=\"btn-group ui-iconpicker\" ng-class=\"{ disabled: disabled }\">\n	<button type=\"button\" class=\"btn btn-default dropdown-toggle\"><i class=\"{{ iconClass }}\"></i><span class=\"caret\"></span>\n	</button>\n	<ul class=\"dropdown-menu\" role=\"menu\">\n		<li ng-repeat=\"class in availableIconClasses\">\n			<button class=\"btn btn-default\" type=\"button\" ng-click=\"$parent.iconClass = class\"><span class=\"{{ class }}\"></span></button>\n		</li>\n	</ul>\n	<input name=\"{{ name }}\" type=\"hidden\" value=\"{{ iconClass }}\" ng-if=\"name\" />\n</span>");
       }
     ]);
   });
@@ -157,7 +157,8 @@
                 return $scope.iconClass = $scope.model;
               });
             }
-            return $scope.$dropdownButton = $element.find("button").eq(0);
+            $scope.$dropdownButton = $element.find("button").eq(0);
+            return $scope.disabled = attrs.disabled != null;
           }
         };
       }

dist/styles/ui-iconpicker.css

@@ -1,7 +1,7 @@
 /**
  * ui-iconpicker
  *
- * @version   v0.1.2
+ * @version   v0.1.3
  * @author    Justin Lau <justin@tclau.com>
  * @copyright Copyright (c) 2014 Justin Lau <justin@tclau.com>
  * @license   The MIT License (MIT)
@@ -198,6 +198,14 @@
   color: #d9534f;
   background-color: white;
 }
+.ui-iconpicker.disabled > button, .ui-iconpicker[disabled] > button, fieldset[disabled] .ui-iconpicker > button {
+  cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.65;
+  filter: alpha(opacity=65);
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
 .ui-iconpicker > button > i {
   padding-right: .5em;
 }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ui-iconpicker",
   "description": "A Bootstrap 3 Icon Picker implemented in AngularJS",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "keywords": [
     "Bootstrap",
     "Font Awesome",

src/scripts/directives/ui-iconpicker.coffee

@@ -55,4 +55,6 @@ define "directives/ui-iconpicker", [
 						$scope.iconClass = $scope.model;
 
 				$scope.$dropdownButton = $element.find("button").eq(0);
+
+				$scope.disabled = attrs.disabled?;
 	]

src/scripts/templates/iconpicker.coffee

@@ -35,7 +35,7 @@ define "templates/iconpicker", [
 		($templateCache) ->
 			$templateCache.put "templates/iconpicker.html",
 				"""
-				<span class="btn-group ui-iconpicker">
+				<span class="btn-group ui-iconpicker" ng-class="{ disabled: disabled }">
 					<button type="button" class="btn btn-default dropdown-toggle"><i class="{{ iconClass }}"></i><span class="caret"></span>
 					</button>
 					<ul class="dropdown-menu" role="menu">

src/styles/ui-iconpicker.scss

@@ -28,55 +28,64 @@
 	&.brand-default {
 
 		> button {
-	  		@include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
-	  	}
+			@include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
+		}
 
 	}
 
 	&.brand-primary {
 
 		> button {
-	  		@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
-	  	}
+			@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
+		}
 
 	}
 
-	// Success appears as green
 	&.brand-success {
 
 		> button {
-	  		@include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
-	  	}
+			@include button-variant($btn-success-color, $btn-success-bg, $btn-success-border);
+		}
 
 	}
 
-	// Info appears as blue-green
 	&.brand-info {
 
 		> button {
-	  		@include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
-	  	}
+			@include button-variant($btn-info-color, $btn-info-bg, $btn-info-border);
+		}
 
 	}
 
-	// Warning appears as orange
 	&.brand-warning {
 
 		> button {
-	  		@include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
-	  	}
+			@include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border);
+		}
 
 	}
 
-	// Danger and error appear as red
 	&.brand-danger {
 
 		> button {
-	  		@include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
-	  	}
+			@include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
+		}
 
 	}
 
+	&.disabled,
+	&[disabled],
+	fieldset[disabled] & {
+
+		> button {
+			cursor: not-allowed;
+			pointer-events: none; // Future-proof disabling of clicks
+			@include opacity(.65);
+			@include box-shadow(none);
+		}
+
+	}
+
 
 	> button > i {
 		padding-right: .5em;