angularjs-color-picker - npm Package Compare versions

Comparing version 3.4.7 to 3.4.8

bower.json

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

CHANGELOG.md

@@ -5,2 +5,13 @@ # Changelog
 
+## v3.4.8
+
+#### Breaking Changes
+  * None
+
+#### New Features
+  * Feature #176 - Adding `dynamicHue`, `dynamicSaturation`, `dynamicLightness`, and `dynamicAlpha` options for the sliders
+
+#### Bug Fixes
+  * None
+
 ## v3.4.7
@@ -15,3 +26,3 @@
 #### Bug Fixes
-    * Fixing up clear and reset buttons for initial values that are not set when color picker is initialised
+  * Fixing up clear and reset buttons for initial values that are not set when color picker is initialised
 
@@ -27,3 +38,3 @@ ## v3.4.6
 #### Bug Fixes
-    * Bug #170 - Internal model not updating when changed programmatically
+  * Bug #170 - Internal model not updating when changed programmatically
 
@@ -40,5 +51,5 @@ ## v3.4.5
 #### Bug Fixes
-    * Bug #146 - Sliders no longer lose position when going to black or white
-    * Bug #173 - Unable to Use hexString Format with restrictToFormat
-    * Bug #174 - Clicking on swatch when disabled still opens popup
+  * Bug #146 - Sliders no longer lose position when going to black or white
+  * Bug #173 - Unable to Use hexString Format with restrictToFormat
+  * Bug #174 - Clicking on swatch when disabled still opens popup
 
@@ -65,4 +76,4 @@ ## v3.4.4
 #### Bug Fixes
-    * Bug #167 - Cannot read property 'updateOn' of undefined `ngModelOptions`
-    * Fixing up getterSetter = true setting internal ngModel to a function
+  * Bug #167 - Cannot read property 'updateOn' of undefined `ngModelOptions`
+  * Fixing up getterSetter = true setting internal ngModel to a function
 
@@ -79,3 +90,3 @@ ## v3.4.2
 #### Bug Fixes
-    * Bug #161 - Format option is now case insensitive
+  * Bug #161 - Format option is now case insensitive
 
@@ -82,0 +93,0 @@ ## v3.4.1

CODE_OF_CONDUCT.md

@@ -0,0 +0,0 @@ # Contributor Covenant Code of Conduct

CONTRIBUTING.md

@@ -0,0 +0,0 @@ # Issues

dist/angularjs-color-picker.js

 /*!
- * angularjs-color-picker v3.4.7
+ * angularjs-color-picker v3.4.8
  * https://github.com/ruhley/angular-color-picker/
@@ -7,3 +7,3 @@ *
  *
- * 2017-09-25 18:00:22
+ * 2017-10-06 09:51:57
  *
@@ -291,3 +291,3 @@ */
 
-            this.$scope.$watchGroup(['AngularColorPickerController.options.format', 'AngularColorPickerController.options.alpha', 'AngularColorPickerController.options.case', 'AngularColorPickerController.options.round', 'AngularColorPickerController.options.restrictToFormat', 'AngularColorPickerController.options.preserveInputFormat', 'AngularColorPickerController.options.allowEmpty', 'AngularColorPickerController.options.horizontal'], function (newValue) {
+            this.$scope.$watchGroup(['AngularColorPickerController.options.format', 'AngularColorPickerController.options.alpha', 'AngularColorPickerController.options.case', 'AngularColorPickerController.options.round', 'AngularColorPickerController.options.restrictToFormat', 'AngularColorPickerController.options.preserveInputFormat', 'AngularColorPickerController.options.allowEmpty', 'AngularColorPickerController.options.horizontal', 'AngularColorPickerController.options.dynamicHue', 'AngularColorPickerController.options.dynamicSaturation', 'AngularColorPickerController.options.dynamicLightness', 'AngularColorPickerController.options.dynamicAlpha'], function (newValue) {
                 if (newValue !== undefined) {
@@ -834,9 +834,9 @@ _this.initConfig();
 
-            var zero_sixths = this.getColorValue();
-            var one_sixths = this.getColorValue();
-            var two_sixths = this.getColorValue();
-            var three_sixths = this.getColorValue();
-            var four_sixths = this.getColorValue();
-            var five_sixths = this.getColorValue();
-            var six_sixths = this.getColorValue();
+            var zero_sixths = this.getColorValue(this.options.dynamicHue);
+            var one_sixths = this.getColorValue(this.options.dynamicHue);
+            var two_sixths = this.getColorValue(this.options.dynamicHue);
+            var three_sixths = this.getColorValue(this.options.dynamicHue);
+            var four_sixths = this.getColorValue(this.options.dynamicHue);
+            var five_sixths = this.getColorValue(this.options.dynamicHue);
+            var six_sixths = this.getColorValue(this.options.dynamicHue);
 
@@ -892,7 +892,7 @@ zero_sixths.h = 0;
             var direction = this.options.horizontal ? 'right' : 'bottom';
-            var high = this.getColorValue();
-            var low = this.getColorValue();
+            var high = this.getColorValue(this.options.dynamicSaturation);
+            var low = this.getColorValue(this.options.dynamicSaturation);
 
-            high.s = 100;
-            low.s = 0;
+            high.s = '100%';
+            low.s = '0%';
 
@@ -940,5 +940,5 @@ el.css({
             var direction = this.options.horizontal ? 'right' : 'bottom';
-            var bright = this.getColorValue();
-            var middle = this.getColorValue();
-            var dark = this.getColorValue();
+            var bright = this.getColorValue(this.options.dynamicLightness);
+            var middle = this.getColorValue(this.options.dynamicLightness);
+            var dark = this.getColorValue(this.options.dynamicLightness);
 
@@ -986,4 +986,4 @@ if (this.options.round) {
             var direction = this.options.horizontal ? 'right' : 'bottom';
-            var opaque = this.getColorValue();
-            var transparent = this.getColorValue();
+            var opaque = this.getColorValue(this.options.dynamicAlpha);
+            var transparent = this.getColorValue(this.options.dynamicAlpha);
 
@@ -1069,6 +1069,6 @@ opaque.a = 1;
             if (this.options.round) {
-                background.s = 0;
+                background.s = '0%';
             } else {
-                background.s = 1;
-                background.v = 1;
+                background.s = '100%';
+                background.v = '100%';
                 background.a = 1;
@@ -1141,8 +1141,9 @@ }
         value: function getColorValue() {
-            var includeOpacity = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+            var dynamicValues = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+            var includeOpacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
 
             var value = {
                 h: this.hue,
-                s: this.saturation + '%',
-                v: this.lightness + '%'
+                s: dynamicValues ? this.saturation + '%' : '100%',
+                v: dynamicValues ? this.lightness + '%' : '100%'
             };
@@ -1153,4 +1154,4 @@
                     h: this.hue,
-                    s: this.saturation + '%',
-                    l: this.lightness + '%'
+                    s: dynamicValues ? this.saturation + '%' : '100%',
+                    l: dynamicValues ? this.lightness + '%' : '50%'
                 };
@@ -1160,3 +1161,3 @@ }
             if (includeOpacity) {
-                value.a = this.opacity / 100;
+                value.a = dynamicValues ? this.opacity / 100 : 1;
             }
@@ -1435,2 +1436,3 @@
         case: 'upper',
+        // sliders
         hue: true,
@@ -1440,2 +1442,6 @@ saturation: false,
         alpha: true,
+        dynamicHue: true,
+        dynamicSaturation: true,
+        dynamicLightness: true,
+        dynamicAlpha: true,
         // picker
@@ -1442,0 +1448,0 @@ round: false,

dist/angularjs-color-picker.min.js

 /*!
- * angularjs-color-picker v3.4.7
+ * angularjs-color-picker v3.4.8
  * https://github.com/ruhley/angular-color-picker/
@@ -7,5 +7,5 @@ *
  *
- * 2017-09-25 18:00:22
+ * 2017-10-06 09:51:57
  *
  */
-!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(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,\'color-picker-horizontal\': AngularColorPickerController.options.horizontal,}"><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.internalNgModel" ng-model-options="AngularColorPickerController.ngModelOptions" 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=o&&o.hasOwnProperty("default")?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},i=(function(){function o(o){this.value=o}function t(t){function e(n,r){try{var s=t[n](r),l=s.value;l instanceof o?Promise.resolve(l.value).then(function(o){e("next",o)},function(o){e("throw",o)}):i(s.done?"return":"normal",s.value)}catch(o){i("throw",o)}}function i(o,t){switch(o){case"return":n.resolve({value:t,done:!0});break;case"throw":n.reject(t);break;default:n.resolve({value:t,done:!1})}(n=n.next)?e(n.key,n.arg):r=null}var n,r;this._invoke=function(o,t){return new Promise(function(i,s){var l={key:o,arg:t,resolve:i,reject:s,next:null};r?r=r.next=l:(n=r=l,e(o,t))})},"function"!=typeof t.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(t.prototype[Symbol.asyncIterator]=function(){return this}),t.prototype.next=function(o){return this._invoke("next",o)},t.prototype.throw=function(o){return this._invoke("throw",o)},t.prototype.return=function(o){return this._invoke("return",o)}}(),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}}(),r=function(){function t(o,e,n,r,s){i(this,t),this.$scope=o,this.$element=e,this.$document=n,this.$timeout=r,this.ColorPickerOptions=s,this.$scope.init=this.init.bind(this),this.ngModelOptions={},this.hue=0,this.saturation=void 0,this.lightness=void 0,this.opacity=void 0,this.basicEventTypes=["hue","saturation","lightness","opacity"],this.fullEventTypes=["color","hue","saturation","lightness","opacity"]}return n(t,[{key:"init",value:function(){this.$scope.control[0].$options&&this.$scope.control[0].$options.$$options&&(this.ngModelOptions=this.$scope.control[0].$options.$$options),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:"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),this.pickerDimensions={width:150,height:150},this.sliderDimensions={width:this.options.horizontal?this.pickerDimensions.width:20,height:this.options.horizontal?20:this.pickerDimensions.height}}},{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:"initWatchers",value:function(){var o=this;this.$scope.$watch("AngularColorPickerController.internalNgModel",this.watchInternalNgModel.bind(this)),this.$scope.$watch("AngularColorPickerController.ngModel",this.watchNgModel.bind(this)),this.$scope.$watch("AngularColorPickerController.options.swatchPos",function(t){void 0!==t&&(o.initConfig(),o.$timeout(function(){o.updateSwatchBackground()}))}),this.$scope.$watchGroup(["AngularColorPickerController.options.format","AngularColorPickerController.options.alpha","AngularColorPickerController.options.case","AngularColorPickerController.options.round","AngularColorPickerController.options.restrictToFormat","AngularColorPickerController.options.preserveInputFormat","AngularColorPickerController.options.allowEmpty","AngularColorPickerController.options.horizontal"],function(t){void 0!==t&&(o.initConfig(),o.update())}),this.$scope.$watchGroup(["AngularColorPickerController.options.disabled","AngularColorPickerController.options.swatchBootstrap","AngularColorPickerController.options.swatchOnly","AngularColorPickerController.options.swatch","AngularColorPickerController.options.pos","AngularColorPickerController.options.inline","AngularColorPickerController.options.placeholder"],function(t){void 0!==t&&o.initConfig()}),this.$scope.$watch("AngularColorPickerController.api",this.setupApi.bind(this)),this.$scope.$watch("AngularColorPickerController.swatchColor",this.updateSwatchBackground.bind(this)),this.$scope.$watch("AngularColorPickerController.hue",function(){o.valueUpdate("hue")}),this.$scope.$watch("AngularColorPickerController.saturation",function(){o.valueUpdate("saturation")}),this.$scope.$watch("AngularColorPickerController.lightness",function(){o.valueUpdate("lightness")}),this.$scope.$watch("AngularColorPickerController.opacity",function(){o.valueUpdate("opacity")})}},{key:"watchInternalNgModel",value:function(o,t){this.colorMouse||this.watchNgModelSet(o)}},{key:"watchNgModel",value:function(o,t){void 0===o||this.hasOwnProperty("initialNgModel")||(this.initialNgModel=o),this.checkDirty(o),this.internalNgModel=this.ngModelOptions.getterSetter?this.ngModel():this.ngModel,this.colorMouse||this.watchNgModelSet(o)}},{key:"watchNgModelSet",value:function(t){var e=this;if(void 0!==t&&null!==t){var i=o(t),n=this.isColorValid(i);n&&(this.setColorValue(i),this.updateModel=!1,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:"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",function(t){o.onClick("color",t)}),this.find(".color-picker-grid").on("touchend",function(t){o.onClick("color",t)}),this.find(".color-picker-hue").on("click",function(t){o.onClick("hue",t)}),this.find(".color-picker-hue").on("touchend",function(t){o.onClick("hue",t)}),this.find(".color-picker-saturation").on("click",function(t){o.onClick("saturation",t)}),this.find(".color-picker-saturation").on("touchend",function(t){o.onClick("saturation",t)}),this.find(".color-picker-lightness").on("click",function(t){o.onClick("lightness",t)}),this.find(".color-picker-lightness").on("touchend",function(t){o.onClick("lightness",t)}),this.find(".color-picker-opacity").on("click",function(t){o.onClick("opacity",t)}),this.find(".color-picker-opacity").on("touchend",function(t){o.onClick("opacity",t)}),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;for(var t=0;t<this.fullEventTypes.length;t++)this.onMouseDownType(this.fullEventTypes[t],o)}},{key:"onMouseDownType",value:function(o,t){"color"===o&&(t.target.classList.contains("color-picker-grid-inner")||t.target.classList.contains("color-picker-picker")||t.target.parentNode.classList.contains("color-picker-picker"))?this.mouseEventToggle(o,!1,t):(t.target.classList.contains("color-picker-"+o)||t.target.parentNode.classList.contains("color-picker-"+o))&&this.mouseEventToggle(o,!1,t)}},{key:"onMouseUp",value:function(o){if(this.anyMouseEvents()||0!==this.find(o.target).length)for(var t=0;t<this.fullEventTypes.length;t++)this.onMouseUpType(this.fullEventTypes[t],o);else this.setupApi(),this.options.hide.click&&this.api.close(o),this.$scope.$apply()}},{key:"onMouseUpType",value:function(o,t){this[o+"Mouse"]&&this.has_moused_moved&&(this.mouseEventToggle(o,!0,t),this.onChange(t))}},{key:"onMouseMove",value:function(o){for(var t=0;t<this.fullEventTypes.length;t++)this.onMouseMoveType(this.fullEventTypes[t],o)}},{key:"onMouseMoveType",value:function(o,t){this[o+"Mouse"]&&(this.has_moused_moved=!0,this.valueChange(o,t),this.$scope.$apply())}},{key:"onKeyUp",value:function(o){this.options.hide.escape&&27===o.keyCode&&this.api.close(o)}},{key:"onClick",value:function(o,t){this.options.disabled||this.has_moused_moved||(this.valueChange(o,t),this.mouseEventToggle(o,!0,t),this.onChange(t))}},{key:"onChange",value:function(o){this.internalNgModel!==this.onChangeValue&&(this.onChangeValue=this.internalNgModel,this.eventApiDispatch("onChange",[o]))}},{key:"onBlur",value:function(o){this.internalNgModel!==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:"onSwatchClick",value:function(o){this.options.show.swatch&&!this.options.disabled&&this.api.open(o)}},{key:"onFocus",value:function(o){this.options.show.focus&&this.api.open(o)}},{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();for(var e=0;e<o.basicEventTypes.length;e++)o.valueUpdate(o.basicEventTypes[e]);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.update(),o.eventApiDispatch("onClose",[t]))},this.api.clear=function(t){o.setNgModel(null),o.eventApiDispatch("onClear",[t])},this.api.reset=function(t){o.internalNgModel!==o.initialNgModel&&(o.setNgModel(o.initialNgModel),o.eventApiDispatch("onReset",[t]))},this.api.getElement=function(){return o.$element},this.api.getScope=function(){return o.$scope}}},{key:"setNgModel",value:function(o){this.internalNgModel=o,this.ngModelOptions.getterSetter?this.ngModel(o):this.ngModel=o}},{key:"update",value:function(){if(!this.areAllValuesSet())return!1;var t=o(this.getColorValue());this.swatchColor=t.toHslString(),this.updateGridBackground(t),this.updateHueBackground(t),this.huePosUpdate(),this.updateSaturationBackground(t),this.saturationPosUpdate(),this.updateLightnessBackground(t),this.lightnessPosUpdate(),this.updateOpacityBackground(t),this.opacityPosUpdate();var e=this.options.preserveInputFormat&&o(this.internalNgModel).toHsvString()===t.toHsvString();if(this.updateModel&&!e){var i=t[{rgb:"toRgbString",hex:"toHex",hex8:"toHex8",hexstring:"toHexString",hex8string:"toHex8String",hsv:"toHsvString",hsl:"toHslString",raw:"clone"}[this.options.format.toLowerCase()]]();this.options.format.match(/hex/i)&&(i="upper"===this.options.case?i.toUpperCase():i.toLowerCase()),this.setNgModel(i)}}},{key:"mouseEventToggle",value:function(o,t,e){this.stopEvent(e),this[o+"Mouse"]=!t,this.$scope.$apply()}},{key:"valueChange",value:function(o,t){if(this.stopEvent(t),"color"===o)return this.colorChange(t);var e=this.find(".color-picker-"+o),i=this.getEventPos(t),n=this.getMaxFromType(o);this[o]=this.calculateSliderPos(e,i,n),this[o]>n?this[o]=n:this[o]<0&&(this[o]=0)}},{key:"valueUpdate",value:function(o){if(void 0!==this[o]){if("saturation"===o)this[o+"Pos"]=this[o];else{var t=this.getMaxFromType(o);this[o+"Pos"]=100*(1-this[o]/t)}this[o+"Pos"]<0?this[o+"Pos"]=0:this[o+"Pos"]>100&&(this[o+"Pos"]=100),this.options.round&&(this.getRoundPos(),this.updateRoundPos()),this[o+"PosUpdate"](),this.update()}}},{key:"huePosUpdate",value:function(){var o=angular.element(this.$element[0].querySelector(".color-picker-hue .color-picker-slider"));this.options.horizontal?o.css({left:this.sliderDimensions.width*this.huePos/100+"px",top:0}):o.css({left:0,top:this.sliderDimensions.height*this.huePos/100+"px"})}},{key:"updateHueBackground",value:function(t){var e=this.find(".color-picker-hue .color-picker-overlay"),i=this.options.horizontal?"left":"top",n=this.getColorValue(),r=this.getColorValue(),s=this.getColorValue(),l=this.getColorValue(),c=this.getColorValue(),a=this.getColorValue(),h=this.getColorValue();n.h=0,r.h=60,s.h=120,l.h=180,c.h=240,a.h=300,h.h=359,e.css({background:"linear-gradient(to "+i+", "+o(n).toRgbString()+" 0%, "+o(r).toRgbString()+" 17%, "+o(s).toRgbString()+" 33%, "+o(l).toRgbString()+" 50%, "+o(c).toRgbString()+" 67%, "+o(a).toRgbString()+" 83%, "+o(h).toRgbString()+" 100%)"})}},{key:"saturationPosUpdate",value:function(){var o;this.options.round||(o=angular.element(this.$element[0].querySelector(".color-picker-grid .color-picker-picker"))).css({left:this.pickerDimensions.height*this.saturationPos/100+"px"}),o=angular.element(this.$element[0].querySelector(".color-picker-saturation .color-picker-slider")),this.options.horizontal?o.css({left:this.sliderDimensions.width*(100-this.saturationPos)/100+"px",top:0}):o.css({left:0,top:this.sliderDimensions.height*(100-this.saturationPos)/100+"px"})}},{key:"updateSaturationBackground",value:function(t){var e=this.find(".color-picker-saturation .color-picker-overlay"),i=this.options.horizontal?"right":"bottom",n=this.getColorValue(),r=this.getColorValue();n.s=100,r.s=0,e.css({background:"linear-gradient(to "+i+", "+o(n).toRgbString()+" 0%, "+o(r).toRgbString()+" 100%)"})}},{key:"lightnessPosUpdate",value:function(){var o;this.options.round||(o=angular.element(this.$element[0].querySelector(".color-picker-grid .color-picker-picker"))).css({top:this.pickerDimensions.width*this.lightnessPos/100+"px"}),o=angular.element(this.$element[0].querySelector(".color-picker-lightness .color-picker-slider")),this.options.horizontal?o.css({left:this.sliderDimensions.width*this.lightnessPos/100+"px",top:0}):o.css({left:0,top:this.sliderDimensions.height*this.lightnessPos/100+"px"})}},{key:"updateLightnessBackground",value:function(t){var e=this.find(".color-picker-lightness .color-picker-overlay"),i=this.options.horizontal?"right":"bottom",n=this.getColorValue(),r=this.getColorValue(),s=this.getColorValue();this.options.round?(n.l=100,r.l=50,s.l=0):(n.v=100,r.v=50,s.v=0),e.css({background:"linear-gradient(to "+i+", "+o(n).toRgbString()+" 0%, "+o(r).toRgbString()+" 50%, "+o(s).toRgbString()+" 100%)"})}},{key:"opacityPosUpdate",value:function(){var o=angular.element(this.$element[0].querySelector(".color-picker-opacity .color-picker-slider"));this.options.horizontal?o.css({left:this.sliderDimensions.width*this.opacityPos/100+"px",top:0}):o.css({left:0,top:this.sliderDimensions.height*this.opacityPos/100+"px"})}},{key:"updateOpacityBackground",value:function(t){var e=this.find(".color-picker-opacity .color-picker-overlay"),i=this.options.horizontal?"right":"bottom",n=this.getColorValue(),r=this.getColorValue();n.a=1,r.a=0,e.css({background:"linear-gradient(to "+i+", "+o(n).toRgbString()+" 0%, "+o(r).toRgbString()+" 100%)"})}},{key:"colorChange",value:function(o){this.stopEvent(o);var t=this.find(".color-picker-grid-inner"),e=this.getEventPos(o),i=this.offset(t);this.options.round?this.colorChangeRound(t,i,e):this.colorChangeSquare(t,i,e)}},{key:"colorChangeRound",value:function(o,t,e){var i=2*(e.pageX-t.left)/o.prop("offsetWidth")-1,n=-2*(e.pageY-t.top)/o.prop("offsetHeight")+1,r=Math.atan2(n,i),s=Math.round(57.29577951308233*r);s<0&&(s+=360),this.hue=s;var l=Math.sqrt(i*i+n*n);l>1?l=1:l<0&&(l=0),this.saturation=100*l,void 0===this.lightness&&(this.lightness=50)}},{key:"colorChangeSquare",value:function(o,t,e){this.saturation=(e.pageX-t.left)/o.prop("offsetWidth")*100,this.lightness=100*(1-(e.pageY-t.top)/o.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:"updateGridBackground",value:function(t){var e=this.find(".color-picker-grid .color-picker-overlay"),i=this.getColorValue();this.options.round?i.s=0:(i.s=1,i.v=1,i.a=1),e.css({"background-color":o(i).toRgbString(),opacity:t.getAlpha()}),this.find(".color-picker-grid .color-picker-grid-inner").css({opacity:t.getAlpha()})}},{key:"updateSwatchBackground",value:function(){angular.element(this.$element[0].querySelector(".color-picker-swatch")).css({"background-color":this.swatchColor})}},{key:"isColorValid",value:function(o){var t=o.isValid();if(t&&this.options.restrictToFormat&&(t=o.getFormat()===this.getTinyColorFormat()),!t&&this.options.allowEmpty){var e=o.getOriginalInput();void 0!==e&&null!==e&&""!==e||(t=!0)}return t}},{key:"getTinyColorFormat",value:function(){return"hexString"===this.options.format?"hex":"hex8String"===this.options.format?"hex8":this.options.format}},{key:"areAllValuesSet",value:function(){return void 0!==this.hue&&void 0!==this.saturation&&void 0!==this.lightness}},{key:"getColorValue",value:function(){var o=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],t={h:this.hue,s:this.saturation+"%",v:this.lightness+"%"};return this.options.round&&(t={h:this.hue,s:this.saturation+"%",l:this.lightness+"%"}),o&&(t.a=this.opacity/100),t}},{key:"setColorValue",value:function(o){var t=!this.anyMouseEvents(),e=this.options.round?o.toHsl():o.toHsv();(t||this.hueMouse)&&(this.hue=e.h),(t||this.saturationMouse)&&(this.saturation=100*e.s),(t||this.lightnessMouse)&&(this.lightness=100*(this.options.round?e.l:e.v)),this.options.alpha&&(t||this.opacityMouse)&&(this.opacity=100*e.a)}},{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,e=-Math.sin(o)*this.saturation;this.xPos=.5*(t+100),this.yPos=.5*(e+100);if(Math.pow(50-this.xPos,2)+Math.pow(50-this.yPos,2)>Math.pow(50,2)){var i=Math.atan2(this.yPos-50,this.xPos-50);this.xPos=50*Math.cos(i)+50,this.yPos=50*Math.sin(i)+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:"calculateSliderPos",value:function(o,t,e){return this.options.horizontal?Math.round((1-(t.pageX-this.offset(o).left)/o.prop("offsetWidth"))*e):Math.round((1-(t.pageY-this.offset(o).top)/o.prop("offsetHeight"))*e)}},{key:"eventApiDispatch",value:function(o,t){this.eventApi&&"function"==typeof this.eventApi[o]&&(t||(t=[]),t.unshift(this.internalNgModel),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,r=o[0];if(r)return r.getClientRects().length?(i=r.getBoundingClientRect()).width||i.height?(n=r.ownerDocument,e=this.getWindowElements(n),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}}},{key:"getWindowElements",value:function(o){return null!==o&&o===o.window?o:9===o.nodeType&&o.defaultView}},{key:"anyMouseEvents",value:function(){return this.colorMouse||this.hueMouse||this.saturationMouse||this.lightnessMouse||this.opacityMouse}},{key:"getMaxFromType",value:function(o){return"hue"===o?360:100}}]),t}();r.$inject=["$scope","$element","$document","$timeout","ColorPickerOptions"],t.$inject=["$templateCache"];return angular.module("color.picker",[]).service("ColorPickerOptions",function o(){return i(this,o),{id:void 0,name:void 0,required:!1,disabled:!1,placeholder:"",inputClass:"",restrictToFormat:!1,preserveInputFormat:!1,allowEmpty:!1,format:"hsl",case:"upper",hue:!0,saturation:!1,lightness:!1,alpha:!0,round:!1,pos:"bottom left",inline:!1,horizontal:!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:""}}}).directive("colorPicker",function(){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,e,i){o.control=i,o.init()}}}).run(t)});
+!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(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,\'color-picker-horizontal\': AngularColorPickerController.options.horizontal,}"><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.internalNgModel" ng-model-options="AngularColorPickerController.ngModelOptions" 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=o&&o.hasOwnProperty("default")?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},i=(function(){function o(o){this.value=o}function t(t){function e(n,r){try{var s=t[n](r),l=s.value;l instanceof o?Promise.resolve(l.value).then(function(o){e("next",o)},function(o){e("throw",o)}):i(s.done?"return":"normal",s.value)}catch(o){i("throw",o)}}function i(o,t){switch(o){case"return":n.resolve({value:t,done:!0});break;case"throw":n.reject(t);break;default:n.resolve({value:t,done:!1})}(n=n.next)?e(n.key,n.arg):r=null}var n,r;this._invoke=function(o,t){return new Promise(function(i,s){var l={key:o,arg:t,resolve:i,reject:s,next:null};r?r=r.next=l:(n=r=l,e(o,t))})},"function"!=typeof t.return&&(this.return=void 0)}"function"==typeof Symbol&&Symbol.asyncIterator&&(t.prototype[Symbol.asyncIterator]=function(){return this}),t.prototype.next=function(o){return this._invoke("next",o)},t.prototype.throw=function(o){return this._invoke("throw",o)},t.prototype.return=function(o){return this._invoke("return",o)}}(),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}}(),r=function(){function t(o,e,n,r,s){i(this,t),this.$scope=o,this.$element=e,this.$document=n,this.$timeout=r,this.ColorPickerOptions=s,this.$scope.init=this.init.bind(this),this.ngModelOptions={},this.hue=0,this.saturation=void 0,this.lightness=void 0,this.opacity=void 0,this.basicEventTypes=["hue","saturation","lightness","opacity"],this.fullEventTypes=["color","hue","saturation","lightness","opacity"]}return n(t,[{key:"init",value:function(){this.$scope.control[0].$options&&this.$scope.control[0].$options.$$options&&(this.ngModelOptions=this.$scope.control[0].$options.$$options),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:"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),this.pickerDimensions={width:150,height:150},this.sliderDimensions={width:this.options.horizontal?this.pickerDimensions.width:20,height:this.options.horizontal?20:this.pickerDimensions.height}}},{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:"initWatchers",value:function(){var o=this;this.$scope.$watch("AngularColorPickerController.internalNgModel",this.watchInternalNgModel.bind(this)),this.$scope.$watch("AngularColorPickerController.ngModel",this.watchNgModel.bind(this)),this.$scope.$watch("AngularColorPickerController.options.swatchPos",function(t){void 0!==t&&(o.initConfig(),o.$timeout(function(){o.updateSwatchBackground()}))}),this.$scope.$watchGroup(["AngularColorPickerController.options.format","AngularColorPickerController.options.alpha","AngularColorPickerController.options.case","AngularColorPickerController.options.round","AngularColorPickerController.options.restrictToFormat","AngularColorPickerController.options.preserveInputFormat","AngularColorPickerController.options.allowEmpty","AngularColorPickerController.options.horizontal","AngularColorPickerController.options.dynamicHue","AngularColorPickerController.options.dynamicSaturation","AngularColorPickerController.options.dynamicLightness","AngularColorPickerController.options.dynamicAlpha"],function(t){void 0!==t&&(o.initConfig(),o.update())}),this.$scope.$watchGroup(["AngularColorPickerController.options.disabled","AngularColorPickerController.options.swatchBootstrap","AngularColorPickerController.options.swatchOnly","AngularColorPickerController.options.swatch","AngularColorPickerController.options.pos","AngularColorPickerController.options.inline","AngularColorPickerController.options.placeholder"],function(t){void 0!==t&&o.initConfig()}),this.$scope.$watch("AngularColorPickerController.api",this.setupApi.bind(this)),this.$scope.$watch("AngularColorPickerController.swatchColor",this.updateSwatchBackground.bind(this)),this.$scope.$watch("AngularColorPickerController.hue",function(){o.valueUpdate("hue")}),this.$scope.$watch("AngularColorPickerController.saturation",function(){o.valueUpdate("saturation")}),this.$scope.$watch("AngularColorPickerController.lightness",function(){o.valueUpdate("lightness")}),this.$scope.$watch("AngularColorPickerController.opacity",function(){o.valueUpdate("opacity")})}},{key:"watchInternalNgModel",value:function(o,t){this.colorMouse||this.watchNgModelSet(o)}},{key:"watchNgModel",value:function(o,t){void 0===o||this.hasOwnProperty("initialNgModel")||(this.initialNgModel=o),this.checkDirty(o),this.internalNgModel=this.ngModelOptions.getterSetter?this.ngModel():this.ngModel,this.colorMouse||this.watchNgModelSet(o)}},{key:"watchNgModelSet",value:function(t){var e=this;if(void 0!==t&&null!==t){var i=o(t),n=this.isColorValid(i);n&&(this.setColorValue(i),this.updateModel=!1,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:"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",function(t){o.onClick("color",t)}),this.find(".color-picker-grid").on("touchend",function(t){o.onClick("color",t)}),this.find(".color-picker-hue").on("click",function(t){o.onClick("hue",t)}),this.find(".color-picker-hue").on("touchend",function(t){o.onClick("hue",t)}),this.find(".color-picker-saturation").on("click",function(t){o.onClick("saturation",t)}),this.find(".color-picker-saturation").on("touchend",function(t){o.onClick("saturation",t)}),this.find(".color-picker-lightness").on("click",function(t){o.onClick("lightness",t)}),this.find(".color-picker-lightness").on("touchend",function(t){o.onClick("lightness",t)}),this.find(".color-picker-opacity").on("click",function(t){o.onClick("opacity",t)}),this.find(".color-picker-opacity").on("touchend",function(t){o.onClick("opacity",t)}),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;for(var t=0;t<this.fullEventTypes.length;t++)this.onMouseDownType(this.fullEventTypes[t],o)}},{key:"onMouseDownType",value:function(o,t){"color"===o&&(t.target.classList.contains("color-picker-grid-inner")||t.target.classList.contains("color-picker-picker")||t.target.parentNode.classList.contains("color-picker-picker"))?this.mouseEventToggle(o,!1,t):(t.target.classList.contains("color-picker-"+o)||t.target.parentNode.classList.contains("color-picker-"+o))&&this.mouseEventToggle(o,!1,t)}},{key:"onMouseUp",value:function(o){if(this.anyMouseEvents()||0!==this.find(o.target).length)for(var t=0;t<this.fullEventTypes.length;t++)this.onMouseUpType(this.fullEventTypes[t],o);else this.setupApi(),this.options.hide.click&&this.api.close(o),this.$scope.$apply()}},{key:"onMouseUpType",value:function(o,t){this[o+"Mouse"]&&this.has_moused_moved&&(this.mouseEventToggle(o,!0,t),this.onChange(t))}},{key:"onMouseMove",value:function(o){for(var t=0;t<this.fullEventTypes.length;t++)this.onMouseMoveType(this.fullEventTypes[t],o)}},{key:"onMouseMoveType",value:function(o,t){this[o+"Mouse"]&&(this.has_moused_moved=!0,this.valueChange(o,t),this.$scope.$apply())}},{key:"onKeyUp",value:function(o){this.options.hide.escape&&27===o.keyCode&&this.api.close(o)}},{key:"onClick",value:function(o,t){this.options.disabled||this.has_moused_moved||(this.valueChange(o,t),this.mouseEventToggle(o,!0,t),this.onChange(t))}},{key:"onChange",value:function(o){this.internalNgModel!==this.onChangeValue&&(this.onChangeValue=this.internalNgModel,this.eventApiDispatch("onChange",[o]))}},{key:"onBlur",value:function(o){this.internalNgModel!==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:"onSwatchClick",value:function(o){this.options.show.swatch&&!this.options.disabled&&this.api.open(o)}},{key:"onFocus",value:function(o){this.options.show.focus&&this.api.open(o)}},{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();for(var e=0;e<o.basicEventTypes.length;e++)o.valueUpdate(o.basicEventTypes[e]);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.update(),o.eventApiDispatch("onClose",[t]))},this.api.clear=function(t){o.setNgModel(null),o.eventApiDispatch("onClear",[t])},this.api.reset=function(t){o.internalNgModel!==o.initialNgModel&&(o.setNgModel(o.initialNgModel),o.eventApiDispatch("onReset",[t]))},this.api.getElement=function(){return o.$element},this.api.getScope=function(){return o.$scope}}},{key:"setNgModel",value:function(o){this.internalNgModel=o,this.ngModelOptions.getterSetter?this.ngModel(o):this.ngModel=o}},{key:"update",value:function(){if(!this.areAllValuesSet())return!1;var t=o(this.getColorValue());this.swatchColor=t.toHslString(),this.updateGridBackground(t),this.updateHueBackground(t),this.huePosUpdate(),this.updateSaturationBackground(t),this.saturationPosUpdate(),this.updateLightnessBackground(t),this.lightnessPosUpdate(),this.updateOpacityBackground(t),this.opacityPosUpdate();var e=this.options.preserveInputFormat&&o(this.internalNgModel).toHsvString()===t.toHsvString();if(this.updateModel&&!e){var i=t[{rgb:"toRgbString",hex:"toHex",hex8:"toHex8",hexstring:"toHexString",hex8string:"toHex8String",hsv:"toHsvString",hsl:"toHslString",raw:"clone"}[this.options.format.toLowerCase()]]();this.options.format.match(/hex/i)&&(i="upper"===this.options.case?i.toUpperCase():i.toLowerCase()),this.setNgModel(i)}}},{key:"mouseEventToggle",value:function(o,t,e){this.stopEvent(e),this[o+"Mouse"]=!t,this.$scope.$apply()}},{key:"valueChange",value:function(o,t){if(this.stopEvent(t),"color"===o)return this.colorChange(t);var e=this.find(".color-picker-"+o),i=this.getEventPos(t),n=this.getMaxFromType(o);this[o]=this.calculateSliderPos(e,i,n),this[o]>n?this[o]=n:this[o]<0&&(this[o]=0)}},{key:"valueUpdate",value:function(o){if(void 0!==this[o]){if("saturation"===o)this[o+"Pos"]=this[o];else{var t=this.getMaxFromType(o);this[o+"Pos"]=100*(1-this[o]/t)}this[o+"Pos"]<0?this[o+"Pos"]=0:this[o+"Pos"]>100&&(this[o+"Pos"]=100),this.options.round&&(this.getRoundPos(),this.updateRoundPos()),this[o+"PosUpdate"](),this.update()}}},{key:"huePosUpdate",value:function(){var o=angular.element(this.$element[0].querySelector(".color-picker-hue .color-picker-slider"));this.options.horizontal?o.css({left:this.sliderDimensions.width*this.huePos/100+"px",top:0}):o.css({left:0,top:this.sliderDimensions.height*this.huePos/100+"px"})}},{key:"updateHueBackground",value:function(t){var e=this.find(".color-picker-hue .color-picker-overlay"),i=this.options.horizontal?"left":"top",n=this.getColorValue(this.options.dynamicHue),r=this.getColorValue(this.options.dynamicHue),s=this.getColorValue(this.options.dynamicHue),l=this.getColorValue(this.options.dynamicHue),a=this.getColorValue(this.options.dynamicHue),c=this.getColorValue(this.options.dynamicHue),h=this.getColorValue(this.options.dynamicHue);n.h=0,r.h=60,s.h=120,l.h=180,a.h=240,c.h=300,h.h=359,e.css({background:"linear-gradient(to "+i+", "+o(n).toRgbString()+" 0%, "+o(r).toRgbString()+" 17%, "+o(s).toRgbString()+" 33%, "+o(l).toRgbString()+" 50%, "+o(a).toRgbString()+" 67%, "+o(c).toRgbString()+" 83%, "+o(h).toRgbString()+" 100%)"})}},{key:"saturationPosUpdate",value:function(){var o;this.options.round||(o=angular.element(this.$element[0].querySelector(".color-picker-grid .color-picker-picker"))).css({left:this.pickerDimensions.height*this.saturationPos/100+"px"}),o=angular.element(this.$element[0].querySelector(".color-picker-saturation .color-picker-slider")),this.options.horizontal?o.css({left:this.sliderDimensions.width*(100-this.saturationPos)/100+"px",top:0}):o.css({left:0,top:this.sliderDimensions.height*(100-this.saturationPos)/100+"px"})}},{key:"updateSaturationBackground",value:function(t){var e=this.find(".color-picker-saturation .color-picker-overlay"),i=this.options.horizontal?"right":"bottom",n=this.getColorValue(this.options.dynamicSaturation),r=this.getColorValue(this.options.dynamicSaturation);n.s="100%",r.s="0%",e.css({background:"linear-gradient(to "+i+", "+o(n).toRgbString()+" 0%, "+o(r).toRgbString()+" 100%)"})}},{key:"lightnessPosUpdate",value:function(){var o;this.options.round||(o=angular.element(this.$element[0].querySelector(".color-picker-grid .color-picker-picker"))).css({top:this.pickerDimensions.width*this.lightnessPos/100+"px"}),o=angular.element(this.$element[0].querySelector(".color-picker-lightness .color-picker-slider")),this.options.horizontal?o.css({left:this.sliderDimensions.width*this.lightnessPos/100+"px",top:0}):o.css({left:0,top:this.sliderDimensions.height*this.lightnessPos/100+"px"})}},{key:"updateLightnessBackground",value:function(t){var e=this.find(".color-picker-lightness .color-picker-overlay"),i=this.options.horizontal?"right":"bottom",n=this.getColorValue(this.options.dynamicLightness),r=this.getColorValue(this.options.dynamicLightness),s=this.getColorValue(this.options.dynamicLightness);this.options.round?(n.l=100,r.l=50,s.l=0):(n.v=100,r.v=50,s.v=0),e.css({background:"linear-gradient(to "+i+", "+o(n).toRgbString()+" 0%, "+o(r).toRgbString()+" 50%, "+o(s).toRgbString()+" 100%)"})}},{key:"opacityPosUpdate",value:function(){var o=angular.element(this.$element[0].querySelector(".color-picker-opacity .color-picker-slider"));this.options.horizontal?o.css({left:this.sliderDimensions.width*this.opacityPos/100+"px",top:0}):o.css({left:0,top:this.sliderDimensions.height*this.opacityPos/100+"px"})}},{key:"updateOpacityBackground",value:function(t){var e=this.find(".color-picker-opacity .color-picker-overlay"),i=this.options.horizontal?"right":"bottom",n=this.getColorValue(this.options.dynamicAlpha),r=this.getColorValue(this.options.dynamicAlpha);n.a=1,r.a=0,e.css({background:"linear-gradient(to "+i+", "+o(n).toRgbString()+" 0%, "+o(r).toRgbString()+" 100%)"})}},{key:"colorChange",value:function(o){this.stopEvent(o);var t=this.find(".color-picker-grid-inner"),e=this.getEventPos(o),i=this.offset(t);this.options.round?this.colorChangeRound(t,i,e):this.colorChangeSquare(t,i,e)}},{key:"colorChangeRound",value:function(o,t,e){var i=2*(e.pageX-t.left)/o.prop("offsetWidth")-1,n=-2*(e.pageY-t.top)/o.prop("offsetHeight")+1,r=Math.atan2(n,i),s=Math.round(57.29577951308233*r);s<0&&(s+=360),this.hue=s;var l=Math.sqrt(i*i+n*n);l>1?l=1:l<0&&(l=0),this.saturation=100*l,void 0===this.lightness&&(this.lightness=50)}},{key:"colorChangeSquare",value:function(o,t,e){this.saturation=(e.pageX-t.left)/o.prop("offsetWidth")*100,this.lightness=100*(1-(e.pageY-t.top)/o.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:"updateGridBackground",value:function(t){var e=this.find(".color-picker-grid .color-picker-overlay"),i=this.getColorValue();this.options.round?i.s="0%":(i.s="100%",i.v="100%",i.a=1),e.css({"background-color":o(i).toRgbString(),opacity:t.getAlpha()}),this.find(".color-picker-grid .color-picker-grid-inner").css({opacity:t.getAlpha()})}},{key:"updateSwatchBackground",value:function(){angular.element(this.$element[0].querySelector(".color-picker-swatch")).css({"background-color":this.swatchColor})}},{key:"isColorValid",value:function(o){var t=o.isValid();if(t&&this.options.restrictToFormat&&(t=o.getFormat()===this.getTinyColorFormat()),!t&&this.options.allowEmpty){var e=o.getOriginalInput();void 0!==e&&null!==e&&""!==e||(t=!0)}return t}},{key:"getTinyColorFormat",value:function(){return"hexString"===this.options.format?"hex":"hex8String"===this.options.format?"hex8":this.options.format}},{key:"areAllValuesSet",value:function(){return void 0!==this.hue&&void 0!==this.saturation&&void 0!==this.lightness}},{key:"getColorValue",value:function(){var o=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],e={h:this.hue,s:o?this.saturation+"%":"100%",v:o?this.lightness+"%":"100%"};return this.options.round&&(e={h:this.hue,s:o?this.saturation+"%":"100%",l:o?this.lightness+"%":"50%"}),t&&(e.a=o?this.opacity/100:1),e}},{key:"setColorValue",value:function(o){var t=!this.anyMouseEvents(),e=this.options.round?o.toHsl():o.toHsv();(t||this.hueMouse)&&(this.hue=e.h),(t||this.saturationMouse)&&(this.saturation=100*e.s),(t||this.lightnessMouse)&&(this.lightness=100*(this.options.round?e.l:e.v)),this.options.alpha&&(t||this.opacityMouse)&&(this.opacity=100*e.a)}},{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,e=-Math.sin(o)*this.saturation;this.xPos=.5*(t+100),this.yPos=.5*(e+100);if(Math.pow(50-this.xPos,2)+Math.pow(50-this.yPos,2)>Math.pow(50,2)){var i=Math.atan2(this.yPos-50,this.xPos-50);this.xPos=50*Math.cos(i)+50,this.yPos=50*Math.sin(i)+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:"calculateSliderPos",value:function(o,t,e){return this.options.horizontal?Math.round((1-(t.pageX-this.offset(o).left)/o.prop("offsetWidth"))*e):Math.round((1-(t.pageY-this.offset(o).top)/o.prop("offsetHeight"))*e)}},{key:"eventApiDispatch",value:function(o,t){this.eventApi&&"function"==typeof this.eventApi[o]&&(t||(t=[]),t.unshift(this.internalNgModel),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,r=o[0];if(r)return r.getClientRects().length?(i=r.getBoundingClientRect()).width||i.height?(n=r.ownerDocument,e=this.getWindowElements(n),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}}},{key:"getWindowElements",value:function(o){return null!==o&&o===o.window?o:9===o.nodeType&&o.defaultView}},{key:"anyMouseEvents",value:function(){return this.colorMouse||this.hueMouse||this.saturationMouse||this.lightnessMouse||this.opacityMouse}},{key:"getMaxFromType",value:function(o){return"hue"===o?360:100}}]),t}();r.$inject=["$scope","$element","$document","$timeout","ColorPickerOptions"],t.$inject=["$templateCache"];return angular.module("color.picker",[]).service("ColorPickerOptions",function o(){return i(this,o),{id:void 0,name:void 0,required:!1,disabled:!1,placeholder:"",inputClass:"",restrictToFormat:!1,preserveInputFormat:!1,allowEmpty:!1,format:"hsl",case:"upper",hue:!0,saturation:!1,lightness:!1,alpha:!0,dynamicHue:!0,dynamicSaturation:!0,dynamicLightness:!0,dynamicAlpha:!0,round:!1,pos:"bottom left",inline:!1,horizontal:!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:""}}}).directive("colorPicker",function(){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,e,i){o.control=i,o.init()}}}).run(t)});

examples/02-app.js

@@ -0,0 +0,0 @@ angular

examples/04-app.js

@@ -0,0 +0,0 @@ angular

examples/app.js

@@ -11,5 +11,10 @@ angular
             options.alpha = true;
-            options.inline = false;
+            options.inline = true;
             options.format = 'hsl';
             options.inputClass = 'form-control';
+
+            options.dynamicHue = false;
+            options.dynamicLightness = false;
+            options.dynamicSaturation = false;
+            options.dynamicAlpha = false;
             return options;
@@ -16,0 +21,0 @@ });

grunt/build.js

@@ -0,0 +0,0 @@ module.exports = function(grunt) {

grunt/options/clean.js

@@ -0,0 +0,0 @@ module.exports = {

grunt/options/connect.js

@@ -0,0 +0,0 @@ module.exports = {

grunt/options/cssmin.js

@@ -0,0 +0,0 @@ module.exports = {

grunt/options/jshint.js

@@ -0,0 +0,0 @@ module.exports = {

grunt/options/less.js

@@ -0,0 +0,0 @@ module.exports = function() {

grunt/options/notify.js

@@ -0,0 +0,0 @@ module.exports = {

grunt/options/rollup.js

@@ -0,0 +0,0 @@ var babel = require('rollup-plugin-babel');

grunt/options/run.js

@@ -0,0 +0,0 @@ module.exports = {

grunt/rollup.js

@@ -0,0 +0,0 @@ var rollup = require('rollup');

Gruntfile.js

@@ -0,0 +0,0 @@ (function(module) {

package.json

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

README.md

@@ -90,2 +90,4 @@ # Angular Color Picker
     format: ['hsl', 'hsv', 'rgb', 'hex', 'hexString', 'hex8', 'hex8String', 'raw'],
+    case: ['upper', 'lower'],
+    // sliders
     hue: [true, false],
@@ -95,3 +97,6 @@ saturation: [false, true],
     alpha: [true, false],
-    case: ['upper', 'lower'],
+    dynamicHue: [true, false],
+    dynamicSaturation: [true, false],
+    dynamicLightness: [true, false],
+    dynamicAlpha: [true, false],
     // swatch
@@ -98,0 +103,0 @@ swatch: [true, false],

RELEASE.md

@@ -0,0 +0,0 @@ # Release

src/scripts/controller.js

@@ -123,3 +123,7 @@ import tinycolor from 'tinycolor2';
                 'AngularColorPickerController.options.allowEmpty',
-                'AngularColorPickerController.options.horizontal'
+                'AngularColorPickerController.options.horizontal',
+                'AngularColorPickerController.options.dynamicHue',
+                'AngularColorPickerController.options.dynamicSaturation',
+                'AngularColorPickerController.options.dynamicLightness',
+                'AngularColorPickerController.options.dynamicAlpha'
             ],
@@ -644,9 +648,9 @@ (newValue) => {
 
-        var zero_sixths = this.getColorValue();
-        var one_sixths = this.getColorValue();
-        var two_sixths = this.getColorValue();
-        var three_sixths = this.getColorValue();
-        var four_sixths = this.getColorValue();
-        var five_sixths = this.getColorValue();
-        var six_sixths = this.getColorValue();
+        var zero_sixths = this.getColorValue(this.options.dynamicHue);
+        var one_sixths = this.getColorValue(this.options.dynamicHue);
+        var two_sixths = this.getColorValue(this.options.dynamicHue);
+        var three_sixths = this.getColorValue(this.options.dynamicHue);
+        var four_sixths = this.getColorValue(this.options.dynamicHue);
+        var five_sixths = this.getColorValue(this.options.dynamicHue);
+        var six_sixths = this.getColorValue(this.options.dynamicHue);
 
@@ -706,7 +710,7 @@ zero_sixths.h = 0;
         var direction = this.options.horizontal ? 'right' : 'bottom';
-        var high = this.getColorValue();
-        var low = this.getColorValue();
+        var high = this.getColorValue(this.options.dynamicSaturation);
+        var low = this.getColorValue(this.options.dynamicSaturation);
 
-        high.s = 100;
-        low.s = 0;
+        high.s = '100%';
+        low.s = '0%';
 
@@ -751,5 +755,5 @@ el.css({
         var direction = this.options.horizontal ? 'right' : 'bottom';
-        var bright = this.getColorValue();
-        var middle = this.getColorValue();
-        var dark = this.getColorValue();
+        var bright = this.getColorValue(this.options.dynamicLightness);
+        var middle = this.getColorValue(this.options.dynamicLightness);
+        var dark = this.getColorValue(this.options.dynamicLightness);
 
@@ -794,4 +798,4 @@ if (this.options.round) {
         var direction = this.options.horizontal ? 'right' : 'bottom';
-        var opaque = this.getColorValue();
-        var transparent = this.getColorValue();
+        var opaque = this.getColorValue(this.options.dynamicAlpha);
+        var transparent = this.getColorValue(this.options.dynamicAlpha);
 
@@ -872,6 +876,6 @@ opaque.a = 1;
         if (this.options.round) {
-            background.s = 0;
+            background.s = '0%';
         } else {
-            background.s = 1;
-            background.v = 1;
+            background.s = '100%';
+            background.v = '100%';
             background.a = 1;
@@ -938,7 +942,7 @@ }
 
-    getColorValue(includeOpacity = true) {
+    getColorValue(dynamicValues = true, includeOpacity = true) {
         let value = {
             h: this.hue,
-            s: `${this.saturation}%`,
-            v: `${this.lightness}%`
+            s: dynamicValues ? `${this.saturation}%` : '100%',
+            v: dynamicValues ? `${this.lightness}%`: '100%'
         };
@@ -949,4 +953,4 @@
                 h: this.hue,
-                s: `${this.saturation}%`,
-                l: `${this.lightness}%`,
+                s: dynamicValues ? `${this.saturation}%` : '100%',
+                l: dynamicValues ? `${this.lightness}%` : '50%'
             };
@@ -956,3 +960,3 @@ }
         if (includeOpacity) {
-            value.a = this.opacity / 100;
+            value.a = dynamicValues ? this.opacity / 100 : 1;
         }
@@ -959,0 +963,0 @@

src/scripts/directive.js

@@ -0,0 +0,0 @@ import controller from './controller';

src/scripts/module.js

@@ -0,0 +0,0 @@ import directive from './directive';

src/scripts/options-service.js

@@ -18,2 +18,3 @@ export default class AngularColorPickerOptions {
             case: 'upper',
+            // sliders
             hue: true,
@@ -23,2 +24,6 @@ saturation: false,
             alpha: true,
+            dynamicHue: true,
+            dynamicSaturation: true,
+            dynamicLightness: true,
+            dynamicAlpha: true,
             // picker
@@ -25,0 +30,0 @@ round: false,

src/scripts/template.js

@@ -0,0 +0,0 @@ export default function template($templateCache) {

test/e2e/allow-empty.protractor.js

@@ -0,0 +0,0 @@ var Page = require('../page-object.js');

test/e2e/alpha.protractor.js

@@ -0,0 +0,0 @@ var Page = require('../page-object.js');

test/e2e/button-clear.protractor.js

@@ -0,0 +0,0 @@ var Page = require('../page-object.js');

test/e2e/button-close.protractor.js

@@ -0,0 +0,0 @@ var Page = require('../page-object.js');

test/e2e/button-reset.protractor.js

@@ -0,0 +0,0 @@ var Page = require('../page-object.js');

test/e2e/hide.protractor.js

@@ -0,0 +0,0 @@ var Page = require('../page-object.js');

test/e2e/hue.protractor.js

@@ -0,0 +0,0 @@ var Page = require('../page-object.js');

test/e2e/id.protractor.js

@@ -0,0 +0,0 @@ var Page = require('../page-object.js');

test/e2e/input-class.protractor.js

@@ -0,0 +0,0 @@ var Page = require('../page-object.js');

test/e2e/lightness.protractor.js

@@ -0,0 +0,0 @@ var Page = require('../page-object.js');

test/e2e/name.protractor.js

@@ -0,0 +0,0 @@ var Page = require('../page-object.js');

test/e2e/placeholder.protractor.js

@@ -0,0 +0,0 @@ var Page = require('../page-object.js');

test/e2e/preserve-input-format.protractor.js

@@ -0,0 +0,0 @@ var Page = require('../page-object.js');

test/e2e/restrict-to-format.protractor.js

@@ -0,0 +0,0 @@ var Page = require('../page-object.js');

test/e2e/saturation.protractor.js

@@ -0,0 +0,0 @@ var Page = require('../page-object.js');

test/e2e/show.protractor.js

@@ -0,0 +0,0 @@ var Page = require('../page-object.js');

test/e2e/swatch-only.protractor.js

@@ -0,0 +0,0 @@ var Page = require('../page-object.js');

test/e2e/swatch-pos.protractor.js

@@ -0,0 +0,0 @@ var Page = require('../page-object.js');

test/e2e/swatch.protractor.js

@@ -0,0 +0,0 @@ var Page = require('../page-object.js');

test/page-object.js

@@ -24,2 +24,3 @@
         this.alpha_field = element(by.model('options.alpha'));
+        this.dynamicHue_field = element(by.model('options.dynamicHue'));
 
@@ -26,0 +27,0 @@ // swatch fields

test/protractor-config.js

@@ -0,0 +0,0 @@ var fs = require("fs");

test/test-app.js

@@ -0,0 +0,0 @@ angular

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

365602

increased by4.14%

Number of package files

72

increased by5.88%

Lines of code

4272

increased by2.3%

Number of lines in readme file

184

increased by2.79%

No dependency changes