angularjs-color-picker - npm Package Compare versions

Comparing version 2.0.0 to 2.1.0

bower.json

 {
   "name": "angular-color-picker",
   "description": "Color Picker Directive For AngularJS",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "homepage": "https://github.com/ruhley/angular-color-picker",
@@ -6,0 +6,0 @@ "repository": {

dist/angularjs-color-picker.js

 /*!
- * angularjs-color-picker v2.0.0
+ * angularjs-color-picker v2.1.0
  * https://github.com/ruhley/angular-color-picker/
@@ -7,3 +7,3 @@ *
  *
- * 2016-07-11 16:31:21
+ * 2016-07-13 08:32:24
  *
@@ -104,3 +104,3 @@ */
 
-              _this.callApiFunction('onDestroy');
+              _this.eventApiDispatch('onDestroy');
           });
@@ -183,3 +183,3 @@
 
-              this.api.open = function () {
+              this.api.open = function (event) {
                   // if already visible then don't run show again
@@ -201,3 +201,3 @@ if (_this4.visible) {
 
-                  _this4.callApiFunction('onOpen');
+                  _this4.eventApiDispatch('onOpen', [event]);
               };
@@ -211,5 +211,9 @@
 
-                      _this4.callApiFunction('onClose');
+                      _this4.eventApiDispatch('onClose', [event]);
                   }
               };
+
+              this.api.getElement = function () {
+                  return _this4.$element;
+              };
           }
@@ -286,3 +290,3 @@ }, {
               if (!this.colorMouse && !this.hueMouse && !this.opacityMouse && this.find(event.target).length === 0) {
-                  this.api.close();
+                  this.api.close(event);
                   // mouse event on color grid
@@ -355,3 +359,3 @@ } else if (this.colorMouse) {
 
-                  this.callApiFunction('onChange', [event, this.ngModel]);
+                  this.eventApiDispatch('onChange', [event]);
               }
@@ -367,3 +371,3 @@ }
 
-              this.callApiFunction('onBlur', [event, this.ngModel]);
+              this.eventApiDispatch(this.api, 'onBlur', [event]);
           }
@@ -734,6 +738,13 @@ }, {
       }, {
-          key: 'callApiFunction',
-          value: function callApiFunction(name, args) {
-              if (this.api && typeof this.api[name] === 'function') {
-                  this.api[name].apply(this, args);
+          key: 'eventApiDispatch',
+          value: function eventApiDispatch(name, args) {
+              if (this.eventApi && typeof this.eventApi[name] === 'function') {
+                  if (!args) {
+                      args = [];
+                  }
+
+                  args.unshift(this.ngModel);
+                  args.unshift(this.api);
+
+                  this.eventApi[name].apply(this, args);
               }
@@ -831,3 +842,4 @@ }
               options: '=?',
-              api: '=?'
+              api: '=?',
+              eventApi: '=?'
           },
@@ -845,3 +857,3 @@ bindToController: true,
   function template($templateCache) {
-      $templateCache.put('template/color-picker/directive.html', '<div class="color-picker-wrapper" ng-class="{\n' + '\'color-picker-disabled\': AngularColorPickerController.options.disabled,\n' + '\'color-picker-swatch-only\': AngularColorPickerController.options.swatchOnly,\n' + '}">\n' + '   <div class="color-picker-input-wrapper" ng-class="{\'input-group\': AngularColorPickerController.options.swatchBootstrap && AngularColorPickerController.options.swatch}">\n' + '       <span ng-if="AngularColorPickerController.options.swatchPos === \'left\'" class="color-picker-swatch" ng-click="AngularColorPickerController.focus()" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>\n' + '       <input class="color-picker-input form-control" type="text" ng-model="AngularColorPickerController.ngModel" ng-readonly="AngularColorPickerController.options.swatchOnly" ng-disabled="AngularColorPickerController.options.disabled" ng-blur="AngularColorPickerController.onBlur($event)" ng-change="AngularColorPickerController.onChange($event)" size="7" ng-focus="AngularColorPickerController.api.open()" ng-class="{\'color-picker-input-swatch\': AngularColorPickerController.options.swatch && !AngularColorPickerController.options.swatchOnly && AngularColorPickerController.options.swatchPos === \'left\'}">\n' + '       <span ng-if="AngularColorPickerController.options.swatchPos === \'right\'" class="color-picker-swatch" ng-click="AngularColorPickerController.focus()" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>\n' + '   </div>\n' + '   <div class="color-picker-panel" ng-show="AngularColorPickerController.visible" ng-class="{\n' + '       \'color-picker-panel-top color-picker-panel-right\': AngularColorPickerController.options.pos === \'top right\',\n' + '       \'color-picker-panel-top color-picker-panel-left\': AngularColorPickerController.options.pos === \'top left\',\n' + '       \'color-picker-panel-bottom color-picker-panel-right\': AngularColorPickerController.options.pos === \'bottom right\',\n' + '       \'color-picker-panel-bottom color-picker-panel-left\': AngularColorPickerController.options.pos === \'bottom left\',\n' + '       \'color-picker-show-alpha\': AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\',\n' + '       \'color-picker-show-inline\': AngularColorPickerController.options.inline,\n' + '   }">\n' + '       <div class="color-picker-row">\n' + '           <div class="color-picker-grid color-picker-sprite">\n' + '               <div class="color-picker-grid-inner"></div>\n' + '               <div class="color-picker-picker">\n' + '                   <div></div>\n' + '               </div>\n' + '           </div>\n' + '           <div class="color-picker-hue color-picker-sprite">\n' + '               <div class="color-picker-slider"></div>\n' + '           </div>\n' + '           <div class="color-picker-opacity color-picker-sprite" ng-show="AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\'">\n' + '               <div class="color-picker-slider"></div>\n' + '           </div>\n' + '       </div>\n' + '   </div>\n' + '</div>');
+      $templateCache.put('template/color-picker/directive.html', '<div class="color-picker-wrapper" ng-class="{\n' + '\'color-picker-disabled\': AngularColorPickerController.options.disabled,\n' + '\'color-picker-swatch-only\': AngularColorPickerController.options.swatchOnly,\n' + '}">\n' + '   <div class="color-picker-input-wrapper" ng-class="{\'input-group\': AngularColorPickerController.options.swatchBootstrap && AngularColorPickerController.options.swatch}">\n' + '       <span ng-if="AngularColorPickerController.options.swatchPos === \'left\'" class="color-picker-swatch" ng-click="AngularColorPickerController.focus()" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>\n' + '       <input class="color-picker-input form-control" type="text" ng-model="AngularColorPickerController.ngModel" ng-readonly="AngularColorPickerController.options.swatchOnly" ng-disabled="AngularColorPickerController.options.disabled" ng-blur="AngularColorPickerController.onBlur($event)" ng-change="AngularColorPickerController.onChange($event)" size="7" ng-focus="AngularColorPickerController.api.open($event)" ng-class="{\'color-picker-input-swatch\': AngularColorPickerController.options.swatch && !AngularColorPickerController.options.swatchOnly && AngularColorPickerController.options.swatchPos === \'left\'}">\n' + '       <span ng-if="AngularColorPickerController.options.swatchPos === \'right\'" class="color-picker-swatch" ng-click="AngularColorPickerController.focus()" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>\n' + '   </div>\n' + '   <div class="color-picker-panel" ng-show="AngularColorPickerController.visible" ng-class="{\n' + '       \'color-picker-panel-top color-picker-panel-right\': AngularColorPickerController.options.pos === \'top right\',\n' + '       \'color-picker-panel-top color-picker-panel-left\': AngularColorPickerController.options.pos === \'top left\',\n' + '       \'color-picker-panel-bottom color-picker-panel-right\': AngularColorPickerController.options.pos === \'bottom right\',\n' + '       \'color-picker-panel-bottom color-picker-panel-left\': AngularColorPickerController.options.pos === \'bottom left\',\n' + '       \'color-picker-show-alpha\': AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\',\n' + '       \'color-picker-show-inline\': AngularColorPickerController.options.inline,\n' + '   }">\n' + '       <div class="color-picker-row">\n' + '           <div class="color-picker-grid color-picker-sprite">\n' + '               <div class="color-picker-grid-inner"></div>\n' + '               <div class="color-picker-picker">\n' + '                   <div></div>\n' + '               </div>\n' + '           </div>\n' + '           <div class="color-picker-hue color-picker-sprite">\n' + '               <div class="color-picker-slider"></div>\n' + '           </div>\n' + '           <div class="color-picker-opacity color-picker-sprite" ng-show="AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\'">\n' + '               <div class="color-picker-slider"></div>\n' + '           </div>\n' + '       </div>\n' + '   </div>\n' + '</div>');
   }
@@ -848,0 +860,0 @@ template.$inject = ['$templateCache'];

dist/angularjs-color-picker.min.js

 /*!
- * angularjs-color-picker v2.0.0
+ * angularjs-color-picker v2.1.0
  * https://github.com/ruhley/angular-color-picker/
@@ -7,5 +7,5 @@ *
  *
- * 2016-07-11 16:31:21
+ * 2016-07-13 08:32:24
  *
  */
-!function(o,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):o.AngularjsColorPicker=t()}(this,function(){"use strict";function o(){return{restrict:"E",require:["^ngModel"],scope:{ngModel:"=",options:"=?",api:"=?"},bindToController:!0,templateUrl:"template/color-picker/directive.html",controller:s,controllerAs:"AngularColorPickerController",link:function(o,t,i,e){o.control=e}}}function t(o){o.put("template/color-picker/directive.html",'<div class="color-picker-wrapper" ng-class="{\n\'color-picker-disabled\': AngularColorPickerController.options.disabled,\n\'color-picker-swatch-only\': AngularColorPickerController.options.swatchOnly,\n}">\n   <div class="color-picker-input-wrapper" ng-class="{\'input-group\': AngularColorPickerController.options.swatchBootstrap && AngularColorPickerController.options.swatch}">\n       <span ng-if="AngularColorPickerController.options.swatchPos === \'left\'" class="color-picker-swatch" ng-click="AngularColorPickerController.focus()" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>\n       <input class="color-picker-input form-control" type="text" ng-model="AngularColorPickerController.ngModel" ng-readonly="AngularColorPickerController.options.swatchOnly" ng-disabled="AngularColorPickerController.options.disabled" ng-blur="AngularColorPickerController.onBlur($event)" ng-change="AngularColorPickerController.onChange($event)" size="7" ng-focus="AngularColorPickerController.api.open()" ng-class="{\'color-picker-input-swatch\': AngularColorPickerController.options.swatch && !AngularColorPickerController.options.swatchOnly && AngularColorPickerController.options.swatchPos === \'left\'}">\n       <span ng-if="AngularColorPickerController.options.swatchPos === \'right\'" class="color-picker-swatch" ng-click="AngularColorPickerController.focus()" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>\n   </div>\n   <div class="color-picker-panel" ng-show="AngularColorPickerController.visible" ng-class="{\n'+"       'color-picker-panel-top color-picker-panel-right': AngularColorPickerController.options.pos === 'top right',\n       'color-picker-panel-top color-picker-panel-left': AngularColorPickerController.options.pos === 'top left',\n       'color-picker-panel-bottom color-picker-panel-right': AngularColorPickerController.options.pos === 'bottom right',\n       'color-picker-panel-bottom color-picker-panel-left': AngularColorPickerController.options.pos === 'bottom left',\n       'color-picker-show-alpha': AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== 'hex',\n       'color-picker-show-inline': AngularColorPickerController.options.inline,\n   }\">\n       <div class=\"color-picker-row\">\n           <div class=\"color-picker-grid color-picker-sprite\">\n               <div class=\"color-picker-grid-inner\"></div>\n               <div class=\"color-picker-picker\">\n                   <div></div>\n               </div>\n           </div>\n           <div class=\"color-picker-hue color-picker-sprite\">\n               <div class=\"color-picker-slider\"></div>\n           </div>\n           <div class=\"color-picker-opacity color-picker-sprite\" ng-show=\"AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== 'hex'\">\n               <div class=\"color-picker-slider\"></div>\n           </div>\n       </div>\n   </div>\n</div>")}var i=function(o,t){if(!(o instanceof t))throw new TypeError("Cannot call a class as a function")},e=function(){function o(o,t){for(var i=0;i<t.length;i++){var e=t[i];e.enumerable=e.enumerable||!1,e.configurable=!0,"value"in e&&(e.writable=!0),Object.defineProperty(o,e.key,e)}}return function(t,i,e){return i&&o(t.prototype,i),e&&o(t,e),t}}(),s=function(){function o(t,e,s,n){var r=this;i(this,o),this.$scope=t,this.$element=e,this.$document=s,this.$timeout=n,this.chrome=Boolean(window.chrome);var l=window.navigator.userAgent.match(/Android\s([0-9\.]*)/i);this.android_version=l&&l.length>1?parseFloat(l[1]):NaN,this.onChangeValue=null,this.updateModel=!0,this.$scope.$watch("AngularColorPickerController.ngModel",this.watchNgModel.bind(this)),this.$scope.$watch("AngularColorPickerController.options.swatchPos",this.watchSwatchPos.bind(this)),this.$scope.$watchGroup(["AngularColorPickerController.options.format","AngularColorPickerController.options.alpha","AngularColorPickerController.options.case"],this.reInitAndUpdate.bind(this)),this.$scope.$watchGroup(["AngularColorPickerController.options.disabled","AngularColorPickerController.options.swatchBootstrap","AngularColorPickerController.options.swatchOnly","AngularColorPickerController.options.swatch","AngularColorPickerController.options.pos","AngularColorPickerController.options.inline"],this.reInit.bind(this)),this.$scope.$watch("AngularColorPickerController.api",this.watchApi.bind(this)),this.$scope.$watch("AngularColorPickerController.swatchColor",this.updateSwatchBackground.bind(this)),this.$scope.$watch("AngularColorPickerController.hue",this.hueUpdate.bind(this)),this.$scope.$watch("AngularColorPickerController.saturation",this.saturationUpdate.bind(this)),this.$scope.$watch("AngularColorPickerController.lightness",this.lightnessUpdate.bind(this)),this.$scope.$watch("AngularColorPickerController.opacity",this.opacityUpdate.bind(this)),this.$scope.$on("$destroy",function(){r.$document.off("mousedown",r.onMouseDown),r.$document.off("mouseup",r.onMouseUp),r.$document.off("mousemove",r.onMouseMove),r.callApiFunction("onDestroy")}),this.init()}return e(o,[{key:"watchNgModel",value:function(o,t){var i=this;if(void 0!==o&&null!==o&&o!==t&&o.length>4){var e=tinycolor(o);if(e.isValid()){var s=e.toHsv();this.updateModel=!1,this.hue=s.h,this.saturation=100*s.s,this.lightness=100*s.v,this.options.alpha&&(this.opacity=100*s.a),this.$timeout(function(){i.updateModel=!0}),this.isValid=!0}else this.isValid=!1;this.$scope.control[0].$setValidity(this.$element.attr("name"),this.isValid),void 0!==t&&"function"==typeof this.$scope.control[0].$setDirty&&this.$scope.control[0].$setDirty()}else null!==o&&""!==o||(this.hue=void 0,this.saturation=void 0,this.lightness=void 0,this.opacity=void 0),this.swatchColor=""}},{key:"watchSwatchPos",value:function(o){var t=this;void 0!==o&&(this.initConfig(),this.$timeout(function(){t.updateSwatchBackground()}))}},{key:"watchApi",value:function(){var o=this;this.api||(this.api={}),this.api.open=function(){return!!o.visible||(o.visible=!0,o.hueMouse=!1,o.opacityMouse=!1,o.colorMouse=!1,o.hueUpdate(),o.saturationUpdate(),o.lightnessUpdate(),o.opacityUpdate(),void o.callApiFunction("onOpen"))},this.api.close=function(){o.options.inline||!o.visible&&null===o.$element[0].querySelector(".color-picker-panel").offsetParent||(o.visible=!1,o.$scope.$apply(),o.callApiFunction("onClose"))}}},{key:"reInit",value:function(o){void 0!==o&&this.initConfig()}},{key:"reInitAndUpdate",value:function(o){void 0!==o&&(this.initConfig(),this.update())}},{key:"init",value:function(){if(void 0===this.ngModel)this.setDefaults();else{var o=tinycolor(this.ngModel);if(o.isValid()){var t=o.toHsv();this.hue=t.h,this.saturation=100*t.s,this.lightness=100*t.v,this.opacity=100*t.a}}this.initConfig(),this.$document.on("mousedown",this.onMouseDown.bind(this)),this.$document.on("mouseup",this.onMouseUp.bind(this)),this.$document.on("mousemove",this.onMouseMove.bind(this)),this.find(".color-picker-grid").on("click",this.onColorClick.bind(this)),this.find(".color-picker-hue").on("click",this.onHueClick.bind(this)),this.find(".color-picker-opacity").on("click",this.onOpacityClick.bind(this))}},{key:"onMouseDown",value:function(o){!this.options.disabled&&this.find(o.target).length>0&&(o.target.classList.contains("color-picker-grid-inner")||o.target.classList.contains("color-picker-picker")||o.target.parentNode.classList.contains("color-picker-picker")?(this.colorDown(o),this.$scope.$apply()):o.target.classList.contains("color-picker-hue")||o.target.parentNode.classList.contains("color-picker-hue")?(this.hueDown(o),this.$scope.$apply()):(o.target.classList.contains("color-picker-opacity")||o.target.parentNode.classList.contains("color-picker-opacity"))&&(this.opacityDown(o),this.$scope.$apply()))}},{key:"onMouseUp",value:function(o){this.colorMouse||this.hueMouse||this.opacityMouse||0!==this.find(o.target).length?this.colorMouse?(this.colorUp(o),this.$scope.$apply(),this.onChange(o)):this.hueMouse?(this.hueUp(o),this.$scope.$apply(),this.onChange(o)):this.opacityMouse&&(this.opacityUp(o),this.$scope.$apply(),this.onChange(o)):this.api.close()}},{key:"onMouseMove",value:function(o){this.colorMouse?(this.colorChange(o),this.$scope.$apply()):this.hueMouse?(this.hueChange(o),this.$scope.$apply()):this.opacityMouse&&(this.opacityChange(o),this.$scope.$apply())}},{key:"onColorClick",value:function(o){this.options.disabled||(this.colorChange(o),this.$scope.$apply(),this.onChange(o))}},{key:"onHueClick",value:function(o){this.options.disabled||(this.hueChange(o),this.$scope.$apply(),this.onChange(o))}},{key:"onOpacityClick",value:function(o){this.options.disabled||(this.opacityChange(o),this.$scope.$apply(),this.onChange(o))}},{key:"onChange",value:function(o){this.ngModel!==this.onChangeValue&&(this.onChangeValue=this.ngModel,this.callApiFunction("onChange",[o,this.ngModel]))}},{key:"onBlur",value:function(o){this.ngModel!==this.onChangeValue&&(this.updateModel=!0,this.update()),this.callApiFunction("onBlur",[o,this.ngModel])}},{key:"initConfig",value:function(){this.options||(this.options={}),this.options.disabled=void 0!==this.options.disabled&&this.options.disabled,this.options.alpha=void 0===this.options.alpha||this.options.alpha,this.options.case=void 0===this.options.case?"upper":this.options.case,this.options.format=void 0===this.options.format?"hsl":this.options.format,this.options.pos=void 0===this.options.pos?"bottom left":this.options.pos,this.options.swatch=void 0===this.options.swatch||this.options.swatch,this.options.swatchOnly=void 0!==this.options.swatchOnly&&this.options.swatchOnly,this.options.swatchPos=void 0===this.options.swatchPos?"left":this.options.swatchPos,this.options.swatchBootstrap=void 0===this.options.swatchBootstrap||this.options.swatchBootstrap,this.options.inline=void 0!==this.options.inline&&this.options.inline,this.visible=this.options.inline}},{key:"focus",value:function(){this.find(".color-picker-input")[0].focus()}},{key:"setDefaults",value:function(){void 0===this.hue&&(this.hue=0),void 0===this.saturation&&(this.saturation=0),void 0===this.lightness&&(this.lightness=100),void 0===this.opacity&&(this.opacity=100)}},{key:"update",value:function(){if(void 0===this.hue&&void 0===this.saturation&&void 0===this.lightness)return!1;this.setDefaults();var o,t=tinycolor({h:this.hue,s:this.saturation/100,v:this.lightness/100});switch(this.options.alpha&&t.setAlpha(this.opacity/100),this.swatchColor=t.toHslString(),this.options.format){case"rgb":o=t.toRgbString();break;case"hex":o=t.toHexString(),o="lower"===this.options.case?o.toLowerCase():o.toUpperCase();break;case"hex8":o=t.toHex8String(),o="lower"===this.options.case?o.toLowerCase():o.toUpperCase();break;case"hsv":o=t.toHsvString();break;default:o=t.toHslString()}this.updateModel&&(this.ngModel=o)}},{key:"updateSwatchBackground",value:function(){var o=angular.element(this.$element[0].querySelector(".color-picker-swatch"));o.css({"background-color":this.swatchColor})}},{key:"huePosUpdate",value:function(){var o=this;this.$timeout(function(){var t=o.$element[0].querySelector(".color-picker-hue"),i=angular.element(o.$element[0].querySelector(".color-picker-hue .color-picker-slider")),e=t.getBoundingClientRect();i.css({top:e.height*o.huePos/100+"px"})})}},{key:"opacityPosUpdate",value:function(){var o=this;this.$timeout(function(){var t=o.$element[0].querySelector(".color-picker-opacity"),i=angular.element(o.$element[0].querySelector(".color-picker-opacity .color-picker-slider")),e=t.getBoundingClientRect();i.css({top:e.height*o.opacityPos/100+"px"})})}},{key:"lightnessPosUpdate",value:function(){var o=this;this.$timeout(function(){var t=o.$element[0].querySelector(".color-picker-grid"),i=angular.element(o.$element[0].querySelector(".color-picker-grid .color-picker-picker")),e=t.getBoundingClientRect();i.css({top:e.height*o.lightnessPos/100+"px"})})}},{key:"saturationPosUpdate",value:function(){var o=this;this.$timeout(function(){var t=o.$element[0].querySelector(".color-picker-grid"),i=angular.element(o.$element[0].querySelector(".color-picker-grid .color-picker-picker")),e=t.getBoundingClientRect();i.css({left:e.width*o.saturationPos/100+"px"})})}},{key:"gridUpdate",value:function(){var o=angular.element(this.$element[0].querySelector(".color-picker-grid"));o.css({"background-color":this.grid})}},{key:"hueDown",value:function(o){o.stopPropagation(),o.preventDefault(),this.hueMouse=!0}},{key:"hueUp",value:function(o){o.stopPropagation(),o.preventDefault(),this.hueMouse=!1}},{key:"hueChange",value:function(o){o.stopPropagation(),o.preventDefault();var t=this.find(".color-picker-hue");this.hue=360*(1-(o.pageY-this.offset(t).top)/t.prop("offsetHeight")),this.hue>360?this.hue=360:this.hue<0&&(this.hue=0)}},{key:"hueUpdate",value:function(){void 0!==this.hue&&(this.huePos=100*(1-this.hue/360),this.grid=tinycolor({h:this.hue,s:100,v:1}).toHslString(),this.huePos<0?this.huePos=0:this.huePos>100&&(this.huePos=100),this.huePosUpdate(),this.gridUpdate(),this.update())}},{key:"opacityDown",value:function(o){o.stopPropagation(),o.preventDefault(),this.opacityMouse=!0}},{key:"opacityUp",value:function(o){o.stopPropagation(),o.preventDefault(),this.opacityMouse=!1}},{key:"opacityChange",value:function(o){o.stopPropagation(),o.preventDefault();var t=this.find(".color-picker-opacity");this.opacity=100*(1-(o.pageY-this.offset(t).top)/t.prop("offsetHeight")),this.opacity>100?this.opacity=100:this.opacity<0&&(this.opacity=0)}},{key:"opacityUpdate",value:function(){void 0!==this.opacity&&(this.opacityPos=100*(1-this.opacity/100),this.opacityPos<0?this.opacityPos=0:this.opacityPos>100&&(this.opacityPos=100),this.opacityPosUpdate(),this.update())}},{key:"colorDown",value:function(o){o.stopPropagation(),o.preventDefault(),this.colorMouse=!0}},{key:"colorUp",value:function(o){o.stopPropagation(),o.preventDefault(),this.colorMouse=!1}},{key:"colorChange",value:function(o){o.stopPropagation(),o.preventDefault();var t=this.find(".color-picker-grid-inner"),i=this.offset(t);this.saturation=(o.pageX-i.left)/t.prop("offsetWidth")*100,this.lightness=100*(1-(o.pageY-i.top)/t.prop("offsetHeight")),this.saturation>100?this.saturation=100:this.saturation<0&&(this.saturation=0),this.lightness>100?this.lightness=100:this.lightness<0&&(this.lightness=0)}},{key:"saturationUpdate",value:function(o){void 0!==this.saturation&&(this.saturationPos=this.saturation/100*100,this.saturationPos<0?this.saturationPos=0:this.saturationPos>100&&(this.saturationPos=100),this.saturationPosUpdate(),this.update())}},{key:"lightnessUpdate",value:function(){void 0!==this.lightness&&(this.lightnessPos=100*(1-this.lightness/100),this.lightnessPos<0?this.lightnessPos=0:this.lightnessPos>100&&(this.lightnessPos=100),this.lightnessPosUpdate(),this.update())}},{key:"callApiFunction",value:function(o,t){this.api&&"function"==typeof this.api[o]&&this.api[o].apply(this,t)}},{key:"find",value:function(o){var t,i=this.wrapper?this.wrapper[0]:this.$element[0],e=[];if(!o)return e;if("string"==typeof o){if(1!==(t=i.nodeType)&&9!==t)return[];e=i.querySelectorAll(o)}else i.contains(o)&&e.push(o);return angular.element(e)}},{key:"offset",value:function(o){var t,i,e,s,n=o[0];if(n)return n.getClientRects().length?(e=n.getBoundingClientRect(),e.width||e.height?(s=n.ownerDocument,i=null!==s&&s===s.window?s:9===s.nodeType&&s.defaultView,t=s.documentElement,this.chrome&&this.android_version<6&&screen.width<=768?{top:e.top-t.clientTop,left:e.left-t.clientLeft}:{top:e.top+i.pageYOffset-t.clientTop,left:e.left+i.pageXOffset-t.clientLeft}):e):{top:0,left:0}}}]),o}();s.$inject=["$scope","$element","$document","$timeout"],t.$inject=["$templateCache"];var n=angular.module("color.picker",[]).directive("colorPicker",o).run(t);return n});
+!function(o,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):o.AngularjsColorPicker=t()}(this,function(){"use strict";function o(){return{restrict:"E",require:["^ngModel"],scope:{ngModel:"=",options:"=?",api:"=?",eventApi:"=?"},bindToController:!0,templateUrl:"template/color-picker/directive.html",controller:s,controllerAs:"AngularColorPickerController",link:function(o,t,i,e){o.control=e}}}function t(o){o.put("template/color-picker/directive.html",'<div class="color-picker-wrapper" ng-class="{\n\'color-picker-disabled\': AngularColorPickerController.options.disabled,\n\'color-picker-swatch-only\': AngularColorPickerController.options.swatchOnly,\n}">\n   <div class="color-picker-input-wrapper" ng-class="{\'input-group\': AngularColorPickerController.options.swatchBootstrap && AngularColorPickerController.options.swatch}">\n       <span ng-if="AngularColorPickerController.options.swatchPos === \'left\'" class="color-picker-swatch" ng-click="AngularColorPickerController.focus()" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>\n       <input class="color-picker-input form-control" type="text" ng-model="AngularColorPickerController.ngModel" ng-readonly="AngularColorPickerController.options.swatchOnly" ng-disabled="AngularColorPickerController.options.disabled" ng-blur="AngularColorPickerController.onBlur($event)" ng-change="AngularColorPickerController.onChange($event)" size="7" ng-focus="AngularColorPickerController.api.open($event)" ng-class="{\'color-picker-input-swatch\': AngularColorPickerController.options.swatch && !AngularColorPickerController.options.swatchOnly && AngularColorPickerController.options.swatchPos === \'left\'}">\n       <span ng-if="AngularColorPickerController.options.swatchPos === \'right\'" class="color-picker-swatch" ng-click="AngularColorPickerController.focus()" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>\n   </div>\n   <div class="color-picker-panel" ng-show="AngularColorPickerController.visible" ng-class="{\n'+"       'color-picker-panel-top color-picker-panel-right': AngularColorPickerController.options.pos === 'top right',\n       'color-picker-panel-top color-picker-panel-left': AngularColorPickerController.options.pos === 'top left',\n       'color-picker-panel-bottom color-picker-panel-right': AngularColorPickerController.options.pos === 'bottom right',\n       'color-picker-panel-bottom color-picker-panel-left': AngularColorPickerController.options.pos === 'bottom left',\n       'color-picker-show-alpha': AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== 'hex',\n       'color-picker-show-inline': AngularColorPickerController.options.inline,\n   }\">\n       <div class=\"color-picker-row\">\n           <div class=\"color-picker-grid color-picker-sprite\">\n               <div class=\"color-picker-grid-inner\"></div>\n               <div class=\"color-picker-picker\">\n                   <div></div>\n               </div>\n           </div>\n           <div class=\"color-picker-hue color-picker-sprite\">\n               <div class=\"color-picker-slider\"></div>\n           </div>\n           <div class=\"color-picker-opacity color-picker-sprite\" ng-show=\"AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== 'hex'\">\n               <div class=\"color-picker-slider\"></div>\n           </div>\n       </div>\n   </div>\n</div>")}var i=function(o,t){if(!(o instanceof t))throw new TypeError("Cannot call a class as a function")},e=function(){function o(o,t){for(var i=0;i<t.length;i++){var e=t[i];e.enumerable=e.enumerable||!1,e.configurable=!0,"value"in e&&(e.writable=!0),Object.defineProperty(o,e.key,e)}}return function(t,i,e){return i&&o(t.prototype,i),e&&o(t,e),t}}(),s=function(){function o(t,e,s,n){var r=this;i(this,o),this.$scope=t,this.$element=e,this.$document=s,this.$timeout=n,this.chrome=Boolean(window.chrome);var l=window.navigator.userAgent.match(/Android\s([0-9\.]*)/i);this.android_version=l&&l.length>1?parseFloat(l[1]):NaN,this.onChangeValue=null,this.updateModel=!0,this.$scope.$watch("AngularColorPickerController.ngModel",this.watchNgModel.bind(this)),this.$scope.$watch("AngularColorPickerController.options.swatchPos",this.watchSwatchPos.bind(this)),this.$scope.$watchGroup(["AngularColorPickerController.options.format","AngularColorPickerController.options.alpha","AngularColorPickerController.options.case"],this.reInitAndUpdate.bind(this)),this.$scope.$watchGroup(["AngularColorPickerController.options.disabled","AngularColorPickerController.options.swatchBootstrap","AngularColorPickerController.options.swatchOnly","AngularColorPickerController.options.swatch","AngularColorPickerController.options.pos","AngularColorPickerController.options.inline"],this.reInit.bind(this)),this.$scope.$watch("AngularColorPickerController.api",this.watchApi.bind(this)),this.$scope.$watch("AngularColorPickerController.swatchColor",this.updateSwatchBackground.bind(this)),this.$scope.$watch("AngularColorPickerController.hue",this.hueUpdate.bind(this)),this.$scope.$watch("AngularColorPickerController.saturation",this.saturationUpdate.bind(this)),this.$scope.$watch("AngularColorPickerController.lightness",this.lightnessUpdate.bind(this)),this.$scope.$watch("AngularColorPickerController.opacity",this.opacityUpdate.bind(this)),this.$scope.$on("$destroy",function(){r.$document.off("mousedown",r.onMouseDown),r.$document.off("mouseup",r.onMouseUp),r.$document.off("mousemove",r.onMouseMove),r.eventApiDispatch("onDestroy")}),this.init()}return e(o,[{key:"watchNgModel",value:function(o,t){var i=this;if(void 0!==o&&null!==o&&o!==t&&o.length>4){var e=tinycolor(o);if(e.isValid()){var s=e.toHsv();this.updateModel=!1,this.hue=s.h,this.saturation=100*s.s,this.lightness=100*s.v,this.options.alpha&&(this.opacity=100*s.a),this.$timeout(function(){i.updateModel=!0}),this.isValid=!0}else this.isValid=!1;this.$scope.control[0].$setValidity(this.$element.attr("name"),this.isValid),void 0!==t&&"function"==typeof this.$scope.control[0].$setDirty&&this.$scope.control[0].$setDirty()}else null!==o&&""!==o||(this.hue=void 0,this.saturation=void 0,this.lightness=void 0,this.opacity=void 0),this.swatchColor=""}},{key:"watchSwatchPos",value:function(o){var t=this;void 0!==o&&(this.initConfig(),this.$timeout(function(){t.updateSwatchBackground()}))}},{key:"watchApi",value:function(){var o=this;this.api||(this.api={}),this.api.open=function(t){return!!o.visible||(o.visible=!0,o.hueMouse=!1,o.opacityMouse=!1,o.colorMouse=!1,o.hueUpdate(),o.saturationUpdate(),o.lightnessUpdate(),o.opacityUpdate(),void o.eventApiDispatch("onOpen",[t]))},this.api.close=function(){o.options.inline||!o.visible&&null===o.$element[0].querySelector(".color-picker-panel").offsetParent||(o.visible=!1,o.$scope.$apply(),o.eventApiDispatch("onClose",[event]))},this.api.getElement=function(){return o.$element}}},{key:"reInit",value:function(o){void 0!==o&&this.initConfig()}},{key:"reInitAndUpdate",value:function(o){void 0!==o&&(this.initConfig(),this.update())}},{key:"init",value:function(){if(void 0===this.ngModel)this.setDefaults();else{var o=tinycolor(this.ngModel);if(o.isValid()){var t=o.toHsv();this.hue=t.h,this.saturation=100*t.s,this.lightness=100*t.v,this.opacity=100*t.a}}this.initConfig(),this.$document.on("mousedown",this.onMouseDown.bind(this)),this.$document.on("mouseup",this.onMouseUp.bind(this)),this.$document.on("mousemove",this.onMouseMove.bind(this)),this.find(".color-picker-grid").on("click",this.onColorClick.bind(this)),this.find(".color-picker-hue").on("click",this.onHueClick.bind(this)),this.find(".color-picker-opacity").on("click",this.onOpacityClick.bind(this))}},{key:"onMouseDown",value:function(o){!this.options.disabled&&this.find(o.target).length>0&&(o.target.classList.contains("color-picker-grid-inner")||o.target.classList.contains("color-picker-picker")||o.target.parentNode.classList.contains("color-picker-picker")?(this.colorDown(o),this.$scope.$apply()):o.target.classList.contains("color-picker-hue")||o.target.parentNode.classList.contains("color-picker-hue")?(this.hueDown(o),this.$scope.$apply()):(o.target.classList.contains("color-picker-opacity")||o.target.parentNode.classList.contains("color-picker-opacity"))&&(this.opacityDown(o),this.$scope.$apply()))}},{key:"onMouseUp",value:function(o){this.colorMouse||this.hueMouse||this.opacityMouse||0!==this.find(o.target).length?this.colorMouse?(this.colorUp(o),this.$scope.$apply(),this.onChange(o)):this.hueMouse?(this.hueUp(o),this.$scope.$apply(),this.onChange(o)):this.opacityMouse&&(this.opacityUp(o),this.$scope.$apply(),this.onChange(o)):this.api.close(o)}},{key:"onMouseMove",value:function(o){this.colorMouse?(this.colorChange(o),this.$scope.$apply()):this.hueMouse?(this.hueChange(o),this.$scope.$apply()):this.opacityMouse&&(this.opacityChange(o),this.$scope.$apply())}},{key:"onColorClick",value:function(o){this.options.disabled||(this.colorChange(o),this.$scope.$apply(),this.onChange(o))}},{key:"onHueClick",value:function(o){this.options.disabled||(this.hueChange(o),this.$scope.$apply(),this.onChange(o))}},{key:"onOpacityClick",value:function(o){this.options.disabled||(this.opacityChange(o),this.$scope.$apply(),this.onChange(o))}},{key:"onChange",value:function(o){this.ngModel!==this.onChangeValue&&(this.onChangeValue=this.ngModel,this.eventApiDispatch("onChange",[o]))}},{key:"onBlur",value:function(o){this.ngModel!==this.onChangeValue&&(this.updateModel=!0,this.update()),this.eventApiDispatch(this.api,"onBlur",[o])}},{key:"initConfig",value:function(){this.options||(this.options={}),this.options.disabled=void 0!==this.options.disabled&&this.options.disabled,this.options.alpha=void 0===this.options.alpha||this.options.alpha,this.options.case=void 0===this.options.case?"upper":this.options.case,this.options.format=void 0===this.options.format?"hsl":this.options.format,this.options.pos=void 0===this.options.pos?"bottom left":this.options.pos,this.options.swatch=void 0===this.options.swatch||this.options.swatch,this.options.swatchOnly=void 0!==this.options.swatchOnly&&this.options.swatchOnly,this.options.swatchPos=void 0===this.options.swatchPos?"left":this.options.swatchPos,this.options.swatchBootstrap=void 0===this.options.swatchBootstrap||this.options.swatchBootstrap,this.options.inline=void 0!==this.options.inline&&this.options.inline,this.visible=this.options.inline}},{key:"focus",value:function(){this.find(".color-picker-input")[0].focus()}},{key:"setDefaults",value:function(){void 0===this.hue&&(this.hue=0),void 0===this.saturation&&(this.saturation=0),void 0===this.lightness&&(this.lightness=100),void 0===this.opacity&&(this.opacity=100)}},{key:"update",value:function(){if(void 0===this.hue&&void 0===this.saturation&&void 0===this.lightness)return!1;this.setDefaults();var o,t=tinycolor({h:this.hue,s:this.saturation/100,v:this.lightness/100});switch(this.options.alpha&&t.setAlpha(this.opacity/100),this.swatchColor=t.toHslString(),this.options.format){case"rgb":o=t.toRgbString();break;case"hex":o=t.toHexString(),o="lower"===this.options.case?o.toLowerCase():o.toUpperCase();break;case"hex8":o=t.toHex8String(),o="lower"===this.options.case?o.toLowerCase():o.toUpperCase();break;case"hsv":o=t.toHsvString();break;default:o=t.toHslString()}this.updateModel&&(this.ngModel=o)}},{key:"updateSwatchBackground",value:function(){var o=angular.element(this.$element[0].querySelector(".color-picker-swatch"));o.css({"background-color":this.swatchColor})}},{key:"huePosUpdate",value:function(){var o=this;this.$timeout(function(){var t=o.$element[0].querySelector(".color-picker-hue"),i=angular.element(o.$element[0].querySelector(".color-picker-hue .color-picker-slider")),e=t.getBoundingClientRect();i.css({top:e.height*o.huePos/100+"px"})})}},{key:"opacityPosUpdate",value:function(){var o=this;this.$timeout(function(){var t=o.$element[0].querySelector(".color-picker-opacity"),i=angular.element(o.$element[0].querySelector(".color-picker-opacity .color-picker-slider")),e=t.getBoundingClientRect();i.css({top:e.height*o.opacityPos/100+"px"})})}},{key:"lightnessPosUpdate",value:function(){var o=this;this.$timeout(function(){var t=o.$element[0].querySelector(".color-picker-grid"),i=angular.element(o.$element[0].querySelector(".color-picker-grid .color-picker-picker")),e=t.getBoundingClientRect();i.css({top:e.height*o.lightnessPos/100+"px"})})}},{key:"saturationPosUpdate",value:function(){var o=this;this.$timeout(function(){var t=o.$element[0].querySelector(".color-picker-grid"),i=angular.element(o.$element[0].querySelector(".color-picker-grid .color-picker-picker")),e=t.getBoundingClientRect();i.css({left:e.width*o.saturationPos/100+"px"})})}},{key:"gridUpdate",value:function(){var o=angular.element(this.$element[0].querySelector(".color-picker-grid"));o.css({"background-color":this.grid})}},{key:"hueDown",value:function(o){o.stopPropagation(),o.preventDefault(),this.hueMouse=!0}},{key:"hueUp",value:function(o){o.stopPropagation(),o.preventDefault(),this.hueMouse=!1}},{key:"hueChange",value:function(o){o.stopPropagation(),o.preventDefault();var t=this.find(".color-picker-hue");this.hue=360*(1-(o.pageY-this.offset(t).top)/t.prop("offsetHeight")),this.hue>360?this.hue=360:this.hue<0&&(this.hue=0)}},{key:"hueUpdate",value:function(){void 0!==this.hue&&(this.huePos=100*(1-this.hue/360),this.grid=tinycolor({h:this.hue,s:100,v:1}).toHslString(),this.huePos<0?this.huePos=0:this.huePos>100&&(this.huePos=100),this.huePosUpdate(),this.gridUpdate(),this.update())}},{key:"opacityDown",value:function(o){o.stopPropagation(),o.preventDefault(),this.opacityMouse=!0}},{key:"opacityUp",value:function(o){o.stopPropagation(),o.preventDefault(),this.opacityMouse=!1}},{key:"opacityChange",value:function(o){o.stopPropagation(),o.preventDefault();var t=this.find(".color-picker-opacity");this.opacity=100*(1-(o.pageY-this.offset(t).top)/t.prop("offsetHeight")),this.opacity>100?this.opacity=100:this.opacity<0&&(this.opacity=0)}},{key:"opacityUpdate",value:function(){void 0!==this.opacity&&(this.opacityPos=100*(1-this.opacity/100),this.opacityPos<0?this.opacityPos=0:this.opacityPos>100&&(this.opacityPos=100),this.opacityPosUpdate(),this.update())}},{key:"colorDown",value:function(o){o.stopPropagation(),o.preventDefault(),this.colorMouse=!0}},{key:"colorUp",value:function(o){o.stopPropagation(),o.preventDefault(),this.colorMouse=!1}},{key:"colorChange",value:function(o){o.stopPropagation(),o.preventDefault();var t=this.find(".color-picker-grid-inner"),i=this.offset(t);this.saturation=(o.pageX-i.left)/t.prop("offsetWidth")*100,this.lightness=100*(1-(o.pageY-i.top)/t.prop("offsetHeight")),this.saturation>100?this.saturation=100:this.saturation<0&&(this.saturation=0),this.lightness>100?this.lightness=100:this.lightness<0&&(this.lightness=0)}},{key:"saturationUpdate",value:function(o){void 0!==this.saturation&&(this.saturationPos=this.saturation/100*100,this.saturationPos<0?this.saturationPos=0:this.saturationPos>100&&(this.saturationPos=100),this.saturationPosUpdate(),this.update())}},{key:"lightnessUpdate",value:function(){void 0!==this.lightness&&(this.lightnessPos=100*(1-this.lightness/100),this.lightnessPos<0?this.lightnessPos=0:this.lightnessPos>100&&(this.lightnessPos=100),this.lightnessPosUpdate(),this.update())}},{key:"eventApiDispatch",value:function(o,t){this.eventApi&&"function"==typeof this.eventApi[o]&&(t||(t=[]),t.unshift(this.ngModel),t.unshift(this.api),this.eventApi[o].apply(this,t))}},{key:"find",value:function(o){var t,i=this.wrapper?this.wrapper[0]:this.$element[0],e=[];if(!o)return e;if("string"==typeof o){if(1!==(t=i.nodeType)&&9!==t)return[];e=i.querySelectorAll(o)}else i.contains(o)&&e.push(o);return angular.element(e)}},{key:"offset",value:function(o){var t,i,e,s,n=o[0];if(n)return n.getClientRects().length?(e=n.getBoundingClientRect(),e.width||e.height?(s=n.ownerDocument,i=null!==s&&s===s.window?s:9===s.nodeType&&s.defaultView,t=s.documentElement,this.chrome&&this.android_version<6&&screen.width<=768?{top:e.top-t.clientTop,left:e.left-t.clientLeft}:{top:e.top+i.pageYOffset-t.clientTop,left:e.left+i.pageXOffset-t.clientLeft}):e):{top:0,left:0}}}]),o}();s.$inject=["$scope","$element","$document","$timeout"],t.$inject=["$templateCache"];var n=angular.module("color.picker",[]).directive("colorPicker",o).run(t);return n});

examples/app.js

@@ -11,3 +11,4 @@ angular
         $scope.options = {};
-        $scope.api = {
+        $scope.api = {};
+        $scope.eventApi = {
             onChange: function() {
@@ -14,0 +15,0 @@ console.log('change', arguments);

package.json

 {
   "name": "angularjs-color-picker",
   "description": "Color Picker Directive For AngularJS",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "license": "MIT",
@@ -6,0 +6,0 @@ "main": "dist/angularjs-color-picker.min.js",

README.md

@@ -1,6 +0,5 @@
-# angularjs-color-picker
+# Angular Color Picker
 
+Vanilla AngularJS Color Picker Directive with no requirement on jQuery
 
-AngularJS Color Picker Directive
-
 ## Installation
@@ -58,20 +57,46 @@
 
-If a list is given then choose one of the items. The first item in the list will be the default. Only ```ng-model``` is required.
+HTML - Only ```ng-model``` is required. If supplying an api it must be a unique object per color picker. However the event api can be shared among color pickers.
+
 ```html
 <color-picker
-    ng-model=""
-    color-picker-disabled="false, true"
-    color-picker-format="'hsl', 'hsv', 'rgb', 'hex', 'hex8'"
-    color-picker-alpha="true, false"
-    color-picker-swatch="true, false"
-    color-picker-swatch-pos="'left', 'right'"
-    color-picker-swatch-bootstrap="true, false"
-    color-picker-swatch-only="true, false"
-    color-picker-pos="'bottom left', 'bottom right', 'top left', 'top right'"
-    color-picker-case="'upper', 'lower'"
-    color-picker-inline="false, true"
-    color-picker-on-change="onColorChange($event, color)"
+    ng-model="color"
+    options="options"
+    api="api"
+    event-api="eventApi"
 ></color-picker>
 ```
+Javascript
 
+```js
+$scope.color = '#FF0000';
+
+// options - if a list is given then choose one of the items. The first item in the list will be the default
+$scope.options = {
+    disabled: [false, true],
+    format: ['hsl', 'hsv', 'rgb', 'hex', 'hex8'],
+    alpha: [true, false],
+    swatch: [true, false],
+    swatchPos: ['left', 'right'],
+    swatchBootstrap: [true, false],
+    swatchOnly: [true, false],
+    pos: ['bottom left', 'bottom right', 'top left', 'top right'],
+    case: ['upper', 'lower'],
+    inline: [false, true],
+};
+
+// exposed api functions
+$scope.api.open();
+$scope.api.close();
+$scope.api.getElement();
+
+// api event handlers
+$scope.eventApi = {
+    onChange: function(api, color, $event) {},
+    onBlur: function(api, color, $event) {},
+    onOpen: function(api, color, $event) {},
+    onClose: function(api, color, $event) {},
+    onDestroy: function(api, color) {},
+};
+```
+
 ## Requirements
@@ -78,0 +103,0 @@

src/scripts/controller.js

@@ -76,3 +76,3 @@ export default class AngularColorPickerController {
 
-            this.callApiFunction('onDestroy');
+            this.eventApiDispatch('onDestroy');
         });
@@ -145,3 +145,3 @@
 
-        this.api.open = () => {
+        this.api.open = (event) => {
             // if already visible then don't run show again
@@ -163,3 +163,3 @@ if (this.visible) {
 
-            this.callApiFunction('onOpen');
+            this.eventApiDispatch('onOpen', [event]);
         };
@@ -173,5 +173,9 @@
 
-                this.callApiFunction('onClose');
+                this.eventApiDispatch('onClose', [event]);
             }
         };
+
+        this.api.getElement = () => {
+            return this.$element;
+        };
     }
@@ -243,3 +247,3 @@
         if (!this.colorMouse && !this.hueMouse && !this.opacityMouse && this.find(event.target).length === 0) {
-            this.api.close();
+            this.api.close(event);
         // mouse event on color grid
@@ -307,3 +311,3 @@ } else if (this.colorMouse) {
 
-            this.callApiFunction('onChange', [event, this.ngModel]);
+            this.eventApiDispatch('onChange', [event]);
         }
@@ -318,3 +322,3 @@ }
 
-        this.callApiFunction('onBlur', [event, this.ngModel]);
+        this.eventApiDispatch(this.api, 'onBlur', [event]);
     }
@@ -653,5 +657,12 @@
 
-    callApiFunction(name, args) {
-        if (this.api && typeof this.api[name] === 'function') {
-            this.api[name].apply(this, args);
+    eventApiDispatch(name, args) {
+        if (this.eventApi && typeof this.eventApi[name] === 'function') {
+            if (!args) {
+                args = [];
+            }
+
+            args.unshift(this.ngModel);
+            args.unshift(this.api);
+
+            this.eventApi[name].apply(this, args);
         }
@@ -658,0 +669,0 @@ }

src/scripts/directive.js

@@ -11,2 +11,3 @@ import controller from './controller';
             api: '=?',
+            eventApi: '=?',
         },
@@ -13,0 +14,0 @@ bindToController: true,

src/scripts/template.js

@@ -9,3 +9,3 @@ export default function template($templateCache) {
         '       <span ng-if="AngularColorPickerController.options.swatchPos === \'left\'" class="color-picker-swatch" ng-click="AngularColorPickerController.focus()" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>\n' +
-        '       <input class="color-picker-input form-control" type="text" ng-model="AngularColorPickerController.ngModel" ng-readonly="AngularColorPickerController.options.swatchOnly" ng-disabled="AngularColorPickerController.options.disabled" ng-blur="AngularColorPickerController.onBlur($event)" ng-change="AngularColorPickerController.onChange($event)" size="7" ng-focus="AngularColorPickerController.api.open()" ng-class="{\'color-picker-input-swatch\': AngularColorPickerController.options.swatch && !AngularColorPickerController.options.swatchOnly && AngularColorPickerController.options.swatchPos === \'left\'}">\n' +
+        '       <input class="color-picker-input form-control" type="text" ng-model="AngularColorPickerController.ngModel" ng-readonly="AngularColorPickerController.options.swatchOnly" ng-disabled="AngularColorPickerController.options.disabled" ng-blur="AngularColorPickerController.onBlur($event)" ng-change="AngularColorPickerController.onChange($event)" size="7" ng-focus="AngularColorPickerController.api.open($event)" ng-class="{\'color-picker-input-swatch\': AngularColorPickerController.options.swatch && !AngularColorPickerController.options.swatchOnly && AngularColorPickerController.options.swatchPos === \'left\'}">\n' +
         '       <span ng-if="AngularColorPickerController.options.swatchPos === \'right\'" class="color-picker-swatch" ng-click="AngularColorPickerController.focus()" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>\n' +
@@ -12,0 +12,0 @@ '   </div>\n' +

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

468550

increased by1.79%

Number of package files

46

increased by6.98%

Lines of code

2431

increased by2.44%

Number of lines in readme file

114

increased by28.09%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes