angularjs-color-picker - npm Package Compare versions

Comparing version 3.2.1 to 3.3.0

bower.json

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

CHANGELOG.md

 # Changelog
 
+## v3.3.0
+
+#### Breaking Changes
+  * `hex` and `hex8` formats are now returning the hex value without the hash `#` character.
+
+#### New Features
+  * Now supporting values with and without the `#` for both hex and hex8 formats.
+
+#### Bug Fixes
+  * None
+
 ## v3.2.1
@@ -4,0 +15,0 @@

dist/angularjs-color-picker.js

@@ -7,3 +7,3 @@ /*!
  *
- * 2017-03-23 08:33:55
+ * 2017-05-15 02:14:55
  *
@@ -23,3 +23,3 @@ */
 } : function (obj) {
-  return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj;
+  return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
 };
@@ -31,2 +31,8 @@
 
+
+
+
+
+
+
 var classCallCheck = function (instance, Constructor) {
@@ -614,2 +620,18 @@ if (!(instance instanceof Constructor)) {
                         if (this.options.case === 'lower') {
+                            this.ngModel = color.toHex().toLowerCase();
+                        } else {
+                            this.ngModel = color.toHex().toUpperCase();
+                        }
+                        break;
+
+                    case 'hex8':
+                        if (this.options.case === 'lower') {
+                            this.ngModel = color.toHex8().toLowerCase();
+                        } else {
+                            this.ngModel = color.toHex8().toUpperCase();
+                        }
+                        break;
+
+                    case 'hexString':
+                        if (this.options.case === 'lower') {
                             this.ngModel = color.toHexString().toLowerCase();
@@ -621,3 +643,3 @@ } else {
 
-                    case 'hex8':
+                    case 'hex8String':
                         if (this.options.case === 'lower') {
@@ -624,0 +646,0 @@ this.ngModel = color.toHex8String().toLowerCase();

dist/angularjs-color-picker.min.js

@@ -7,5 +7,5 @@ /*!
  *
- * 2017-03-23 08:33:55
+ * 2017-05-15 02:14:55
  *
  */
-!function(o,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("tinycolor2")):"function"==typeof define&&define.amd?define(["tinycolor2"],t):o.AngularjsColorPicker=t(o.tinycolor)}(this,function(o){"use strict";function t(){return{restrict:"E",require:["^ngModel"],scope:{ngModel:"=",options:"=?",api:"=?",eventApi:"=?"},bindToController:!0,templateUrl:"template/color-picker/directive.html",controller:r,controllerAs:"AngularColorPickerController",link:function(o,t,i,e){o.control=e,o.init()}}}function i(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,\'color-picker-open\': AngularColorPickerController.is_open,\'color-picker-closed\': !AngularColorPickerController.is_open,}"><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.onSwatchClick($event)" 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 ng-attr-id="{{AngularColorPickerController.options.id}}" ng-attr-name="{{AngularColorPickerController.options.name}}" class="color-picker-input {{AngularColorPickerController.options.inputClass}}" type="text" ng-model="AngularColorPickerController.ngModel" ng-readonly="AngularColorPickerController.options.swatchOnly" ng-disabled="AngularColorPickerController.options.disabled" ng-change="AngularColorPickerController.onChange($event)" size="7" ng-class="{\'color-picker-input-swatch\': AngularColorPickerController.options.swatch && !AngularColorPickerController.options.swatchOnly && AngularColorPickerController.options.swatchPos === \'left\'}" placeholder="{{AngularColorPickerController.options.placeholder}}" ng-required="AngularColorPickerController.options.required"><span ng-if="AngularColorPickerController.options.swatchPos === \'right\'" class="color-picker-swatch" ng-click="AngularColorPickerController.onSwatchClick($event)" 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-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-panel-round\': AngularColorPickerController.options.round,\'color-picker-show-hue\': AngularColorPickerController.options.hue,\'color-picker-show-saturation\': AngularColorPickerController.options.saturation,\'color-picker-show-lightness\': AngularColorPickerController.options.lightness,\'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"><div class="color-picker-overlay"></div><div class="color-picker-grid-inner"></div><div class="color-picker-picker"><div></div></div></div><div class="color-picker-hue" ng-show="AngularColorPickerController.options.hue"><div class="color-picker-overlay"></div><div class="color-picker-slider"></div></div><div class="color-picker-saturation" ng-show="AngularColorPickerController.options.saturation"><div class="color-picker-overlay"></div><div class="color-picker-slider"></div></div><div class="color-picker-lightness" ng-show="AngularColorPickerController.options.lightness"><div class="color-picker-overlay"></div><div class="color-picker-slider"></div></div><div class="color-picker-opacity" ng-show="AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\'"><div class="color-picker-overlay"></div><div class="color-picker-slider"></div></div></div></div><div class="color-picker-actions"><button type="button"class="color-picker-action color-picker-action-clear"tabindex="-1"ng-class="AngularColorPickerController.options.clear.class"ng-show="AngularColorPickerController.options.clear.show"ng-click="AngularColorPickerController.api.clear($event)">{{AngularColorPickerController.options.clear.label}}</button><button type="button"class="color-picker-action color-picker-action-reset"tabindex="-1"ng-class="AngularColorPickerController.options.reset.class"ng-show="AngularColorPickerController.options.reset.show"ng-click="AngularColorPickerController.api.reset($event)">{{AngularColorPickerController.options.reset.label}}</button><button type="button"class="color-picker-action color-picker-action-close"tabindex="-1"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>')}o="default"in o?o.default:o;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},s=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 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}}(),r=function(){function t(o,i,e,n,r){s(this,t),this.$scope=o,this.$element=i,this.$document=e,this.$timeout=n,this.ColorPickerOptions=r,this.$scope.init=this.init.bind(this),this.hue=0,this.saturation=void 0,this.lightness=void 0,this.opacity=void 0,this.pickerDimensions={width:150,height:150},this.sliderDimensions={width:20,height:150}}return n(t,[{key:"watchNgModel",value:function(t,i){var e=this;if(void 0===t||void 0===i||this.hasOwnProperty("initialNgModel")||(this.initialNgModel=t),this.checkDirty(t),!this.colorMouse)if(void 0!==t&&null!==t){var s=o(t),n=this.isColorValid(s);if(n){var r;this.options.round?(r=s.toHsl(),this.lightness=100*r.l):(r=s.toHsv(),this.lightness=100*r.v),this.hue=r.h,this.saturation=100*r.s,this.updateModel=!1,this.options.alpha&&(this.opacity=100*r.a),this.$timeout(function(){e.updateModel=!0})}this.$scope.control[0].$setValidity("color",n)}else null!==t&&""!==t||(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.is_open||(o.is_open=!0,o.hueMouse=!1,o.opacityMouse=!1,o.colorMouse=!1,o.$scope.$applyAsync(),o.hueUpdate(),o.saturationUpdate(),o.lightnessUpdate(),o.opacityUpdate(),void o.eventApiDispatch("onOpen",[t]))},this.api.close=function(t){o.options.inline||!o.is_open&&null===o.$element[0].querySelector(".color-picker-panel").offsetParent||(o.is_open=!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},this.api.getScope=function(){return o.$scope}}},{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(){this.chrome=Boolean(window.chrome);var o=window.navigator.userAgent.match(/Android\s([0-9\.]*)/i);this.android_version=o&&o.length>1?parseFloat(o[1]):NaN,this.updateModel=!0,this.initWatchers(),this.initConfig(),this.initMouseEvents()}},{key:"initWatchers",value:function(){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","AngularColorPickerController.options.round","AngularColorPickerController.options.restrictToFormat","AngularColorPickerController.options.allowEmpty"],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))}},{key:"initMouseEvents",value:function(){var o=this,t={mouseDown:this.onMouseDown.bind(this),mouseUp:this.onMouseUp.bind(this),mouseMove:this.onMouseMove.bind(this),keyUp:this.onKeyUp.bind(this)};this.$document.on("mousedown",t.mouseDown),this.$document.on("mouseup",t.mouseUp),this.$document.on("mousemove",t.mouseMove),this.$document.on("touchstart",t.mouseDown),this.$document.on("touchend",t.mouseUp),this.$document.on("touchmove",t.mouseMove),this.$document.on("keyup",t.keyUp),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-saturation").on("click",this.onSaturationClick.bind(this)),this.find(".color-picker-saturation").on("touchend",this.onSaturationClick.bind(this)),this.find(".color-picker-lightness").on("click",this.onLightnessClick.bind(this)),this.find(".color-picker-lightness").on("touchend",this.onLightnessClick.bind(this)),this.find(".color-picker-opacity").on("click",this.onOpacityClick.bind(this)),this.find(".color-picker-opacity").on("touchend",this.onOpacityClick.bind(this)),this.find(".color-picker-input").on("focusin",this.onFocus.bind(this)),this.find(".color-picker-input").on("focusout",this.onBlur.bind(this)),this.$scope.$on("$destroy",function(){o.$document.off("mousedown",t.mouseDown),o.$document.off("mouseup",t.mouseUp),o.$document.off("mousemove",t.mouseMove),o.$document.off("touchstart",t.mouseDown),o.$document.off("touchend",t.mouseUp),o.$document.off("touchmove",t.mouseMove),o.$document.off("keyup",t.keyUp),o.eventApiDispatch("onDestroy")})}},{key:"onMouseDown",value:function(o){return this.has_moused_moved=!1,!(!this.options.disabled&&0!==this.find(o.target).length)||void(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-saturation")||o.target.parentNode.classList.contains("color-picker-saturation")?(this.saturationDown(o),this.$scope.$apply()):o.target.classList.contains("color-picker-lightness")||o.target.parentNode.classList.contains("color-picker-lightness")?(this.lightnessDown(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.has_moused_moved?(this.colorUp(o),this.$scope.$apply(),this.onChange(o)):this.hueMouse&&this.has_moused_moved?(this.hueUp(o),this.$scope.$apply(),this.onChange(o)):this.saturationMouse&&this.has_moused_moved?(this.saturationUp(o),this.$scope.$apply(),this.onChange(o)):this.lightnessMouse&&this.has_moused_moved?(this.lightnessUp(o),this.$scope.$apply(),this.onChange(o)):this.opacityMouse&&this.has_moused_moved&&(this.opacityUp(o),this.$scope.$apply(),this.onChange(o)):(this.setupApi(),this.options.hide.click&&this.api.close(o),this.$scope.$apply())}},{key:"onMouseMove",value:function(o){this.colorMouse?(this.has_moused_moved=!0,this.colorChange(o),this.$scope.$apply()):this.hueMouse?(this.has_moused_moved=!0,this.hueChange(o),this.$scope.$apply()):this.saturationMouse?(this.has_moused_moved=!0,this.saturationChange(o),this.$scope.$apply()):this.lightnessMouse?(this.has_moused_moved=!0,this.lightnessChange(o),this.$scope.$apply()):this.opacityMouse&&(this.has_moused_moved=!0,this.opacityChange(o),this.$scope.$apply())}},{key:"onKeyUp",value:function(o){this.options.hide.escape&&27===o.keyCode&&this.api.close(o)}},{key:"onColorClick",value:function(o){this.options.disabled||this.has_moused_moved||(this.colorChange(o),this.colorUp(o),this.$scope.$apply(),this.onChange(o))}},{key:"onHueClick",value:function(o){this.options.disabled||this.has_moused_moved||(this.hueChange(o),this.hueUp(o),this.$scope.$apply(),this.onChange(o))}},{key:"onSaturationClick",value:function(o){this.options.disabled||this.has_moused_moved||(this.saturationChange(o),this.saturationUp(o),this.$scope.$apply(),this.onChange(o))}},{key:"onLightnessClick",value:function(o){this.options.disabled||this.has_moused_moved||(this.lightnessChange(o),this.lightnessUp(o),this.$scope.$apply(),this.onChange(o))}},{key:"onOpacityClick",value:function(o){this.options.disabled||this.has_moused_moved||(this.opacityChange(o),this.opacityUp(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.$scope.control[0].$setTouched(),this.eventApiDispatch("onBlur",[o]),this.options.hide.blur&&0===this.find(o.relatedTarget).length&&this.api.close(o)}},{key:"initConfig",value:function(){this.options||(this.options={}),this.mergeOptions(this.options,this.ColorPickerOptions),this.is_open=this.options.inline,this.options.inline&&(this.options.close.show=!1)}},{key:"mergeOptions",value:function(o,t){for(var i in t)t.hasOwnProperty(i)&&(o&&o.hasOwnProperty(i)?"object"===e(t[i])&&this.mergeOptions(o[i],t[i]):o[i]=t[i])}},{key:"onSwatchClick",value:function(o){this.options.show.swatch&&this.api.open(o)}},{key:"onFocus",value:function(o){this.options.show.focus&&this.api.open(o)}},{key:"update",value:function(){if(void 0===this.hue||void 0===this.saturation||void 0===this.lightness)return!1;var t;if(t=o(this.options.round?{h:this.hue,s:this.saturation+"%",l:this.lightness+"%"}:{h:this.hue,s:this.saturation+"%",v:this.lightness+"%"}),this.options.alpha&&t.setAlpha(this.opacity/100),this.swatchColor=t.toHslString(),this.updateGridBackground(t),this.updateHueBackground(t),this.updateSaturationBackground(t),this.updateLightnessBackground(t),this.updateAlphaBackground(t),this.updateModel)switch(this.options.format){case"rgb":this.ngModel=t.toRgbString();break;case"hex":"lower"===this.options.case?this.ngModel=t.toHexString().toLowerCase():this.ngModel=t.toHexString().toUpperCase();break;case"hex8":"lower"===this.options.case?this.ngModel=t.toHex8String().toLowerCase():this.ngModel=t.toHex8String().toUpperCase();break;case"hsv":this.ngModel=t.toHsvString();break;case"raw":this.ngModel=t.clone();break;default:this.ngModel=t.toHslString()}}},{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=angular.element(this.$element[0].querySelector(".color-picker-hue .color-picker-slider"));o.css({top:this.sliderDimensions.height*this.huePos/100+"px"})}},{key:"saturationPosUpdate",value:function(){var o;this.options.round||(o=angular.element(this.$element[0].querySelector(".color-picker-grid .color-picker-picker")),o.css({left:this.pickerDimensions.width*this.saturationPos/100+"px"})),o=angular.element(this.$element[0].querySelector(".color-picker-saturation .color-picker-slider")),o.css({top:this.sliderDimensions.height*(100-this.saturationPos)/100+"px"})}},{key:"lightnessPosUpdate",value:function(){var o;this.options.round||(o=angular.element(this.$element[0].querySelector(".color-picker-grid .color-picker-picker")),o.css({top:this.pickerDimensions.height*this.lightnessPos/100+"px"})),o=angular.element(this.$element[0].querySelector(".color-picker-lightness .color-picker-slider")),o.css({top:this.sliderDimensions.height*this.lightnessPos/100+"px"})}},{key:"opacityPosUpdate",value:function(){var o=angular.element(this.$element[0].querySelector(".color-picker-opacity .color-picker-slider"));o.css({top:this.sliderDimensions.height*this.opacityPos/100+"px"})}},{key:"hueDown",value:function(o){this.stopEvent(o),this.hueMouse=!0}},{key:"hueUp",value:function(o){this.stopEvent(o),this.hueMouse=!1}},{key:"hueChange",value:function(o){this.stopEvent(o);var t=this.find(".color-picker-hue"),i=this.getEventPos(o);this.hue=Math.round(360*(1-(i.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.huePos<0?this.huePos=0:this.huePos>100&&(this.huePos=100),this.options.round&&(this.getRoundPos(),this.updateRoundPos()),this.huePosUpdate(),this.update())}},{key:"saturationDown",value:function(o){this.stopEvent(o),this.saturationMouse=!0}},{key:"saturationUp",value:function(o){this.stopEvent(o),this.saturationMouse=!1}},{key:"saturationChange",value:function(o){this.stopEvent(o);var t=this.find(".color-picker-saturation"),i=this.getEventPos(o);this.saturation=Math.round(100*(1-(i.pageY-this.offset(t).top)/t.prop("offsetHeight"))),this.saturation>100?this.saturation=100:this.saturation<0&&(this.saturation=0)}},{key:"saturationUpdate",value:function(){void 0!==this.saturation&&(this.options.round&&(this.getRoundPos(),this.updateRoundPos()),this.saturationPos=this.saturation,this.saturationPos<0?this.saturationPos=0:this.saturationPos>100&&(this.saturationPos=100),this.saturationPosUpdate(),this.update())}},{key:"updateGridBackground",value:function(t){var i=this.find(".color-picker-grid .color-picker-overlay");if(this.options.round){var e=o({h:this.hue,s:0,l:this.lightness});i.css({"background-color":e.toRgbString()})}else{var s=o({h:this.hue,s:1,v:1,a:1});i.css({"background-color":s.toRgbString()})}i.css({opacity:t.getAlpha()}),this.find(".color-picker-grid .color-picker-grid-inner").css({opacity:t.getAlpha()})}},{key:"updateHueBackground",value:function(t){var i=this.find(".color-picker-hue .color-picker-overlay"),e=this.getCurrentColorValue(),s=this.getCurrentColorValue(),n=this.getCurrentColorValue(),r=this.getCurrentColorValue(),l=this.getCurrentColorValue(),a=this.getCurrentColorValue(),h=this.getCurrentColorValue();e.h=0,s.h=60,n.h=120,r.h=180,l.h=240,a.h=300,h.h=359,i.css({background:"linear-gradient(to top, "+o(e).toRgbString()+" 0%, "+o(s).toRgbString()+" 17%, "+o(n).toRgbString()+" 33%, "+o(r).toRgbString()+" 50%, "+o(l).toRgbString()+" 67%, "+o(a).toRgbString()+" 83%, "+o(h).toRgbString()+" 100%)"})}},{key:"updateSaturationBackground",value:function(t){var i=this.find(".color-picker-saturation .color-picker-overlay"),e=this.getCurrentColorValue(),s=this.getCurrentColorValue();e.s=100,s.s=0,i.css({background:"linear-gradient(to bottom, "+o(e).toRgbString()+" 0%, "+o(s).toRgbString()+" 100%)"})}},{key:"updateLightnessBackground",value:function(t){var i=this.find(".color-picker-lightness .color-picker-overlay"),e=this.getCurrentColorValue(),s=this.getCurrentColorValue(),n=this.getCurrentColorValue();this.options.round?(e.l=100,s.l=50,n.l=0):(e.v=100,s.v=50,n.v=0),i.css({background:"linear-gradient(to bottom, "+o(e).toRgbString()+" 0%, "+o(s).toRgbString()+" 50%, "+o(n).toRgbString()+" 100%)"})}},{key:"updateAlphaBackground",value:function(t){var i=this.find(".color-picker-opacity .color-picker-overlay"),e=this.getCurrentColorValue(),s=this.getCurrentColorValue();e.a=1,s.a=0,i.css({background:"linear-gradient(to bottom, "+o(e).toRgbString()+" 0%, "+o(s).toRgbString()+" 100%)"})}},{key:"lightnessDown",value:function(o){this.stopEvent(o),this.lightnessMouse=!0}},{key:"lightnessUp",value:function(o){this.stopEvent(o),this.lightnessMouse=!1}},{key:"lightnessChange",value:function(o){this.stopEvent(o);var t=this.find(".color-picker-lightness"),i=this.getEventPos(o);this.lightness=Math.round(100*(1-(i.pageY-this.offset(t).top)/t.prop("offsetHeight"))),this.lightness>100?this.lightness=100:this.lightness<0&&(this.lightness=0)}},{key:"lightnessUpdate",value:function(){void 0!==this.lightness&&(this.lightnessPos=100-this.lightness,this.lightnessPos<0?this.lightnessPos=0:this.lightnessPos>100&&(this.lightnessPos=100),this.lightnessPosUpdate(),this.update())}},{key:"opacityDown",value:function(o){this.stopEvent(o),this.opacityMouse=!0}},{key:"opacityUp",value:function(o){this.stopEvent(o),this.opacityMouse=!1}},{key:"opacityChange",value:function(o){this.stopEvent(o);var t=this.find(".color-picker-opacity"),i=this.getEventPos(o);this.opacity=100*(1-(i.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){this.stopEvent(o),this.colorMouse=!0}},{key:"colorUp",value:function(o){this.stopEvent(o),this.colorMouse=!1}},{key:"colorChange",value:function(o){this.stopEvent(o);var t=this.find(".color-picker-grid-inner"),i=this.getEventPos(o),e=this.offset(t);if(this.options.round){var s=2*(i.pageX-e.left)/t.prop("offsetWidth")-1,n=-(2*(i.pageY-e.top)/t.prop("offsetHeight"))+1,r=Math.atan2(n,s),l=Math.round(57.29577951308233*r);l<0&&(l+=360),this.hue=l;var a=Math.sqrt(s*s+n*n);a>1?a=1:a<0&&(a=0),this.saturation=100*a,void 0===this.lightness&&(this.lightness=50)}else this.saturation=(i.pageX-e.left)/t.prop("offsetWidth")*100,this.lightness=100*(1-(i.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:"isColorValid",value:function(o){var t=o.isValid();if(t&&this.options.restrictToFormat&&(t=o.getFormat()===this.options.format),!t&&this.options.allowEmpty){var i=o.getOriginalInput();void 0!==i&&null!==i&&""!==i||(t=!0)}return t}},{key:"getCurrentColorValue",value:function(){return this.options.round?{h:this.hue,s:this.saturation,l:this.lightness}:{h:this.hue,s:this.saturation,v:this.lightness}}},{key:"checkDirty",value:function(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())}},{key:"stopEvent",value:function(o){o.stopPropagation(),o.preventDefault()}},{key:"getRoundPos",value:function(){var o=.01745329251994*this.hue,t=Math.cos(o)*this.saturation,i=-Math.sin(o)*this.saturation;this.xPos=.5*(t+100),this.yPos=.5*(i+100);var e=50,s=Math.pow(e-this.xPos,2)+Math.pow(e-this.yPos,2),n=Math.pow(e,2);if(s>n){var r=Math.atan2(this.yPos-e,this.xPos-e);this.xPos=Math.cos(r)*e+e,this.yPos=Math.sin(r)*e+e}}},{key:"updateRoundPos",value:function(){var o=angular.element(this.$element[0].querySelector(".color-picker-grid .color-picker-picker"));o.css({left:this.pickerDimensions.width*this.xPos/100+"px",top:this.pickerDimensions.height*this.yPos/100+"px"})}},{key:"getEventPos",value:function(o){if(0===o.type.search("touch")){if(o.originalEvent&&o.originalEvent.changedTouches)return o.originalEvent.changedTouches[0];if(o.changedTouches)return o.changedTouches[0]}return o}},{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}}}]),t}();r.$inject=["$scope","$element","$document","$timeout","ColorPickerOptions"],i.$inject=["$templateCache"];var l=function o(){return s(this,o),{id:void 0,name:void 0,required:!1,disabled:!1,placeholder:"",inputClass:"",restrictToFormat:!1,allowEmpty:!1,format:"hsl",case:"upper",hue:!0,saturation:!1,lightness:!1,alpha:!0,round:!1,pos:"bottom left",inline:!1,swatch:!0,swatchOnly:!1,swatchPos:"left",swatchBootstrap:!0,show:{swatch:!0,focus:!0},hide:{blur:!0,escape:!0,click:!0},close:{show:!1,label:"Close",class:""},clear:{show:!1,label:"Clear",class:""},reset:{show:!1,label:"Reset",class:""}}},a=angular.module("color.picker",[]).service("ColorPickerOptions",l).directive("colorPicker",t).run(i);return a});
+!function(o,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("tinycolor2")):"function"==typeof define&&define.amd?define(["tinycolor2"],t):o.AngularjsColorPicker=t(o.tinycolor)}(this,function(o){"use strict";function t(){return{restrict:"E",require:["^ngModel"],scope:{ngModel:"=",options:"=?",api:"=?",eventApi:"=?"},bindToController:!0,templateUrl:"template/color-picker/directive.html",controller:r,controllerAs:"AngularColorPickerController",link:function(o,t,i,e){o.control=e,o.init()}}}function i(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,\'color-picker-open\': AngularColorPickerController.is_open,\'color-picker-closed\': !AngularColorPickerController.is_open,}"><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.onSwatchClick($event)" 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 ng-attr-id="{{AngularColorPickerController.options.id}}" ng-attr-name="{{AngularColorPickerController.options.name}}" class="color-picker-input {{AngularColorPickerController.options.inputClass}}" type="text" ng-model="AngularColorPickerController.ngModel" ng-readonly="AngularColorPickerController.options.swatchOnly" ng-disabled="AngularColorPickerController.options.disabled" ng-change="AngularColorPickerController.onChange($event)" size="7" ng-class="{\'color-picker-input-swatch\': AngularColorPickerController.options.swatch && !AngularColorPickerController.options.swatchOnly && AngularColorPickerController.options.swatchPos === \'left\'}" placeholder="{{AngularColorPickerController.options.placeholder}}" ng-required="AngularColorPickerController.options.required"><span ng-if="AngularColorPickerController.options.swatchPos === \'right\'" class="color-picker-swatch" ng-click="AngularColorPickerController.onSwatchClick($event)" 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-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-panel-round\': AngularColorPickerController.options.round,\'color-picker-show-hue\': AngularColorPickerController.options.hue,\'color-picker-show-saturation\': AngularColorPickerController.options.saturation,\'color-picker-show-lightness\': AngularColorPickerController.options.lightness,\'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"><div class="color-picker-overlay"></div><div class="color-picker-grid-inner"></div><div class="color-picker-picker"><div></div></div></div><div class="color-picker-hue" ng-show="AngularColorPickerController.options.hue"><div class="color-picker-overlay"></div><div class="color-picker-slider"></div></div><div class="color-picker-saturation" ng-show="AngularColorPickerController.options.saturation"><div class="color-picker-overlay"></div><div class="color-picker-slider"></div></div><div class="color-picker-lightness" ng-show="AngularColorPickerController.options.lightness"><div class="color-picker-overlay"></div><div class="color-picker-slider"></div></div><div class="color-picker-opacity" ng-show="AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\'"><div class="color-picker-overlay"></div><div class="color-picker-slider"></div></div></div></div><div class="color-picker-actions"><button type="button"class="color-picker-action color-picker-action-clear"tabindex="-1"ng-class="AngularColorPickerController.options.clear.class"ng-show="AngularColorPickerController.options.clear.show"ng-click="AngularColorPickerController.api.clear($event)">{{AngularColorPickerController.options.clear.label}}</button><button type="button"class="color-picker-action color-picker-action-reset"tabindex="-1"ng-class="AngularColorPickerController.options.reset.class"ng-show="AngularColorPickerController.options.reset.show"ng-click="AngularColorPickerController.api.reset($event)">{{AngularColorPickerController.options.reset.label}}</button><button type="button"class="color-picker-action color-picker-action-close"tabindex="-1"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>')}o="default"in o?o.default:o;var e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},s=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 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}}(),r=function(){function t(o,i,e,n,r){s(this,t),this.$scope=o,this.$element=i,this.$document=e,this.$timeout=n,this.ColorPickerOptions=r,this.$scope.init=this.init.bind(this),this.hue=0,this.saturation=void 0,this.lightness=void 0,this.opacity=void 0,this.pickerDimensions={width:150,height:150},this.sliderDimensions={width:20,height:150}}return n(t,[{key:"watchNgModel",value:function(t,i){var e=this;if(void 0===t||void 0===i||this.hasOwnProperty("initialNgModel")||(this.initialNgModel=t),this.checkDirty(t),!this.colorMouse)if(void 0!==t&&null!==t){var s=o(t),n=this.isColorValid(s);if(n){var r;this.options.round?(r=s.toHsl(),this.lightness=100*r.l):(r=s.toHsv(),this.lightness=100*r.v),this.hue=r.h,this.saturation=100*r.s,this.updateModel=!1,this.options.alpha&&(this.opacity=100*r.a),this.$timeout(function(){e.updateModel=!0})}this.$scope.control[0].$setValidity("color",n)}else null!==t&&""!==t||(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){if(o.is_open)return!0;o.is_open=!0,o.hueMouse=!1,o.opacityMouse=!1,o.colorMouse=!1,o.$scope.$applyAsync(),o.hueUpdate(),o.saturationUpdate(),o.lightnessUpdate(),o.opacityUpdate(),o.eventApiDispatch("onOpen",[t])},this.api.close=function(t){o.options.inline||!o.is_open&&null===o.$element[0].querySelector(".color-picker-panel").offsetParent||(o.is_open=!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},this.api.getScope=function(){return o.$scope}}},{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(){this.chrome=Boolean(window.chrome);var o=window.navigator.userAgent.match(/Android\s([0-9\.]*)/i);this.android_version=o&&o.length>1?parseFloat(o[1]):NaN,this.updateModel=!0,this.initWatchers(),this.initConfig(),this.initMouseEvents()}},{key:"initWatchers",value:function(){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","AngularColorPickerController.options.round","AngularColorPickerController.options.restrictToFormat","AngularColorPickerController.options.allowEmpty"],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))}},{key:"initMouseEvents",value:function(){var o=this,t={mouseDown:this.onMouseDown.bind(this),mouseUp:this.onMouseUp.bind(this),mouseMove:this.onMouseMove.bind(this),keyUp:this.onKeyUp.bind(this)};this.$document.on("mousedown",t.mouseDown),this.$document.on("mouseup",t.mouseUp),this.$document.on("mousemove",t.mouseMove),this.$document.on("touchstart",t.mouseDown),this.$document.on("touchend",t.mouseUp),this.$document.on("touchmove",t.mouseMove),this.$document.on("keyup",t.keyUp),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-saturation").on("click",this.onSaturationClick.bind(this)),this.find(".color-picker-saturation").on("touchend",this.onSaturationClick.bind(this)),this.find(".color-picker-lightness").on("click",this.onLightnessClick.bind(this)),this.find(".color-picker-lightness").on("touchend",this.onLightnessClick.bind(this)),this.find(".color-picker-opacity").on("click",this.onOpacityClick.bind(this)),this.find(".color-picker-opacity").on("touchend",this.onOpacityClick.bind(this)),this.find(".color-picker-input").on("focusin",this.onFocus.bind(this)),this.find(".color-picker-input").on("focusout",this.onBlur.bind(this)),this.$scope.$on("$destroy",function(){o.$document.off("mousedown",t.mouseDown),o.$document.off("mouseup",t.mouseUp),o.$document.off("mousemove",t.mouseMove),o.$document.off("touchstart",t.mouseDown),o.$document.off("touchend",t.mouseUp),o.$document.off("touchmove",t.mouseMove),o.$document.off("keyup",t.keyUp),o.eventApiDispatch("onDestroy")})}},{key:"onMouseDown",value:function(o){if(this.has_moused_moved=!1,this.options.disabled||0===this.find(o.target).length)return!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-saturation")||o.target.parentNode.classList.contains("color-picker-saturation")?(this.saturationDown(o),this.$scope.$apply()):o.target.classList.contains("color-picker-lightness")||o.target.parentNode.classList.contains("color-picker-lightness")?(this.lightnessDown(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.has_moused_moved?(this.colorUp(o),this.$scope.$apply(),this.onChange(o)):this.hueMouse&&this.has_moused_moved?(this.hueUp(o),this.$scope.$apply(),this.onChange(o)):this.saturationMouse&&this.has_moused_moved?(this.saturationUp(o),this.$scope.$apply(),this.onChange(o)):this.lightnessMouse&&this.has_moused_moved?(this.lightnessUp(o),this.$scope.$apply(),this.onChange(o)):this.opacityMouse&&this.has_moused_moved&&(this.opacityUp(o),this.$scope.$apply(),this.onChange(o)):(this.setupApi(),this.options.hide.click&&this.api.close(o),this.$scope.$apply())}},{key:"onMouseMove",value:function(o){this.colorMouse?(this.has_moused_moved=!0,this.colorChange(o),this.$scope.$apply()):this.hueMouse?(this.has_moused_moved=!0,this.hueChange(o),this.$scope.$apply()):this.saturationMouse?(this.has_moused_moved=!0,this.saturationChange(o),this.$scope.$apply()):this.lightnessMouse?(this.has_moused_moved=!0,this.lightnessChange(o),this.$scope.$apply()):this.opacityMouse&&(this.has_moused_moved=!0,this.opacityChange(o),this.$scope.$apply())}},{key:"onKeyUp",value:function(o){this.options.hide.escape&&27===o.keyCode&&this.api.close(o)}},{key:"onColorClick",value:function(o){this.options.disabled||this.has_moused_moved||(this.colorChange(o),this.colorUp(o),this.$scope.$apply(),this.onChange(o))}},{key:"onHueClick",value:function(o){this.options.disabled||this.has_moused_moved||(this.hueChange(o),this.hueUp(o),this.$scope.$apply(),this.onChange(o))}},{key:"onSaturationClick",value:function(o){this.options.disabled||this.has_moused_moved||(this.saturationChange(o),this.saturationUp(o),this.$scope.$apply(),this.onChange(o))}},{key:"onLightnessClick",value:function(o){this.options.disabled||this.has_moused_moved||(this.lightnessChange(o),this.lightnessUp(o),this.$scope.$apply(),this.onChange(o))}},{key:"onOpacityClick",value:function(o){this.options.disabled||this.has_moused_moved||(this.opacityChange(o),this.opacityUp(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.$scope.control[0].$setTouched(),this.eventApiDispatch("onBlur",[o]),this.options.hide.blur&&0===this.find(o.relatedTarget).length&&this.api.close(o)}},{key:"initConfig",value:function(){this.options||(this.options={}),this.mergeOptions(this.options,this.ColorPickerOptions),this.is_open=this.options.inline,this.options.inline&&(this.options.close.show=!1)}},{key:"mergeOptions",value:function(o,t){for(var i in t)t.hasOwnProperty(i)&&(o&&o.hasOwnProperty(i)?"object"===e(t[i])&&this.mergeOptions(o[i],t[i]):o[i]=t[i])}},{key:"onSwatchClick",value:function(o){this.options.show.swatch&&this.api.open(o)}},{key:"onFocus",value:function(o){this.options.show.focus&&this.api.open(o)}},{key:"update",value:function(){if(void 0===this.hue||void 0===this.saturation||void 0===this.lightness)return!1;var t;if(t=o(this.options.round?{h:this.hue,s:this.saturation+"%",l:this.lightness+"%"}:{h:this.hue,s:this.saturation+"%",v:this.lightness+"%"}),this.options.alpha&&t.setAlpha(this.opacity/100),this.swatchColor=t.toHslString(),this.updateGridBackground(t),this.updateHueBackground(t),this.updateSaturationBackground(t),this.updateLightnessBackground(t),this.updateAlphaBackground(t),this.updateModel)switch(this.options.format){case"rgb":this.ngModel=t.toRgbString();break;case"hex":"lower"===this.options.case?this.ngModel=t.toHex().toLowerCase():this.ngModel=t.toHex().toUpperCase();break;case"hex8":"lower"===this.options.case?this.ngModel=t.toHex8().toLowerCase():this.ngModel=t.toHex8().toUpperCase();break;case"hexString":"lower"===this.options.case?this.ngModel=t.toHexString().toLowerCase():this.ngModel=t.toHexString().toUpperCase();break;case"hex8String":"lower"===this.options.case?this.ngModel=t.toHex8String().toLowerCase():this.ngModel=t.toHex8String().toUpperCase();break;case"hsv":this.ngModel=t.toHsvString();break;case"raw":this.ngModel=t.clone();break;default:this.ngModel=t.toHslString()}}},{key:"updateSwatchBackground",value:function(){angular.element(this.$element[0].querySelector(".color-picker-swatch")).css({"background-color":this.swatchColor})}},{key:"huePosUpdate",value:function(){angular.element(this.$element[0].querySelector(".color-picker-hue .color-picker-slider")).css({top:this.sliderDimensions.height*this.huePos/100+"px"})}},{key:"saturationPosUpdate",value:function(){var o;this.options.round||(o=angular.element(this.$element[0].querySelector(".color-picker-grid .color-picker-picker")),o.css({left:this.pickerDimensions.width*this.saturationPos/100+"px"})),o=angular.element(this.$element[0].querySelector(".color-picker-saturation .color-picker-slider")),o.css({top:this.sliderDimensions.height*(100-this.saturationPos)/100+"px"})}},{key:"lightnessPosUpdate",value:function(){var o;this.options.round||(o=angular.element(this.$element[0].querySelector(".color-picker-grid .color-picker-picker")),o.css({top:this.pickerDimensions.height*this.lightnessPos/100+"px"})),o=angular.element(this.$element[0].querySelector(".color-picker-lightness .color-picker-slider")),o.css({top:this.sliderDimensions.height*this.lightnessPos/100+"px"})}},{key:"opacityPosUpdate",value:function(){angular.element(this.$element[0].querySelector(".color-picker-opacity .color-picker-slider")).css({top:this.sliderDimensions.height*this.opacityPos/100+"px"})}},{key:"hueDown",value:function(o){this.stopEvent(o),this.hueMouse=!0}},{key:"hueUp",value:function(o){this.stopEvent(o),this.hueMouse=!1}},{key:"hueChange",value:function(o){this.stopEvent(o);var t=this.find(".color-picker-hue"),i=this.getEventPos(o);this.hue=Math.round(360*(1-(i.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.huePos<0?this.huePos=0:this.huePos>100&&(this.huePos=100),this.options.round&&(this.getRoundPos(),this.updateRoundPos()),this.huePosUpdate(),this.update())}},{key:"saturationDown",value:function(o){this.stopEvent(o),this.saturationMouse=!0}},{key:"saturationUp",value:function(o){this.stopEvent(o),this.saturationMouse=!1}},{key:"saturationChange",value:function(o){this.stopEvent(o);var t=this.find(".color-picker-saturation"),i=this.getEventPos(o);this.saturation=Math.round(100*(1-(i.pageY-this.offset(t).top)/t.prop("offsetHeight"))),this.saturation>100?this.saturation=100:this.saturation<0&&(this.saturation=0)}},{key:"saturationUpdate",value:function(){void 0!==this.saturation&&(this.options.round&&(this.getRoundPos(),this.updateRoundPos()),this.saturationPos=this.saturation,this.saturationPos<0?this.saturationPos=0:this.saturationPos>100&&(this.saturationPos=100),this.saturationPosUpdate(),this.update())}},{key:"updateGridBackground",value:function(t){var i=this.find(".color-picker-grid .color-picker-overlay");if(this.options.round){var e=o({h:this.hue,s:0,l:this.lightness});i.css({"background-color":e.toRgbString()})}else{var s=o({h:this.hue,s:1,v:1,a:1});i.css({"background-color":s.toRgbString()})}i.css({opacity:t.getAlpha()}),this.find(".color-picker-grid .color-picker-grid-inner").css({opacity:t.getAlpha()})}},{key:"updateHueBackground",value:function(t){var i=this.find(".color-picker-hue .color-picker-overlay"),e=this.getCurrentColorValue(),s=this.getCurrentColorValue(),n=this.getCurrentColorValue(),r=this.getCurrentColorValue(),l=this.getCurrentColorValue(),a=this.getCurrentColorValue(),h=this.getCurrentColorValue();e.h=0,s.h=60,n.h=120,r.h=180,l.h=240,a.h=300,h.h=359,i.css({background:"linear-gradient(to top, "+o(e).toRgbString()+" 0%, "+o(s).toRgbString()+" 17%, "+o(n).toRgbString()+" 33%, "+o(r).toRgbString()+" 50%, "+o(l).toRgbString()+" 67%, "+o(a).toRgbString()+" 83%, "+o(h).toRgbString()+" 100%)"})}},{key:"updateSaturationBackground",value:function(t){var i=this.find(".color-picker-saturation .color-picker-overlay"),e=this.getCurrentColorValue(),s=this.getCurrentColorValue();e.s=100,s.s=0,i.css({background:"linear-gradient(to bottom, "+o(e).toRgbString()+" 0%, "+o(s).toRgbString()+" 100%)"})}},{key:"updateLightnessBackground",value:function(t){var i=this.find(".color-picker-lightness .color-picker-overlay"),e=this.getCurrentColorValue(),s=this.getCurrentColorValue(),n=this.getCurrentColorValue();this.options.round?(e.l=100,s.l=50,n.l=0):(e.v=100,s.v=50,n.v=0),i.css({background:"linear-gradient(to bottom, "+o(e).toRgbString()+" 0%, "+o(s).toRgbString()+" 50%, "+o(n).toRgbString()+" 100%)"})}},{key:"updateAlphaBackground",value:function(t){var i=this.find(".color-picker-opacity .color-picker-overlay"),e=this.getCurrentColorValue(),s=this.getCurrentColorValue();e.a=1,s.a=0,i.css({background:"linear-gradient(to bottom, "+o(e).toRgbString()+" 0%, "+o(s).toRgbString()+" 100%)"})}},{key:"lightnessDown",value:function(o){this.stopEvent(o),this.lightnessMouse=!0}},{key:"lightnessUp",value:function(o){this.stopEvent(o),this.lightnessMouse=!1}},{key:"lightnessChange",value:function(o){this.stopEvent(o);var t=this.find(".color-picker-lightness"),i=this.getEventPos(o);this.lightness=Math.round(100*(1-(i.pageY-this.offset(t).top)/t.prop("offsetHeight"))),this.lightness>100?this.lightness=100:this.lightness<0&&(this.lightness=0)}},{key:"lightnessUpdate",value:function(){void 0!==this.lightness&&(this.lightnessPos=100-this.lightness,this.lightnessPos<0?this.lightnessPos=0:this.lightnessPos>100&&(this.lightnessPos=100),this.lightnessPosUpdate(),this.update())}},{key:"opacityDown",value:function(o){this.stopEvent(o),this.opacityMouse=!0}},{key:"opacityUp",value:function(o){this.stopEvent(o),this.opacityMouse=!1}},{key:"opacityChange",value:function(o){this.stopEvent(o);var t=this.find(".color-picker-opacity"),i=this.getEventPos(o);this.opacity=100*(1-(i.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){this.stopEvent(o),this.colorMouse=!0}},{key:"colorUp",value:function(o){this.stopEvent(o),this.colorMouse=!1}},{key:"colorChange",value:function(o){this.stopEvent(o);var t=this.find(".color-picker-grid-inner"),i=this.getEventPos(o),e=this.offset(t);if(this.options.round){var s=2*(i.pageX-e.left)/t.prop("offsetWidth")-1,n=-2*(i.pageY-e.top)/t.prop("offsetHeight")+1,r=Math.atan2(n,s),l=Math.round(57.29577951308233*r);l<0&&(l+=360),this.hue=l;var a=Math.sqrt(s*s+n*n);a>1?a=1:a<0&&(a=0),this.saturation=100*a,void 0===this.lightness&&(this.lightness=50)}else this.saturation=(i.pageX-e.left)/t.prop("offsetWidth")*100,this.lightness=100*(1-(i.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:"isColorValid",value:function(o){var t=o.isValid();if(t&&this.options.restrictToFormat&&(t=o.getFormat()===this.options.format),!t&&this.options.allowEmpty){var i=o.getOriginalInput();void 0!==i&&null!==i&&""!==i||(t=!0)}return t}},{key:"getCurrentColorValue",value:function(){return this.options.round?{h:this.hue,s:this.saturation,l:this.lightness}:{h:this.hue,s:this.saturation,v:this.lightness}}},{key:"checkDirty",value:function(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())}},{key:"stopEvent",value:function(o){o.stopPropagation(),o.preventDefault()}},{key:"getRoundPos",value:function(){var o=.01745329251994*this.hue,t=Math.cos(o)*this.saturation,i=-Math.sin(o)*this.saturation;this.xPos=.5*(t+100),this.yPos=.5*(i+100);if(Math.pow(50-this.xPos,2)+Math.pow(50-this.yPos,2)>Math.pow(50,2)){var e=Math.atan2(this.yPos-50,this.xPos-50);this.xPos=50*Math.cos(e)+50,this.yPos=50*Math.sin(e)+50}}},{key:"updateRoundPos",value:function(){angular.element(this.$element[0].querySelector(".color-picker-grid .color-picker-picker")).css({left:this.pickerDimensions.width*this.xPos/100+"px",top:this.pickerDimensions.height*this.yPos/100+"px"})}},{key:"getEventPos",value:function(o){if(0===o.type.search("touch")){if(o.originalEvent&&o.originalEvent.changedTouches)return o.originalEvent.changedTouches[0];if(o.changedTouches)return o.changedTouches[0]}return o}},{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}}}]),t}();r.$inject=["$scope","$element","$document","$timeout","ColorPickerOptions"],i.$inject=["$templateCache"];var l=function o(){return s(this,o),{id:void 0,name:void 0,required:!1,disabled:!1,placeholder:"",inputClass:"",restrictToFormat:!1,allowEmpty:!1,format:"hsl",case:"upper",hue:!0,saturation:!1,lightness:!1,alpha:!0,round:!1,pos:"bottom left",inline:!1,swatch:!0,swatchOnly:!1,swatchPos:"left",swatchBootstrap:!0,show:{swatch:!0,focus:!0},hide:{blur:!0,escape:!0,click:!0},close:{show:!1,label:"Close",class:""},clear:{show:!1,label:"Clear",class:""},reset:{show:!1,label:"Reset",class:""}}};return angular.module("color.picker",[]).service("ColorPickerOptions",l).directive("colorPicker",t).run(i)});

package.json

 {
   "name": "angularjs-color-picker",
   "description": "Color Picker Directive For AngularJS",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "license": "MIT",
@@ -11,9 +11,4 @@ "main": "dist/angularjs-color-picker.min.js",
   },
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/ruhley/angular-color-picker.git"
-  },
-  "authors": [
-    "ruhley <[e-mail]>"
-  ],
+  "repository": "git://github.com/ruhley/angular-color-picker.git",
+  "author": "Timothy Ruhle <[e-mail]>",
   "contributors": [
@@ -20,0 +15,0 @@ "Benjamin Orozco <[e-mail]>"

README.md

@@ -88,3 +88,3 @@ # Angular Color Picker
     // color
-    format: ['hsl', 'hsv', 'rgb', 'hex', 'hex8', 'raw'],
+    format: ['hsl', 'hsv', 'rgb', 'hex', 'hexString', 'hex8', 'hex8String', 'raw'],
     hue: [true, false],
@@ -91,0 +91,0 @@ saturation: [false, true],

src/scripts/controller.js

@@ -551,2 +551,18 @@ import tinycolor from 'tinycolor2';
                     if (this.options.case === 'lower') {
+                        this.ngModel = color.toHex().toLowerCase();
+                    } else {
+                        this.ngModel = color.toHex().toUpperCase();
+                    }
+                    break;
+
+                case 'hex8':
+                    if (this.options.case === 'lower') {
+                        this.ngModel = color.toHex8().toLowerCase();
+                    } else {
+                        this.ngModel = color.toHex8().toUpperCase();
+                    }
+                    break;
+
+                case 'hexstring':
+                    if (this.options.case === 'lower') {
                         this.ngModel = color.toHexString().toLowerCase();
@@ -558,3 +574,3 @@ } else {
 
-                case 'hex8':
+                case 'hex8string':
                     if (this.options.case === 'lower') {
@@ -561,0 +577,0 @@ this.ngModel = color.toHex8String().toLowerCase();

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

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

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

Improved metrics

Total package byte prevSize

318711

increased by0.56%

Lines of code

4067

increased by0.72%

Worsened metrics

Number of low supply chain risk alerts

4

increased by33.33%

No dependency changes