angularjs-color-picker - npm Package Compare versions

Comparing version 2.1.6 to 2.2.0

bower.json

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

CHANGELOG.md

 # Changelog
 
+## v2.2.0
+
+#### Breaking Changes
+  * None
+
+#### New Features
+  * New `hue` option to show or hide the hue selector
+  * New `close`, `clear` and `reset` options to show extra buttons
+
+#### Bug Fixes
+  * Bug #82 Support touch events
+
 ## v2.1.6
@@ -4,0 +16,0 @@

dist/angularjs-color-picker.js

 /*!
- * angularjs-color-picker v2.1.6
+ * angularjs-color-picker v2.2.0
  * https://github.com/ruhley/angular-color-picker/
@@ -7,3 +7,3 @@ *
  *
- * 2016-07-22 08:24:43
+ * 2016-07-26 09:55:18
  *
@@ -18,2 +18,8 @@ */
 
+  var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj;
+  };
+
   var classCallCheck = function (instance, Constructor) {
@@ -70,2 +76,19 @@ if (!(instance instanceof Constructor)) {
 
+              if (newValue !== undefined && oldValue !== undefined && !this.hasOwnProperty('initialNgModel')) {
+                  this.initialNgModel = newValue;
+              }
+
+              // check dirty/pristine state
+              if (this.hasOwnProperty('initialNgModel')) {
+                  if (newValue === this.initialNgModel) {
+                      if (typeof this.$scope.control[0].$setPristine === 'function') {
+                          this.$scope.control[0].$setPristine();
+                      }
+                  } else {
+                      if (typeof this.$scope.control[0].$setDirty === 'function') {
+                          this.$scope.control[0].$setDirty();
+                      }
+                  }
+              }
+
               if (newValue !== undefined && newValue !== null && newValue.length > 4) {
@@ -97,6 +120,2 @@ var color = tinycolor(newValue);
                   this.$scope.control[0].$setValidity(this.$element.attr('name'), this.isValid);
-
-                  if (newValue !== oldValue && oldValue !== undefined && typeof this.$scope.control[0].$setDirty === 'function') {
-                      this.$scope.control[0].$setDirty();
-                  }
               } else {
@@ -159,3 +178,3 @@ if (newValue === null || newValue === '') {
                       _this3.visible = false;
-                      _this3.$scope.$apply();
+                      _this3.$scope.$applyAsync();
 
@@ -166,2 +185,18 @@ _this3.eventApiDispatch('onClose', [event]);
 
+              this.api.clear = function (event) {
+                  if (_this3.ngModel !== '') {
+                      _this3.ngModel = '';
+
+                      _this3.eventApiDispatch('onClear', [event]);
+                  }
+              };
+
+              this.api.reset = function (event) {
+                  if (_this3.ngModel !== _this3.initialNgModel) {
+                      _this3.ngModel = _this3.initialNgModel;
+
+                      _this3.eventApiDispatch('onReset', [event]);
+                  }
+              };
+
               this.api.getElement = function () {
@@ -240,2 +275,6 @@ return _this3.$element;
 
+                  _this4.$document.off('touchstart', _this4.onMouseDown);
+                  _this4.$document.off('touchend', _this4.onMouseUp);
+                  _this4.$document.off('touchmove', _this4.onMouseMove);
+
                   _this4.eventApiDispatch('onDestroy');
@@ -252,5 +291,18 @@ });
 
+              // setup touch events
+              this.$document.on('touchstart', this.onMouseDown.bind(this));
+              this.$document.on('touchend', this.onMouseUp.bind(this));
+              this.$document.on('touchmove', this.onMouseMove.bind(this));
+
+              // grid click
               this.find('.color-picker-grid').on('click', this.onColorClick.bind(this));
+              this.find('.color-picker-grid').on('touchend', this.onColorClick.bind(this));
+
+              // hue click
               this.find('.color-picker-hue').on('click', this.onHueClick.bind(this));
+              this.find('.color-picker-hue').on('touchend', this.onHueClick.bind(this));
+
+              // opacity click
               this.find('.color-picker-opacity').on('click', this.onOpacityClick.bind(this));
+              this.find('.color-picker-opacity').on('touchend', this.onOpacityClick.bind(this));
           }
@@ -284,2 +336,3 @@ }, {
                   this.api.close(event);
+                  this.$scope.$apply();
                   // mouse event on color grid
@@ -374,19 +427,59 @@ } else if (this.colorMouse) {
           value: function initConfig() {
-              if (!this.options) {
-                  this.options = {};
+              this.options = this.merge(this.options, {
+                  disabled: false,
+                  hue: true,
+                  alpha: true,
+                  case: 'upper',
+                  format: 'hsl',
+                  pos: 'bottom left',
+                  swatch: true,
+                  swatchOnly: false,
+                  swatchPos: 'left',
+                  swatchBootstrap: true,
+                  inline: false,
+                  placeholder: '',
+                  close: {
+                      show: false,
+                      label: 'Close',
+                      class: ''
+                  },
+                  clear: {
+                      show: false,
+                      label: 'Clear',
+                      class: ''
+                  },
+                  reset: {
+                      show: false,
+                      label: 'Reset',
+                      class: ''
+                  }
+              });
+
+              this.visible = this.options.inline;
+          }
+      }, {
+          key: 'merge',
+          value: function merge(options, defaultOptions) {
+              var newObject = {};
+              var attr;
+
+              for (attr in defaultOptions) {
+                  if (defaultOptions.hasOwnProperty(attr)) {
+                      newObject[attr] = defaultOptions[attr];
+                  }
               }
 
-              this.options.disabled = this.options.disabled === undefined ? false : this.options.disabled;
-              this.options.alpha = this.options.alpha === undefined ? true : this.options.alpha;
-              this.options.case = this.options.case === undefined ? 'upper' : this.options.case;
-              this.options.format = this.options.format === undefined ? 'hsl' : this.options.format;
-              this.options.pos = this.options.pos === undefined ? 'bottom left' : this.options.pos;
-              this.options.swatch = this.options.swatch === undefined ? true : this.options.swatch;
-              this.options.swatchOnly = this.options.swatchOnly === undefined ? false : this.options.swatchOnly;
-              this.options.swatchPos = this.options.swatchPos === undefined ? 'left' : this.options.swatchPos;
-              this.options.swatchBootstrap = this.options.swatchBootstrap === undefined ? true : this.options.swatchBootstrap;
-              this.options.inline = this.options.inline === undefined ? false : this.options.inline;
-              this.options.placeholder = this.options.placeholder === undefined ? '' : this.options.placeholder;
+              if ((typeof options === 'undefined' ? 'undefined' : _typeof(options)) === 'object') {
+                  for (attr in options) {
+                      if (options.hasOwnProperty(attr)) {
+                          if (_typeof(options[attr]) === 'object') {
+                              newObject[attr] = this.merge(options[attr], newObject[attr]);
+                          } else {
+                              newObject[attr] = options[attr];
+                          }
+                      }
+                  }
+              }
 
-              this.visible = this.options.inline;
+              return newObject;
           }
@@ -834,3 +927,3 @@ }, {
   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($event)" ng-class="{\'color-picker-input-swatch\': AngularColorPickerController.options.swatch && !AngularColorPickerController.options.swatchOnly && AngularColorPickerController.options.swatchPos === \'left\'}" placeholder="{{AngularColorPickerController.options.placeholder}}">\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="{' + '\'color-picker-disabled\': AngularColorPickerController.options.disabled,' + '\'color-picker-swatch-only\': AngularColorPickerController.options.swatchOnly,' + '}">' + '   <div class="color-picker-input-wrapper" ng-class="{\'input-group\': AngularColorPickerController.options.swatchBootstrap && AngularColorPickerController.options.swatch}">' + '       <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>' + '       <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\'}" placeholder="{{AngularColorPickerController.options.placeholder}}">' + '       <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>' + '   </div>' + '   <div class="color-picker-panel" ng-show="AngularColorPickerController.visible" ng-class="{' + '       \'color-picker-panel-top color-picker-panel-right\': AngularColorPickerController.options.pos === \'top right\',' + '       \'color-picker-panel-top color-picker-panel-left\': AngularColorPickerController.options.pos === \'top left\',' + '       \'color-picker-panel-bottom color-picker-panel-right\': AngularColorPickerController.options.pos === \'bottom right\',' + '       \'color-picker-panel-bottom color-picker-panel-left\': AngularColorPickerController.options.pos === \'bottom left\',' + '       \'color-picker-show-hue\': AngularColorPickerController.options.hue,' + '       \'color-picker-show-alpha\': AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\',' + '       \'color-picker-show-inline\': AngularColorPickerController.options.inline,' + '   }">' + '       <div class="color-picker-grid-wrapper">' + '           <div class="color-picker-row">' + '               <div class="color-picker-grid color-picker-sprite">' + '                   <div class="color-picker-grid-inner"></div>' + '                   <div class="color-picker-picker">' + '                       <div></div>' + '                   </div>' + '               </div>' + '               <div class="color-picker-hue color-picker-sprite" ng-show="AngularColorPickerController.options.hue">' + '                   <div class="color-picker-slider"></div>' + '               </div>' + '               <div class="color-picker-opacity color-picker-sprite" ng-show="AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\'">' + '                   <div class="color-picker-slider"></div>' + '               </div>' + '           </div>' + '       </div>' + '       <div class="color-picker-actions">' + '           <button ' + '               class="color-picker-action color-picker-action-clear"' + '               ng-class="AngularColorPickerController.options.clear.class"' + '               ng-show="AngularColorPickerController.options.clear.show"' + '               ng-click="AngularColorPickerController.api.clear($event)"' + '           >' + '               {{AngularColorPickerController.options.clear.label}}' + '           </button><!--' + '           --><button ' + '               class="color-picker-action color-picker-action-reset"' + '               ng-class="AngularColorPickerController.options.reset.class"' + '               ng-show="AngularColorPickerController.options.reset.show"' + '               ng-click="AngularColorPickerController.api.reset($event)"' + '           >' + '               {{AngularColorPickerController.options.reset.label}}' + '           </button><!--' + '           --><button' + '               class="color-picker-action color-picker-action-close"' + '               ng-class="AngularColorPickerController.options.close.class"' + '               ng-show="AngularColorPickerController.options.close.show"' + '               ng-click="AngularColorPickerController.api.close($event)"' + '           >' + '               {{AngularColorPickerController.options.close.label}}' + '           </button>' + '       </div>' + '   </div>' + '</div>');
   }
@@ -837,0 +930,0 @@ template.$inject = ['$templateCache'];

dist/angularjs-color-picker.min.js

 /*!
- * angularjs-color-picker v2.1.6
+ * angularjs-color-picker v2.2.0
  * https://github.com/ruhley/angular-color-picker/
@@ -7,5 +7,5 @@ *
  *
- * 2016-07-22 08:24:43
+ * 2016-07-26 09:55:18
  *
  */
-!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,o.init()}}}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\'}" placeholder="{{AngularColorPickerController.options.placeholder}}">\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){i(this,o),this.$scope=t,this.$element=e,this.$document=s,this.$timeout=n,this.$scope.init=this.init.bind(this),this.hue=0,this.saturation=void 0,this.lightness=void 0,this.opacity=void 0}return e(o,[{key:"watchNgModel",value:function(o,t){var i=this;if(!this.colorMouse)if(void 0!==o&&null!==o&&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),o!==t&&void 0!==t&&"function"==typeof this.$scope.control[0].$setDirty&&this.$scope.control[0].$setDirty()}else null!==o&&""!==o||(this.hue=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:"setupApi",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(t){o.options.inline||!o.visible&&null===o.$element[0].querySelector(".color-picker-panel").offsetParent||(o.visible=!1,o.$scope.$apply(),o.eventApiDispatch("onClose",[t]))},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(){var o=this;this.chrome=Boolean(window.chrome);var t=window.navigator.userAgent.match(/Android\s([0-9\.]*)/i);this.android_version=t&&t.length>1?parseFloat(t[1]):NaN,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","AngularColorPickerController.options.placeholder"],this.reInit.bind(this)),this.$scope.$watch("AngularColorPickerController.api",this.setupApi.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(){o.$document.off("mousedown",o.onMouseDown),o.$document.off("mouseup",o.onMouseUp),o.$document.off("mousemove",o.onMouseMove),o.eventApiDispatch("onDestroy")}),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.setupApi(),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.hasOwnProperty("onChangeValue")||(this.onChangeValue=this.ngModel),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("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.options.placeholder=void 0===this.options.placeholder?"":this.options.placeholder,this.visible=this.options.inline}},{key:"focus",value:function(){this.find(".color-picker-input")[0].focus()}},{key:"update",value:function(){if(void 0===this.hue||void 0===this.saturation||void 0===this.lightness)return!1;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});
+!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,e,i){o.control=i,o.init()}}}function t(o){o.put("template/color-picker/directive.html",'<div class="color-picker-wrapper" ng-class="{\'color-picker-disabled\': AngularColorPickerController.options.disabled,\'color-picker-swatch-only\': AngularColorPickerController.options.swatchOnly,}">   <div class="color-picker-input-wrapper" ng-class="{\'input-group\': AngularColorPickerController.options.swatchBootstrap && AngularColorPickerController.options.swatch}">       <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>       <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\'}" placeholder="{{AngularColorPickerController.options.placeholder}}">       <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>   </div>   <div class="color-picker-panel" ng-show="AngularColorPickerController.visible" ng-class="{       \'color-picker-panel-top color-picker-panel-right\': AngularColorPickerController.options.pos === \'top right\',       \'color-picker-panel-top color-picker-panel-left\': AngularColorPickerController.options.pos === \'top left\',       \'color-picker-panel-bottom color-picker-panel-right\': AngularColorPickerController.options.pos === \'bottom right\',       \'color-picker-panel-bottom color-picker-panel-left\': AngularColorPickerController.options.pos === \'bottom left\',       \'color-picker-show-hue\': AngularColorPickerController.options.hue,       \'color-picker-show-alpha\': AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\',       \'color-picker-show-inline\': AngularColorPickerController.options.inline,   }">       <div class="color-picker-grid-wrapper">           <div class="color-picker-row">               <div class="color-picker-grid color-picker-sprite">                   <div class="color-picker-grid-inner"></div>                   <div class="color-picker-picker">                       <div></div>                   </div>               </div>               <div class="color-picker-hue color-picker-sprite" ng-show="AngularColorPickerController.options.hue">                   <div class="color-picker-slider"></div>               </div>               <div class="color-picker-opacity color-picker-sprite" ng-show="AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\'">                   <div class="color-picker-slider"></div>               </div>           </div>       </div>       <div class="color-picker-actions">           <button                class="color-picker-action color-picker-action-clear"               ng-class="AngularColorPickerController.options.clear.class"               ng-show="AngularColorPickerController.options.clear.show"               ng-click="AngularColorPickerController.api.clear($event)"           >               {{AngularColorPickerController.options.clear.label}}           </button><!--           --><button                class="color-picker-action color-picker-action-reset"               ng-class="AngularColorPickerController.options.reset.class"               ng-show="AngularColorPickerController.options.reset.show"               ng-click="AngularColorPickerController.api.reset($event)"           >               {{AngularColorPickerController.options.reset.label}}           </button><!--           --><button               class="color-picker-action color-picker-action-close"               ng-class="AngularColorPickerController.options.close.class"               ng-show="AngularColorPickerController.options.close.show"               ng-click="AngularColorPickerController.api.close($event)"           >               {{AngularColorPickerController.options.close.label}}           </button>       </div>   </div></div>')}var e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol?"symbol":typeof o},i=function(o,t){if(!(o instanceof t))throw new TypeError("Cannot call a class as a function")},n=function(){function o(o,t){for(var e=0;e<t.length;e++){var i=t[e];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(o,i.key,i)}}return function(t,e,i){return e&&o(t.prototype,e),i&&o(t,i),t}}(),s=function(){function o(t,e,n,s){i(this,o),this.$scope=t,this.$element=e,this.$document=n,this.$timeout=s,this.$scope.init=this.init.bind(this),this.hue=0,this.saturation=void 0,this.lightness=void 0,this.opacity=void 0}return n(o,[{key:"watchNgModel",value:function(o,t){var e=this;if(!this.colorMouse)if(void 0===o||void 0===t||this.hasOwnProperty("initialNgModel")||(this.initialNgModel=o),this.hasOwnProperty("initialNgModel")&&(o===this.initialNgModel?"function"==typeof this.$scope.control[0].$setPristine&&this.$scope.control[0].$setPristine():"function"==typeof this.$scope.control[0].$setDirty&&this.$scope.control[0].$setDirty()),void 0!==o&&null!==o&&o.length>4){var i=tinycolor(o);if(i.isValid()){var n=i.toHsv();this.updateModel=!1,this.hue=n.h,this.saturation=100*n.s,this.lightness=100*n.v,this.options.alpha&&(this.opacity=100*n.a),this.$timeout(function(){e.updateModel=!0}),this.isValid=!0}else this.isValid=!1;this.$scope.control[0].$setValidity(this.$element.attr("name"),this.isValid)}else null!==o&&""!==o||(this.hue=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:"setupApi",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(t){o.options.inline||!o.visible&&null===o.$element[0].querySelector(".color-picker-panel").offsetParent||(o.visible=!1,o.$scope.$applyAsync(),o.eventApiDispatch("onClose",[t]))},this.api.clear=function(t){""!==o.ngModel&&(o.ngModel="",o.eventApiDispatch("onClear",[t]))},this.api.reset=function(t){o.ngModel!==o.initialNgModel&&(o.ngModel=o.initialNgModel,o.eventApiDispatch("onReset",[t]))},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(){var o=this;this.chrome=Boolean(window.chrome);var t=window.navigator.userAgent.match(/Android\s([0-9\.]*)/i);this.android_version=t&&t.length>1?parseFloat(t[1]):NaN,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","AngularColorPickerController.options.placeholder"],this.reInit.bind(this)),this.$scope.$watch("AngularColorPickerController.api",this.setupApi.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(){o.$document.off("mousedown",o.onMouseDown),o.$document.off("mouseup",o.onMouseUp),o.$document.off("mousemove",o.onMouseMove),o.$document.off("touchstart",o.onMouseDown),o.$document.off("touchend",o.onMouseUp),o.$document.off("touchmove",o.onMouseMove),o.eventApiDispatch("onDestroy")}),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.$document.on("touchstart",this.onMouseDown.bind(this)),this.$document.on("touchend",this.onMouseUp.bind(this)),this.$document.on("touchmove",this.onMouseMove.bind(this)),this.find(".color-picker-grid").on("click",this.onColorClick.bind(this)),this.find(".color-picker-grid").on("touchend",this.onColorClick.bind(this)),this.find(".color-picker-hue").on("click",this.onHueClick.bind(this)),this.find(".color-picker-hue").on("touchend",this.onHueClick.bind(this)),this.find(".color-picker-opacity").on("click",this.onOpacityClick.bind(this)),this.find(".color-picker-opacity").on("touchend",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.setupApi(),this.api.close(o),this.$scope.$apply())}},{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.hasOwnProperty("onChangeValue")||(this.onChangeValue=this.ngModel),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("onBlur",[o])}},{key:"initConfig",value:function(){this.options=this.merge(this.options,{disabled:!1,hue:!0,alpha:!0,case:"upper",format:"hsl",pos:"bottom left",swatch:!0,swatchOnly:!1,swatchPos:"left",swatchBootstrap:!0,inline:!1,placeholder:"",close:{show:!1,label:"Close",class:""},clear:{show:!1,label:"Clear",class:""},reset:{show:!1,label:"Reset",class:""}}),this.visible=this.options.inline}},{key:"merge",value:function(o,t){var i,n={};for(i in t)t.hasOwnProperty(i)&&(n[i]=t[i]);if("object"===("undefined"==typeof o?"undefined":e(o)))for(i in o)o.hasOwnProperty(i)&&("object"===e(o[i])?n[i]=this.merge(o[i],n[i]):n[i]=o[i]);return n}},{key:"focus",value:function(){this.find(".color-picker-input")[0].focus()}},{key:"update",value:function(){if(void 0===this.hue||void 0===this.saturation||void 0===this.lightness)return!1;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"),e=angular.element(o.$element[0].querySelector(".color-picker-hue .color-picker-slider")),i=t.getBoundingClientRect();e.css({top:i.height*o.huePos/100+"px"})})}},{key:"opacityPosUpdate",value:function(){var o=this;this.$timeout(function(){var t=o.$element[0].querySelector(".color-picker-opacity"),e=angular.element(o.$element[0].querySelector(".color-picker-opacity .color-picker-slider")),i=t.getBoundingClientRect();e.css({top:i.height*o.opacityPos/100+"px"})})}},{key:"lightnessPosUpdate",value:function(){var o=this;this.$timeout(function(){var t=o.$element[0].querySelector(".color-picker-grid"),e=angular.element(o.$element[0].querySelector(".color-picker-grid .color-picker-picker")),i=t.getBoundingClientRect();e.css({top:i.height*o.lightnessPos/100+"px"})})}},{key:"saturationPosUpdate",value:function(){var o=this;this.$timeout(function(){var t=o.$element[0].querySelector(".color-picker-grid"),e=angular.element(o.$element[0].querySelector(".color-picker-grid .color-picker-picker")),i=t.getBoundingClientRect();e.css({left:i.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"),e=this.offset(t);this.saturation=(o.pageX-e.left)/t.prop("offsetWidth")*100,this.lightness=100*(1-(o.pageY-e.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,e=this.wrapper?this.wrapper[0]:this.$element[0],i=[];if(!o)return i;if("string"==typeof o){if(1!==(t=e.nodeType)&&9!==t)return[];i=e.querySelectorAll(o)}else e.contains(o)&&i.push(o);return angular.element(i)}},{key:"offset",value:function(o){var t,e,i,n,s=o[0];if(s)return s.getClientRects().length?(i=s.getBoundingClientRect(),i.width||i.height?(n=s.ownerDocument,e=null!==n&&n===n.window?n:9===n.nodeType&&n.defaultView,t=n.documentElement,this.chrome&&this.android_version<6&&screen.width<=768?{top:i.top-t.clientTop,left:i.left-t.clientLeft}:{top:i.top+e.pageYOffset-t.clientTop,left:i.left+e.pageXOffset-t.clientLeft}):i):{top:0,left:0}}}]),o}();s.$inject=["$scope","$element","$document","$timeout"],t.$inject=["$templateCache"];var r=angular.module("color.picker",[]).directive("colorPicker",o).run(t);return r});

examples/app.js

@@ -10,3 +10,8 @@ angular
 
-        $scope.options = {};
+        $scope.color = 'hsl(0, 100%, 50%)';
+        $scope.options = {
+            close: {show: true},
+            clear: {show: true},
+            reset: {show: true},
+        };
         $scope.api = {};
@@ -26,2 +31,8 @@ $scope.eventApi = {
             },
+            onClear: function() {
+                console.info('clear', arguments);
+            },
+            onReset: function() {
+                console.info('reset', arguments);
+            },
             onDestroy: function() {
@@ -28,0 +39,0 @@ console.info('destroy', arguments);

package.json

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

README.md

@@ -76,2 +76,3 @@ # Angular Color Picker
     format: ['hsl', 'hsv', 'rgb', 'hex', 'hex8'],
+    hue: [true, false],
     alpha: [true, false],
@@ -86,2 +87,17 @@ swatch: [true, false],
     placeholder: '',
+    close: {
+        show: [false, true],
+        label: 'Close',
+        class: '',
+    },
+    clear: {
+        show: [false, true],
+        label: 'Clear',
+        class: '',
+    },
+    reset: {
+        show: [false, true],
+        label: 'Reset',
+        class: '',
+    },
 };
@@ -92,2 +108,4 @@
 $scope.api.close();
+$scope.api.clear();
+$scope.api.reset();
 $scope.api.getElement();
@@ -101,2 +119,4 @@
     onClose: function(api, color, $event) {},
+    onClear: function(api, color, $event) {},
+    onReset: function(api, color, $event) {},
     onDestroy: function(api, color) {},
@@ -103,0 +123,0 @@ };

src/scripts/controller.js

@@ -22,2 +22,19 @@ export default class AngularColorPickerController {
 
+        if (newValue !== undefined && oldValue !== undefined && !this.hasOwnProperty('initialNgModel')) {
+            this.initialNgModel = newValue;
+        }
+
+        // check dirty/pristine state
+        if (this.hasOwnProperty('initialNgModel')) {
+            if (newValue === this.initialNgModel) {
+                if (typeof this.$scope.control[0].$setPristine === 'function') {
+                    this.$scope.control[0].$setPristine();
+                }
+            } else {
+                if (typeof this.$scope.control[0].$setDirty === 'function') {
+                    this.$scope.control[0].$setDirty();
+                }
+            }
+        }
+
         if (newValue !== undefined && newValue !== null && newValue.length > 4) {
@@ -49,6 +66,2 @@ var color = tinycolor(newValue);
             this.$scope.control[0].$setValidity(this.$element.attr('name'), this.isValid);
-
-            if (newValue !== oldValue && oldValue !== undefined && typeof this.$scope.control[0].$setDirty === 'function') {
-                this.$scope.control[0].$setDirty();
-            }
         } else {
@@ -105,3 +118,3 @@ if (newValue === null || newValue === '') {
                 this.visible = false;
-                this.$scope.$apply();
+                this.$scope.$applyAsync();
 
@@ -112,2 +125,18 @@ this.eventApiDispatch('onClose', [event]);
 
+        this.api.clear = (event) => {
+            if (this.ngModel !== '') {
+                this.ngModel = '';
+
+                this.eventApiDispatch('onClear', [event]);
+            }
+        };
+
+        this.api.reset = (event) => {
+            if (this.ngModel !== this.initialNgModel) {
+                this.ngModel = this.initialNgModel;
+
+                this.eventApiDispatch('onReset', [event]);
+            }
+        };
+
         this.api.getElement = () => {
@@ -199,2 +228,6 @@ return this.$element;
 
+            this.$document.off('touchstart', this.onMouseDown);
+            this.$document.off('touchend', this.onMouseUp);
+            this.$document.off('touchmove', this.onMouseMove);
+
             this.eventApiDispatch('onDestroy');
@@ -211,5 +244,18 @@ });
 
+        // setup touch events
+        this.$document.on('touchstart', this.onMouseDown.bind(this));
+        this.$document.on('touchend', this.onMouseUp.bind(this));
+        this.$document.on('touchmove', this.onMouseMove.bind(this));
+
+        // grid click
         this.find('.color-picker-grid').on('click', this.onColorClick.bind(this));
+        this.find('.color-picker-grid').on('touchend', this.onColorClick.bind(this));
+
+        // hue click
         this.find('.color-picker-hue').on('click', this.onHueClick.bind(this));
+        this.find('.color-picker-hue').on('touchend', this.onHueClick.bind(this));
+
+        // opacity click
         this.find('.color-picker-opacity').on('click', this.onOpacityClick.bind(this));
+        this.find('.color-picker-opacity').on('touchend', this.onOpacityClick.bind(this));
     }
@@ -241,2 +287,3 @@
             this.api.close(event);
+            this.$scope.$apply();
         // mouse event on color grid
@@ -324,19 +371,58 @@ } else if (this.colorMouse) {
     initConfig () {
-        if (!this.options) {
-            this.options = {};
+        this.options = this.merge(this.options, {
+            disabled: false,
+            hue: true,
+            alpha: true,
+            case: 'upper',
+            format: 'hsl',
+            pos: 'bottom left',
+            swatch: true,
+            swatchOnly: false,
+            swatchPos: 'left',
+            swatchBootstrap: true,
+            inline: false,
+            placeholder: '',
+            close: {
+                show: false,
+                label: 'Close',
+                class: '',
+            },
+            clear: {
+                show: false,
+                label: 'Clear',
+                class: '',
+            },
+            reset: {
+                show: false,
+                label: 'Reset',
+                class: '',
+            },
+        });
+
+        this.visible = this.options.inline;
+    }
+
+    merge(options, defaultOptions) {
+        var newObject = {};
+        var attr;
+
+        for (attr in defaultOptions) {
+            if (defaultOptions.hasOwnProperty(attr)) {
+                newObject[attr] = defaultOptions[attr];
+            }
         }
 
-        this.options.disabled = this.options.disabled === undefined ? false : this.options.disabled;
-        this.options.alpha = this.options.alpha === undefined ? true : this.options.alpha;
-        this.options.case = this.options.case === undefined ? 'upper' : this.options.case;
-        this.options.format = this.options.format === undefined ? 'hsl' : this.options.format;
-        this.options.pos = this.options.pos === undefined ? 'bottom left' : this.options.pos;
-        this.options.swatch = this.options.swatch === undefined ? true : this.options.swatch;
-        this.options.swatchOnly = this.options.swatchOnly === undefined ? false : this.options.swatchOnly;
-        this.options.swatchPos = this.options.swatchPos === undefined ? 'left' : this.options.swatchPos;
-        this.options.swatchBootstrap = this.options.swatchBootstrap === undefined ? true : this.options.swatchBootstrap;
-        this.options.inline = this.options.inline === undefined ? false : this.options.inline;
-        this.options.placeholder = this.options.placeholder === undefined ? '' : this.options.placeholder;
+        if (typeof options === 'object') {
+            for (attr in options) {
+                if (options.hasOwnProperty(attr)) {
+                    if (typeof options[attr] === 'object') {
+                        newObject[attr] = this.merge(options[attr], newObject[attr]);
+                    } else {
+                        newObject[attr] = options[attr];
+                    }
+                }
+            }
+        }
 
-        this.visible = this.options.inline;
+        return newObject;
     }
@@ -343,0 +429,0 @@

src/scripts/template.js

 export default 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($event)" ng-class="{\'color-picker-input-swatch\': AngularColorPickerController.options.swatch && !AngularColorPickerController.options.swatchOnly && AngularColorPickerController.options.swatchPos === \'left\'}" placeholder="{{AngularColorPickerController.options.placeholder}}">\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 class="color-picker-wrapper" ng-class="{' +
+            '\'color-picker-disabled\': AngularColorPickerController.options.disabled,' +
+            '\'color-picker-swatch-only\': AngularColorPickerController.options.swatchOnly,' +
+        '}">' +
+        '   <div class="color-picker-input-wrapper" ng-class="{\'input-group\': AngularColorPickerController.options.swatchBootstrap && AngularColorPickerController.options.swatch}">' +
+        '       <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>' +
+        '       <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\'}" placeholder="{{AngularColorPickerController.options.placeholder}}">' +
+        '       <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>' +
+        '   </div>' +
+        '   <div class="color-picker-panel" ng-show="AngularColorPickerController.visible" ng-class="{' +
+        '       \'color-picker-panel-top color-picker-panel-right\': AngularColorPickerController.options.pos === \'top right\',' +
+        '       \'color-picker-panel-top color-picker-panel-left\': AngularColorPickerController.options.pos === \'top left\',' +
+        '       \'color-picker-panel-bottom color-picker-panel-right\': AngularColorPickerController.options.pos === \'bottom right\',' +
+        '       \'color-picker-panel-bottom color-picker-panel-left\': AngularColorPickerController.options.pos === \'bottom left\',' +
+        '       \'color-picker-show-hue\': AngularColorPickerController.options.hue,' +
+        '       \'color-picker-show-alpha\': AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\',' +
+        '       \'color-picker-show-inline\': AngularColorPickerController.options.inline,' +
+        '   }">' +
+        '       <div class="color-picker-grid-wrapper">' +
+        '           <div class="color-picker-row">' +
+        '               <div class="color-picker-grid color-picker-sprite">' +
+        '                   <div class="color-picker-grid-inner"></div>' +
+        '                   <div class="color-picker-picker">' +
+        '                       <div></div>' +
+        '                   </div>' +
+        '               </div>' +
+        '               <div class="color-picker-hue color-picker-sprite" ng-show="AngularColorPickerController.options.hue">' +
+        '                   <div class="color-picker-slider"></div>' +
+        '               </div>' +
+        '               <div class="color-picker-opacity color-picker-sprite" ng-show="AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\'">' +
+        '                   <div class="color-picker-slider"></div>' +
+        '               </div>' +
+        '           </div>' +
+        '       </div>' +
+        '       <div class="color-picker-actions">' +
+        '           <button ' +
+        '               class="color-picker-action color-picker-action-clear"' +
+        '               ng-class="AngularColorPickerController.options.clear.class"' +
+        '               ng-show="AngularColorPickerController.options.clear.show"' +
+        '               ng-click="AngularColorPickerController.api.clear($event)"' +
+        '           >' +
+        '               {{AngularColorPickerController.options.clear.label}}' +
+        '           </button><!--' +
+        '           --><button ' +
+        '               class="color-picker-action color-picker-action-reset"' +
+        '               ng-class="AngularColorPickerController.options.reset.class"' +
+        '               ng-show="AngularColorPickerController.options.reset.show"' +
+        '               ng-click="AngularColorPickerController.api.reset($event)"' +
+        '           >' +
+        '               {{AngularColorPickerController.options.reset.label}}' +
+        '           </button><!--' +
+        '           --><button' +
+        '               class="color-picker-action color-picker-action-close"' +
+        '               ng-class="AngularColorPickerController.options.close.class"' +
+        '               ng-show="AngularColorPickerController.options.close.show"' +
+        '               ng-click="AngularColorPickerController.api.close($event)"' +
+        '           >' +
+        '               {{AngularColorPickerController.options.close.label}}' +
+        '           </button>' +
+        '       </div>' +
+        '   </div>' +
         '</div>'
@@ -36,0 +65,0 @@ );

No alert changes

Improved metrics

Total package byte prevSize

486679

increased by3.63%

Lines of code

2606

increased by8.86%

Number of lines in readme file

135

increased by17.39%

No dependency changes